/* ============================================================
   BROTHER ELITE CUSTOM THEME — MAIN STYLESHEET
   Mobile-first, WooCommerce-ready, Brother blue design system
   ============================================================ */

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --be-blue:        #0046B8;
  --be-blue-dark:   #003A9A;
  --be-blue-hover:  #0055D4;
  --be-blue-light:  #EEF4FF;
  --be-blue-pale:   #F0F6FF;
  --be-navy:        #0A1628;
  --be-navy-2:      #0F2040;
  --be-text:        #1A2640;
  --be-text-2:      #3D4F6B;
  --be-text-3:      #6B7A99;
  --be-white:       #FFFFFF;
  --be-off-white:   #F8FAFD;
  --be-grey-1:      #F2F5FA;
  --be-grey-2:      #E8EDF5;
  --be-grey-3:      #CDD4E4;
  --be-border:      #E2E8F5;
  --be-green:       #25D366;
  --be-green-dark:  #1DA851;
  --be-gold:        #FFB612;

  --be-shadow-xs:   0 1px 3px rgba(10, 22, 40, 0.06);
  --be-shadow-sm:   0 2px 8px rgba(0, 70, 184, 0.08);
  --be-shadow-md:   0 4px 20px rgba(0, 70, 184, 0.12);
  --be-shadow-lg:   0 8px 40px rgba(0, 70, 184, 0.16);
  --be-shadow-card: 0 2px 12px rgba(10, 22, 40, 0.08);

  --be-radius-sm:   8px;
  --be-radius-md:   12px;
  --be-radius-lg:   20px;
  --be-radius-xl:   28px;

  --be-header-h:    72px;
  --be-max-width:   1320px;
  --be-container:   1280px;

  --be-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --be-transition:  0.2s ease;
  --be-transition-lg: 0.35s ease;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--be-font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--be-text);
  background-color: var(--be-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--be-blue); outline-offset: 3px; border-radius: 3px; }

ul, ol { list-style: none; }

button { cursor: pointer; border: none; background: none; font-family: inherit; }

address { font-style: normal; }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--be-font);
  font-weight: 700;
  line-height: 1.2;
  color: var(--be-text);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
h4 { font-size: 1.125rem; }

p { color: var(--be-text-2); line-height: 1.7; }

strong { font-weight: 600; color: var(--be-text); }

/* Skip link */
.be-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.be-skip-link:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  padding: 12px 20px;
  background: var(--be-blue);
  color: white;
  font-weight: 600;
  border-radius: var(--be-radius-sm);
  z-index: 9999;
}

/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.be-container {
  width: 100%;
  max-width: var(--be-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.be-section-header {
  text-align: center;
  margin-bottom: 48px;
}
.be-section-title {
  margin-bottom: 12px;
}
.be-section-subtitle {
  font-size: 1.0625rem;
  color: var(--be-text-3);
  max-width: 540px;
  margin: 0 auto;
}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.be-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--be-font);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--be-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--be-transition), box-shadow var(--be-transition), background-color var(--be-transition), color var(--be-transition), border-color var(--be-transition);
  text-decoration: none;
  white-space: nowrap;
}
.be-btn:hover { transform: translateY(-2px); }
.be-btn:active { transform: translateY(0); }

.be-btn--primary {
  background-color: var(--be-blue);
  color: var(--be-white);
  border-color: var(--be-blue);
  box-shadow: var(--be-shadow-sm);
}
.be-btn--primary:hover {
  background-color: var(--be-blue-hover);
  border-color: var(--be-blue-hover);
  box-shadow: var(--be-shadow-md);
  color: var(--be-white);
}

.be-btn--outline {
  background-color: transparent;
  color: var(--be-blue);
  border-color: var(--be-blue);
}
.be-btn--outline:hover {
  background-color: var(--be-blue);
  color: var(--be-white);
  box-shadow: var(--be-shadow-sm);
}

.be-btn--white {
  background-color: var(--be-white);
  color: var(--be-blue);
  border-color: var(--be-white);
  box-shadow: var(--be-shadow-sm);
}
.be-btn--white:hover {
  background-color: var(--be-blue-light);
  color: var(--be-blue-dark);
  box-shadow: var(--be-shadow-md);
}

.be-btn--whatsapp {
  background-color: var(--be-green);
  color: var(--be-white);
  border-color: var(--be-green);
  box-shadow: var(--be-shadow-sm);
}
.be-btn--whatsapp:hover {
  background-color: var(--be-green-dark);
  border-color: var(--be-green-dark);
  box-shadow: var(--be-shadow-md);
  color: var(--be-white);
}

.be-btn--lg { padding: 15px 32px; font-size: 1rem; }
.be-btn--sm { padding: 9px 18px; font-size: 0.875rem; }
.be-btn--full { width: 100%; }

/* ============================================================
   6. BADGES
   ============================================================ */
.be-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 40px;
  line-height: 1;
  white-space: nowrap;
}
.be-badge--embroidery  { background: #EEF4FF; color: var(--be-blue); }
.be-badge--industrial  { background: #1A2640; color: #fff; }
.be-badge--combo       { background: #FFF3E0; color: #E65100; }
.be-badge--beginner    { background: #E8F5E9; color: #2E7D32; }
.be-badge--electronic  { background: #F3E5F5; color: #7B1FA2; }
.be-badge--overlocker  { background: #FFF8E1; color: #F57F17; }
.be-badge--craft       { background: #FCE4EC; color: #C62828; }
.be-badge--featured    { background: var(--be-gold); color: #1A1A1A; }
.be-badge--sale        { background: #FF3B30; color: #fff; }

/* ============================================================
   7. HEADER
   ============================================================ */
.be-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--be-header-h);
  background-color: var(--be-white);
  border-bottom: 1px solid var(--be-border);
  box-shadow: var(--be-shadow-xs);
  z-index: 1000;
  transition: box-shadow var(--be-transition);
}
.be-header.is-scrolled { box-shadow: var(--be-shadow-sm); }

.be-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}
/* The header is allowed to breathe wider than the page's content
   max-width — a tighter cap here is what was starving the nav of
   room and forcing labels to wrap onto two lines. */
@media (min-width: 1200px) {
  .be-header__inner.be-container { max-width: clamp(1440px, 92vw, 1680px); }
}

/* Logo */
/* Pulled flush to the true left edge of the viewport by cancelling out
   .be-container's own left padding (20/32/40px at each breakpoint),
   rather than everything else in the header shifting. */
.be-header__logo {
  margin-left: -20px;
}
@media (min-width: 768px) {
  .be-header__logo { margin-left: -32px; }
}
@media (min-width: 1024px) {
  .be-header__logo { margin-left: -40px; }
}
.be-header__logo a {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.be-header__logo img,
.be-header__logo .custom-logo { height: 44px; width: auto; }

.be-header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.be-logo-name {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--be-blue);
  letter-spacing: -0.03em;
}
.be-logo-tag {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--be-text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Primary navigation */
.be-nav { display: none; flex: 1; min-width: 0; }
.be-nav__list {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.be-nav__list li { flex-shrink: 0; }
.be-nav__list li a {
  display: block;
  padding: 11px 18px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--be-text);
  border-radius: var(--be-radius-sm);
  white-space: nowrap;
  transition: color var(--be-transition), background-color var(--be-transition);
}
.be-nav__list li a:hover,
.be-nav__list li.current-menu-item > a {
  color: var(--be-blue);
  background-color: var(--be-blue-pale);
}

/* Dropdown: items with children (e.g. Brother Machines > categories) */
.be-nav__list li.menu-item-has-children {
  position: relative;
}
.be-nav__list li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  margin-bottom: 1px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
  transition: transform var(--be-transition);
}
.be-nav__list li.menu-item-has-children:hover > a::after,
.be-nav__list li.menu-item-has-children:focus-within > a::after {
  transform: rotate(-135deg);
}
/* Premium mega-menu panel (enhanced by JS: icons, eyebrow, footer CTA) */
.be-nav-dropdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 2px 6px;
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  width: 560px;
  margin: 0;
  padding: 20px 20px 16px;
  list-style: none;
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-lg);
  box-shadow: var(--be-shadow-lg);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity var(--be-transition-lg), transform var(--be-transition-lg), visibility var(--be-transition-lg);
}
.be-nav-dropdown::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--be-white);
  border-left: 1px solid var(--be-border);
  border-top: 1px solid var(--be-border);
  border-radius: 3px 0 0 0;
  transform: translateX(-50%) rotate(45deg);
}
.be-nav__list li.menu-item-has-children:hover > .be-nav-dropdown,
.be-nav__list li.menu-item-has-children:focus-within > .be-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.be-nav-dropdown__eyebrow {
  grid-column: 1 / -1;
  padding: 0 8px 12px;
  margin-bottom: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--be-text-3);
  border-bottom: 1px solid var(--be-border);
}
.be-nav-dropdown li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  border-radius: var(--be-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--be-text);
  transition: background-color var(--be-transition), color var(--be-transition);
}
.be-nav-dropdown li a:hover { background-color: var(--be-blue-pale); color: var(--be-blue); }
.be-nav-dropdown__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--be-blue-light);
  color: var(--be-blue);
  flex-shrink: 0;
  transition: background-color var(--be-transition), color var(--be-transition), transform var(--be-transition);
}
.be-nav-dropdown__icon svg,
.be-nav-dropdown__icon img { width: 17px; height: 17px; }
.be-nav-dropdown__icon img { transition: filter var(--be-transition); }
.be-nav-dropdown li a:hover .be-nav-dropdown__icon {
  background: var(--be-blue);
  color: var(--be-white);
  transform: scale(1.08);
}
/* Our nav icons are pre-colored brand-blue SVGs (not currentColor), so on
   hover they'd vanish against the now-blue chip -- force them white. */
.be-nav-dropdown li a:hover .be-nav-dropdown__icon img { filter: brightness(0) invert(1); }
.be-nav-dropdown__footer {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--be-border);
}
.be-nav-dropdown__footer a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px !important;
  background: var(--be-navy) !important;
  color: var(--be-white) !important;
  font-weight: 700 !important;
  border-radius: var(--be-radius-sm);
}
.be-nav-dropdown__footer a:hover { background: var(--be-blue) !important; }
.be-nav-dropdown__footer a::after { content: '\2192'; margin-left: 10px; }

/* Header actions */
.be-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.be-header__whatsapp {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background-color: var(--be-green);
  color: var(--be-white);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--be-radius-sm);
  transition: background-color var(--be-transition), transform var(--be-transition);
}
.be-header__whatsapp:hover {
  background-color: var(--be-green-dark);
  color: var(--be-white);
  transform: translateY(-1px);
}

.be-header__icon,
.be-header__cart {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  color: var(--be-text-2);
  border-radius: var(--be-radius-sm);
  transition: color var(--be-transition), background-color var(--be-transition);
}
.be-header__icon:hover,
.be-header__cart:hover {
  color: var(--be-blue);
  background-color: var(--be-blue-pale);
}

/* Cart count bubble */
.be-cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background-color: var(--be-blue);
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--be-transition), transform var(--be-transition);
}
.be-cart-count.has-items {
  opacity: 1;
  transform: scale(1);
}

/* Hamburger button */
.be-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: var(--be-radius-sm);
  padding: 8px;
  transition: background-color var(--be-transition);
}
.be-hamburger:hover { background-color: var(--be-grey-1); }
.be-hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--be-text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}
.be-hamburger.is-open .be-hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.be-hamburger.is-open .be-hamburger__bar:nth-child(2) { opacity: 0; width: 0; }
.be-hamburger.is-open .be-hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   8. MOBILE MENU
   ============================================================ */
.be-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 90vw);
  background-color: var(--be-white);
  box-shadow: var(--be-shadow-lg);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.be-mobile-menu.is-open { transform: translateX(0); }

.be-mobile-menu__inner {
  display: flex;
  flex-direction: column;
  padding: 80px 24px 40px;
  min-height: 100%;
  gap: 24px;
}

.be-mobile-menu__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--be-radius-sm);
  color: var(--be-text);
  transition: background-color var(--be-transition);
}
.be-mobile-menu__close:hover { background-color: var(--be-grey-1); }

.be-mobile-nav { display: flex; flex-direction: column; }
.be-mobile-nav li a {
  display: block;
  padding: 13px 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--be-text);
  border-bottom: 1px solid var(--be-border);
  transition: color var(--be-transition), padding-left var(--be-transition);
}
.be-mobile-nav li a:hover { color: var(--be-blue); padding-left: 6px; }

/* Sub-menu (e.g. Brother Machines > categories): always expanded on mobile, no hover */
.be-mobile-nav .sub-menu {
  list-style: none;
  margin: 0 0 4px;
  padding: 0 0 0 16px;
}
.be-mobile-nav .sub-menu li a {
  padding: 10px 0;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--be-text-2);
  border-bottom: 1px dashed var(--be-border);
}
.be-mobile-nav > li.menu-item-has-children > a {
  border-bottom-color: transparent;
  padding-bottom: 6px;
}

.be-mobile-menu__ctas { display: flex; flex-direction: column; gap: 10px; }

.be-mobile-menu__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--be-border);
}
.be-mobile-menu__contact a {
  font-size: 0.875rem;
  color: var(--be-text-3);
  transition: color var(--be-transition);
}
.be-mobile-menu__contact a:hover { color: var(--be-blue); }

/* Overlay */
.be-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 22, 40, 0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(2px);
}
.be-overlay.is-visible { opacity: 1; pointer-events: auto; }

/* ============================================================
   9. HERO SECTION
   ============================================================ */
.be-hero {
  background-color: var(--be-white);
  padding: 64px 0 48px;
  overflow: hidden;
  position: relative;
}

.be-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
}

.be-hero__copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
}

.be-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--be-navy);
  margin-bottom: 18px;
}
.be-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 3px;
  background-color: var(--be-blue);
  border-radius: 2px;
  flex-shrink: 0;
}

.be-hero__heading {
  font-size: clamp(2.1rem, 5.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--be-navy);
  margin-bottom: 20px;
  text-wrap: balance;
}
.be-hero__heading-accent { color: var(--be-blue); }

.be-hero__subtext {
  font-size: 1.0625rem;
  color: var(--be-text-2);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 32px;
}

.be-hero__buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.be-hero__image-wrap {
  /* Mobile: sits in normal flex flow below the copy (.be-hero__inner
     is already a centered column) — the machine is the product being
     sold, it should never be reduced to a barely-visible watermark. */
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.be-hero__blob {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 55%, #d6e5ff 0%, #eef4ff 45%, transparent 75%);
  z-index: 0;
  pointer-events: none;
}

.be-hero__image-float {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 16px 48px rgba(0, 70, 184, 0.18));
  animation: be-hero-float 6s ease-in-out infinite;
}

@keyframes be-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.be-hero__img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ============================================================
   9B. PILLAR STRIP (What We Do)
   ============================================================ */
.be-pillars {
  padding: 56px 0 64px;
  background: var(--be-white);
}

.be-pillars__group-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--be-text-3);
  margin: 0 0 12px;
}
.be-pillars__group-title--services { margin-top: 32px; }

.be-pillars__strip {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  overflow: hidden;
  box-shadow: var(--be-shadow-xs);
}

.be-pillar-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: var(--be-white);
  border-bottom: 1px solid var(--be-border);
  transition: background-color 0.2s ease;
}

.be-pillar-item:last-child { border-bottom: none; }
.be-pillar-item:hover { background-color: var(--be-grey-1); }

.be-pillar-item__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--be-blue-light);
  color: var(--be-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.be-pillar-item__icon svg { width: 24px; height: 24px; }

/* Brand logo variant (Brother / Jack / Creality dealer strip). We keep the
   real vendor logos but recolor them to --be-blue via a CSS mask, so all
   three read consistently in the same light-blue chip as the service
   icons instead of each vendor's own (mismatched) logo colours. */
.be-pillar-item__logo-mask {
  width: 24px;
  height: 24px;
  background-color: var(--be-blue);
  -webkit-mask-image: var(--logo-url);
  mask-image: var(--logo-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.be-pillar-item__text { flex: 1; min-width: 0; }

.be-pillar-item__title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--be-navy);
  margin-bottom: 2px;
}

.be-pillar-item__desc {
  font-size: 0.8125rem;
  color: var(--be-text-2);
  line-height: 1.4;
}

.be-pillar-item__arrow {
  font-size: 1.125rem;
  color: var(--be-blue);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.be-pillar-item:hover .be-pillar-item__arrow { transform: translateX(4px); }

@media (min-width: 860px) {
  .be-pillars__strip { flex-direction: row; }
  .be-pillar-item {
    flex: 1;
    flex-direction: column;
    text-align: center;
    border-bottom: none;
    border-right: 1px solid var(--be-border);
    padding: 28px 20px;
    gap: 10px;
  }
  .be-pillar-item:last-child { border-right: none; }
  .be-pillar-item__icon { width: 56px; height: 56px; }
  .be-pillar-item__icon svg { width: 28px; height: 28px; }
  .be-pillar-item__logo-mask { width: 28px; height: 28px; }
  .be-pillar-item__arrow { display: none; }
  .be-pillar-item__title { font-size: 1.0625rem; }
  .be-pillar-item__desc { font-size: 0.8125rem; }
}

/* ============================================================
   10. TRUST STRIP
   ============================================================ */
.be-trust {
  background-color: var(--be-grey-1);
  padding: 48px 0;
  border-top: 1px solid var(--be-border);
  border-bottom: 1px solid var(--be-border);
}

.be-trust__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.be-trust__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px;
  background: var(--be-white);
  border-radius: var(--be-radius-md);
  border: 1px solid var(--be-border);
  box-shadow: var(--be-shadow-xs);
  transition: box-shadow var(--be-transition), transform var(--be-transition);
}
.be-trust__item:hover { box-shadow: var(--be-shadow-sm); transform: translateY(-2px); }

.be-trust__icon {
  width: 52px;
  height: 52px;
  background-color: var(--be-blue-light);
  border-radius: var(--be-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--be-blue);
  flex-shrink: 0;
}

.be-trust__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--be-text);
  margin: 0;
}

.be-trust__text {
  font-size: 0.875rem;
  color: var(--be-text-3);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   11. CATEGORY SECTION
   ============================================================ */
.be-categories { padding: 80px 0; background: var(--be-white); }

.be-categories__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.be-cat-card {
  display: block;
  border-radius: var(--be-radius-md);
  overflow: hidden;
  border: 1px solid var(--be-border);
  background: var(--be-white);
  box-shadow: var(--be-shadow-card);
  transition: transform var(--be-transition), box-shadow var(--be-transition);
  text-decoration: none;
}
.be-cat-card:hover { transform: translateY(-4px); box-shadow: var(--be-shadow-md); }

.be-cat-card__image-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--be-grey-1);
}
.be-cat-card__image-wrap--placeholder {
  background: linear-gradient(135deg, var(--be-blue-light), var(--be-grey-1));
}

.be-cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.be-cat-card:hover .be-cat-card__img { transform: scale(1.04); }

.be-cat-card__body { padding: 18px; }
.be-cat-card__title { font-size: 1rem; font-weight: 700; color: var(--be-text); margin-bottom: 4px; }
.be-cat-card__desc { font-size: 0.8125rem; color: var(--be-text-3); line-height: 1.5; margin-bottom: 10px; }
.be-cat-card__cta { font-size: 0.875rem; font-weight: 600; color: var(--be-blue); }

.be-categories__footer { text-align: center; }

/* ============================================================
   12. HELP CTA
   ============================================================ */
.be-services-cta {
  background: linear-gradient(135deg, var(--be-navy) 0%, #1A3A7A 60%, #0046B8 100%);
  border: none;
}
.be-services-cta .be-help-cta__icon { background: rgba(255,255,255,0.15); color: var(--be-white); }
.be-services-cta .be-help-cta__heading,
.be-services-cta .be-help-cta__body { color: var(--be-white); }
.be-services-cta .be-help-cta__body { opacity: 0.85; }

.be-help-cta {
  background-color: var(--be-blue-pale);
  border-top: 1px solid var(--be-blue-light);
  border-bottom: 1px solid var(--be-blue-light);
  padding: 56px 0;
}

.be-help-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.be-help-cta__icon {
  width: 72px;
  height: 72px;
  background: var(--be-blue-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--be-blue);
  flex-shrink: 0;
}

.be-help-cta__heading {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--be-navy);
  margin-bottom: 8px;
}

.be-help-cta__body {
  font-size: 1.0625rem;
  color: var(--be-text-2);
  max-width: 480px;
  margin: 0 auto;
}

/* ============================================================
   13. FEATURED PRODUCTS
   ============================================================ */
.be-featured-products { padding: 80px 0; background: var(--be-off-white); }

.be-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.be-product-card {
  background: var(--be-white);
  border-radius: var(--be-radius-md);
  border: 1px solid var(--be-border);
  box-shadow: var(--be-shadow-card);
  overflow: hidden;
  transition: transform var(--be-transition), box-shadow var(--be-transition);
  display: flex;
  flex-direction: column;
}
.be-product-card:hover { transform: translateY(-5px); box-shadow: var(--be-shadow-md); }

.be-product-card__image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--be-grey-1);
}

.be-product-card__img,
.be-product-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.be-product-card:hover .be-product-card__img,
.be-product-card:hover .be-product-card__image-wrap img { transform: scale(1.04); }

.be-product-card__image-wrap .be-badge,
.be-product-card__image-wrap .onsale {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.be-product-card__image-wrap .be-badge--sale,
.be-product-card__image-wrap .onsale {
  left: auto;
  right: 10px;
  background: #FF3B30;
  color: white;
  padding: 4px 10px;
  border-radius: 40px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* WooCommerce default onsale */
.be-product-card__image-wrap .onsale { mark: unset; }

.be-product-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.be-product-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.be-product-card__title a { color: var(--be-text); transition: color var(--be-transition); }
.be-product-card__title a:hover { color: var(--be-blue); }

.be-product-card__price {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--be-blue);
}
.be-product-card__price .woocommerce-Price-amount { font-weight: 700; color: var(--be-blue); }
.be-product-card__price del { color: var(--be-text-3); font-weight: 400; font-size: 0.875rem; margin-right: 4px; }
.be-product-card__price ins { text-decoration: none; }

.be-product-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.be-product-card__actions .be-btn { width: 100%; text-align: center; }

.be-product-card__details-link {
  display: block;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--be-text-3);
  transition: color var(--be-transition);
}
.be-product-card__details-link:hover { color: var(--be-blue); }

.be-featured-products__footer { text-align: center; margin-top: 8px; }

/* ============================================================
   14. WHY BUY
   ============================================================ */
.be-why-buy {
  padding: 80px 0;
  background: var(--be-white);
}

.be-why-buy__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.be-why-card {
  padding: 28px;
  border-radius: var(--be-radius-md);
  border: 1px solid var(--be-border);
  background: var(--be-white);
  box-shadow: var(--be-shadow-xs);
  transition: box-shadow var(--be-transition), transform var(--be-transition);
}
.be-why-card:hover { box-shadow: var(--be-shadow-sm); transform: translateY(-3px); }

.be-why-card__icon {
  width: 60px;
  height: 60px;
  background: var(--be-blue-light);
  border-radius: var(--be-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--be-blue);
  margin-bottom: 16px;
}

.be-why-card__title { font-size: 1.0625rem; font-weight: 700; color: var(--be-text); margin-bottom: 8px; }
.be-why-card__text  { font-size: 0.9375rem; color: var(--be-text-2); line-height: 1.65; margin: 0; }

/* ============================================================
   15. REVIEWS
   ============================================================ */
.be-reviews {
  padding: 80px 0;
  background: var(--be-grey-1);
}

.be-reviews__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.be-reviews__score {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--be-text);
  margin-left: 4px;
}
.be-reviews__count {
  font-size: 0.875rem;
  color: var(--be-text-3);
}

.be-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.be-review-card {
  background: var(--be-white);
  border-radius: var(--be-radius-md);
  border: 1px solid var(--be-border);
  padding: 24px;
  box-shadow: var(--be-shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.be-review-card__stars { display: flex; gap: 2px; }
.be-review-card__quote {
  font-size: 0.9375rem;
  color: var(--be-text-2);
  line-height: 1.65;
  font-style: italic;
  flex: 1;
}
.be-review-card__author { display: flex; align-items: center; gap: 12px; }
.be-review-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--be-blue);
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.be-review-card__author strong { display: block; font-size: 0.875rem; color: var(--be-text); }
.be-review-card__author span { font-size: 0.8125rem; color: var(--be-text-3); }

.be-reviews__footer { text-align: center; }

/* ============================================================
   16. VISIT STORE
   ============================================================ */
.be-visit-store {
  padding: 80px 0;
  background: var(--be-white);
}

.be-visit-store__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.be-visit-store__heading { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 8px; }
.be-visit-store__subtitle { color: var(--be-text-3); margin-bottom: 28px; font-size: 1.0625rem; }

.be-visit-store__details { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.be-visit-store__detail-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--be-text-2);
}
.be-visit-store__detail-item svg { color: var(--be-blue); margin-top: 2px; flex-shrink: 0; }
.be-visit-store__detail-item strong { display: block; font-weight: 600; color: var(--be-text); margin-bottom: 2px; }
.be-visit-store__detail-item a { color: var(--be-blue); }
.be-visit-store__detail-item a:hover { text-decoration: underline; }

.be-visit-store__map {
  border-radius: var(--be-radius-md);
  overflow: hidden;
  border: 1px solid var(--be-border);
  box-shadow: var(--be-shadow-card);
}
.be-visit-store__map iframe { display: block; }

/* ============================================================
   17. FINAL CTA
   ============================================================ */
.be-final-cta {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--be-navy) 0%, #1A3A7A 60%, #0046B8 100%);
  position: relative;
  overflow: hidden;
}
.be-final-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}

.be-final-cta__inner {
  text-align: center;
  position: relative;
  z-index: 1;
}
.be-final-cta__heading {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--be-white);
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}
.be-final-cta__subtext {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.75);
  max-width: 500px;
  margin: 0 auto 36px;
}
.be-final-cta__buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* ============================================================
   18. FOOTER
   ============================================================ */
.be-footer {
  background-color: var(--be-navy);
  color: rgba(255,255,255,0.75);
  position: relative;
}
.be-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--be-blue), var(--be-gold));
}

.be-footer__main { padding: 64px 0 48px; }

.be-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.be-footer__heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}

/* The logo is dark-navy + light-blue on transparent — its navy half
   disappears against this section's matching navy background, so it
   needs a light chip behind it to stay legible. */
.be-footer__logo {
  display: inline-block;
  margin-bottom: 20px;
  padding: 12px 18px;
  background: var(--be-white);
  border-radius: var(--be-radius-md);
  box-shadow: var(--be-shadow-sm);
}
.be-footer__logo img,
.be-footer__logo .custom-logo {
  max-width: 190px;
  height: auto;
  object-fit: contain;
  display: block;
}
.be-footer__logo a { display: block; line-height: 0; }

.be-footer__badges {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.be-footer__badges li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.be-footer__badges li svg { color: var(--be-gold); flex-shrink: 0; }
.be-footer__logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.be-footer__logo-text .be-logo-name {
  color: var(--be-white);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.be-footer__logo-text .be-logo-tag {
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.be-footer__about-text { font-size: 0.9375rem; line-height: 1.7; margin-bottom: 20px; }

.be-footer__social {
  display: flex;
  gap: 8px;
}
.be-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--be-radius-sm);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  transition: background-color var(--be-transition), color var(--be-transition);
}
.be-footer__social a:hover { background: var(--be-blue); color: white; }

.be-footer__links { display: flex; flex-direction: column; gap: 4px; }
.be-footer__links li a {
  display: block;
  padding: 5px 0;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.65);
  transition: color var(--be-transition), padding-left var(--be-transition);
}
.be-footer__links li a:hover { color: white; padding-left: 4px; }

.be-footer__address { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.be-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.65);
}
.be-footer__contact-item svg { color: rgba(255,255,255,0.4); flex-shrink: 0; margin-top: 2px; }
.be-footer__contact-item a { color: rgba(255,255,255,0.75); transition: color var(--be-transition); }
.be-footer__contact-item a:hover { color: white; }
.be-footer__contact-item span { line-height: 1.6; }

.be-footer__maps-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  border-radius: var(--be-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color var(--be-transition), color var(--be-transition);
}
.be-footer__maps-btn:hover { background: var(--be-blue); color: white; }

.be-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
}
.be-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}
.be-footer__copy { font-size: 0.8125rem; color: rgba(255,255,255,0.4); }
.be-footer__legal { display: flex; gap: 16px; }
.be-footer__legal a { font-size: 0.8125rem; color: rgba(255,255,255,0.4); transition: color var(--be-transition); }
.be-footer__legal a:hover { color: rgba(255,255,255,0.8); }

/* ============================================================
   19. WOOCOMMERCE OVERRIDES
   ============================================================ */

/* WooCommerce wrap */
.be-woo-wrap { padding: 48px 0 64px; background: var(--be-off-white); min-height: 60vh; }

/* Breadcrumb */
.be-breadcrumb { margin-bottom: 24px; }
.be-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.be-breadcrumb li { font-size: 0.875rem; color: var(--be-text-3); }
.be-breadcrumb li a { color: var(--be-blue); }
.be-breadcrumb li a:hover { text-decoration: underline; }
.be-breadcrumb .sep { opacity: 0.4; }
nav.woocommerce-breadcrumb { margin-bottom: 24px; font-size: 0.875rem; color: var(--be-text-3); }
nav.woocommerce-breadcrumb a { color: var(--be-blue); }

/* Shop title and result count */
.woocommerce-products-header__title,
.woocommerce-loop-category__title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--be-text); margin-bottom: 16px; }
.woocommerce-result-count {
  font-size: 0.875rem;
  color: var(--be-text-3);
  float: left;
  margin: 0 0 24px;
  padding-top: 10px;
}
.woocommerce-ordering { float: right; margin: 0 0 24px; }
ul.products { clear: both; }
.woocommerce-ordering select {
  padding: 8px 14px;
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-sm);
  font-family: var(--be-font);
  font-size: 0.875rem;
  color: var(--be-text);
  background: var(--be-white);
  cursor: pointer;
}

/* Product loop grid */
.products.columns-4,
.products.columns-3 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* WooCommerce's base stylesheet (woocommerce-general, still enqueued) puts
   a float-era clearfix on ul.products via :before/:after { content: ' ';
   display: table; }. In a grid container those pseudo-elements count as
   real grid items, shifting every product over by one cell and leaving a
   phantom empty slot in the first row. Grid doesn't need a clearfix. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

/* WooCommerce product card in loop */
ul.products li.product,
.be-woo-wrap .product {
  background: var(--be-white) !important;
  border-radius: var(--be-radius-md) !important;
  border: 1px solid var(--be-border) !important;
  box-shadow: var(--be-shadow-card) !important;
  overflow: hidden !important;
  transition: transform var(--be-transition), box-shadow var(--be-transition) !important;
  padding: 0 !important;
  margin: 0 !important;
}
ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--be-shadow-md) !important;
}

/* Product image in loop */
ul.products li.product a img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}
ul.products li.product:hover a img { transform: scale(1.04) !important; }

/* Product info area */
ul.products li.product .woocommerce-loop-product__link,
ul.products li.product h2,
ul.products li.product .price,
ul.products li.product .button { padding-left: 16px; padding-right: 16px; }
ul.products li.product h2.woocommerce-loop-product__title {
  padding: 14px 16px 4px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--be-text) !important;
}
ul.products li.product .price {
  padding: 0 16px 8px !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: var(--be-blue) !important;
  display: block !important;
}
ul.products li.product .price del { color: var(--be-text-3) !important; font-size: 0.875rem !important; font-weight: 400 !important; }
ul.products li.product .price ins { text-decoration: none !important; }

/* Add to cart button in loop */
ul.products li.product .button.add_to_cart_button,
ul.products li.product a.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order {
  display: block !important;
  width: calc(100% - 32px) !important;
  margin: 0 16px 16px !important;
  padding: 11px 20px !important;
  background-color: var(--be-blue) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--be-radius-sm) !important;
  font-family: var(--be-font) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background-color var(--be-transition), transform var(--be-transition) !important;
  box-shadow: none !important;
}
ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background-color: var(--be-blue-hover) !important;
  transform: translateY(-1px) !important;
}

/* Sale badge */
.woocommerce span.onsale {
  background-color: #FF3B30 !important;
  color: white !important;
  padding: 4px 10px !important;
  border-radius: 40px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  min-height: unset !important;
  min-width: unset !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
}

/* Single product page ------------------------------------------------ */

/* Two-column layout: gallery | summary. Tabs/related span both columns
   since they're siblings of .images/.summary inside the same div.product
   grid container (WooCommerce hooks them after the summary closes). */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
  grid-column: 1 / -1;
}
/* Grid items default to min-width:auto, which refuses to shrink below the
   intrinsic size of their content. The gallery slider's JS sets large
   pixel widths on its slides, which without this would balloon the whole
   grid track (and the slider) to match, instead of the other way round. */
.woocommerce div.product > div.images,
.woocommerce div.product > div.summary {
  min-width: 0;
}
@media (min-width: 860px) {
  .woocommerce div.product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
}

/* Gallery */
@media (min-width: 860px) {
  .woocommerce div.product div.images { position: sticky; top: calc(var(--be-header-h) + 24px); }
}
/* FlexSlider structural rules (normally shipped in woocommerce-layout.css,
   which this theme dequeues for the shop grid — restore just what the
   product gallery slider needs so its JS-computed slide widths line up). */
.woocommerce-product-gallery .flex-viewport {
  transition: height 0.5s ease-in-out;
}
.woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
  position: relative;
  white-space: nowrap;
  transition: all cubic-bezier(0.20, 1.00, 0.30, 1.00) 0s;
  backface-visibility: hidden;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
  display: inline-block !important;
  width: 100%;
  margin: 0;
  vertical-align: top;
  white-space: normal;
}
.woocommerce-product-gallery__trigger { position: absolute; }

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  border-radius: var(--be-radius-lg);
  overflow: hidden;
  background: var(--be-off-white);
  border: 1px solid var(--be-border);
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  border-radius: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--be-off-white);
}
.woocommerce div.product a.woocommerce-product-gallery__trigger {
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  width: 36px;
  height: 36px;
  background: var(--be-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--be-shadow-sm);
}
.woocommerce div.product span.onsale {
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
}

/* Thumbnail rail */
.flex-control-nav.flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.flex-control-nav.flex-control-thumbs li { width: 72px; height: 72px; }
.flex-control-nav.flex-control-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--be-radius-sm);
  border: 2px solid var(--be-border);
  cursor: pointer;
  transition: border-color var(--be-transition);
}
.flex-control-nav.flex-control-thumbs img.flex-active,
.flex-control-nav.flex-control-thumbs img:hover { border-color: var(--be-blue); }

/* Summary column */
.woocommerce div.product div.summary { padding-top: 4px; }
.woocommerce div.product .product_title {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  color: var(--be-navy);
  line-height: 1.2;
  margin-bottom: 14px;
}
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 14px; }
.woocommerce div.product div.summary p.price {
  color: var(--be-blue) !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  margin-bottom: 6px;
  display: block;
}
.woocommerce div.product div.summary p.price del {
  color: var(--be-text-3);
  font-size: 1.125rem;
  font-weight: 500;
  opacity: 0.85;
  margin-right: 10px;
}
.woocommerce div.product div.summary p.price ins { text-decoration: none; }
.woocommerce div.product .stock {
  display: inline-block;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--be-green-dark);
}
.woocommerce div.product .stock.out-of-stock { color: #E64545; }

/* Short description (feature list) */
.woocommerce div.product div.summary .woocommerce-product-details__short-description {
  color: var(--be-text-2);
  font-size: 1rem;
  line-height: 1.7;
  padding: 20px 0;
  margin: 4px 0 20px;
  border-top: 1px solid var(--be-border);
  border-bottom: 1px solid var(--be-border);
  transition: max-height 0.35s ease;
}
/* When a "Read more" toggle follows, let it own the closing border/margin
   instead of the (now height-clipped) description div. */
.woocommerce-product-details__short-description:has(+ .be-short-desc__toggle) {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.woocommerce-product-details__short-description.be-short-desc--collapsed {
  overflow: hidden;
  position: relative;
}
.woocommerce-product-details__short-description.be-short-desc--collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--be-white) 80%);
  pointer-events: none;
}
.be-short-desc__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 12px 0 20px;
  padding: 0 0 20px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--be-border);
  color: var(--be-blue);
  font-family: var(--be-font);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
.be-short-desc__toggle:hover { color: var(--be-blue-hover); }
.be-short-desc__toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--be-transition);
}
.be-short-desc__toggle.is-expanded::after { transform: rotate(-135deg); }
.woocommerce-product-details__short-description p { margin-bottom: 14px; }
.woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.woocommerce-product-details__short-description ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 18px;
  display: grid;
  gap: 10px;
}
.woocommerce-product-details__short-description ul li {
  position: relative;
  padding-left: 26px;
  color: var(--be-text-2);
}
.woocommerce-product-details__short-description ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--be-blue-light);
  box-shadow: inset 0 0 0 4px var(--be-blue);
}

/* Cart form: quantity + add to cart */
.woocommerce div.product form.cart {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.woocommerce div.product form.cart .quantity { margin: 0; }
.woocommerce div.product form.cart .qty {
  width: 76px;
  height: 52px;
  text-align: center;
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-sm);
  font-family: var(--be-font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--be-text);
}
.single_add_to_cart_button {
  background-color: var(--be-blue) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--be-radius-sm) !important;
  padding: 0 32px !important;
  height: 52px;
  font-size: 1rem !important;
  font-weight: 700 !important;
  flex: 1;
  min-width: 180px;
  box-shadow: var(--be-shadow-sm) !important;
  transition: background-color var(--be-transition), transform var(--be-transition), box-shadow var(--be-transition) !important;
}
.single_add_to_cart_button:hover {
  background-color: var(--be-blue-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--be-shadow-md) !important;
}

/* Category / tags meta row */
.woocommerce div.product .product_meta {
  padding-top: 20px;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--be-text-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.woocommerce div.product .product_meta > span { display: block; }
.woocommerce div.product .product_meta a {
  color: var(--be-text-2);
  text-decoration: none;
  transition: color var(--be-transition);
}
.woocommerce div.product .product_meta a:hover { color: var(--be-blue); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs { margin-top: 24px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0 0 -1px;
  border-bottom: 1px solid var(--be-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 14px 22px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--be-text-3);
  border-bottom: 2px solid transparent;
  transition: color var(--be-transition), border-color var(--be-transition);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--be-blue); border-bottom: 2px solid var(--be-blue); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--be-blue); }
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 32px 0 0;
  max-width: 760px;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-size: 1.3rem;
  color: var(--be-navy);
  margin-bottom: 16px;
}
.woocommerce div.product .woocommerce-tabs .panel p { margin-bottom: 14px; color: var(--be-text-2); line-height: 1.75; }
.woocommerce div.product .woocommerce-tabs table.shop_attributes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
  padding: 12px 16px;
  border: 1px solid var(--be-border);
  text-align: left;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes th {
  background: var(--be-off-white);
  font-weight: 600;
  color: var(--be-text);
  width: 220px;
}

/* Related / upsell products */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
  margin-top: 24px;
  padding-top: 48px;
  border-top: 1px solid var(--be-border);
}
.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 800;
  color: var(--be-navy);
  margin-bottom: 24px;
}

/* Cart & checkout */
.woocommerce-cart .wc-proceed-to-checkout a,
.woocommerce-checkout #place_order {
  background-color: var(--be-blue) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 16px 32px !important;
  border-radius: var(--be-radius-sm) !important;
}
.woocommerce-notices-wrapper .woocommerce-message {
  border-top-color: var(--be-blue);
}
.woocommerce-notices-wrapper .woocommerce-message a {
  color: var(--be-blue);
  font-weight: 600;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--be-blue); border-bottom: 2px solid var(--be-blue); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--be-blue); }

/* Pagination */
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  border-radius: var(--be-radius-sm) !important;
  color: var(--be-text) !important;
}
.woocommerce-pagination ul li span.current {
  background: var(--be-blue) !important;
  color: white !important;
}

/* ============================================================
   20. WOO-WRAP & INNER PAGE STYLES
   ============================================================ */
.be-page-wrap { padding: 48px 0 80px; }
.be-page-header { margin-bottom: 32px; }
.be-page-title { font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--be-navy); }
.be-page-body { max-width: 760px; }
.be-page-body p { margin-bottom: 16px; }
.be-page-body h2, .be-page-body h3 { margin: 28px 0 12px; }
.be-page-body ul, .be-page-body ol { padding-left: 24px; margin-bottom: 16px; }
.be-page-body ul { list-style: disc; }
.be-page-body ol { list-style: decimal; }

/* Blog index */
.be-archive-header { margin-bottom: 40px; }
.be-archive-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); color: var(--be-navy); }
.be-posts-grid { display: grid; gap: 28px; }
.be-post-card { background: white; border-radius: var(--be-radius-md); border: 1px solid var(--be-border); overflow: hidden; box-shadow: var(--be-shadow-xs); }
.be-post-card__image img { width: 100%; height: 200px; object-fit: cover; display: block; }
.be-post-card__body { padding: 20px; }
.be-post-card__date { font-size: 0.8125rem; color: var(--be-text-3); }
.be-post-card__title { font-size: 1.125rem; margin: 6px 0 10px; }
.be-post-card__title a:hover { color: var(--be-blue); }
.be-post-card__excerpt { font-size: 0.9375rem; color: var(--be-text-2); margin-bottom: 16px; }

/* 404 */
.be-404 { display: flex; justify-content: center; }
.be-404__inner { text-align: center; padding: 80px 20px; max-width: 480px; }
.be-404__code { display: block; font-size: 6rem; font-weight: 900; color: var(--be-blue-light); line-height: 1; margin-bottom: 8px; }
.be-404__title { font-size: 2rem; color: var(--be-navy); margin-bottom: 12px; }
.be-404__text { font-size: 1rem; color: var(--be-text-2); margin-bottom: 28px; }
.be-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Single article */
.be-single-post { max-width: 760px; }
.be-article__hero { margin-bottom: 32px; border-radius: var(--be-radius-md); overflow: hidden; }
.be-article__hero-img { width: 100%; height: auto; max-height: 500px; object-fit: cover; }
.be-article__meta { font-size: 0.875rem; color: var(--be-text-3); margin-bottom: 12px; }
.be-article__meta a { color: var(--be-blue); }
.be-article__title { margin-bottom: 28px; }
.be-article__body p { margin-bottom: 18px; }
.be-article__body h2, .be-article__body h3 { margin: 28px 0 12px; }

/* ============================================================
   21. UTILITY CLASSES
   ============================================================ */
.be-text-blue   { color: var(--be-blue); }
.be-text-center { text-align: center; }
.be-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   22. SCROLL ANIMATIONS (JS-driven)
   ============================================================ */
.be-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.be-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   23. TABLET 640px+
   ============================================================ */
@media (min-width: 640px) {
  .be-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .be-categories__grid { grid-template-columns: repeat(3, 1fr); }
  .be-hero__buttons { flex-direction: row; }
  .be-final-cta__buttons { flex-direction: row; justify-content: center; }
  .be-reviews__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   24. TABLET 768px+
   ============================================================ */
@media (min-width: 768px) {
  .be-container { padding-left: 32px; padding-right: 32px; }

  .be-trust__grid { grid-template-columns: repeat(4, 1fr); }

  .be-help-cta__inner { flex-direction: row; text-align: left; gap: 28px; align-items: center; }
  .be-help-cta__text { flex: 1; }
  .be-help-cta__body { margin: 0; }


  .be-why-buy__grid { grid-template-columns: repeat(4, 1fr); }

  .be-reviews__grid { grid-template-columns: repeat(3, 1fr); }

  .be-visit-store__inner { flex-direction: row; align-items: flex-start; }
  .be-visit-store__info { flex: 1; }
  .be-visit-store__map { flex: 1.2; }

  /* Intermediate step only — the tuned 4-column split needs real desktop
     width (see 1024px+ below). At 768-1023px, forcing 4 columns squeezes
     Shop/Support into ~170px each and wraps nearly every link label to
     two lines; 2 columns gives each list room to breathe. */
  .be-footer__grid { grid-template-columns: 1fr 1fr; }
  .be-footer__bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; }

  .be-posts-grid { grid-template-columns: 1fr 1fr; }

  .be-mobile-menu__ctas { flex-direction: row; }
}

/* ============================================================
   25. DESKTOP 1024px+
   ============================================================ */
@media (min-width: 1024px) {
  .be-container { padding-left: 40px; padding-right: 40px; }

  .be-nav { display: flex; }
  .be-hamburger { display: none; }
  .be-header__whatsapp { display: inline-flex; }
  .be-header__icon { display: flex; }

  .be-hero {
    padding: 80px 0 64px;
  }
  /* Fluid two-column split, tuned so the row NEVER hits an exact
     100%-of-container fit at any width from here up to 1920px+.
     The old fixed-px split (gap:64 + copy max 560 + image flex:0 0
     580/620) summed to *exactly* the 1280px container's content
     width with zero pixels of slack — a rounding/font-metric change
     of even 1-2px (which is all a browser zoom level changes) was
     enough to push the row past 100% width, and .be-hero's
     overflow:hidden silently clipped whatever poked out (the image,
     being the trailing flex item, took the hit on its right edge).
     Every value below is a clamp() so the split scales continuously
     with viewport width instead of jumping at breakpoints, and each
     one keeps real (50-200px) breathing room at 1024-1920px — see
     the audit notes in PRODUCT.md-adjacent docs for the verified
     numbers per common laptop resolution. */
  .be-hero__inner {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: clamp(32px, 4vw, 64px);
  }
  .be-hero__copy {
    flex: 1 1 0%;
    min-width: 0; /* allow the text column to actually shrink instead of forcing overflow */
    max-width: clamp(440px, 38vw, 620px);
  }
  .be-hero__subtext { margin: 0 0 36px; }
  .be-hero__buttons { justify-content: flex-start; }
  .be-hero__image-wrap {
    /* Desktop: restore to flow, add soft container */
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
    /* flex-shrink:1 (not 0) is the actual bug fix: the image column
       can now yield space instead of forcing the row to overflow. */
    flex: 0 1 clamp(400px, 38vw, 620px);
    min-width: 0;
    max-width: 620px;
    width: auto;
    background: radial-gradient(ellipse at 50% 55%, #d6e5ff 0%, #eef4ff 48%, transparent 78%);
    border-radius: 32px;
    padding: 24px 16px 16px;
  }


  .be-categories__grid { grid-template-columns: repeat(3, 1fr); }

  /* Real desktop width restores the tuned 4-column split. */
  .be-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; }
}

/* ============================================================
   26. WIDE 1280px+
   ============================================================ */
@media (min-width: 1280px) {
  /* Hero-only container widened beyond the sitewide 1280px grid so the
     text/image split keeps growing smoothly through common laptop and
     desktop sizes (1366/1440/1536/1920) instead of freezing at 1280px
     worth of content on every screen bigger than that. Scoped to the
     hero so no other section's grid is affected. */
  .be-hero .be-container { max-width: clamp(1280px, 94vw, 1600px); }
  .be-categories__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   27. PRINT / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .be-hero__image-float { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   28. ABOUT PAGE TEMPLATE
   ============================================================ */

/* Hero */
.be-about-hero {
  background: linear-gradient(135deg, var(--be-blue) 0%, var(--be-blue-dark) 100%);
  color: var(--be-white);
  padding: 80px 0 72px;
  text-align: center;
}
.be-about-hero__eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 16px;
}
.be-about-hero__heading {
  /* The global h1{color:var(--be-text)} rule targets the element directly,
     which always wins over the inherited white from .be-about-hero even
     though inheritance looks like it should apply here -- set it explicitly. */
  color: var(--be-white);
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.be-about-hero__sub {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.82);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Intro */
.be-about-intro {
  padding: 80px 0;
  background: var(--be-white);
}
.be-about-intro__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.be-about-intro__lead {
  font-size: clamp(1.1rem, 2.5vw, 1.375rem);
  font-weight: 600;
  color: var(--be-navy);
  line-height: 1.5;
  margin-bottom: 32px;
}
.be-about-intro__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}
.be-about-intro__body p {
  font-size: 1.0625rem;
  color: var(--be-text-2);
  line-height: 1.75;
}
.be-about-intro__brand {
  /* The Jack/Creality dealerships are a core differentiator claim (see
     positioning), not just bold text -- tie them to the brand action
     color already used for stats/icons elsewhere on this page. */
  color: var(--be-blue);
}

/* Feature Cards */
.be-about-features {
  padding: 80px 0;
  background: var(--be-off-white);
}
.be-about-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.be-about-feat-card {
  background: var(--be-white);
  border-radius: var(--be-radius-lg);
  padding: 32px 28px;
  box-shadow: var(--be-shadow-card);
  border: 1px solid var(--be-border);
  transition: box-shadow var(--be-transition-lg), transform var(--be-transition-lg);
}
.be-about-feat-card:hover {
  box-shadow: var(--be-shadow-md);
  transform: translateY(-4px);
}
.be-about-feat-card__icon {
  width: 52px;
  height: 52px;
  background: var(--be-blue-light);
  border-radius: var(--be-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--be-blue);
  margin-bottom: 20px;
}
.be-about-feat-card__icon svg { width: 26px; height: 26px; }
.be-about-feat-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--be-navy);
  margin-bottom: 10px;
  line-height: 1.3;
}
.be-about-feat-card__text {
  font-size: 0.9375rem;
  color: var(--be-text-2);
  line-height: 1.72;
}

/* Trust Statement */
.be-about-trust {
  padding: 96px 0;
  background: var(--be-white);
  text-align: center;
}
.be-about-trust__eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--be-blue);
  margin-bottom: 12px;
}
.be-about-trust__heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--be-navy);
  margin-bottom: 56px;
  letter-spacing: -0.02em;
}
.be-about-trust__stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px 56px;
  margin-bottom: 56px;
}
.be-about-trust__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.be-about-trust__num {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--be-blue);
  line-height: 1;
}
.be-about-trust__num sup {
  font-size: 0.55em;
  vertical-align: super;
  font-weight: 800;
}
.be-about-trust__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--be-text-2);
}
.be-about-trust__stars {
  display: flex;
  gap: 2px;
  color: var(--be-gold);
  margin-top: 2px;
}
.be-about-trust__sub {
  font-size: 0.8125rem;
  color: var(--be-text-3);
}
.be-about-trust__quote {
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--be-text-2);
  max-width: 600px;
  margin: 0 auto;
  padding: 24px 28px;
  background: var(--be-blue-light);
  border-left: 4px solid var(--be-blue);
  border-radius: 0 var(--be-radius-md) var(--be-radius-md) 0;
  text-align: left;
  line-height: 1.72;
}

/* CTA */
.be-about-cta {
  background: var(--be-navy);
  color: var(--be-white);
  padding: 80px 0;
}
.be-about-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.be-about-cta__icon {
  /* Reuses the same dark-surface icon-badge treatment already used for
     the category-page WhatsApp CTA, so the page's closing ask carries as
     much conviction as its own hero, not less. */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--be-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.be-about-cta__heading {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--be-white);
  margin-bottom: 14px;
  line-height: 1.15;
}
.be-about-cta__sub {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 480px;
}
.be-about-cta__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.be-btn--cta-outline {
  background-color: transparent;
  color: var(--be-white);
  border-color: rgba(255,255,255,0.35);
}
.be-btn--cta-outline:hover {
  background-color: rgba(255,255,255,0.1);
  border-color: var(--be-white);
  color: var(--be-white);
}
.be-about-cta__details {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.be-about-cta__details li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.82);
}
.be-about-cta__details li a {
  color: rgba(255,255,255,0.82);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.be-about-cta__details li a:hover { color: var(--be-white); }
.be-about-cta__details svg { flex-shrink: 0; color: #5B9BFF; margin-top: 1px; }

/* About — Responsive */
@media (min-width: 560px) {
  .be-about-features__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .be-about-hero { padding: 96px 0 80px; }
  .be-about-intro { padding: 96px 0; }
  .be-about-features { padding: 96px 0; }
  .be-about-features__grid { gap: 24px; }
  .be-about-feat-card { padding: 36px 32px; }
}
@media (min-width: 1024px) {
  .be-about-cta__inner {
    flex-direction: row;
    align-items: center;
    gap: 80px;
  }
  .be-about-cta__copy { flex: 1 1 0; }
  .be-about-cta__contact { flex: 0 0 auto; }
  .be-about-trust__quote { text-align: center; }
}

/* ============================================================
   29. CART PAGE
   ============================================================ */

/* Page chrome: hide default page title + tighten padding */
.woocommerce-cart .be-page-header,
.woocommerce-checkout .be-page-header { display: none; }

.woocommerce-cart .be-page-wrap,
.woocommerce-checkout .be-page-wrap { padding-top: 0; padding-bottom: 0; background: var(--be-grey-1); }

.woocommerce-cart .be-page-body,
.woocommerce-checkout .be-page-body {
  max-width: none;
  padding: 0;
}

/* Outer wrapper */
.be-cart-wrap { padding: 32px 0 64px; }

/* Trust strip */
.be-cart-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  margin-bottom: 28px;
}
.be-cart-trust__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--be-text-2);
}
.be-cart-trust__item svg { color: var(--be-blue); flex-shrink: 0; }

/* Two-column layout */
.be-cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

/* Column headers */
.be-cart-col-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
}
.be-cart-col-header__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--be-navy);
}
.be-cart-col-header__count {
  font-size: 0.875rem;
  color: var(--be-text-3);
  font-weight: 500;
}

/* Desktop column labels */
.be-cart-cols-labels {
  display: none;
}

/* Order Summary heading */
.be-cart-summary-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--be-navy);
  margin-bottom: 16px;
}

/* ---- Cart items ---- */
.be-cart-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  background: var(--be-white);
  overflow: hidden;
}

.be-cart-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "img info"
    "img price"
    "img qty"
    ". subtotal"
    ". remove";
  gap: 4px 16px;
  align-items: start;
  padding: 20px;
  border-bottom: 1px solid var(--be-border);
}
.be-cart-item:last-child { border-bottom: none; }

.be-cart-item__image {
  grid-area: img;
  grid-row: 1 / 6;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: var(--be-radius-sm);
  overflow: hidden;
  background: var(--be-grey-1);
  align-self: start;
}
.be-cart-item__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.be-cart-item__image a { display: block; line-height: 0; }

.be-cart-item__info { grid-area: info; }
.be-cart-item__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--be-text);
  line-height: 1.35;
}
.be-cart-item__name a { color: var(--be-text); transition: color var(--be-transition); }
.be-cart-item__name a:hover { color: var(--be-blue); }
.be-cart-item__mobile-price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--be-blue);
  margin-top: 4px;
}

.be-cart-item__price { grid-area: price; display: none; }
.be-cart-item__qty   { grid-area: qty; padding-top: 8px; }
.be-cart-item__subtotal { grid-area: subtotal; display: none; }
.be-cart-item__remove   { grid-area: remove; padding-top: 4px; }

/* Remove link */
.be-cart-item__remove a.remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--be-text-3);
  transition: color var(--be-transition);
}
.be-cart-item__remove a.remove:hover { color: #e53935; }

/* WooCommerce quantity input — tighten for cart */
.be-cart-item__qty .quantity { display: flex; align-items: center; gap: 0; }
.be-cart-item__qty .quantity .qty {
  width: 52px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-sm);
  font-family: var(--be-font);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  color: var(--be-text);
  -moz-appearance: textfield;
}
.be-cart-item__qty .quantity .qty::-webkit-inner-spin-button,
.be-cart-item__qty .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Cart form footer: coupon + update */
.be-cart-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 0 0;
}

.be-cart-coupon {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.be-cart-coupon__input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-sm);
  font-family: var(--be-font);
  font-size: 0.9375rem;
  color: var(--be-text);
  background: var(--be-white);
  transition: border-color var(--be-transition);
}
.be-cart-coupon__input:focus { outline: none; border-color: var(--be-blue); }

.be-cart-update-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-family: var(--be-font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--be-text-3);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-sm);
  background: var(--be-white);
  cursor: pointer;
  transition: color var(--be-transition), border-color var(--be-transition);
  white-space: nowrap;
}
.be-cart-update-btn:hover { color: var(--be-blue); border-color: var(--be-blue); }

/* Continue Shopping */
.be-cart-continue-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--be-blue);
  transition: gap var(--be-transition);
}
.be-cart-continue-link:hover { gap: 3px; }

/* ---- Cart Totals (right column — WC default output) ---- */
.be-cart-summary-col .cart_totals {
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  overflow: hidden;
  box-shadow: var(--be-shadow-card);
}
.be-cart-summary-col .cart_totals > h2 { display: none; } /* we use our own heading */
.be-cart-summary-col .cart_totals table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}
.be-cart-summary-col .cart_totals table.shop_table th,
.be-cart-summary-col .cart_totals table.shop_table td {
  padding: 14px 20px;
  font-size: 0.9375rem;
  color: var(--be-text-2);
  border-bottom: 1px solid var(--be-border);
  text-align: left;
  border-right: none;
}
.be-cart-summary-col .cart_totals table.shop_table th {
  font-weight: 600;
  color: var(--be-text);
  width: 45%;
  background: var(--be-grey-1);
}
.be-cart-summary-col .cart_totals table.shop_table tr.order-total th,
.be-cart-summary-col .cart_totals table.shop_table tr.order-total td {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--be-navy);
  background: var(--be-blue-light);
  border-bottom: none;
}
.be-cart-summary-col .cart_totals table.shop_table tr:last-child th,
.be-cart-summary-col .cart_totals table.shop_table tr:last-child td { border-bottom: none; }

/* Shipping in totals */
.be-cart-summary-col .cart_totals .woocommerce-shipping-destination {
  font-size: 0.8125rem;
  color: var(--be-text-3);
  display: block;
  margin-top: 2px;
}

/* Checkout button */
.be-cart-summary-col .wc-proceed-to-checkout { padding: 20px; }
.be-cart-summary-col .wc-proceed-to-checkout a.checkout-button {
  display: block !important;
  width: 100% !important;
  padding: 15px 24px !important;
  background: var(--be-blue) !important;
  color: var(--be-white) !important;
  font-family: var(--be-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  border-radius: var(--be-radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color var(--be-transition), transform var(--be-transition) !important;
  box-shadow: var(--be-shadow-sm) !important;
  margin: 0 !important;
}
.be-cart-summary-col .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--be-blue-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--be-shadow-md) !important;
}

/* WhatsApp help below summary */
.be-cart-help {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(37,211,102,0.08);
  border: 1px solid rgba(37,211,102,0.25);
  border-radius: var(--be-radius-sm);
  font-size: 0.875rem;
  color: var(--be-text-2);
}
.be-cart-help svg { color: var(--be-green); flex-shrink: 0; }
.be-cart-help a { color: #1DA851; font-weight: 600; }
.be-cart-help a:hover { text-decoration: underline; }

/* Empty cart */
.be-cart-empty {
  text-align: center;
  padding: 80px 24px;
  background: var(--be-white);
  border-radius: var(--be-radius-lg);
  border: 1px solid var(--be-border);
}
.be-cart-empty__icon { margin: 0 auto 24px; color: var(--be-grey-3); }
.be-cart-empty__title { font-size: 1.5rem; color: var(--be-navy); margin-bottom: 10px; }
.be-cart-empty__text { color: var(--be-text-3); margin-bottom: 32px; }

/* Cart notices */
.woocommerce-cart .woocommerce-notices-wrapper { margin-bottom: 20px; }
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border-radius: var(--be-radius-sm) !important;
  padding: 14px 18px !important;
  font-size: 0.9375rem !important;
  margin-bottom: 16px !important;
  list-style: none !important;
  background: var(--be-blue-light) !important;
  border: 1px solid var(--be-border) !important;
  color: var(--be-text) !important;
}
.woocommerce-message { background: #e8f5e9 !important; border-color: #c8e6c9 !important; color: #256029 !important; }
.woocommerce-error { background: #fdecea !important; border-color: #f5c6cb !important; color: #a12622 !important; }

/* ============================================================
   30. CHECKOUT PAGE
   ============================================================ */

.be-checkout-wrap { padding: 32px 0 64px; }

/* Support banner */
.be-checkout-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: rgba(37,211,102,0.07);
  border: 1px solid rgba(37,211,102,0.22);
  border-radius: var(--be-radius-sm);
  margin-bottom: 28px;
  font-size: 0.9375rem;
  color: var(--be-text-2);
}
.be-checkout-banner svg { color: #25D366; flex-shrink: 0; }
.be-checkout-banner a { color: #1DA851; font-weight: 600; }
.be-checkout-banner a:hover { text-decoration: underline; }

/* Coupon toggle + form (default WC hook position, above the form) */
.be-checkout-coupon {
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-sm);
  padding: 14px 18px;
  margin: 32px 0 0;
}
.be-checkout-coupon__toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.9375rem;
  color: var(--be-text-2);
}
.be-checkout-coupon__toggle svg { color: var(--be-blue); flex-shrink: 0; }
.be-checkout-coupon__link {
  color: var(--be-blue);
  font-weight: 700;
  text-decoration: none;
}
.be-checkout-coupon__link:hover { text-decoration: underline; }
.be-checkout-coupon__form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  max-width: 420px;
}
.be-checkout-coupon__form .woocommerce-error,
.be-checkout-coupon__form .woocommerce-message {
  flex: 1 1 100%;
  order: -1;
  margin: 0 0 10px !important;
}
.be-checkout-coupon__input.has-error { border-color: #d32f2f; }
.coupon-error-notice {
  display: block;
  flex: 1 1 100%;
  order: 2;
  margin-top: 8px;
  padding: 10px 14px;
  background: #fdecea;
  border: 1px solid #f5c6cb;
  border-radius: var(--be-radius-sm);
  font-size: 0.8125rem;
  color: #a12622;
}
.be-checkout-coupon__input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-sm);
  font-family: var(--be-font);
  font-size: 0.9375rem;
  color: var(--be-text);
  background: var(--be-white);
  transition: border-color var(--be-transition);
}
.be-checkout-coupon__input:focus { outline: none; border-color: var(--be-blue); }
.be-checkout-coupon__btn {
  flex-shrink: 0;
  height: 42px;
  padding: 0 20px;
  border: none;
  border-radius: var(--be-radius-sm);
  background: var(--be-navy);
  color: var(--be-white);
  font-family: var(--be-font);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--be-transition);
}
.be-checkout-coupon__btn:hover { background: var(--be-blue); }
.be-checkout-coupon__btn.disabled,
.be-checkout-coupon__btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Two-column checkout layout */
.be-checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

/* Section cards */
.be-checkout-card {
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  padding: 28px;
  box-shadow: var(--be-shadow-card);
  margin-bottom: 20px;
}
.be-checkout-card:last-child { margin-bottom: 0; }

.be-checkout-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--be-border);
}
.be-checkout-card__head svg { color: var(--be-blue); flex-shrink: 0; }
.be-checkout-card__title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--be-navy);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Override WooCommerce headings inside cards */
.be-checkout-card h3 {
  display: none; /* replaced by .be-checkout-card__head */
}
#be-notes-card h3 { display: none; }
.be-checkout-card .woocommerce-billing-fields h3,
.be-checkout-card .woocommerce-shipping-fields h3,
.be-checkout-card .woocommerce-additional-fields h3 {
  display: none;
}

/* WooCommerce field row */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-shipping-fields__field-wrapper .form-row,
.woocommerce-additional-fields__field-wrapper .form-row {
  margin-bottom: 18px;
}
.form-row-wide,
.form-row.notes { grid-column: 1 / -1; }

/* Field labels */
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label,
.checkout .form-row label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--be-text);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.checkout label abbr[title] {
  color: #e53935;
  text-decoration: none;
  border: none;
  margin-left: 2px;
}

/* Inputs */
.woocommerce-checkout .input-text,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-family: var(--be-font);
  font-size: 0.9375rem;
  color: var(--be-text);
  background: var(--be-white);
  border: 1.5px solid var(--be-border);
  border-radius: var(--be-radius-sm);
  transition: border-color var(--be-transition), box-shadow var(--be-transition);
  appearance: none;
  -webkit-appearance: none;
}
.woocommerce-checkout textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  outline: none;
  border-color: var(--be-blue);
  box-shadow: 0 0 0 3px rgba(0,70,184,0.1);
}
.woocommerce-checkout select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7A99' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Validation */
.form-row.woocommerce-invalid .input-text,
.form-row.woocommerce-invalid select { border-color: #e53935; }
.form-row.woocommerce-validated .input-text,
.form-row.woocommerce-validated select { border-color: #43a047; }
.form-row .required { color: #e53935; }

/* Ship-to-different-address checkbox
   The blanket ".be-checkout-card h3 { display:none }" rule above also
   catches this element, since WooCommerce core wraps the checkbox in an
   <h3> too (not just section headings) — restore it explicitly. */
#ship-to-different-address {
  display: block !important;
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--be-border);
}
/* Default hidden; JS (main.js) shows it only when the checkbox above is
   checked. Not relying on WooCommerce core's own toggle here, since its
   timing proved unreliable once woocommerce-layout.css was dequeued. */
.woocommerce-shipping-fields .shipping_address {
  display: none !important;
}
.woocommerce-shipping-fields .shipping_address.be-visible {
  display: block !important;
}
#ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--be-text);
}
#ship-to-different-address input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 2px solid var(--be-border);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ---- Order Review (right column) ---- */
.be-order-review { }

.be-order-review__items {
  margin-bottom: 0;
}
.be-order-review__items-head {
  display: flex;
  justify-content: space-between;
  padding: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--be-text-3);
  border-bottom: 2px solid var(--be-border);
  margin-bottom: 4px;
}
.be-order-review__item {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--be-border);
  font-size: 0.9375rem;
}
.be-order-review__item:last-child { border-bottom: none; }
.be-order-review__item-name { flex: 1; color: var(--be-text); font-weight: 500; }
.be-order-review__item-qty {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--be-blue-light);
  color: var(--be-blue);
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 6px;
}
.be-order-review__item-total { font-weight: 700; color: var(--be-blue); white-space: nowrap; }

.be-order-review__totals {
  border-top: 2px solid var(--be-border);
  padding-top: 4px;
  margin-top: 4px;
}
.be-order-review__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 0.9375rem;
  color: var(--be-text-2);
  border-bottom: 1px solid var(--be-border);
}
.be-order-review__row:last-child { border-bottom: none; }
.be-order-review__row--total {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--be-navy);
  padding: 16px 0 8px;
}
.be-order-review__row--total span:last-child { color: var(--be-blue); }
.be-order-review__discount { color: #43a047; font-weight: 600; }
.be-order-review__row--coupon { color: #43a047; font-size: 0.875rem; }

/* Payment section */
.be-order-review__payment-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--be-navy);
  margin: 20px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--be-border);
}
.be-order-review__payment-heading svg { color: var(--be-blue); }

.wc_payment_methods { list-style: none; padding: 0; margin: 0; }
.wc_payment_methods li.payment_method {
  border: 1.5px solid var(--be-border);
  border-radius: var(--be-radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color var(--be-transition);
}
.wc_payment_methods li.payment_method:has(input:checked),
.wc_payment_methods li.payment_method.active { border-color: var(--be-blue); }
.payment_method label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--be-text);
  cursor: pointer;
}
.payment_method input[type="radio"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--be-blue); }
.payment_method img { max-height: 24px; width: auto; }
.payment_box {
  padding: 14px 16px;
  background: var(--be-blue-light);
  border-top: 1px solid var(--be-border);
  font-size: 0.9375rem;
  color: var(--be-text-2);
  line-height: 1.65;
}

.be-order-review__payment-bottom { margin-top: 20px; }

/* Place Order button */
#place_order.be-btn {
  font-size: 1.0625rem !important;
  padding: 16px 24px !important;
  letter-spacing: -0.01em !important;
}

/* Contact card (right column) */
.be-checkout-contact-card {
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  padding: 20px;
  box-shadow: var(--be-shadow-xs);
  margin-top: 16px;
  font-size: 0.875rem;
}
.be-checkout-contact-card__heading {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--be-text);
  margin-bottom: 12px;
}
.be-checkout-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  background: var(--be-green);
  color: var(--be-white);
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: var(--be-radius-sm);
  margin-bottom: 14px;
  transition: background-color var(--be-transition);
}
.be-checkout-wa-btn:hover { background: var(--be-green-dark); color: var(--be-white); }
.be-checkout-contact-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.be-checkout-contact-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--be-text-2);
}
.be-checkout-contact-card__list li svg { color: var(--be-blue); margin-top: 1px; flex-shrink: 0; }
.be-checkout-contact-card__list a { color: var(--be-blue); }
.be-checkout-contact-card__list a:hover { text-decoration: underline; }

/* Checkout notices */
.woocommerce-checkout .woocommerce-notices-wrapper { margin-bottom: 24px; }
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message {
  border-radius: var(--be-radius-sm) !important;
  padding: 14px 18px !important;
  margin-bottom: 20px !important;
}

/* ============================================================
   31. RESPONSIVE — CART & CHECKOUT
   ============================================================ */
@media (min-width: 640px) {
  .be-cart-trust { justify-content: flex-start; }
}

@media (min-width: 768px) {
  /* Cart: show desktop column labels */
  .be-cart-cols-labels {
    display: grid;
    grid-template-columns: calc(80px + 16px + 1fr) 120px 120px 120px;
    gap: 0;
    padding: 0 20px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--be-text-3);
    border-bottom: 1px solid var(--be-border);
    margin-bottom: 0;
  }
  .be-cart-cols-labels__product { }
  .be-cart-cols-labels__price { text-align: right; }
  .be-cart-cols-labels__qty { text-align: center; }
  .be-cart-cols-labels__total { text-align: right; }

  /* Cart item desktop layout */
  .be-cart-item {
    grid-template-columns: 80px 1fr 120px 120px 120px 40px;
    grid-template-rows: 1fr;
    grid-template-areas: "img info price qty subtotal remove";
    align-items: center;
    gap: 0 16px;
    padding: 20px;
  }
  .be-cart-item__image { grid-row: 1; }
  .be-cart-item__price {
    display: block;
    text-align: right;
    font-weight: 700;
    color: var(--be-text);
  }
  .be-cart-item__price .woocommerce-Price-amount { color: var(--be-text); font-weight: 600; }
  .be-cart-item__qty { padding-top: 0; text-align: center; }
  .be-cart-item__qty .quantity { justify-content: center; }
  .be-cart-item__subtotal {
    display: block;
    text-align: right;
    font-weight: 700;
    color: var(--be-blue);
  }
  .be-cart-item__remove { text-align: center; }
  .be-cart-item__remove a.remove { justify-content: center; }
  .be-cart-item__mobile-price { display: none; }
}

@media (min-width: 1024px) {
  /* Cart two-column */
  .be-cart-layout {
    grid-template-columns: 1fr 360px;
    gap: 32px;
  }

  /* Sticky cart summary */
  .be-cart-summary-col {
    position: sticky;
    top: calc(var(--be-header-h) + 24px);
  }

  /* Checkout two-column */
  .be-checkout-layout {
    grid-template-columns: 1fr 400px;
    gap: 32px;
  }

  .be-checkout-right {
    position: sticky;
    top: calc(var(--be-header-h) + 24px);
  }
}

@media (min-width: 1280px) {
  .be-cart-layout { grid-template-columns: 1fr 400px; }
  .be-checkout-layout { grid-template-columns: 1fr 420px; }
}

/* ============================================================
   32. MOBILE MENU FIX
   ============================================================ */
/* .be-mobile-menu is nested inside <header> (position:sticky, its own
   stacking context at z-index:1000). Its own z-index:9999 only wins
   against OTHER children of <header> — at the root level the whole
   header still loses to .be-overlay (z-index:9998, a header sibling),
   so the overlay was painting/hit-testing above the open menu and
   swallowing every tap on the nav links. Bumping the header itself
   above the overlay lets its trapped children win for real. Skip-link
   bumped alongside it so it still ends up on top when focused. */
.be-header { z-index: 10000 !important; }
.be-skip-link { z-index: 10001 !important; }
.be-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: min(86vw, 380px);
  height: 100vh;
  background: #ffffff !important;
  z-index: 9999 !important;
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.be-mobile-menu * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.be-overlay {
  z-index: 9998 !important;
  background-color: rgba(9, 20, 40, 0.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.be-menu-open { overflow: hidden; }

/* ============================================================
   21. MACHINE SERVICES PAGE
   ============================================================ */

/* Hero */
.be-svc-hero {
  padding: 56px 0 64px;
  background: var(--be-off-white);
}
.be-svc-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.be-svc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--be-navy);
  margin-bottom: 18px;
}
.be-svc-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 3px;
  background-color: var(--be-blue);
  border-radius: 2px;
  flex-shrink: 0;
}
.be-svc-hero__heading {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--be-navy);
  margin-bottom: 18px;
}
.be-svc-hero__sub {
  font-size: 1.0625rem;
  color: var(--be-text-2);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 28px;
}
.be-svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.be-svc-hero__media {
  position: relative;
}
.be-svc-hero__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--be-radius-lg);
  box-shadow: var(--be-shadow-lg);
}
.be-svc-hero__caption {
  display: block;
  margin-top: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--be-text-3);
  text-align: center;
}

/* Stat strip */
.be-svc-stats {
  background-color: var(--be-grey-1);
  padding: 40px 0;
  border-top: 1px solid var(--be-border);
  border-bottom: 1px solid var(--be-border);
}
.be-svc-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.be-svc-stats__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  background: var(--be-white);
  border-radius: var(--be-radius-md);
  border: 1px solid var(--be-border);
  box-shadow: var(--be-shadow-xs);
  text-align: center;
  align-items: center;
}
.be-svc-stats__num {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--be-blue);
  line-height: 1;
}
.be-svc-stats__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--be-text-2);
  line-height: 1.4;
}

/* Process timeline */
.be-svc-process { padding: 64px 0; }
.be-svc-process__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-lg);
  overflow: hidden;
  background: var(--be-border);
}
.be-svc-process__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--be-white);
  transition: background-color var(--be-transition);
}
.be-svc-process__item:hover { background-color: var(--be-blue-pale); }
.be-svc-process__num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--be-blue-light);
  color: var(--be-blue);
  font-weight: 800;
  font-size: 0.9375rem;
}
.be-svc-process__text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--be-text);
}

/* Work gallery */
.be-svc-gallery { padding: 64px 0; }
.be-svc-gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.be-svc-gallery__item {
  aspect-ratio: 4 / 5;
  border-radius: var(--be-radius-md);
  overflow: hidden;
  box-shadow: var(--be-shadow-card);
  transition: box-shadow var(--be-transition), transform var(--be-transition);
}
.be-svc-gallery__item:hover {
  box-shadow: var(--be-shadow-md);
  transform: translateY(-2px);
}
.be-svc-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 640px) {
  .be-svc-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .be-svc-gallery__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Pricing banner */
.be-svc-banner {
  background: linear-gradient(135deg, var(--be-navy) 0%, var(--be-navy-2) 100%);
  padding: 48px 0;
}
.be-svc-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.be-svc-banner__heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--be-white);
  margin-bottom: 10px;
}
.be-svc-banner__sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  max-width: 560px;
}
.be-svc-banner__sub strong { color: var(--be-white); }

@media (min-width: 640px) {
  .be-svc-stats__grid { grid-template-columns: repeat(4, 1fr); }
  .be-svc-process__list { grid-template-columns: repeat(2, 1fr); }
  /* Modifier for lists of 3 (e.g. the embroidery service's 3-step "How It
     Works") -- the base 2-column grid leaves a 3rd item orphaned alone in
     its own row. */
  .be-svc-process__list--3col { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
  .be-svc-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
  .be-svc-hero__caption { text-align: left; }
  .be-svc-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .be-svc-banner__heading { margin-bottom: 4px; }
}

/* ============================================================
   22. JACK BRAND LANDING PAGE
   ============================================================ */
:root {
  --jack-blue:      #06A7E2;
  --jack-blue-dark: #04688C;
}

.be-jack-hero {
  background: linear-gradient(135deg, var(--jack-blue-dark) 0%, var(--jack-blue) 100%);
  padding: 56px 0 64px;
}
.be-jack-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.be-jack-hero__logo { height: 34px; width: auto; margin-bottom: 22px; }
.be-jack-hero__eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 14px;
}
.be-jack-hero__heading {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--be-white);
  margin-bottom: 18px;
}
.be-jack-hero__sub {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 28px;
}
.be-jack-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.be-jack-hero__media {
  background: var(--be-off-white);
  border-radius: var(--be-radius-lg);
  box-shadow: var(--be-shadow-lg);
  padding: 24px;
}
.be-jack-hero__media img { width: 100%; height: auto; display: block; }

/* Stats */
.be-jack-stats { padding: 64px 0; background: var(--be-white); }
.be-jack-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.be-jack-stats__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 20px;
  background: var(--be-off-white);
  border: 1px solid var(--be-border);
  border-top: 3px solid var(--jack-blue);
  border-radius: var(--be-radius-md);
  text-align: center;
  align-items: center;
}
.be-jack-stats__num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--jack-blue-dark);
  line-height: 1;
}
.be-jack-stats__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--be-text-2);
  line-height: 1.4;
}

/* Product grid */
.be-jack-products { padding: 8px 0 64px; background: var(--be-white); }
.be-jack-products .products.columns-3 { margin-bottom: 40px !important; }
.be-jack-products__cta { display: flex; justify-content: center; }
.be-btn--jack-outline {
  background: transparent;
  color: var(--jack-blue-dark);
  border-color: var(--jack-blue);
}
.be-btn--jack-outline:hover {
  background: var(--jack-blue);
  color: var(--be-white);
  border-color: var(--jack-blue);
}

/* Local dealer CTA */
.be-jack-cta {
  background: var(--be-off-white);
  border-top: 1px solid var(--be-border);
  padding: 56px 0;
}
.be-jack-cta__inner { max-width: 640px; }
.be-jack-cta__heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--be-navy);
  margin-bottom: 14px;
}
.be-jack-cta__sub {
  font-size: 1rem;
  color: var(--be-text-2);
  line-height: 1.7;
  margin-bottom: 26px;
}
.be-jack-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 640px) {
  .be-jack-stats__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 860px) {
  .be-jack-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
}

/* ============================================================
   23. CREALITY BRAND LANDING PAGE
   ============================================================ */
:root {
  --creality-green:      #17B85B;
  --creality-green-dark: #0F9A4B;
}

.be-creality-hero {
  background: radial-gradient(ellipse at 75% 30%, #EAF0FF 0%, var(--be-white) 60%);
  padding: 56px 0 64px;
  position: relative;
  overflow: hidden;
}
.be-creality-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.be-creality-hero__logo { height: 30px; width: auto; margin-bottom: 22px; }
.be-creality-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--creality-green-dark);
  margin-bottom: 14px;
}
.be-creality-hero__eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--creality-green);
  flex-shrink: 0;
}
.be-creality-hero__heading {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--be-navy);
  margin-bottom: 18px;
}
.be-creality-hero__sub {
  font-size: 1.0625rem;
  color: var(--be-text-2);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 28px;
}
.be-creality-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.be-creality-hero__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.be-creality-hero__media::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(23, 184, 91, 0.12) 0%, transparent 70%);
  z-index: 0;
}
.be-creality-hero__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-width: 420px;
  filter: drop-shadow(0 24px 48px rgba(10, 22, 40, 0.14));
}

.be-btn--creality {
  background-color: var(--be-navy);
  color: var(--be-white);
  border-color: var(--be-navy);
  border-radius: 999px;
}
.be-btn--creality:hover {
  background-color: #000;
  border-color: #000;
  color: var(--be-white);
}
.be-btn--creality-outline {
  background: transparent;
  color: var(--creality-green-dark);
  border-color: var(--creality-green);
  border-radius: 999px;
}
.be-btn--creality-outline:hover {
  background: var(--creality-green);
  color: var(--be-white);
  border-color: var(--creality-green);
}

/* Stats */
.be-creality-stats { padding: 64px 0; background: var(--be-off-white); }
.be-creality-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.be-creality-stats__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 20px;
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-top: 3px solid var(--creality-green);
  border-radius: var(--be-radius-md);
  text-align: center;
  align-items: center;
}
.be-creality-stats__num {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--be-navy);
  line-height: 1;
}
.be-creality-stats__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--be-text-2);
  line-height: 1.4;
}

/* Product grid */
.be-creality-products { padding: 8px 0 64px; background: var(--be-white); }
.be-creality-products .products.columns-3 { margin-bottom: 40px !important; }
.be-creality-products__cta { display: flex; justify-content: center; }

/* Local dealer CTA */
.be-creality-cta {
  background: var(--be-off-white);
  border-top: 1px solid var(--be-border);
  padding: 56px 0;
}
.be-creality-cta__inner { max-width: 640px; }
.be-creality-cta__heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--be-navy);
  margin-bottom: 14px;
}
.be-creality-cta__sub {
  font-size: 1rem;
  color: var(--be-text-2);
  line-height: 1.7;
  margin-bottom: 26px;
}
.be-creality-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 640px) {
  .be-creality-stats__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 860px) {
  .be-creality-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
}

/* ============================================================
   24. HOMEPAGE: SERVICE & REPAIRS SPOTLIGHT
   ============================================================ */
.be-svc-spotlight { padding: 8px 0 64px; background: var(--be-white); }
.be-svc-spotlight__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
.be-svc-spotlight__media img,
.be-svc-spotlight__media video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--be-radius-lg);
  box-shadow: var(--be-shadow-lg);
  object-fit: cover;
  aspect-ratio: 1 / 1;
  background: var(--be-blue-pale);
}
.be-svc-spotlight__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--be-navy);
  margin-bottom: 16px;
}
.be-svc-spotlight__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 3px;
  background-color: var(--be-blue);
  border-radius: 2px;
  flex-shrink: 0;
}
.be-svc-spotlight__heading {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: var(--be-navy);
  line-height: 1.2;
  margin-bottom: 14px;
}
.be-svc-spotlight__sub {
  font-size: 1.0625rem;
  color: var(--be-text-2);
  line-height: 1.7;
  margin-bottom: 26px;
}
.be-svc-spotlight__stats {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.be-svc-spotlight__stat { display: flex; flex-direction: column; gap: 2px; }
.be-svc-spotlight__stat-num { font-size: 1.375rem; font-weight: 800; color: var(--be-blue); line-height: 1; }
.be-svc-spotlight__stat-label { font-size: 0.75rem; font-weight: 600; color: var(--be-text-3); }
.be-svc-spotlight__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 860px) {
  .be-svc-spotlight__grid { grid-template-columns: 0.95fr 1.05fr; gap: 56px; }
  /* Both spotlights share the same mobile-first DOM order now (copy, then
     media) so mobile always leads with the value prop, consistent with
     the delivery section below. --reverse's desktop look already matches
     its natural DOM order (copy left, media right), so it needs no
     override; the non-reverse variant needs `order` to put its media
     column back on the left, matching its original desktop layout. */
  .be-svc-spotlight--reverse .be-svc-spotlight__grid { grid-template-columns: 1.05fr 0.95fr; }
  .be-svc-spotlight:not(.be-svc-spotlight--reverse) .be-svc-spotlight__media { order: 1; }
  .be-svc-spotlight:not(.be-svc-spotlight--reverse) .be-svc-spotlight__copy { order: 2; }
}

/* ============================================================
   25. HOMEPAGE: NATIONWIDE DELIVERY
   ============================================================ */
.be-delivery { padding: 64px 0; background: var(--be-off-white); border-top: 1px solid var(--be-border); border-bottom: 1px solid var(--be-border); }
.be-delivery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.be-delivery__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--be-navy);
  margin-bottom: 16px;
}
.be-delivery__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 3px;
  background-color: var(--be-blue);
  border-radius: 2px;
  flex-shrink: 0;
}
.be-delivery__heading {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: var(--be-navy);
  line-height: 1.2;
  margin-bottom: 14px;
}
.be-delivery__sub {
  font-size: 1.0625rem;
  color: var(--be-text-2);
  line-height: 1.7;
  margin-bottom: 22px;
}
.be-delivery__facts {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.be-delivery__facts li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9375rem;
  color: var(--be-text-2);
}
.be-delivery__facts li strong { color: var(--be-text); }
.be-delivery__facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--be-blue-light);
  box-shadow: inset 0 0 0 4px var(--be-blue);
}

.be-delivery__map {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-lg);
  box-shadow: var(--be-shadow-md);
  padding: 32px;
  overflow: hidden;
}
.be-delivery__map svg { max-width: 380px; }
/* Small SA-flag accent strip, top edge of the card */
.be-delivery__flag {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  display: flex;
}
.be-delivery__flag span { flex: 1; height: 100%; }
.be-delivery__country {
  stroke: var(--be-gold);
  stroke-width: 0.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 14px rgba(10, 22, 40, 0.22));
}
.be-delivery__route {
  stroke: var(--be-gold);
  stroke-width: 0.45;
  stroke-dasharray: 1.4 1.6;
  opacity: 0.8;
}
.be-delivery__dot { fill: var(--be-white); stroke: var(--be-navy); stroke-width: 0.5; }
.be-delivery__label-bg,
.be-delivery__hub-label-bg {
  fill: var(--be-white);
  stroke: var(--be-border);
  stroke-width: 0.3;
}
.be-delivery__label {
  font-family: var(--be-font);
  font-size: 3.6px;
  font-weight: 700;
  fill: var(--be-navy);
}
.be-delivery__hub { fill: #DE3831; stroke: var(--be-white); stroke-width: 0.6; }
.be-delivery__hub-label {
  font-family: var(--be-font);
  font-size: 4.2px;
  font-weight: 800;
  letter-spacing: 0.02em;
  fill: var(--be-navy);
}
.be-delivery__pulse {
  fill: #DE3831;
  opacity: 0.35;
  transform-origin: 1481.2px 982.2px;
  animation: be-delivery-pulse 2.4s ease-out infinite;
}
@keyframes be-delivery-pulse {
  0%   { transform: scale(0.5); opacity: 0.45; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .be-delivery__pulse { animation: none; opacity: 0; }
}

/* Mobile-only rhythm fix: below the 860px breakpoint the two service
   spotlights stack in one column with an identical white background, so
   the 8px top / 64px bottom padding tuned for the side-by-side desktop
   grid left them reading as one cramped, seamless block on a phone.
   Give the stack real breathing room and a visible seam between the two,
   and tighten the stat row so it doesn't feel loose on a narrow column. */
@media (max-width: 859px) {
  .be-svc-spotlight { padding: 40px 0 48px; }
  .be-svc-spotlight--reverse {
    padding-top: 48px;
    border-top: 1px solid var(--be-border);
  }
  .be-svc-spotlight__stats { gap: 18px 28px; margin-bottom: 30px; }
  .be-delivery { padding: 48px 0; }
}

@media (min-width: 860px) {
  .be-delivery__grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  /* Map (decorative, aria-hidden) visually on the left, copy on the right --
     reordered with `order` rather than moving the SVG in the markup, so
     reading/tab order still leads with the real content. */
  .be-delivery__map { order: 1; }
  .be-delivery__copy { order: 2; }
}

/* ============================================================
   26. CATEGORY LANDING PAGES (taxonomy-product_cat.php)
   ============================================================ */
.be-catpage-hero {
  padding: 40px 0 48px;
  background: var(--be-off-white);
  border-bottom: 1px solid var(--be-border);
  overflow: hidden;
}
.be-catpage-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.be-catpage-hero__copy { min-width: 0; }
.be-catpage-hero__image-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  .be-catpage-hero__inner {
    flex-direction: row;
    align-items: center;
    gap: clamp(32px, 4vw, 64px);
  }
  .be-catpage-hero__copy { flex: 1 1 0%; }
  .be-catpage-hero__image-wrap {
    position: relative;
    flex: 0 1 clamp(260px, 26vw, 360px);
    max-width: 360px;
    min-width: 0;
    width: auto;
  }
}
.be-catpage-hero__crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.875rem;
  color: var(--be-text-3);
  margin-bottom: 20px;
}
.be-catpage-hero__crumb a { color: var(--be-blue); }
.be-catpage-hero__crumb .sep { opacity: 0.5; }
.be-catpage-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--be-navy);
  margin-bottom: 14px;
}
.be-catpage-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 3px;
  background-color: var(--be-blue);
  border-radius: 2px;
  flex-shrink: 0;
}
.be-catpage-hero__heading {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--be-navy);
  line-height: 1.15;
  margin-bottom: 14px;
}
.be-catpage-hero__sub {
  font-size: 1.0625rem;
  color: var(--be-text-2);
  line-height: 1.7;
  max-width: 760px;
}

/* Products section header -- gives the actual products (the primary task
   on this page) a heading that outranks "About" and "Common Questions"
   instead of opening with WooCommerce's bare "Showing X results" line. */
.be-catpage-products__header { margin-bottom: 4px; }
/* Filter bar now lives directly above the grid it controls (moved out of
   the hero, where checking a category pill changed content far away from
   where you were looking) -- give it its own breathing room in this spot. */
.be-woo-wrap .be-shop-filterbar { margin: 20px 0 28px; }
.be-catpage-products__title {
  font-size: clamp(1.75rem, 3.5vw, 2.375rem);
  font-weight: 800;
  color: var(--be-navy);
}

/* About section */
.be-catpage-about { padding: 48px 0; background: var(--be-white); }
.be-catpage-about--alt { background: var(--be-off-white); border-top: 1px solid var(--be-border); border-bottom: 1px solid var(--be-border); }
.be-catpage-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.be-catpage-about__body h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--be-navy);
  margin-bottom: 14px;
}
.be-catpage-about__body p {
  font-size: 1rem;
  color: var(--be-text-2);
  line-height: 1.75;
}
.be-catpage-about__aside {
  /* Pale-blue "helpful info" surface -- the same semantic tint the site
     already uses for its WhatsApp help-CTA callouts, applied here so this
     buyer-education box reads as the same kind of helpful callout instead
     of a plain gray sidebar. */
  background: var(--be-blue-pale);
  border: 1px solid var(--be-blue-light);
  border-radius: var(--be-radius-lg);
  padding: 24px;
}
.be-catpage-about__aside h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--be-blue);
  margin-bottom: 16px;
}
.be-catpage-considerations {
  display: grid;
  gap: 16px;
  margin: 0;
}
.be-catpage-considerations__item dt {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--be-navy);
  margin-bottom: 3px;
  padding-left: 14px;
  position: relative;
}
.be-catpage-considerations__item dt::before {
  /* Reuses the same small brand-blue mark used elsewhere as an eyebrow
     accent, so the two "labelled fact" patterns on this page read as one
     family instead of two unrelated conventions. */
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--be-blue);
}
.be-catpage-considerations__item dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--be-text-2);
  line-height: 1.6;
}

/* FAQ */
.be-catpage-faq { padding: 56px 0; background: var(--be-off-white); border-top: 1px solid var(--be-border); }
.be-catpage-faq .be-section-title {
  /* Override the generic h2 clamp (up to 2.5rem) so this supporting
     section matches the same secondary heading scale as "About" and
     the CTA, instead of accidentally outsizing the products heading. */
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--be-navy);
}
.be-catpage-faq__list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.be-catpage-faq__item {
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  padding: 4px 20px;
}
.be-catpage-faq__item summary {
  padding: 16px 0;
  font-weight: 700;
  color: var(--be-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.be-catpage-faq__item summary::-webkit-details-marker { display: none; }
.be-catpage-faq__item summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--be-blue);
  flex-shrink: 0;
  transition: transform var(--be-transition);
}
.be-catpage-faq__item[open] summary::after { transform: rotate(45deg); }
.be-catpage-faq__item p { padding: 0 0 18px; margin: 0; color: var(--be-text-2); line-height: 1.7; }

/* CTA -- amplified to the same conviction as its sibling .be-help-cta on
   the homepage (icon badge + full-strength heading scale), reusing only
   primitives the system already owns for this exact "ask before you buy"
   moment rather than inventing new ones. */
.be-catpage-cta { background: var(--be-navy); padding: 56px 0; }
.be-catpage-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.be-catpage-cta__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--be-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.be-catpage-cta__inner h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: var(--be-white);
  margin-bottom: 8px;
}
.be-catpage-cta__inner p { font-size: 1rem; color: rgba(255,255,255,0.75); }

@media (min-width: 768px) {
  .be-catpage-about__grid { grid-template-columns: 1.4fr 1fr; gap: 48px; }
}
@media (min-width: 860px) {
  .be-catpage-cta__inner { flex-direction: row; align-items: center; }
  .be-catpage-cta__text { flex: 1; }
}

/* ============================================================
   27. SHOP ARCHIVE: SEARCH + CATEGORY FILTERS
   ============================================================ */
.be-shop-hero {
  padding: 40px 0 28px;
  background: var(--be-off-white);
  border-bottom: 1px solid var(--be-border);
}
.be-shop-hero__crumb {
  display: flex;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--be-text-3);
  margin-bottom: 18px;
}
.be-shop-hero__crumb a { color: var(--be-blue); }
.be-shop-hero__crumb .sep { opacity: 0.5; }
.be-shop-hero__heading {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--be-navy);
  margin-bottom: 10px;
}
.be-shop-hero__sub {
  font-size: 1.0625rem;
  color: var(--be-text-2);
  margin-bottom: 28px;
  max-width: 640px;
}

.be-shop-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 480px;
  margin-bottom: 20px;
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-sm);
  box-shadow: var(--be-shadow-xs);
  transition: box-shadow var(--be-transition), border-color var(--be-transition);
}
.be-shop-search:focus-within {
  border-color: var(--be-blue);
  box-shadow: 0 0 0 3px var(--be-blue-pale);
}
.be-shop-search__icon {
  position: absolute;
  left: 14px;
  color: var(--be-text-3);
  pointer-events: none;
}
.be-shop-search__input {
  flex: 1;
  border: none;
  background: none;
  padding: 12px 12px 12px 42px;
  font-family: var(--be-font);
  font-size: 0.9375rem;
  color: var(--be-text);
  outline: none;
}
.be-shop-search__input::placeholder { color: var(--be-text-3); }
.be-shop-search__btn {
  border: none;
  background: var(--be-blue);
  color: var(--be-white);
  font-family: var(--be-font);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 0 var(--be-radius-sm) var(--be-radius-sm) 0;
  cursor: pointer;
  transition: background-color var(--be-transition);
}
.be-shop-search__btn:hover { background: var(--be-blue-hover); }

.be-shop-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.be-shop-filters__pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--be-border);
  background: var(--be-white);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--be-text-2);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--be-transition), color var(--be-transition), border-color var(--be-transition);
}
.be-shop-filters__pill:hover { border-color: var(--be-blue); color: var(--be-blue); }
.be-shop-filters__pill input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.be-shop-filters__pill.is-active {
  background: var(--be-blue);
  border-color: var(--be-blue);
  color: var(--be-white);
}
.be-shop-filters__pill.is-active:hover { color: var(--be-white); }
.be-shop-filters__clear {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--be-text-3);
  text-decoration: underline;
  padding: 8px 4px;
}
.be-shop-filters__clear:hover { color: var(--be-blue); }

/* ============================================================
   32. MY ACCOUNT PAGE
   ============================================================ */

.woocommerce-account .be-page-header { display: none; }
.woocommerce-account .be-page-wrap { padding-top: 0; padding-bottom: 0; background: var(--be-grey-1); }
.woocommerce-account .be-page-body { max-width: none; padding: 0; }

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  padding: 32px 0 64px;
}
/* WooCommerce core adds a float-era clearfix (content + display:table) on
   this exact selector; inside a grid container those pseudo-elements
   become real (phantom) grid items and shove the two real children into
   extra rows/columns. Kill them since grid needs no clearfix. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
  content: none;
  display: none;
}

/* ---- Sidebar navigation ---- */
.woocommerce-MyAccount-navigation {
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  box-shadow: var(--be-shadow-card);
  padding: 10px;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation-link { margin-bottom: 2px; }
.woocommerce-MyAccount-navigation-link a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--be-radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--be-text-2);
  transition: background var(--be-transition), color var(--be-transition);
}
.woocommerce-MyAccount-navigation-link a::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.woocommerce-MyAccount-navigation-link a:hover { background: var(--be-blue-light); color: var(--be-blue); }
.woocommerce-MyAccount-navigation-link.is-active a { background: var(--be-blue); color: var(--be-white); }

.woocommerce-MyAccount-navigation-link--dashboard a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--orders a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--downloads a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-address a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-account a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--wordfence-2fa a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--be-border); }

/* ---- Content card ---- */
.woocommerce-MyAccount-content {
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  box-shadow: var(--be-shadow-card);
  padding: 28px;
}
.woocommerce-MyAccount-content > p:first-child {
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--be-navy);
  letter-spacing: -0.01em;
}
.woocommerce-MyAccount-content p { color: var(--be-text-2); line-height: 1.65; margin-bottom: 14px; }
.woocommerce-MyAccount-content a { color: var(--be-blue); font-weight: 600; }
.woocommerce-MyAccount-content a:hover { text-decoration: underline; }
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content input[type="submit"].button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--be-navy);
  color: var(--be-white) !important;
  border: none;
  border-radius: var(--be-radius-sm);
  font-family: var(--be-font);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--be-transition);
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content input[type="submit"].button:hover { background: var(--be-blue); }

/* ---- Orders table ---- */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.woocommerce-orders-table__header {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--be-text-3);
  border-bottom: 2px solid var(--be-border);
}
.woocommerce-orders-table__cell {
  padding: 14px 12px;
  border-bottom: 1px solid var(--be-border);
  color: var(--be-text);
}
.woocommerce-orders-table__row:last-child .woocommerce-orders-table__cell { border-bottom: none; }
.woocommerce-orders-table__cell-order-status { font-weight: 700; }
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: #2e7d32; }
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status { color: var(--be-blue); }
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status { color: #b26a00; }
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status { color: #c62828; }
.woocommerce-orders-table__cell-order-actions .button { padding: 8px 16px; font-size: 0.8125rem; margin-right: 6px; }

/* ---- Addresses ---- */
.woocommerce-Address {
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-sm);
  padding: 20px;
  background: var(--be-off-white);
  margin-bottom: 16px;
}
.woocommerce-Address:last-child { margin-bottom: 0; }
.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.woocommerce-Address-title h2 { font-size: 1rem; font-weight: 800; color: var(--be-navy); margin: 0; }
.woocommerce-Address-title .edit { font-size: 0.8125rem; font-weight: 700; color: var(--be-blue); }
.woocommerce-Address address { font-style: normal; color: var(--be-text-2); line-height: 1.7; }

/* ---- Edit account / edit address forms ---- */
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row { margin-bottom: 18px; }
.woocommerce-EditAccountForm label,
.woocommerce-address-fields label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--be-navy);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.woocommerce-EditAccountForm .input-text,
.woocommerce-EditAccountForm select,
.woocommerce-address-fields .input-text,
.woocommerce-address-fields select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-sm);
  font-family: var(--be-font);
  font-size: 0.9375rem;
  color: var(--be-text);
  background: var(--be-white);
  transition: border-color var(--be-transition);
}
.woocommerce-EditAccountForm .input-text:focus,
.woocommerce-address-fields .input-text:focus { outline: none; border-color: var(--be-blue); }
.woocommerce-EditAccountForm fieldset {
  border: none;
  padding: 20px 0 0;
  margin: 20px 0 0;
  border-top: 1px solid var(--be-border);
}
.woocommerce-EditAccountForm legend { font-size: 0.9375rem; font-weight: 800; color: var(--be-navy); padding: 0; margin-bottom: 16px; }
.woocommerce-EditAccountForm .password-input { position: relative; display: block; }
.woocommerce-EditAccountForm .show-password-input {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: var(--be-text-3);
  border: none;
  cursor: pointer;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
@media (min-width: 640px) {
  .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-address-fields .form-row-first { float: left; width: 48%; }
  .woocommerce-EditAccountForm .form-row-last,
  .woocommerce-address-fields .form-row-last { float: right; width: 48%; }
}

/* ---- Responsive: two-column layout + stacked orders table ---- */
@media (min-width: 860px) {
  .woocommerce-account .woocommerce { grid-template-columns: 250px 1fr; }
}
@media (max-width: 700px) {
  .woocommerce-orders-table thead { display: none; }
  .woocommerce-orders-table, .woocommerce-orders-table tbody, .woocommerce-orders-table tr,
  .woocommerce-orders-table td, .woocommerce-orders-table th { display: block; width: 100%; }
  .woocommerce-orders-table__row {
    margin-bottom: 16px;
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius-sm);
    padding: 4px 0;
  }
  .woocommerce-orders-table__cell { border-bottom: none; padding: 8px 14px; }
  .woocommerce-orders-table__cell::before {
    content: attr(data-title) ": ";
    font-weight: 700;
    color: var(--be-text-3);
    margin-right: 6px;
  }
}

/* ============================================================
   33. CONTACT PAGE
   ============================================================ */

.be-contact-hero {
  padding: 56px 0 40px;
  background: var(--be-off-white);
  border-bottom: 1px solid var(--be-border);
  text-align: center;
}
.be-contact-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--be-blue);
  margin-bottom: 14px;
}
.be-contact-hero__eyebrow span {
  width: 24px;
  height: 2px;
  background: var(--be-blue);
  display: inline-block;
}
.be-contact-hero__heading {
  font-size: 2rem;
  font-weight: 800;
  color: var(--be-navy);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.be-contact-hero__sub {
  max-width: 560px;
  margin: 0 auto;
  color: var(--be-text-2);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.be-contact-main { padding: 48px 0 80px; }
.be-contact-main__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

/* Contact info column */
.be-contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.be-contact-info__whatsapp { width: 100%; justify-content: center; }
.be-contact-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  box-shadow: var(--be-shadow-card);
}
.be-contact-info__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--be-border);
}
.be-contact-info__list li:last-child { border-bottom: none; }
.be-contact-info__list svg { color: var(--be-blue); flex-shrink: 0; margin-top: 2px; }
.be-contact-info__list strong { display: block; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--be-navy); margin-bottom: 4px; }
.be-contact-info__list span { color: var(--be-text-2); line-height: 1.6; }
.be-contact-info__list a { color: var(--be-blue); font-weight: 600; }
.be-contact-info__list a:hover { text-decoration: underline; }

/* Form card */
.be-contact-form-card {
  background: var(--be-white);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  box-shadow: var(--be-shadow-card);
  padding: 32px;
}
.be-contact-form-card__title { font-size: 1.25rem; font-weight: 800; color: var(--be-navy); margin-bottom: 6px; letter-spacing: -0.01em; }
.be-contact-form-card__sub { color: var(--be-text-3); font-size: 0.9375rem; margin-bottom: 24px; }

/* WPForms field styling to match theme inputs */
.be-contact-form-card .wpforms-container { margin: 0 !important; }
.be-contact-form-card .wpforms-field { padding: 0 0 18px !important; }
.be-contact-form-card .wpforms-field-label {
  display: block;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: var(--be-navy) !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px !important;
}
.be-contact-form-card .wpforms-required-label { color: #e53935 !important; }
.be-contact-form-card input[type="text"],
.be-contact-form-card input[type="email"],
.be-contact-form-card input[type="tel"],
.be-contact-form-card textarea {
  width: 100% !important;
  height: 46px;
  padding: 0 14px !important;
  border: 1px solid var(--be-border) !important;
  border-radius: var(--be-radius-sm) !important;
  font-family: var(--be-font) !important;
  font-size: 0.9375rem !important;
  color: var(--be-text) !important;
  background: var(--be-white) !important;
  transition: border-color var(--be-transition);
  box-shadow: none !important;
}
.be-contact-form-card textarea { height: auto; min-height: 130px; padding: 12px 14px !important; resize: vertical; }
.be-contact-form-card input:focus,
.be-contact-form-card textarea:focus { outline: none; border-color: var(--be-blue) !important; }
.be-contact-form-card .wpforms-field-row { display: flex; gap: 16px; }
.be-contact-form-card .wpforms-field-row-block { flex: 1; }
.be-contact-form-card .wpforms-submit-container { margin-top: 4px; }
.be-contact-form-card button.wpforms-submit {
  width: 100%;
  height: 48px;
  border: none !important;
  border-radius: var(--be-radius-sm) !important;
  background: var(--be-navy) !important;
  color: var(--be-white) !important;
  font-family: var(--be-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background var(--be-transition);
}
.be-contact-form-card button.wpforms-submit:hover { background: var(--be-blue) !important; }
.be-contact-form-card .wpforms-error-container,
.be-contact-form-card label.wpforms-error {
  color: #e53935 !important;
  font-size: 0.8125rem !important;
  margin-top: 4px !important;
}
.be-contact-form-card .wpforms-confirmation-container-full {
  background: #e8f5e9 !important;
  border: 1px solid #c8e6c9 !important;
  border-radius: var(--be-radius-sm) !important;
  color: #256029 !important;
  padding: 16px !important;
}

@media (min-width: 900px) {
  .be-contact-main__grid { grid-template-columns: 340px 1fr; }
  .be-contact-hero__heading { font-size: 2.5rem; }
}