/*
Theme Name: R&B Fixings
Theme URI: https://rbfixing.co.uk
Description: R&B Fixings Theme
Author: RDIT
Author URI: https://rdit.uk
Template: twentytwentyfour
Version: 1.0.0
*/

/* base cta styles - don't affect buttons eg in the header search bar */
.wp-element-button:not(.site-header .wp-element-button) {
	background: var(--wp--preset--color--rb-blue);
	color: white;
	border-radius: 0;
	text-transform: uppercase;
	font-size: .8rem;
}

.site-header .wp-block-search__inside-wrapper {
  /* switch button icon to the left */
  flex-direction: row-reverse;
  /* required for the slanty edge */
  position: relative;
  overflow: hidden;
  /* all other borders are on pseudo element below */
  border: none;
  border-left: solid 1px var(--wp--preset--color--rb-grey);
  /* space at the end for slanty so input doesn't overlap */
  padding-right: 22px;
}

/* move default margin to the right as button position switched */
.site-header .wp-block-search__button {
  margin-left: 0;
  margin-right: 2px;
  padding: 4px;
}

/* slanty box edge on search bar - all borders except flat left one are on the pseudeo element */
.site-header .wp-block-search__inside-wrapper::after {
  display: block;
  content: "";
  border: solid 1px var(--wp--preset--color--rb-grey);
  width: 1000px;
  height: calc(100% - 2px);
  transform: skew(-20deg);
  position: absolute;
  top: 0;
  right: 15px;
  pointer-events: none;
}

/* tax toggle */
.wdevs-tax-switch {
	/* label on left */
	flex-direction: row-reverse;
}
.site-header .wdevs-tax-switch {
  /* in header align right */
	margin-left: auto;
}
.wp-block-wdevs-tax-switch .wdevs-tax-switch .wdevs-tax-switch-label-text {
	/* label's margin now it's on left */
	margin-right: 10px;
	margin-left: 0;
}
.wp-block-wdevs-tax-switch .wdevs-tax-switch .wdevs-tax-switch-checkbox +  .wdevs-tax-switch-slider::before {
	/* cross image when excl vat */
	background-image: url(img/vat-cross.png);
	background-repeat: no-repeat;
	background-position: center center;
}
.wp-block-wdevs-tax-switch .wdevs-tax-switch .wdevs-tax-switch-checkbox:checked +  .wdevs-tax-switch-slider::before {
	/* tick image when inc vat */
	background-image: url(img/vat-tick.png);
}
.wp-block-wdevs-tax-switch .wdevs-tax-switch .wdevs-tax-switch-slider::before {
	/* smaller toggle */
	bottom: 4px;
	height: 14px;
	left: 4px;
	width: 14px;
}
.wp-block-wdevs-tax-switch .wdevs-tax-switch .wdevs-tax-switch-label {
	/* smaller track for toggle */
	height: 22px;
	width: 34px;
	/* override over-zealous woocommerce label style */
	margin-bottom: 0;
}
.wp-block-wdevs-tax-switch .wdevs-tax-switch .wdevs-tax-switch-checkbox:checked + .wdevs-tax-switch-slider::before {
	/* don't slide as much when activated */
	transform: translateX(12px);
}

/* fake border for product grid products - there's no usable wrapper on the markup */
.wc-block-grid__product::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid 1px #c3c3c3;
  pointer-events: none;
}

.wc-block-grid__product {
	/* move image and cta away from border - important to override the 0 padding on smaller sizes */
	padding: 14px !important;
	text-align: left;
}

.wc-block-grid__product-link {
	text-decoration: none;
}

/* red underline under image on product grid */
.wc-block-grid__product .attachment-woocommerce_thumbnail {
	border-bottom: solid 1px var(--wp--preset--color--rb-red);
}

/* the banners are 1920x513 images. this element centers them and keeps the focal part of the image at the width of the content width */
.rb-banner {
	overflow: hidden;
	position: relative;
	display: flex;
	justify-content: center;
}
.wp-block-image.alignfull .rb-banner-image {
	width: 150vw;
	max-width: 1920px;
}

/* homepage featured product title */
.rb-featured-title-top {
	color: var(--wp--preset--color--rb-red);
	text-transform: uppercase;
}
.rb-featured-title-bottom {
	color: var(--wp--preset--color--rb-blue);
	text-transform: uppercase;
}

/* featured product bigger gap between image and text, bring text to the right */
.rb-featured-product {
	gap: 4rem;
}
.rb-featured-product img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: solid 1px #c3c3c3;
}

@media (min-width: 782px) {
	.rb-featured-product img {
		/* right align image when side by side */
		margin-right: 0;
	}
}

/* product grid 4 products don't fit comfortably at this screen size - do 2 per row until bigger */
@media (min-width: 601px) and (max-width: 781px) {
	.theme-twentytwenty .wc-block-grid.has-4-columns .wc-block-grid__product, .wc-block-grid.has-4-columns .wc-block-grid__product {
		flex: 1 0 50%;
		max-width: 50%;
	}
}

/* .rb-feature::after {
	display: block;
	content: "";
	background: lightblue;
	width: 40%;
	height: calc(50% + 40px);
	position: absolute;
	transform: skew(-20deg) translate(-40px, -40px);
	z-index: -1;
	top: 0;
	transform-origin: top left;
	left: 40%;
}

.rb-feature::before {
	display: block;
	content: "";
	background: green;
	width: 50%;
	height: 110%;
	position: absolute;
	transform: skew(-20deg);
	left: 40%;
	z-index: -1;
	top: 0;
	transform-origin: top left;
} */

.rb-feature figure {
	/* normalize height of feature icons */
	min-height: 73px;
}

/* spacing and background for feature columns */
.rb-features .wp-block-column {
  background: url(/wp-content/uploads/2024/10/feature-angles.png) no-repeat center center / contain;
  padding-top: 80px;
  padding-bottom: 30px;
}







.rb-nav {
	position: absolute;
	width: 100%;
	background: lightblue;
	left: 0;
	top: 100%;
	z-index: 500;
	visibility: hidden;
}

.rb-nav.active {
	visibility: visible;
}

.rb-nav ul,
.rb-nav li {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.rb-nav-top-level a {
	text-decoration: none;
}
ul.rb-nav-top-level {
	position: relative;
	display: flex;
	column-gap: 5px;
	flex-wrap: wrap;
	padding: 0 var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left);
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
}

ul.rb-nav-top-level > li > a {
	display: block;
	padding: 8px 10px;
	margin-left: -10px;
}

ul.rb-nav-top-level > li > a.active {
	background: #f4ede3;
	outline: none;
	text-decoration: none;
}

.rb-nav-child-container {
	position: absolute;
	background: #f4ede3;
	visibility: hidden;
	width: 100%;
	left: 0;
	/*top: 100%;*/
	/*max-height: 400px;*/
	overflow-y: auto;
	
	
	padding: 12px var(--wp--style--root--padding-right) 18px var(--wp--style--root--padding-left);
	margin: 0 auto;
	box-sizing: border-box;
	-webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.3);
    scrollbar-width: thin;
    scrollbar-color: #8f54a0 #ffffff;
}
/*
.rb-nav-child-container > ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 16px;
}*/

.rb-nav-child-container::-webkit-scrollbar {
	width: 16px;
}

.rb-nav-child-container::-webkit-scrollbar-track {
	background: #ffffff;
}

.rb-nav-child-container::-webkit-scrollbar-thumb {
	background-color: #8f54a0;
	border-radius: 10px;
	border: 3px solid #ffffff;
}

.rb-nav-child-container.active {
	visibility: visible;
}
/*.rb-nav-top-level > li > a:focus ~ .rb-nav-child-container,
.rb-nav-top-level > li > a:hover ~ .rb-nav-child-container,
.rb-nav-child-container:hover,
.rb-nav-child-container:focus,
.rb-nav-child-container:focus-within {
	visibility: visible;
} */


.rb-nav-child-container > ul {
    columns: 6 200px;
    column-gap: 16px;
}
.rb-nav-child-container > ul > li {
    margin-bottom: 8px;
    break-inside: avoid-column;
}
.rb-nav-child-container ul ul li {
    font-size: 15px;
    display: flex;
    gap: 7px;
}
.rb-nav-child-container ul ul li::before {
    content: "-";
    display: inline-block;
}
#rb-nav-brands .rb-nav-top-level {
	display: block;
    column-width: 110px;
    column-gap: 5px;
}

.wp-block-button__link {
	height: auto;
}


/* contact form 7 */
.wpcf7-text,
.wpcf7-textarea {
	padding: 6px;
	box-sizing: border-box;
	display: block;
	width: 100%;
}

.wpcf7-submit {
	padding-left: 2rem;
	padding-right: 2rem;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/* custom header icons */
.wp-block-woocommerce-customer-account svg,
.wp-block-woocommerce-mini-cart svg {
	display: none;
}
.wp-block-woocommerce-customer-account a,
.wp-block-woocommerce-mini-cart button {
	background: url('img/bag.png') center center no-repeat;
	width: 27px;
	height: 27px;
}
.wp-block-woocommerce-customer-account a {
	background-image: url('img/user.png');
}
.wc-block-mini-cart__badge {
	color: var(--wp--preset--color--rb-grey);
	transform: translate(70%, 15%);
	background: transparent;
}

.wc-block-grid__product-title {
	margin: 0 !important;
}
.rb-grid-product-title {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 16px;
	justify-content: space-between;
}
.woosw-btn {
	border: none;
	background: none;
}

.woosw-btn-added .woosw-btn-icon {
	color: var(--wp--preset--color--rb-red);
}



/* reordering and styling archive in css not ordered in source as heart button can't move in blocks for some reason */
.wc-block-product {
  border: solid 1px var(--wp--preset--color--rb-grey);
	padding: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.wc-block-product .woosw-btn {
	margin-left: auto;
}

.wc-block-product .wp-block-woocommerce-product-price,
.wc-block-product .wp-block-woocommerce-product-price .wc-block-components-product-price {
	margin: 0 !important;
}
.wc-block-product .wp-block-post-title {
	order: 4;
	width: 100%;
	margin-top: 8px;
	
}
.wc-block-product .wp-block-button {
	order: 5;
}

/* and on single product page */
.single-product .wp-block-columns.alignwide.is-layout-flex.wp-container-core-columns-is-layout-1.wp-block-columns-is-layout-flex {
	position: relative;
}
.single-product .wp-block-columns.alignwide.is-layout-flex.wp-container-core-columns-is-layout-1.wp-block-columns-is-layout-flex .woosw-btn {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 20px;
}


/* category filters */
.rb-filters-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.rb-filter-checkbox {
	appearance: none;
	margin: 0;
	padding: 0;
	width: 0;
	height: 0;
	outline: none;
}

.rb-filter {
	font-size: 0; /*whitespace*/
}

.rb-filter span {
	border: solid 1px var(--wp--preset--color--rb-grey);;
	padding: 2px 4px;
	font-size: 1rem;
	display: inline-block;
}

.rb-filter :checked + span {
	background: var(--wp--preset--color--rb-blue);
	color: white;
}

.rb-filter:focus,
.rb-filter:focus-within {
	outline: solid 1px black;
}

.rb-filters-clear {
	visibility: hidden;
	font-size: smaller;
	text-decoration: none;
}

.rb-filters-clear.active {
	visibility: visible;
}




/* related */
.wp-block-woocommerce-related-products.alignwide li.wp-block-post {
    display: flex;
    flex-direction: column;
}
.wp-block-woocommerce-related-products.alignwide h3.has-text-align-center.wp-block-post-title.has-medium-font-size {
	margin-top: auto;
}
.wp-block-woocommerce-related-products.alignwide .attachment-woocommerce_single.size-woocommerce_single {
	max-height: 198px;
	object-fit: contain !important;
}

/* favourites popup */

.woosw-item--atc .add_to_cart_inline a {
	display: block;
	padding: 8px;
	white-space: nowrap;
}