/* ==========================================================================
   Banana Mart storefront design system
   Values measured from the live reference storefront.
   Breakpoints follow the reference: sm 640, md 768, lg 1024, xl 1280.
   Mobile-first; no override layers.
   ========================================================================== */

:root {
  /* Palette sampled from the Banana Mart reference.
     Roles are unchanged - only the values differ, so layout is untouched. */
  --bm-yellow: #f2c028;
  /* primary fill: top bar, buttons, stars */
  --bm-yellow-dark: #e8bf00;
  /* hover */
  --bm-ink: #2b1b0e;
  /* espresso: body text, footer, dark pills */
  --bm-ink-soft: #6b563f;
  /* muted warm text */
  --bm-bg: #fdf9f0;
  /* cream page background */
  --bm-band: #f4ead9;
  /* warm beige section band */
  --bm-line: #ece0cd;
  /* warm hairline */
  --bm-img: #faf1e6;
  /* warm product-image backdrop */

  /* Accent keeps the old "teal" role (chips, prices, active nav, icons).
     Amber-brown so it stays legible on white and on tints, where yellow would not. */
  --bm-teal: #8a5a00;
  --bm-teal-dark: #6b4600;

  --bm-gold: #f2c028;
  --bm-green: #15c138;
  /* retained: WhatsApp / in-stock only */
  --bm-red: #a8442a;
  /* warm strike-through */

  /* Action buttons */
  --bm-btn: #f2c028;
  --bm-btn-hover: #e8bf00;
  --bm-btn-ink: #2b1b0e;

  /* Warm-tinted neutral ramp */
  --bm-gray-50: #faf6ee;
  --bm-gray-100: #f1e9db;
  --bm-gray-200: #e5dac6;
  --bm-gray-300: #cfc0a6;
  --bm-gray-400: #a8977c;
  --bm-gray-500: #7d6c55;
  --bm-gray-600: #5c4c38;
  --bm-slate-400: #a8977c;

  /* Layout */
  --bm-container: 1280px;
  --bm-pad: 12px;
  --bm-pad-sm: 16px;
  --bm-sidebar: 256px;
  --bm-col-gap: 32px;

  /* Radii */
  --bm-r-lg: 8px;
  --bm-r-xl: 12px;
  --bm-r-2xl: 16px;
  --bm-r-3xl: 24px;

  /* Shadows */
  --bm-shadow-sm: 0 1px 3px 0 rgba(43, 27, 14, .1), 0 1px 2px -1px rgba(43, 27, 14, .1);
  --bm-shadow-lg: 0 10px 15px -3px rgba(43, 27, 14, .07), 0 4px 6px -4px rgba(43, 27, 14, .07);
  --bm-shadow-card: 0 2px 12px rgba(43, 27, 14, .07);
  /* Layered product-card shadow. Two of the layers use a negative Y offset, so
     the card is lifted above as well as below rather than only cast downward. */
  --bm-shadow-product:
    0 54px 55px rgba(0, 0, 0, .25),
    0 -12px 30px rgba(0, 0, 0, .12),
    0 4px 6px rgba(0, 0, 0, .12),
    0 12px 13px rgba(0, 0, 0, .17),
    0 -3px 5px rgba(0, 0, 0, .09);
  /* Deep panel shadow shared by the checkout and order-confirmation cards, so
     the two steps of the same flow lift off the page identically. */
  --bm-shadow-panel:
    0 50px 100px -20px rgba(50, 50, 93, .25),
    0 30px 60px -30px rgba(0, 0, 0, .3),
    inset 0 -2px 6px rgba(10, 37, 64, .35);
}

/* --------------------------------------------------------- base */
*,
*::before,
*::after {
  box-sizing: border-box
}

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

body {
  margin: 0;
  background: var(--bm-bg);
  color: var(--bm-ink);
  font-family: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none
}

img {
  max-width: 100%;
  height: auto
}

button {
  font: inherit
}

.bm-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  flex: 0 0 auto
}

.bm-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.bm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

/* --------------------------------------------------------- container */
.bm-shell {
  width: 100%;
  max-width: var(--bm-container);
  margin-inline: auto;
  padding-inline: var(--bm-pad);
}

.bm-shell-narrow {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--bm-pad)
}

.bm-main {
  min-height: 48vh
}

/* --------------------------------------------------------- top bar (md+) */
.bm-topbar {
  display: none;
  background: var(--bm-yellow);
  color: var(--bm-ink)
}

.bm-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 6px;
  font-size: 12px;
  line-height: 16px;
}

.bm-topbar-inner>span {
  font-weight: 500
}

.bm-topbar a {
  display: flex;
  align-items: center;
  gap: 4px
}

.bm-topbar a:hover {
  color: var(--bm-teal-dark)
}

.bm-topbar .bm-icon {
  width: 12px;
  height: 12px
}

/* --------------------------------------------------------- header */
.bm-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .6);
}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .bm-header {
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    backdrop-filter: blur(24px) saturate(1.5);
  }
}

.admin-bar .bm-header {
  top: 32px
}

.bm-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 70px;
}

.bm-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  padding-block: 4px
}

.bm-logo img,
.bm-logo .custom-logo {
  display: block;
  height: 60px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  object-position: left center;
}

/* search — reference "store-search-3d" component */
.bm-search-wrap {
  display: none;
  flex: 1 1 0%;
  min-width: 0;
  /* Anchors the suggestion panel to the search box. */
  position: relative;
}

.bm-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 40px;
  gap: 5.6px;
  padding: 3.2px 3.2px 3.2px 11.2px;
  background: linear-gradient(#fff, #fdf7ec);
  border: 1px solid rgba(138, 90, 0, .22);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(138, 90, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(138, 90, 0, .06);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.bm-search:focus-within {
  border-color: rgba(138, 90, 0, .45);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 28px rgba(138, 90, 0, .22), 0 0 0 3px rgba(138, 90, 0, .1), inset 0 1px 0 #fff;
}

.bm-search>.bm-icon {
  width: 15.2px;
  height: 15.2px;
  color: var(--bm-slate-400)
}

.bm-search input[type=search] {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 4px;
  font: inherit;
  font-size: 13px;
  line-height: 21px;
  color: var(--bm-ink);
  -webkit-appearance: none;
  appearance: none;
}

.bm-search input[type=search]::placeholder {
  color: #a8977c
}

.bm-search input[type=search]::-webkit-search-cancel-button {
  display: none
}

.bm-search button {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--bm-r-lg);
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  background: linear-gradient(145deg, #a06a05, #8a5a00 45%, #6b4600);
  box-shadow: 0 4px 12px rgba(138, 90, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .2s;
}

.bm-search button:active {
  transform: scale(.92)
}

.bm-search-btn-text {
  display: none
}

.bm-search-btn-icon {
  width: 16px;
  height: 16px
}

/* header actions */
.bm-head-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto
}

.bm-head-mobile {
  display: flex;
  align-items: center;
  flex: 0 0 auto
}

.bm-head-mobile a,
.bm-head-mobile button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--bm-r-xl);
  color: var(--bm-ink);
  transition: transform .15s, background-color .15s;
}

.bm-head-mobile a:active,
.bm-head-mobile button:active {
  transform: scale(.95);
  background: rgba(138, 90, 0, .1)
}

.bm-head-mobile .bm-icon {
  width: 22px;
  height: 22px
}

.bm-round {
  display: none;
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid var(--bm-gray-200);
  border-radius: 9999px;
  background: transparent;
  color: var(--bm-ink);
  transition: border-color .2s, color .2s;
}

.bm-round:hover {
  border-color: rgba(138, 90, 0, .4);
  color: var(--bm-teal)
}

.bm-round .bm-icon {
  width: 20px;
  height: 20px
}

.bm-cart-btn {
  display: none;
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: var(--bm-teal);
  color: #fff;
  box-shadow: var(--bm-shadow-sm);
  transition: background-color .2s;
}

.bm-cart-btn:hover {
  background: var(--bm-teal-dark)
}

.bm-cart-btn .bm-icon {
  width: 20px;
  height: 20px
}

.bm-cart-btn>span:not(.bm-cart-count) {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px
}

.bm-cart-count {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 9999px;
  background: var(--bm-gold);
  color: var(--bm-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.bm-cart-count:empty {
  display: none
}

/* --------------------------------------------------------- hero */
.bm-hero-section {
  padding: 8px var(--bm-pad) 0
}

.bm-hero {
  position: relative;
  width: 100%;
  max-width: var(--bm-container);
  margin-inline: auto;
  overflow: hidden;
  /* No fixed ratio: the frame takes its height from the banner itself, so an
     uploaded image of any shape is shown whole rather than cropped to fit. */
  /* One corner radius at every width - phones used to get a rounder 24px. */
  border-radius: var(--bm-r-2xl);
  box-shadow: 0 8px 30px rgba(138, 90, 0, .15);
  background: #fff;
}

.bm-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------- catalog shell */
.bm-catalog-shell {
  width: 100%;
  max-width: var(--bm-container);
  margin-inline: auto;
  padding: 8px var(--bm-pad) 16px;
}

/* benefits / trust strip (md+ on the reference) */
.bm-benefits {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  /* Space before the sidebar and product grid. The row only shows from 768px,
     so this margin never applies on phones. */
  margin-bottom: 20px;
}

.bm-benefits>div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--bm-gray-100);
  border-radius: var(--bm-r-xl);
  box-shadow: var(--bm-shadow-sm);
  min-width: 0;
}

.bm-benefits>div>.bm-icon {
  width: 36px;
  height: 36px;
  padding: 8px;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: rgba(138, 90, 0, .1);
  color: var(--bm-teal);
}

.bm-benefits>div>div {
  min-width: 0
}

.bm-benefits strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: var(--bm-ink)
}

.bm-benefits small {
  display: block;
  font-size: 11px;
  line-height: 15px;
  color: var(--bm-gray-500)
}

/* --------------------------------------------------------- content row */
.bm-catalog-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  margin-top: 4px
}

.bm-products-area {
  flex: 1 1 0%;
  min-width: 0
}

/* --------------------------------------------------------- category sidebar */
.bm-sidebar {
  display: none;
  flex: 0 0 var(--bm-sidebar);
  width: var(--bm-sidebar)
}

.bm-sidebar-panel {
  overflow: hidden;
  border-radius: var(--bm-r-2xl);
  border: 1px solid rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), var(--bm-shadow-lg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.bm-side-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bm-gray-100);
  background: linear-gradient(to right, rgba(138, 90, 0, .08), transparent);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -.35px;
  color: var(--bm-ink);
}

.bm-side-title .bm-icon {
  width: 16px;
  height: 16px;
  color: var(--bm-teal)
}

.bm-side-nav {
  padding: 8px
}

.bm-side-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
  padding: 10px 12px;
  border-radius: var(--bm-r-xl);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--bm-gray-600);
  transition: transform .2s, background-color .2s, color .2s;
}

.bm-side-link:last-child {
  margin-bottom: 0
}

.bm-side-link:hover {
  color: #3a2a18;
  background: rgba(138, 90, 0, .08);
  transform: translateX(2px)
}

.bm-side-link.is-active {
  color: var(--bm-teal);
  font-weight: 700;
  background: linear-gradient(135deg, rgba(138, 90, 0, .14), rgba(138, 90, 0, .06));
  box-shadow: inset 3px 0 0 var(--bm-teal);
}

.bm-side-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.bm-side-link em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  color: var(--bm-gray-500);
  background: var(--bm-gray-100);
  border-radius: 9999px;
  padding: 1px 7px;
}

.bm-side-link.is-active em {
  background: rgba(138, 90, 0, .14);
  color: var(--bm-teal)
}

/* --------------------------------------------------------- catalog bar */
.bm-products-toolbar {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(243, 244, 246, .8);
  border-radius: var(--bm-r-2xl);
  box-shadow: var(--bm-shadow-card);
}

.bm-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.bm-products-toolbar h1 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--bm-ink);
}

.bm-sort {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 20px;
  color: var(--bm-gray-600)
}

.bm-sort>span {
  white-space: nowrap;
  font-weight: 500
}

.bm-sort .bm-order-form {
  margin: 0
}

.bm-sort select {
  max-width: none;
  padding: 8px 10px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-lg);
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--bm-ink);
  outline: none;
}

.bm-sort select:focus {
  border-color: var(--bm-teal);
  box-shadow: 0 0 0 2px rgba(138, 90, 0, .2)
}

/* --------------------------------------------------------- product grid */
.bm-products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

/* --------------------------------------------------------- product card */
.bm-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(243, 244, 246, .8);
  border-radius: var(--bm-r-2xl);
  box-shadow: var(--bm-shadow-product);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.bm-product-card:active {
  transform: scale(.99)
}

.bm-product-image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--bm-img);
}

.bm-product-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 2px;
  transition: transform .3s;
}

.bm-product-card:hover .bm-product-image img {
  transform: scale(1.02)
}

/* discount badge — content width, never stretched */

.bm-product-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 10px;
  text-align: left
}

.bm-product-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.375;
  color: var(--bm-ink);
  transition: color .2s;
}

.bm-product-card:hover .bm-product-title {
  color: var(--bm-teal)
}

.bm-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-top: 4px;
  gap: 2px 6px;
  text-align: left;
}

.bm-price del {
  text-decoration: line-through;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  color: var(--bm-red);
}

.bm-price ins {
  text-decoration: none;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -.025em;
  color: var(--bm-teal);
}

/* Low-high range on a variable product: one unbroken figure, so the dash never
   wraps away from the prices it joins. */
.bm-price-range {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.bm-price-dash {
  margin: 0 3px;
  font-weight: 600;
}

.bm-card-actions {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px
}

.bm-buy-btn {
  display: flex;
  flex: 1 1 0%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  padding: 8px;
  border-radius: var(--bm-r-xl);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
  border: 1px solid transparent;
  background: var(--bm-btn);
  color: var(--bm-btn-ink);
  box-shadow: var(--bm-shadow-sm);
}

.bm-buy-btn:hover {
  background: var(--bm-btn-hover)
}

.bm-buy-btn .bm-icon {
  width: 16px;
  height: 16px
}

.bm-buy-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.bm-product-card .added_to_cart {
  display: none
}

/* --------------------------------------------------------- pagination + empty */
.bm-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px
}

.bm-pagination .page-numbers {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border-radius: var(--bm-r-lg);
  background: #fff;
  border: 1px solid var(--bm-gray-200);
  font-size: 14px;
  font-weight: 500;
  color: var(--bm-gray-600);
}

.bm-pagination .page-numbers:hover {
  border-color: var(--bm-teal);
  color: var(--bm-teal)
}

.bm-pagination .current {
  background: var(--bm-btn);
  border-color: var(--bm-btn);
  color: var(--bm-btn-ink);
  font-weight: 700
}

.bm-empty-card {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(243, 244, 246, .8);
  border-radius: var(--bm-r-2xl);
  box-shadow: var(--bm-shadow-card);
  color: var(--bm-gray-500);
  font-size: 14px;
}

.bm-empty-card .bm-icon {
  width: 46px;
  height: 46px;
  color: var(--bm-gray-300)
}

.bm-empty-card p {
  margin: 0
}

/* --------------------------------------------------------- footer */
.bm-footer {
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: var(--bm-ink);
  color: var(--bm-gray-300);
}

.bm-footer-inner {
  width: 100%;
  max-width: var(--bm-container);
  margin-inline: auto;
  padding: 48px var(--bm-pad-sm);
}

.bm-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px
}

.bm-footer h3 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px
}

.bm-footer p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 20px
}

.bm-footer p .bm-icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--bm-teal);
  flex: 0 0 auto
}

.bm-footer a:hover {
  color: #fff
}

.bm-mini-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px
}

.bm-mini-brand img {
  /* The padding sits inside this height, so the glyph area is height minus 14. */
  height: 54px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  background: rgba(255, 255, 255, .94);
  border-radius: 10px;
  padding: 7px 10px;
}

.bm-mini-brand strong {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px
}

.bm-mini-brand span {
  display: block;
  margin-top: 2px;
  color: var(--bm-gray-500);
  font-size: 12px;
  line-height: 18px
}

.bm-footer-links,
.bm-footer-policy {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.bm-footer-links>a,
.bm-footer-policy>a {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 20px
}

.bm-policy-title {
  margin-top: 24px !important
}

.bm-foot-muted {
  margin-top: 20px;
  color: var(--bm-gray-500);
  font-size: 12px
}

.bm-social-dot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 9999px;
  color: var(--bm-gray-300);
}

.bm-copyright {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: var(--bm-container);
  margin-inline: auto;
  padding: 24px var(--bm-pad-sm) 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--bm-gray-500);
}

/* --------------------------------------------------------- floating help */
.bm-help {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60
}

.bm-help-btn {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 9999px;
  background: var(--bm-teal);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 9px 24px rgba(43, 27, 14, .28);
}

.bm-help-btn .bm-icon {
  width: 26px;
  height: 26px
}

.bm-help-panel {
  display: none;
  position: absolute;
  right: 0;
  bottom: 64px;
  width: 210px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  box-shadow: 0 16px 35px rgba(14, 37, 43, .23);
  color: var(--bm-ink);
}

.bm-help.is-open .bm-help-panel {
  display: block
}

.bm-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid var(--bm-gray-100);
  font-size: 14px;
}

.bm-help-close {
  border: 0;
  background: none;
  font-size: 22px;
  color: var(--bm-gray-400);
  cursor: pointer;
  line-height: 1
}

.bm-help-panel>a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  font-size: 13px;
  font-weight: 600
}

.bm-help-panel>a .bm-icon {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 9999px;
  background: rgba(138, 90, 0, .1);
  color: var(--bm-teal)
}

.bm-help-panel>a:last-child .bm-icon {
  background: rgba(21, 193, 56, .12);
  color: #12ab31
}

.bm-call-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  z-index: 99999;
  background: var(--bm-ink);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 10px 28px rgba(10, 30, 35, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.bm-call-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0)
}

/* --------------------------------------------------------- content pages */
.bm-store-back {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 32px auto 16px;
  padding-inline: var(--bm-pad);
  color: var(--bm-teal);
  font-weight: 600;
  font-size: 13px;
}

.bm-legal-card {
  overflow: hidden;
  margin-bottom: 48px;
  background: #fff;
  border: 1px solid rgba(243, 244, 246, .8);
  border-radius: var(--bm-r-2xl);
  box-shadow: var(--bm-shadow-card);
}

.bm-legal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  border-bottom: 1px solid var(--bm-gray-100);
  background: linear-gradient(to right, rgba(138, 90, 0, .08), transparent);
}

.bm-legal-head img {
  width: 42px
}

.bm-legal-head small {
  display: block;
  font-size: 10px;
  color: var(--bm-teal);
  letter-spacing: 1px;
  text-transform: uppercase
}

.bm-legal-head h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700
}

.bm-legal-body {
  padding: 24px;
  font-size: 15px;
  line-height: 26px;
  color: var(--bm-gray-600)
}

.bm-legal-body h2 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 28px;
  color: var(--bm-ink)
}

.bm-legal-body h3 {
  margin: 24px 0 8px;
  font-size: 15px;
  line-height: 24px;
  color: var(--bm-ink)
}

.bm-legal-body p {
  margin: 0 0 14px
}

.bm-legal-body ul {
  padding-left: 20px;
  margin: 0 0 14px
}

.bm-legal-body li {
  margin-bottom: 6px
}

.bm-basic {
  background: #fff;
  border: 1px solid rgba(243, 244, 246, .8);
  border-radius: var(--bm-r-2xl);
  padding: 24px;
  margin: 32px auto 48px;
  box-shadow: var(--bm-shadow-card);
}

.bm-notice {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--bm-gray-200);
  padding: 20px;
  border-radius: var(--bm-r-xl)
}

/* --------------------------------------------------------- auth */
.bm-auth-wrap {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  padding: 24px var(--bm-pad) 56px
}

.bm-auth-head {
  margin-bottom: 16px;
  padding: 22px 24px;
  border-radius: var(--bm-r-2xl);
  color: #fff;
  background: linear-gradient(120deg, var(--bm-teal-dark), var(--bm-teal));
  box-shadow: 0 8px 22px rgba(38, 103, 108, .18);
}

.bm-auth-head h1 {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 30px;
  font-weight: 700
}

.bm-auth-head p {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  opacity: .9
}

.bm-auth-card {
  background: #fff;
  border: 1px solid rgba(243, 244, 246, .8);
  border-radius: var(--bm-r-2xl);
  padding: 20px;
  box-shadow: var(--bm-shadow-card);
}

.bm-auth-card form {
  display: grid;
  gap: 14px
}

.bm-auth-card label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px
}

.bm-auth-card input,
.bm-auth-card textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  outline: none;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-lg);
  background: #fff;
  color: var(--bm-ink);
}

.bm-auth-card textarea {
  min-height: 78px;
  resize: vertical
}

.bm-auth-card input:focus,
.bm-auth-card textarea:focus {
  border-color: var(--bm-teal);
  box-shadow: 0 0 0 3px rgba(138, 90, 0, .12)
}

.bm-auth-submit {
  min-height: 46px;
  border: 0;
  border-radius: var(--bm-r-lg);
  background: var(--bm-btn);
  color: var(--bm-btn-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s;
}

.bm-auth-submit:hover {
  background: var(--bm-btn-hover)
}

.bm-auth-switch {
  text-align: center;
  color: var(--bm-gray-500);
  font-size: 13px
}

.bm-auth-switch a {
  color: var(--bm-teal);
  font-weight: 700
}

.bm-alert {
  background: #fdf1ec;
  border: 1px solid #f0c9bb;
  color: #a8442a;
  border-radius: var(--bm-r-lg);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 20px;
}

/* --------------------------------------------------------- account */
.bm-account {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  padding: 24px var(--bm-pad) 56px
}

.bm-profile-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: start;
  min-height: 140px;
  padding: 20px;
  border-radius: var(--bm-r-2xl);
  color: #fff;
  background: linear-gradient(140deg, var(--bm-teal-dark) 0%, #0fa384 100%);
  box-shadow: 0 8px 24px rgba(35, 99, 102, .23);
}

.bm-profile-card::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .08);
  right: -25px;
  top: -22px;
}

.bm-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--bm-r-xl);
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .25);
  font-size: 18px;
  font-weight: 700;
}

.bm-profile-card small {
  opacity: .78;
  font-size: 12px
}

.bm-profile-card h1 {
  margin: 2px 0 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700
}

.bm-profile-card p {
  margin: 2px 0 4px;
  font-size: 13px;
  line-height: 20px
}

.bm-verified {
  display: inline-flex;
  background: rgba(255, 255, 255, .14);
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11px
}

.bm-logout {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--bm-r-lg);
  padding: 7px 10px;
  font-size: 11px
}

.bm-account-box {
  margin-top: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(243, 244, 246, .8);
  border-radius: var(--bm-r-2xl);
  box-shadow: var(--bm-shadow-card);
}

.bm-account-box h2 {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700
}

.bm-account-title {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: start
}

.bm-account-title>.bm-icon {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 9999px;
  background: rgba(138, 90, 0, .1);
  color: var(--bm-teal)
}

.bm-account-title strong {
  display: block;
  font-size: 14px
}

.bm-account-title small {
  display: block;
  font-size: 11px;
  color: var(--bm-gray-500)
}

.bm-account-title a {
  font-size: 11px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-lg);
  padding: 5px 8px
}

.bm-address-line {
  background: var(--bm-gray-50);
  border-radius: var(--bm-r-lg);
  padding: 12px;
  margin-top: 10px;
  color: var(--bm-gray-600);
  font-size: 12px;
  line-height: 20px
}

.bm-contact-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.bm-contact-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border-radius: var(--bm-r-lg);
  background: rgba(138, 90, 0, .08);
  color: var(--bm-teal);
  font-size: 12px;
  font-weight: 700;
}

.bm-contact-actions a.wa {
  background: rgba(21, 193, 56, .1);
  color: #0f9c2e
}

.bm-contact-actions .bm-icon {
  width: 16px;
  height: 16px
}

.bm-orders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px
}

.bm-orders-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700
}

.bm-orders-head a {
  font-size: 12px;
  color: var(--bm-teal)
}

.bm-no-orders {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-height: 165px;
  margin-top: 10px;
  background: #fff;
  border: 1px solid rgba(243, 244, 246, .8);
  border-radius: var(--bm-r-2xl);
  box-shadow: var(--bm-shadow-card);
}

.bm-no-orders>.bm-icon {
  width: 42px;
  height: 42px;
  color: var(--bm-gray-300)
}

.bm-no-orders p {
  margin: 4px;
  font-size: 13px;
  color: var(--bm-gray-500)
}

.bm-no-orders a {
  background: var(--bm-btn);
  color: var(--bm-btn-ink);
  border-radius: var(--bm-r-lg);
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 700
}

.bm-orders-list {
  display: grid;
  gap: 8px;
  margin-top: 10px
}

.bm-order-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(243, 244, 246, .8);
  border-radius: var(--bm-r-xl);
  padding: 12px;
}

.bm-order-row em {
  font-style: normal;
  color: var(--bm-teal);
  font-weight: 700
}

/* --------------------------------------------------------- WooCommerce */
.woocommerce .woocommerce-breadcrumb {
  display: none
}

.bm-wc-wrap {
  width: 100%;
  max-width: var(--bm-container);
  margin-inline: auto;
  padding: 24px var(--bm-pad) 48px
}

.bm-wc-wrap .woocommerce {
  background: #fff;
  border: 1px solid rgba(243, 244, 246, .8);
  border-radius: var(--bm-r-2xl);
  padding: 24px;
  box-shadow: var(--bm-shadow-card);
}

.woocommerce div.product div.images img {
  border-radius: var(--bm-r-2xl)
}

.woocommerce div.product .product_title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--bm-ink)
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--bm-teal);
  font-weight: 700
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: var(--bm-red);
  font-weight: 500;
  opacity: 1
}

.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
  background: var(--bm-btn);
  color: var(--bm-btn-ink);
  border-radius: var(--bm-r-lg);
  font-weight: 700;
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
  background: var(--bm-btn-hover);
  color: var(--bm-btn-ink)
}

.woocommerce table.shop_table {
  border-color: var(--bm-gray-200);
  border-radius: var(--bm-r-xl)
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  min-height: 44px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-lg);
  padding: 9px 12px;
  font: inherit;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--bm-teal);
  box-shadow: 0 0 0 3px rgba(138, 90, 0, .12);
  outline: none;
}

.woocommerce-checkout #payment {
  background: var(--bm-gray-50);
  border-radius: var(--bm-r-xl)
}

.cart-empty.woocommerce-info {
  border-top-color: var(--bm-teal)
}

.return-to-shop .button {
  background: var(--bm-btn) !important;
  color: var(--bm-btn-ink) !important
}

.bm-empty-cart-page {
  min-height: calc(100vh - 320px);
  padding: 64px var(--bm-pad);
  text-align: center;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  width: 100%;
  max-width: var(--bm-container);
  margin-inline: auto;
}

.bm-empty-cart-page .bm-icon {
  width: 56px;
  height: 56px;
  color: var(--bm-gray-300)
}

.bm-empty-cart-page h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--bm-gray-600)
}

.bm-empty-cart-page a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  background: var(--bm-btn);
  color: var(--bm-btn-ink);
  padding: 12px 20px;
  border-radius: var(--bm-r-lg);
  font-weight: 700;
}

.bm-single-product {
  width: 100%;
  max-width: var(--bm-container);
  margin-inline: auto;
  padding: 24px var(--bm-pad) 48px
}

/* Flattens the main product wrapper on the product page. Related and upsell
   items also carry WooCommerce's `product` class, so the card component is
   excluded - otherwise those cards lose their background, border and shadow
   and stop matching the catalogue. */
.bm-single-product .product:not(.bm-product-card) {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none
}

.bm-single-product .woocommerce-tabs,
.bm-single-product .related.products,
.bm-single-product .upsells.products {
  margin-top: 32px
}

.bm-single-product .related.products ul.products,
.bm-single-product .upsells.products ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}

.bm-single-product .related.products ul.products::before,
.bm-single-product .related.products ul.products::after,
.bm-single-product .upsells.products ul.products::before,
.bm-single-product .upsells.products ul.products::after {
  display: none
}

.bm-single-product .related.products ul.products li.product,
.bm-single-product .upsells.products ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important
}

/* ==========================================================================
   Breakpoints (reference: sm 640, md 768, lg 1024, xl 1280)
   ========================================================================== */

@media (min-width:640px) {

  .bm-shell,
  .bm-shell-narrow {
    padding-inline: var(--bm-pad-sm)
  }

  .bm-catalog-shell {
    padding: 16px var(--bm-pad-sm) 32px
  }

  .bm-hero-section {
    padding: 12px 24px 0
  }


  .bm-header-inner {
    height: 64px
  }

  .bm-logo img,
  .bm-logo .custom-logo {
    height: 44px;
    max-width: 200px
  }

  .bm-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
  }

  .bm-products-grid {
    gap: 20px
  }

  .bm-products-toolbar {
    padding: 12px 16px
  }

  .bm-products-toolbar h1 {
    font-size: 18px;
    line-height: 28px
  }

  .bm-sort {
    display: flex
  }

  .bm-product-image img {
    object-fit: cover;
    padding: 0
  }

  /* The card keeps its layered shadow at every width; hover is carried by the
     border, image and title instead of swapping the shadow out. */
  .bm-product-card:hover {
    border-color: rgba(138, 90, 0, .4);
  }


  .bm-product-body {
    padding: 14px
  }

  .bm-product-title {
    font-size: 14px
  }

  .bm-price {
    margin-top: 6px;
    gap: 2px 8px
  }

  .bm-price del {
    font-size: 16px
  }

  .bm-price ins {
    font-size: 21px;
    line-height: 30px
  }

  .bm-card-actions {
    flex-direction: column;
    gap: 8px;
    padding-top: 10px
  }

  .bm-buy-btn {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: var(--bm-r-lg);
    font-size: 14px;
    gap: 6px;
  }

  .bm-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .bm-footer-inner {
    padding-inline: 24px
  }

  .bm-copyright {
    flex-direction: row;
    text-align: left;
    padding-inline: 24px
  }

  .bm-single-product .related.products ul.products,
  .bm-single-product .upsells.products ul.products {
    gap: 20px
  }
}

@media (min-width:768px) {
  .bm-topbar {
    display: block
  }

  .bm-search-wrap {
    display: block;
    padding-inline: 16px
  }

  .bm-search {
    max-width: 576px;
    height: 44px;
    margin-inline: auto;
    padding-left: 13.6px
  }

  .bm-search input[type=search] {
    padding: 0 5.6px;
    font-size: 14px
  }

  .bm-search button {
    width: auto;
    height: auto;
    min-height: 36px;
    padding: 0 18.4px
  }

  .bm-search-btn-icon {
    display: none
  }

  .bm-search-btn-text {
    display: inline
  }

  .bm-head-mobile {
    display: none
  }

  .bm-round,
  .bm-cart-btn {
    display: flex
  }

  .bm-head-actions {
    gap: 12px
  }

  .bm-hero-section {
    padding: 12px var(--bm-pad-sm) 0
  }

  .bm-hero {
    box-shadow: none
  }

  .bm-benefits {
    display: grid
  }
}

@media (min-width:1024px) {
  .bm-catalog-grid {
    flex-direction: row;
    gap: var(--bm-col-gap);
    margin-top: 8px
  }

  .bm-sidebar {
    display: block;
    position: sticky;
    top: 96px;
    align-self: flex-start
  }

  .admin-bar .bm-sidebar {
    top: 128px
  }

  .bm-benefits {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }

  .bm-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }


  .bm-footer-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px
  }

  .bm-footer-brand {
    grid-column: span 3
  }

  .bm-footer-contact {
    grid-column: span 3
  }

  .bm-footer-links {
    grid-column: span 3
  }

  .bm-footer-policy {
    grid-column: span 3
  }

  .bm-footer-inner {
    padding-block: 56px
  }

  .bm-single-product .related.products ul.products,
  .bm-single-product .upsells.products ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media (min-width:1280px) {
  .bm-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }


  .bm-single-product .related.products ul.products,
  .bm-single-product .upsells.products ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important
  }
}

/* mobile search reveal (reference keeps the field behind a header icon) */
@media (max-width:767px) {
  .bm-search-wrap.is-open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    padding: 8px var(--bm-pad) 12px;
    background: #fff;
    border-bottom: 1px solid var(--bm-gray-100);
    box-shadow: 0 8px 20px rgba(43, 27, 14, .08);
  }

  .bm-header-inner {
    position: relative
  }
}

/* ==========================================================================
   Single product (PDP) - reference structure, Banana Mart palette
   ========================================================================== */
.bm-pdp {
  width: 100%
}

.bm-breadcrumb {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 20px;
  color: var(--bm-gray-500);
}

.bm-breadcrumb a:hover {
  color: var(--bm-teal)
}

.bm-breadcrumb span[aria-hidden] {
  color: var(--bm-gray-300)
}

.bm-breadcrumb-current {
  font-weight: 500;
  color: var(--bm-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bm-pdp-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0
}

.bm-pdp-gallery {
  position: relative;
  min-width: 0;
  max-width: 100%
}

.bm-pdp-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0
}

/* ---------------------------------------------------------- gallery */
.bm-pdp-gallery .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important
}

.bm-pdp-gallery .woocommerce-product-gallery__wrapper {
  margin: 0
}

.bm-pdp-gallery .woocommerce-product-gallery__image {
  position: relative;
  width: 100%
}

.bm-pdp-gallery .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--bm-r-2xl);
  background: var(--bm-img);
}

.bm-pdp-gallery .flex-control-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  list-style: none;
  margin: 14px 0 12px;
  padding: 0 0 4px;
}

.bm-pdp-gallery .flex-control-thumbs li {
  flex: 0 0 auto;
  width: 84px;
  margin: 0
}

.bm-pdp-gallery .flex-control-thumbs img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-xl);
  background: var(--bm-img);
  opacity: .7;
  transition: opacity .2s, border-color .2s;
}

.bm-pdp-gallery .flex-control-thumbs img.flex-active,
.bm-pdp-gallery .flex-control-thumbs img:hover {
  opacity: 1;
  border-color: var(--bm-teal)
}

.bm-pdp-percent {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--bm-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
  box-shadow: var(--bm-shadow-sm);
}

.bm-pdp .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 0;
  background: #fff;
  border-radius: 9999px;
  box-shadow: var(--bm-shadow-sm);
}

/* ------------------------------------------------------------- head */
.bm-pdp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px
}

.bm-pdp-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 9999px;
  background: rgba(138, 90, 0, .1);
  color: var(--bm-teal);
  font-size: 11px;
  font-weight: 600;
  line-height: 16.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.bm-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(21, 193, 56, .1);
  color: #0f7a29;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.bm-stock.is-out {
  background: rgba(168, 68, 42, .1);
  color: var(--bm-red)
}

.bm-stock i {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: currentColor
}

.bm-pdp-title {
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--bm-ink);
}







/* ------------------------------------------------------------ cards */
.bm-pdp-card,
.bm-qty-card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--bm-gray-100);
  border-radius: var(--bm-r-2xl);
  box-shadow: 0 8px 28px -22px rgba(43, 27, 14, .35);
}

.bm-pdp-price-card {
  box-shadow: 0 10px 36px -20px rgba(43, 27, 14, .4)
}

.bm-pdp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px
}

.bm-pdp-price ins {
  text-decoration: none;
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--bm-teal);
}



/* ------------------------------------------------- quantity + total */
.bm-qty-card {
  padding: 16px 20px
}

.bm-qty-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px
}

.bm-qty-col {
  min-width: 0
}

.bm-qty-col.is-center {
  display: flex;
  flex-direction: column;
  align-items: center
}

.bm-qty-col.is-right {
  text-align: right
}

.bm-qty-label {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 16.5px;
  text-transform: uppercase;
  letter-spacing: .025em;
  color: var(--bm-gray-500);
}

.bm-qty-value {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--bm-ink);
}

.bm-qty-value span {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bm-gray-500)
}

.bm-qty-total {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--bm-teal);
}

.bm-stepper {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  margin-top: 8px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: #fff;
  box-shadow: var(--bm-shadow-sm);
}

.bm-step {
  display: grid;
  place-items: center;
  width: 38px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--bm-ink);
  transition: background-color .15s;
}

.bm-step:hover {
  background: rgba(138, 90, 0, .08)
}

.bm-step:disabled {
  opacity: .35;
  cursor: not-allowed
}

.bm-qty-card .quantity {
  margin: 0
}

.bm-qty-card .quantity input.qty {
  width: 46px;
  height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--bm-ink);
  -moz-appearance: textfield;
}

.bm-qty-card .quantity input.qty::-webkit-outer-spin-button,
.bm-qty-card .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

/* -------------------------------------------------------------- CTA */
.bm-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px
}

.bm-pdp .single_add_to_cart_button,
.bm-pdp-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 60px;
  padding: 16px;
  margin: 0;
  float: none;
  border-radius: var(--bm-r-2xl);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  cursor: pointer;
  transition: filter .2s, background-color .2s;
}

.bm-pdp-buy {
  border: 1px solid transparent;
  background: var(--bm-btn);
  color: var(--bm-btn-ink);
  box-shadow: 0 10px 25px rgba(255, 212, 0, .3);
}

.bm-pdp-buy:hover {
  background: var(--bm-btn-hover)
}

.bm-pdp-buy .bm-icon {
  width: 20px;
  height: 20px
}

.bm-pdp .single_add_to_cart_button {
  border: 1px solid var(--bm-ink) !important;
  background: #fff !important;
  color: var(--bm-ink) !important;
}

.bm-pdp .single_add_to_cart_button:hover {
  background: var(--bm-gray-50) !important
}

.bm-pdp .stock {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--bm-gray-500)
}

.bm-pdp .stock.out-of-stock {
  color: var(--bm-red);
  font-weight: 600
}

/* WooCommerce clearfix pseudo-elements would become stray grid items */
.bm-pdp.product form.cart::before,
.bm-pdp.product form.cart::after {
  content: none
}

/* ----------------------------------------------------- whatsapp/trust */
.bm-pdp-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 14px;
  border-radius: var(--bm-r-2xl);
  border: 1px solid rgba(21, 193, 56, .25);
  background: rgba(21, 193, 56, .08);
  color: #0f7a29;
  font-size: 15px;
  font-weight: 700;
  transition: background-color .2s;
}

.bm-pdp-whatsapp:hover {
  background: rgba(21, 193, 56, .14)
}

.bm-pdp-trust {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none
}

.bm-pdp-trust::-webkit-scrollbar {
  display: none
}

.bm-pdp-trust>div {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 96px;
  padding: 12px 8px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--bm-gray-100);
  border-radius: var(--bm-r-xl);
  box-shadow: var(--bm-shadow-sm);
}

.bm-pdp-trust .bm-icon {
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 9999px;
  background: rgba(255, 212, 0, .25);
  color: var(--bm-teal);
}

.bm-pdp-trust span {
  font-size: 11px;
  line-height: 14px;
  color: var(--bm-gray-600)
}

/* -------------------------------------------- description + delivery */
.bm-pdp-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px
}

.bm-pdp-panel {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--bm-gray-100);
  border-radius: var(--bm-r-2xl);
  box-shadow: 0 8px 28px -22px rgba(43, 27, 14, .35);
}

.bm-pdp-panel-head {
  padding: 16px 24px;
  border-bottom: 1px solid var(--bm-gray-100)
}

.bm-pdp-panel-head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--bm-ink)
}

.bm-pdp-panel-body {
  padding: 24px;
  font-size: 15px;
  line-height: 24.375px;
  color: var(--bm-gray-600)
}

.bm-pdp-panel-body p {
  margin: 0 0 12px
}

.bm-pdp-panel-body p:last-child {
  margin-bottom: 0
}

.bm-pdp-side {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--bm-gray-100);
  border-radius: var(--bm-r-xl);
}

.bm-pdp-side h3 {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--bm-ink)
}

.bm-pdp-side table {
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  border-collapse: collapse
}

.bm-pdp-side th,
.bm-pdp-side td {
  padding: 6px 0;
  text-align: left;
  font-weight: 400;
  vertical-align: top
}

.bm-pdp-side th {
  color: var(--bm-gray-500);
  white-space: nowrap;
  padding-right: 12px
}

.bm-pdp-side td {
  color: var(--bm-ink);
  font-weight: 600;
  text-align: right
}

/* ----------------------------------------------- tabs + related grid */
.bm-pdp .woocommerce-tabs {
  margin-top: 32px
}

.bm-pdp .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--bm-gray-200)
}

.bm-pdp .woocommerce-tabs ul.tabs::before {
  display: none
}

.bm-pdp .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 16px 0 0;
  padding: 0
}

.bm-pdp .woocommerce-tabs ul.tabs li::before,
.bm-pdp .woocommerce-tabs ul.tabs li::after {
  display: none
}

.bm-pdp .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 10px 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bm-gray-500)
}

.bm-pdp .woocommerce-tabs ul.tabs li.active a {
  color: var(--bm-teal);
  box-shadow: inset 0 -2px 0 var(--bm-teal)
}

.bm-pdp .related,
.bm-pdp .upsells {
  margin-top: 48px
}

.bm-pdp .related>h2,
.bm-pdp .upsells>h2 {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--bm-ink);
}

.bm-pdp .related ul.products,
.bm-pdp .upsells ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}

.bm-pdp .related ul.products::before,
.bm-pdp .related ul.products::after,
.bm-pdp .upsells ul.products::before,
.bm-pdp .upsells ul.products::after {
  display: none
}

.bm-pdp .related ul.products>li.product,
.bm-pdp .upsells ul.products>li.product,
.bm-pdp .related ul.products>article,
.bm-pdp .upsells ul.products>article {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  list-style: none;
}

@media (min-width:640px) {
  .bm-pdp-info {
    gap: 12px
  }

  .bm-pdp-title {
    font-size: 28px
  }

  .bm-pdp-price ins {
    font-size: 32px;
    line-height: 40px
  }

  .bm-pdp-panel-body {
    padding: 28px
  }
}

@media (min-width:1024px) {
  .bm-single-product {
    padding-inline: 32px
  }

  .bm-breadcrumb {
    display: flex
  }

  .bm-pdp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
    gap: 56px;
  }

  .bm-pdp-gallery {
    position: sticky;
    top: 96px;
    align-self: start
  }

  .admin-bar .bm-pdp-gallery {
    top: 128px
  }

  .bm-pdp-info {
    gap: 12px
  }

  .bm-pdp-title {
    font-size: 34.4px;
    line-height: 41.28px
  }

  .bm-pdp-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px
  }

  .bm-pdp-desc-col {
    grid-column: span 2
  }

  .bm-pdp .related ul.products,
  .bm-pdp .upsells ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

@media (min-width:1280px) {
  .bm-pdp-grid {
    gap: 64px
  }
}

/* ----------------------------------------------------- variant selector */
.bm-variant-card {
  padding: 20px
}

.bm-variant-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--bm-ink)
}

.bm-variant-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px
}

.bm-variant-tile {
  min-width: 100px;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: var(--bm-gray-50);
  color: var(--bm-ink);
  transition: border-color .2s, background-color .2s, box-shadow .2s, color .2s;
}

.bm-variant-tile:hover {
  border-color: var(--bm-teal)
}

.bm-variant-tile.is-selected {
  border-color: var(--bm-btn);
  background: var(--bm-btn);
  color: var(--bm-btn-ink);
  box-shadow: 0 4px 14px rgba(255, 212, 0, .35);
}

.bm-variant-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 17.5px
}

.bm-variant-price {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--bm-teal);
}

.bm-variant-tile.is-selected .bm-variant-price {
  color: var(--bm-btn-ink);
  opacity: .85
}

/* the real control stays in the DOM for WooCommerce's variation JS */
.bm-variant-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* core variation chrome replaced by the tiles. The .variations wrapper stays in
   the DOM (visually hidden) because wc_variation_form() resolves its selects
   through $form.find('.variations select'). */
.bm-pdp .variations_form table.variations {
  display: none
}

/* The real <select>s stay in the DOM for wc_variation_form(), but must not
   affect layout. WooCommerce sets `.woocommerce div.product form.cart .variations
   {width:100%}` at (0,4,2); a plainer selector loses the width battle, leaving an
   absolutely-positioned 100%-wide box that overflowed the viewport. This selector
   is (0,5,2) so the sr-only sizing actually wins. */
/* The form is a single child of the info column, so its own sections need the
   same 20px rhythm - otherwise the variant card sits flush against the qty card. */
.bm-pdp .variations_form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* WooCommerce sets `.woocommerce div.product form.cart{margin-bottom:2em}` at
   (0,3,2), which stacked 32px on top of the info column's 20px gap. One extra
   class takes this to (0,4,2) so it wins without !important. */
.woocommerce div.product.bm-pdp form.cart {
  margin: 0;
}

.bm-pdp .variations_form>.single_variation_wrap {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.woocommerce div.product form.cart .variations.bm-variations-hidden {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  max-width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.bm-pdp .woocommerce-variation-price {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--bm-teal)
}

.bm-pdp .woocommerce-variation-description p {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--bm-gray-600)
}

.bm-pdp .woocommerce-variation-availability .stock {
  margin: 0 0 10px
}

/* ------------------------------------------------------- footer refinements */
.bm-footer-tagline {
  margin: 10px 0 0;
  max-width: 34ch;
  font-size: 13px;
  line-height: 20px;
  color: var(--bm-gray-400);
}

.bm-social {
  margin-top: 20px
}

.bm-social .bm-foot-muted {
  display: block;
  margin: 0 0 10px
}

.bm-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.bm-social-links a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 9999px;
  color: var(--bm-gray-300);
  transition: background-color .2s, border-color .2s, color .2s;
}

.bm-social-links a:hover {
  background: var(--bm-btn);
  border-color: var(--bm-btn);
  color: var(--bm-btn-ink)
}

.bm-social-links .bm-icon {
  width: 18px;
  height: 18px
}

/* ---------------------------------------------- gallery thumbnails (fix)
   WooCommerce core sets `.woocommerce div.product div.images .flex-control-thumbs
   {overflow:hidden}` plus `li{width:25%;float:left}` at specificity (0,4,2)/(0,4,3),
   which clipped thumbnails 5+ and made them unreachable. These selectors carry
   five classes to win cleanly, and the strip wraps instead of scrolling sideways. */
.bm-pdp.product .bm-pdp-gallery .images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  overflow: visible;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.bm-pdp.product .bm-pdp-gallery .images .flex-control-thumbs li {
  width: auto;
  float: none;
  margin: 0;
  list-style: none;
}

.bm-pdp.product .bm-pdp-gallery .images .flex-control-thumbs li img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-xl);
  background: var(--bm-img);
  opacity: .7;
  transition: opacity .2s, border-color .2s;
}

.bm-pdp.product .bm-pdp-gallery .images .flex-control-thumbs li img.flex-active,
.bm-pdp.product .bm-pdp-gallery .images .flex-control-thumbs li img:hover {
  opacity: 1;
  border-color: var(--bm-teal);
}

/* keep the slider viewport inside its column */
.bm-pdp.product .bm-pdp-gallery .images .flex-viewport {
  max-width: 100%;
  border-radius: var(--bm-r-2xl)
}

.bm-pdp.product .bm-pdp-gallery .images {
  max-width: 100%;
  overflow: hidden
}

/* ------------------------------------------- variable product: hide core chrome
   Once a variation resolves, WooCommerce injects its own price block and a
   "Clear" link. The price block repeats the price card in raw core formatting
   (and leaks .screen-reader-text visually), so both are suppressed here.
   Core selectors reach (0,4,2), hence the five-class selectors below. */
.bm-pdp.product .single_variation_wrap .woocommerce-variation-price,
.bm-pdp.product .variations_form .reset_variations,
.bm-pdp.product .single_variation_wrap .woocommerce-variation-add-to-cart .reset_variations {
  display: none !important;
}

/* keep availability only when it actually says something */
.bm-pdp.product .single_variation_wrap .woocommerce-variation-availability:empty {
  display: none
}

.bm-pdp.product .single_variation_wrap .woocommerce-variation-description:empty {
  display: none
}

/* ------------------------------------------------- reviews
   Layout mirrors the reference: heading + star summary on the left, pill
   button on the right that reveals the list/form. Palette is Banana Mart. */
.bm-reviews {
  margin-top: 32px;
}

.bm-reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.bm-reviews-summary {
  min-width: 0;
}

.bm-reviews-summary h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--bm-ink);
}

.bm-reviews-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.bm-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.bm-star {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}

.bm-star-bg,
.bm-star-fg {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.bm-star .bm-icon {
  width: 20px;
  height: 20px;
}

/* Both states are solid. An outlined empty star reduces to a ~1.6px hairline at
   this size, which disappears against the cream page; a filled shape reads by
   silhouette instead of by stroke contrast. */
.bm-star-bg .bm-icon svg {
  fill: var(--bm-gray-400);
  stroke: none;
}

.bm-star-fg .bm-icon svg {
  fill: var(--bm-yellow);
  stroke: none;
}

.bm-reviews-avg {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--bm-gray-600);
}

.bm-reviews-note {
  font-size: 12px;
  line-height: 16px;
  color: var(--bm-gray-400);
}

.bm-reviews-toggle {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 0;
  border-radius: 9999px;
  background: var(--bm-btn);
  color: var(--bm-btn-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: background-color .2s;
}

.bm-reviews-toggle:hover {
  background: var(--bm-btn-hover);
}

.bm-reviews-panel {
  padding: 24px;
  background: var(--bm-gray-50);
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-2xl);
}

.bm-reviews-panel[hidden] {
  display: none;
}

.bm-reviews-panel .woocommerce-Reviews-title,
.bm-reviews-panel #reply-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--bm-ink);
}

.bm-reviews-panel .comment-form input[type=text],
.bm-reviews-panel .comment-form input[type=email],
.bm-reviews-panel .comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-lg);
  font: inherit;
  font-size: 14px;
}

.bm-reviews-panel .comment-form .submit {
  background: var(--bm-ink);
  color: #fff;
  border: 0;
  border-radius: var(--bm-r-lg);
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
}

.bm-reviews-panel .star-rating span,
.bm-reviews-panel p.stars a {
  color: var(--bm-yellow);
}

@media (min-width: 640px) {
  .bm-reviews {
    margin-top: 40px;
  }

  .bm-reviews-summary h2 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .bm-reviews {
    margin-top: 56px;
  }
}

/* ------------------------------------------------- review form */
.bm-reviews-panel #respond {
  margin: 0;
}

.bm-reviews-panel .comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.bm-reviews-panel .comment-form p {
  margin: 0;
}

.bm-reviews-panel .comment-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--bm-ink);
}

.bm-reviews-panel .comment-form .required {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.bm-reviews-panel .comment-form input[type=text],
.bm-reviews-panel .comment-form input[type=tel],
.bm-reviews-panel .comment-form input[type=email],
.bm-reviews-panel .comment-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-lg);
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--bm-ink);
  outline: none;
}

.bm-reviews-panel .comment-form textarea {
  min-height: 110px;
  resize: vertical;
}

.bm-reviews-panel .comment-form input:focus,
.bm-reviews-panel .comment-form textarea:focus {
  border-color: var(--bm-teal);
  box-shadow: 0 0 0 3px rgba(138, 90, 0, .12);
}

.bm-reviews-panel .comment-form input::placeholder {
  color: var(--bm-gray-400);
}

/* Logged-in reviewers post under their account name, so the name field shows it
   read-only rather than inviting an edit the submit handler would discard. */
.bm-reviews-panel .comment-form input[readonly] {
  background: var(--bm-gray-100);
  color: var(--bm-gray-600);
  cursor: default;
}

.bm-reviews-panel .comment-form input[readonly]:focus {
  border-color: var(--bm-gray-200);
  box-shadow: none;
}

/* rating stars in the form */
.bm-reviews-panel .comment-form-rating label {
  margin-bottom: 6px;
}

.bm-reviews-panel p.stars a {
  color: var(--bm-yellow);
}

.bm-reviews-panel p.stars a::before {
  color: var(--bm-gray-300);
}

.bm-reviews-panel p.stars.selected a.active::before,
.bm-reviews-panel p.stars:hover a::before {
  color: var(--bm-yellow);
}

.bm-reviews-panel .form-submit {
  margin: 4px 0 0;
  align-self: start;
}

.bm-reviews-panel .comment-form .submit {
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--bm-r-lg);
  background: var(--bm-ink);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s;
}

.bm-reviews-panel .comment-form .submit:hover {
  background: var(--bm-ink-soft);
}

/* existing review list */
.bm-reviews-panel .commentlist {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.bm-reviews-panel .commentlist li {
  padding: 14px 0;
  border-bottom: 1px solid var(--bm-gray-100);
}

.bm-reviews-panel .commentlist li:last-child {
  border-bottom: 0;
}

.bm-reviews-panel .comment-text {
  font-size: 14px;
  line-height: 22px;
  color: var(--bm-gray-600);
}

.bm-reviews-panel .woocommerce-review__author {
  font-weight: 700;
  color: var(--bm-ink);
}

.bm-reviews-panel .woocommerce-review__published-date {
  font-size: 12px;
  color: var(--bm-gray-400);
}

/* Field order: WordPress emits the comment textarea before the author fields.
   The form is a flex column, so order puts it back to rating -> name -> mobile
   -> review -> submit without fighting core's markup order. */
.bm-reviews-panel .comment-form .comment-form-rating {
  order: 1;
}

.bm-reviews-panel .comment-form .comment-form-author {
  order: 2;
}

.bm-reviews-panel .comment-form .comment-form-mobile {
  order: 3;
}

.bm-reviews-panel .comment-form .comment-form-comment {
  order: 4;
}

.bm-reviews-panel .comment-form .form-submit {
  order: 5;
}

/* From 640px the two short fields share a row. Grid placement is explicit
   rather than relying on `order`, which does not survive the column switch. */
@media (min-width: 640px) {
  .bm-reviews-panel .comment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
  }

  .bm-reviews-panel .comment-form .comment-form-rating {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .bm-reviews-panel .comment-form .comment-form-author {
    grid-column: 1;
    grid-row: 2;
  }

  .bm-reviews-panel .comment-form .comment-form-mobile {
    grid-column: 2;
    grid-row: 2;
  }

  .bm-reviews-panel .comment-form .comment-form-comment {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .bm-reviews-panel .comment-form .form-submit {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: start;
  }
}

/* WooCommerce styles the submit via `#respond input#submit` (two IDs), which a
   class-only selector cannot beat. Matching the ID keeps this !important-free. */
.bm-reviews-panel #respond input#submit {
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--bm-r-lg);
  background: var(--bm-ink);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s;
}

.bm-reviews-panel #respond input#submit:hover {
  background: var(--bm-ink-soft);
}

.bm-reviews-panel .comment-form-rating select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-lg);
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--bm-ink);
}

/* ---------------------------------------- review rating input (SVG stars)
   WooCommerce renders p.stars as icon-font glyphs via ::before, but the glyph
   content resolves empty here so the `star` font never loads and nothing is
   drawn. Real SVG stars are used instead, driving the same #rating select. */
.bm-reviews-panel p.stars,
.bm-reviews-panel .comment-form-rating select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The rating label is redundant next to five obvious stars. */
.bm-reviews-panel .comment-form-rating>label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.bm-rating-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bm-rating-star {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  color: var(--bm-gray-400);
  transition: color .15s, transform .15s;
}

.bm-rating-star .bm-icon {
  width: 26px;
  height: 26px;
}

.bm-rating-star .bm-icon svg {
  fill: currentColor;
  stroke: none;
}

.bm-rating-star.is-on {
  color: var(--bm-yellow);
}

.bm-rating-star:hover {
  transform: scale(1.08);
}

.bm-rating-value {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bm-gray-600);
}


/* ---------------------------------------- card variation popup
   A variable product cannot be ordered from a card without picking a variation,
   so the card button opens this chooser instead of navigating to the product. */
.bm-vp {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.bm-vp[hidden] {
  display: none;
}

body.bm-vp-open {
  overflow: hidden;
}

.bm-vp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 27, 14, .45);
}

.bm-vp-dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 22px;
  background: #fff;
  border-radius: var(--bm-r-2xl);
  box-shadow: 0 24px 48px -12px rgba(43, 27, 14, .3);
}

.bm-vp-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: var(--bm-gray-500);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.bm-vp-close:hover {
  background: var(--bm-gray-100);
  color: var(--bm-ink);
}

.bm-vp-title {
  margin: 0 40px 12px 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;
  color: var(--bm-teal);
}

.bm-vp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}

.bm-vp-price ins {
  text-decoration: none;
  font-size: 24px;
  font-weight: 800;
  color: var(--bm-ink);
}

.bm-vp-price del {
  font-size: 14px;
  color: var(--bm-gray-500);
}

.bm-vp-save {
  padding: 3px 10px;
  border-radius: 9999px;
  background: var(--bm-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.bm-vp-label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bm-ink);
}

.bm-vp-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.bm-vp-option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: #fff;
  font: inherit;
  color: var(--bm-ink);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}

.bm-vp-option strong {
  font-size: 14px;
  font-weight: 700;
}

.bm-vp-option span {
  font-size: 13px;
  color: var(--bm-gray-600);
}

.bm-vp-option:hover:not(:disabled) {
  border-color: var(--bm-teal);
}

.bm-vp-option.is-selected {
  border-color: var(--bm-teal);
  background: var(--bm-gray-50);
  color: var(--bm-teal);
}

.bm-vp-option.is-selected span {
  color: var(--bm-teal);
}

.bm-vp-option:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.bm-vp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.bm-vp-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  overflow: hidden;
}

.bm-vp-step {
  width: 40px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--bm-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.bm-vp-step:hover {
  background: var(--bm-gray-100);
}

.bm-vp-qty-input {
  width: 48px;
  height: 44px;
  border: 0;
  border-left: 1px solid var(--bm-gray-200);
  border-right: 1px solid var(--bm-gray-200);
  background: none;
  font: inherit;
  font-weight: 700;
  text-align: center;
  color: var(--bm-ink);
  -moz-appearance: textfield;
}

.bm-vp-qty-input::-webkit-outer-spin-button,
.bm-vp-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bm-vp-cart {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--bm-teal);
  border-radius: var(--bm-r-xl);
  background: #fff;
  color: var(--bm-teal);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s;
}

.bm-vp-cart:hover:not(:disabled) {
  background: var(--bm-gray-50);
}

.bm-vp-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--bm-r-xl);
  background: var(--bm-btn);
  color: var(--bm-btn-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s;
}

.bm-vp-order:hover:not(:disabled) {
  background: var(--bm-btn-hover);
}

.bm-vp-cart:disabled,
.bm-vp-order:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.bm-vp-cart .bm-icon,
.bm-vp-order .bm-icon {
  width: 18px;
  height: 18px;
}

.bm-vp-cart .bm-icon svg,
.bm-vp-order .bm-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The card button is a <button> for popup products and an <a> otherwise; the
   shared class has to reset the form-control defaults either way. */
button.bm-buy-btn {
  font-family: inherit;
}

/* The dialog moves focus to the first option on open, so the ring is visible
   immediately and has to belong to the palette rather than the UA default. */
.bm-vp-option:focus-visible,
.bm-vp-step:focus-visible,
.bm-vp-qty-input:focus-visible,
.bm-vp-cart:focus-visible,
.bm-vp-order:focus-visible,
.bm-vp-close:focus-visible {
  outline: 2px solid var(--bm-teal);
  outline-offset: 2px;
}

.bm-vp-option:focus:not(:focus-visible),
.bm-vp-step:focus:not(:focus-visible),
.bm-vp-cart:focus:not(:focus-visible),
.bm-vp-order:focus:not(:focus-visible),
.bm-vp-close:focus:not(:focus-visible) {
  outline: none;
}

/* =========================================================================
   Cart & checkout
   One component set shared by both pages: page shell, section card, field,
   selectable choice card, summary rows, CTA. Proportions follow the reference
   storefront (1152px shell, 3fr/2fr split, 16px card radius, 20px card pad);
   every colour is a Banana Mart token.
   ========================================================================= */
.bm-page {
  width: 100%;
  max-width: 1152px;
  margin-inline: auto;
  padding: 24px 16px;
}

.bm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.bm-col-main,
.bm-col-side {
  min-width: 0;
}

.bm-col-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bm-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- section card ---- */
.bm-card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-2xl);
  box-shadow: var(--bm-shadow-card);
}

.bm-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--bm-ink);
}

.bm-card-title .bm-icon {
  width: 20px;
  height: 20px;
  color: var(--bm-teal);
}

.bm-card-title .bm-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bm-card>.bm-card-title+* {
  margin-top: 16px;
}

/* ---- fields ---- */
.bm-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.bm-fields .form-row,
.bm-commerce .woocommerce-additional-fields .form-row {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.bm-commerce .form-row label,
.bm-commerce .woocommerce-additional-fields label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--bm-ink);
}

.bm-commerce .form-row .required {
  color: var(--bm-red);
  text-decoration: none;
}

.bm-commerce .form-row input[type=text],
.bm-commerce .form-row input[type=tel],
.bm-commerce .form-row input[type=email],
.bm-commerce .form-row input[type=password],
.bm-commerce .form-row input[type=number],
.bm-commerce .form-row textarea,
.bm-commerce .form-row .select2-container .select2-selection--single,
.bm-commerce .form-row select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 22px;
  color: var(--bm-ink);
  outline: none;
}

.bm-commerce .form-row textarea {
  min-height: 96px;
  resize: vertical;
}

.bm-commerce .form-row input:focus,
.bm-commerce .form-row textarea:focus,
.bm-commerce .form-row select:focus {
  border-color: var(--bm-teal);
  box-shadow: 0 0 0 3px rgba(138, 90, 0, .12);
}

.bm-commerce .form-row ::placeholder {
  color: var(--bm-gray-400);
}

/* Short fields pair up from 640px, the way the reference storefront pairs its
   name and phone inputs; anything WooCommerce marks wide stays full width. */
@media (min-width: 640px) {
  .bm-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .bm-fields>.form-row-wide,
  .bm-fields>.form-row:only-child,
  .bm-fields>.notes,
  .bm-fields>#billing_address_1_field,
  .bm-fields>#billing_address_2_field,
  .bm-fields>#shipping_address_1_field,
  .bm-fields>#shipping_address_2_field {
    grid-column: 1 / -1;
  }
}

.bm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bm-ink);
  cursor: pointer;
}

.bm-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--bm-teal);
}

/* ---- selectable choice card (delivery + payment) ---- */
.bm-choices {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.bm-choice:hover {
  border-color: var(--bm-gray-300);
}

.bm-choice input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.bm-choice-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 2px solid var(--bm-gray-300);
  border-radius: 9999px;
  background: #fff;
  color: transparent;
}

.bm-choice-mark .bm-icon {
  width: 14px;
  height: 14px;
}

.bm-choice-mark .bm-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bm-choice-mark .bm-icon svg circle {
  display: none;
}

.bm-choice-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.bm-choice-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--bm-ink);
}

.bm-choice-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--bm-teal);
}

.bm-choice-price .bm-free,
.bm-free {
  color: var(--bm-green);
}

.bm-choice-icon img {
  max-height: 24px;
  width: auto;
}

/* Selected state: Banana Mart yellow ring over a warm tint. */
.bm-choice:has(input:checked),
.bm-choice.is-selected {
  border-color: var(--bm-yellow);
  background: var(--bm-gray-50);
}

.bm-choice:has(input:checked) .bm-choice-mark,
.bm-choice.is-selected .bm-choice-mark {
  border-color: var(--bm-yellow);
  background: var(--bm-yellow);
  color: var(--bm-ink);
}

.bm-choice:has(input:focus-visible) {
  outline: 2px solid var(--bm-teal);
  outline-offset: 2px;
}

.bm-choice-item {
  list-style: none;
}

.bm-payment .payment_box {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: var(--bm-r-lg);
  background: var(--bm-gray-50);
  font-size: 13px;
  line-height: 20px;
  color: var(--bm-gray-600);
}

.bm-payment .payment_box p:last-child {
  margin-bottom: 0;
}

/* ---- notes ---- */
.bm-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: var(--bm-gray-50);
  font-size: 13px;
  line-height: 20px;
  color: var(--bm-gray-600);
}

.bm-note-warn {
  border-color: #e6c9a8;
  background: #fdf3e7;
  color: #7a4a12;
}

.bm-muted {
  color: var(--bm-gray-500);
}

/* ---- order note accordion ---- */
.bm-accordion {
  padding: 0;
}

.bm-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bm-accordion-chevron {
  color: var(--bm-gray-500);
  transition: transform .2s;
}

.bm-accordion.is-open .bm-accordion-chevron {
  transform: rotate(180deg);
}

.bm-accordion-body {
  padding: 0 20px 20px;
}

.bm-accordion-body[hidden] {
  display: none;
}

/* ---- cart line items ---- */
.bm-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-line {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bm-gray-100);
}

.bm-line:first-child {
  padding-top: 0;
}

.bm-line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.bm-line-thumb {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  overflow: hidden;
  border-radius: var(--bm-r-xl);
  background: var(--bm-img);
}

.bm-line-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bm-line-body {
  flex: 1 1 auto;
  min-width: 0;
}

.bm-line-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.bm-line-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.bm-line-name a {
  color: var(--bm-ink);
}

.bm-line-meta,
.bm-summary-meta {
  margin-top: 2px;
  font-size: 12px;
  line-height: 18px;
  color: var(--bm-gray-500);
}

.bm-line-meta p,
.bm-summary-meta p {
  margin: 0;
}

.bm-line-remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: var(--bm-gray-500);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
}

.bm-line-remove:hover {
  background: var(--bm-gray-100);
  color: var(--bm-red);
}

.bm-line-price {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--bm-gray-600);
}

.bm-line-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.bm-line-total {
  font-size: 15px;
  font-weight: 700;
  color: var(--bm-ink);
}

/* ---- quantity stepper ---- */
.bm-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-lg);
  background: #fff;
  overflow: hidden;
}

.bm-qty-step {
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--bm-teal);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.bm-qty-step:hover {
  background: var(--bm-gray-50);
}

.bm-qty input.qty {
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--bm-gray-200);
  border-right: 1px solid var(--bm-gray-200);
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--bm-ink);
  -moz-appearance: textfield;
}

.bm-qty input.qty::-webkit-outer-spin-button,
.bm-qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- cart actions ---- */
.bm-cart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bm-gray-100);
}

.bm-coupon {
  display: flex;
  flex: 1 1 260px;
  min-width: 0;
  gap: 8px;
}

.bm-coupon input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--bm-ink);
}

.bm-btn-ghost {
  height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--bm-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s;
}

.bm-btn-ghost:hover:not(:disabled) {
  border-color: var(--bm-teal);
  background: var(--bm-gray-50);
}

.bm-btn-ghost:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.bm-continue {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--bm-teal);
}

/* ---- summary ---- */
.bm-summary-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bm-summary-item {
  display: flex;
  gap: 12px;
}

.bm-summary-thumb {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  overflow: hidden;
  border-radius: var(--bm-r-xl);
  background: var(--bm-img);
}

.bm-summary-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bm-summary-info {
  flex: 1 1 auto;
  min-width: 0;
}

.bm-summary-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--bm-ink);
}

.bm-summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.bm-summary-qty {
  font-size: 13px;
  color: var(--bm-gray-500);
}

.bm-summary-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--bm-teal);
}

.bm-summary-rows {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bm-gray-100);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.bm-summary .bm-summary-rows:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.bm-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--bm-gray-600);
}

.bm-summary-row .amount {
  font-weight: 600;
  color: var(--bm-ink);
}

.bm-summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--bm-gray-100);
  font-size: 18px;
  font-weight: 700;
  color: var(--bm-ink);
}

.bm-summary-total .amount {
  color: var(--bm-teal);
}

.bm-summary .bm-shipping {
  margin-top: 8px;
}

/* ---- CTA ---- */
.bm-cta,
.bm-commerce .checkout-button.button,
.bm-commerce #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--bm-r-xl);
  background: var(--bm-btn);
  color: var(--bm-btn-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s;
}

.bm-cta:hover,
.bm-commerce .checkout-button.button:hover,
.bm-commerce #place_order:hover {
  background: var(--bm-btn-hover);
  color: var(--bm-btn-ink);
}

.bm-cta .bm-icon {
  width: 18px;
  height: 18px;
}

.bm-cta .bm-icon svg {
  fill: currentColor;
  stroke: none;
}

.bm-cta-wrap {
  margin-top: 16px;
}

.bm-place-order {
  margin: 16px 0 0;
  padding: 0;
}

.bm-safe-note {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: var(--bm-gray-50);
}

.bm-safe-note .bm-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--bm-green);
}

.bm-safe-note .bm-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.bm-safe-note strong {
  display: block;
  font-size: 13px;
  color: var(--bm-ink);
}

.bm-safe-note p {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--bm-gray-600);
}

.bm-ssl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--bm-gray-500);
}

.bm-ssl .bm-icon {
  width: 14px;
  height: 14px;
}

.bm-ssl .bm-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* ---- trust badges ---- */
.bm-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-trust li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--bm-gray-600);
}

.bm-trust .bm-icon {
  width: 20px;
  height: 20px;
  color: var(--bm-teal);
}

.bm-trust .bm-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- empty cart ---- */
.bm-empty {
  width: 100%;
  max-width: 512px;
  margin-inline: auto;
  padding: 64px 16px;
  text-align: center;
}

.bm-empty-text {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--bm-gray-600);
}

.bm-empty-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 24px;
  border-radius: var(--bm-r-xl);
  background: var(--bm-btn);
  color: var(--bm-btn-ink);
  font-size: 16px;
  font-weight: 600;
}

.bm-empty-cta:hover {
  background: var(--bm-btn-hover);
  color: var(--bm-btn-ink);
}

/* ---- WooCommerce chrome inside these pages ---- */
.bm-commerce .woocommerce-notices-wrapper .woocommerce-message,
.bm-commerce .woocommerce-notices-wrapper .woocommerce-info,
.bm-commerce .woocommerce-notices-wrapper .woocommerce-error,
.bm-commerce .woocommerce-error,
.bm-commerce .woocommerce-message,
.bm-commerce .woocommerce-info {
  width: 100%;
  max-width: 1152px;
  margin: 16px auto 0;
  padding: 12px 16px;
  border: 1px solid var(--bm-gray-200);
  border-top: 3px solid var(--bm-teal);
  border-radius: var(--bm-r-xl);
  background: #fff;
  list-style: none;
  font-size: 14px;
  color: var(--bm-ink);
}

.bm-commerce .woocommerce-error {
  border-top-color: var(--bm-red);
}

.bm-commerce .woocommerce>.woocommerce-notices-wrapper {
  padding-inline: 16px;
}

.bm-commerce .woocommerce {
  padding: 0;
}

.bm-commerce .bm-hidden-shipping {
  display: none;
}

.bm-commerce .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.bm-commerce #ship-to-different-address {
  font-size: 14px;
}

.bm-commerce .woocommerce-form__label-for-checkbox {
  font-weight: 600;
}

/* Mobile: the CTA rides a fixed bar, so the page reserves room for it. */
.bm-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bm-gray-200);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 24px -18px rgba(43, 27, 14, .5);
}

.bm-sticky-cta .bm-sticky-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--bm-gray-600);
}

.bm-sticky-cta .bm-sticky-total strong {
  font-size: 18px;
  color: var(--bm-ink);
}

@media (max-width: 1023px) {

  .bm-checkout .bm-sticky-cta,
  .bm-cart .bm-sticky-cta {
    display: block;
  }

  body.bm-commerce {
    padding-bottom: 140px;
  }

  .bm-checkout .bm-place-order,
  .bm-cart .bm-cta-wrap {
    display: none;
  }
}

@media (min-width: 768px) {
  .bm-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .bm-page {
    padding: 32px 16px;
  }

  .bm-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 32px;
  }

  .bm-col-main {
    grid-column: span 3;
  }

  .bm-col-side {
    grid-column: span 2;
  }

  .bm-side {
    position: sticky;
    top: 24px;
  }
}

/* Cart and checkout sit as cards straight on the page ground, so the shared
   WooCommerce panel and shell padding are dropped for just these two pages. */
body.bm-commerce .bm-wc-wrap {
  max-width: none;
  padding: 0;
}

body.bm-commerce .bm-wc-wrap .woocommerce {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* WooCommerce's own layout stylesheet floats the totals at 48% and columns the
   customer details; the cards are grid children here, so both are reset. */
body.bm-commerce .cart-collaterals,
body.bm-commerce .cart-collaterals .cart_totals,
body.bm-commerce .cart-collaterals .cross-sells {
  width: 100%;
  float: none;
}

body.bm-commerce #customer_details,
body.bm-commerce #customer_details .col-1,
body.bm-commerce #customer_details .col-2 {
  width: 100%;
  float: none;
  margin: 0;
}

body.bm-commerce #customer_details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.bm-commerce .col2-set::before,
body.bm-commerce .col2-set::after,
body.bm-commerce .cart-collaterals::before,
body.bm-commerce .cart-collaterals::after {
  display: none;
}

/* Bare full-width wrapper for cart and checkout. */
.bm-commerce-wrap {
  width: 100%;
}

.bm-commerce-wrap>.woocommerce,
.bm-commerce-wrap .woocommerce {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* WooCommerce's stylesheet styles the coupon toggle and payment list for its
   own table layout; both are restated as Banana Mart components here. */
.bm-commerce .woocommerce-form-coupon-toggle,
.bm-commerce .woocommerce-form-login-toggle {
  width: 100%;
  max-width: 1152px;
  margin: 24px auto -8px;
  padding-inline: 16px;
}

.bm-commerce .woocommerce-form-coupon-toggle .woocommerce-info,
.bm-commerce .woocommerce-form-login-toggle .woocommerce-info {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--bm-gray-200);
  border-top: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: #fff;
  font-size: 14px;
  color: var(--bm-gray-600);
}

.bm-commerce .woocommerce-info a,
.bm-commerce .woocommerce-message a {
  color: var(--bm-teal);
  font-weight: 600;
}

.bm-commerce form.checkout_coupon,
.bm-commerce form.woocommerce-form-login {
  width: 100%;
  max-width: 1152px;
  margin: 12px auto 0;
  padding: 20px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-2xl);
  background: #fff;
}

.bm-commerce .wc_payment_methods {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  list-style: none;
}

.bm-commerce .wc_payment_methods li {
  margin: 0;
  padding: 0;
  background: none;
  list-style: none;
}

/* Core draws a callout arrow on the payment box; the card layout has no use
   for it and it renders as a stray triangle. */
.bm-commerce .payment_box::before,
.bm-commerce .payment_box::after {
  display: none;
}

.bm-commerce .payment_box {
  background: var(--bm-gray-50);
  color: var(--bm-gray-600);
}

/* Privacy / terms copy under the CTA reads as fine print, not body text. */
.bm-commerce .woocommerce-privacy-policy-text,
.bm-commerce .woocommerce-terms-and-conditions-wrapper {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 18px;
  color: var(--bm-gray-500);
}

.bm-commerce .woocommerce-privacy-policy-text p {
  margin: 0;
}

/* Labels wrap badly in a narrow column when core marks a field "wide" but the
   grid gives it half a row; short fields keep their pair, everything else
   spans. */
.bm-commerce #billing_country_field,
.bm-commerce #billing_state_field,
.bm-commerce #shipping_country_field,
.bm-commerce #shipping_state_field,
.bm-commerce #billing_email_field,
.bm-commerce #billing_phone_field {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {

  .bm-commerce #billing_phone_field,
  .bm-commerce #billing_email_field {
    grid-column: span 1;
  }
}

/* Core (and the theme's earlier rule) tint #payment and the payment box; the
   card already provides the surface, so both are cleared. ID selectors are
   matched to win without !important. */
.bm-commerce .woocommerce-checkout #payment,
.bm-commerce #payment.woocommerce-checkout-payment {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.bm-commerce .woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border: 0;
  background: none;
}

.bm-commerce .woocommerce-checkout #payment div.payment_box {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: var(--bm-r-lg);
  background: var(--bm-gray-50);
  color: var(--bm-gray-600);
  font-size: 13px;
  line-height: 20px;
}

.bm-commerce .woocommerce-checkout #payment div.payment_box::before,
.bm-commerce .woocommerce-checkout #payment div.payment_box::after {
  display: none;
}

.bm-commerce .woocommerce-checkout #payment div.form-row {
  padding: 0;
}

/* Coupon: the reference checkout has no coupon block, but Banana Mart has
   coupons enabled, so it stays as a compact one-row component instead of
   WooCommerce's full-width form. */
.bm-commerce .woocommerce-info::before,
.bm-commerce .woocommerce-message::before,
.bm-commerce .woocommerce-error::before {
  display: none;
}

.bm-commerce .woocommerce-form-coupon-toggle,
.bm-commerce .woocommerce-form-login-toggle {
  margin: 24px auto 0;
}

.bm-commerce .woocommerce-form-coupon-toggle .woocommerce-info,
.bm-commerce .woocommerce-form-login-toggle .woocommerce-info {
  padding: 10px 16px;
  font-size: 13px;
}

.bm-commerce form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 12px auto 0;
  padding: 16px 20px;
}

.bm-commerce form.checkout_coupon>p {
  margin: 0;
  padding: 0;
}

.bm-commerce form.checkout_coupon .form-row-first {
  flex: 1 1 240px;
  min-width: 0;
}

.bm-commerce form.checkout_coupon input[type=text] {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--bm-ink);
}

.bm-commerce form.checkout_coupon button[type=submit],
.bm-commerce form.checkout_coupon .button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--bm-r-xl);
  background: var(--bm-btn);
  color: var(--bm-btn-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.bm-commerce form.checkout_coupon button[type=submit]:hover {
  background: var(--bm-btn-hover);
}

/* The trailing "clear" paragraph core adds would otherwise add dead height. */
.bm-commerce form.checkout_coupon .clear,
.bm-commerce form.checkout_coupon>p:empty {
  display: none;
}

/* WooCommerce floats and half-widths its form rows for its own two-column
   layout. Inside the grid those become 47%-wide cells inside cells, so the
   sizing is handed back to the grid. */
.bm-commerce .bm-fields .form-row,
.bm-commerce .bm-fields .form-row-first,
.bm-commerce .bm-fields .form-row-last,
.bm-commerce .bm-fields .form-row-wide,
.bm-commerce form.checkout_coupon .form-row-first {
  width: 100%;
  float: none;
  clear: none;
}

.bm-commerce .bm-fields::after,
.bm-commerce .bm-fields::before {
  display: none;
}

/* Alternate-delivery-address opt-in, sitting under the customer fields. */
.bm-commerce .bm-alt-address {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bm-gray-100);
}

.bm-commerce .bm-alt-address .bm-check {
  margin-bottom: 0;
}

.bm-commerce .bm-alt-address .shipping_address {
  margin-top: 14px;
}

/* The shipping calculator is a disclosure behind its own toggle; core's script
   slides it open with an inline style, so this only sets the closed default. */
.bm-commerce .shipping-calculator-form {
  display: none;
  margin-top: 10px;
}

.bm-commerce .shipping-calculator-button {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bm-teal);
}

.bm-commerce .shipping-calculator-form .form-row {
  margin-bottom: 8px;
}

.bm-commerce .shipping-calculator-form select,
.bm-commerce .shipping-calculator-form input[type=text] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-lg);
  background: #fff;
  font: inherit;
  font-size: 14px;
}

.bm-commerce .shipping-calculator-form .button {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-lg);
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--bm-ink);
  cursor: pointer;
}

/* Address guidance under the customer fields, matching the reference's hint. */
.bm-commerce .bm-address-hint {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: var(--bm-gray-50);
  font-size: 12px;
  line-height: 18px;
  color: var(--bm-gray-600);
}

.bm-commerce #billing_address_1 {
  min-height: 92px;
  resize: vertical;
}

/* Summary line: name with a remove control, unit price, then the stepper -
   the same order the reference storefront uses. */
.bm-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.bm-summary-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: var(--bm-gray-400);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.bm-summary-remove:hover {
  background: var(--bm-gray-100);
  color: var(--bm-red);
}

.bm-summary-item .bm-summary-price {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--bm-teal);
}

.bm-summary-qty {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-lg);
  background: var(--bm-gray-50);
  overflow: hidden;
}

.bm-summary-step {
  width: 31px;
  height: 30px;
  border: 0;
  background: none;
  color: var(--bm-teal);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.bm-summary-step:hover:not(:disabled) {
  background: #fff;
}

.bm-summary-step:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.bm-summary-qty-value {
  min-width: 32px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--bm-gray-200);
  border-right: 1px solid var(--bm-gray-200);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--bm-ink);
}

.bm-summary-qty-static {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--bm-gray-500);
}

/* While a line is being updated the summary is dimmed rather than replaced,
   so the layout does not jump. */
.bm-summary.is-busy {
  opacity: .6;
  pointer-events: none;
}

/* Sticky summary clearance.
   The site header is sticky at top:0 and 65px tall, so the summary has to park
   below it rather than slide underneath. The max-height keeps the whole card -
   including the order button - reachable when the summary grows taller than the
   viewport; it only scrolls once it actually overflows. */
:root {
  --bm-header-h: 65px;
  --bm-sticky-top: 89px;
  /* header + 24px breathing room */
}

@media (min-width: 1024px) {
  .bm-side {
    top: var(--bm-sticky-top);
  }
}

/* ---------------------------------------- order confirmation
   Same shell and cards as cart/checkout. The order details and address blocks
   come from core's own templates, so they are restyled rather than rebuilt -
   including clearing the float-based address columns that were dropping
   underneath the footer. */
.bm-thankyou .woocommerce-order {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bm-thanks-head {
  text-align: center;
}

.bm-thanks-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  border-radius: 9999px;
  background: rgba(21, 193, 56, .12);
  color: var(--bm-green);
}

.bm-thanks-mark .bm-icon {
  width: 30px;
  height: 30px;
}

.bm-thanks-mark .bm-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bm-thanks-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: var(--bm-ink);
}

.bm-thanks-sub {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--bm-gray-600);
}

.bm-thanks-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--bm-gray-100);
  list-style: none;
  text-align: left;
}

.bm-thanks-meta li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

.bm-thanks-meta span {
  font-size: 12px;
  color: var(--bm-gray-500);
}

.bm-thanks-meta strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--bm-ink);
}

.bm-thanks-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.bm-thanks-actions .bm-cta {
  width: auto;
  min-width: 220px;
}

.bm-thanks-actions .bm-btn-ghost {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Core's order details + address blocks, wrapped as cards. */
.bm-thankyou .woocommerce-order-details,
.bm-thankyou .woocommerce-customer-details,
.bm-thankyou .woocommerce-bacs-bank-details {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-2xl);
  box-shadow: var(--bm-shadow-card);
}

.bm-thankyou .woocommerce-order-details__title,
.bm-thankyou .woocommerce-column__title,
.bm-thankyou .woocommerce-customer-details h2 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--bm-ink);
}

.bm-thankyou table.order_details,
.bm-thankyou table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: 14px;
}

.bm-thankyou table.order_details th,
.bm-thankyou table.order_details td,
.bm-thankyou table.shop_table th,
.bm-thankyou table.shop_table td {
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--bm-gray-100);
  text-align: left;
  vertical-align: top;
  color: var(--bm-gray-600);
}

.bm-thankyou table.order_details thead th {
  padding-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  color: var(--bm-gray-500);
}

.bm-thankyou table.order_details td:last-child,
.bm-thankyou table.order_details th:last-child,
.bm-thankyou table.shop_table td:last-child,
.bm-thankyou table.shop_table th:last-child {
  text-align: right;
  white-space: nowrap;
}

.bm-thankyou table.order_details .product-name {
  color: var(--bm-ink);
  font-weight: 600;
}

.bm-thankyou table.order_details tfoot th {
  font-weight: 600;
  color: var(--bm-gray-600);
}

.bm-thankyou table.order_details tfoot tr:last-child th,
.bm-thankyou table.order_details tfoot tr:last-child td {
  padding-top: 12px;
  border-bottom: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--bm-ink);
}

.bm-thankyou table.order_details tbody tr:last-child td {
  border-bottom: 1px solid var(--bm-gray-100);
}

/* Core lays the two addresses out with floats, which is what pushed them
   behind the footer once the page had no container. */
.bm-thankyou .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
}

.bm-thankyou .woocommerce-column {
  width: 100%;
  float: none;
  margin: 0;
  padding: 0;
}

.bm-thankyou .woocommerce-columns::before,
.bm-thankyou .woocommerce-columns::after {
  display: none;
}

.bm-thankyou address {
  font-size: 14px;
  line-height: 22px;
  font-style: normal;
  color: var(--bm-gray-600);
}

.bm-thankyou .woocommerce-notice,
.bm-thankyou .woocommerce-thankyou-order-received {
  display: none;
  /* replaced by the card heading above */
}

@media (min-width: 768px) {
  .bm-thankyou .woocommerce-columns--addresses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Gateway note between the confirmation cards (e.g. the COD instructions). */
.bm-thankyou .woocommerce-order>p,
.bm-thankyou .woocommerce-thankyou-order-failed-actions {
  margin: 0;
  padding: 14px 20px;
  background: var(--bm-gray-50);
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-2xl);
  font-size: 14px;
  color: var(--bm-gray-600);
}

.bm-thankyou address {
  padding: 0;
  border: 0;
  background: none;
}

.bm-thankyou .woocommerce-customer-details--phone,
.bm-thankyou .woocommerce-customer-details--email {
  margin: 8px 0 0;
  padding-left: 0;
  font-size: 14px;
  color: var(--bm-gray-600);
}

/* Core boxes the address element; the card already provides the surface. */
.bm-thankyou .woocommerce-customer-details address,
.woocommerce-account .woocommerce-customer-details address {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* Confirmation actions share one control height so the pair reads as a set. */
.bm-thanks-actions .bm-cta,
.bm-thanks-actions .bm-btn-ghost {
  /* .bm-btn-ghost carries a fixed 44px height elsewhere; height:auto hands
     sizing back to min-height so both controls match. */
  height: auto;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: var(--bm-r-xl);
  font-size: 15px;
  line-height: 1.2;
}

.bm-thanks-actions .bm-btn-ghost {
  justify-content: center;
  min-width: 180px;
}

/* ---- invoice ---- */
.bm-invoice-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bm-gray-100);
}

.bm-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.bm-print .bm-icon {
  width: 16px;
  height: 16px;
}

.bm-print .bm-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

@page {
  margin: 14mm;
}

@media print {

  /* Only the order sheet prints: no site chrome, no controls, no colour
     backgrounds that would waste ink. */
  .bm-topbar,
  .bm-header,
  /* the site footer only - the invoice has a <footer> of its own */
  body>footer,
  .bm-footer,
  .bm-help,
  #wpadminbar,
  .bm-thanks-actions,
  .bm-invoice-actions,
  .bm-sticky-cta,
  .bm-thanks-mark,
  .woocommerce-order>p {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
  }

  .bm-page {
    max-width: none;
    padding: 0;
  }

  .bm-card,
  .bm-thankyou .woocommerce-order-details,
  .bm-thankyou .woocommerce-customer-details {
    padding: 0 0 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
  }

  .bm-thanks-head {
    text-align: left;
  }

  .bm-thanks-title {
    font-size: 16px;
  }

  .bm-thankyou table.order_details th,
  .bm-thankyou table.order_details td {
    border-bottom: 1px solid #ddd;
  }

  a[href]::after {
    content: none !important;
  }
}

/* ---------------------------------------- invoice document
   Only shown when printing (or saving to PDF). The confirmation cards are
   hidden then, so this is a document in its own right rather than a reflow of
   the page. Logo, company details and totals all come from settings/order. */
.bm-invoice {
  display: none;
}

@media print {

  /* The screen page is replaced by the invoice. */
  .bm-thanks-head,
  .bm-thankyou .woocommerce-order-details__title,
  .bm-thankyou table.order_details,
  .bm-thankyou .woocommerce-customer-details,
  .woocommerce-order-details>h2,
  .woocommerce-MyAccount-navigation {
    display: none !important;
  }

  .bm-invoice {
    display: block;
    color: #1a1a1a;
    font-size: 12px;
    line-height: 1.5;
  }

  .bm-invoice-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 14px;
    border-bottom: 2px solid #1a1a1a;
  }

  .bm-invoice-brand img {
    height: 42px;
    width: auto;
    margin-bottom: 8px;
  }

  .bm-invoice-brand p {
    margin: 0;
    font-size: 11px;
    color: #444;
  }

  .bm-invoice-company {
    font-size: 14px !important;
    font-weight: 700;
    color: #1a1a1a !important;
  }

  .bm-invoice-title {
    text-align: right;
  }

  .bm-invoice-title h1 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em;
  }

  .bm-invoice-title table {
    margin-left: auto;
    border-collapse: collapse;
    font-size: 11px;
  }

  .bm-invoice-title th {
    padding: 1px 10px 1px 0;
    text-align: left;
    font-weight: 500;
    color: #666;
  }

  .bm-invoice-title td {
    padding: 1px 0;
    text-align: right;
    font-weight: 700;
  }

  .bm-invoice-bill {
    margin-top: 14px;
  }

  .bm-invoice h2 {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #666;
  }

  .bm-invoice-bill p {
    margin: 0;
    font-size: 12px;
  }

  .bm-invoice-customer {
    font-weight: 500;
  }

  .bm-invoice-customer br+br {
    display: none;
  }

  .bm-invoice-items {
    width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
  }

  .bm-invoice-items th,
  .bm-invoice-items td {
    padding: 7px 8px;
    border-bottom: 1px solid #e2e2e2;
    text-align: left;
    vertical-align: top;
  }

  .bm-invoice-items thead th {
    border-bottom: 1.5px solid #1a1a1a;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #444;
  }

  .bm-invoice-items .bm-inv-num {
    width: 28px;
    padding-left: 0;
  }

  .bm-invoice-items .bm-inv-qty {
    width: 64px;
    text-align: center;
  }

  .bm-invoice-items .bm-inv-amt {
    width: 96px;
    padding-right: 0;
    text-align: right;
    white-space: nowrap;
  }

  .bm-inv-meta {
    display: block;
    font-size: 10px;
    color: #666;
  }

  .bm-inv-meta p {
    margin: 0;
  }

  .bm-invoice-sum {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }

  .bm-invoice-sum table {
    min-width: 240px;
    border-collapse: collapse;
  }

  .bm-invoice-sum th {
    padding: 4px 16px 4px 0;
    text-align: left;
    font-weight: 500;
    color: #444;
  }

  .bm-invoice-sum td {
    padding: 4px 0;
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
  }

  .bm-invoice-sum tr:last-child th,
  .bm-invoice-sum tr:last-child td {
    padding-top: 8px;
    border-top: 1.5px solid #1a1a1a;
    font-size: 14px;
    font-weight: 800;
    color: #1a1a1a;
  }

  .bm-invoice-note {
    margin-top: 14px;
    padding: 8px 10px;
    border: 1px solid #e2e2e2;
  }

  .bm-invoice-note p {
    margin: 0;
    font-size: 11px;
  }

  .bm-invoice-foot {
    display: block;
    margin-top: 22px;
    padding-top: 10px;
    border-top: 1px solid #e2e2e2;
    text-align: center;
  }

  .bm-invoice-foot p {
    margin: 0;
    font-size: 10px;
    color: #666;
  }

  .bm-invoice,
  .bm-invoice-items,
  .bm-invoice-top {
    break-inside: avoid;
  }
}

/* One field treatment for cart and checkout.
   An older rule (.woocommerce form .form-row …) styles fields at 44px/8px and
   the newer .bm-commerce block at 48px/12px, so inputs and the address textarea
   disagreed. These selectors mirror WooCommerce's own shape and carry the body
   scope, so they settle it for every control in one place. */
body.bm-commerce .woocommerce form .form-row .input-text,
body.bm-commerce .woocommerce form .form-row input.input-text,
body.bm-commerce .woocommerce form .form-row textarea,
body.bm-commerce .woocommerce form .form-row select,
body.bm-commerce .woocommerce form .form-row .select2-container .select2-selection--single {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 22px;
  color: var(--bm-ink);
  box-shadow: none;
}

body.bm-commerce .woocommerce form .form-row textarea {
  min-height: 92px;
  resize: vertical;
}

body.bm-commerce .woocommerce form .form-row .input-text:focus,
body.bm-commerce .woocommerce form .form-row textarea:focus,
body.bm-commerce .woocommerce form .form-row select:focus {
  border-color: var(--bm-teal);
  box-shadow: 0 0 0 3px rgba(138, 90, 0, .12);
  outline: none;
}

body.bm-commerce .woocommerce form .form-row .input-text::placeholder,
body.bm-commerce .woocommerce form .form-row textarea::placeholder {
  color: var(--bm-gray-400);
}

/* Invalid fields flag in the palette rather than WooCommerce's red. */
body.bm-commerce .woocommerce form .form-row.woocommerce-invalid .input-text,
body.bm-commerce .woocommerce form .form-row.woocommerce-invalid textarea,
body.bm-commerce .woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--bm-red);
}

/* Copyright bar: site copyright on the left, build credit on the right. */
.bm-copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.bm-credit a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.bm-credit a:hover {
  color: var(--bm-yellow);
}

@media (max-width: 639px) {
  .bm-copyright {
    justify-content: center;
    text-align: center;
  }
}

/* ---------------------------------------- policy & info pages
   The whole document comes from the page editor; everything below is
   presentation, so any content the shop writes inherits the same rhythm. */
.bm-legal {
  max-width: 820px;
  margin: 28px auto 56px;
  padding-inline: var(--bm-pad);
}

.bm-legal-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 26px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-2xl) var(--bm-r-2xl) 0 0;
  border-bottom: 0;
  background: linear-gradient(135deg, var(--bm-band), var(--bm-gray-50) 65%);
}

.bm-legal-head img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain;
  padding: 6px;
  border-radius: var(--bm-r-lg);
  background: #fff;
  box-shadow: var(--bm-shadow-sm);
}

.bm-legal-head small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bm-teal);
}

.bm-legal-head h1 {
  margin: 2px 0 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 34px;
  color: var(--bm-ink);
}

.bm-legal-updated {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--bm-gray-500);
}

/* ---- table of contents ---- */
.bm-legal-toc {
  padding: 18px 26px;
  border: 1px solid var(--bm-gray-200);
  border-bottom: 0;
  background: #fff;
}

.bm-legal-toc-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bm-gray-500);
}

.bm-legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 24px;
}

.bm-legal-toc li {
  margin-bottom: 6px;
  break-inside: avoid;
  font-size: 14px;
}

.bm-legal-toc li.is-level-3 {
  padding-left: 14px;
}

.bm-legal-toc a {
  color: var(--bm-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.bm-legal-toc a:hover {
  color: var(--bm-teal);
  border-bottom-color: currentColor;
}

/* ---- prose ---- */
.bm-legal-body {
  padding: 26px;
  border: 1px solid var(--bm-gray-200);
  border-radius: 0 0 var(--bm-r-2xl) var(--bm-r-2xl);
  background: #fff;
  box-shadow: var(--bm-shadow-card);
  font-size: 15px;
  line-height: 26px;
  color: var(--bm-gray-600);
}

.bm-legal-body>*:first-child {
  margin-top: 0;
}

.bm-legal-body>*:last-child {
  margin-bottom: 0;
}

.bm-legal-body h2 {
  margin: 32px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--bm-gray-100);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--bm-ink);
  scroll-margin-top: 100px;
}

.bm-legal-body>h2:first-child {
  padding-top: 0;
  border-top: 0;
}

.bm-legal-body h3 {
  margin: 24px 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--bm-ink);
  scroll-margin-top: 100px;
}

.bm-legal-body h4 {
  margin: 20px 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bm-ink);
}

.bm-legal-body p {
  margin: 0 0 14px;
}

.bm-legal-body strong {
  color: var(--bm-ink);
}

.bm-legal-body a {
  color: var(--bm-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bm-legal-body ul,
.bm-legal-body ol {
  margin: 0 0 16px;
  padding-left: 20px;
}

.bm-legal-body li {
  margin-bottom: 8px;
}

.bm-legal-body ul {
  list-style: none;
  padding-left: 0;
}

.bm-legal-body ul li {
  position: relative;
  padding-left: 22px;
}

.bm-legal-body ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--bm-yellow);
}

.bm-legal-body blockquote {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--bm-yellow);
  border-radius: 0 var(--bm-r-lg) var(--bm-r-lg) 0;
  background: var(--bm-gray-50);
}

.bm-legal-body blockquote p:last-child {
  margin-bottom: 0;
}

.bm-legal-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bm-r-xl);
}

.bm-legal-body table {
  width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
  font-size: 14px;
}

.bm-legal-body th,
.bm-legal-body td {
  padding: 10px 12px;
  border: 1px solid var(--bm-gray-200);
  text-align: left;
}

.bm-legal-body th {
  background: var(--bm-gray-50);
  color: var(--bm-ink);
}

/* WordPress's own privacy-policy draft markers, if the page still has them. */
.bm-legal-body .privacy-policy-tutorial {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 6px;
  border-radius: var(--bm-r-lg);
  background: var(--bm-gray-100);
  font-size: 11px;
  color: var(--bm-gray-500);
}

/* ---- help card ---- */
.bm-legal-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 20px 24px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-2xl);
  background: var(--bm-gray-50);
}

.bm-legal-help strong {
  display: block;
  font-size: 16px;
  color: var(--bm-ink);
}

.bm-legal-help p {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--bm-gray-600);
}

.bm-legal-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bm-legal-help-actions .bm-cta,
.bm-legal-help-actions .bm-btn-ghost {
  width: auto;
  min-height: 44px;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.bm-legal-help-actions .bm-icon {
  width: 16px;
  height: 16px;
}

.bm-legal-help-actions .bm-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

@media (max-width: 639px) {
  .bm-legal-toc ol {
    columns: 1;
  }

  .bm-legal-head {
    padding: 20px;
  }

  .bm-legal-head h1 {
    font-size: 21px;
    line-height: 29px;
  }

  .bm-legal-body {
    padding: 20px;
  }

  .bm-legal-help {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Honeypot: off-screen rather than display:none, so bots that skip hidden
   fields still fill it. Never focusable by keyboard. */
.bm-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Terms acceptance. Required once a terms page is linked in WooCommerce, so it
   is given real affordance rather than being buried in the fine print. */
.bm-commerce .woocommerce-terms-and-conditions-wrapper {
  margin: 0 0 14px;
}

.bm-commerce .validate-required.woocommerce-terms-and-conditions-checkbox-text-wrapper,
.bm-commerce .form-row.validate-required>label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: var(--bm-gray-50);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--bm-gray-600);
  cursor: pointer;
}

.bm-commerce .woocommerce-terms-and-conditions-checkbox-text-wrapper input[type=checkbox],
.bm-commerce input#terms {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: 0 0 18px;
  accent-color: var(--bm-teal);
}

.bm-commerce .woocommerce-terms-and-conditions-checkbox-text a {
  color: var(--bm-teal);
  font-weight: 600;
}

.bm-commerce .form-row.validate-required.woocommerce-invalid label.woocommerce-form__label-for-checkbox {
  border-color: var(--bm-red);
  background: #fdf3f0;
}

/* ---------------------------------------- product page: phones only
   Everything here lives inside a max-width query, so the desktop two-column
   layout is untouched. `display: contents` lets the info column's children be
   ordered against the gallery without moving anything in the markup. */
.bm-pdp-lead,
.bm-pdp-bar,
.bm-gallery-count {
  display: none;
}

@media (max-width: 767px) {
  .bm-pdp .bm-pdp-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .bm-pdp .bm-pdp-info {
    display: contents;
  }

  /* name and summary first, then the order button, then the gallery. */
  .bm-pdp .bm-pdp-head {
    order: 1;
  }

  .bm-pdp .bm-pdp-lead {
    order: 2;
    display: block;
  }

  .bm-pdp .bm-pdp-gallery {
    order: 3;
  }

  .bm-pdp .bm-pdp-price-card {
    order: 4;
  }

  .bm-pdp form.cart {
    order: 5;
  }

  .bm-pdp .bm-pdp-whatsapp {
    order: 6;
  }

  .bm-pdp .bm-pdp-trust {
    order: 7;
  }

  /* Card with an accent stripe down the left edge, mirroring the reference:
     white surface, 16px radius, extra left padding to clear the stripe. */
  .bm-pdp-why {
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 14px 16px 14px 20px;
    border: 1px solid var(--bm-gray-200);
    border-radius: var(--bm-r-2xl);
    background: #fff;
    box-shadow:
      0 10px 20px rgba(0, 0, 0, .19),
      0 6px 6px rgba(0, 0, 0, .23);
  }

  .bm-pdp-why-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--bm-yellow), var(--bm-yellow-dark));
  }




  .bm-pdp-why-text {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--bm-gray-600);
  }

  /* Admin-authored markup: paragraphs, lists and emphasis all render, but the
     spacing stays inside the card and never leaves a trailing gap. */
  .bm-pdp-why-text > *:first-child {
    margin-top: 0;
  }

  .bm-pdp-why-text > *:last-child {
    margin-bottom: 0;
  }

  .bm-pdp-why-text p {
    margin: 0 0 8px;
  }

  .bm-pdp-why-text ul,
  .bm-pdp-why-text ol {
    margin: 0 0 8px;
    padding-left: 20px;
  }

  .bm-pdp-why-text li {
    margin-bottom: 4px;
  }

  .bm-pdp-why-text strong,
  .bm-pdp-why-text b {
    color: var(--bm-ink);
  }

  .bm-pdp-why-text img {
    max-width: 100%;
    height: auto;
  }

  .bm-pdp-lead-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    border-radius: var(--bm-r-xl);
    background: var(--bm-btn);
    color: var(--bm-btn-ink);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
  }

  .bm-pdp-lead-cta .bm-icon {
    width: 18px;
    height: 18px;
  }

  .bm-pdp-lead-cta .bm-icon svg {
    fill: currentColor;
    stroke: none;
  }

  .bm-pdp-lead-note {
    margin: 8px 0 0;
    font-size: 12px;
    text-align: center;
    color: var(--bm-gray-500);
  }

  /* ---- gallery as a slider ---- */
  .bm-pdp .woocommerce-product-gallery {
    position: relative;
    touch-action: pan-y;
    /* let the handler own horizontal drags */
  }

  .bm-pdp .bm-gallery-count {
    display: block;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    padding: 3px 10px;
    border-radius: 9999px;
    background: rgba(43, 27, 14, .72);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
  }

  .bm-pdp .woocommerce-product-gallery__wrapper {
    transition: transform .28s ease;
  }

  .bm-pdp .woocommerce-product-gallery.is-dragging .woocommerce-product-gallery__wrapper {
    transition: none;
  }

  /* ---- sticky order bar ---- */
  .bm-pdp-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--bm-gray-200);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -8px 24px -18px rgba(43, 27, 14, .5);
  }

  .bm-pdp-bar-price {
    flex: 0 0 auto;
    line-height: 1.2;
  }

  .bm-pdp-bar-price span {
    display: block;
    font-size: 11px;
    color: var(--bm-gray-500);
  }

  .bm-pdp-bar-price strong {
    font-size: 18px;
    color: var(--bm-ink);
  }

  .bm-pdp-bar .bm-cta {
    flex: 1 1 auto;
    min-height: 46px;
    text-decoration: none;
  }

  body.single-product {
    padding-bottom: 84px;
  }
}

/* Phone-only: variation options become full-width rows, matching the reference
   where each option reads as its own line rather than a cramped chip. */
@media (max-width: 767px) {
  .bm-pdp .bm-variant-tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .bm-pdp .bm-variant-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    text-align: left;
  }

  .bm-pdp .bm-variant-tile>* {
    margin: 0;
  }

  .bm-pdp .bm-variant-tile strong,
  .bm-pdp .bm-variant-tile .bm-variant-name {
    font-size: 15px;
  }

  .bm-pdp .bm-variant-tile small,
  .bm-pdp .bm-variant-tile .bm-variant-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--bm-teal);
  }

  /* The quantity row gets a little more air now that it is one control. */
  .bm-pdp .bm-qty-grid {
    /* Stock count is dropped on phones, leaving quantity and total. */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .bm-pdp .bm-qty-col:first-child {
    display: none;
  }
}

@media (max-width: 767px) {

  /* Dragging the photo should slide the gallery, not start an image drag. */
  .bm-pdp .woocommerce-product-gallery__wrapper img {
    -webkit-user-drag: none;
    user-select: none;
  }
}

/* Phone quantity row: label left over a segmented stepper, total right.
   Dividers sit on the value itself so the three hit areas read as one control. */
@media (max-width: 767px) {
  .bm-pdp .bm-qty-card {
    padding: 14px 16px;
    border-color: var(--bm-gray-200);
    box-shadow: none;
  }

  .bm-pdp .bm-qty-grid {
    align-items: center;
  }

  .bm-pdp .bm-qty-col.is-center {
    align-items: flex-start;
  }

  .bm-pdp .bm-qty-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--bm-gray-500);
  }

  .bm-pdp .bm-stepper {
    margin-top: 6px;
    border-radius: var(--bm-r-xl);
    box-shadow: none;
  }

  .bm-pdp .bm-step {
    width: 44px;
    height: 42px;
    font-size: 20px;
    font-weight: 400;
    color: var(--bm-gray-600);
  }

  .bm-pdp .bm-qty-card .quantity input.qty {
    width: 52px;
    height: 42px;
    border-left: 1px solid var(--bm-gray-200);
    border-right: 1px solid var(--bm-gray-200);
    font-size: 16px;
    font-weight: 700;
  }

  .bm-pdp .bm-qty-total {
    margin-top: 4px;
    font-size: 27px;
    /* Bengali ascenders need headroom, so the line box grows with the type. */
    line-height: 34px;
  }
}

/* ---------------------------------------- mobile navigation drawer */
.bm-menu-btn {
  display: none;
}

.bm-menu[hidden] {
  display: none;
}

.bm-menu {
  position: fixed;
  inset: 0;
  z-index: 9990;
}

.bm-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 27, 14, .45);
}

.bm-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 340px);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -18px 0 40px -28px rgba(43, 27, 14, .6);
  transform: translateX(100%);
  transition: transform .24s ease;
}

.bm-menu.is-open .bm-menu-panel {
  transform: translateX(0);
}

.bm-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--bm-gray-100);
}

.bm-menu-head strong {
  font-size: 17px;
  color: var(--bm-ink);
}

.bm-menu-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: var(--bm-gray-500);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.bm-menu-close:hover {
  background: var(--bm-gray-100);
  color: var(--bm-ink);
}

.bm-menu-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 14px 20px;
}

.bm-menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--bm-r-xl);
  font-size: 15px;
  font-weight: 600;
  color: var(--bm-ink);
  text-decoration: none;
}

.bm-menu-link:hover {
  background: var(--bm-gray-50);
}

.bm-menu-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--bm-r-lg);
  background: var(--bm-gray-50);
  color: var(--bm-teal);
}

.bm-menu-icon .bm-icon {
  width: 18px;
  height: 18px;
}

.bm-menu-icon .bm-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bm-menu-title {
  margin: 18px 0 6px;
  padding-left: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bm-gray-500);
}

.bm-menu-cats {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-menu-cat {
  position: relative;
  border-bottom: 1px solid var(--bm-gray-100);
}

.bm-menu-cat:last-child {
  border-bottom: 0;
}

.bm-menu-cat>a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: var(--bm-ink);
  text-decoration: none;
}

.bm-menu-cat>a:hover {
  background: var(--bm-gray-50);
}

.bm-menu-thumb {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  overflow: hidden;
  border-radius: var(--bm-r-lg);
  background: var(--bm-img);
  color: var(--bm-gray-400);
}

.bm-menu-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bm-menu-thumb .bm-icon {
  width: 20px;
  height: 20px;
}

.bm-menu-thumb .bm-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.bm-menu-cat-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
}

.bm-menu-count {
  font-size: 12px;
  color: var(--bm-gray-500);
}

.bm-menu-cat.has-children>a {
  padding-right: 44px;
}

.bm-menu-toggle {
  position: absolute;
  top: 8px;
  right: 6px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: var(--bm-gray-500);
  font-size: 14px;
  cursor: pointer;
  transition: transform .2s;
}

.bm-menu-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
}

.bm-menu-sub {
  margin: 0 0 8px;
  padding: 0 0 0 68px;
  list-style: none;
}

.bm-menu-sub[hidden] {
  display: none;
}

.bm-menu-sub a {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  color: var(--bm-gray-600);
  text-decoration: none;
}

.bm-menu-extra a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--bm-r-lg);
  font-size: 15px;
  color: var(--bm-ink);
  text-decoration: none;
}

.bm-menu-foot {
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bm-gray-100);
}

.bm-menu-foot a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bm-teal);
  text-decoration: none;
}

.bm-menu-foot .bm-icon {
  width: 16px;
  height: 16px;
}

.bm-menu-foot .bm-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

body.bm-menu-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .bm-menu-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: none;
    color: var(--bm-ink);
    cursor: pointer;
  }

  .bm-menu-btn .bm-icon {
    width: 22px;
    height: 22px;
  }

  .bm-menu-btn .bm-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
}

/* The theme swaps header rows at 768px, so these must use the same breakpoint -
   hiding the desktop actions any wider leaves 768-1023px with no header icons. */
@media (max-width: 767px) {

  /* Emptied by its own rules but still a flex item, so it consumed a gap and
     pushed the icon row short of the container edge. */
  .bm-head-actions {
    display: none;
  }

  /* Beats .bm-head-mobile's blanket button rule. */
  .bm-head-mobile .bm-menu-btn {
    display: grid;
    place-items: center;
  }
}

@media (min-width: 768px) {
  .bm-head-mobile .bm-menu-btn {
    display: none;
  }
}

/* ---------------------------------------- gallery slider polish (phones)
   Dots for position, a tidier thumbnail strip that scrolls rather than wraps,
   and a rounded frame so the images read as one slider rather than a stack. */
.bm-gallery-dots {
  display: none;
}

@media (max-width: 767px) {
  .bm-pdp .woocommerce-product-gallery {
    border-radius: var(--bm-r-2xl);
  }

  .bm-pdp .flex-viewport {
    border-radius: var(--bm-r-2xl);
    overflow: hidden;
    background: var(--bm-img);
  }

  .bm-pdp .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* dots */
  .bm-pdp .bm-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
  }

  .bm-pdp .bm-gallery-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: var(--bm-gray-300);
    cursor: pointer;
    transition: width .2s, background-color .2s;
  }

  .bm-pdp .bm-gallery-dot.is-active {
    width: 20px;
    background: var(--bm-yellow);
  }

  /* thumbnails: one scrolling row instead of a wrapping grid */
  .bm-pdp .flex-control-thumbs {
    display: flex;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0 0 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .bm-pdp .flex-control-thumbs::-webkit-scrollbar {
    display: none;
  }

  .bm-pdp .flex-control-thumbs li {
    flex: 0 0 62px;
    width: 62px;
    margin: 0;
    scroll-snap-align: start;
  }

  .bm-pdp .flex-control-thumbs img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: var(--bm-r-lg);
    border: 2px solid transparent;
    opacity: .65;
    transition: opacity .15s, border-color .15s;
  }

  .bm-pdp .flex-control-thumbs img.flex-active,
  .bm-pdp .flex-control-thumbs img:hover {
    opacity: 1;
    border-color: var(--bm-yellow);
  }
}

/* Gallery order is set here rather than in the DOM: flexslider builds
   .flex-viewport after the theme script runs, so insertion order cannot be
   relied on. Flex ordering is deterministic whenever the slider finishes. */
@media (max-width: 767px) {
  .bm-pdp .woocommerce-product-gallery {
    display: flex;
    flex-direction: column;
  }

  .bm-pdp .woocommerce-product-gallery .flex-viewport {
    order: 1;
  }

  .bm-pdp .woocommerce-product-gallery .bm-gallery-dots {
    order: 2;
  }

  /* Matches the specificity of the existing grid rule so the strip can scroll. */
  .bm-pdp.product .bm-pdp-gallery .images .flex-control-thumbs {
    order: 3;
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0 0 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .bm-pdp.product .bm-pdp-gallery .images .flex-control-thumbs li {
    flex: 0 0 62px;
    width: 62px;
    scroll-snap-align: start;
  }

  /* Overlays stay pinned to the image, outside the flex flow. */
  .bm-pdp .woocommerce-product-gallery__trigger,
  .bm-pdp .bm-gallery-count {
    position: absolute;
  }
}

/* ---------------------------------------- phone catalogue controls
   The sidebar and the sort <select> are desktop furniture; on phones the same
   two jobs are done by a scrolling category strip and a row of sort pills. */
.bm-cat-chips,
.bm-sort-pills {
  display: none;
}

@media (max-width: 767px) {
  .bm-cat-chips {
    display: flex;
    gap: 8px;
    /* Breathing room above and below the strip, still an even 18px each side.
       The padding is large because overflow-x makes this a scroll container,
       which would otherwise clip the chips' shadow; the negative margins take
       that padding back out of the layout so spacing is unchanged. */
    margin: -12px 0 -50px;
    padding: 22px 2px 64px;
    /* The chips' shadow reaches further down than the 18px gap to the grid, so
       the strip is raised a level and casts onto the cards instead of being
       painted over by them. Its padding then overlaps the first row of cards,
       so the strip itself ignores pointer events and the chips take them back -
       otherwise the overhang would swallow taps meant for a product. */
    position: relative;
    z-index: 1;
    pointer-events: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .bm-cat-chips::-webkit-scrollbar {
    display: none;
  }

  .bm-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    pointer-events: auto;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--bm-gray-200);
    border-radius: 9999px;
    background: #fff;
    box-shadow:
      0 19px 38px rgba(0, 0, 0, .3),
      0 15px 12px rgba(0, 0, 0, .22);
    font-size: 13px;
    font-weight: 600;
    color: var(--bm-gray-600);
    text-decoration: none;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .bm-cat-chip img {
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    object-fit: cover;
  }

  .bm-cat-chip.is-active {
    border-color: var(--bm-teal);
    background: var(--bm-teal);
    color: #fff;
  }

  .bm-sort-pills {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bm-sort-pills::-webkit-scrollbar {
    display: none;
  }

  .bm-sort-pill {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--bm-gray-200);
    border-radius: 9999px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    color: var(--bm-gray-500);
    text-decoration: none;
    white-space: nowrap;
  }

  .bm-sort-pill.is-active {
    border-color: var(--bm-teal);
    background: var(--bm-teal);
    color: #fff;
  }

  /* The desktop sort control is redundant once the pills are present. */
  .bm-sort {
    display: none;
  }

  .bm-toolbar-row {
    align-items: center;
  }
}

/* ---------------------------------------- mobile tab bar
   A floating pill with a raised cart button, phones only. Pages that own the
   bottom of the screen (product, cart, checkout) do not render it at all. */
.bm-tabbar {
  display: none;
}

@media (max-width: 767px) {
  .bm-tabbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    padding: 0 12px calc(8px + env(safe-area-inset-bottom));
    pointer-events: none;
  }

  .bm-tabbar-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    height: 62px;
    border-radius: 9999px;
    background: #fff;
    /* Deep lift off the page, plus an inset top line that reads as a lip on
       the pill's upper edge. */
    box-shadow:
      0 50px 100px -20px rgba(50, 50, 93, .25),
      0 30px 60px -30px rgba(0, 0, 0, .3),
      inset 0 -2px 6px rgba(10, 37, 64, .35);
    pointer-events: auto;
  }

  .bm-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    color: var(--bm-gray-500);
    text-decoration: none;
    cursor: pointer;
  }

  .bm-tab .bm-icon {
    width: 21px;
    height: 21px;
  }

  .bm-tab .bm-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bm-tab.is-active {
    color: var(--bm-teal);
  }




  /* All four tabs sit inside the pill; the count hangs off the cart glyph. */
  .bm-tab-icon {
    position: relative;
    display: grid;
    place-items: center;
  }

  .bm-tab-badge {
    position: absolute;
    top: -5px;
    right: -9px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    background: var(--bm-yellow);
    color: var(--bm-ink);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  .bm-tab-badge[hidden] {
    display: none;
  }

  /* Room so the bar never covers the end of the page or the help button.
     Driven by a body class rather than :has(), for older mobile browsers. */
  body.bm-has-tabbar {
    padding-bottom: 86px;
  }

  body.bm-has-tabbar .bm-help {
    bottom: 88px;
  }

  /* Brand focus ring instead of the browser's default blue. */
  .bm-tab:focus-visible {
    outline: 2px solid var(--bm-teal);
    outline-offset: 2px;
    border-radius: var(--bm-r-lg);
  }

  .bm-tab:focus:not(:focus-visible) {
    outline: none;
  }
}

/* ---------------------------------------- variation option rows (phones)
   Numbered step header, then one card per option: radio, thumbnail, name and
   price. Desktop keeps its compact tiles. */
.bm-variant-step,
.bm-variant-mark,
.bm-variant-thumb {
  display: none;
}

@media (max-width: 767px) {
  .bm-pdp .bm-variant-card {
    padding: 0;
    overflow: hidden;
  }

  .bm-pdp .bm-variant-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    background: var(--bm-gray-50);
    border-bottom: 1px solid var(--bm-gray-100);
    font-size: 14px;
    font-weight: 700;
    color: var(--bm-ink);
  }

  .bm-pdp .bm-variant-step {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 9999px;
    background: var(--bm-teal);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
  }

  .bm-pdp .bm-variant-tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px 14px 14px;
  }

  .bm-pdp .bm-variant-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 10px 14px;
    border: 1px solid var(--bm-gray-200);
    border-radius: var(--bm-r-xl);
    background: #fff;
    text-align: left;
  }

  .bm-pdp .bm-variant-mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 2px solid var(--bm-gray-300);
    border-radius: 9999px;
    background: #fff;
  }

  .bm-pdp .bm-variant-mark::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: transparent;
  }

  .bm-pdp .bm-variant-thumb {
    display: block;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    overflow: hidden;
    border-radius: var(--bm-r-lg);
    background: var(--bm-img);
  }

  .bm-pdp .bm-variant-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .bm-pdp .bm-variant-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--bm-ink);
  }

  .bm-pdp .bm-variant-price {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--bm-teal);
  }

  /* selected */
  .bm-pdp .bm-variant-tile.is-selected {
    border-color: var(--bm-teal);
    border-width: 2px;
    padding: 9px 13px;
    background: #fff;
  }

  .bm-pdp .bm-variant-tile.is-selected .bm-variant-mark {
    border-color: var(--bm-teal);
  }

  .bm-pdp .bm-variant-tile.is-selected .bm-variant-mark::after {
    background: var(--bm-teal);
  }
}

/* ---------------------------------------- product card emphasis
   Applies wherever the card component is used - home, category archives,
   search and related products - so the catalogue stays consistent. */
.bm-product-card .bm-product-title {
  /* Asked for black specifically, rather than the warm --bm-ink used elsewhere. */
  color: #000;
  font-weight: 700;
}

.bm-product-card:hover .bm-product-title {
  color: #000;
}

.bm-product-card .bm-buy-btn {
  min-height: 40px;
  font-size: 15px;
  font-weight: 700;
}

.bm-product-card .bm-buy-btn .bm-icon {
  width: 17px;
  height: 17px;
}

@media (min-width: 640px) {
  .bm-product-card .bm-buy-btn {
    min-height: 46px;
    font-size: 17px;
  }

  .bm-product-card .bm-buy-btn .bm-icon {
    width: 19px;
    height: 19px;
  }
}

/* Bengali ascenders (matra, reph) paint above the line box. The base button
   uses line-height:1 and the label span clips overflow, which shaved the tops
   off. Give the line box real headroom instead of removing the ellipsis. */
.bm-product-card .bm-buy-btn {
  line-height: 1.6;
}

.bm-product-card .bm-buy-btn span:not(.bm-icon) {
  line-height: 1.6;
  padding-block: 1px;
}
/* ---- product header centring (mobile only) ----
   The category chip and the product name sit centred on phones. Desktop keeps
   its left-aligned header, so this stays inside the 767px breakpoint the rest
   of the theme uses to swap layouts. */
@media (max-width: 767px) {
  .bm-pdp-meta {
    justify-content: center;
  }

  .bm-pdp-title {
    text-align: center;
  }
}


/* ---- end-of-page order button (phones/tablets only) ----
   Mirrors the summary card's button, which is hidden below 1024px in favour of
   the sticky bar. Sits after the trust badges so the page ends on the action. */
.bm-order-end {
  display: none;
}

@media (max-width: 1023px) {
  .bm-order-end {
    display: flex;
    width: 100%;
    /* The summary card already carries 16px beneath it, and the badge grid
       16px above, so the button needs no margin of its own to sit evenly. */
    margin: 0;
  }
}

/* ---- benefit row with fewer than five cards ----
   The row is 3 columns from 768px and 5 from 1024px. A shop that clears a
   card's title in the Customizer shows fewer, so the track count follows the
   number actually rendered instead of leaving an empty column. */
@media (min-width: 768px) {
  .bm-benefits-1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .bm-benefits-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .bm-benefits-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bm-benefits-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- order buttons, site-wide ----
   Every primary action a customer can take: catalogue and related cards
   (.bm-buy-btn), the product page's buy button, lead button and phone order
   bar, the variation popup's order button, and the shared .bm-cta used for
   "proceed to checkout" and "place order". One declaration so they never drift
   apart. */
.bm-buy-btn,
.bm-pdp-buy,
.bm-pdp-lead-cta,
.bm-vp-order,
.bm-cta,
/* The cart's proceed button and checkout's place-order button are styled
   through these higher-specificity selectors elsewhere, so they are named
   here too - a bare .bm-cta loses to them. */
.bm-commerce .checkout-button.button,
.bm-commerce #place_order {
  box-shadow:
    0 2px 1px rgba(0, 0, 0, .09),
    0 4px 2px rgba(0, 0, 0, .09),
    0 8px 4px rgba(0, 0, 0, .09),
    0 16px 8px rgba(0, 0, 0, .09),
    0 32px 16px rgba(0, 0, 0, .09);
}

/* ---- checkout cards ----
   Every section card on checkout: customer details, delivery area, payment,
   the order-note accordion and the order summary. Scoped to .bm-checkout so
   the same .bm-card component on the cart and thank-you pages is untouched. */
.bm-checkout .bm-card {
  box-shadow: var(--bm-shadow-panel);
}

/* ---- order confirmation cards ----
   The thank-you page is the same flow one step on, so its cards carry the
   checkout shadow: the confirmation head, the gateway note, and core's order
   details / customer address / bank details blocks. */
.bm-thankyou .bm-card,
.bm-thankyou .woocommerce-order>p,
.bm-thankyou .woocommerce-thankyou-order-failed-actions,
.bm-thankyou .woocommerce-order-details,
.bm-thankyou .woocommerce-customer-details,
.bm-thankyou .woocommerce-bacs-bank-details {
  box-shadow: var(--bm-shadow-panel);
}

/* The invoice print sheet flattens every card, but the panel shadow above is
   scoped to .bm-checkout / .bm-thankyou and would otherwise outrank the print
   block's bare .bm-card reset. */
@media print {

  .bm-checkout .bm-card,
  .bm-thankyou .bm-card,
  .bm-thankyou .woocommerce-order>p,
  .bm-thankyou .woocommerce-thankyou-order-failed-actions,
  .bm-thankyou .woocommerce-order-details,
  .bm-thankyou .woocommerce-customer-details,
  .bm-thankyou .woocommerce-bacs-bank-details {
    box-shadow: none;
  }
}

/* ---- live search suggestions ----
   Panel under the header search box. Sits above the page (and above the sticky
   header's own stacking) so it is never clipped by the content below. */
.bm-search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 16px;
  right: 16px;
  z-index: 70;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--bm-gray-200);
  border-radius: var(--bm-r-xl);
  background: #fff;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, .19),
    0 6px 6px rgba(0, 0, 0, .23);
  overscroll-behavior: contain;
}

.bm-search-suggest[hidden] {
  display: none;
}

.bm-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--bm-r-lg);
  color: var(--bm-ink);
  text-decoration: none;
}

/* Hover and keyboard selection look the same, so arrow keys read like a mouse. */
.bm-suggest-item:hover,
.bm-suggest-item.is-active {
  background: var(--bm-gray-100);
}

.bm-suggest-item img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: cover;
  border-radius: var(--bm-r-lg);
  background: var(--bm-img);
}

.bm-suggest-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bm-suggest-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bm-suggest-price {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bm-teal);
}

.bm-suggest-empty {
  margin: 0;
  padding: 14px 10px;
  font-size: 14px;
  color: var(--bm-gray-500);
  text-align: center;
}

.bm-suggest-all {
  display: block;
  margin-top: 4px;
  padding: 10px;
  border-top: 1px solid var(--bm-gray-100);
  color: var(--bm-teal);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.bm-suggest-all:hover {
  background: var(--bm-gray-100);
}