/*
 * Brand Bloc site styles.
 * One stylesheet for the whole site: tokens, base, header, footer,
 * homepage sections, shop and product pages, forms, and helpers that
 * keep older page content looking right.
 */

/* ---------- 1. Tokens ---------- */
body.bb-site {
  --bb-ink: #0a0e3f;
  --bb-navy: #10187a;
  --bb-navy-2: #1b27a8;
  --bb-blue: #2438e0;
  --bb-amber: #ffb81c;
  --bb-amber-2: #ffd166;
  --bb-amber-deep: #a35f00;
  --bb-paper: #faf6ec;
  --bb-paper-2: #f1eada;
  --bb-white: #ffffff;
  --bb-line: #e2d9c4;
  --bb-text: #23274a;
  --bb-muted: #555a78;
  --bb-display: "Young Serif", Georgia, "Times New Roman", serif;
  --bb-body: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bb-wrap: 1200px;
  --bb-gutter: clamp(18px, 4vw, 40px);
  --bb-radius: 14px;
  --bb-shadow: 0 1px 2px rgba(10, 14, 63, 0.06), 0 12px 28px -14px rgba(10, 14, 63, 0.28);

  /* Older page content uses the theme's colour names; point them at the new palette. */
  --wp--preset--color--foreground: var(--bb-ink);
  --wp--preset--color--primary: var(--bb-blue);
  --wp--preset--color--secondary: var(--bb-navy);
  --wp--preset--color--secondary-two: var(--bb-ink);
  --wp--preset--color--body-text: var(--bb-text);
  --wp--preset--color--text-link: var(--bb-ink);
  --wp--preset--color--border: var(--bb-line);
  --wp--preset--color--input-field: var(--bb-white);
  --wp--preset--color--background-secondary: var(--bb-paper-2);
  --wp--preset--color--tertiary: var(--bb-paper);
  --wp--preset--color--button-primary: var(--bb-amber-2);
  --wp--preset--color--button-color-bg-hover: var(--bb-ink);
  --wp--preset--color--footer-column-background: var(--bb-ink);
  --wp--preset--color--footer-copy-right-background: var(--bb-ink);
  --wp--preset--color--luminous-vivid-amber: var(--bb-amber);
  --wp--preset--font-family--inter: var(--bb-body);
  --wp--preset--font-family--poppins: var(--bb-body);
  --wp--preset--font-family--roboto: var(--bb-body);
  --wp--preset--font-family--montserrat: var(--bb-body);
  --wp--preset--font-family--jost: var(--bb-body);
  --wp--preset--font-family--outfit: var(--bb-display);
  --wp--preset--font-family--oswald: var(--bb-display);
}

/* ---------- 2. Base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.bb-site {
  margin: 0;
  background: var(--bb-paper);
  color: var(--bb-text);
  font-family: var(--bb-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bb-site *, .bb-site *::before, .bb-site *::after { box-sizing: border-box; }
.bb-site img { max-width: 100%; height: auto; }
.bb-site .wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

.bb-site :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--bb-display);
  font-weight: 400 !important;
  font-synthesis: none;
  color: var(--bb-ink);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.bb-site h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; }
.bb-site h2 { font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.14; }
.bb-site h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.25; }
.bb-site h4 { font-size: 1.15rem; line-height: 1.3; }
.bb-site :is(h1, h2, h3, h4, h5, h6).has-white-color,
.bb-site :is(h1, h2, h3, h4, h5, h6).has-background-color { color: #fff; }

.bb-site a { color: var(--bb-blue); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.bb-site a:hover { color: var(--bb-ink); }
.bb-site :is(h1, h2, h3, h4, h5, h6) a { color: inherit; text-decoration: none; }
.bb-site :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--bb-amber);
  outline-offset: 3px;
  border-radius: 4px;
}
.bb-site ::selection { background: var(--bb-amber); color: var(--bb-ink); }

.bb-site .bb-wrap {
  width: 100%;
  max-width: calc(var(--bb-wrap) + var(--bb-gutter) * 2);
  margin-inline: auto !important;
  padding-inline: var(--bb-gutter);
}
/* Our own sections manage their own spacing; switch off the editor's automatic gaps inside them. */
body.bb-site :where(.bb-topbar, .bb-header, .bb-hero, .bb-section, .bb-cta, .bb-footer, .bb-pagehead) :where(.is-layout-flow, .is-layout-constrained) > *,
body.bb-site :where(.bb-topbar, .bb-header, .bb-hero, .bb-section, .bb-cta, .bb-footer, .bb-pagehead, .bb-main):where(.is-layout-flow) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ---------- 3. Buttons ---------- */
.bb-site .wp-element-button,
.bb-site .wp-block-button__link,
.bb-site .wp-block-search__button,
.bb-site .wp-block-file .wp-block-file__button,
.bb-site .woocommerce a.button,
.bb-site .woocommerce button.button,
.bb-site .woocommerce input.button,
.bb-site.woocommerce a.button,
.bb-site.woocommerce button.button,
.bb-site.woocommerce input.button,
.bb-site input[type="submit"],
.bb-site button[type="submit"]:not(.wc-block-mini-cart__button):not(.wp-block-navigation-submenu__toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background-color: var(--bb-amber);
  color: var(--bb-ink);
  border: 2px solid var(--bb-amber);
  border-radius: 999px;
  padding: 0.72em 1.5em;
  font-family: var(--bb-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.bb-site .wp-element-button:hover,
.bb-site .wp-block-button__link:hover,
.bb-site .wp-block-search__button:hover,
.bb-site .wp-block-file .wp-block-file__button:hover,
.bb-site .woocommerce a.button:hover,
.bb-site .woocommerce button.button:hover,
.bb-site .woocommerce input.button:hover,
.bb-site.woocommerce a.button:hover,
.bb-site.woocommerce button.button:hover,
.bb-site.woocommerce input.button:hover,
.bb-site input[type="submit"]:hover {
  background-color: var(--bb-ink);
  border-color: var(--bb-ink);
  color: #fff;
  transform: translateY(-1px);
}
.bb-site .wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: transparent;
  color: var(--bb-ink);
  border-color: var(--bb-ink);
}
.bb-site .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: var(--bb-ink);
  color: #fff;
}
.bb-site .bb-on-dark .wp-block-button.is-style-outline > .wp-block-button__link {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.bb-site .bb-on-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--bb-ink);
}
.bb-site .bb-on-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--bb-ink);
}
.bb-site .bb-btn-ink > .wp-block-button__link {
  background-color: var(--bb-ink);
  border-color: var(--bb-ink);
  color: #fff;
}
.bb-site .bb-btn-ink > .wp-block-button__link:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--bb-ink);
}
/* Buttons in older page content: keep text readable on amber. */
.bb-site .wp-block-button__link.has-luminous-vivid-amber-background-color,
.bb-site .has-luminous-vivid-amber-background-color.has-white-color {
  color: var(--bb-ink) !important;
}
.bb-site .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 4. Top bar and header ---------- */
.bb-site .bb-topbar {
  background: var(--bb-ink);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.84rem;
  line-height: 1.3;
}
.bb-site .bb-topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}
.bb-site .bb-topbar p { margin: 0; }
.bb-site .bb-topbar__tag { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; color: var(--bb-amber); }
.bb-site .bb-topbar__links { display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 6px 22px; }
.bb-site .bb-topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.bb-site .bb-topbar a:hover { color: var(--bb-amber); }

/* The contact strip scrolls away; the menu bar stays pinned. */
.bb-site header.wp-block-template-part { position: sticky; top: -38px; z-index: 60; }
.bb-site.admin-bar header.wp-block-template-part { top: -6px; }
@media (max-width: 782px) { .bb-site.admin-bar header.wp-block-template-part { top: 0; position: relative; } }

.bb-site .bb-header { background: var(--bb-navy); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px -18px rgba(10, 14, 63, 0.9); }
.bb-site .bb-header__in { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); padding-block: 10px; flex-wrap: nowrap; }
.bb-site .bb-header .wp-block-site-logo { flex: none; line-height: 0; }
.bb-site .bb-header .wp-block-site-logo img { width: 62px; height: auto; display: block; }
.bb-site .bb-header .wp-block-site-title { font-family: var(--bb-display); font-size: 1.3rem; margin: 0; }
.bb-site .bb-header .wp-block-site-title a { color: #fff; text-decoration: none; }

.bb-site .bb-header .bb-nav { flex: 1 1 auto; color: #fff; font-size: 0.98rem; font-weight: 600; }
.bb-site .bb-header .bb-nav .wp-block-navigation__container { gap: 4px clamp(14px, 2vw, 30px); }
.bb-site .bb-header .bb-nav a.wp-block-navigation-item__content { color: inherit; text-decoration: none; padding: 10px 0; position: relative; }
.bb-site .bb-header .bb-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 2px;
  background: var(--bb-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.bb-site .bb-header .bb-nav .wp-block-navigation-item:hover > a.wp-block-navigation-item__content::after,
.bb-site .bb-header .bb-nav .current-menu-item > a.wp-block-navigation-item__content::after { transform: scaleX(1) !important; }
.bb-site .bb-header .bb-nav .wp-block-navigation__submenu-icon { color: inherit; background: none; border: 0; padding: 0; margin-left: 5px; }

.bb-site .bb-header .bb-nav .wp-block-navigation__submenu-container {
  background: #fff;
  color: var(--bb-ink);
  border: 1px solid var(--bb-line);
  border-radius: 12px;
  box-shadow: var(--bb-shadow);
  padding: 8px;
  min-width: 270px;
  font-weight: 600;
  font-size: 0.95rem;
}
.bb-site .bb-header .bb-nav .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
  padding: 9px 12px;
  border-radius: 8px;
  width: 100%;
}
.bb-site .bb-header .bb-nav .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover { background: var(--bb-paper-2); }

.bb-site .bb-header__actions { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.bb-site .bb-header .wc-block-customer-account a,
.bb-site .bb-header .wp-block-woocommerce-customer-account a { color: #fff; display: inline-flex; padding: 8px; border-radius: 999px; text-decoration: none; }
.bb-site .bb-header .wp-block-woocommerce-customer-account a:hover { background: rgba(255, 255, 255, 0.12); }
.bb-site .bb-header .wc-block-mini-cart__button {
  color: #fff;
  background: none;
  border: 0;
  padding: 8px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--bb-body);
  font-weight: 700;
}
.bb-site .bb-header .wc-block-mini-cart__button:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }
.bb-site .bb-header .wc-block-mini-cart__badge { background: var(--bb-amber); color: var(--bb-ink); font-weight: 800; }
.bb-site .bb-header .wc-block-mini-cart__amount { display: none; }

/* Mobile menu: switch to the hamburger below 960px so the menu never crowds. */
.bb-site .bb-header .wp-block-navigation__responsive-container-open,
.bb-site .bb-header .wp-block-navigation__responsive-container-close { color: #fff; background: none; border: 0; padding: 8px; cursor: pointer; }
.bb-site .bb-header .wp-block-navigation__responsive-container-open svg,
.bb-site .bb-header .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }
@media (max-width: 959px) {
  .bb-site .bb-header .bb-nav { flex: none; order: 3; }
  .bb-site .bb-header .bb-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .bb-site .bb-header .bb-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
}
/* Open menu: dark panel with white text and a white close button. The extra
   class names make this win over WordPress's default white panel, which hid
   the white close button. */
.bb-site .bb-header .bb-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--bb-ink);
  color: #fff;
  padding: 18px var(--bb-gutter) 32px;
}
.bb-site .bb-header .bb-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
.bb-site .bb-header .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 56px; align-items: stretch; }
.bb-site .bb-header .is-menu-open .wp-block-navigation__container { width: 100%; align-items: stretch; gap: 0; font-size: 1.2rem; }
.bb-site .bb-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { border-bottom: 1px solid rgba(255, 255, 255, 0.14); align-items: stretch; }
.bb-site .bb-header .is-menu-open a.wp-block-navigation-item__content { padding: 15px 0; display: block; }
.bb-site .bb-header .is-menu-open .wp-block-navigation__submenu-container {
  background: none;
  border: 0;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.86);
  padding: 0 0 12px 14px;
  min-width: 0;
  font-size: 1rem;
  gap: 0;
}
.bb-site .bb-header .is-menu-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content { padding: 9px 0; }
.bb-site .bb-header .is-menu-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover { background: none; color: var(--bb-amber); }
.bb-site .bb-header .is-menu-open .wp-block-navigation__submenu-icon { display: none; }

/* ---------- 5. Hero ---------- */
.bb-site .bb-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 34px),
    radial-gradient(900px 520px at 88% 8%, rgba(36, 56, 224, 0.55), transparent 62%),
    linear-gradient(160deg, var(--bb-ink) 0%, var(--bb-navy) 58%, var(--bb-navy-2) 100%);
}
.bb-site .bb-hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(48px, 7vw, 104px);
}
.bb-site .bb-hero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  line-height: 1.02;
  margin: 0 0 22px;
}
.bb-site .bb-hero h1 em { font-style: normal; color: var(--bb-amber); }
.bb-site .bb-hero__lede { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: rgba(255, 255, 255, 0.86); max-width: 33em; margin: 0 0 28px; }
.bb-site .bb-hero .wp-block-buttons { margin: 0 0 22px; }
.bb-site .bb-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-blue);
}
.bb-site .bb-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.bb-site .bb-on-dark .bb-eyebrow, .bb-site .bb-hero .bb-eyebrow { color: var(--bb-amber); }

.bb-site .bb-search { max-width: 30em; margin: 0 0 26px; }
.bb-site .bb-search .wp-block-search__inside-wrapper {
  display: flex;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 5px;
}
.bb-site .bb-search .wp-block-search__inside-wrapper:focus-within { border-color: var(--bb-amber); }
.bb-site .bb-search .wp-block-search__input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: 0;
  background: transparent;
  padding: 9px 8px 9px 18px;
  font: inherit;
  font-size: 1rem;
  color: var(--bb-ink);
  border-radius: 999px;
  box-shadow: none;
}
.bb-site .bb-search .wp-block-search__input:focus { outline: none; }
.bb-site .bb-search .wp-block-search__input::placeholder { color: var(--bb-muted); opacity: 1; }
body.bb-site .bb-search .wp-block-search__inside-wrapper button.wp-block-search__button { margin: 0; padding: 0.6em 1.3em; background: var(--bb-ink); border-color: var(--bb-ink); color: #fff; }
body.bb-site .bb-search .wp-block-search__inside-wrapper button.wp-block-search__button:hover { background: var(--bb-blue); border-color: var(--bb-blue); transform: none; }
.bb-site .bb-search--light .wp-block-search__inside-wrapper { border-color: var(--bb-line); }

.bb-site ul.bb-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.95rem; font-weight: 600; }
.bb-site ul.bb-ticks li { position: relative; padding-left: 26px; margin: 0; }
.bb-site ul.bb-ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.28em;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--bb-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%230a0e3f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.bb-site ul.bb-ticks--stack { flex-direction: column; gap: 12px; font-size: 1.05rem; }

/* Hero illustration: a stack of paperwork with a stamp. Decorative only. */
.bb-site .bb-docs { position: relative; width: 100%; height: clamp(360px, 38vw, 470px); max-width: 430px; margin-inline: auto; justify-self: center; }
.bb-site .bb-doc {
  position: absolute;
  inset: 0 6% 0 6%;
  background: #fffdf7;
  border-radius: 10px;
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(10, 14, 63, 0.06);
  color: var(--bb-ink);
}
.bb-site .bb-doc--back { background: #d9def8; transform: rotate(8deg) translate(26px, 4px); animation: bb-fan-back 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.bb-site .bb-doc--mid { background: #f3ead2; transform: rotate(-6deg) translate(-22px, 8px); animation: bb-fan-mid 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s both; }
.bb-site .bb-doc--front { transform: rotate(1.5deg); padding: 26px 28px; display: flex; flex-direction: column; animation: bb-fan-front 0.7s ease-out both; }
.bb-site .bb-doc__head { display: flex; justify-content: space-between; align-items: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-muted); padding-bottom: 14px; border-bottom: 2px solid var(--bb-ink); }
.bb-site .bb-doc__title { font-family: var(--bb-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.15; margin: 18px 0 16px; color: var(--bb-ink); }
.bb-site .bb-doc__rows { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; font-weight: 600; }
.bb-site .bb-doc__rows li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #cfc6ae; margin: 0; }
.bb-site .bb-doc__rows li::before {
  content: "";
  width: 20px; height: 20px; flex: none;
  border-radius: 5px;
  background: var(--bb-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%23ffb81c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.bb-site .bb-doc__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-muted); }
.bb-site .bb-doc__foot strong { font-family: var(--bb-display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--bb-ink); }
.bb-site .bb-stamp {
  position: absolute;
  right: -22px; bottom: 86px;
  width: 124px; height: 124px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  border: 3px solid var(--bb-amber-deep);
  outline: 1.5px solid var(--bb-amber-deep);
  outline-offset: 4px;
  background: rgba(255, 184, 28, 0.94);
  color: var(--bb-ink);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-14deg);
  animation: bb-stamp 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0.75s both;
}
@keyframes bb-fan-back { from { transform: rotate(0) translate(0, 0); opacity: 0; } to { transform: rotate(8deg) translate(26px, 4px); opacity: 1; } }
@keyframes bb-fan-mid { from { transform: rotate(0) translate(0, 0); opacity: 0; } to { transform: rotate(-6deg) translate(-22px, 8px); opacity: 1; } }
@keyframes bb-fan-front { from { transform: rotate(0) translateY(18px); opacity: 0; } to { transform: rotate(1.5deg); opacity: 1; } }
@keyframes bb-stamp { from { transform: rotate(-14deg) scale(1.9); opacity: 0; } to { transform: rotate(-14deg) scale(1); opacity: 1; } }

/* ---------- 6. Sections ---------- */
.bb-site .bb-section { padding-block: clamp(56px, 7vw, 100px); }
.bb-site .bb-section--tint { background: var(--bb-paper-2); }
.bb-site .bb-section--dark { background: var(--bb-ink); color: rgba(255, 255, 255, 0.84); }
.bb-site .bb-section--dark :is(h2, h3) { color: #fff; }
.bb-site .bb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-bottom: clamp(26px, 3.4vw, 44px); }
.bb-site .bb-head__text { max-width: 44em; }
.bb-site .bb-head h2 { margin: 0; }
.bb-site .bb-head__lede { margin: 12px 0 0; color: var(--bb-muted); font-size: 1.08rem; }
.bb-site .bb-section--dark .bb-head__lede { color: rgba(255, 255, 255, 0.76); }
.bb-site .bb-more { margin: 0; font-weight: 700; white-space: nowrap; }
.bb-site .bb-more a { color: var(--bb-ink); text-decoration: none; border-bottom: 2px solid var(--bb-amber); padding-bottom: 3px; }
.bb-site .bb-more a::after { content: " \2192"; }
.bb-site .bb-more a:hover { color: var(--bb-blue); }
.bb-site .bb-section--dark .bb-more a { color: #fff; }
.bb-site .bb-section--dark .bb-more a:hover { color: var(--bb-amber); }

/* ---------- 7. Product cards (shop grid and homepage) ---------- */
.bb-site ul.wc-block-grid__products,
.bb-site.woocommerce ul.products,
.bb-site .woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
.bb-site .wc-block-grid.has-4-columns ul.wc-block-grid__products,
.bb-site.woocommerce ul.products.columns-4,
.bb-site .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bb-site ul.products::before, .bb-site ul.products::after { display: none !important; }

.bb-site li.wc-block-grid__product,
.bb-site.woocommerce ul.products li.product,
.bb-site .woocommerce ul.products li.product {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 0 18px !important;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: #fff;
  border: 1px solid var(--bb-line) !important;
  border-radius: var(--bb-radius);
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bb-site li.wc-block-grid__product:hover,
.bb-site ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--bb-shadow); border-color: var(--bb-ink) !important; }
.bb-site li.wc-block-grid__product .wc-block-grid__product-link,
.bb-site ul.products li.product a.woocommerce-LoopProduct-link { display: block; text-decoration: none; color: var(--bb-ink); }
.bb-site li.wc-block-grid__product .wc-block-grid__product-image { margin: 0; background: var(--bb-paper-2); }
.bb-site li.wc-block-grid__product .wc-block-grid__product-image img,
.bb-site ul.products li.product a img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 !important;
  background: var(--bb-paper-2);
}
.bb-site li.wc-block-grid__product .wc-block-grid__product-title,
.bb-site ul.products li.product .woocommerce-loop-product__title,
.bb-site ul.products li.product .woocommerce-loop-category__title {
  font-family: var(--bb-body);
  font-size: 1.06rem;
  font-weight: 700 !important;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--bb-ink);
  margin: 0;
  padding: 16px 18px 0;
  text-wrap: pretty;
}
.bb-site ul.products li.product .woocommerce-loop-category__title mark { background: none; color: var(--bb-muted); font-weight: 500; }
.bb-site li.wc-block-grid__product .wc-block-grid__product-price,
.bb-site ul.products li.product .price {
  display: block;
  margin: 12px 18px 0 !important;
  padding-top: 12px;
  border-top: 1px dashed #cfc6ae;
  font-family: var(--bb-display);
  font-size: 1.2rem !important;
  font-weight: 400;
  color: var(--bb-ink) !important;
}
.bb-site ul.products li.product .price del, .bb-site .wc-block-grid__product-price del { color: var(--bb-muted); font-size: 0.85em; opacity: 1; }
.bb-site ul.products li.product .price ins, .bb-site .wc-block-grid__product-price ins { text-decoration: none; }
.bb-site li.wc-block-grid__product .wc-block-grid__product-add-to-cart { margin: auto 18px 0 !important; padding-top: 14px; }
.bb-site li.wc-block-grid__product .wc-block-grid__product-add-to-cart a,
.bb-site ul.products li.product > a.button,
.bb-site ul.products li.product > .button {
  width: calc(100% - 36px);
  margin: auto 18px 0 !important;
  padding: 0.62em 1em;
  font-size: 0.95rem;
  text-align: center;
}
.bb-site li.wc-block-grid__product .wc-block-grid__product-add-to-cart a { width: 100%; margin: 0 !important; }
.bb-site ul.products li.product > a.button { margin-top: 14px !important; }
.bb-site ul.products li.product > a.woocommerce-LoopProduct-link { flex: 1 1 auto; }
.bb-site ul.products li.product a.added_to_cart { display: block; margin: 10px 18px 0; font-weight: 700; font-size: 0.92rem; }
.bb-site .woocommerce span.onsale, .bb-site.woocommerce span.onsale, .bb-site .wc-block-grid__product-onsale {
  position: absolute;
  top: 12px; left: 12px; right: auto;
  margin: 0;
  min-height: 0; min-width: 0;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--bb-ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: none;
  z-index: 2;
}

/* ---------- 8. Category tiles ---------- */
.bb-site .bb-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 22px; counter-reset: bbcat; }
.bb-site .bb-cat {
  position: relative;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: 0 var(--bb-radius) var(--bb-radius) var(--bb-radius);
  padding: 26px 24px 58px;
  counter-increment: bbcat;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bb-site .bb-cat::before {
  content: counter(bbcat, decimal-leading-zero);
  position: absolute;
  left: -1px; top: -27px;
  height: 27px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  background: var(--bb-amber);
  border-radius: 9px 9px 0 0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--bb-ink);
}
.bb-site .bb-cat::after { content: "\2192"; position: absolute; right: 22px; bottom: 18px; font-size: 1.3rem; font-weight: 700; color: var(--bb-ink); transition: transform 0.2s ease; }
.bb-site .bb-cat:hover { transform: translateY(-4px); box-shadow: var(--bb-shadow); border-color: var(--bb-ink); }
.bb-site .bb-cat:hover::after { transform: translateX(5px); }
.bb-site .bb-cat h3 { margin: 0 0 8px; font-size: 1.32rem; }
.bb-site .bb-cat h3 a { text-decoration: none; color: var(--bb-ink); background: none; }
.bb-site .bb-cat h3 a::after { content: ""; position: absolute; inset: -27px 0 0 0; }
.bb-site .bb-cat p { margin: 0; color: var(--bb-muted); font-size: 0.98rem; line-height: 1.5; }

/* ---------- 9. Steps ---------- */
.bb-site .bb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: bbstep; }
.bb-site .bb-step { position: relative; padding-top: 22px; border-top: 2px solid var(--bb-ink); counter-increment: bbstep; }
.bb-site .bb-step::before {
  content: counter(bbstep);
  display: block;
  font-family: var(--bb-display);
  font-size: clamp(3rem, 5vw, 4.2rem);
  line-height: 1;
  color: var(--bb-amber-deep);
  margin-bottom: 14px;
}
.bb-site .bb-step h3 { margin: 0 0 8px; }
.bb-site .bb-step p { margin: 0; color: var(--bb-muted); }

/* ---------- 10. Why, extras, contact band ---------- */
.bb-site .bb-why { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(26px, 5vw, 72px); align-items: center; }
.bb-site .bb-why__card {
  position: relative;
  background: var(--bb-navy);
  color: #fff;
  border-radius: 20px;
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
}
.bb-site .bb-why__card::after {
  content: "";
  position: absolute;
  right: -70px; bottom: -70px;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 26px solid rgba(255, 184, 28, 0.9);
}
.bb-site .bb-why__num { font-family: var(--bb-display); font-size: clamp(4.2rem, 9vw, 7rem); line-height: 0.95; margin: 0; color: var(--bb-amber); }
.bb-site .bb-why__cap { margin: 10px 0 0; font-size: 1.1rem; font-weight: 600; max-width: 13em; position: relative; z-index: 1; }
.bb-site .bb-why h2 { margin: 0 0 14px; }
.bb-site .bb-why__text > p:not(.bb-eyebrow) { margin: 0 0 22px; color: var(--bb-muted); font-size: 1.08rem; }
.bb-site .bb-why ul.bb-ticks { margin-bottom: 28px; color: var(--bb-ink); }

.bb-site .bb-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.bb-site .bb-extra { background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-radius); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; align-items: flex-start; }
.bb-site .bb-extra .bb-eyebrow { margin-bottom: 12px; }
.bb-site .bb-extra h3 { margin: 0 0 10px; font-size: 1.6rem; }
.bb-site .bb-extra p:not(.bb-eyebrow) { margin: 0 0 20px; color: var(--bb-muted); }
.bb-site .bb-extra .wp-block-buttons { margin-top: auto; }

.bb-site .bb-cta { background: var(--bb-amber); color: var(--bb-ink); padding-block: clamp(44px, 6vw, 76px); }
.bb-site .bb-cta__in { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.bb-site .bb-cta h2 { margin: 0 0 8px; }
.bb-site .bb-cta p { margin: 0; font-size: 1.08rem; font-weight: 500; color: var(--bb-ink); }
.bb-site .bb-cta a:not(.wp-block-button__link) { color: var(--bb-ink); font-weight: 700; }
.bb-site .bb-cta__text { flex: 1 1 420px; }
.bb-site .bb-cta .wp-block-buttons { flex: 0 1 auto; max-width: 100%; }

/* ---------- 11. Footer ---------- */
.bb-site .bb-footer { background: var(--bb-ink); color: rgba(255, 255, 255, 0.76); font-size: 0.97rem; }
.bb-site .bb-footer__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.15fr; gap: 36px clamp(24px, 4vw, 56px); padding-block: clamp(44px, 6vw, 72px) 36px; }
.bb-site .bb-footer h2 { font-family: var(--bb-display); font-size: 1.55rem; color: #fff; margin: 0 0 10px; }
.bb-site .bb-footer h3 { font-family: var(--bb-body); font-size: 0.76rem; font-weight: 700 !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-amber); margin: 0 0 14px; }
.bb-site .bb-footer p { margin: 0 0 12px; }
.bb-site .bb-footer ul { list-style: none; margin: 0; padding: 0; }
.bb-site .bb-footer li { margin: 0 0 9px; }
.bb-site .bb-footer a { color: #fff; text-decoration: none; }
.bb-site .bb-footer a:hover { color: var(--bb-amber); text-decoration: underline; }
.bb-site .bb-footer .wp-block-social-links { gap: 8px; margin-top: 16px; }
.bb-site .bb-footer .wp-block-social-links .wp-social-link { background: rgba(255, 255, 255, 0.1); color: #fff; border-radius: 50%; margin: 0; }
.bb-site .bb-footer .wp-block-social-links .wp-social-link a { padding: 9px; color: #fff; }
.bb-site .bb-footer .wp-block-social-links .wp-social-link:hover { background: var(--bb-amber); }
.bb-site .bb-footer .wp-block-social-links .wp-social-link:hover a { color: var(--bb-ink); }
.bb-site .bb-footer__bar { position: relative; display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; padding-block: 20px 26px; font-size: 0.88rem; }
.bb-site .bb-footer__bar::before { content: ""; position: absolute; top: 0; left: var(--bb-gutter); right: var(--bb-gutter); height: 1px; background: rgba(255, 255, 255, 0.14); }
.bb-site .bb-footer__bar p { margin: 0; }

/* Newsletter sign-up at the top of the footer */
.bb-site .bb-footer__news {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px clamp(24px, 5vw, 64px);
  padding-block: clamp(36px, 5vw, 56px) clamp(30px, 4vw, 44px);
}
.bb-site .bb-footer__news::after { content: ""; position: absolute; bottom: 0; left: var(--bb-gutter); right: var(--bb-gutter); height: 1px; background: rgba(255, 255, 255, 0.14); }
.bb-site .bb-footer__news h2 { margin: 0 0 6px; }
.bb-site .bb-footer__news p { margin: 0; }
.bb-site .bb-news { margin: 0; }
.bb-site .bb-news__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bb-site .bb-news__row { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: #fff; }
.bb-site .bb-news__row:focus-within { outline: 3px solid var(--bb-amber); outline-offset: 2px; }
.bb-site .bb-news input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 8px 10px 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--bb-ink);
  font: inherit;
  font-size: 1rem;
}
.bb-site .bb-news input[type="email"]:focus { outline: none; }
.bb-site .bb-news input[type="email"]::placeholder { color: #6b6f8a; opacity: 1; }
.bb-site .bb-news button {
  flex: none;
  min-height: 46px;
  padding: 0.6em 1.5em;
  border: 0;
  border-radius: 999px;
  background: var(--bb-amber);
  color: var(--bb-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.bb-site .bb-news button:hover { background: var(--bb-amber-2); }
.bb-site .bb-news button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bb-site .bb-news button[disabled] { opacity: 0.6; cursor: progress; }
.bb-site .bb-news__hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.bb-site .bb-footer .bb-news__msg { margin: 10px 6px 0; min-height: 1.4em; font-size: 0.93rem; font-weight: 600; color: #fff; }
.bb-site .bb-footer .bb-news__msg--ok { color: var(--bb-amber-2); }
.bb-site .bb-footer .bb-news__msg--err { color: #ffb4a9; }
@media (max-width: 781px) {
  .bb-site .bb-footer__news { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 12. Inner pages ---------- */
.bb-site .bb-pagehead {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 34px),
    linear-gradient(160deg, var(--bb-ink) 0%, var(--bb-navy) 100%);
  color: #fff;
  padding-block: clamp(34px, 5vw, 64px);
}
.bb-site .bb-pagehead :is(h1, .wp-block-post-title, .wp-block-query-title) { color: #fff; margin: 0; }
.bb-site .bb-pagehead p { color: rgba(255, 255, 255, 0.8); margin: 10px 0 0; }
.bb-site .bb-content { padding: clamp(36px, 5vw, 72px) var(--bb-gutter); }
.bb-site .bb-content > .alignfull { margin-inline: calc(var(--bb-gutter) * -1); max-width: none; width: auto; }
.bb-site .bb-content > .alignfull:first-child { margin-top: calc(clamp(36px, 5vw, 72px) * -1); }
.bb-site .bb-content > .alignfull:last-child { margin-bottom: calc(clamp(36px, 5vw, 72px) * -1); }
.bb-site .bb-content--flush { padding: 0; }
.bb-site .bb-shop { padding-block: clamp(30px, 4vw, 56px) clamp(48px, 6vw, 88px); }
.bb-site .bb-shopbar .bb-search { max-width: 34em; margin: 0 0 16px; }
.bb-site .bb-shopbar ul.wc-block-product-categories-list { margin: 0; }
.bb-site .entry-content :is(p, li) a:not(.wp-block-button__link):not(.wp-element-button) { text-decoration: underline; }
.bb-site .entry-content :is(ul, ol) { padding-left: 1.3em; }
.bb-site .entry-content li { margin-bottom: 0.4em; }

/* Downloads (Our Forms page) */
.bb-site .wp-block-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  padding: 18px 22px;
  font-weight: 700;
}
.bb-site .wp-block-file > a:first-child { color: var(--bb-ink); text-decoration: none !important; }
.bb-site .wp-block-file .wp-block-file__button { font-size: 0.95rem; padding: 0.6em 1.3em; margin: 0; }

/* Forms */
.bb-site :is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], select, textarea) {
  font: inherit;
  font-size: 1rem;
  color: var(--bb-ink);
  background: #fff;
  border: 1.5px solid #cfc6ae;
  border-radius: 10px;
  padding: 11px 14px;
  max-width: 100%;
  box-shadow: none;
}
.bb-site :is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], select, textarea):focus {
  outline: none;
  border-color: var(--bb-blue);
  box-shadow: 0 0 0 3px rgba(36, 56, 224, 0.18);
}
.bb-site textarea { width: 100%; min-height: 130px; }
.bb-site label { font-weight: 600; color: var(--bb-ink); }
.bb-site table { border-collapse: collapse; width: 100%; }
.bb-site :is(th, td) { border: 1px solid var(--bb-line); padding: 12px 14px; text-align: left; }
.bb-site th { background: var(--bb-paper-2); color: var(--bb-ink); }
.bb-site hr, .bb-site .wp-block-separator { border: 0; height: 1px; background: var(--bb-line); }
.bb-site .wp-block-quote { border-left: 4px solid var(--bb-amber); background: #fff; margin: 0; padding: 22px 26px; border-radius: 0 var(--bb-radius) var(--bb-radius) 0; }

/* Blog list */
.bb-site .bb-posts .wp-block-post-template { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.bb-site .bb-posts .wp-block-post { background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-radius); overflow: hidden; margin: 0; }
.bb-site .bb-posts .wp-block-post-featured-image { margin: 0; }
.bb-site .bb-posts .wp-block-post-featured-image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bb-site .bb-post__body { padding: 20px 22px 24px; }
.bb-site .bb-post__body :is(h2, h3) { font-size: 1.3rem; margin: 6px 0 10px; }
.bb-site .bb-post__body .wp-block-post-date { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-muted); }
.bb-site .bb-post__body .wp-block-post-excerpt p { margin: 0 0 10px; color: var(--bb-muted); }
.bb-site .wp-block-query-pagination { margin-top: 36px; gap: 10px; font-weight: 700; }
.bb-site .bb-post__body > * { margin-block: 0 8px; }
.bb-site .bb-single__image img { display: block; width: 100%; border-radius: var(--bb-radius); }
.bb-site .bb-meta { color: rgba(255, 255, 255, 0.8); font-size: 0.92rem; font-weight: 600; margin-top: 10px; }
.bb-site .wp-block-comments { max-width: 820px; margin: 0 auto; padding: 0 var(--bb-gutter) clamp(36px, 5vw, 72px); }
.bb-site .bb-empty { text-align: center; padding-block: clamp(48px, 8vw, 110px); }
.bb-site .bb-empty h1 { margin: 0 0 12px; }
.bb-site .bb-empty p { color: var(--bb-muted); margin: 0 0 24px; }
.bb-site .bb-empty .wp-block-buttons { justify-content: center; }

/* ---------- 13. WooCommerce pages ---------- */
.bb-site .woocommerce-breadcrumb { font-size: 0.9rem; color: var(--bb-muted) !important; margin: 0 0 18px !important; }
.bb-site .woocommerce-breadcrumb a { color: var(--bb-ink) !important; font-weight: 600; text-decoration: none; }
.bb-site .woocommerce-products-header { margin: 0 0 8px; }
.bb-site .woocommerce-products-header__title { font-size: clamp(2rem, 4vw, 3rem) !important; margin: 0 0 6px; }
.bb-site .term-description { color: var(--bb-muted); max-width: 46em; }
.bb-site .woocommerce-result-count { color: var(--bb-muted); font-size: 0.95rem; margin: 10px 0 22px !important; float: none !important; display: inline-block; }
.bb-site .woocommerce-ordering { float: right !important; margin: 0 0 22px !important; }
.bb-site .woocommerce-ordering select { padding: 9px 12px; font-size: 0.95rem; width: auto; }

.bb-site .bb-chips ul, .bb-site ul.wc-block-product-categories-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bb-site ul.wc-block-product-categories-list li { margin: 0; }
.bb-site ul.wc-block-product-categories-list li a {
  display: inline-block;
  padding: 7px 15px;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  color: var(--bb-ink);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}
.bb-site ul.wc-block-product-categories-list li a:hover { border-color: var(--bb-ink); background: var(--bb-amber); }
.bb-site .wc-block-product-categories-list-item-count { display: none; }

.bb-site.woocommerce div.product, .bb-site .woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
.bb-site.woocommerce div.product > *, .bb-site .woocommerce div.product > * { min-width: 0; }
.bb-site.woocommerce div.product div.images,
.bb-site.woocommerce div.product div.summary,
.bb-site .woocommerce div.product div.images,
.bb-site .woocommerce div.product div.summary { float: none !important; width: auto !important; margin: 0 !important; }
.bb-site.woocommerce div.product div.images img { border-radius: var(--bb-radius); border: 1px solid var(--bb-line); background: #fff; }
.bb-site.woocommerce div.product > .woocommerce-tabs,
.bb-site.woocommerce div.product > .related,
.bb-site.woocommerce div.product > .upsells,
.bb-site.woocommerce div.product > .woocommerce-notices-wrapper,
.bb-site.woocommerce div.product > :not(.images):not(.summary):not(.onsale):not(.woocommerce-product-gallery) { grid-column: 1 / -1; }
.bb-site.woocommerce div.product .product_title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 0 0 12px; }
.bb-site.woocommerce div.product .summary p.price, .bb-site.woocommerce div.product .summary span.price {
  font-family: var(--bb-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
  color: var(--bb-ink) !important;
  margin: 0 0 18px;
}
.bb-site.woocommerce div.product .woocommerce-product-details__short-description { color: var(--bb-text); margin-bottom: 22px; }
.bb-site.woocommerce div.product form.cart {
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  padding: 20px 22px;
  margin: 0 0 22px;
}
.bb-site.woocommerce div.product form.cart::after { content: ""; display: table; clear: both; }
.bb-site.woocommerce div.product form.cart .variations { border: 0; margin: 0 0 12px; }
.bb-site.woocommerce div.product form.cart .variations :is(th, td) { border: 0; background: none; padding: 6px 0; display: block; }
.bb-site.woocommerce div.product form.cart .variations select { width: 100%; }
.bb-site.woocommerce div.product form.cart .reset_variations { font-size: 0.88rem; }
.bb-site.woocommerce .quantity .qty { width: 5em; padding: 10px; text-align: center; }
.bb-site.woocommerce div.product form.cart div.quantity { margin: 0 12px 0 0 !important; }
.bb-site.woocommerce div.product form.cart .single_add_to_cart_button { padding: 0.8em 1.8em; font-size: 1.05rem; }
.bb-site.woocommerce div.product .product_meta { font-size: 0.92rem; color: var(--bb-muted); border-top: 1px dashed #cfc6ae; padding-top: 14px; }
.bb-site.woocommerce div.product .product_meta > span { display: block; margin: 0 0 4px; }
.bb-site.woocommerce div.product .product_meta a { color: var(--bb-ink); font-weight: 600; }

.bb-site.woocommerce div.product .woocommerce-tabs { margin-top: clamp(20px, 3vw, 40px); }
.bb-site.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px !important; padding: 0 !important; overflow: visible; }
.bb-site.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.bb-site.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.bb-site.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.bb-site.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.bb-site.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
}
.bb-site.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 8px 18px !important; color: var(--bb-ink) !important; font-weight: 700; text-decoration: none; }
.bb-site.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--bb-ink) !important; border-color: var(--bb-ink) !important; }
.bb-site.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff !important; }
.bb-site.woocommerce div.product .woocommerce-tabs .panel { background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-radius); padding: clamp(20px, 3vw, 36px); margin: 0; }
.bb-site.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { font-size: 1.5rem; margin-top: 0; }
.bb-site.woocommerce .related.products, .bb-site.woocommerce .upsells.products { margin-top: clamp(28px, 4vw, 56px); }
.bb-site.woocommerce .related.products > h2, .bb-site.woocommerce .upsells.products > h2 { margin: 0 0 22px; }

.bb-site .woocommerce-message, .bb-site .woocommerce-info, .bb-site .woocommerce-error, .bb-site .wc-block-components-notice-banner {
  background: #fff !important;
  color: var(--bb-ink) !important;
  border: 1px solid var(--bb-line);
  border-top: 0;
  border-left: 5px solid var(--bb-blue) !important;
  border-radius: 0 12px 12px 0;
  box-shadow: none;
}
.bb-site .woocommerce-message { border-left-color: #1f8a4c !important; }
.bb-site .woocommerce-error { border-left-color: #c62828 !important; }
.bb-site .woocommerce-message::before { color: #1f8a4c; }
.bb-site .woocommerce-info::before { color: var(--bb-blue); }
.bb-site .woocommerce-message a.button, .bb-site .woocommerce-info a.button { padding: 0.5em 1.1em; font-size: 0.92rem; }

.bb-site .woocommerce table.shop_table { border: 1px solid var(--bb-line); border-radius: var(--bb-radius); border-collapse: separate; overflow: hidden; background: #fff; }
.bb-site .woocommerce table.shop_table :is(th, td) { border-width: 0 0 1px; }
.bb-site .woocommerce-cart .cart-collaterals .cart_totals, .bb-site .woocommerce-checkout #order_review { background: #fff; }
.bb-site #add_payment_method #payment, .bb-site .woocommerce-cart #payment, .bb-site .woocommerce-checkout #payment { background: var(--bb-paper-2); border-radius: var(--bb-radius); }
.bb-site .woocommerce-checkout #payment #place_order, .bb-site .wc-proceed-to-checkout a.checkout-button { width: 100%; padding: 0.9em 1.5em; font-size: 1.08rem; }
.bb-site .woocommerce form .form-row input.input-text, .bb-site .woocommerce form .form-row textarea { padding: 11px 14px; }
.bb-site .select2-container .select2-selection--single { height: 46px; border: 1.5px solid #cfc6ae; border-radius: 10px; }
.bb-site .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; padding-left: 14px; color: var(--bb-ink); }
.bb-site .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }

.bb-site .woocommerce nav.woocommerce-pagination { margin-top: 36px; }
.bb-site .woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.bb-site .woocommerce nav.woocommerce-pagination ul li { border: 0; float: none; overflow: visible; }
.bb-site .woocommerce nav.woocommerce-pagination ul li :is(a, span) { min-width: 44px; padding: 11px 14px; border: 1px solid var(--bb-line); border-radius: 999px; background: #fff; color: var(--bb-ink); font-weight: 700; }
.bb-site .woocommerce nav.woocommerce-pagination ul li span.current, .bb-site .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--bb-ink); border-color: var(--bb-ink); color: #fff; }

.bb-site .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bb-site .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--bb-line); color: var(--bb-ink); font-weight: 600; text-decoration: none !important; }
.bb-site .woocommerce-MyAccount-navigation li.is-active a, .bb-site .woocommerce-MyAccount-navigation li a:hover { background: var(--bb-ink); border-color: var(--bb-ink); color: #fff; }

/* ---------- 14. Helpers used by older page content ---------- */
.bb-site .has-shadow-dark, .bb-site .has-no-hover-shadow-dark { box-shadow: var(--bb-shadow); }
.bb-site .image-zoom-hover { overflow: hidden; }
.bb-site .has-no-underline, .bb-site .has-no-underline a { text-decoration: none; }
.bb-site .wp-block-image.vertical-aligmiddle img { vertical-align: middle; }
.bb-site ul[class*="gutenify-list-style"] { list-style: none; padding-left: 30px; }
.bb-site ul[class*="gutenify-list-style"] li { position: relative; }
.bb-site ul[class*="gutenify-list-style"] li::before { content: "\2713"; position: absolute; left: -28px; top: 0; font-weight: 800; color: var(--bb-amber-deep); }
.bb-site .has-background-color ul[class*="gutenify-list-style"] li::before,
.bb-site ul[class*="gutenify-list-style"].has-background-color li::before { color: var(--bb-amber); }
.bb-site .wp-block-cover { border-radius: 0; }
/* Headings sitting on photos or on white-text panels take the surrounding text colour. */
.bb-site .wp-block-cover :is(h1, h2, h3, h4, h5, h6):where(:not(.has-text-color)),
.bb-site :is(.has-white-color, .has-background-color):not(:is(h1, h2, h3, h4, h5, h6)) :is(h1, h2, h3, h4, h5, h6):where(:not(.has-text-color)) { color: inherit; }
.bb-site .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}
@media (max-width: 767px) {
  .bb-site .hide-on-mobile, .bb-site .mobile-hide { display: none !important; }
  .bb-site .mobile-aligncenter { text-align: center; justify-content: center; }
}

/* ---------- 15. Responsive ---------- */
@media (max-width: 1023px) {
  .bb-site ul.wc-block-grid__products,
  .bb-site.woocommerce ul.products,
  .bb-site .woocommerce ul.products,
  .bb-site .wc-block-grid.has-4-columns ul.wc-block-grid__products,
  .bb-site.woocommerce ul.products.columns-4,
  .bb-site .woocommerce ul.products.columns-4,
  .bb-site .bb-posts .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-site .bb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-site .bb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  .bb-site .bb-hero__in { grid-template-columns: minmax(0, 1fr); }
  .bb-site .bb-docs { display: none; }
  .bb-site .bb-why { grid-template-columns: minmax(0, 1fr); }
  .bb-site .bb-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .bb-site .bb-extras { grid-template-columns: minmax(0, 1fr); }
  .bb-site.woocommerce div.product, .bb-site .woocommerce div.product { grid-template-columns: minmax(0, 1fr); }
  .bb-site .bb-topbar__tag { display: none; }
  .bb-site .bb-topbar__in { justify-content: center; }
  .bb-site .bb-topbar__links { justify-content: center; }
}
@media (max-width: 599px) {
  .bb-site ul.wc-block-grid__products,
  .bb-site.woocommerce ul.products,
  .bb-site .woocommerce ul.products,
  .bb-site .wc-block-grid.has-4-columns ul.wc-block-grid__products,
  .bb-site.woocommerce ul.products.columns-4,
  .bb-site .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bb-site li.wc-block-grid__product .wc-block-grid__product-title,
  .bb-site ul.products li.product .woocommerce-loop-product__title,
  .bb-site ul.products li.product .woocommerce-loop-category__title { font-size: 0.95rem; padding: 12px 12px 0; }
  .bb-site li.wc-block-grid__product .wc-block-grid__product-price,
  .bb-site ul.products li.product .price { margin: 10px 12px 0 !important; font-size: 1.02rem !important; }
  .bb-site li.wc-block-grid__product .wc-block-grid__product-add-to-cart { margin: auto 12px 0 !important; }
  .bb-site ul.products li.product > a.button, .bb-site ul.products li.product > .button { width: calc(100% - 24px); margin-inline: 12px !important; font-size: 0.88rem; padding: 0.6em 0.5em; }
  .bb-site li.wc-block-grid__product .wc-block-grid__product-add-to-cart a { font-size: 0.88rem; padding: 0.6em 0.5em; }
  .bb-site .bb-cats, .bb-site .bb-footer__grid, .bb-site .bb-posts .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
  .bb-site .bb-topbar .bb-hours { display: none; }
  .bb-site .bb-topbar__links { gap: 6px 16px; font-size: 0.8rem; }
  .bb-site .bb-hero .wp-block-buttons .wp-block-button, .bb-site .bb-cta .wp-block-buttons .wp-block-button { flex: 1 1 100%; }
  .bb-site .bb-hero .wp-block-buttons .wp-block-button__link, .bb-site .bb-cta .wp-block-buttons .wp-block-button__link { width: 100%; }
  .bb-site .bb-cta .wp-block-buttons, .bb-site .bb-hero .wp-block-buttons { width: 100%; }
  .bb-site .woocommerce-ordering { float: none !important; }
  .bb-site .woocommerce-ordering select { width: 100%; }
}

@media (max-width: 359px) {
  .bb-site .bb-topbar a[href^="mailto"] { display: none; }
}

/* ---------- 15b. Plugin touch-ups ---------- */
.bb-site .bb-header .wp-block-woocommerce-customer-account svg { width: 22px; height: 22px; }
.bb-site .bb-header .wc-block-mini-cart__icon { width: 30px; height: 30px; }
/* The main shop page already lists the categories as tiles, so the chip row is only for category and search pages. */
.bb-site.post-type-archive-product:not(.search) .bb-shopbar .wp-block-woocommerce-product-categories { display: none; }
body.bb-site {
  --wpforms-button-background-color: var(--bb-amber);
  --wpforms-button-text-color: var(--bb-ink);
  --wpforms-button-border-radius: 999px;
  --wpforms-field-border-radius: 10px;
  --wpforms-field-border-color: #cfc6ae;
  --wpforms-label-color: var(--bb-ink);
  --wpforms-field-text-color: var(--bb-ink);
}

/* ---------- 16. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .bb-site *, .bb-site *::before, .bb-site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}