/* ============================================================
   B3X GRAPHICS — the WooCommerce pages (b3x-core assets/shop/shop.css)

   Loaded ONLY on shop requests (inc/shop.php: /shop/, /product/*, product categories + tags,
   /basket/, /checkout/, /my-account/), after fonts.css, chrome.css (the global header) and
   shop/footer.css (the global footer + pop-ups + the site button, generated from styles.css).

   Keeps the Elementor product templates and their darker look (Bex). Changes only:
     1. room for the global header (fixed) + no sideways pull on phones
     2. the cart button in the header slot + its live count bubble
     3. the glass side cart (WooCommerce's own mini cart, Elementor or core markup)
     4. every shop button = the site button (.b3xr-gbtn look: navy pill, sky edge, glow,
        draw-around line, arrow), all states readable (rest/hover/focus/active/disabled/loading)
     5. the new fonts: Palma Heavy headers, Safiro SemiBold subheads, Aileron Bold labels,
        Aileron Regular body
     6. rounded product images, cards, notices and fields (the site's radius language:
        images 14-20px, cards 22-24px, fields 12px, pills 100px)

   Specificity: the Elementor templates style their widgets with class chains up to (0,6,2)
   (".elementor-3121 .elementor-element.elementor-element-e028a48.elementor-wc-products ul.products
   li.product .button"). Rather than depend on those element ids, the rules here carry one id's
   weight with :not(#b3x), an id that never exists, so they beat any class chain without
   !important. !important is used only where the site's own CSS already uses it
   (.glass-btn buttons, the order-received page in the Customizer CSS).
   ============================================================ */

/* ---------------------------------------------------------------- 1. shell */
body.b3x-shop-page{--b3x-top:104px;--b3x-r-img:16px;--b3x-r-card:24px;--b3x-r-field:12px;}
html:has(body.b3x-shop-page),body.b3x-shop-page{overflow-x:clip;overscroll-behavior-x:none;}
body.b3x-shop-page:not(#b3x){padding-top:var(--b3x-top);}
html:has(body.b3x-shop-page){scroll-padding-top:calc(var(--b3x-top) + 8px);}
@media (max-width:767px){body.b3x-shop-page{--b3x-top:92px;}}
/* the old header's Elementor sticky spacer, if one is ever left behind */
.b3x-shop-page .elementor-sticky__spacer:empty{display:none;}

/* ---------------------------------------------------------------- 2. cart button + count */
.b3xh .b3xh-cta.b3x-cartbtn{gap:9px;}
.b3xh .b3x-cartbtn-ic{display:inline-flex;margin:0;padding:0;}
.b3xh .b3x-cartbtn-ic svg{display:block;width:18px;height:18px;}
.b3xh .b3x-cartbtn-label{display:inline;margin:0;padding:0;}
.b3xh .b3x-cart-count{position:static;display:inline;margin:0;padding:0;}
.b3xh .b3x-cart-num{position:absolute;top:-7px;right:-7px;z-index:3;display:block;min-width:22px;height:22px;margin:0;padding:0 6px;
  border-radius:11px;background:#04b5ff;color:#031b3d;box-shadow:0 0 0 2px #031b3d;
  font-family:'B3XH Aileron','Aileron',sans-serif;font-size:12px;font-weight:700;font-style:normal;line-height:22px;letter-spacing:0;
  text-align:center;text-transform:none;pointer-events:none;transform-origin:center;}
.b3xh .b3x-cart-count[data-count="0"] .b3x-cart-num{display:none;}
.b3xh .b3x-cart-num.is-bump{animation:b3x-bump .5s cubic-bezier(.16,1,.3,1);}
@keyframes b3x-bump{0%{transform:scale(1);}35%{transform:scale(1.35);}100%{transform:scale(1);}}
.b3x-sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
@media (max-width:767px){
  /* phones: the slot sits between the status line and the burger; icon only */
  .b3xh .b3xh-cta.b3x-cartbtn{padding:9px 11px;gap:0;}
  .b3xh .b3x-cartbtn-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
  /* the logo + burger keep the site's exact size; the status line gives up the room for the cart */
  .b3xh.b3x-shop .b3xh-logo,.b3xh.b3x-shop .b3xh-burgerw,.b3xh.b3x-shop .b3xh-slot--custom{flex-shrink:0;}
}
@media (prefers-reduced-motion:reduce){.b3xh .b3x-cart-num.is-bump{animation:none;}}

/* ---------------------------------------------------------------- 3. side cart */
.b3x-cart{position:fixed;inset:0;z-index:10050;margin:0;padding:0;
  font-family:'Aileron',sans-serif;font-size:16px;font-weight:400;font-style:normal;line-height:1.5;color:#eaf2ff;
  letter-spacing:normal;text-transform:none;text-align:left;-webkit-font-smoothing:antialiased;}
.b3x-cart[hidden]{display:none;}
.b3x-cart *,.b3x-cart *::before,.b3x-cart *::after{box-sizing:border-box;}
.b3x-cart .b3x-cart-overlay{position:absolute;inset:0;background:rgba(2,8,22,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease;}
.b3x-cart .b3x-cart-panel{position:absolute;top:12px;right:12px;bottom:12px;display:flex;flex-direction:column;
  width:min(440px,calc(100vw - 24px));margin:0;padding:0;border-radius:24px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(155deg,rgba(9,26,54,.92) 0%,rgba(3,13,30,.95) 100%);color:#eaf2ff;
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 30px 80px rgba(0,6,20,.6),inset 0 1px 0 rgba(255,255,255,.10);outline:0;
  transform:translateX(calc(100% + 24px));transition:transform .45s cubic-bezier(.16,1,.3,1);}
.b3x-cart.is-open .b3x-cart-overlay{opacity:1;}
.b3x-cart.is-open .b3x-cart-panel{transform:none;}
html.b3x-cart-lock,html.b3x-cart-lock body{overflow:hidden;}
.b3x-cart .b3x-cart-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:22px 22px 14px 26px;}
.b3x-cart .b3x-cart-title{margin:0;padding:0;font-family:'Palma Heavy',sans-serif;font-size:30px;font-weight:400;font-style:normal;
  line-height:1.1;color:#fff;letter-spacing:normal;text-transform:none;}
.b3x-cart .b3x-cart-close,.b3x-cart .b3x-cart-close:hover,.b3x-cart .b3x-cart-close:focus,.b3x-cart .b3x-cart-close:active{
  display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;margin:0;padding:0;
  border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(20,30,54,.6);color:#fff;cursor:pointer;
  box-shadow:none;font:inherit;line-height:1;-webkit-appearance:none;appearance:none;transition:background .2s ease,border-color .2s ease;}
.b3x-cart .b3x-cart-close:hover{background:#04b5ff;border-color:#04b5ff;color:#031b3d;}
.b3x-cart .b3x-cart-close svg{display:block;width:16px;height:16px;}
.b3x-cart .b3x-cart-close:focus-visible,.b3x-cart a:focus-visible,.b3x-cart button:focus-visible{outline:2px solid #000;outline-offset:2px;box-shadow:0 0 0 4px #fff;}
.b3x-cart .b3x-cart-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:4px 26px 26px;}
.b3x-cart .b3x-cart-body::-webkit-scrollbar{width:8px;}
.b3x-cart .b3x-cart-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px;}
.b3x-cart .widget_shopping_cart_content{display:flex;flex-direction:column;min-height:100%;margin:0;padding:0;}
.b3x-cart a,.b3x-cart a:hover,.b3x-cart a:focus,.b3x-cart a:visited{color:inherit;text-decoration:none;}
/* empty */
.b3x-cart .woocommerce-mini-cart__empty-message{margin:6px 0 0;padding:20px 22px;border-radius:16px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.78);font-size:15px;text-align:left;}
/* items: Elementor template (.elementor-menu-cart__*) and core (.woocommerce-mini-cart-item) */
.b3x-cart .elementor-menu-cart__products,.b3x-cart ul.woocommerce-mini-cart{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none;}
.b3x-cart .elementor-menu-cart__product,.b3x-cart .woocommerce-mini-cart-item{position:relative;display:grid;grid-template-columns:64px 1fr 32px;
  grid-template-areas:"img name rm" "img price rm";column-gap:16px;row-gap:4px;align-items:center;margin:0;padding:16px 0;
  border:0;border-bottom:1px solid rgba(255,255,255,.12);background:none;list-style:none;}
.b3x-cart .elementor-menu-cart__product-image{grid-area:img;margin:0;padding:0;width:64px;}
.b3x-cart .elementor-menu-cart__product-image img,.b3x-cart .woocommerce-mini-cart-item img{display:block;width:64px;height:64px;max-width:none;
  margin:0;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:12px;object-fit:cover;float:none;box-shadow:none;}
.b3x-cart .elementor-menu-cart__product-name{grid-area:name;align-self:end;margin:0;padding:0;
  font-family:'Safiro',sans-serif;font-size:15px;font-weight:600;line-height:1.3;color:#fff;}
.b3x-cart .elementor-menu-cart__product-name a:hover{color:#04b5ff;}
.b3x-cart .elementor-menu-cart__product-price{grid-area:price;align-self:start;margin:0;padding:0;font-size:14px;line-height:1.4;color:rgba(255,255,255,.72);}
.b3x-cart .elementor-menu-cart__product-price .woocommerce-Price-amount{color:#04b5ff;font-weight:700;}
.b3x-cart .elementor-menu-cart__product-remove{grid-area:rm;position:relative;justify-self:end;width:32px;height:32px;margin:0;padding:0;}
/* Elementor prints two remove links; Woo's own (.remove_from_cart_button) is the one WooCommerce's
   add-to-cart.js handles anywhere on the page, so that is the one shown */
.b3x-cart .elementor_remove_from_cart_button{display:none!important;}
.b3x-cart a.remove_from_cart_button,.b3x-cart a.remove{position:absolute;top:0;right:0;display:block;width:32px;height:32px;margin:0;padding:0;
  border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(20,30,54,.6) no-repeat center/14px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  color:transparent!important;font-size:0!important;line-height:0;text-indent:-999px;overflow:hidden;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;}
.b3x-cart a.remove_from_cart_button:hover,.b3x-cart a.remove:hover{background-color:#04b5ff;border-color:#04b5ff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23031b3d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");}
.b3x-cart a.remove_from_cart_button::before,.b3x-cart a.remove_from_cart_button::after{content:none;display:none;}
/* core markup: image + name in one link, quantity under it */
.b3x-cart .woocommerce-mini-cart-item > a:not(.remove){grid-area:name;display:contents;font-family:'Safiro',sans-serif;font-size:15px;font-weight:600;color:#fff;}
.b3x-cart .woocommerce-mini-cart-item > a:not(.remove) img{grid-area:img;}
.b3x-cart .woocommerce-mini-cart-item .quantity{grid-area:price;font-size:14px;color:rgba(255,255,255,.72);}
.b3x-cart .woocommerce-mini-cart-item a.remove{grid-area:rm;position:relative;justify-self:end;}
/* blockUI (Woo greys the cart while it removes an item) */
.b3x-cart .blockUI.blockOverlay{border-radius:16px;background:rgba(2,8,22,.5)!important;}
/* subtotal */
.b3x-cart .elementor-menu-cart__subtotal,.b3x-cart .woocommerce-mini-cart__total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:auto 0 0;padding:20px 0 18px;border:0;font-size:16px;color:#fff;}
.b3x-cart .elementor-menu-cart__subtotal strong,.b3x-cart .woocommerce-mini-cart__total strong{font-family:'Aileron',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:rgba(255,255,255,.78);}
.b3x-cart .elementor-menu-cart__subtotal .woocommerce-Price-amount,.b3x-cart .woocommerce-mini-cart__total .woocommerce-Price-amount{
  font-family:'Safiro',sans-serif;font-weight:600;font-size:20px;color:#fff;}
/* buttons: View basket = ghost, Checkout = the site button; stacked, full width */
.b3x-cart .elementor-menu-cart__footer-buttons,.b3x-cart .woocommerce-mini-cart__buttons{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;}
.b3x-cart .elementor-menu-cart__footer-buttons .b3x-wbtn,.b3x-cart .woocommerce-mini-cart__buttons .b3x-wbtn{justify-content:center;width:100%;}
.b3x-cart .wc_stripe_mini_cart_payment_methods,.b3x-cart [class*="wc-stripe"]{max-width:100%;}
@media (max-width:767px){
  .b3x-cart .b3x-cart-panel{top:10px;right:10px;bottom:10px;width:calc(100vw - 20px);border-radius:22px;}
  .b3x-cart .b3x-cart-head{padding:18px 16px 10px 20px;}
  .b3x-cart .b3x-cart-body{padding:4px 20px 20px;}
}
@media (prefers-reduced-motion:reduce){.b3x-cart .b3x-cart-panel,.b3x-cart .b3x-cart-overlay{transition:none;}}

/* ---------------------------------------------------------------- 4. buttons
   shop.js gives every shop button .b3x-wbtn (+ .b3xr-gbtn where it can hold the line + arrow).
   The look itself (navy pill, sky edge, glow, line, arrow) comes from shop/footer.css, which
   copies .b3xr-gbtn from styles.css and repeats it for .b3x-wbtn:not(#b3x). Here: what Woo /
   Elementor add on top that the site button never had, and every state spelled out. */
.b3x-shop-page .b3x-wbtn:not(#b3x){justify-content:center;width:auto;min-width:0;min-height:0;height:auto;margin:0;float:none;
  border-width:1px;border-style:solid;font-style:normal;text-shadow:none;opacity:1;white-space:normal;text-align:center;
  -webkit-appearance:none;appearance:none;vertical-align:middle;}
.b3x-shop-page .b3x-wbtn:not(#b3x) .elementor-button-content-wrapper{display:inline-flex;align-items:center;gap:9px;}
.b3x-shop-page .b3x-wbtn:not(#b3x) .elementor-button-text{font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;}
.b3x-shop-page .b3x-wbtn:not(#b3x):hover,.b3x-shop-page .b3x-wbtn:not(#b3x):focus,.b3x-shop-page .b3x-wbtn:not(#b3x):active,
.b3x-shop-page .b3x-wbtn:not(#b3x):visited{background:#031b3d;color:#fff;border-color:rgba(4,181,255,.5);text-decoration:none;transform:none;}
.b3x-shop-page .b3x-wbtn:not(#b3x):hover{box-shadow:0 6px 22px rgba(0,10,30,.42),0 0 24px rgba(4,181,255,.4);}
.b3x-shop-page .b3x-wbtn:not(#b3x):active{background:#05244f;}
.b3x-shop-page .b3x-wbtn:not(#b3x):focus-visible{outline:2px solid #000;outline-offset:2px;box-shadow:0 0 0 4px #fff,0 6px 22px rgba(0,10,30,.42);}
/* ghost (mini-cart "View basket") */
.b3x-shop-page .b3x-wbtn.ghost:not(#b3x),.b3x-shop-page .b3x-wbtn.ghost:not(#b3x):hover,.b3x-shop-page .b3x-wbtn.ghost:not(#b3x):focus,
.b3x-shop-page .b3x-wbtn.ghost:not(#b3x):active,.b3x-shop-page .b3x-wbtn.ghost:not(#b3x):visited{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;}
.b3x-shop-page .b3x-wbtn.ghost:not(#b3x):hover{background:rgba(255,255,255,.06);}
/* disabled ("Update basket" until a quantity changes) and Woo's .disabled */
.b3x-shop-page .b3x-wbtn:not(#b3x):disabled,.b3x-shop-page .b3x-wbtn.disabled:not(#b3x),.b3x-shop-page .b3x-wbtn[aria-disabled="true"]:not(#b3x){
  background:#3d4c63;color:#fff;border-color:rgba(255,255,255,.18);box-shadow:none;cursor:not-allowed;opacity:1;}
.b3x-shop-page .b3x-wbtn:not(#b3x):disabled .b3xr-btnline,.b3x-shop-page .b3x-wbtn.disabled:not(#b3x) .b3xr-btnline{display:none;}
/* loading (Woo's ajax add to basket): stays readable, arrow makes way for Woo's spinner */
.b3x-shop-page .b3x-wbtn.loading:not(#b3x){opacity:1;cursor:progress;padding-right:46px;}
.b3x-shop-page .b3x-wbtn.loading:not(#b3x) .b3xr-btnarrow{opacity:0;}
.b3x-shop-page .b3x-wbtn.loading:not(#b3x)::after{top:50%;right:18px;margin-top:-.5em;color:#04b5ff;}
.b3x-shop-page .b3x-wbtn.added:not(#b3x)::after{content:none;display:none;}
/* Woo's "View basket" link that appears after an ajax add */
.b3x-shop-page a.added_to_cart.b3x-wbtn:not(#b3x){margin-top:12px;padding:10px 22px;font-size:14px;}
/* the .glass-btn Elementor buttons carry !important padding/background/border in their custom CSS */
.b3x-shop-page .glass-btn .b3x-wbtn.elementor-button{padding:14px 30px!important;background:#031b3d!important;border:1px solid rgba(4,181,255,.5)!important;
  border-radius:100px!important;overflow:visible!important;}
.b3x-shop-page .glass-btn .elementor-button-link,.b3x-shop-page .glass-btn{overflow:visible!important;}
/* products loop: room around the pill */
.b3x-shop-page ul.products li.product .b3x-wbtn:not(#b3x){margin-top:6px;}
@media (max-width:767px){.b3x-shop-page .b3x-wbtn:not(#b3x){font-size:15px;padding:13px 24px;}}

/* ---------------------------------------------------------------- 5. fonts
   One weight each: Palma Heavy (headers), Safiro SemiBold 600 (subheads), Aileron 700 (labels),
   Aileron 400 (body). The body rule sets the family only, so Elementor's own bold/regular
   choices carry through (fonts.css maps 600+ to Aileron Bold, under 600 to Regular). */
.b3x-shop-page :where(.elementor-location-archive,.elementor-location-single,.site-main,div.woocommerce) :where(p,span,li,td,th,label,a,div,bdi,small,em,i:not([class*="icon"]):not([class*="fa-"]),dt,dd,address,input,select,textarea,button,legend,blockquote,figcaption,nav,strong,b,mark,del,ins):not(#b3x){font-family:'Aileron',sans-serif;}
/* labels: Aileron Bold */
.b3x-shop-page :where(.elementor-location-archive,.elementor-location-single,.site-main,div.woocommerce) :where(th,label,strong,b,.price,.price *,.b3x-tag-pill,.woocommerce-breadcrumb a,.product_meta .posted_in,.e-cart-totals .order-total td):not(#b3x){font-family:'Aileron',sans-serif;font-weight:700;}
/* Woo's phone table labels (td::before "Product:" ...) */
.b3x-shop-page:not(#b3x) :where(.site-main,div.woocommerce,.elementor-location-single) :where(td,th)::before{font-family:'Aileron',sans-serif;font-weight:700;}
/* subheads: Safiro SemiBold */
.b3x-shop-page :where(.woocommerce-loop-product__title,.cart_item .product-name a,.woocommerce-table__product-name a,.e-cart-totals h3):not(#b3x){font-family:'Safiro',sans-serif;font-weight:600;font-style:normal;letter-spacing:normal;}
/* headers: Palma Heavy (one heavy cut; no italic exists, so upright) */
.b3x-shop-page :where(.elementor-location-archive,.elementor-location-single,.site-main,div.woocommerce) :where(h1,h2,h3,h4,.elementor-heading-title,.product_title):not(.woocommerce-loop-product__title):not(#b3x){
  font-family:'Palma Heavy',sans-serif;font-weight:400;font-style:normal;letter-spacing:normal;}
/* My Account's Login / Register headings sat dark-on-navy (pre-existing); white now */
.b3x-shop-page :where(#customer_login,.woocommerce-MyAccount-content,.woocommerce-ResetPassword) :where(h2,h3):not(#b3x){color:#fff;}
/* the hero's gradient-stroke line keeps its outline treatment, in Palma */
.b3x-shop-page .gradient-stroke .elementor-heading-title:not(#b3x){font-family:'Palma Heavy',sans-serif;}
/* form fields and the qty box */
.b3x-shop-page :where(.site-main,div.woocommerce,.elementor-location-single) :where(input.input-text,input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],select,textarea):not(#b3x){
  font-family:'Aileron',sans-serif;font-weight:400;border-radius:var(--b3x-r-field);}
/* the order-received (thank you) page: the Customizer CSS forces articulat-cf with !important */
.b3x-shop-page.woocommerce-order-received .woocommerce :where(*:not(i):not([class*="icon"])):not(#b3x){font-family:'Aileron',sans-serif!important;}
.b3x-shop-page.woocommerce-order-received :where(h2,.woocommerce-order-details__title,.woocommerce-column__title):not(#b3x){font-family:'Palma Heavy',sans-serif!important;font-weight:400!important;}

/* ---------------------------------------------------------------- 6. radius */
.b3x-shop-page ul.products li.product :where(img):not(#b3x){border-radius:var(--b3x-r-img);}
.b3x-shop-page .woocommerce-product-gallery :where(.flex-viewport,.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child):not(#b3x){border-radius:20px;overflow:hidden;}
.b3x-shop-page .woocommerce-product-gallery__image :where(img):not(#b3x){border-radius:20px;}
.b3x-shop-page .flex-control-thumbs :where(img):not(#b3x){border-radius:12px;}
.b3x-shop-page :where(td.product-thumbnail img,.woocommerce-cart-form img):not(#b3x){border-radius:10px;}
.b3x-shop-page :where(.e-cart-section,.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword,.woocommerce-MyAccount-content,.woocommerce-checkout-review-order,.woocommerce-order):not(#b3x){border-radius:var(--b3x-r-card);}
.b3x-shop-page :where(.woocommerce-info,.woocommerce-message,.woocommerce-error,.woocommerce-notice):not(#b3x){border-radius:16px;}
.b3x-shop-page :where(.b3x-tag-pill):not(#b3x){border-radius:100px;}

/* ---------------------------------------------------------------- 7. basket, checkout, account: glass panels
   Paul (6 Oct): the basket, checkout and account boxes were white with tiny corners; make them the
   site's glass, every text + control readable at every state, and Place order the site button with
   full pill corners so the draw-around line follows its shape.
   VISUAL ONLY. Nothing here changes display, position or order of a field, the Select2 box, the
   Stripe card frames, the express buttons, the coupon / login toggles or Place order: colours,
   fills, edges, radius, fonts, focus rings and the checkout section headings (14px to 22px Palma) only.
   Proven unchanged in function by tools/checkout-func.cjs (Stripe frames, toggles, validation,
   update_checkout, payment radios, console).

   Specificity. Elementor's Woo widgets style these pages through their own CSS variables
   (--sections-*, --forms-*, --order-summary-*, --tabs-* ...) plus hard-coded colours, and the checkout
   widget's own rules carry up to TWO ids (".elementor-3118 ... #payment #place_order" = 2,4,0). So:
     - the variables are set on each widget element with one id's weight (beats Elementor's per-page
       ".elementor-3117 .elementor-element.elementor-element-5514b04{--x}" = 0,3,0), which also covers
       states and logged-in My Account screens that cannot be rendered without a login;
     - direct rules use the scope below, two ids' weight (2,1,0), plus #payment #place_order on the
       button, so no !important is needed except against inline styles (blockUI) and Elementor's
       own !important on the basket remove icon colour (handled through its variable instead).
   Light surfaces inside glass: form fields, the Stripe card box and the Select2 list stay LIGHT so
   Stripe's own card fields (cross-origin frames, theme "stripe", dark labels) sit naturally in them.
   Colours (all measured, tools/checkout-contrast.cjs):
     panel text #c5d3e6, labels/headings #fff, links #04b5ff (hover #7fd8ff + underline),
     field fill #eef3f9 text #031b3d placeholder #56657a, focus ring #04b5ff 2px outside,
     invalid ring + message #ff8f8f / #ffc2c2, required star #ffa3a3, notice icons sky/#6ee7a8/#ff8f8f. */
body.b3x-shop-page{--b3x-panel:linear-gradient(155deg,rgba(12,34,68,.74) 0%,rgba(3,13,30,.82) 100%);
  --b3x-panel-line:rgba(255,255,255,.14);--b3x-panel-shadow:0 18px 48px rgba(0,6,20,.34),inset 0 1px 0 rgba(255,255,255,.10);
  --b3x-txt:#c5d3e6;--b3x-link:#04b5ff;--b3x-link-hi:#7fd8ff;--b3x-fill:#eef3f9;--b3x-fill-ink:#031b3d;--b3x-ph:#56657a;
  --b3x-bad:#ff8f8f;--b3x-bad-txt:#ffc2c2;}
/* page canvas: checkout + account were Elementor's primary navy (#022656); the basket and shop use the
   darker global (#081422) that Bex approved */
body.b3x-shop-page.woocommerce-checkout:not(#b3x),body.b3x-shop-page.woocommerce-account:not(#b3x){background-color:var(--e-global-color-bb248f3,#081422);}

/* 7a. Elementor widget variables (colours only) */
.b3x-shop-page .elementor-widget-woocommerce-cart:not(#b3x),
.b3x-shop-page .elementor-widget-woocommerce-checkout-page:not(#b3x),
.b3x-shop-page .elementor-widget-woocommerce-my-account:not(#b3x){
  --sections-background-color:transparent;--sections-border-color:var(--b3x-panel-line);--sections-border-radius:var(--b3x-r-card);
  --sections-title-color:#fff;--sections-secondary-title-color:var(--b3x-txt);--sections-descriptions-color:var(--b3x-txt);
  --sections-messages-color:var(--b3x-txt);--sections-radio-buttons-color:#fff;--sections-checkboxes-color:#fff;
  --forms-labels-color:#fff;--forms-fields-normal-color:var(--b3x-fill-ink);--forms-fields-focus-color:var(--b3x-fill-ink);
  --forms-fields-normal-background-color:var(--b3x-fill);--forms-fields-focus-background-color:#fff;--forms-fields-focus-border-color:transparent;
  --forms-fields-border-radius:var(--b3x-r-field);--links-normal-color:var(--b3x-link);--links-hover-color:var(--b3x-link-hi);
  --order-summary-items-color:#fff;--order-summary-totals-color:var(--b3x-txt);--order-summary-variations-color:var(--b3x-txt);
  --order-summary-items-divider-color:var(--b3x-panel-line);--order-summary-totals-divider-color:var(--b3x-panel-line);
  --order-summary-color:#fff;--order-summary-title-color:#fff;--order-summary-quantity-border-color:transparent;
  --order-summary-remove-icon-normal-color:#fff;--order-summary-remove-icon-hover-color:var(--b3x-link);
  --product-link-normal-color:#fff;--product-link-hover-color:var(--b3x-link);
  --totals-color:#fff;--totals-divider-color:var(--b3x-panel-line);--purchase-button-border-radius:100px;--checkout-button-border-radius:100px;
  /* My Account (logged in screens) */
  --general-text-color:var(--b3x-txt);--typography-section-titles-color:#fff;--login-messages-color:var(--b3x-txt);--checkboxes-color:#fff;
  --tables-title-color:#fff;--tables-items-color:var(--b3x-txt);--variations-color:var(--b3x-txt);--tables-divider-border-color:var(--b3x-panel-line);
  --tables-links-normal-color:var(--b3x-link);--tables-links-hover-color:var(--b3x-link-hi);--payment-methods-radio-buttons-color:#fff;
  --tabs-normal-color:#fff;--tabs-hover-color:var(--b3x-link);--tabs-active-color:#fff;--tabs-divider-color:var(--b3x-panel-line);
  --tabs-border-color:var(--b3x-panel-line);--tabs-hover-border-color:var(--b3x-link);--tabs-active-border-color:var(--b3x-link);--tabs-border-radius:12px;
  color:var(--b3x-txt);}

/* 7b. the panels */
.b3x-shop-page:not(#b3x):not(#b3x) :is(
  .e-cart-section,
  .e-woocommerce-login-section,#customer_details .col-1,.woocommerce-additional-fields,.shipping_address,.e-checkout__order_review,.e-coupon-box,.woocommerce-checkout #payment,
  .woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword,.woocommerce-MyAccount-content-wrapper,.woocommerce-address-fields,
  .woocommerce-MyAccount-content address,.e-my-account-tab__view-order .order_details,.woocommerce-table--order-downloads,#add_payment_method #payment,
  .woocommerce-order-received .woocommerce-order){
  background:var(--b3x-panel);border:1px solid var(--b3x-panel-line);border-radius:var(--b3x-r-card);box-shadow:var(--b3x-panel-shadow);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);color:var(--b3x-txt);}
/* the coupon row sits inside the basket form; the Elementor "Cart Totals" box has its own inner table */
.b3x-shop-page:not(#b3x):not(#b3x) .e-cart-totals .cart_totals{background:none;border:0;box-shadow:none;}

/* 7c. text on the panels */
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.e-my-account-tab,.woocommerce-order) :is(h2,h3,legend){color:#fff;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.woocommerce-billing-fields,.woocommerce-additional-fields,.woocommerce-shipping-fields) h3,
.b3x-shop-page:not(#b3x):not(#b3x) #order_review_heading{font-family:'Palma Heavy',sans-serif;font-weight:400;font-size:22px;line-height:1.2;color:#fff;}
.b3x-shop-page:not(#b3x):not(#b3x) .e-cart-totals h2{color:#fff;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab,.woocommerce-order) :is(p,.e-checkout-secondary-title,.e-description,.e-coupon-anchor-description,.woocommerce-privacy-policy-text,.wc-stripe-cart-or,.e-woocommerce-login-nudge,address){color:var(--b3x-txt);}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.e-my-account-tab,.woocommerce-order) :is(label,.woocommerce-form__label-for-checkbox span,.save-source-label){color:#fff;font-family:'Aileron',sans-serif;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.e-my-account-tab) :is(.required,abbr.required){color:#ffa3a3;text-decoration:none;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.e-my-account-tab) .optional{color:var(--b3x-txt);}
/* tables: order review, basket table, cart totals, order details */
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.e-my-account-tab,.woocommerce-order) :is(table.shop_table,table.shop_table th,table.shop_table td,table.shop_table td::before){
  color:#fff;border-color:var(--b3x-panel-line);font-family:'Aileron',sans-serif;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.e-my-account-tab,.woocommerce-order) table.shop_table :is(thead th,tfoot th,td::before){color:var(--b3x-txt);font-weight:700;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.e-my-account-tab,.woocommerce-order) table.shop_table :is(span,bdi,strong,.product-quantity){color:inherit;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-order) table.shop_table :is(.order-total th,.order-total td){color:#fff;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-order) table.shop_table .order-total .woocommerce-Price-amount{font-family:'Safiro',sans-serif;font-weight:600;font-size:18px;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.e-my-account-tab,.woocommerce-order) table.shop_table :is(tr,td.actions,tfoot tr:first-child th,tfoot tr:first-child td){border-color:var(--b3x-panel-line);}
.b3x-shop-page:not(#b3x):not(#b3x) .e-cart__container table.cart td.product-name a:not(.button):not(.b3x-wbtn):not(.remove){color:#fff;text-decoration:none;}
.b3x-shop-page:not(#b3x):not(#b3x) .e-cart__container table.cart td.product-name a:not(.button):not(.b3x-wbtn):not(.remove):is(:hover,:focus,:active){color:var(--b3x-link);text-decoration:underline;}
/* basket remove (x): Elementor colours it with !important through its variable (set above); here the round target + ring */
.b3x-shop-page:not(#b3x):not(#b3x) .e-cart__container a.remove:focus-visible{outline:2px solid var(--b3x-link);outline-offset:2px;}

/* 7d. links */
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab,.woocommerce-order,.woocommerce-notices-wrapper,.woocommerce-NoticeGroup) a:not(.button):not(.b3x-wbtn):not(.remove){
  color:var(--b3x-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab,.woocommerce-order,.woocommerce-notices-wrapper,.woocommerce-NoticeGroup) a:not(.button):not(.b3x-wbtn):not(.remove):is(:hover,:focus,:active){
  color:var(--b3x-link-hi);text-decoration-thickness:2px;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab,.woocommerce-order,.woocommerce-notices-wrapper,.woocommerce-NoticeGroup) a:not(.button):not(.b3x-wbtn):focus-visible{
  outline:2px solid var(--b3x-link);outline-offset:3px;border-radius:4px;}

/* 7e. fields: light fill, edge drawn as an inset shadow, sky ring outside on focus. Checkout fields keep
   Elementor's border:none, so their size is unchanged; the basket qty + coupon fields lose a 1px border (2px smaller) */
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab,.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword,.woocommerce-cart-form,.woocommerce-form-coupon)
  :is(input.input-text,input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],input[type="search"],select,textarea),
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab) .select2-container .select2-selection{
  background-color:var(--b3x-fill);color:var(--b3x-fill-ink);border:0;border-radius:var(--b3x-r-field);
  box-shadow:inset 0 0 0 1px rgba(3,27,61,.22);font-family:'Aileron',sans-serif;font-weight:400;opacity:1;
  transition:box-shadow .2s ease,background-color .2s ease,outline-color .2s ease;outline:2px solid transparent;outline-offset:2px;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab,.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword,.woocommerce-cart-form)
  :is(input.input-text,input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],input[type="search"],select,textarea):hover,
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab) .select2-container .select2-selection:hover{
  background-color:#fff;box-shadow:inset 0 0 0 1px rgba(3,27,61,.38);}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab,.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword,.woocommerce-cart-form)
  :is(input.input-text,input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],input[type="search"],select,textarea):focus,
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab) .select2-container :is(.select2-selection:focus,.select2-selection[aria-expanded="true"]){
  background-color:#fff;color:var(--b3x-fill-ink);box-shadow:inset 0 0 0 1px var(--b3x-fill-ink);outline:2px solid var(--b3x-link);outline-offset:2px;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab,.woocommerce-cart-form) :is(input,textarea)::placeholder{color:var(--b3x-ph);opacity:1;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab) .select2-selection .select2-selection__rendered{color:var(--b3x-fill-ink);}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab) .select2-selection .select2-selection__placeholder{color:var(--b3x-ph);}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-checkout__container,.woocommerce-checkout,.e-my-account-tab) .select2-selection__arrow b{border-top-color:var(--b3x-fill-ink);}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab) :is(input,select,textarea):disabled{background-color:#c9d2de;color:#2a3a52;cursor:not-allowed;}
/* invalid (Woo adds .woocommerce-invalid to the .form-row on blur / change) */
.b3x-shop-page:not(#b3x):not(#b3x) .form-row.woocommerce-invalid :is(input.input-text,select,textarea),
.b3x-shop-page:not(#b3x):not(#b3x) .form-row.woocommerce-invalid .select2-container .select2-selection{
  box-shadow:inset 0 0 0 2px #c4262e;outline:2px solid var(--b3x-bad);outline-offset:2px;}
.b3x-shop-page:not(#b3x):not(#b3x) .form-row.woocommerce-invalid > label{color:var(--b3x-bad-txt);}
.b3x-shop-page:not(#b3x):not(#b3x) .form-row.woocommerce-invalid :is(.checkout-inline-error-message,.woocommerce-input-wrapper > p){color:var(--b3x-bad-txt);}
.b3x-shop-page:not(#b3x):not(#b3x) .form-row.woocommerce-invalid :is(input.input-text,textarea):focus{background-color:#fff;}
/* native radios + checkboxes on dark: the site's sky, ring on keyboard focus */
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab) :is(input[type="radio"],input[type="checkbox"]){accent-color:var(--b3x-link);}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout,.e-my-account-tab) :is(input[type="radio"],input[type="checkbox"]):focus-visible{outline:2px solid var(--b3x-link);outline-offset:2px;}

/* 7f. Select2 open list (printed at the end of <body>, outside the widget); these three pages only */
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) .select2-container--open .select2-dropdown{background:#fff;border:1px solid rgba(3,27,61,.3);border-radius:12px;overflow:hidden;
  box-shadow:0 18px 40px rgba(0,6,20,.45);}
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) .select2-container--open .select2-search--dropdown .select2-search__field{background:var(--b3x-fill);color:var(--b3x-fill-ink);border:0;border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(3,27,61,.38);font-family:'Aileron',sans-serif;outline:2px solid transparent;}
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) .select2-container--open .select2-search--dropdown .select2-search__field:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--b3x-fill-ink);}
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) .select2-container--open .select2-results__option{color:var(--b3x-fill-ink);background:#fff;font-family:'Aileron',sans-serif;}
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) .select2-container--open .select2-results__option:is([aria-selected="true"],[data-selected="true"]){background:#dbe6f3;color:var(--b3x-fill-ink);}
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) .select2-container--open .select2-results__option--highlighted:is([aria-selected],[data-selected]),
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) .select2-container--open .select2-results__option.select2-results__option--highlighted{background:var(--b3x-link);color:var(--b3x-fill-ink);}

/* 7g. checkout payment box: methods on glass, the card box LIGHT (Stripe's frames draw dark labels) */
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-checkout #payment ul.payment_methods{border-bottom-color:var(--b3x-panel-line);}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-checkout #payment .wc_payment_method > label{color:#fff;font-family:'Aileron',sans-serif;font-weight:700;}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-checkout #payment div.payment_box{background-color:var(--b3x-fill);color:var(--b3x-fill-ink);border-radius:16px;}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--b3x-fill);}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-checkout #payment div.payment_box :is(p,label,.save-source-label){color:var(--b3x-fill-ink);}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-checkout #payment .save-source-checkbox{border-color:#56657a;}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-checkout #payment .wc-stripe-save-source input[type="checkbox"]:focus-visible + .save-source-checkbox{outline:2px solid var(--b3x-fill-ink);outline-offset:2px;}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-checkout #payment .woocommerce-privacy-policy-text p{color:var(--b3x-txt);}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper :is(label,span){color:#fff;}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-checkout .woocommerce-terms-and-conditions{background:var(--b3x-fill);color:var(--b3x-fill-ink);border-radius:12px;}
/* the Stripe express banner (only shows on devices with a wallet): legend + "OR" divider readable on navy */
.b3x-shop-page:not(#b3x):not(#b3x) .wc-stripe-banner-checkout fieldset{border-color:var(--b3x-panel-line);border-radius:16px;}
.b3x-shop-page:not(#b3x):not(#b3x) .wc-stripe-banner-checkout legend{color:#fff;font-family:'Aileron',sans-serif;font-weight:700;}
.b3x-shop-page:not(#b3x):not(#b3x) .wc-stripe-banner-checkout .banner-divider{color:var(--b3x-txt);}
.b3x-shop-page:not(#b3x):not(#b3x) .wc-stripe-banner-checkout .banner-divider::before,.b3x-shop-page:not(#b3x):not(#b3x) .wc-stripe-banner-checkout .banner-divider::after{background:var(--b3x-panel-line);}
/* Woo greys a box while it updates (blockUI sets a WHITE inline background): navy instead */
.b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.woocommerce-checkout) .blockUI.blockOverlay{background:rgba(2,8,22,.55)!important;border-radius:inherit;}

/* 7h. Place order = the site button, pill corners so the draw-around line (a rect with rx = half the
   height, app.js / shop.js sizeLine) follows the real edge at rest and on hover */
.b3x-shop-page:not(#b3x):not(#b3x) #payment #place_order.b3x-wbtn,
.b3x-shop-page:not(#b3x):not(#b3x) #payment #place_order.b3x-wbtn:is(:hover,:focus,:active,:visited){
  border-radius:100px;background:var(--navy,#031b3d);color:#fff;border:1px solid rgba(4,181,255,.5);
  font-family:'Safiro',sans-serif;font-weight:700;justify-content:center;box-shadow:0 6px 22px rgba(0,10,30,.42);}
.b3x-shop-page:not(#b3x):not(#b3x) #payment #place_order.b3x-wbtn:hover{box-shadow:0 6px 22px rgba(0,10,30,.42),0 0 24px rgba(4,181,255,.4);}
.b3x-shop-page:not(#b3x):not(#b3x) #payment #place_order.b3x-wbtn:active{background:#05244f;}
.b3x-shop-page:not(#b3x):not(#b3x) #payment #place_order.b3x-wbtn:focus-visible{outline:2px solid #000;outline-offset:2px;box-shadow:0 0 0 4px #fff,0 6px 22px rgba(0,10,30,.42);}
.b3x-shop-page:not(#b3x):not(#b3x) #payment #place_order.b3x-wbtn:is(:disabled,.disabled){background:#3d4c63;color:#fff;border-color:rgba(255,255,255,.18);box-shadow:none;cursor:not-allowed;}

/* 7i. notices (info / message / error) on the basket, checkout (incl. order received) and account pages only;
   product pages and the shop archive keep theirs */
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) :is(.woocommerce-info,.woocommerce-message,.woocommerce-error,.woocommerce-notice:not(.woocommerce-notice--success)){
  background:var(--b3x-panel);color:#eaf2ff;border:1px solid var(--b3x-panel-line);border-radius:16px;box-shadow:var(--b3x-panel-shadow);
  padding:1em 2em 1em 3.5em;}
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) :is(.woocommerce-info,.woocommerce-message)::before{color:var(--b3x-link);}
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) .woocommerce-message::before{color:#6ee7a8;}
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) .woocommerce-error::before{color:var(--b3x-bad);}
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) .woocommerce-error{border-color:rgba(255,143,143,.55);}
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) :is(.woocommerce-info,.woocommerce-message,.woocommerce-error) :is(li,p,span,strong){color:#eaf2ff;}
.b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) :is(.woocommerce-info,.woocommerce-message,.woocommerce-error) a:not(.button):not(.b3x-wbtn){color:var(--b3x-link);text-decoration:underline;}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-order-received .woocommerce-notice--success{color:#fff;}

/* 7j. My Account (logged in): tabs + order overview list */
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-MyAccount-navigation ul li a{background:rgba(255,255,255,.05);border:1px solid var(--b3x-panel-line);border-radius:12px;color:#fff;}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-MyAccount-navigation ul li a:hover{background:rgba(4,181,255,.12);border-color:var(--b3x-link);color:#fff;}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-MyAccount-navigation ul li.is-active a{background:var(--navy,#031b3d);border-color:var(--b3x-link);color:#fff;}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-MyAccount-navigation ul li a:focus-visible{outline:2px solid var(--b3x-link);outline-offset:2px;}
.b3x-shop-page:not(#b3x):not(#b3x) :is(.woocommerce-MyAccount-content,.woocommerce-order) :is(mark,strong,dt,dd,li){color:inherit;background:none;}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-order ul.order_details li{border-color:var(--b3x-panel-line);color:var(--b3x-txt);}
.b3x-shop-page:not(#b3x):not(#b3x) .woocommerce-order ul.order_details li strong{color:#fff;}

/* WP admin bar (logged-in admins only; Woo hides it for customers). The plugin pages hide it, the shop
   pages show it, so the fixed header bar moves down by WordPress's own bar height: 32px above 782px,
   46px at 782px and below. At 600px and below WP's bar is absolute and scrolls away, so only the resting
   bar moves; once floated (scrolled past 32px) it returns to its normal 10px. */
body.admin-bar .b3xh .b3xh-bar{top:32px;}
body.admin-bar .b3xh .b3xh-bar.is-float{top:44px;}
@media (max-width:782px){
  body.admin-bar .b3xh .b3xh-bar{top:46px;}
  body.admin-bar .b3xh .b3xh-bar.is-float{top:58px;}
}
@media (max-width:767px){
  body.admin-bar .b3xh .b3xh-bar,body.admin-bar .b3xh .b3xh-bar.is-float{top:56px;}
}
@media (max-width:600px){
  body.admin-bar .b3xh .b3xh-bar.is-float{top:10px;}
}

/* Google Pay button (woo-stripe-payment draws it as a plain <button> in the page, so site button rules
   reach it; its "Buy with G Pay" wording is a white image that no text colour can change).
   1. Everywhere: Hello's reset turns any button pink (#c36) on hover/focus. Put back Google's own states.
   2. Product page: the Elementor product template (3145) styles every ".cart button" navy at rest and
      WHITE on hover, which hid the white wording (also on the old site). Keep the navy pill at rest and
      on hover/focus/press stay navy with the site's sky edge. */
.b3x-shop-page button.gpay-card-info-container.black:not(#b3x):hover,
.b3x-shop-page button.gpay-card-info-container.black:not(#b3x):focus{background-color:#3c4043;color:#fff;}
.b3x-shop-page button.gpay-card-info-container.black:not(#b3x):active{background-color:#5f6368;color:#fff;}
.b3x-shop-page .cart button.gpay-card-info-container:not(#b3x):hover,
.b3x-shop-page .cart button.gpay-card-info-container:not(#b3x):focus{background-color:var(--e-global-color-primary,#022656);border-color:#04b5ff;color:#fff;}
.b3x-shop-page .cart button.gpay-card-info-container:not(#b3x):active{background-color:#011a3d;border-color:#04b5ff;color:#fff;}
.b3x-shop-page button.gpay-card-info-container:not(#b3x):focus-visible{outline:2px solid #04b5ff;outline-offset:2px;}

/* 6 Oct (Paul): basket, checkout and account panels sat edge to edge on phones (Elementor gives the container
   no side padding). A 10px gap each side. Padding only: nothing moves out of flow, the Stripe frames simply
   mount 20px narrower. */
/* 7 Oct (Paul): the same 10px for the product grids (the shop page's three grids and a product page's
   related products), which also ran edge to edge. The product gallery already sits 10px in. */
@media (max-width:767px){
  .b3x-shop-page :is(.elementor-widget-woocommerce-cart,.elementor-widget-woocommerce-checkout-page,.elementor-widget-woocommerce-my-account,.elementor-widget-woocommerce-products,.elementor-widget-wc-archive-products,.elementor-widget-woocommerce-product-related,.elementor-widget-woocommerce-product-upsell):not(#b3x){
    padding-left:10px;padding-right:10px;box-sizing:border-box;}
}

/* 7 Oct (Paul): no "Available for new projects" in the shop header (any width), so the basket and the menu
   button have room on phones. The site pages keep it (this file loads only on shop requests, and the header
   carries .b3x-shop only there; Privacy and For Clients use the plain header). */
/* Above 767px it is hidden but keeps its space, so "Creativity since 2017" stays exactly where it is on the
   site pages (removing it moved the tag to mid-bar). Phones: gone, and the basket kept beside the menu button
   (the bar spaces its items apart, so it would otherwise sit mid-bar). */
.b3xh.b3x-shop .b3xh-status:not(#b3x){visibility:hidden;}
@media (max-width:767px){
  .b3xh.b3x-shop .b3xh-status:not(#b3x){display:none;}
  .b3xh.b3x-shop .b3xh-slot--custom:not(#b3x){margin-left:auto;}
}

/* 7 Oct (Paul): "For Designers" / "For Clients" (two .glass-btn buttons in one Elementor container on the
   shop page) the same width: both take the wider one's width. Side by side above 767px, stacked below, as
   before. Keyed on the pair, not on Elementor element ids. */
.b3x-shop-page .e-con:has(> .elementor-widget-button.glass-btn + .elementor-widget-button.glass-btn):not(#b3x){
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:max-content;max-width:100%;margin-inline:auto;}
.b3x-shop-page .e-con:has(> .elementor-widget-button.glass-btn + .elementor-widget-button.glass-btn) > .glass-btn:not(#b3x){width:auto;max-width:none;}
.b3x-shop-page .e-con:has(> .elementor-widget-button.glass-btn + .elementor-widget-button.glass-btn) > .glass-btn .elementor-button:not(#b3x){display:flex;justify-content:center;width:100%;box-sizing:border-box;}
@media (max-width:767px){
  .b3x-shop-page .e-con:has(> .elementor-widget-button.glass-btn + .elementor-widget-button.glass-btn):not(#b3x){grid-auto-flow:row;}
}
/* 6 Oct (Paul): Google Pay as a pill everywhere, to match the site buttons (the product page already was,
   via the Elementor template). Shape only; Google's outline follows the radius. */
.b3x-shop-page :is(.gpay-button,button.gpay-card-info-container,.gpay-card-info-animation-container):not(#b3x){border-radius:100px;}

/* 13 Oct (Alex): the basket, checkout and account pages ran flush to the left edge on a 1366 laptop.
   Elementor's container is a fixed 1366px block that centres only while it fits, and below about
   1426px it loses both gutters (measured: left 0 at 1280 and 1366, left 30 at 1440, left 270 at 1920;
   the 15px on the right is the scrollbar, which is what made it read as "gap on one side only").
   Gutter restored in that band only, so the wide desktop layout is untouched, and above 767px only,
   because phones already inherit 10px from the parent container. */
@media (min-width:768px) and (max-width:1425px){
  .b3x-shop-page:not(#b3x):not(#b3x) :is(.e-cart__container,.e-checkout__container,.e-my-account-tab){
    box-sizing:border-box;padding-left:clamp(20px,2.2vw,50px);padding-right:clamp(20px,2.2vw,50px);
  }
}

/* 13 Oct (Paul): the rule above pads the three cart containers, but the WooCommerce notice strip
   ("has been added to your basket", coupon messages, checkout validation errors) is a sibling of
   them, not a child, so in the same band it still ran flush to both screen edges while the panels
   under it sat at 30. Same band, same clamp, so it lines up with the content columns at every
   width (measured: 25 at 1152, 28 at 1280, 30 at 1366, 53 at 1425, all matching the left column). */
@media (min-width:768px) and (max-width:1425px){
  .b3x-shop-page:is(.woocommerce-cart,.woocommerce-checkout,.woocommerce-account):not(#b3x):not(#b3x) .woocommerce-notices-wrapper{
    box-sizing:border-box;padding-left:clamp(20px,2.2vw,50px);padding-right:clamp(20px,2.2vw,50px);
  }
}

/* 13 Oct (Alex): removing a basket item took seconds with nothing on screen. The remove control is a
   plain link and /basket/ is uncacheable, so the round trip is a real page load from the origin.
   shop.js marks the row busy on the way out; this is the only thing that shows it. */
.b3x-shop-page:not(#b3x):not(#b3x) .b3x-busy{opacity:.55;cursor:progress;pointer-events:none;}
.b3x-shop-page:not(#b3x):not(#b3x) .b3x-busy-ctl{position:relative;color:transparent;cursor:progress;pointer-events:none;}
.b3x-shop-page:not(#b3x):not(#b3x) .b3x-busy-ctl::after{
  content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:b3x-busy-spin .7s linear infinite;}
@keyframes b3x-busy-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .b3x-shop-page:not(#b3x):not(#b3x) .b3x-busy-ctl::after{animation:none;border-top-color:rgba(255,255,255,.3);}
}