@charset "UTF-8";
/* ==========================================================================
   Wellness by Home — WooCommerce
   Alberta Indoor Comfort · v3.0.0

   Loaded only on WooCommerce views. Inherits every token from wbh.css, which
   is a hard dependency — this file defines no colors of its own.

   Commerce surface: Beyond Comfort (paperback / hardcover / free e-book) plus
   any IEQ product the shop carries. Offer schema for the book is emitted by
   inc/schema.php, not by WooCommerce's own generator, so the two must agree.
   ========================================================================== */


/* ==========================================================================
   01 SHOP SHELL
   ========================================================================== */
.woocommerce-page .wbh-shop{padding-block:var(--sp-8)}

.woocommerce .woocommerce-breadcrumb{
  font-size:13px;color:var(--ink-soft);margin-bottom:var(--sp-5);
}
.woocommerce .woocommerce-breadcrumb a{color:var(--ink-soft)}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--tan-dark)}

.woocommerce .woocommerce-products-header__title,
.woocommerce .product_title{
  font-family:var(--serif);color:var(--navy);
  font-size:var(--fs-h2);line-height:1.18;margin-bottom:var(--sp-4);
}

.woocommerce .woocommerce-result-count{
  font-size:13.5px;color:var(--ink-soft);font-style:italic;margin:0;
}
.woocommerce .woocommerce-ordering select{
  max-width:260px;font-size:14px;padding:10px 38px 10px 14px;
}
.wbh-shop__toolbar{
  display:flex;flex-wrap:wrap;gap:var(--sp-4);
  align-items:center;justify-content:space-between;
  padding-bottom:var(--sp-5);margin-bottom:var(--sp-7);
  border-bottom:1px solid var(--line);
}


/* ==========================================================================
   02 PRODUCT GRID
   ========================================================================== */
.woocommerce ul.products{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-6);list-style:none;margin:0;padding:0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none}

.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category{
  width:auto!important;margin:0!important;float:none!important;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:var(--tan);
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product-category a img{
  margin:0;width:100%;aspect-ratio:3/4;object-fit:cover;
  background:var(--bg-alt);
  transition:transform .5s var(--ease);
}
.woocommerce ul.products li.product:hover a img{transform:scale(1.03)}

.woocommerce ul.products li.product .wbh-product__body{
  padding:var(--sp-5);display:flex;flex-direction:column;
  gap:var(--sp-3);flex:1;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title{
  font-family:var(--serif);font-size:19px;font-weight:600;
  color:var(--navy);line-height:1.3;padding:0;margin:0;
}
.woocommerce ul.products li.product .wbh-product__excerpt{
  font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0;
}

/* Sale flash */
.woocommerce span.onsale{
  position:absolute;top:12px;left:12px;z-index:3;
  background:var(--tan);color:var(--navy);
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:2px;
  min-height:0;min-width:0;line-height:1.4;margin:0;
}
.woocommerce ul.products li.product{position:relative}


/* ==========================================================================
   03 PRICE
   ========================================================================== */
.woocommerce .price,
.woocommerce ul.products li.product .price{
  font-family:var(--serif);font-size:22px;font-weight:600;
  color:var(--navy);font-variant-numeric:tabular-nums;
  margin:0;line-height:1.2;display:block;
}
.woocommerce .price del{
  color:var(--graphite-faint);font-size:.72em;
  font-weight:400;margin-right:8px;opacity:1;
}
.woocommerce .price ins{
  background:none;color:var(--tan-dark);text-decoration:none;font-weight:700;
}
.woocommerce .price .woocommerce-Price-currencySymbol{font-size:.7em;vertical-align:super;margin-right:1px}

/* Free editions read as a word, not $0.00 */
.wbh-price-free{
  font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ok);
}


/* ==========================================================================
   04 BUTTONS — map Woo classes onto the theme button
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:14.5px;
  letter-spacing:.03em;line-height:1.3;
  padding:15px 26px;
  background:var(--navy);color:var(--cream);
  border:none;border-radius:var(--radius-sm);
  text-transform:none;text-shadow:none;
  transition:transform .15s var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  background:var(--navy-deep);color:var(--cream);transform:translateY(-1px);
}

/* Primary conversion action */
.woocommerce button.single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order{
  background:var(--tan);color:var(--navy);
  font-size:15.5px;padding:17px 32px;
}
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover{background:var(--tan-dark);color:var(--cream)}

.woocommerce a.button.wbh-btn--ghost{
  background:transparent;color:var(--navy);
  border:1.5px solid var(--line-strong);
}
.woocommerce a.button.wbh-btn--ghost:hover{background:rgba(27,54,93,.05);color:var(--navy)}

.woocommerce a.added_to_cart{
  display:inline-block;margin-top:var(--sp-2);
  font-size:13.5px;font-weight:600;color:var(--tan-dark);
  border-bottom:1px solid var(--tan);
}
.woocommerce .button.loading{opacity:.6;pointer-events:none}
.woocommerce .button.disabled,
.woocommerce button.disabled{opacity:.45;cursor:not-allowed;transform:none!important}


/* ==========================================================================
   05 SINGLE PRODUCT
   ========================================================================== */
.woocommerce div.product{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--sp-9);align-items:start}
.woocommerce div.product .woocommerce-product-gallery{width:100%;float:none;margin:0}
.woocommerce div.product .woocommerce-product-gallery img{border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.woocommerce div.product .summary{width:100%;float:none;margin:0}

.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:16.5px;line-height:1.7;color:var(--ink);
  margin-block:var(--sp-5);max-width:58ch;
}
.woocommerce div.product form.cart{margin-block:var(--sp-6)}
.woocommerce div.product form.cart div.quantity{
  display:inline-flex;align-items:center;margin-right:var(--sp-3);
}
.woocommerce .quantity input.qty{
  width:74px;text-align:center;padding:14px 8px;
  font-variant-numeric:tabular-nums;
}
.woocommerce div.product .product_meta{
  font-size:13px;color:var(--ink-soft);
  padding-top:var(--sp-5);margin-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.woocommerce div.product .product_meta a{color:var(--navy)}

/* Variations */
.woocommerce div.product form.cart .variations{margin-bottom:var(--sp-5);border:0}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{
  padding:var(--sp-2) 0;border:0;vertical-align:middle;
}
.woocommerce div.product form.cart .variations label{
  font-size:12.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--navy);
}
.woocommerce div.product form.cart .reset_variations{
  font-size:13px;color:var(--ink-soft);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs{grid-column:1/-1;margin-top:var(--sp-8)}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  padding:0;margin:0 0 var(--sp-6);
  display:flex;flex-wrap:wrap;gap:var(--sp-5);
  border-bottom:1px solid var(--line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{content:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none;border:0;border-radius:0;padding:0;margin:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{content:none;border:0;box-shadow:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:14px 0;
  font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{
  color:var(--navy);border-bottom-color:var(--tan);
}
.woocommerce div.product .woocommerce-tabs .panel{
  max-width:var(--maxw-text);padding:0;margin:0;
}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:var(--fs-h3);margin-bottom:var(--sp-4)}


/* ==========================================================================
   06 REVIEWS
   WHY: GSC Search Appearance reported 2,101 Review-snippet impressions at 0
   clicks — Google is attempting review rich results for this domain. Reviews
   must render with valid markup for that to ever resolve.
   ========================================================================== */
.woocommerce #reviews #comments ol.commentlist{padding:0;margin:0;list-style:none}
.woocommerce #reviews #comments ol.commentlist li{
  padding:var(--sp-5) 0;margin:0;border-bottom:1px solid var(--line);
}
.woocommerce #reviews #comments ol.commentlist li .comment-text{
  border:0;padding:0;margin:0;border-radius:0;
}
.woocommerce #reviews #comments ol.commentlist li img.avatar{
  width:44px;height:44px;border-radius:50%;
  position:static;float:left;margin-right:var(--sp-4);
  padding:0;border:0;background:none;
}
.woocommerce #reviews .comment-text p.meta{
  font-size:13px;color:var(--ink-soft);margin-bottom:var(--sp-2);
}
.woocommerce #reviews .comment-text p.meta strong{color:var(--navy)}

.woocommerce .star-rating{
  font-size:15px;letter-spacing:2px;color:var(--tan);
  height:1.2em;line-height:1.2;overflow:hidden;position:relative;
  width:5.8em;font-family:star;
}
.woocommerce .star-rating::before{color:var(--line-strong)}
.woocommerce p.stars a{color:var(--tan)}
.woocommerce .woocommerce-product-rating{margin-bottom:var(--sp-4)}
.woocommerce .woocommerce-review-link{font-size:13.5px;color:var(--ink-soft)}


/* ==========================================================================
   07 CART
   ========================================================================== */
.woocommerce table.shop_table{
  border:1px solid var(--line);border-radius:var(--radius);
  border-collapse:separate;border-spacing:0;overflow:hidden;
  background:var(--cream);
}
.woocommerce table.shop_table th{
  background:var(--bg-alt);
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--navy);
  padding:16px 18px;text-align:left;border:0;
}
.woocommerce table.shop_table td{
  padding:18px;border:0;border-top:1px solid var(--line);
  vertical-align:middle;font-size:15px;
}
.woocommerce table.shop_table img{width:64px;border-radius:var(--radius-sm)}
.woocommerce a.remove{
  color:var(--err)!important;font-size:20px;line-height:1;
  width:26px;height:26px;
}
.woocommerce a.remove:hover{background:var(--err);color:#fff!important}

.woocommerce .cart-collaterals .cart_totals{width:100%;float:none}
.woocommerce .cart_totals h2{font-size:var(--fs-h3);margin-bottom:var(--sp-4)}
.woocommerce-cart .cart-collaterals{
  display:grid;grid-template-columns:1fr minmax(0,420px);
  gap:var(--sp-8);margin-top:var(--sp-7);
}
.woocommerce .coupon{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.woocommerce .coupon input.input-text{max-width:220px}


/* ==========================================================================
   08 CHECKOUT
   ========================================================================== */
.woocommerce-checkout .col2-set{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:100%;float:none}
.woocommerce-checkout h3{font-size:var(--fs-h3);margin-bottom:var(--sp-5)}

.woocommerce form .form-row{
  display:grid;gap:7px;margin:0 0 var(--sp-4);padding:0;
}
.woocommerce form .form-row label{
  font-size:12.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--navy);
}
.woocommerce form .form-row .required{color:var(--tan-dark);border:0}
.woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:var(--err)}
.woocommerce form .form-row.woocommerce-validated input.input-text{border-color:var(--ok)}

.woocommerce-checkout #order_review,
.woocommerce-checkout-review-order{
  background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--sp-6);
}
.woocommerce-checkout #payment{background:none;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{
  border:0;padding:0;margin:0 0 var(--sp-5);list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li{
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line);
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--bg-alt);border-radius:var(--radius-sm);
  font-size:14px;color:var(--ink);margin-top:var(--sp-3);
}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--bg-alt)}

/* CASL — express consent is a legal requirement, not a nicety */
.wbh-woo-consent{
  margin-top:var(--sp-5);padding-top:var(--sp-5);
  border-top:1px solid var(--line);
  font-size:13px;line-height:1.6;color:var(--ink-soft);
}


/* ==========================================================================
   09 MESSAGES
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews{
  background:var(--bg-alt);
  border-top:0;border-left:3px solid var(--tan);
  border-radius:var(--radius-sm);
  padding:16px 20px;margin:0 0 var(--sp-6);
  font-size:14.5px;line-height:1.6;color:var(--ink);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  list-style:none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{content:none}
.woocommerce-message{border-left-color:var(--ok)}
.woocommerce-error{border-left-color:var(--err);color:var(--err)}
.woocommerce-message .button,
.woocommerce-info .button{margin-left:auto;padding:10px 18px;font-size:13px}


/* ==========================================================================
   10 ACCOUNT
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation{
  width:100%;float:none;margin-bottom:var(--sp-6);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
  border-bottom:1px solid var(--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:12px 16px;
  font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);
  border-bottom:2px solid transparent;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  color:var(--navy);border-bottom-color:var(--tan);
}
.woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none}


/* ==========================================================================
   11 RELATED / UPSELL
   ========================================================================== */
.woocommerce .related,
.woocommerce .upsells,
.woocommerce .cross-sells{grid-column:1/-1;margin-top:var(--sp-9)}
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2{
  font-size:var(--fs-h3);margin-bottom:var(--sp-6);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);
}


/* ==========================================================================
   12 RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
  .woocommerce div.product{grid-template-columns:1fr;gap:var(--sp-7)}
  .woocommerce-cart .cart-collaterals{grid-template-columns:1fr}
  .woocommerce-checkout .col2-set{grid-template-columns:1fr;gap:var(--sp-7)}
}

@media (max-width:720px){
  .woocommerce ul.products{grid-template-columns:1fr;gap:var(--sp-4)}
  .woocommerce ul.products li.product a img,
  .woocommerce ul.products li.product-category a img{aspect-ratio:16/10} /* 3:4 portraits ran 517px tall on a phone */
  .woocommerce ul.products li.product-category .woocommerce-loop-category__title{padding:var(--sp-4) var(--sp-5)}
  .wbh-shop__toolbar{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  .woocommerce .woocommerce-ordering select{max-width:100%}

  /* Stack the cart table into rows — the default table blows out 320px screens */
  .woocommerce table.shop_table_responsive thead{display:none}
  .woocommerce table.shop_table_responsive tr{
    display:block;border-bottom:1px solid var(--line);padding:var(--sp-3) 0;
  }
  .woocommerce table.shop_table_responsive td{
    display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
    border:0;padding:8px var(--sp-4);text-align:right;
  }
  .woocommerce table.shop_table_responsive td::before{
    content:attr(data-title);
    font-size:12px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--navy);text-align:left;
  }
  .woocommerce .coupon input.input-text{max-width:100%}
  .woocommerce .coupon,
  .woocommerce .coupon .button{width:100%}
}

/* ==========================================================================
   13 MOBILE COMMERCE (added 2026-09-16 after measuring a phone)
   ========================================================================== */
/* FlexSlider lays its track out at slide-count x width: 1384px inside a 346px column.
   Nothing clipped it, so the gallery bled past the viewport edge. */
.woocommerce-product-gallery{overflow:hidden}
.woocommerce-product-gallery__wrapper{max-width:100%}
/* The zoom plugin re-inserts this overlay with inline styles, so display alone does not
   stop it swallowing every click on the photograph. */
.woocommerce-product-gallery .zoomImg{display:none!important;pointer-events:none!important}

/* 44px minimums on the controls that complete a purchase. */
.woocommerce .quantity .qty,
.woocommerce .quantity input[type=button],
.woocommerce .quantity button{min-height:44px}
.woocommerce .single_add_to_cart_button,
.woocommerce a.button,.woocommerce button.button{min-height:48px}

@media (max-width:720px){
  /* Woo prints price, then the full short description, then the cart. On this catalogue that
     description is 378px, so Add to cart landed at y=1513 - nearly four screens down. Price and
     the buy action come first; the description follows them. */
  .woocommerce div.product .summary{display:flex;flex-direction:column}
  .woocommerce div.product .summary .price{order:1}
  .woocommerce div.product .summary form.cart{order:2}
  .woocommerce div.product .summary .wbh-product__quote{order:2}
  .woocommerce div.product .summary .wbh-product__trust{order:3}
  .woocommerce div.product .summary .woocommerce-product-details__short-description{order:4}
  .woocommerce div.product .summary .product_meta{order:5}
}


/* ==========================================================================
   14 BUY BOX (single product)
   One bordered card holds price, availability, fulfilment and both actions, so the
   decision reads as a single object. Sticky on desktop: the gallery and the long
   description are tall, and the action must not scroll away while they are read.
   ========================================================================== */
.wbh-buy{
  border:1px solid var(--line);
  border-radius:var(--radius, 10px);
  background:#fff;
  padding:var(--sp-5);
  margin-bottom:var(--sp-6);
}
.woocommerce div.product .summary .wbh-buy .price{margin:0 0 6px}

.wbh-buy__stock{
  margin:0 0 var(--sp-2);
  font-size:15px;font-weight:600;
  color:#1E7B41; /* 4.9:1 on white */
}
.wbh-buy__stock.is-out{color:#A32821}

.wbh-buy__ship{
  margin:0 0 var(--sp-4);
  font-size:14px;line-height:1.5;color:var(--ink-soft);
}

/* Add to cart is the committed action; Buy now sits beneath it as the shortcut. */
.woocommerce div.product .wbh-buy form.cart{margin:0}
.woocommerce div.product .wbh-buy .single_add_to_cart_button{
  width:100%;
  display:block;
  text-align:center;
}
.wbh-buy__now{
  width:100%;
  display:block;
  margin-top:10px;
  min-height:48px;
  background:var(--navy);
  color:#fff;
  border:0;
  border-radius:999px;
  font-weight:700;
  font-size:16px;
  cursor:pointer;
}
.wbh-buy__now:hover,.wbh-buy__now:focus-visible{background:#16294a}

/* Quantity above the buttons rather than beside them: a 2-up row squeezed the
   button to 140px on a phone, and quantity is changed far less often than it is read. */
.woocommerce div.product .wbh-buy .quantity{
  display:block;
  margin:0 0 var(--sp-3);
}
.woocommerce div.product .wbh-buy .quantity .qty{
  width:88px;
  text-align:center;
}

.wbh-buy__about{margin:0 0 var(--sp-6)}
.wbh-buy__about h2{
  font-size:var(--fs-h4, 19px);
  margin:0 0 var(--sp-3);
}
.wbh-buy__about ul{
  margin:0;padding-left:1.15em;
  list-style:disc;
}
.wbh-buy__about li{
  margin-bottom:8px;
  line-height:1.6;
  color:var(--ink);
}

/* The buy box does NOT stick. The description and specification tables below the two
   columns run full width and scrolled straight under a stuck summary, so the price and
   both buttons sat on top of the specs. A column that overlaps the content beneath it
   is worse than one that scrolls away. */

@media (max-width:720px){
  /* The buy box carries price and both actions, so it is the first thing after the gallery. */
  .woocommerce div.product .summary .wbh-buy{order:1}
  .woocommerce div.product .summary .wbh-buy__about{order:2}
  .woocommerce div.product .summary .wbh-product__quote{order:2}
  .woocommerce div.product .summary .woocommerce-product-details__short-description{order:4}
  .woocommerce div.product .summary .product_meta{order:5}
  .wbh-buy{padding:var(--sp-4)}
}

/* Woo prints its own availability paragraph inside the same box; one statement is enough. */
.wbh-buy p.stock{display:none}
.wbh-buy__backorder{margin:0 0 var(--sp-3);font-size:14px;line-height:1.5;color:var(--ink-soft)}
.wbh-buy__ask{width:100%;display:block;text-align:center}

/* A grid child's automatic minimum is min-content. The variations <table> takes its
   min-content from the longest <option> ("30,000 BTU ..."), which pushed .summary to
   561px inside a 346px column. The column is told it may shrink; the table wraps. */
.woocommerce div.product > *{min-width:0}
.woocommerce div.product table.variations{width:100%;table-layout:fixed;margin:0 0 var(--sp-4)}
.woocommerce div.product table.variations th,
.woocommerce div.product table.variations td{display:block;width:100%;padding:0;text-align:left}
.woocommerce div.product table.variations th{
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--navy);margin-bottom:6px;
}
.woocommerce div.product table.variations select{width:100%;max-width:100%;min-height:48px}
.woocommerce div.product .reset_variations{display:inline-block;margin-top:8px;font-size:13px}
.woocommerce div.product .woocommerce-variation-price{margin-bottom:var(--sp-3);font-size:22px;font-weight:700}


/* ==========================================================================
   15 SHOP LANDING
   ========================================================================== */
.wbh-shop__promises{
  grid-column:1/-1;
  list-style:none;margin:0 0 var(--sp-7);padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);
}
.wbh-shop__promises li{
  min-width:0;
  padding:var(--sp-4) var(--sp-5);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius, 10px);
  border-top:3px solid var(--gold);
}
.wbh-shop__promises strong{display:block;margin-bottom:4px;font-size:15px;color:var(--navy)}
.wbh-shop__promises span{display:block;font-size:14px;line-height:1.5;color:var(--ink-soft)}

.wbh-shop__heading{
  grid-column:1/-1;
  font-size:var(--fs-h3);margin:0 0 var(--sp-2);
}
.wbh-shop__heading-sub{
  grid-column:1/-1;
  margin:0 0 var(--sp-5);font-size:15px;color:var(--ink-soft);max-width:60ch;
}
.wbh-shop__featured{grid-column:1/-1;margin-top:var(--sp-9)}
.wbh-shop__featured .products{margin-top:0}

.wbh-shop__help{
  grid-column:1/-1;margin-top:var(--sp-9);
  padding:var(--sp-7);
  background:var(--navy);color:#fff;
  border-radius:var(--radius, 10px);
}
.wbh-shop__help h2{color:#fff;font-size:var(--fs-h3);margin:0 0 var(--sp-3)}
.wbh-shop__help p{color:rgba(255,255,255,.88);margin:0 0 var(--sp-5);max-width:58ch;line-height:1.6}
.wbh-shop__help-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:0}
.wbh-shop__help .wbh-btn--ghost{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);
}
.wbh-shop__help .wbh-btn--ghost:hover,
.wbh-shop__help .wbh-btn--ghost:focus-visible{background:rgba(255,255,255,.12);border-color:#fff}

@media (max-width:1024px){
  .wbh-shop__promises{grid-template-columns:1fr;gap:var(--sp-3)}
}
@media (max-width:720px){
  .wbh-shop__help{padding:var(--sp-5)}
  .wbh-shop__help-actions .wbh-btn{width:100%;text-align:center}
}

/* Two navy buttons of different shapes read as one confused control. Add to cart is the
   page's primary action and takes the CTA gold; Buy now is the shortcut beneath it. */
.woocommerce div.product .wbh-buy .single_add_to_cart_button{
  background:var(--gold);color:var(--navy);
  border-radius:999px;font-weight:700;font-size:16px;
}
.woocommerce div.product .wbh-buy .single_add_to_cart_button:hover,
.woocommerce div.product .wbh-buy .single_add_to_cart_button:focus-visible{background:var(--gold-dark)}
.wbh-buy__about-text p{margin:0 0 var(--sp-3);line-height:1.65}
.wbh-buy__about-text p:last-child{margin-bottom:0}

/* The lightbox trigger is styled in section 22, where the gallery lives. These rules
   hid it (with !important, and again under 720px) back when the lightbox was disabled;
   they outranked the new styling and left the button 0x0. */
.woocommerce div.product .woocommerce-product-gallery{position:relative}


/* ==========================================================================
   16 STOREFRONT
   A department-store layout in the brand's own colours: a navy utility bar with
   search and departments, then white cards on a light ground, tight radii and
   small type. Dense and scannable rather than airy - a catalogue is browsed, not
   read, and the visitor is looking for a thing they already have in mind.
   ========================================================================== */

/* --- utility bar --- */
.wbh-shopbar{
  grid-column:1/-1;
  margin:0 0 var(--sp-5);
  background:var(--navy);
  border-radius:6px;
}
.wbh-shopbar__inner{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:10px 14px;
  flex-wrap:wrap;
}
.wbh-shopbar__search{
  display:flex;flex:1 1 300px;min-width:0;
  background:#fff;border-radius:5px;overflow:hidden;
}
.wbh-shopbar__search input[type=search]{
  flex:1 1 auto;min-width:0;
  border:0;background:transparent;
  padding:0 12px;min-height:42px;
  font-size:15px;color:var(--ink);
}
.wbh-shopbar__search input[type=search]:focus{outline:2px solid var(--gold);outline-offset:-2px}
.wbh-shopbar__search button{
  flex:0 0 auto;width:52px;min-height:42px;
  display:flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;
  background:var(--gold);color:var(--navy);
}
.wbh-shopbar__search button:hover{background:var(--gold-dark)}

.wbh-shopbar__depts ul{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;
  margin:0;padding:0;list-style:none;
}
.wbh-shopbar__depts a{
  display:flex;align-items:center;min-height:40px;
  padding:0 10px;border-radius:4px;
  font-size:14px;font-weight:500;color:rgba(245,239,230,.92);
}
.wbh-shopbar__depts a:hover,
.wbh-shopbar__depts a:focus-visible{background:rgba(255,255,255,.12);color:#fff}
.wbh-shopbar__depts a.is-current{color:var(--gold)}

/* --- department cards ---
   Four across on a light ground, each a short white card: the department name, four
   real things inside it with their own photographs, and the way in. A shopper scans
   pictures, not category names. */
.woocommerce ul.products li.product-category{
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px;
  display:flex;flex-direction:column;
  min-width:0;
}
.woocommerce ul.products li.product-category > a{
  display:block;
  order:1;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title{
  padding:0 0 10px;
  font-size:18px;line-height:1.25;font-weight:700;color:var(--navy);
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count{display:none}
.woocommerce ul.products li.product-category > .wbh-dept__tiles{order:2}
.woocommerce ul.products li.product-category > .wbh-cat__all{order:3}

.wbh-dept__tiles{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.wbh-dept__tile{
  display:flex;flex-direction:column;min-width:0;
  color:var(--ink-soft);
}
.wbh-dept__tile:hover .wbh-dept__label{color:var(--navy);text-decoration:underline}
.wbh-dept__img{
  display:block;width:100%;aspect-ratio:1/1;
  object-fit:cover;background:#F3F5F7;border-radius:3px;
}
.wbh-dept__img--empty{background:repeating-linear-gradient(45deg,#eef1f4,#eef1f4 8px,#e6eaee 8px,#e6eaee 16px)}
.wbh-dept__label{
  display:block;margin-top:6px;
  font-size:12.5px;line-height:1.3;
  /* Two lines, then stop: four cells of differing label length must stay level. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wbh-cat__all{
  display:flex;align-items:center;
  margin-top:auto;padding-top:12px;
  min-height:34px;
  font-size:13.5px;font-weight:700;color:var(--navy);
}
.wbh-cat__all:hover{color:var(--gold-dark);text-decoration:underline}

/* Four across is what makes the page read as a storefront rather than a brochure. */
.woocommerce-shop ul.products{grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}

/* --- product cards in the storefront rows --- */
.wbh-shop__featured ul.products li.product{
  background:#fff;border:1px solid var(--line);border-radius:6px;
}
.wbh-shop__featured ul.products li.product .price{
  font-size:21px;font-weight:700;color:var(--navy);
}

@media (max-width:1024px){
  .woocommerce ul.products li.product-category img{height:170px}
}
@media (max-width:720px){
  .wbh-shopbar__inner{padding:10px}
  .wbh-shopbar__depts{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wbh-shopbar__depts ul{flex-wrap:nowrap}
  .wbh-shopbar__depts a{white-space:nowrap}
  .woocommerce ul.products li.product-category img{height:150px}
}


/* The storefront opens on its own utility bar, so the section's standard top padding
   read as a 135px empty band between the page head and the first control. */
.woocommerce-shop .wbh-section--cream,
.tax-product_cat .wbh-section--cream{padding-top:var(--sp-6)}


/* The storefront ground: cards have to sit on something slightly darker than the card
   or the grid dissolves into one white field. */
.woocommerce-shop .wbh-section--cream,
.tax-product_cat .wbh-section--cream{background:#EEF1F4}

/* Storefront product cards: compact, image-led, price loud, one action. */
.wbh-shop__featured ul.products li.product,
.tax-product_cat ul.products li.product{
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px;
}
.wbh-shop__featured ul.products li.product .woocommerce-loop-product__title{
  font-size:15px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wbh-shop__featured ul.products li.product .wbh-product__excerpt{
  font-size:13px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wbh-shop__featured ul.products li.product .price{font-size:21px;font-weight:700;color:var(--navy)}
.wbh-shop__featured ul.products{grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}

@media (max-width:1180px){
  .woocommerce-shop ul.products,
  .wbh-shop__featured ul.products{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .woocommerce-shop ul.products,
  .wbh-shop__featured ul.products{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .woocommerce-shop ul.products,
  .wbh-shop__featured ul.products{grid-template-columns:1fr}
  .wbh-dept__label{font-size:12px}
}


/* ==========================================================================
   17 EQUIPMENT SHOWCASE
   The same card as a product, minus the cart: this equipment is quoted, not
   bought over the counter, so the action is "see details" and the price line
   says so rather than leaving a blank where a price belongs.
   ========================================================================== */
.wbh-shop__showcase{grid-column:1/-1;margin-top:var(--sp-9)}
.wbh-shop__showcase ul.products{grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.woocommerce ul.products li.product.wbh-showcase{
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px;
  display:flex;flex-direction:column;min-width:0;
}
.wbh-showcase__link{display:flex;flex-direction:column;min-width:0}
.wbh-showcase__img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:#F3F5F7;border-radius:4px;margin:0 0 10px;
}
.wbh-showcase__img--empty{background:repeating-linear-gradient(45deg,#eef1f4,#eef1f4 8px,#e6eaee 8px,#e6eaee 16px)}
.wbh-showcase .woocommerce-loop-product__title{
  font-size:15px;line-height:1.35;margin:0 0 6px;color:var(--navy);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wbh-showcase .wbh-product__excerpt{
  font-size:13px;line-height:1.45;margin:0 0 10px;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.wbh-showcase .wbh-price-quote{
  display:block;margin:0 0 10px;
  font-size:14px;font-weight:700;color:var(--navy);
}
.wbh-showcase .wbh-btn{margin-top:auto;text-align:center}
.wbh-shop__more{grid-column:1/-1;margin:var(--sp-5) 0 0}
.wbh-shop__more a{font-weight:700;color:var(--navy)}
.wbh-shop__more a:hover{color:var(--gold-dark);text-decoration:underline}

@media (max-width:1180px){ .wbh-shop__showcase ul.products{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ .wbh-shop__showcase ul.products{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .wbh-shop__showcase ul.products{grid-template-columns:1fr} }


/* ==========================================================================
   18 CATEGORY NAVIGATION
   A department archive needs a way down into its sub-departments and a way to
   narrow by manufacturer. Both rows are chips: small, scannable, and countable.
   ========================================================================== */
.wbh-catnav{
  grid-column:1/-1;
  margin:0 0 var(--sp-5);
  padding:14px 16px;
  background:#fff;border:1px solid var(--line);border-radius:6px;
}
.wbh-catnav__row{
  display:flex;align-items:flex-start;gap:12px;
  padding:6px 0;
  flex-wrap:wrap;
}
.wbh-catnav__row + .wbh-catnav__row{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.wbh-catnav__label{
  flex:0 0 auto;
  padding-top:8px;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);
}
.wbh-catnav ul{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0;padding:0;list-style:none;
}
.wbh-catnav a{
  display:flex;align-items:center;gap:6px;
  min-height:36px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;
  font-size:14px;color:var(--navy);background:#fff;
}
.wbh-catnav a:hover,.wbh-catnav a:focus-visible{border-color:var(--navy);background:#F3F6F9}
.wbh-catnav a.is-current{background:var(--navy);border-color:var(--navy);color:#fff}
.wbh-catnav a b{font-weight:600;color:var(--ink-soft);font-size:12.5px}
.wbh-catnav a.is-current b{color:rgba(255,255,255,.8)}

@media (max-width:720px){
  .wbh-catnav{padding:12px}
  .wbh-catnav__row{flex-direction:column;gap:8px}
  .wbh-catnav__label{padding-top:0}
  .wbh-catnav ul{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .wbh-catnav a{white-space:nowrap}
}


/* ==========================================================================
   19 VIEW TOGGLE + LIST VIEW
   List view turns each card on its side: picture left, name and description right,
   the action at the end. It is the view for comparing models down a column.
   ========================================================================== */
.wbh-viewtoggle{
  grid-column:1/-1;
  display:flex;align-items:center;gap:6px;
  margin:0 0 var(--sp-4);
}
.wbh-viewtoggle__label{
  margin-right:4px;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);
}
.wbh-viewtoggle button{
  display:inline-flex;align-items:center;gap:6px;
  min-height:38px;padding:0 12px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;
}
.wbh-viewtoggle button:hover{border-color:var(--navy);color:var(--navy)}
.wbh-viewtoggle button[aria-pressed="true"]{
  background:var(--navy);border-color:var(--navy);color:#fff;
}

/* The card rules carry four classes, so the list rules have to match or beat them or
   nothing changes when the toggle is pressed. */
body.wbh-view-list ul.products{grid-template-columns:1fr!important;gap:10px}
body.wbh-view-list .woocommerce ul.products li.product,
body.wbh-view-list ul.products li.product.wbh-showcase,
body.wbh-view-list ul.products li.product{
  display:grid!important;
  grid-template-columns:172px minmax(0,1fr) auto;
  align-items:center;gap:18px;
  padding:14px;text-align:left;
}
body.wbh-view-list ul.products li.product .wbh-showcase__link,
body.wbh-view-list ul.products li.product > a.woocommerce-LoopProduct-link{
  display:contents!important;
}
body.wbh-view-list ul.products li.product img,
body.wbh-view-list ul.products li.product .wbh-showcase__img{
  width:172px!important;height:126px!important;
  object-fit:cover;margin:0!important;aspect-ratio:auto!important;
}
body.wbh-view-list ul.products li.product .woocommerce-loop-product__title{
  -webkit-line-clamp:2;margin:0 0 4px!important;font-size:16px;text-align:left;
}
body.wbh-view-list ul.products li.product .wbh-product__excerpt{
  -webkit-line-clamp:2;margin:0!important;text-align:left;
}
body.wbh-view-list ul.products li.product .wbh-product__body{display:contents}
body.wbh-view-list ul.products li.product .price,
body.wbh-view-list ul.products li.product .wbh-price-quote,
body.wbh-view-list ul.products li.product .wbh-btn{
  margin:0!important;align-self:center;white-space:nowrap;
}

@media (max-width:720px){
  body.wbh-view-list ul.products li.product{
    grid-template-columns:96px 1fr;
    align-items:start;gap:12px;
  }
  body.wbh-view-list ul.products li.product img,
  body.wbh-view-list .wbh-showcase__img{width:96px;height:80px;grid-row:span 1}
  body.wbh-view-list .wbh-btn{grid-column:1/-1;width:100%;text-align:center}
  .wbh-viewtoggle{flex-wrap:wrap}
}


/* ==========================================================================
   20 TRUST SIGNALS
   One icon set, one stroke weight, one size per context. The icons carry no
   meaning on their own, so each is hidden from assistive technology and the
   words do the work.
   ========================================================================== */
.wbh-icon{flex:0 0 auto;display:block;color:var(--gold-dark)}

.wbh-trust{
  list-style:none;margin:0;padding:0;
  display:grid;gap:10px;
}
.wbh-trust li{
  display:flex;align-items:flex-start;gap:10px;
  min-width:0;
}
.wbh-trust__text{display:block;min-width:0}
.wbh-trust__text strong{
  display:block;
  font-size:14px;font-weight:600;color:var(--navy);line-height:1.35;
}
.wbh-trust__text em{
  display:block;margin-top:1px;
  font-style:normal;font-size:13px;line-height:1.45;color:var(--ink-soft);
}

/* In the buy box it sits under the actions, so it stays quiet. */
.wbh-trust--buybox{margin-top:var(--sp-4);gap:7px}
.wbh-trust--buybox .wbh-trust__text strong{font-size:13.5px;font-weight:500;color:var(--ink-soft)}
.wbh-trust--buybox .wbh-icon{color:var(--ink-soft)}

/* On an archive it is a row of three, above the grid. */
.wbh-trust--archive{
  grid-column:1/-1;
  grid-template-columns:repeat(3,1fr);
  margin:0 0 var(--sp-5);padding:14px 16px;
  background:#fff;border:1px solid var(--line);border-radius:6px;
}

.wbh-trust--cart{margin:0 0 var(--sp-4)}

/* The storefront promises now lead with an icon. */
.wbh-shop__promises li{display:flex;align-items:flex-start;gap:12px}
.wbh-shop__promises li > span{display:block;min-width:0}

@media (max-width:900px){
  .wbh-trust--archive{grid-template-columns:1fr;gap:12px}
}


/* ==========================================================================
   21 EQUIPMENT PAGE FIELDS
   Content the previous theme rendered and this one dropped: price, availability,
   the written detail, and video. Lives at the top of .wbh-content.
   ========================================================================== */
.wbh-pf{margin:0 0 var(--sp-7)}

.wbh-pf__facts{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-3) var(--sp-6);
  padding:14px 18px;margin:0 0 var(--sp-5);
  background:#fff;border:1px solid var(--line);border-radius:6px;
}
.wbh-pf__facts p{margin:0;display:flex;align-items:center;gap:8px;min-width:0}
.wbh-pf__price{font-size:16px;font-weight:600;color:var(--navy)}
.wbh-pf__stock{font-size:14px;color:var(--ink-soft)}
.wbh-pf__cats{
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);flex-wrap:wrap;
}
.wbh-pf__cats i{font-style:normal;margin:0 6px;opacity:.55}

.wbh-pf__short{
  font-size:17px;line-height:1.7;color:var(--ink);
  margin:0 0 var(--sp-5);max-width:70ch;
}
.wbh-pf__short p:last-child{margin-bottom:0}

.wbh-pf__cta{margin:0 0 var(--sp-7)}

.wbh-pf__section{margin:0 0 var(--sp-7)}
.wbh-pf__section > h2{margin-top:0}
.wbh-pf__body{font-size:16px;line-height:1.75;color:var(--ink)}
.wbh-pf__body p:last-child{margin-bottom:0}
.wbh-pf__body ul,.wbh-pf__body ol{margin:0 0 var(--sp-4) 1.2em}
.wbh-pf__body li{margin-bottom:6px}

.wbh-pf__section--quiet .wbh-pf__body{
  font-size:15px;color:var(--ink-soft);
  border-left:3px solid var(--line);padding-left:var(--sp-5);
}

.wbh-pf__videos{display:grid;gap:var(--sp-5)}
.wbh-pf__video{
  position:relative;aspect-ratio:16/9;max-width:100%;
  border-radius:var(--radius);overflow:hidden;background:var(--navy);
}
.wbh-pf__video iframe,
.wbh-pf__video video,
.wbh-pf__video object,
.wbh-pf__video embed{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (min-width:860px){
  .wbh-pf__videos{grid-template-columns:repeat(2,1fr)}
  .wbh-pf__videos:has(> :only-child){grid-template-columns:minmax(0,760px)}
}
@media (max-width:560px){
  .wbh-pf__facts{gap:10px;padding:12px 14px}
  .wbh-pf__cta .wbh-btn{width:100%;justify-content:center}
}

/* ==========================================================================
   22 PRODUCT GALLERY - zoom and lightbox
   Woo ships the behaviour and leaves the look to the theme. Without these the
   zoom lens is an unstyled grey square and the lightbox opens with no chrome.
   ========================================================================== */
.woocommerce-product-gallery{position:relative}
.woocommerce-product-gallery__wrapper{margin:0}

.woocommerce-product-gallery__image a{
  display:block;position:relative;cursor:zoom-in;
}
.woocommerce-product-gallery__image img{
  display:block;width:100%;height:auto;border-radius:var(--radius);
}

/* Woo's own trigger is an unstyled emoji-ish glyph in the corner. */
.woocommerce-product-gallery__trigger{
  position:absolute;top:12px;right:12px;z-index:9;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(27,54,93,.12);
  font-size:0;color:transparent;text-indent:-9999px;overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.woocommerce-product-gallery__trigger::after{
  content:"";position:absolute;inset:0;
  background-repeat:no-repeat;background-position:center;background-size:20px 20px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B365D' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8L21 21M11 8.6v4.8M8.6 11h4.8'/%3E%3C/svg%3E");
}
.woocommerce-product-gallery__trigger:hover{transform:scale(1.06);box-shadow:0 4px 14px rgba(27,54,93,.2)}
.woocommerce-product-gallery__trigger:focus-visible{outline:2px solid var(--tan);outline-offset:2px}

/* The zoom lens Woo's jquery-zoom injects. */
.zoomImg{background:#fff;border-radius:var(--radius)}

/* Thumbnail strip under the main image. */
.woocommerce-product-gallery .flex-control-thumbs{
  list-style:none;margin:var(--sp-3) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
}
.woocommerce-product-gallery .flex-control-thumbs li{margin:0}
.woocommerce-product-gallery .flex-control-thumbs img{
  width:100%;height:auto;display:block;cursor:pointer;
  border:1px solid var(--line);border-radius:6px;
  opacity:.62;transition:opacity var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active{
  opacity:1;border-color:var(--gold-dark);
}

/* PhotoSwipe chrome: Woo loads the library, the theme has to make it legible. */
.pswp__bg{background:rgba(11,26,47,.94)}
.pswp__caption__center{text-align:center;font-family:var(--sans);font-size:14px}
.pswp__button{min-width:44px;min-height:44px}

@media (max-width:560px){
  .woocommerce-product-gallery .flex-control-thumbs{grid-template-columns:repeat(4,1fr)}
  .woocommerce-product-gallery__trigger{top:8px;right:8px}
}


/* ==========================================================================
   23 EQUIPMENT PAGE TOP - image left, decision right
   The Amazon arrangement, for the Amazon reason: the photograph sells the
   object, but the price, the availability and the ask are what the visitor is
   deciding on, and they must not start below the fold.
   ========================================================================== */
.wbh-product-top{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:var(--sp-8);align-items:start;
  margin:0 0 var(--sp-8);
}
.wbh-product-top--nohero{grid-template-columns:minmax(0,1fr)}

.wbh-product-hero{
  margin:0;position:relative;
  border-radius:var(--radius);overflow:hidden;background:#fff;
  border:1px solid var(--line);
}
.wbh-product-hero img{
  display:block;width:100%;height:auto;
  /* Without a cap a 2000px portrait shot takes the whole screen on its own. */
  max-height:520px;object-fit:contain;
}

.wbh-product-box{min-width:0}
.wbh-product-box .wbh-pf{margin:0}
.wbh-product-box .wbh-pf__facts{
  /* On the cream section this band is the one white surface; it carries the price. */
  margin-bottom:var(--sp-4);
}
.wbh-product-box .wbh-pf__short{font-size:16px;margin-bottom:var(--sp-5)}
.wbh-product-box .wbh-pf__cta{margin:0}
.wbh-product-box .wbh-pf__cta .wbh-btn{width:100%;justify-content:center}

@media (max-width:900px){
  .wbh-product-top{grid-template-columns:1fr;gap:var(--sp-6)}
  .wbh-product-hero img{max-height:380px}
}