@media screen and (min-width: 0px) and (max-width: 768px) {
	.woocommerce table.shop_table_responsive tr, .woocommerce-page table.shop_table_responsive tr{margin-bottom: 20px;}


}


/*320px width to 720px width */

@media screen and (min-width: 0px) and (max-width: 420px) {
/*product catalogue*/
ul.products li{display: block; width: 100%;}
.woocommerce-page.columns-2 ul.products li.product, .woocommerce.columns-2 ul.products li.product{width: 100%;}

}


@media screen and (min-width: 0px) and (max-width: 600px) {
	.woocommerce-product-gallery{display: block;width: 100%;}
	.entry-summary{display: block; width: 100%; margin-top: 20px;}
	.stock-category h2{font-size: 13px;}
	.stock-category-block-heading{font-size: 16px;}
	.stock-categories-inner{padding-left: 5px; padding-right: 5px;}
	p.woocommerce-result-count{top: 9px; font-size: 13px;}	
}


@media screen and (min-width: 0px) and (max-width: 768px) {

.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product{width: 46%!important;}
ul.products li:nth-child(3n){margin-right: 3%!important;}

}


@media screen and (min-width: 0px) and (max-width: 720px) {

	div.woof_info_popup{left: 20px;}
	.google-map{width: 100%; display: block; padding-left: 0px; border-top: 1px solid #c9c9c9; padding-top: 30px; margin-top: 20px;}
	.contactform{width: 100%;}
	.google-map iframe{height: 300px; width: 90%;}
	h1.stock-categories-headline{font-size: 18px;}
	
.facebook-banner-bottom{margin: 0;}



/*woocommerce single product page styling*/

div.variations{ }
/*woocommerce cart styling*/
.shop_table .attachment-shop_thumbnail{display: none;}
.shop_table .minus,.shop_table .plus{width: 100%; max-width: 100%;}
a.remove,a:link.remove,a:active.remove,a:visited.remove{font-size: 12px;}
.woocommerce table.cart td.actions .input-text+.button{float: none;}
td.actions input.button{}
div.coupon input.button{display: block; margin-top: 10px; float: left;}
input#coupon_code.input-text{width: 100%; max-width: auto;}
.breadcrumbseparator{padding-left: 5px; padding-right: 5px;}
div.quantity.buttons_added{display: inline-block;}
.gmap{height: 150px;}
button, input.button, input[type=button], input[type=submit]{display: block;}
/*
/*Thumbnails on product page*/.thumbnails .attachment-shop_thumbnail{margin-bottom: 2.5%; max-width: 100px;}

/*Quantity input on cart page*/ div.quantity.buttons_added input.input-text.qty.textXXXXXX{ min-width: 30px; margin-bottom: 10px; display: block; }
/*Actions table cell on cart page*/ td.actions{padding-bottom: 20px;}
/*Cart totals div on cart page*/ div.cart_totals{margin-top: -10px;}
/*Table headers on shop tables*/ .shop_table th, .cart_totals th{font-size: 11px; line-height: 11px; text-align: center;}


/*Additional Information - Shipping Notes on checkout page*/ div.woocommerce-shipping-fields{float: none; display: block; clear: both;}
/*Cart totals on cart page*/ div.cart_totals table{float:left;}
/*Additional Information heading on checkout page*/ div.woocommerce-shipping-fields h3{margin-top: 20px;}
/*optional insurance heading on checkout page*/ #my_custom_checkout_field_insurance{margin-top: 20px;}
div.single_variation_wrap div.quantity{ display: inline-block; margin-bottom: 10px;}
button.single_add_to_cart_button{display: inline-block;}
.single_variation_wrap{margin-top: 10px;}
div.single_variation{margin-bottom: 10px;}
tr.cart_item{margin-bottom: 20px;}



/*theme elements*/
.navlink{display: none;}
.menubutton{display: block;}
.main-content{float: none; width: 100%; max-width: 960px;  position: relative;}
.filter-toggle{display: block;}	
.page-sidebar{
	float:none; 
	width: 100%; 
	padding-bottom: 0px;
}
	.filter-holder{
		display: none;
	}
	.filter-holder h2{
		font-size: 14px;
	}	
.inspirationlink{min-width: 200px;}
.footersection{float: none; margin: auto; width: 100%;}
.footerlogo{float: none; margin: auto; width: 100%;}
.logofooter{width: 100%; height: auto;}
.top-logo-holder img{width: 105px; height: auto;}
.navigationholder{text-align: left;}
.navbar{display: none;}
.slideshow-container{height: 100px;}
.navigation{display: none;}
.h3{font-size: 12px; line-height: 12px;}
.invisible{display: block;}
.contentlink a,.contentlink a:link,.contentlink a:active,.contentlink a:visited{ display: block; margin-top: 10px;}
.tourdescriptionparagraph{display: none;}
.topbarcontact{display: none;}
.topbarcontent{height: 75px;}
.topbarcontainer{height: 75px; opacity: 0.95; filter: alpha(opacity=95); /* For IE8 and earlier */}
.topbarbg{height: 75px; opacity: 0.9; filter: alpha(opacity=90); /* For IE8 and earlier */}
.topbar{position: relative; height: 75px;}
.topbarspacer{display: none; height: 0px;}
.cartplaceorder{display: none;}
.cartcontents{font-size: 12px; line-height: 12px;}
.topcart{float: none;}
.photo{width: 40%}
.sidebarsection .thumbnail{ height: 120px}
.adminbar .topbar{top: 0px;}
.frontslideshow{height: 100px;}
.frontslide{height: 100px;}
.associated-brands-holder{padding-bottom: 20px;}
.associated-brand-image{}
.associated-brand{width: 80%; max-width: 320px; margin-right: 0; margin: auto;}

.gmap{width: 100%;}
.origin-notice .flag-za{width: 15px; height: 11px;}

.announcement-bar{font-size: 12px;line-height: 120%;}
.announcement-bar br{display: none;}	
	
}

/*959px less width but more than 720px */

@media screen and (min-width: 721px) and (max-width: 959px) {
.navlinkdropdownlink{font-size: 15px; line-height: 15px;}
.navlink{font-size: 14px; line-height: 14px;}
.cartcounter{width: 12px; height: 12px; font-size: 8px; top: -1px; padding-top: 1px; padding-left: 0px;}
.tourpackages .navlinkdropdown{width: 300%;}
.navbar{top: 175px;}
.navlink{padding-left: 3px; padding-right: 3px;}
.navigation .navlink a,.navigation .navlink a:link,.navigation .navlink a:active,.navigation .navlink a:visited{font-size: 14px; line-height: 14px;}
.topbarcontent{height: 60px;}
.topbarcontainer{height: 60px; opacity: 0.95; filter: alpha(opacity=95); /* For IE8 and earlier */}
.topbarbg{height: 60px; }
.topbar{height: 60px;}
.topbarspacer{height: 60px;}
.cartplaceorder{display: none;}
.cartcontents{font-size: 12px; line-height: 12px;}
tr.cart_item{margin-bottom: 20px;}
}

/*959px or less up to 0px width GLOBAL */
@media screen and (min-width: 721px) and (max-width: 959px) {



}

/* =====================================================================
   R21 visual refresh (2026-11-09)
   Appended to responsive.css so it loads last and overrides the older,
   conflicting grid rules in style.css, responsive.css and WooCommerce.
   Brand: yellow #fec00f, black #000.
   ===================================================================== */

:root {
	--r21-yellow: #fec00f;
	--r21-black: #111111;
	--r21-text: #1d1d1d;
	--r21-muted: #5f5f5f;
	--r21-line: #e3e3e3;
	--r21-radius: 8px;
}

/* ---------- Homepage hero and category tiles ---------- */
.stock-categories-holder {
	background-attachment: scroll; /* "fixed" scaled the banner to the viewport and stutters on scroll; iOS ignores it */
	background-position: center 70%;
	box-shadow: none;
}
.stock-categories-holder::before {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.stock-categories-inner {
	padding-top: 48px;
	padding-bottom: 48px;
}
.stock-category {
	border: 0;
	border-radius: var(--r21-radius);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.stock-category img {
	height: 160px;
	border-radius: var(--r21-radius);
}
.stock-category h2 {
	font-size: 20px;
	letter-spacing: 0.2px;
	padding: 28px 10px 12px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
}
.stock-category:hover {
	transform: translateY(-3px);
}
.stock-category:hover img {
	transform: none;
	box-shadow: none;
}
.stock-category:hover h2 {
	transform: none;
	color: var(--r21-yellow);
}

/* ---------- Homepage intro (company story and trust points) ---------- */
.r21-intro {
	background: #ffffff;
	border-bottom: 1px solid var(--r21-line);
	padding: 36px 20px 32px;
}
.r21-intro-inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}
.r21-intro h1 {
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--r21-text);
	margin: 0 0 12px;
}
.r21-intro p {
	font-family: 'Roboto', sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--r21-muted);
	max-width: 760px;
	margin: 0 auto 26px;
}
.r21-trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	text-align: left;
}
.r21-trust li {
	margin: 0;
	padding: 14px 16px;
	border-left: 4px solid var(--r21-yellow);
	background: #f7f7f7;
	border-radius: 0 var(--r21-radius) var(--r21-radius) 0;
	font-family: 'Roboto', sans-serif;
}
.r21-trust strong {
	display: block;
	font-size: 16px;
	color: var(--r21-text);
	margin-bottom: 4px;
}
.r21-trust span {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	color: var(--r21-muted);
}

/* ---------- Filter sidebar ---------- */
@media (min-width: 769px) {
	.page-sidebar {
		position: sticky;
		top: 20px;
	}
}

/* ---------- Product grid and cards ----------
   Card markup (added by r21_loop_* hooks in functions.php):
   a.woocommerce-LoopProduct-link
     div.r21-media > span.onsale, img, span.r21-photo-count
     div.r21-thumbs > img x up to 3
     div.r21-card-body > div.r21-card-head > h2 + span.price ; span.r21-chip
*/
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none !important; /* WooCommerce clearfix pseudo elements would take grid cells */
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*=columns-] li.product,
.woocommerce-page ul.products[class*=columns-] li.product,
.woof_shortcode_output ul.products.columns-4 li.product,
ul.products li.product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	min-height: 0;
	height: auto;
	padding: 10px;
	background: #ffffff;
	border: 1px solid var(--r21-line);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}

/* Main photo */
.r21-media {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: #eeeeee;
}
.woocommerce ul.products li.product .r21-media img,
ul.products li.product .r21-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0 !important;
}
.r21-photo-count {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.62);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}
.r21-photo-count svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

/* Extra photos strip */
.r21-thumbs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	margin-top: 6px;
}
.woocommerce ul.products li.product .r21-thumbs img,
ul.products li.product .r21-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	margin: 0 !important;
}

/* Text area */
.r21-card-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 10px;
	margin-top: 10px;
	padding: 12px;
	border: 1px solid var(--r21-line);
	border-radius: 8px;
}
.r21-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 0 !important;
	font-size: 17px !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--r21-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.woocommerce ul.products li.product .price {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin: 0;
	padding: 0;
	text-align: right;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--r21-black);
	white-space: nowrap;
}
.woocommerce ul.products li.product .price ins {
	order: 1;
	padding: 0;
	text-decoration: none;
	font-weight: 700;
}
.woocommerce ul.products li.product .price del {
	order: 2;
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 400;
	color: #8a8a8a;
	opacity: 1;
}
.woocommerce ul.products li.product .price .woocommerce-price-suffix {
	order: 3;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	color: var(--r21-muted);
}
.r21-chip {
	align-self: flex-start;
	margin-top: auto;
	padding: 4px 10px;
	border-left: 3px solid var(--r21-yellow);
	border-radius: 4px;
	background: #f1f1f1;
	font-size: 13px;
	line-height: 1.3;
	color: var(--r21-text);
}

/* Sale badge: brand colours instead of the WooCommerce olive circle */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	margin: 0 !important;
	min-width: 0;
	min-height: 0;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--r21-yellow);
	color: var(--r21-black);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ---------- Footer ---------- */
.footer {
	padding: 40px 20px 48px;
	box-shadow: none;
	border-top: 4px solid var(--r21-yellow);
}
.footer-contact-detail-holder {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, auto));
	justify-content: start;
	gap: 12px 40px;
	margin-bottom: 24px;
}
.footer-contact-detail .contact-label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--r21-yellow);
	margin-bottom: 2px;
}
.footer-content > p {
	font-size: 13px;
	line-height: 1.6;
	color: #b5b5b5;
	max-width: 900px;
}
.footer-content > p strong {
	color: #d9d9d9;
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.r21-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.footer-contact-detail-holder {
		grid-template-columns: repeat(2, minmax(0, auto));
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	/* Keep the intro short on phones: headlines only */
	.r21-trust span {
		display: none;
	}
	.r21-trust strong {
		margin-bottom: 0;
	}
}
@media (max-width: 768px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product .woocommerce-loop-product__title {
		font-size: 16px !important;
	}
	.woocommerce ul.products li.product .price {
		font-size: 17px;
	}
	.stock-categories-inner {
		padding: 20px 12px;
		gap: 12px;
	}
	.stock-category {
		flex: 0 1 calc(50% - 6px);
		max-width: calc(50% - 6px);
		margin-bottom: 0;
	}
	.stock-category img {
		height: 120px;
	}
	.stock-category h2 {
		font-size: 15px;
		padding: 22px 8px 9px;
	}
	.r21-intro {
		padding: 26px 16px 22px;
	}
	.r21-intro h1 {
		font-size: 22px;
	}
	.r21-intro p {
		font-size: 15px;
		margin-bottom: 18px;
	}
	.r21-trust {
		gap: 10px;
	}
	.r21-trust li {
		padding: 10px 12px;
	}
	.r21-trust strong {
		font-size: 14px;
	}
	.r21-trust span {
		font-size: 13px;
	}
	.footer-contact-detail-holder {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   R21 pages refresh (2026-11-09): header, product page, forms,
   contact page, about page. Appended to responsive.css after the
   "R21 visual refresh" block. Uses the --r21-* tokens defined there.
   Note: the theme's <body> has no classes, so product page rules are
   scoped to div.product.type-product (loop items are li.product).
   ===================================================================== */

/* ---------- Header: spacing and divider lines ---------- */
.navigationholder {
	padding: 16px 20px;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}
.top-logo-holder {
	margin-right: 36px;
}
.navlink {
	padding: 14px 18px;
}
.navlink + .navlink::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 18px;
	margin-top: -9px;
	background: rgba(0, 0, 0, 0.3);
}
.navlink a {
	position: relative;
	text-decoration: none;
}
.navlink a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--r21-black);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}
.navlink a:hover::after,
.navlink a:focus-visible::after {
	transform: scaleX(1);
}

/* ---------- Footer: disclaimer uses the full footer width ---------- */
.footer-content > p {
	max-width: none;
}

/* ---------- Product page layout ---------- */
div.product.type-product {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	grid-template-areas:
		"gallery title"
		"gallery summary";
	grid-template-rows: auto 1fr;
	column-gap: 40px;
	align-items: start;
	font-size: 16px;
}
div.product.type-product > h1.product_title {
	grid-area: title;
	margin: 0 0 14px;
	font-size: 30px;
	line-height: 1.2;
}
div.product.type-product > .woocommerce-product-gallery {
	grid-area: gallery;
	display: block;
	width: auto !important;
	margin: 0 !important;
	opacity: 1;
}
div.product.type-product > .summary {
	grid-area: summary;
	display: block;
	width: auto !important;
	margin: 0;
	padding: 22px;
	background: #ffffff;
	border: 1px solid var(--r21-line);
	border-radius: 12px;
}

/* Gallery: fixed 3:2 stage (the shape of most stock photos) so landscape and
   portrait photos keep the same height; portraits get side bars */
div.product.type-product .woocommerce-product-gallery .flex-viewport,
div.product.type-product .woocommerce-product-gallery__wrapper {
	border-radius: 12px;
	overflow: hidden;
	background: #161616;
}
div.product.type-product .woocommerce-product-gallery__image a {
	display: block;
}
div.product.type-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background: #161616;
	cursor: zoom-in;
}

/* Thumbnails */
div.product.type-product .flex-control-thumbs {
	display: flex !important;
	gap: 8px;
	margin: 10px 0 0 !important;
	padding: 0 0 6px !important;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}
div.product.type-product .flex-control-thumbs li {
	flex: 0 0 calc((100% - 56px) / 8); /* 8 visible, the rest scroll sideways */
	min-width: 72px;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	display: block !important;
	scroll-snap-align: start;
}
div.product.type-product .flex-control-thumbs img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
	border: 2px solid transparent;
	opacity: 0.6;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
div.product.type-product .flex-control-thumbs img.flex-active,
div.product.type-product .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--r21-yellow);
}

/* Previous and next arrows */
div.product.type-product .flex-direction-nav li {
	position: static; /* .main-content ul li is relative in style.css */
}
div.product.type-product .flex-direction-nav {
	position: static; /* style.css makes every ul relative; arrows must anchor to the gallery */
	list-style: none;
	margin: 0;
	padding: 0;
}
div.product.type-product .flex-direction-nav a {
	position: absolute;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: calc((100% / 3) - 22px); /* centre of the 3:2 stage */
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: transparent;
	font-size: 0;
	text-decoration: none;
	transition: background 0.15s ease;
}
div.product.type-product .flex-direction-nav a:hover {
	background: rgba(0, 0, 0, 0.8);
}
div.product.type-product .flex-direction-nav a::before {
	content: "";
	width: 11px;
	height: 11px;
	border-top: 3px solid #ffffff;
	border-right: 3px solid #ffffff;
}
div.product.type-product .flex-direction-nav .flex-prev {
	left: 12px;
}
div.product.type-product .flex-direction-nav .flex-prev::before {
	transform: translateX(2px) rotate(-135deg);
}
div.product.type-product .flex-direction-nav .flex-next {
	right: 12px;
}
div.product.type-product .flex-direction-nav .flex-next::before {
	transform: translateX(-2px) rotate(45deg);
}
div.product.type-product .flex-direction-nav .flex-disabled {
	opacity: 0;
	pointer-events: none;
}

/* Full screen button */
div.product.type-product .woocommerce-product-gallery__trigger {
	top: 12px !important;
	right: 12px !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.55) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	z-index: 30;
}
div.product.type-product .woocommerce-product-gallery__trigger:hover {
	background: rgba(0, 0, 0, 0.8) !important;
}

/* Info panel */
div.product.type-product .summary .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--r21-black);
}
div.product.type-product .summary .price del {
	font-size: 18px;
	font-weight: 400;
	color: #8a8a8a;
}
div.product.type-product .summary .price ins {
	text-decoration: none;
}
div.product.type-product .summary .price .woocommerce-price-suffix {
	font-size: 14px;
	font-weight: 400;
	color: var(--r21-muted);
}
div.product.type-product .export-price {
	box-sizing: border-box;
	width: 100%;
	margin: 12px 0 0;
	padding: 12px 14px;
	background: #f6f6f6;
	border-radius: 8px;
	text-transform: none;
	font-size: 16px;
	line-height: 1.4;
	color: var(--r21-text);
}
div.product.type-product .export-price strong {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--r21-muted);
}
div.product.type-product .export-price br {
	display: none;
}
div.product.type-product .product_meta {
	display: inline-block;
	margin: 12px 0 0;
	padding: 5px 10px;
	border: 0;
	border-left: 3px solid var(--r21-yellow);
	border-radius: 4px;
	background: #f1f1f1;
	font-size: 13px;
	letter-spacing: 0.4px;
}
div.product.type-product .woocommerce-tabs {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--r21-line);
}
div.product.type-product .woocommerce-Tabs-panel h2.product-additional-information-heading {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--r21-muted);
}
div.product.type-product .woocommerce-Tabs-panel p {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--r21-text);
}
div.product.type-product .enquirebutton {
	display: block;
	width: 100%;
	margin-top: 20px;
	padding: 15px 20px;
	box-sizing: border-box;
	border: 0;
	border-radius: 8px;
	background: var(--r21-yellow);
	color: var(--r21-black);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
div.product.type-product .enquirebutton:hover {
	background: var(--r21-black);
	color: var(--r21-yellow);
}

/* ---------- Forms (product enquiry and contact page share form#enquire) ---------- */
.enquiryform {
	max-width: 920px;
	margin: 40px auto 20px;
	padding: 28px;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid var(--r21-line);
	border-radius: 12px;
}
.enquiryform .divider {
	display: none;
}
.enquiryform form::before {
	content: "Enquire about this item";
	grid-column: 1 / -1;
	margin-bottom: 4px;
	font-size: 22px;
	font-weight: 700;
	color: var(--r21-text);
}
form#enquire {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 18px;
	row-gap: 6px;
	align-items: end;
}
form#enquire label {
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--r21-text);
}
form#enquire label:nth-of-type(1) { grid-column: 1; grid-row: 2; }
form#enquire input[name="firstname"] { grid-column: 1; grid-row: 3; }
form#enquire label:nth-of-type(2) { grid-column: 2; grid-row: 2; }
form#enquire input[name="lastname"] { grid-column: 2; grid-row: 3; }
form#enquire label:nth-of-type(3) { grid-column: 1; grid-row: 4; }
form#enquire input[name="email"] { grid-column: 1; grid-row: 5; }
form#enquire label:nth-of-type(4) { grid-column: 2; grid-row: 4; }
form#enquire input[name="phone"] { grid-column: 2; grid-row: 5; }
form#enquire label:nth-of-type(5) { grid-column: 1 / -1; grid-row: 6; }
form#enquire textarea { grid-column: 1 / -1; grid-row: 7; }
form#enquire input[type="submit"] { grid-column: 1 / -1; grid-row: 8; }
form#enquire input[type="text"],
form#enquire input[type="email"],
form#enquire input[type="tel"],
form#enquire textarea {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 10px 14px;
	box-sizing: border-box;
	border: 1px solid #cfcfcf;
	border-radius: 8px;
	background: #fbfbfb;
	font-family: 'Roboto', sans-serif;
	font-size: 16px; /* 16px stops iOS zooming into the field */
	line-height: 1.4 !important;
	color: var(--r21-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
form#enquire textarea {
	height: auto;
	min-height: 140px;
}
form#enquire input[type="text"]:focus,
form#enquire input[type="email"]:focus,
form#enquire input[type="tel"]:focus,
form#enquire textarea:focus {
	outline: none;
	border-color: var(--r21-black);
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(254, 192, 15, 0.55);
}
form#enquire input[type="submit"] {
	justify-self: start;
	margin-top: 14px;
	padding: 14px 32px;
	border: 0;
	border-radius: 8px;
	background: var(--r21-yellow);
	color: var(--r21-black);
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	transition: background 0.15s ease, color 0.15s ease;
}
form#enquire input[type="submit"]:hover,
form#enquire input[type="submit"]:focus-visible {
	background: var(--r21-black);
	color: var(--r21-yellow);
}

/* ---------- Contact page ---------- */
.contact-form-map-holder {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	font-size: 16px;
}
.contactform,
.google-map {
	width: auto !important;
	margin: 0;
	padding: 26px !important;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid var(--r21-line);
	border-radius: 12px;
}
.contactform h2,
.google-map h2 {
	margin: 0 0 6px;
	font-size: 22px;
}
.google-map iframe {
	width: 100%;
	height: calc(100% - 44px);
	min-height: 420px;
	border-radius: 8px;
}

/* ---------- About page (classes in the page content) ---------- */
.r21-about {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	max-width: 1180px;
	margin: 10px auto 0;
}
.r21-about p {
	font-size: 17px;
	line-height: 1.7;
	color: #333333;
}
.r21-about .r21-lead {
	font-size: 21px;
	line-height: 1.55;
	color: var(--r21-text);
}
.r21-about-facts {
	position: sticky;
	top: 20px;
	padding: 24px;
	background: var(--r21-black);
	border-radius: 12px;
	border-top: 4px solid var(--r21-yellow);
	color: #ffffff;
}
.r21-about-facts h2 {
	margin: 0 0 14px;
	font-size: 20px;
	color: var(--r21-yellow);
}
.r21-about-facts dl {
	margin: 0;
}
.r21-about-facts dt {
	margin-top: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #a9a9a9;
}
.r21-about-facts dd {
	margin: 3px 0 0;
	font-size: 16px;
	line-height: 1.45;
}
.r21-about-facts a,
.r21-about-facts a:link,
.r21-about-facts a:visited {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.r21-about-why-title {
	max-width: 1180px;
	margin: 44px auto 16px;
	font-size: 26px;
}
.main-content ul.r21-why,
ul.r21-why {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
}
.main-content ul.r21-why li,
ul.r21-why li {
	position: relative;
	margin: 0;
	padding: 18px 18px 18px 52px;
	background: #ffffff;
	border: 1px solid var(--r21-line);
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--r21-text);
	list-style: none;
}
ul.r21-why li::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	background: var(--r21-yellow);
}
ul.r21-why li::after {
	content: "";
	position: absolute;
	left: 25px;
	top: 50%;
	width: 5px;
	height: 10px;
	margin-top: -7px;
	border-right: 2px solid var(--r21-black);
	border-bottom: 2px solid var(--r21-black);
	transform: rotate(45deg);
}
.main-content p.r21-about-close {
	max-width: 760px;
	margin: 36px auto 0;
	text-align: center;
	font-size: 18px;
	line-height: 1.6;
	color: var(--r21-text);
}
.main-content p.r21-about-cta {
	text-align: center;
	margin: 18px 0 10px;
}
.r21-about-cta a.contentbutton,
.r21-about-cta a.contentbutton:link,
.r21-about-cta a.contentbutton:visited {
	display: inline-block;
	float: none;
	padding: 14px 30px;
	border: 0;
	border-radius: 8px;
	background: var(--r21-yellow);
	color: var(--r21-black);
	font-weight: 700;
	text-decoration: none;
}
.r21-about-cta a.contentbutton:hover {
	background: var(--r21-black);
	color: var(--r21-yellow);
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
	.navlink {
		padding: 14px 12px;
	}
	.top-logo-holder {
		margin-right: 20px;
	}
	.main-content ul.r21-why,
	ul.r21-why {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Mobile and small tablet ---------- */
@media (max-width: 900px) {
	div.product.type-product {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"title"
			"gallery"
			"summary";
		grid-template-rows: auto;
		row-gap: 16px;
	}
	div.product.type-product > h1.product_title {
		margin: 0;
		font-size: 24px;
	}
	.contact-form-map-holder,
	.r21-about {
		grid-template-columns: minmax(0, 1fr);
	}
	.r21-about-facts {
		position: static;
	}
}
@media (max-width: 600px) {
	div.product.type-product > .summary,
	.enquiryform,
	.contactform,
	.google-map {
		padding: 18px !important;
	}
	div.product.type-product .summary .price {
		font-size: 28px;
	}
	form#enquire {
		grid-template-columns: minmax(0, 1fr);
	}
	form#enquire label:nth-of-type(1) { grid-column: 1; grid-row: 2; }
	form#enquire input[name="firstname"] { grid-column: 1; grid-row: 3; }
	form#enquire label:nth-of-type(2) { grid-column: 1; grid-row: 4; }
	form#enquire input[name="lastname"] { grid-column: 1; grid-row: 5; }
	form#enquire label:nth-of-type(3) { grid-column: 1; grid-row: 6; }
	form#enquire input[name="email"] { grid-column: 1; grid-row: 7; }
	form#enquire label:nth-of-type(4) { grid-column: 1; grid-row: 8; }
	form#enquire input[name="phone"] { grid-column: 1; grid-row: 9; }
	form#enquire label:nth-of-type(5) { grid-column: 1; grid-row: 10; }
	form#enquire textarea { grid-column: 1; grid-row: 11; }
	form#enquire input[type="submit"] { grid-column: 1; grid-row: 12; justify-self: stretch; }
	.main-content ul.r21-why,
	ul.r21-why {
		grid-template-columns: minmax(0, 1fr);
	}
	.r21-about .r21-lead {
		font-size: 19px;
	}
}

/* =====================================================================
   R21 QA fixes (2026-11-09): pagination, filter panel, sort, buttons,
   notices, page text width, search and 404 intro. Appended to
   responsive.css after the "R21 pages refresh" block.
   ===================================================================== */

/* ---------- Pagination ---------- */
.woocommerce nav.woocommerce-pagination {
	margin: 36px 0 12px;
	text-align: left;
}
.woocommerce nav.woocommerce-pagination ul {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li {
	float: none !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px !important;
	box-sizing: border-box;
	border: 1px solid var(--r21-line) !important;
	border-radius: 8px;
	background: #ffffff !important;
	color: var(--r21-text) !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
	border-color: var(--r21-black) !important;
	background: var(--r21-black) !important;
	color: var(--r21-yellow) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	border-color: var(--r21-yellow) !important;
	background: var(--r21-yellow) !important;
	color: var(--r21-black) !important;
}

/* ---------- Filter panel ---------- */
.filter-holder > h2 {
	margin: 0 0 12px;
	font-size: 20px;
}
.woof.woof_sid_auto_shortcode {
	padding: 16px !important;
	border: 1px solid var(--r21-line) !important;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: none !important;
}
.woof .woof_container {
	margin-bottom: 10px;
	padding: 0 !important;
	max-height: none !important; /* HUSKY sets 250px + overflow auto, which showed scrollbars */
	overflow: visible !important;
}
.woof .woof_container:last-of-type {
	margin-bottom: 0;
}
.woof input.woof_husky_txt-input,
.woof .woof_text_search_container input[type='search'] {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px solid #cfcfcf !important;
	border-radius: 8px;
	background: #fbfbfb !important;
	box-shadow: none !important;
	font-size: 15px;
	color: var(--r21-text);
}
.woof input.woof_husky_txt-input:focus,
.woof .woof_text_search_container input[type='search']:focus {
	outline: none;
	border-color: var(--r21-black) !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(254, 192, 15, 0.55) !important;
}
.woof .chosen-container {
	width: 100% !important;
	font-size: 15px;
}
.woof .chosen-container-single .chosen-single {
	height: 44px !important;
	padding: 0 0 0 14px !important;
	border: 1px solid #cfcfcf !important;
	border-radius: 8px !important;
	background: #fbfbfb !important;
	box-shadow: none !important;
	line-height: 42px !important;
	color: var(--r21-text);
}
.woof .chosen-container-single .chosen-single span {
	margin-right: 34px;
	line-height: 42px !important;
}
.woof .chosen-container-single .chosen-single div {
	top: 0 !important;
	right: 0 !important;
	width: 34px !important;
	height: 100% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.woof .chosen-container-single .chosen-single div b {
	display: none !important; /* sprite showed both arrows at this height */
}
.woof .chosen-container-single .chosen-single div::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 2px solid #555555;
	border-bottom: 2px solid #555555;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}
.woof .chosen-container-active.chosen-with-drop .chosen-single div::after {
	margin-top: 4px;
	transform: rotate(225deg);
}
.woof .chosen-container-active.chosen-with-drop .chosen-single {
	border-color: var(--r21-black) !important;
	border-radius: 8px 8px 0 0 !important;
	background: #ffffff !important;
	box-shadow: none !important;
}
.woof .chosen-container .chosen-drop {
	border-color: var(--r21-black);
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.woof .chosen-container .chosen-results li {
	padding: 8px 12px;
	line-height: 1.3;
}
.woof .chosen-container .chosen-results li.highlighted {
	background: var(--r21-yellow);
	color: var(--r21-black);
}
.woof .woof_reset_search_form,
.woof button.woof_reset_search_form {
	height: 40px;
	margin-top: 4px;
	padding: 0 18px;
	border: 1px solid var(--r21-black);
	border-radius: 8px;
	background: #ffffff;
	color: var(--r21-black);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}
.woof .woof_reset_search_form:hover {
	background: var(--r21-black);
	color: var(--r21-yellow);
}

/* Mobile "Show Filters and Search" toggle */
.filter-menu-button {
	border-radius: 8px;
	text-align: center;
}

/* ---------- Results row and sort ---------- */
select.orderby {
	height: 44px;
	max-width: 210px;
	padding: 0 2.4em 0 14px;
	border: 1px solid #cfcfcf;
	border-radius: 8px;
	background-color: #fbfbfb;
	font-size: 15px;
	color: var(--r21-text);
}
select.orderby:focus {
	border-color: var(--r21-black);
	box-shadow: 0 0 0 3px rgba(254, 192, 15, 0.55) !important;
}
p.woocommerce-result-count {
	font-size: 17px;
}

/* ---------- Notices ("No products were found" and form messages) ---------- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-no-products-found .woocommerce-info {
	margin: 0 0 20px;
	padding: 16px 18px !important;
	border: 1px solid var(--r21-line) !important;
	border-left: 4px solid var(--r21-yellow) !important;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: none !important;
	font-size: 16px;
	color: var(--r21-text);
}
.woocommerce-error {
	border-left-color: #c62828 !important;
}

/* ---------- Shared button (.contentbutton is used in page content) ---------- */
a.contentbutton,
a.contentbutton:link,
a.contentbutton:visited,
div.contentbutton {
	display: inline-block;
	float: none;
	padding: 14px 28px;
	border: 0;
	border-radius: 8px;
	background: var(--r21-yellow);
	color: var(--r21-black) !important;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
a.contentbutton:hover,
div.contentbutton:hover {
	background: var(--r21-black);
	color: var(--r21-yellow) !important;
}

/* ---------- Plain page text: keep lines readable ---------- */
.main-content > p,
.main-content > ul,
.main-content > ol,
.main-content > h2,
.main-content > h3 {
	max-width: 860px;
}
.main-content > p.r21-about-cta {
	max-width: none;
}

/* ---------- Search results and 404 intro ---------- */
.r21-intro--compact {
	padding: 30px 20px 26px;
}
.r21-intro--compact h1 {
	margin-bottom: 0;
}
.r21-intro--compact p {
	margin: 12px auto 0;
}
.r21-intro--compact .r21-intro-cta {
	margin-top: 22px;
}

@media (max-width: 768px) {
	.woocommerce nav.woocommerce-pagination {
		margin: 28px 0 8px;
	}
	select.orderby {
		max-width: 170px;
	}
	p.woocommerce-result-count {
		font-size: 14px;
	}
}