/* ==========================================================================
   Bestmates Shop — WOOCOMMERCE STOREFRONT styles
   Scoped sheet for the shop archive, single product, cart, and checkout pages.
   Enqueued ONLY on those pages (see functions.php, mirrors front-page.css being
   landing-only), so nothing here can leak onto the landing or other site pages.

   Design language is ported 1:1 from the approved landing (front-page.css):
   the same aqua/teal palette + tokens (--bm-* from style.css :root), the TripCard
   product card (rounded media, hover scale-105, uppercase eyebrow, Garet title,
   teal price), container-large (80rem) + padding-global (5%), 7rem section pads,
   .75em rounded blocks, the Garet-uppercase .bm-h2 section heading, the tagline
   eyebrow, and the wave-accent divider.

   The global .btn port, header (breadcrumb bar), and dark footer already live in
   style.css — NOT rebuilt here. This sheet only handles the page bodies.

   Everything is namespaced under .bm-shop (a wrapper class our template parts
   emit) so specificity is contained and Astra/Woo defaults below it are overridden
   intentionally, not globally.

   NOTE FOR OMAR (real content slots):
     - Product photography      -> set the product images in WP admin (Woo gallery)
     - Product short/long copy   -> set per product in WP admin (no placeholder copy
                                    is invented here; Woo renders whatever exists)
     - Shop archive intro copy   -> see [OMAR] marker in archive-product.php header
   ========================================================================== */

/* ==========================================================================
   0. PAGE SHELL — give Woo pages the same inset, rounded, light canvas rhythm
   the landing uses. Astra wraps page content in #content .ast-container; we let
   our own .bm-shop manage width via container-large, and add top breathing room
   under the breadcrumb bar.
   ========================================================================== */
.bm-shop {
  --bm-shop-gutter: 5%;            /* padding-global */
  font-family: var(--bm-font-sans);
  color: var(--bm-dark-1);
}

/* Neutralize Astra's content container padding on shop pages so our sections
   control their own gutters (same move front-page.css makes for the landing). */
.woocommerce.bm-shop-page #content .ast-container,
.bm-shop-page #content > .ast-container,
.bm-shop-page #primary,
.bm-shop-page .ast-woocommerce-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/* Astra often forces a sidebar grid on Woo; we run full width, content-only. */
.bm-shop-page #secondary { display: none; }
.bm-shop-page #primary { width: 100%; }

.bm-shop .bm-shop-wrap {
  max-width: 80rem;               /* container-large */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bm-shop-gutter);
  padding-right: var(--bm-shop-gutter);
  width: 100%;
  box-sizing: border-box;
}

/* Cart + checkout are rendered by shortcode inside an ordinary Page, so they have
   no .bm-shop-wrap. Constrain + pad Woo's own wrapper to the same container-large
   rhythm, and give it top/bottom breathing room under the breadcrumb bar. Scoped
   to the body classes set in functions.php so it never affects archive/single
   (which manage their own .bm-shop-wrap). */
body.bm-cart .woocommerce,
body.bm-checkout .woocommerce {
  max-width: 80rem;               /* container-large */
  margin-left: auto;
  margin-right: auto;
  padding: 3.5rem var(--bm-shop-gutter) 5rem;
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   1. SECTION HEADER — the on-brand page header that replaces Woo's default
   "Shop" title + the "Great things are on the horizon" empty state. Mirrors the
   landing's tagline + .bm-h2 + wave-accent stack.
   ========================================================================== */
.bm-shop .bm-shop-header {
  padding-top: 4rem;
  padding-bottom: 2.5rem;
  text-align: center;
}
.bm-shop .bm-shop-tagline {
  opacity: 0.7;
  color: var(--bm-dark-1);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-family: var(--bm-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2rem;
  margin: 0 0 1rem;
}
.bm-shop .bm-h2 {
  font-family: var(--bm-font-sans);
  font-size: 3rem;
  font-weight: 700;
  line-height: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--bm-dark-1);
  margin: 0;
}
.bm-shop .bm-shop-wave {
  background-image: url("images/wave-2.svg");   /* teal — for light bg */
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 4.38em;
  height: 0.38em;
  margin: 1.25rem auto 0;
}
.bm-shop .bm-shop-lead {
  font-size: 1rem;
  line-height: 1.7rem;
  color: rgba(11, 30, 28, 0.9);
  max-width: 38rem;
  margin: 1.25rem auto 0;
}

/* WooCommerce result count + ordering dropdown — quiet, on-brand row above grid */
.bm-shop .woocommerce-result-count {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(11, 30, 28, 0.55);
  margin: 0 0 1.5rem;
}
.bm-shop .woocommerce-ordering {
  margin: 0 0 2rem;
}
.bm-shop .woocommerce-ordering select {
  font-family: var(--bm-font-sans);
  font-size: 0.8rem;
  border: 1px solid #daf1ef;            /* aqua-200 hairline */
  border-radius: 0.5em;
  padding: 0.55em 2.2em 0.55em 0.9em;
  background-color: #fff;
  color: var(--bm-dark-1);
  cursor: pointer;
}

/* ==========================================================================
   2. PRODUCT GRID (archive) — TripCard pattern, ported from the landing.
   We override Woo's ul.products flex layout into the same CSS grid the landing
   uses, then style each li.product as a TripCard.
   ========================================================================== */
.bm-shop ul.products,
.bm-shop ul.products.columns-1,
.bm-shop ul.products.columns-2,
.bm-shop ul.products.columns-3,
.bm-shop ul.products.columns-4,
.bm-shop ul.products.columns-5,
.bm-shop ul.products.columns-6 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 1.75rem;
  margin: 0 0 4rem;
  padding: 0;
  list-style: none;
}
.bm-shop ul.products::before,
.bm-shop ul.products::after { content: none !important; display: none !important; }

/* each product card */
.bm-shop ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  text-align: left;
  list-style: none;
}
.bm-shop ul.products li.product .woocommerce-LoopProduct-link,
.bm-shop ul.products li.product a.woocommerce-loop-product__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* TripCard media: rounded, hover scale-105 */
.bm-shop ul.products li.product .bm-card-media {
  overflow: hidden;
  border-radius: 0.75em;
  background-color: #edf8f7;            /* aqua-100 placeholder bg */
  aspect-ratio: 3 / 2;
  margin-bottom: 0;
}
.bm-shop ul.products li.product .bm-card-media img,
.bm-shop ul.products li.product img.attachment-woocommerce_thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bm-shop ul.products li.product:hover .bm-card-media img { transform: scale(1.05); }

/* eyebrow = product category, uppercase tracked (TripCard kicker) */
.bm-shop ul.products li.product .bm-card-eyebrow {
  margin-top: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 30, 28, 0.65);
}
/* title = Garet bold uppercase */
.bm-shop ul.products li.product .woocommerce-loop-product__title {
  margin: 0.25rem 0 0;
  padding: 0;
  font-family: var(--bm-font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--bm-dark-1);
}
/* price = teal accent */
.bm-shop ul.products li.product .price {
  display: block;
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bm-accent-1) !important;
}
.bm-shop ul.products li.product .price del { color: rgba(11, 30, 28, 0.4) !important; font-weight: 400; }
.bm-shop ul.products li.product .price ins { text-decoration: none; }

/* add-to-cart on a card = compact teal-outline button, not the heavy dark .btn,
   so the grid reads like the landing's clean TripCards (the heavy .btn is for the
   single-product page). Inherits the outline treatment from style.css buttons. */
.bm-shop ul.products li.product a.add_to_cart_button,
.bm-shop ul.products li.product a.added_to_cart,
.bm-shop ul.products li.product a.button.product_type_variable,
.bm-shop ul.products li.product a.button.product_type_simple {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em;
  padding: 0.6em 1.1em !important;
  background-color: transparent !important;
  color: var(--bm-dark-1) !important;
  box-shadow: inset 0 0 0 2px var(--bm-accent-2) !important;
  border-radius: 0.5em !important;
}
.bm-shop ul.products li.product a.add_to_cart_button:hover,
.bm-shop ul.products li.product a.button.product_type_simple:hover {
  background-color: var(--bm-accent-2) !important;
  color: var(--bm-light-1) !important;
  padding-left: 1.4em !important;
  padding-right: 1.4em !important;
}

/* sale flash — small teal pill on the media corner */
.bm-shop ul.products li.product .onsale {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  min-height: auto;
  min-width: auto;
  margin: 0;
  padding: 0.3em 0.7em;
  border-radius: 9999px;
  background-color: var(--bm-accent-2);
  color: var(--bm-light-1);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}
.bm-shop ul.products li.product { position: relative; }

/* ==========================================================================
   3. ON-BRAND EMPTY STATE — replaces Woo's "Great things are on the horizon"
   default no-products notice with the brand voice.
   ========================================================================== */
.bm-shop .bm-shop-empty {
  text-align: center;
  padding: 3rem 0 5rem;
  max-width: 36rem;
  margin: 0 auto;
}
.bm-shop .bm-shop-empty p {
  font-size: 1rem;
  line-height: 1.7rem;
  color: rgba(11, 30, 28, 0.9);
  margin: 0 0 1.5rem;
}
/* self-contained heavy .btn for the empty-state CTA — style.css's .woocommerce
   a.button rules are scoped to a .woocommerce element, which our .bm-shop wrapper
   isn't, so we restate the signature here (matches the .btn port exactly). */
.bm-shop .bm-shop-empty .button {
  display: inline-block;
  font-family: var(--bm-font-sans) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  background-color: var(--bm-dark-1) !important;
  color: var(--bm-light-1) !important;
  border: none !important;
  border-radius: 0.63em !important;
  padding: 0.85em 1.6em !important;
  line-height: 1.2;
  text-decoration: none;
  transition: padding 0.25s ease, background-color 0.2s ease;
}
.bm-shop .bm-shop-empty .button:hover {
  background-color: var(--bm-aqua-900) !important;
  padding-left: 1.9em !important;
  padding-right: 1.9em !important;
}

/* ==========================================================================
   4. PAGINATION — quiet, on-brand
   ========================================================================== */
.bm-shop .woocommerce-pagination ul {
  border: none;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
}
.bm-shop .woocommerce-pagination ul li {
  border: none;
  margin: 0;
}
.bm-shop .woocommerce-pagination ul li a,
.bm-shop .woocommerce-pagination ul li span {
  font-family: var(--bm-font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 0.5em;
  padding: 0.5em 0.85em;
  color: var(--bm-dark-1);
  background: #edf8f7;             /* aqua-100 */
}
.bm-shop .woocommerce-pagination ul li span.current {
  background: var(--bm-dark-1);
  color: var(--bm-light-1);
}
.bm-shop .woocommerce-pagination ul li a:hover {
  background: var(--bm-accent-2);
  color: var(--bm-light-1);
}

/* ==========================================================================
   5. SINGLE PRODUCT — gallery + Domaine title + teal price + .btn add-to-cart,
   matching the landing's spacing/type. The dark .btn comes from style.css; here
   we lay out the two-column gallery/summary and brand the type + meta.
   ========================================================================== */
.bm-shop.bm-single .bm-product-wrap {
  padding-top: 3.5rem;
  padding-bottom: 5rem;
}
.bm-shop.bm-single div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* gallery: rounded media to match TripCard radius */
.bm-shop.bm-single div.product .woocommerce-product-gallery {
  width: 100% !important;
  margin: 0;
  float: none;
}
.bm-shop.bm-single div.product .woocommerce-product-gallery__wrapper {
  border-radius: 0.75em;
  overflow: hidden;
}
.bm-shop.bm-single div.product .woocommerce-product-gallery__image,
.bm-shop.bm-single div.product .woocommerce-product-gallery__image img {
  border-radius: 0.75em;
}
.bm-shop.bm-single div.product .flex-control-thumbs {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.6rem;
  padding: 0;
}
.bm-shop.bm-single div.product .flex-control-thumbs li {
  width: 4.5rem;
  margin: 0;
}
.bm-shop.bm-single div.product .flex-control-thumbs img {
  border-radius: 0.5em;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.bm-shop.bm-single div.product .flex-control-thumbs img.flex-active,
.bm-shop.bm-single div.product .flex-control-thumbs img:hover { opacity: 1; }

/* summary column */
.bm-shop.bm-single div.product .summary {
  width: 100% !important;
  margin: 0;
  float: none;
  padding: 0;
}

/* category eyebrow above the title (rendered by our template part) */
.bm-shop.bm-single .bm-product-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(11, 30, 28, 0.65);
  margin: 0 0 0.6rem;
}

/* product title = Domaine Display (the only place Domaine is used on the shop,
   matching how the landing reserves Domaine for the hero) */
.bm-shop.bm-single div.product .product_title.entry-title {
  font-family: var(--bm-font-display) !important;
  font-style: normal;
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--bm-dark-1);
  margin: 0 0 1rem;
  text-transform: none;
}

/* price = teal, larger */
.bm-shop.bm-single div.product p.price,
.bm-shop.bm-single div.product div.price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bm-accent-1) !important;
  margin: 0 0 1.5rem;
}
.bm-shop.bm-single div.product p.price del { color: rgba(11, 30, 28, 0.4) !important; font-weight: 400; font-size: 1.1rem; }
.bm-shop.bm-single div.product p.price ins { text-decoration: none; }

/* short description */
.bm-shop.bm-single div.product .woocommerce-product-details__short-description {
  font-size: 1rem;
  line-height: 1.7rem;
  color: rgba(11, 30, 28, 0.9);
  margin: 0 0 2rem;
}
.bm-shop.bm-single div.product .woocommerce-product-details__short-description p { margin: 0 0 1rem; }

/* variation selects + quantity — on-brand inputs */
.bm-shop.bm-single div.product .variations {
  margin: 0 0 1.5rem;
}
.bm-shop.bm-single div.product .variations th,
.bm-shop.bm-single div.product .variations td { padding: 0.4rem 0; border: none; }
.bm-shop.bm-single div.product .variations label {
  font-family: var(--bm-font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bm-dark-1);
}
.bm-shop.bm-single div.product .variations select {
  font-family: var(--bm-font-sans);
  border: 1px solid #daf1ef;
  border-radius: 0.5em;
  padding: 0.6em 2.2em 0.6em 0.9em;
  background-color: #fff;
  color: var(--bm-dark-1);
}
.bm-shop.bm-single div.product form.cart {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 2rem;
}
.bm-shop.bm-single div.product form.cart .quantity {
  display: inline-flex;
}
.bm-shop.bm-single div.product form.cart .quantity input.qty {
  width: 4.5rem;
  text-align: center;
  font-family: var(--bm-font-sans);
  font-weight: 700;
  border: 1px solid #daf1ef;
  border-radius: 0.5em;
  padding: 0.85em 0.5em;
  color: var(--bm-dark-1);
}
/* the add-to-cart button = the heavy dark .btn signature. style.css scopes its
   button rules to a .woocommerce element ancestor, which our .bm-shop wrapper
   isn't, so we restate the .btn here under .bm-single (identical treatment) and
   keep it from shrinking next to the qty box. */
.bm-shop.bm-single div.product form.cart .single_add_to_cart_button {
  flex: 0 0 auto;
  display: inline-block;
  font-family: var(--bm-font-sans) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  background-color: var(--bm-dark-1) !important;
  color: var(--bm-light-1) !important;
  border: none !important;
  border-radius: 0.63em !important;
  padding: 1em 1.9em !important;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: padding 0.25s ease, background-color 0.2s ease;
}
.bm-shop.bm-single div.product form.cart .single_add_to_cart_button:hover {
  background-color: var(--bm-aqua-900) !important;
  padding-left: 2.2em !important;
  padding-right: 2.2em !important;
}

/* product meta (SKU / categories / tags) — quiet line under the buy area */
.bm-shop.bm-single div.product .product_meta {
  font-size: 0.8rem;
  color: rgba(11, 30, 28, 0.55);
  border-top: 1px solid #daf1ef;
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}
.bm-shop.bm-single div.product .product_meta > span { display: block; margin-bottom: 0.3rem; }
.bm-shop.bm-single div.product .product_meta a { color: var(--bm-accent-1); }

/* ---- tabs (Description / Additional info / Reviews) ---- */
.bm-shop.bm-single .woocommerce-tabs {
  margin-top: 4rem;
  border-top: 1px solid #daf1ef;
  padding-top: 2.5rem;
}
.bm-shop.bm-single .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 1.5rem;
  border: none;
  display: flex;
  gap: 1.75rem;
}
.bm-shop.bm-single .woocommerce-tabs ul.tabs::before { border: none; }
.bm-shop.bm-single .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 0.5rem;
  margin: 0;
}
.bm-shop.bm-single .woocommerce-tabs ul.tabs li::before,
.bm-shop.bm-single .woocommerce-tabs ul.tabs li::after { display: none; }
.bm-shop.bm-single .woocommerce-tabs ul.tabs li a {
  font-family: var(--bm-font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(11, 30, 28, 0.5);
  padding: 0;
}
.bm-shop.bm-single .woocommerce-tabs ul.tabs li.active a { color: var(--bm-dark-1); }
.bm-shop.bm-single .woocommerce-tabs ul.tabs li.active {
  box-shadow: inset 0 -2px 0 0 var(--bm-accent-2);
}
.bm-shop.bm-single .woocommerce-tabs .woocommerce-Tabs-panel h2 {
  font-family: var(--bm-font-display);
  font-size: 1.5rem;
  margin: 0 0 1rem;
}
.bm-shop.bm-single .woocommerce-tabs .woocommerce-Tabs-panel {
  font-size: 1rem;
  line-height: 1.7rem;
  color: rgba(11, 30, 28, 0.9);
}

/* ---- related / upsell products: reuse the TripCard grid header style ---- */
.bm-shop.bm-single .related.products,
.bm-shop.bm-single .upsells.products {
  margin-top: 4.5rem;
  border-top: 1px solid #daf1ef;
  padding-top: 3rem;
}
.bm-shop.bm-single .related.products > h2,
.bm-shop.bm-single .upsells.products > h2 {
  font-family: var(--bm-font-sans);
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--bm-dark-1);
  margin: 0 0 2rem;
}

/* ==========================================================================
   6. CART — on-brand table, totals card, buttons (layout/branding only).
   ========================================================================== */
/* (cart page padding/width is applied to body.bm-cart .woocommerce in §0) */
.bm-shop.bm-cart table.shop_table {
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.bm-shop.bm-cart table.shop_table thead th {
  font-family: var(--bm-font-sans);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(11, 30, 28, 0.55);
  border-bottom: 1px solid #daf1ef;
  padding: 0 0 1rem;
  text-align: left;
}
.bm-shop.bm-cart table.shop_table tbody td {
  border: none;
  border-bottom: 1px solid #edf8f7;
  padding: 1.25rem 0;
  vertical-align: middle;
}
.bm-shop.bm-cart table.shop_table td.product-thumbnail img {
  width: 4.5rem;
  border-radius: 0.5em;
}
.bm-shop.bm-cart table.shop_table td.product-name a {
  font-family: var(--bm-font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  color: var(--bm-dark-1);
}
.bm-shop.bm-cart table.shop_table td.product-price,
.bm-shop.bm-cart table.shop_table td.product-subtotal {
  font-weight: 700;
  color: var(--bm-accent-1);
}
.bm-shop.bm-cart table.shop_table td.product-subtotal { color: var(--bm-dark-1); }
.bm-shop.bm-cart table.shop_table .quantity input.qty {
  width: 4rem;
  text-align: center;
  font-weight: 700;
  border: 1px solid #daf1ef;
  border-radius: 0.5em;
  padding: 0.6em 0.4em;
}
.bm-shop.bm-cart table.shop_table td.product-remove a.remove {
  color: rgba(11, 30, 28, 0.4) !important;
  font-size: 1.2rem;
}
.bm-shop.bm-cart table.shop_table td.product-remove a.remove:hover {
  color: var(--bm-accent-2) !important;
  background: transparent !important;
}

/* coupon + update row */
.bm-shop.bm-cart .cart-collaterals,
.bm-shop.bm-cart .actions { margin-top: 2rem; }
.bm-shop.bm-cart .coupon { display: flex; gap: 0.75rem; align-items: center; }
.bm-shop.bm-cart .coupon input.input-text {
  border: 1px solid #daf1ef;
  border-radius: 0.5em;
  padding: 0.85em 0.9em;
  font-family: var(--bm-font-sans);
}

/* cart totals card — rounded light block like the landing's section blocks */
.bm-shop.bm-cart .cart-collaterals {
  display: flex;
  justify-content: flex-end;
}
.bm-shop.bm-cart .cart_totals {
  width: 100%;
  max-width: 26rem;
  background: #f4fbfa;            /* aqua-50 / light-1 */
  border: 1px solid #daf1ef;
  border-radius: 0.75em;
  padding: 2rem;
}
.bm-shop.bm-cart .cart_totals h2 {
  font-family: var(--bm-font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1.25rem;
}
.bm-shop.bm-cart .cart_totals table {
  border: none;
  width: 100%;
}
.bm-shop.bm-cart .cart_totals table th,
.bm-shop.bm-cart .cart_totals table td {
  border: none;
  border-top: 1px solid #daf1ef;
  padding: 0.85rem 0;
  font-size: 0.95rem;
}
.bm-shop.bm-cart .cart_totals table tr.order-total th,
.bm-shop.bm-cart .cart_totals table tr.order-total td {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--bm-dark-1);
}
.bm-shop.bm-cart .wc-proceed-to-checkout { padding-top: 1.5rem; }
.bm-shop.bm-cart .wc-proceed-to-checkout a.checkout-button {
  display: block;
  text-align: center;
  width: 100%;
}

/* ==========================================================================
   7. CHECKOUT — LAYOUT + BRANDING ONLY. No payment/gateway styling beyond chrome;
   Stripe is not connected and is out of scope. Two-column: form left, order
   summary right, in a rounded light card.
   ========================================================================== */
/* (checkout page padding/width is applied to body.bm-checkout .woocommerce in §0) */
.bm-shop.bm-checkout form.checkout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.bm-shop.bm-checkout #customer_details { width: 100%; float: none; }
.bm-shop.bm-checkout #order_review,
.bm-shop.bm-checkout #order_review_heading {
  width: 100%;
  float: none;
}
.bm-shop.bm-checkout #order_review_heading,
.bm-shop.bm-checkout h3 {
  font-family: var(--bm-font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bm-dark-1);
  margin: 0 0 1.25rem;
}
.bm-shop.bm-checkout h3#order_review_heading { margin-top: 0; }

/* form fields — on-brand inputs */
.bm-shop.bm-checkout .form-row label {
  font-family: var(--bm-font-sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bm-dark-1);
  margin-bottom: 0.4rem;
}
.bm-shop.bm-checkout .form-row input.input-text,
.bm-shop.bm-checkout .form-row textarea,
.bm-shop.bm-checkout .select2-container .select2-selection {
  border: 1px solid #daf1ef !important;
  border-radius: 0.5em !important;
  padding: 0.85em 0.9em !important;
  font-family: var(--bm-font-sans);
  background-color: #fff;
  color: var(--bm-dark-1);
}
.bm-shop.bm-checkout .select2-container--default .select2-selection--single {
  height: auto;
}

/* order review summary card */
.bm-shop.bm-checkout #order_review {
  background: #f4fbfa;
  border: 1px solid #daf1ef;
  border-radius: 0.75em;
  padding: 2rem;
}
.bm-shop.bm-checkout #order_review table.shop_table {
  border: none;
  width: 100%;
}
.bm-shop.bm-checkout #order_review table.shop_table th,
.bm-shop.bm-checkout #order_review table.shop_table td {
  border: none;
  border-top: 1px solid #daf1ef;
  padding: 0.75rem 0;
  font-size: 0.9rem;
}
.bm-shop.bm-checkout #order_review table.shop_table .product-name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bm-dark-1);
}
.bm-shop.bm-checkout #order_review tr.order-total th,
.bm-shop.bm-checkout #order_review tr.order-total td {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--bm-dark-1);
}

/* payment area chrome — neutral container only; whatever gateway renders sits
   in this on-brand box. NO gateway-specific styling (Stripe out of scope). */
.bm-shop.bm-checkout #payment {
  background: transparent;
  border-top: 1px solid #daf1ef;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-radius: 0;
}
.bm-shop.bm-checkout #payment ul.payment_methods {
  border: none;
  padding: 0;
}
.bm-shop.bm-checkout #payment div.payment_box {
  background: #edf8f7;
  border-radius: 0.5em;
}
.bm-shop.bm-checkout #payment div.payment_box::before { display: none; }
.bm-shop.bm-checkout #place_order {
  width: 100%;
  margin-top: 1.25rem;
}

/* login / coupon toggles at the top of checkout — quiet info bars */
.bm-shop.bm-checkout .woocommerce-form-login-toggle,
.bm-shop.bm-checkout .woocommerce-form-coupon-toggle {
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   8. RESPONSIVE — match the landing's breakpoints
   ========================================================================== */
@media screen and (max-width: 991px) {
  .bm-shop .bm-h2 { font-size: 2.5rem; }
  .bm-shop ul.products,
  .bm-shop ul.products[class*="columns-"] { grid-template-columns: repeat(2, 1fr); }
  .bm-shop.bm-single div.product { grid-template-columns: 1fr; gap: 2.5rem; }
  .bm-shop.bm-checkout form.checkout { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media screen and (max-width: 767px) {
  .bm-shop .bm-h2 { font-size: 2.1rem; }
  .bm-shop .bm-shop-header { padding-top: 2.5rem; }
  .bm-shop.bm-single div.product .product_title.entry-title { font-size: 2.1rem; }
  .bm-shop.bm-cart table.shop_table thead { display: none; }
  .bm-shop.bm-cart table.shop_table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
  }
  .bm-shop.bm-cart table.shop_table tbody tr {
    display: block;
    border-bottom: 1px solid #daf1ef;
    padding: 1rem 0;
  }
}
@media screen and (max-width: 479px) {
  .bm-shop ul.products,
  .bm-shop ul.products[class*="columns-"] { grid-template-columns: 1fr; }
}