/* =====================================================================
 * Look 4 — Deep water glass (draft, 9 Oct 2026)
 * Loaded on top of the "Polished glow" look. Matches the owner's
 * reference image: dark water background, translucent rounded cards,
 * red "SALE" pill, round blue "RUO" badge, centred prices and a pill
 * "Add to cart" button under the price.
 * Static only: no animations, no backdrop blur (kept cheap to scroll).
 * ===================================================================== */

:root{
  --bwg-water:url("glass-water.jpg");
  --bwg-card:rgba(7,15,31,.62);
  --bwg-card-hover:rgba(10,22,44,.72);
  --bwg-edge:rgba(64,132,230,.42);
  --bwg-edge-hover:rgba(96,165,250,.75);
  --bwg-blue:#0b6bf0;
  --bwg-blue-2:#3d9bff;
  --bwg-red:#e5263a;
}

/* ---- page background: dark water, fixed behind everything ---- */
html:root{background-color:#02060e !important;}
html:root body{background:transparent !important;}
html:root body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,14,.30),rgba(2,6,14,.52)),var(--bwg-water) center/cover no-repeat;
}

/* ---- product cards ---- */
html:root body ul.products li.product.product{
  background:var(--bwg-card) !important;
  border:1px solid var(--bwg-edge) !important;
  border-radius:18px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 28px -14px rgba(0,0,0,.8) !important;
  padding:14px 12px 16px !important;
  text-align:center !important;
  overflow:hidden !important;
}
html:root body ul.products li.product.product:hover{
  background:var(--bwg-card-hover) !important;
  border-color:var(--bwg-edge-hover) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px -14px rgba(0,0,0,.8),0 0 18px rgba(11,107,240,.22) !important;
}

/* let the photo, title, price and button line up in one column so the
   button can sit under the price (it was laid over the photo) */
html:root body ul.products li.product.product .loop-image-wrap{
  display:contents !important;
}
html:root body ul.products li.product.product > *,
html:root body ul.products li.product.product .loop-image-wrap > *{order:3;}
html:root body ul.products li.product.product .loop-image-wrap > a{order:1;}
html:root body ul.products li.product.product .woocommerce-loop-product__title{order:2;}
html:root body ul.products li.product.product .price{order:3;}
html:root body ul.products li.product.product .loop-image-wrap > .loop-button-wrap{order:5;}
html:root body ul.products li.product.product > .loop-button-wrap{order:6;}
html:root body ul.products li.product.product > a.woocommerce-LoopProduct-link:empty{display:none !important;}

/* photo: no frame, soft edges so it sits on the glass like the reference */
html:root body ul.products li.product.product .loop-image-wrap > a{
  position:static !important;display:block !important;
  margin:6px auto 0 !important;width:100% !important;
  background:none !important;border:0 !important;
}
html:root body ul.products li.product.product .loop-image-wrap > a::after{display:none !important;}
/* products now use background-free (transparent) photos, so the whole
   product is shown inside a square slot with no frame, no crop and no
   edge mask - cover + mask were for the old opaque photos. */
html:root body ul.products li.product.product img{
  display:block !important;width:100% !important;height:auto !important;aspect-ratio:1/1;
  object-fit:contain !important;object-position:center !important;border-radius:0 !important;
  padding:0 !important;box-sizing:border-box !important;
  -webkit-mask-image:none !important;mask-image:none !important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55)) !important;
  margin:0 auto !important;opacity:1 !important;
}

/* SALE pill, top-left of the card */
html:root body ul.products li.product.product .onsale,
html:root body ul.products li.product.product span.onsale{
  position:absolute !important;top:12px !important;left:12px !important;right:auto !important;bottom:auto !important;
  transform:none !important;width:auto !important;min-width:0 !important;min-height:0 !important;height:auto !important;
  padding:5px 10px !important;margin:0 !important;line-height:1.1 !important;
  background:var(--bwg-red) !important;color:#fff !important;border:0 !important;border-radius:9px !important;
  font-size:12px !important;font-weight:800 !important;letter-spacing:.02em !important;text-transform:uppercase !important;
  box-shadow:0 4px 12px -4px rgba(229,38,58,.7) !important;text-shadow:none !important;z-index:4 !important;
  clip-path:none !important;
}

/* RUO: round blue badge, top-right of the card */
html:root body ul.products li.product.product .loop-image-wrap::after{
  content:"RUO" !important;position:absolute !important;
  top:10px !important;right:10px !important;left:auto !important;bottom:auto !important;
  width:42px !important;height:42px !important;padding:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  border-radius:50% !important;clip-path:none !important;
  background:radial-gradient(circle at 35% 30%,#2f86ff,var(--bwg-blue) 60%,#0752c4) !important;
  color:#fff !important;font-size:12px !important;font-weight:800 !important;letter-spacing:.02em !important;
  border:0 !important;box-shadow:0 0 12px rgba(11,107,240,.55) !important;z-index:4 !important;
}

/* title (the reference has none; kept small so shoppers know what it is) */
html:root body ul.products li.product.product .woocommerce-loop-product__title{
  margin:10px 0 4px !important;padding:0 !important;
  font-size:12.5px !important;font-weight:700 !important;letter-spacing:.04em !important;
  color:#cfdcf0 !important;text-align:center !important;text-shadow:none !important;
}
html:root body ul.products li.product.product .woocommerce-loop-product__title a{color:inherit !important;}

/* prices: old price grey and struck, new price bright blue */
html:root body ul.products li.product.product .price{
  display:flex !important;justify-content:center !important;align-items:baseline !important;gap:12px !important;
  margin:4px 0 0 !important;padding:0 !important;text-shadow:none !important;
  font-size:20px !important;font-weight:800 !important;color:var(--bwg-blue-2) !important;
}
html:root body ul.products li.product.product .price del{
  order:0;margin:0 !important;opacity:1 !important;
  font-size:15px !important;font-weight:600 !important;color:#8792a6 !important;text-decoration:line-through !important;
}
html:root body ul.products li.product.product .price del .amount{color:inherit !important;}
html:root body ul.products li.product.product .price ins{
  order:1;text-decoration:none !important;background:none !important;
}
html:root body ul.products li.product.product .price ins,
html:root body ul.products li.product.product .price ins .amount,
html:root body ul.products li.product.product .price > .amount{
  color:var(--bwg-blue-2) !important;font-size:20px !important;font-weight:800 !important;text-shadow:none !important;
}

/* Add to cart: pill outline button under the price */
html:root body ul.products li.product.product .loop-button-wrap{
  position:static !important;inset:auto !important;transform:none !important;
  opacity:1 !important;visibility:visible !important;width:100% !important;min-width:0 !important;
  margin:12px 0 0 !important;padding:0 !important;background:none !important;
}
html:root body ul.products li.product.product .loop-button-wrap:empty,
html:root body ul.products li.product.product > .loop-button-wrap:not(:has(.button)){display:none !important;}
html:root body ul.products li.product.product .loop-button-wrap a.button,
html:root body ul.products li.product.product .loop-button-wrap .button,
html:root body ul.products li.product.product .loop-button-wrap a.add_to_cart_button{
  display:flex !important;align-items:center !important;justify-content:center !important;
  width:88% !important;max-width:240px !important;height:42px !important;margin:0 auto !important;padding:0 14px !important;
  border-radius:999px !important;border:1.5px solid #1d74ef !important;
  background:rgba(3,10,24,.7) !important;color:#dbe9ff !important;
  font-size:13.5px !important;font-weight:600 !important;letter-spacing:.05em !important;text-transform:uppercase !important;
  box-shadow:inset 0 0 12px rgba(29,116,239,.18) !important;text-shadow:none !important;
}
html:root body ul.products li.product.product .loop-button-wrap a.button:hover,
html:root body ul.products li.product.product .loop-button-wrap .button:hover{
  background:#0b6bf0 !important;border-color:#3d9bff !important;color:#fff !important;
}
html:root body ul.products li.product.product .loop-button-wrap .added_to_cart{
  display:block !important;position:static !important;transform:none !important;margin:8px auto 0 !important;
  font-size:12px !important;color:var(--bwg-blue-2) !important;
}
/* out of stock keeps its amber outline, in pill form */
html:root body ul.products li.product.product.outofstock .loop-button-wrap .button{
  border-color:#d99a2b !important;color:#f0b44c !important;box-shadow:none !important;
}

/* ---- single product page: same badges and button style ---- */
html:root body div.product.product span.onsale{
  transform:none !important;top:14px !important;left:14px !important;right:auto !important;width:auto !important;height:auto !important;
  min-height:0 !important;padding:6px 12px !important;line-height:1.1 !important;border-radius:10px !important;
  background:var(--bwg-red) !important;color:#fff !important;font-size:13px !important;font-weight:800 !important;clip-path:none !important;
}
html:root body div.product.product .woocommerce-product-gallery{
  background:var(--bwg-card) !important;border:1px solid var(--bwg-edge) !important;border-radius:18px !important;
}
html:root body div.product.product form.cart .single_add_to_cart_button,
html:root body .checkout-button,html:root body a.checkout-button,
html:root body #place_order{
  border-radius:999px !important;
}
html:root body a.button,html:root body button.button,html:root body input.button{
  border-radius:999px !important;
}

/* ---- panels (cart, checkout, contact, mini-cart) share the glass card ---- */
html:root body .cart_totals,html:root body .woocommerce-checkout-review-order,html:root body #bw-p2p-payment-panel,
html:root body .woocommerce-checkout #order_comments_field,
html:root body .bw-contact-wrap > div:first-of-type > div,html:root body .bw-contact-wrap > div:last-of-type,
html:root body table.shop_table{
  background:var(--bwg-card) !important;border:1px solid var(--bwg-edge) !important;border-radius:18px !important;
}

/* sort menu and fields: rounder to match */
html:root body .woocommerce-ordering select.orderby{border-radius:12px !important;background-color:rgba(7,15,31,.75) !important;border-color:var(--bwg-edge) !important;}

/* sections that painted a solid colour over the background */
html:root body .woocommerce-products-header,html:root body .site-content,html:root body #primary{background-color:transparent !important;}

/* ---- layout fixes found in the preview ---- */
html:root body ul.products li.product.product{height:auto !important;min-height:0 !important;}
html:root body ul.products li.product.product > *,html:root body ul.products li.product.product .loop-image-wrap > *{flex-shrink:0 !important;}
html:root body ul.products li.product.product .woocommerce-loop-product__title{height:auto !important;max-height:none !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;line-height:1.3 !important;}
/* buttons line up along the bottom of each row */
html:root body ul.products li.product.product .loop-image-wrap > .loop-button-wrap{margin-top:auto !important;padding-top:12px !important;}
html:root body ul.products li.product.product .loop-image-wrap > a{height:auto !important;min-height:0 !important;max-height:none !important;padding:0 !important;aspect-ratio:auto !important;flex-grow:0 !important;}
html:root body ul.products li.product.product img{height:auto !important;max-height:none !important;aspect-ratio:1/1 !important;}
html:root body ul.products li.product.product .loop-button-wrap > a.woocommerce-LoopProduct-link{display:none !important;}
html:root body ul.products li.product.product .loop-button-wrap{height:auto !important;min-height:0 !important;}
/* bigger badges on the wider desktop cards */
@media (min-width:1025px){
  html:root body ul.products li.product.product .onsale,html:root body ul.products li.product.product span.onsale{font-size:13px !important;padding:6px 12px !important;top:14px !important;left:14px !important;}
  html:root body ul.products li.product.product .loop-image-wrap::after{width:48px !important;height:48px !important;font-size:13px !important;top:12px !important;right:12px !important;}
  html:root body ul.products li.product.product .price,html:root body ul.products li.product.product .price ins,html:root body ul.products li.product.product .price ins .amount,html:root body ul.products li.product.product .price > .amount{font-size:22px !important;}
}
@media (min-width:1025px){
  html:root body ul.products li.product.product .onsale,html:root body ul.products li.product.product span.onsale{font-size:14px !important;padding:7px 13px !important;border-radius:10px !important;}
  html:root body ul.products li.product.product .loop-image-wrap::after{width:52px !important;height:52px !important;font-size:14px !important;}
}
/* product page price in the same bright blue */
html:root body div.product.product .summary .price ins,html:root body div.product.product .summary .price ins .amount,html:root body div.product.product .summary .price > .amount{color:var(--bwg-blue-2) !important;text-decoration:none !important;}

/* =====================================================================
 * Compact cards (owner: "vertical height as low as possible";
 * product photos will be swapped for transparent cut-outs, so the
 * photo box is short and the product is fitted inside it, not cropped)
 * ===================================================================== */
html:root body ul.products{row-gap:14px !important;column-gap:12px !important;}
html:root body ul.products li.product.product{padding:10px 10px 12px !important;}
html:root body ul.products li.product.product .loop-image-wrap > a{margin:0 !important;}
html:root body ul.products li.product.product img{
  aspect-ratio:4/3 !important;object-fit:contain !important;object-position:50% 50% !important;
  border-radius:10px !important;-webkit-mask-image:none !important;mask-image:none !important;
}
html:root body ul.products li.product.product .woocommerce-loop-product__title{
  margin:6px 0 0 !important;font-size:12px !important;line-height:1.3 !important;
  -webkit-line-clamp:1 !important;display:block !important;white-space:nowrap !important;text-overflow:ellipsis !important;overflow:hidden !important;
}
html:root body ul.products li.product.product .price{margin:2px 0 0 !important;gap:8px !important;line-height:1.2 !important;}
html:root body ul.products li.product.product .price,
html:root body ul.products li.product.product .price ins,
html:root body ul.products li.product.product .price ins .amount,
html:root body ul.products li.product.product .price > .amount{font-size:18px !important;}
html:root body ul.products li.product.product .price del{font-size:13px !important;}
html:root body ul.products li.product.product .loop-image-wrap > .loop-button-wrap{padding-top:8px !important;margin-top:auto !important;}
html:root body ul.products li.product.product .loop-button-wrap a.button,
html:root body ul.products li.product.product .loop-button-wrap .button,
html:root body ul.products li.product.product .loop-button-wrap a.add_to_cart_button{height:34px !important;font-size:12.5px !important;width:92% !important;}
/* badges: a bit smaller so they sit in the photo corners without hiding the product */
html:root body ul.products li.product.product .onsale,html:root body ul.products li.product.product span.onsale{top:8px !important;left:8px !important;padding:4px 8px !important;font-size:11px !important;border-radius:8px !important;}
html:root body ul.products li.product.product .loop-image-wrap::after{top:8px !important;right:8px !important;width:36px !important;height:36px !important;font-size:11px !important;}
@media (min-width:1025px){
  html:root body ul.products{row-gap:20px !important;column-gap:20px !important;}
  html:root body ul.products li.product.product{padding:12px 12px 14px !important;}
  html:root body ul.products li.product.product .woocommerce-loop-product__title{font-size:13px !important;}
  html:root body ul.products li.product.product .price,
  html:root body ul.products li.product.product .price ins,
  html:root body ul.products li.product.product .price ins .amount,
  html:root body ul.products li.product.product .price > .amount{font-size:20px !important;}
  html:root body ul.products li.product.product .price del{font-size:14px !important;}
  html:root body ul.products li.product.product .loop-button-wrap a.button,
  html:root body ul.products li.product.product .loop-button-wrap .button,
  html:root body ul.products li.product.product .loop-button-wrap a.add_to_cart_button{height:38px !important;font-size:13px !important;}
  html:root body ul.products li.product.product .onsale,html:root body ul.products li.product.product span.onsale{top:12px !important;left:12px !important;padding:5px 10px !important;font-size:12.5px !important;}
  html:root body ul.products li.product.product .loop-image-wrap::after{top:10px !important;right:10px !important;width:44px !important;height:44px !important;font-size:12.5px !important;}
}
/* wider cards (tablet/desktop): a shorter photo box still shows the whole product */
@media (min-width:768px){
  html:root body ul.products li.product.product img{aspect-ratio:16/10 !important;}
}


/* fix 1 (10 Oct): the card title was sized to its own text, so long names ran past
   the card's padding and were chopped off at the border with no ellipsis.
   Make it a full-width, shrinkable box that wraps to at most two lines. */
html:root body ul.products li.product.product .woocommerce-loop-product__title{
  width:100% !important;max-width:100% !important;min-width:0 !important;
  align-self:stretch !important;box-sizing:border-box !important;
  padding:0 2px !important;
  white-space:normal !important;text-overflow:clip !important;
  display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;
  overflow:hidden !important;overflow-wrap:anywhere !important;
}
html:root body ul.products li.product.product .price,
html:root body ul.products li.product.product .loop-button-wrap{width:100% !important;max-width:100% !important;min-width:0 !important;align-self:stretch !important;box-sizing:border-box !important;}


/* fix 2 (10 Oct): small issues found while testing the new look. */
/* checkout notes box was 2 rows tall, so its own placeholder text was cut off */
html:root body .woocommerce-checkout #order_comments{min-height:150px !important;resize:vertical !important;}
/* back-to-top matches the pill/round language of the rest of the look */
html:root body .back-to-top{border-radius:50% !important;}
/* mini-cart panel gets the same glass as the other panels */
html:root body .bw-mini-cart,html:root body .botiga-cart-dropdown,html:root body .widget_shopping_cart_content{background:var(--bwg-card) !important;border-color:var(--bwg-edge) !important;}


/* fix 3 (10 Oct): the photo slot was a wide, short box (4/3 on phones, 16/10 wider up),
   so a tall vial was limited by the box width and sat small with empty space either
   side. Give the slot a fixed height instead and let each product fill it top to
   bottom (object-fit:contain keeps the whole product visible, never cropped). */
html:root body ul.products li.product.product .loop-image-wrap > a{width:100% !important;}
html:root body ul.products li.product.product img{
  aspect-ratio:auto !important;
  height:158px !important;min-height:158px !important;max-height:158px !important;
  width:100% !important;object-fit:contain !important;object-position:center !important;
}
@media (min-width:768px){
  html:root body ul.products li.product.product img{height:178px !important;min-height:178px !important;max-height:178px !important;}
}
@media (min-width:1025px){
  html:root body ul.products li.product.product img{height:200px !important;min-height:200px !important;max-height:200px !important;}
}


/* fix 4 (10 Oct): owner asked for the product to sit lower in its slot and for a
   subtle grey frosted card. */
/* products stand on a common baseline at the bottom of the photo slot, so the
   empty space sits above the product instead of under it */
html:root body ul.products li.product.product img{
  object-position:50% 100% !important;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)) !important;
}
/* grey frosted panel: a dark base for text contrast, a light grey wash on top,
   and a real blur of the water behind it */
html:root body ul.products li.product.product{
  background-color:rgba(18,24,36,.52) !important;
  background-image:linear-gradient(180deg,rgba(196,206,222,.115),rgba(196,206,222,.05)) !important;
  -webkit-backdrop-filter:blur(10px) saturate(118%) !important;
          backdrop-filter:blur(10px) saturate(118%) !important;
  border:1px solid rgba(172,187,208,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 28px -14px rgba(0,0,0,.8) !important;
}
html:root body ul.products li.product.product:hover{
  background-color:rgba(24,32,48,.58) !important;
  background-image:linear-gradient(180deg,rgba(200,212,230,.155),rgba(200,212,230,.07)) !important;
  border-color:rgba(130,170,225,.46) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 12px 28px -14px rgba(0,0,0,.8),0 0 18px rgba(11,107,240,.20) !important;
}


/* fix 5 (10 Oct): polish.css still padded the card photo 14px/12px/56px (that padding was
   added this morning to clear the button that used to sit over the photo). In this look
   the button sits under the price, so the padding only shrank the product and blocked
   the bottom alignment. Extra .product repeats raise specificity above that rule. */
html:root body ul.products li.product.product.product img{
  padding:0 !important;box-sizing:border-box !important;
  object-fit:contain !important;object-position:50% 100% !important;
}
html:root body ul.products li.product.product .woocommerce-loop-product__title{margin-top:9px !important;}

/* ---- fix 6 (10 Oct 2026): cards match the reference mock-up: dark navy panel, thin glowing blue edge, outlined pill button. No backdrop-filter (cheap). ---- */
html:root body ul.products li.product.product{
  background-color:rgba(7,13,27,.78) !important;
  background-image:linear-gradient(180deg,rgba(40,70,120,.14),rgba(7,13,27,0) 55%) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border:1.5px solid rgba(34,105,230,.62) !important;
  border-radius:22px !important;
  box-shadow:0 0 0 1px rgba(20,60,140,.35),0 0 18px -2px rgba(30,100,235,.38),inset 0 0 22px rgba(25,80,190,.16) !important;
}
html:root body ul.products li.product.product:hover{
  background-color:rgba(9,17,34,.84) !important;
  border-color:rgba(70,150,255,.9) !important;
  box-shadow:0 0 0 1px rgba(40,100,200,.5),0 0 26px 0 rgba(40,120,255,.55),inset 0 0 26px rgba(30,95,210,.22) !important;
}
html:root body ul.products li.product.product .woocommerce-loop-product__title{color:#e9f1ff !important;}
html:root body ul.products li.product.product .price del,
html:root body ul.products li.product.product .price del .amount{color:#9aa6b8 !important;}
html:root body ul.products li.product.product .price ins,
html:root body ul.products li.product.product .price ins .amount,
html:root body ul.products li.product.product .price > .amount,
html:root body ul.products li.product.product .price > .amount bdi{color:#28b9f5 !important;font-weight:700 !important;}
html:root body ul.products li.product.product .onsale,
html:root body ul.products li.product.product span.onsale{
  background:#ec3441 !important;color:#fff !important;border:0 !important;border-radius:999px !important;
  box-shadow:0 2px 10px rgba(236,52,65,.35) !important;font-weight:700 !important;letter-spacing:.2px !important;
}
html:root body ul.products li.product.product .loop-image-wrap::after{
  background:#0b66ec !important;color:#fff !important;border:0 !important;
  box-shadow:0 0 14px rgba(11,102,236,.55) !important;
}
html:root body ul.products li.product.product .loop-button-wrap a.button,
html:root body ul.products li.product.product .loop-button-wrap .button,
html:root body ul.products li.product.product .loop-button-wrap a.add_to_cart_button{
  background:transparent !important;background-image:none !important;
  border:2px solid #1f6df0 !important;border-radius:999px !important;
  color:#7cc0ff !important;text-transform:uppercase !important;letter-spacing:1.4px !important;font-weight:600 !important;
  box-shadow:0 0 12px rgba(31,109,240,.28),inset 0 0 10px rgba(31,109,240,.12) !important;
}
html:root body ul.products li.product.product .loop-button-wrap a.button:hover,
html:root body ul.products li.product.product .loop-button-wrap .button:hover{
  background:rgba(31,109,240,.22) !important;color:#fff !important;border-color:#4a95ff !important;
  box-shadow:0 0 18px rgba(60,140,255,.55) !important;
}
/* fix 7 (10 Oct 2026): keep the photo clear of the SALE / RUO badges */
html:root body ul.products li.product.product.product.product img{padding:16px 14px 0 !important;box-sizing:border-box !important;}

/* fix 8: phones - more room above the photo so caps do not touch the badges */
@media (max-width:767px){html:root body ul.products li.product.product.product.product img{padding:34px 10px 0 !important;}}

/* fix 9 (10 Oct 2026): sold-out = red button + greyscale photo */
html:root body ul.products li.product.product.outofstock .loop-button-wrap .button,
html:root body ul.products li.product.product.outofstock .loop-button-wrap a.button,
html:root body ul.products li.product.product.outofstock .loop-button-wrap a.add_to_cart_button{
  border-color:#e5303c !important;color:#ff6b75 !important;background:rgba(229,48,60,.08) !important;
  box-shadow:0 0 12px rgba(229,48,60,.35),inset 0 0 10px rgba(229,48,60,.14) !important;
}
html:root body ul.products li.product.product.outofstock .loop-button-wrap .button:hover{
  border-color:#ff5560 !important;color:#fff !important;background:rgba(229,48,60,.2) !important;box-shadow:0 0 18px rgba(255,70,82,.55) !important;
}
html:root body ul.products li.product.product.outofstock img{
  filter:grayscale(1) brightness(.82) contrast(1.05) drop-shadow(0 6px 14px rgba(0,0,0,.5)) !important;opacity:.85 !important;
}
html:root body.single-product div.product.outofstock .woocommerce-product-gallery img{filter:grayscale(1) brightness(.85) !important;}

/* fix 10 (10 Oct 2026): water-ball splash on add to cart (see assets/splash.js). Old confetti hidden. */
.bw-confetti-wrap{display:none !important;}
.bw-splash{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:40;}
.bw-splash > i{position:absolute;display:block;pointer-events:none;will-change:transform,opacity;}
.bw-splash-ball{left:var(--ox);top:var(--oy);width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffffff 0,#bfe8ff 9%,#4aa8ff 38%,#1458d8 72%,#0a2f8f 100%);
  box-shadow:0 0 22px rgba(80,170,255,.9);transform:translate(-50%,-50%) scale(0);
  animation:bwBall 1.05s cubic-bezier(.3,.1,.2,1) forwards;}
.bw-splash-ring{left:var(--ox);top:var(--oy);width:44px;height:44px;border-radius:50%;border:4px solid rgba(200,238,255,.95);
  transform:translate(-50%,-50%) scale(0);opacity:0;animation:bwRing .8s ease-out .33s forwards;}
.bw-splash-ring2{border-width:2px;animation-delay:.45s;animation-duration:.9s;}
.bw-splash-drop{left:var(--ox);top:var(--oy);width:var(--sz);height:var(--sz);margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--c);box-shadow:0 0 8px rgba(120,200,255,.8);opacity:0;
  animation:bwDrop .75s cubic-bezier(.15,.7,.3,1) var(--dl) forwards;}
@keyframes bwBall{
  0%{transform:translate(-50%,-50%) scale(0);opacity:1;}
  22%{transform:translate(-50%,-50%) scale(1.15);}
  33%{transform:translate(-50%,-50%) scale(.9);}
  62%{transform:translate(-50%,-50%) scale(var(--S));opacity:1;}
  100%{transform:translate(-50%,-50%) scale(var(--S));opacity:0;}
}
@keyframes bwRing{0%{transform:translate(-50%,-50%) scale(.4);opacity:.95;}100%{transform:translate(-50%,-50%) scale(calc(var(--S) * .7));opacity:0;}}
@keyframes bwDrop{
  0%{transform:translate(0,0) scale(.4);opacity:1;}
  55%{transform:translate(var(--tx),var(--ty)) scale(1);opacity:1;}
  100%{transform:translate(calc(var(--tx) * 1.12),calc(var(--ty) + 70px)) scale(.5);opacity:0;}
}
html:root body ul.products li.product.product.bw-splash-hit{animation:bwHit .5s ease-out .33s;}
@keyframes bwHit{0%{transform:scale(1);}30%{transform:scale(.965);}65%{transform:scale(1.02);}100%{transform:scale(1);}}
/* fix 11 (10 Oct 2026): sold out = no SALE pill, greyscale RUO badge */
html:root body ul.products li.product.product.outofstock .onsale,
html:root body ul.products li.product.product.outofstock span.onsale{display:none !important;}
html:root body ul.products li.product.product.outofstock .loop-image-wrap::after{
  background:#4b525e !important;color:#c9ced6 !important;box-shadow:none !important;filter:grayscale(1) !important;
}
html:root body div.product.product.outofstock span.onsale{display:none !important;}
/* fix 12 (10 Oct 2026): grey water header + footer, catalog banner photo fades into the page */
:root{--bwg-water-grey:url("glass-water-grey.jpg?v=3");}
html:root body .bhfb-header .bhfb-row-wrapper.bhfb-below_header_row,
html:root body .bhfb-header .bhfb-row-wrapper.bhfb-main_header_row{
  background:linear-gradient(180deg,rgba(14,17,22,.40),rgba(8,10,14,.56)),var(--bwg-water-grey) 50% 38%/cover no-repeat !important;
  border-bottom:1px solid rgba(150,165,185,.20) !important;
}
html:root body footer.bhfb-footer .bhfb-row-wrapper.bhfb-main_footer_row{
  background:linear-gradient(180deg,rgba(14,17,22,.44),rgba(8,10,14,.60)),var(--bwg-water-grey) 50% 60%/cover no-repeat !important;
  border-top:1px solid rgba(150,165,185,.22) !important;
}
html:root body footer.bhfb-footer .bhfb-row-wrapper.bhfb-below_footer_row{
  background:linear-gradient(180deg,rgba(6,8,11,.62),rgba(6,8,11,.74)),var(--bwg-water-grey) 50% 90%/cover no-repeat !important;
  border-top:1px solid rgba(150,165,185,.14) !important;
}
html:root body #bw-legal-footer{background:rgba(7,9,12,.88) !important;border-top:1px solid rgba(150,165,185,.18) !important;}

/* catalog banner: photo moves to a masked layer so its top and bottom edges dissolve into the water */
html:root body .woocommerce-page-header.woocommerce-page-header{
  position:relative !important;background:none !important;isolation:isolate;
}
html:root body .woocommerce-page-header.woocommerce-page-header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,10,20,.60),rgba(5,10,20,.80)),url('https://britewatur.com/wp-content/uploads/2026/10/britewatur-banner-lab-clean.webp') center 47%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 48%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 48%,transparent 100%);
}
html:root body .woocommerce-page-header.woocommerce-page-header{padding-bottom:36px !important;}
/* fix 13 (10 Oct 2026): header = the blue water itself (transparent, so the fixed background shows through and flows into the catalog banner); banner fade starts lower; no logo glow; footer black & white */
html:root body .bhfb-header .bhfb-row-wrapper.bhfb-below_header_row,
html:root body .bhfb-header .bhfb-row-wrapper.bhfb-main_header_row{
  background:linear-gradient(180deg,rgba(2,6,14,.42),rgba(2,6,14,.18)) !important;
  border-bottom:0 !important;
}
html:root body .bhfb-header img.custom-logo,
html:root body .bhfb-header .custom-logo-link img{
  filter:brightness(1.55) saturate(1.2) !important;
}
html:root body .woocommerce-page-header.woocommerce-page-header::before{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 72%,transparent 100%);
}
html:root body footer.bhfb-footer .bhfb-row-wrapper.bhfb-main_footer_row{
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.86)),var(--bwg-water-grey) 50% 60%/cover no-repeat !important;
  border-top:1px solid rgba(190,190,190,.22) !important;
}
html:root body footer.bhfb-footer .bhfb-row-wrapper.bhfb-below_footer_row{
  background:#000 !important;border-top:1px solid rgba(190,190,190,.14) !important;
}
html:root body #bw-legal-footer{background:#000 !important;border-top:1px solid rgba(190,190,190,.14) !important;}
/* fix 14 (10 Oct 2026, recoloured): sale / grand opening banner = vivid electric blue so it stands out against the dark navy site */
html:root body #bw-grand-opening-banner#bw-grand-opening-banner{
  background:linear-gradient(90deg,#0a58d6,#1f8cf5 50%,#0a58d6) !important;color:#fff !important;
  border-bottom:1px solid rgba(160,210,255,.45) !important;box-shadow:0 2px 18px rgba(20,120,245,.35) !important;
}
html:root body #bw-grand-opening-banner#bw-grand-opening-banner .bw-mq-item,
html:root body #bw-grand-opening-banner#bw-grand-opening-banner .bw-mq-item b{color:#fff !important;}
html:root body #bw-grand-opening-banner#bw-grand-opening-banner .bw-mq-dot{color:#bfe0ff !important;}
html:root body #bw-grand-opening-banner#bw-grand-opening-banner .bw-cd{background:#04122b !important;color:#8fd8ff !important;}
html:root body #bw-grand-opening-banner#bw-grand-opening-banner #bw-banner-close,
html:root body #bw-grand-opening-banner#bw-grand-opening-banner button{
  background:linear-gradient(90deg,rgba(10,88,214,0),#0a58d6 40%) !important;color:#fff !important;
}

/* fix 15 (10 Oct 2026): cart rows keep one height - thumbnail sits in a fixed 100x72 box (tall vials no longer stretch the row) */
html:root body .woocommerce-cart-form td.product-thumbnail img,
html:root body .woocommerce-cart-form .product-thumbnail img.attachment-woocommerce_thumbnail{
  width:100px !important;max-width:100% !important;height:72px !important;object-fit:contain !important;object-position:50% 50% !important;display:block;
}