@charset "UTF-8";
:root {
--rwx-border:rgba(255,255,255,0.1);
--rwx-border-subtle: #222222;
--rwx-border-light: rgba(255, 255, 255, 0.1);
--bs-primary-rgb:45,143,228 !important;
--ar-body-font-size: 1rem;
--yith-wcan-filters_colors_accent: #2986da;
--yith-wcan-labels_style_background_hover: #2986da;
--yith-wcan-labels_style_background_active: #2986da;
}
* {margin: 0;padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;outline: none;list-style: none;}
html {scrollbar-gutter: stable;}
body {font-family: "Inter", sans-serif;padding-top:78px;}
@media (min-width: 992px) {
body {padding-top:83px;}
.navbar .dropdown .dropdown-menu {
    display: block; /* Overrides Bootstrap's hard display:none */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateY(10px); /* Optional: adds a subtle slide-up effect */
    margin-top: 0; 
  }
	.navbar .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.btn, a { transition: all .3s;}
a, a:hover {color: inherit;text-decoration: none;}
a {display: inline-block;text-decoration: none;}
/* BRANDING */
.bg-dark {background-color: #081329 !important;}
.rwx-bg-primary {background:#081329}
.rwx-text-bg-primary {color: #fff !important;background-color: #0a1b3c;}
.PDP-text-bg-primary {color: inherit!important;background-color: #edeff3;}
.rwx-bg-dark {background:#070f20}
.rwx-bg-card {background:#070f20}
.productGrid .card-body small {font-size:13px;color:#999;}
.productGrid .card-body .nav-link {font-size:14px;padding:.25rem 0.75rem}
.productGrid .card-body .nav-tabs .nav-link {background:transparent}
nav .form-control {background:transparent !important;border:2px solid rgba(255,255,255,0.3) !important}
.form-control::placeholder {color: rgba(255, 255, 255, 0.5) !important;opacity: 1 !important;}
.form-control::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.5) !important;}
.form-control::-moz-placeholder {color: rgba(255, 255, 255, 0.5) !important;opacity: 1 !important;}
.form-control:-ms-input-placeholder {color: rgba(255, 255, 255, 0.5) !important;}
.rwx-border {border-color: var(--rwx-border) !important;}
.RW-bg {background:#003057}
.RW-bg-text {background:#003057;color:#fff;}
.RW-bg-light {background:#F4F6F8}
.rwx-navBal {background-color:#0a1b3c}
.rwx-success{color:#31e4ab;font-size:14px;}
.text-rwx {color:#2d8fe4}
.text-rwx-dark {color: #fff !important;background-color: #081329;}
.text-primary {color:#2d8fe4 !important;}
.bg-dark-rw {background: #111b2d}
.dropdown-menu {border-radius:4px !important}
.card.text-bg-dark {position: relative;}
.RW-card {background: #e1e4e7}
.RW-card .list-group-item {background: transparent !important}
.ico {padding: .75rem;border-radius: 3px;background: #eee;}
.card.text-bg-dark::after {content: "";position: absolute;inset: 0;background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0) 75%);z-index: 1;pointer-events: none;}
.card-img-overlay {z-index: 2;}.bg-dark-rw {background: #111b2d}
.dropdown-menu {border-radius: 0}
.card.text-bg-dark {position: relative;}
.RW-card {background: #e1e4e7}
.RW-card .list-group-item {background: transparent !important}
.ico {padding: .75rem;border-radius: 3px;background: #eee;}
.card.text-bg-dark::after {content: "";position: absolute;inset: 0;background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0) 75%);z-index: 1;pointer-events: none;}
.card-img-overlay {z-index: 2;}
.text-rw {color:#003057}
.btn-rw {color: #fff;background-color: #003057;border-color: #003057;}
.btn-rw:hover {color: #fff;background-color: #003662;border-color: #003662;}
.btn-outline-rw {color: #003057;background-color:transparent;border-color: #c3d2df;}
.btn-outline-rw:hover {color: #fff;background-color: #003057;border-color: #003057;}
.reece-header-title {height:58px}
.fw-100 {font-weight: 100}
.fw-200 {font-weight: 200}
.fw-300 {font-weight: 300}
.fw-400 {font-weight: 400}
.fw-500 {font-weight: 500}
.fw-600 {font-weight: 600}
.fw-700 {font-weight: 700}
.fw-800 {font-weight: 800}
h5.card-title {color:#336699}
.nav-tabs .nav-item, .nav-pills .nav-item {margin-right: .75rem;}
.nav-tabs .nav-item {margin-bottom: .75rem;}
.nav-tabs .nav-link {background-color: #f1f4f7;isolation: isolate;border-color:#d9dde1;color:inherit;border-radius:4px;}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {background-color: #1b4568 !important;isolation: isolate;border-color:#1b4568;color:#fff !important;}
a.tile {background:#f2f5f8;border:1px solid #d6e7f5;color:inherit;padding:5px;border-radius:3px;font-size:12px;display:block;margin-bottom:3px}
a.tile:hover {background:#1b4568;border:1px solid #1b4568;color:#fff;}
hr {opacity:0.1}
.text-muted {color:#999 !important}
footer p {color:#999 !important}
footer ul {padding: 0;margin: 0;}
.modal {
  --ar-modal-zindex: 1055;
  --ar-modal-width: 500px;
  --ar-modal-padding: 2.375rem;
  --ar-modal-margin: 0.5rem;
  --ar-modal-color: ;
  --ar-modal-bg: var(--ar-body-bg);
  --ar-modal-border-color: var(--ar-border-color);
  --ar-modal-border-width: var(--ar-border-width);
  --ar-modal-border-radius: var(--ar-border-radius-2xl);
  --ar-modal-box-shadow: none;
  --ar-modal-inner-border-radius: calc(var(--ar-border-radius-2xl) - (var(--ar-border-width)));
  --ar-modal-title-line-height: 1.5;
  --ar-modal-footer-gap: 0;
  --ar-modal-footer-bg: ;
  --ar-modal-footer-border-color: var(--ar-border-color);
  --ar-modal-footer-border-width: var(--ar-border-width);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--ar-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0
}
.modal-dialog {position: relative;width: auto;margin: var(--ar-modal-margin);pointer-events: none}
.modal.fade .modal-dialog {transition: transform .2s ease-out;transform: scale(0.9)}
@media(prefers-reduced-motion: reduce) {.modal.fade .modal-dialog {transition: none}}
.modal.show .modal-dialog {transform: none}
.modal.modal-static .modal-dialog {transform: scale(1.02)}
.modal-dialog-scrollable {height: calc(100% - var(--ar-modal-margin)*2)}
.modal-dialog-scrollable .modal-content {max-height: 100%;overflow: hidden}
.modal-dialog-scrollable .modal-body {overflow-y: auto}
.modal-dialog-centered {display: flex;align-items: center;min-height: calc(100% - var(--ar-modal-margin)*2)}
.modal-content {border:none;border-radius:15px;padding:50px 50px 60px;}
.modal-header, .modal-footer, .modal-body {border:none;padding:0}
.modal-backdrop {--ar-backdrop-zindex: 1050;--ar-backdrop-bg: #000;--ar-backdrop-opacity: 0.65;position: fixed;top: 0;left: 0;z-index: var(--ar-backdrop-zindex);width: 100vw;height: 100vh;background-color: var(--ar-backdrop-bg)}
.modal-backdrop.fade {opacity: 0}
.modal-backdrop.show {opacity: var(--ar-backdrop-opacity)}

@media(min-width: 576px) {
  .modal {
    --ar-modal-margin: 1.75rem;
    --ar-modal-box-shadow: none
  }
  .modal-dialog {
    max-width: var(--ar-modal-width);
    margin-right: auto;
    margin-left: auto
  }
  .modal-sm {
    --ar-modal-width: 300px
  }
}
@media(min-width: 992px) {
  .modal-lg, .modal-xl {
    --ar-modal-width: 800px
  }
}
@media(min-width: 1200px) {
  .modal-xl {
    --ar-modal-width: 1140px
  }
}
@media (min-width: 1800px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 1680px;
  }
}
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0
}
.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0
}
.modal-fullscreen .modal-header, .modal-fullscreen .modal-footer {
  border-radius: 0
}
.modal-fullscreen .modal-body {
  overflow-y: auto
}
@media(max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0
  }
  .modal-fullscreen-sm-down .modal-header, .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto
  }
}
@media(max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0
  }
  .modal-fullscreen-md-down .modal-header, .modal-fullscreen-md-down .modal-footer {
    border-radius: 0
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto
  }
}
@media(max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0
  }
  .modal-fullscreen-lg-down .modal-header, .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto
  }
}
@media(max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0
  }
  .modal-fullscreen-xl-down .modal-header, .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto
  }
}
@media(max-width: 1399.98px) {.modal-fullscreen-xxl-down {width: 100vw;max-width: none;height: 100%;margin: 0}
.modal-fullscreen-xxl-down .modal-content {height: 100%;border: 0;border-radius: 0}
.modal-fullscreen-xxl-down .modal-header, .modal-fullscreen-xxl-down .modal-footer {border-radius: 0}
.modal-fullscreen-xxl-down .modal-body {overflow-y: auto}}
/* START RESPONSIVE */
@media screen and (max-width: 992px) {
.reece-header-title {height:38px}
}
/* YITH FILTERING COSMETIC ADJUSTMENTS */
.yith-wcan-reset-filters {width: 100%;border-radius: 30px;padding: .75rem;background: transparent;border: 2px solid #666;color: #666;}

/* ============================================================
   PLP VISUAL CONVERGENCE
   Scoped overrides of native WooCommerce archive/loop markup
   (archive-product.php + content-product.php default template)
   toward the _reference/PLP.html visual treatment. No product
   data, filter markup, or Woo functionality is touched here.
   ============================================================ */

/* Sidebar filter container — border/spacing/width come from the same Bootstrap
   classes as the reference (card card-body p-4 border h-100); only generic
   heading typography is normalized here, since YITH's real markup/classes
   have not been inspected yet and are treated as a placeholder for now. */
.woocommerce .col-xl-3 .card h1,
.woocommerce .col-xl-3 .card h2,
.woocommerce .col-xl-3 .card h3,
.woocommerce .col-xl-3 .card h4 {
	text-transform: uppercase;
	font-weight: 700;
	font-size: .875rem;
	margin-bottom: .75rem;
}

/* Results toolbar (result count + native sorting select) */
.reece-plp-toolbar .woocommerce-result-count {
	margin: 0;
}
.reece-plp-toolbar .woocommerce-ordering {
	margin: 0;
}
/* Mirrors bootstrap.min.css .form-select exactly so the native WC sort dropdown
   (functionality/markup otherwise untouched) reads as a Bootstrap form control. */
.reece-plp-toolbar .woocommerce-ordering select.orderby {
	display: block;
	padding: .375rem 2.25rem .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-body-color);
	appearance: none;
	background-color: var(--bs-body-bg);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right .75rem center;
	background-size: 16px 12px;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
}

/* Product grid: Bootstrap .row/.col-* now own the column geometry entirely
   (see woocommerce/loop/loop-start.php + woocommerce/content-product.php) —
   no ul.products / li.product / columns-N selectors are targeted here, since
   those carry WooCommerce's own float/percentage-width layout rules, which is
   what previously collapsed the grid when combined with a CSS Grid override. */

/* Product card: sale badge + image aspect + title/rating/price rhythm,
   layered on top of the real WooCommerce data these hooks output. */
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb a {
  color: #2d8fe4;
}
.woocommerce .product.card {
	position: relative;
}
.woocommerce .product.card .onsale {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 2;
	margin: 0;
	padding: .35em .65em;
	border-radius: .25rem;
	background: #2d8fe4;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	min-height: 0;
	min-width: 0;
	line-height: 1;
}
.woocommerce .product.card .card-header img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.woocommerce .product.card .woocommerce-loop-product__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.woocommerce .product.card h2.woocommerce-loop-product__title {
	margin: 0 0 .5rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
}
.woocommerce .product.card .star-rating {
	margin: 0 0 .25rem;
	color: #2d8fe4;
}
.woocommerce .product.card .price {
	display: block;
	margin-bottom: 0;
	font-size: 18px;
	color: inherit;
}

/* Add to Cart button treatment (matches _reference/PLP.html .btn-light, scoped to Woo) */
.woocommerce .btn-light {
	color: #000;
	background: #eeefef !important;
	border-color: #eeefef !important;
	padding:1rem .75rem !important;
  font-size: 14px !important;
  font-weight: normal !important;
}
.woocommerce .btn-light:hover {
	color: #fff !important;
	background: #2b7fdb !important;
	border-color: #2b7fdb !important;
}

/* Pagination vertical rhythm */
.woocommerce nav.woocommerce-pagination {
	margin-top: 1rem;
}

/* ============================================================
   PDP FOUNDATION — light presentational fit only.
   WooCommerce's native single-product gallery/add-to-cart markup
   and behavior (zoom, lightbox, quantity, validation) are left
   as-is; these rules only make them sit correctly inside our
   Bootstrap columns. Deeper visual convergence with
   _reference/PDP.html is deferred to a follow-up polish pass,
   mirroring the PLP runtime-foundation / visual-convergence split.
   ============================================================ */
.single-product .woocommerce-product-gallery {
	max-width: 100%;
}
.single-product .woocommerce-product-gallery img {
	width: 100%;
	height: auto;
}
.single-product .summary > * {
	margin-bottom: 1rem;
}
.single-product .summary .product_title {
	font-size: 1.5rem;
	font-weight: 700;
}
.single-product .summary .price {
	font-size: 1.5rem;
}
.single-product .quantity .qty {
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	padding: .375rem .75rem;
}
.single-product .single_add_to_cart_button {
	display: block;
	width: 100%;
	text-transform: uppercase;
	border-radius: var(--bs-border-radius);
	padding: .75rem;
}

/* ============================================================
   PDP purchase-form structural correction.
   Product information + configuration (title/rating/price/excerpt/meta,
   then Color/Size/Quantity) sit in the center column; the Allowance card
   and Add to Cart button sit in the right column. WooCommerce's native
   add-to-cart form (woocommerce/single-product/add-to-cart/{simple,
   variable}.php overrides) supplies both the config and transaction
   pieces as children of ONE <form>; display:contents on that form lets
   its two pieces act as independent grid items here without duplicating
   the form or its variation JS/validation/submission behavior. Gross
   column proportions only — pixel-level polish deferred.
   ============================================================ */
/* Gallery/Center/Right are independent vertical columns: turning off the
   inherited stretch (see .pdp-columns above) means this grid's own
   height already matches its own content, but align-content:start is
   kept too so leftover space (if any) never gets distributed into the
   row-gap between the summary/allowance row and the config/transaction
   row — it can only ever appear after the last row. */
.pdp-columns {
	align-items: flex-start;
}
.pdp-content-grid {
	display: grid;
	grid-template-columns: 4fr 3fr;
	grid-template-areas:
		"summary   allowance"
		"config    transaction";
	column-gap: var(--bs-gutter-x, 1.5rem);
	row-gap: 1.5rem;
	align-content: start;
}
.pdp-content-grid > .pdp-split-form {
	display: contents;
}
.pdp-area-summary { grid-area: summary; }
.pdp-area-allowance { grid-area: allowance; }
.pdp-area-config { grid-area: config; }
.pdp-area-transaction {
	grid-area: transaction;
	align-self: start;
}

@media (max-width: 1199.98px) {
	.pdp-content-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"summary"
			"config"
			"allowance"
			"transaction";
	}
}

/* Add to Cart button-only disabled styling. WooCommerce's variation JS
   (add-to-cart-variation.js onHide/onShow) toggles woocommerce-variation-
   add-to-cart-enabled/-disabled on every element matching
   .woocommerce-variation-add-to-cart within the form, and separately
   adds a "disabled" class straight onto .single_add_to_cart_button —
   native behavior keeps that button visible and clickable while
   disabled so its onAddToCart click handler can still show the "please
   select an option" / "unavailable" alert; hiding it would silently
   swallow that click. This intentionally does NOT touch display, so
   nothing here pops in/out of the PDP geometry.
   Quantity (pdp-variation-quantity in the variable.php add-to-cart
   override) deliberately does not carry the woocommerce-variation-add-
   to-cart class, so neither this rule nor WooCommerce's own enable/
   disable classing ever hides it — it stays visible and usable from
   initial render, before any variation is selected, as required. */
.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
	opacity: .5;
	cursor: not-allowed;
}