/*
Theme Name: RiteAV Shop
Description: Custom WooCommerce child theme for the RiteAV wall plate store, built from the Wall Plate Store Redesign handoff. Navy accent, Archivo, square corners, 2px rules.
Author: RiteAV
Template: storefront
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: riteav-shop
*/

/* ============================================================
   1. DESIGN TOKENS
   Every color, font and spacing value from the design lives here.
   Change a value once and it changes everywhere it is used.
   ============================================================ */

:root {
  /* Page colors */
  --rv-bg: #f3f2f2;
  --rv-surface: #eae9e9;
  --rv-text: #201e1d;
  --rv-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --rv-muted: #6b6966;

  /* Navy accent and its shades, light to dark */
  --rv-accent: #1b2a4a;
  --rv-accent-100: #eef1f7;
  --rv-accent-200: #dbe1ee;
  --rv-accent-300: #bcc7de;
  --rv-accent-400: #8a9bc0;
  --rv-accent-500: #4a5f8f;
  --rv-accent-600: #142240;
  --rv-accent-700: #0d1830;
  --rv-accent-800: #0a1224;
  --rv-accent-900: #060b18;

  /* Type */
  --rv-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rv-heading-weight: 800;

  /* Spacing */
  --rv-space-1: 4px;
  --rv-space-2: 8px;
  --rv-space-3: 12px;
  --rv-space-4: 16px;
  --rv-space-6: 24px;
  --rv-space-8: 32px;

  /* Shape: the design uses square corners and 2px rules */
  --rv-radius: 0px;
  --rv-rule: 2px;

  /* How wide the page runs. The design is drawn at 1280; the large screen rules at
     the end of the stylesheet raise it so a wide monitor is not mostly margin. The
     header, the content and the footer all read this one number. */
  --rv-page: 1280px;
}

/* ============================================================
   2. PAGE BASICS
   ============================================================ */

body {
  background-color: var(--rv-bg);
  color: var(--rv-text);
  font-family: var(--rv-font);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.widget-title {
  font-family: var(--rv-font);
  font-weight: var(--rv-heading-weight);
  color: var(--rv-text);
  letter-spacing: -0.01em;
}

a {
  color: var(--rv-accent);
}

a:hover,
a:focus {
  color: var(--rv-accent-600);
}

/* Square off every rounded corner the parent theme adds */
button,
input,
select,
textarea,
.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product a img {
  border-radius: var(--rv-radius);
}

/* There is no sidebar in this theme: inc/layout.php unhooks it. Storefront still
   reserves 26% of the page for one whenever the body carries right-sidebar, which left
   a wide empty strip down the side of the product page. Naming body as well as this
   theme's own class settles the width by specificity rather than by the body_class
   filter winning its race. */
body.rv-shop .content-area,
body.rv-shop .site-main {
	width: 100%;
	float: none;
	margin-right: 0;
}

/* ============================================================
   3. BUTTONS
   ============================================================ */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
button.button,
.button {
  background-color: var(--rv-accent);
  color: #ffffff;
  font-family: var(--rv-font);
  font-weight: 700;
  border: var(--rv-rule) solid var(--rv-accent);
  text-shadow: none;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
button.button:hover,
.button:hover {
  background-color: var(--rv-accent-600);
  border-color: var(--rv-accent-600);
  color: #ffffff;
}

/* Keyboard users must be able to see where they are */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
  outline: var(--rv-rule) solid var(--rv-accent);
  outline-offset: 2px;
}

/* ============================================================
   4. FOOTER
   The site header is built in section 7.
   ============================================================ */

.site-footer {
  background-color: var(--rv-surface);
  color: var(--rv-text);
  border-top: var(--rv-rule) solid var(--rv-divider);
}

.site-footer a {
  color: var(--rv-accent);
}

/* ============================================================
   5. PRODUCT LISTINGS
   Two columns on phones, as specified in the handoff.
   ============================================================ */

.woocommerce ul.products li.product {
  background-color: #ffffff;
  border: var(--rv-rule) solid var(--rv-divider);
  padding: var(--rv-space-3);
}

.woocommerce ul.products li.product .price {
  color: var(--rv-text);
  font-weight: 700;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem;
  font-weight: 600;
}

@media (max-width: 767px) {
  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    width: 48%;
    float: left;
    clear: none;
    margin-right: 4%;
  }

  .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n),
  .woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n) {
    margin-right: 0;
  }

  .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n+1),
  .woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n+1) {
    clear: both;
  }
}

/* ============================================================
   6. NOTICES
   ============================================================ */

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--rv-accent);
  border-radius: var(--rv-radius);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--rv-accent);
}

/* ============================================================
   7. SITE HEADER  (Mockup A: promo strip, navy bar, nav row)
   Values taken from the mockup canvas, panel 1a.
   ============================================================ */

.rv-promo {
  background: var(--rv-accent-100);
  color: var(--rv-accent-800);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: var(--rv-space-2) var(--rv-space-6);
}

.rv-bar {
  background: var(--rv-accent);
  color: #ffffff;
}

.rv-bar__inner,
.rv-nav__inner {
  max-width: var(--rv-page);
  margin: 0 auto;
  padding: 0 var(--rv-space-6);
}

/* The category row is a flex row of two things: the scrolling list of categories, and
   the More menu beside it. The More menu has to sit outside the scrolling list, because
   an element that scrolls on one axis clips the other and would trap the drop-down. */
.rv-nav__inner {
  display: flex;
  align-items: center;
  gap: 22px;
}

.rv-bar__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
  flex-wrap: wrap;
}

/* Logo */
.rv-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
}

.rv-logo:hover,
.rv-logo:focus {
  color: #ffffff;
}

.rv-logo__mark {
  flex: none;
}

.rv-logo__text {
  display: block;
  line-height: 1;
}

.rv-logo__name {
  display: block;
  font-family: var(--rv-font);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.rv-logo__sub {
  display: block;
  font-size: 10px;
  opacity: 0.75;
  margin-top: 3px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Search */
.rv-search {
  flex: 1 1 320px;
  max-width: 520px;
  display: flex;
  background: #ffffff;
  height: 44px;
  align-items: center;
  margin: 0;
}

.rv-search__field {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0 14px;
  font-family: var(--rv-font);
  font-size: 15px;
  color: var(--rv-text);
  min-width: 0;
}

.rv-search__field:focus {
  outline: none;
}

.rv-search:focus-within {
  outline: var(--rv-rule) solid #ffffff;
  outline-offset: 2px;
}

.rv-search__button {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rv-accent-700);
  border: 0;
  color: #ffffff;
  padding: 0;
}

.rv-search__button:hover {
  background: var(--rv-accent-800);
}

/* Help, account, cart */
.rv-utils {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  font-weight: 600;
  font-size: 14px;
}

.rv-utils__item,
.rv-cart {
  color: #ffffff;
  text-decoration: none;
}

.rv-utils__item:hover,
.rv-cart:hover,
.rv-utils__item:focus,
.rv-cart:focus {
  color: #ffffff;
  text-decoration: underline;
}

.rv-cart {
  display: flex;
  gap: var(--rv-space-2);
  align-items: center;
}

.rv-cart__count {
  width: 22px;
  height: 22px;
  background: #ffffff;
  color: var(--rv-accent);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Category row */
.rv-nav {
  background: var(--rv-accent);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.rv-nav__list {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 1 auto;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.rv-nav__list::-webkit-scrollbar {
  display: none;
}

.rv-nav__list li {
  flex: none;
  margin: 0;
  list-style: none;
}

.rv-nav__list a {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.rv-nav__list a:hover,
.rv-nav__list a:focus {
  color: #ffffff;
  text-decoration: underline;
}

/* The More menu, holding every category that did not fit on the row.
   It opens on hover and on keyboard focus, so it needs no JavaScript. */
.rv-nav__more {
  position: relative;
  flex: none;
}

/* The More link is no longer inside .rv-nav__list, so it carries its own type styling
   rather than inheriting the row's. */
.rv-nav__more-link {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.rv-nav__more-link:hover,
.rv-nav__more-link:focus {
  color: #ffffff;
  text-decoration: underline;
}

.rv-nav__caret {
  display: inline-block;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
}

.rv-nav__drop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  display: none;
  min-width: 260px;
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #ffffff;
  border: var(--rv-rule) solid var(--rv-accent);
}

.rv-nav__more:hover .rv-nav__drop,
.rv-nav__more:focus-within .rv-nav__drop {
  display: block;
}

.rv-nav__drop li {
  display: block;
  width: 100%;
}

.rv-nav__drop a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  color: var(--rv-text);
  font-weight: 400;
  white-space: normal;
}

.rv-nav__drop a:hover,
.rv-nav__drop a:focus {
  color: var(--rv-text);
  background: var(--rv-surface);
  text-decoration: none;
}

.rv-nav__count {
  color: var(--rv-text);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

/* The parent theme's own header bits stay hidden */
.site-header .site-branding,
.site-header .site-search,
.site-header .storefront-primary-navigation {
  display: none;
}

.site-header {
  padding: 0;
  border-bottom: 0;
  background-color: var(--rv-accent);
}

/* Phones: logo on its own line, search full width, nav scrolls sideways */
@media (max-width: 767px) {
  .rv-bar__inner {
    gap: var(--rv-space-3);
    padding-top: var(--rv-space-3);
    padding-bottom: var(--rv-space-3);
  }

  .rv-search {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }

  .rv-utils {
    gap: var(--rv-space-4);
    font-size: 13px;
  }
}
/* ============================================================
   8. FORM FIELDS
   Storefront gives every input border: 0 and a #f2f2f2 background,
   one digit from the page color, so the boxes have no visible edge.
   These rules pick fields by what they are NOT, so a type that is
   not listed anywhere - or one a plugin adds later - is still white.
   The header search box keeps its own look and is left out.
   ============================================================ */

input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=image]):not([type=range]):not([type=color]):not([type=hidden]):not(.rv-search__field),
textarea,
select {
	background-color: #ffffff;
	border: var(--rv-rule) solid var(--rv-divider);
	box-shadow: none;
	color: var(--rv-text);
}

/* Navy edge while the box is in use. */
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=image]):not([type=range]):not([type=color]):not([type=hidden]):not(.rv-search__field):focus,
textarea:focus,
select:focus {
	background-color: #ffffff;
	border-color: var(--rv-accent);
}

/* Browsers paint a remembered value yellow or blue and ignore */
/* background-color, so the fill is painted with a shadow instead. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	box-shadow: 0 0 0 100px #ffffff inset;
	-webkit-box-shadow: 0 0 0 100px #ffffff inset;
	-webkit-text-fill-color: var(--rv-text);
	caret-color: var(--rv-text);
}

/* The label above each field, so a long checkout form stays readable. */
.woocommerce form .form-row label {
	font-weight: 600;
	color: var(--rv-text);
}

/* ============================================================
   9. The Narrow Results filter column on product listings
   ============================================================ */

.rv-shop {
	display: flex;
	align-items: flex-start;
	gap: 2.4em;
}

.rv-filters {
	flex: 0 0 15.625em;
	max-width: 15.625em;
}

/* min-width lets the listing column shrink instead of pushing the
   filters off the side when a product name runs long. */
.rv-shop__main {
	flex: 1 1 auto;
	min-width: 0;
}

.rv-filters__title {
	margin: 0 0 .6180469716em;
	font-family: var(--rv-font);
	font-size: 1.125em;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--rv-text);
}

/* Each panel is a box with a rule between it and the next one. */
.rv-filter {
	border: var(--rv-rule) solid var(--rv-divider);
	border-bottom: 0;
	background: #ffffff;
}

.rv-filter:last-child {
	border-bottom: var(--rv-rule) solid var(--rv-divider);
}

.rv-filter__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .6180469716em .8em;
	font-family: var(--rv-font);
	font-size: .9375em;
	font-weight: 700;
	color: var(--rv-text);
	background: var(--rv-surface);
	list-style: none;
}

/* The default triangle is replaced by a plus that turns into a minus,
   which is what the design shows at the end of each row. */
.rv-filter__title::-webkit-details-marker {
	display: none;
}

.rv-filter__title::after {
	content: "+";
	margin-left: .8em;
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1;
	color: var(--rv-accent);
}

.rv-filter[open] > .rv-filter__title::after {
	content: "\2013";
}

.rv-filter__body {
	padding: .4em .8em .6180469716em;
}

/* Length carries 57 sizes, so every list scrolls inside its own panel
   rather than making the column taller than the products beside it. */
.rv-filter__list,
.rv-filter .woocommerce-widget-layered-nav-list {
	max-height: 16.25em;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each row is the list item, not the link. The two lists are built differently:
   the category list puts the box, the name and the count inside one link, while
   WooCommerce leaves the count outside the link as a sibling. Making the item
   the row keeps both on a single line. */
.rv-filter__item,
.rv-filter .woocommerce-widget-layered-nav-list__item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	font-size: .875em;
	line-height: 1.5;
	list-style: none;
}

/* The category link holds three children of its own. */
.rv-filter__item > a {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	padding: .25em 0;
	text-decoration: none;
	color: var(--rv-text);
}

/* The attribute link holds only the term name, so it stays a plain block and
   a long name is cut with an ellipsis rather than wrapped onto a second line. */
.rv-filter .woocommerce-widget-layered-nav-list__item > a {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding: .25em 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none;
	color: var(--rv-text);
}

.rv-filter__item > a:hover .rv-filter__name,
.rv-filter .woocommerce-widget-layered-nav-list__item > a:hover {
	text-decoration: underline;
}

.rv-filter__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* The count sits at the end of its own row and never breaks away onto a line
   of its own. */
.rv-filter__count,
.rv-filter .woocommerce-widget-layered-nav-list__item > .count {
	flex: 0 0 auto;
	margin-left: .5em;
	font-size: .875em;
	white-space: nowrap;
	color: var(--rv-muted);
}

/* The square in front of each row. The attribute lists come from
   WooCommerce without one, so it is drawn on the link instead. */
.rv-filter__box,
.rv-filter .woocommerce-widget-layered-nav-list__item > a::before {
	flex: 0 0 auto;
	width: .875em;
	height: .875em;
	margin-right: .5em;
	border: var(--rv-rule) solid var(--rv-divider);
	background: #ffffff;
	content: "";
}

/* That link is not a flex row, so its square is placed inline instead. */
.rv-filter .woocommerce-widget-layered-nav-list__item > a::before {
	display: inline-block;
	vertical-align: -.0625em;
}

.rv-filter__item.is-on > a .rv-filter__box,
.rv-filter .woocommerce-widget-layered-nav-list__item--chosen > a::before {
	border-color: var(--rv-accent);
	background: var(--rv-accent);
}

.rv-filter__item.is-on > a,
.rv-filter .woocommerce-widget-layered-nav-list__item--chosen > a {
	font-weight: 700;
}

/* A term with no products left is printed as plain text, so it lines up
   with the rows that still have a box in front of them. The :not() matters:
   the count is a span of this same item, and without it the count was given
   display:block and dropped onto a line of its own under every term. */
.rv-filter .woocommerce-widget-layered-nav-list__item > span:not(.count) {
	flex: 1 1 auto;
	min-width: 0;
	padding: .25em 0 .25em 1.375em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--rv-muted);
}

/* The chips for filters already chosen, above the panels. */
.rv-filters__active {
	margin-bottom: .8em;
}

.rv-filters__active-title {
	margin: 0 0 .4em;
	font-family: var(--rv-font);
	font-size: .875em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--rv-text);
}

.rv-filters__active ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rv-filters__active li {
	margin: 0 0 .25em;
	padding: 0;
	font-size: .875em;
	list-style: none;
}

.rv-filters__active li a {
	color: var(--rv-accent);
}

/* The price slider, in the theme's own colors. */
.rv-filter--price .price_slider_wrapper {
	padding-top: .4em;
}

.rv-filter--price .ui-slider {
	position: relative;
	height: .375em;
	margin-bottom: 1em;
	border: 0;
	border-radius: 0;
	background: var(--rv-divider);
}

.rv-filter--price .ui-slider .ui-slider-range {
	position: absolute;
	top: 0;
	height: 100%;
	border-radius: 0;
	background: var(--rv-accent);
}

.rv-filter--price .ui-slider .ui-slider-handle {
	position: absolute;
	top: -.25em;
	width: .875em;
	height: .875em;
	margin-left: -.4375em;
	border: 0;
	border-radius: 0;
	background: var(--rv-accent);
	cursor: default;
}

.rv-filter--price .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5em;
	font-size: .875em;
}

.rv-filter--price .price_slider_amount .button {
	padding: .4em .8em;
	font-size: .875em;
}

.rv-filter--price .price_label {
	color: var(--rv-text);
}

/* Phones and small tablets: the filters sit above the products, with
   shorter lists so the shopper is not scrolling past them to shop. */
@media (max-width: 768px) {

	.rv-shop {
		display: block;
	}

	.rv-filters {
		max-width: none;
		margin-bottom: 1.6em;
	}

	.rv-filter__list,
	.rv-filter .woocommerce-widget-layered-nav-list {
		max-height: 11.25em;
	}
}


/* ============================================================
   10. The product card on listing pages (Mockup A)
   ============================================================ */

/* The grid. Storefront floats its columns; a grid keeps every card in a row
   the same height whatever the name length, with no clearfix to maintain.

   Every rule here carries .woocommerce-page AND .site-main on purpose. Storefront's
   own `.site-main ul.products li.product` scores the same as a one-class rule of
   ours, and its woocommerce.css loads AFTER our stylesheet, so an equal-specificity
   override silently loses and its 29.4% width is applied to a grid track instead of
   a row - which collapsed every card to a column one letter wide. */
.rv-shop__main ul.products,
.woocommerce-page .site-main ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(var(--rv-cards, 4), minmax(0, 1fr));
	gap: 1.2em;
	margin: 0 0 1.6em;
	padding: 0;
	list-style: none;
}

.rv-shop__main ul.products::before,
.rv-shop__main ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none;
}

/* Storefront sets a percentage width, a float and a right margin on each card.
   The grid track gives them their width, so all three are cleared - and the
   selector names .site-main so it outranks the rule doing it. */
.woocommerce-page .site-main ul.products li.product,
.rv-shop__main ul.products li.product {
	display: flex;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	margin-right: 0;
	padding: .75em;
	flex-direction: column;
	gap: .4em;
	min-width: 0;
	border: 1px solid var(--rv-divider);
	background: #ffffff;
}

/* The picture is square, so a row of cards lines up whatever shape the photo is. */
.woocommerce-page .site-main ul.products li.product a img {
	width: 100%;
	margin: 0 0 .4em;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--rv-surface);
}

/* The sale badge sits at the top left of the card rather than over the picture. */
.woocommerce-page .site-main ul.products li.product .onsale {
	position: static;
	display: inline-flex;
	align-self: flex-start;
	min-height: 0;
	margin: 0;
	padding: .15em .6em;
	font-family: var(--rv-font);
	font-size: .75em;
	font-weight: 600;
	line-height: 1.6;
	border-radius: 0;
	color: #ffffff;
	background: var(--rv-accent);
}

.woocommerce-page .site-main ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-family: var(--rv-font);
	font-size: .875em;
	font-weight: 400;
	line-height: 1.35;
	color: var(--rv-text);
}

.woocommerce-page .site-main ul.products li.product .price {
	margin: 0;
	font-family: var(--rv-font);
	font-size: 1.125em;
	font-weight: 800;
	color: var(--rv-text);
}

/* A product that is on sale shows the old price struck through beside the new one. */
.woocommerce-page .site-main ul.products li.product .price del {
	margin-right: .4em;
	font-size: .6875em;
	font-weight: 400;
	color: var(--rv-muted);
}

.woocommerce-page .site-main ul.products li.product .price ins {
	text-decoration: none;
}

/* Storefront writes the card width three times - plainly, with a .columns-N class on
   the list, and again behind .storefront-full-width-content for a page with no sidebar
   widgets. The last of those carries five classes, which outscores the rules above and
   put a 22% width back on a card that is already a grid cell, one letter wide. Naming
   body as well as the rv-shop class added in inc/layout.php settles it by a count that
   does not depend on which sheet loaded last. */
body.rv-shop.woocommerce-page .site-main ul.products li.product {
	float: none;
	width: auto;
	max-width: none;
	margin-right: 0;
}

.rv-card__stock,
.rv-card__color {
	margin: 0;
	font-size: .75em;
	line-height: 1.4;
	color: var(--rv-muted);
}

.rv-card__stock--in {
	font-weight: 600;
	color: var(--rv-accent);
}

.rv-card__stock--out {
	color: var(--rv-muted);
}

/* Add to Cart sits at the bottom of every card, so the buttons line up across
   a row even when one name runs to two lines. */
.woocommerce-page .site-main ul.products li.product .button {
	width: 100%;
	margin: auto 0 0;
	padding: .5em .8em;
	font-family: var(--rv-font);
	font-size: .8125em;
	font-weight: 600;
	text-align: center;
	border: var(--rv-rule) solid var(--rv-accent);
	border-radius: 0;
	color: var(--rv-accent);
	background: #ffffff;
}

.woocommerce-page .site-main ul.products li.product .button:hover {
	color: #ffffff;
	background: var(--rv-accent);
}

.woocommerce-page .site-main ul.products li.product .added_to_cart {
	font-size: .75em;
	text-align: center;
}

/* Three across once the filter column has taken its width, two on a tablet,
   two on a phone - the design keeps listings at two columns on mobile. */
@media (max-width: 1100px) {

	.rv-shop__main ul.products,
	.woocommerce-page ul.products {
		--rv-cards: 3;
	}
}

@media (max-width: 768px) {

	.rv-shop__main ul.products,
	.woocommerce-page ul.products {
		--rv-cards: 2;
		gap: .8em;
	}
}

/* ============================================================
   11. Approved category layout below the existing site header
   ============================================================ */

body.rv-catalog { background: #fff; }
/* The design is drawn on a 1280px page and the header above is built to that width,
   so the content below it matches. Storefront's own cap is 66.5em, about 1064px, which
   left the header wider than the page under it and gave the product page's three
   columns 200px less than they are drawn for. Naming the wrapper on its own rather
   than the content area covers the footer and the breadcrumb as well, so nothing on
   the page sits to a different edge. Michelle agreed to the whole site on 2026-10-12. */
body.rv-shop .col-full {
    box-sizing: border-box;
    max-width: var(--rv-page);
    margin: 0 auto;
    padding: 0 24px;
}

/* The body is a flex column, so the page wrapper inside it shrinks to fit its content
   instead of filling the window - which quietly capped the page about 200px short of
   its own max-width on a wide monitor. */
body.rv-shop #page,
body.rv-shop #content {
    width: 100%;
}
.rv-catalog #primary { width: 100%; float: none; margin: 0; }
.rv-catalog .storefront-breadcrumb { margin: 0; padding: 20px 0 8px; }
.rv-catalog .woocommerce-breadcrumb { margin: 0; font-size: 12px; }
.rv-catalog .site-main .woocommerce-products-header {
    padding: 0;
    margin: 0 0 18px;
    text-align: left;
}
.rv-catalog .site-main .woocommerce-products-header h1 {
    margin: 0;
    font-size: 34px;
    line-height: 1.2;
}
.rv-catalog .term-description { font-size: 14px; margin-top: 12px; }
.rv-category-tiles {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 6);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 24px;
}
.rv-category-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid #d8d8d8;
    color: var(--rv-text);
    font-size: 13px;
    text-decoration: none;
}
.rv-category-tile img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    background: #f4f4f4;
}
.rv-category-tile__name { padding: 10px 12px 2px; font-weight: 700; }
.rv-category-tile__count { padding: 0 12px 10px; color: var(--rv-muted); font-size: 12px; }
.rv-category-tile:hover { border-color: var(--rv-accent); }
.rv-catalog .rv-shop { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; }
.rv-catalog .rv-filters { width: 250px; max-width: none; font-size: 13px; }
.rv-catalog .rv-filters__title { margin: 0 0 12px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.rv-catalog .rv-filter,
.rv-catalog .rv-filter:last-child { border: 0; border-bottom: 1px solid #d8d8d8; padding: 14px 0; }
.rv-catalog .rv-filter:first-of-type { padding-top: 0; }
.rv-catalog .rv-filter__title { padding: 0; background: transparent; font-size: 13px; font-weight: 800; }
.rv-catalog .rv-filter__body { padding: 8px 0 0; }
.rv-catalog .rv-filter__list,
.rv-catalog .rv-filter .woocommerce-widget-layered-nav-list { max-height: 280px; }
.rv-catalog .rv-filter__name { white-space: normal; }
.rv-catalog .rv-filter__item > a { padding: 4px 0; }
.rv-catalog .rv-filter__box { width: 14px; height: 14px; border-width: 1px; }
.rv-catalog .rv-filter__count { font-size: 12px; }
.rv-catalog .site-main .storefront-sorting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 13px;
}
.rv-catalog .storefront-sorting::before,
.rv-catalog .storefront-sorting::after { display: none; }
.rv-catalog .woocommerce-ordering { order: 3; margin: 0 0 0 auto; padding: 0; float: none; }
.rv-catalog .woocommerce-ordering select {
    width: 220px;
    max-width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #b5b5b5;
    font: inherit;
}
.rv-catalog .woocommerce-result-count { margin: 0; padding: 0; float: none; color: var(--rv-muted); }
.rv-catalog .rv-filters__active { margin: 0; }
.rv-catalog .rv-filters__active-title { display: none; }
.rv-catalog .rv-filters__active ul { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-catalog .rv-filters__active li { margin: 0; }
.rv-catalog .rv-filters__active a { display: block; padding: 4px 8px; background: var(--rv-accent-100); text-decoration: none; }

/* Include the column class and catalog scope to outrank Storefront's floats. */
.rv-catalog .site-main .rv-shop__main ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 24px;
}
.rv-catalog .site-main .rv-shop__main ul.products[class*="columns-"] li.product {
    box-sizing: border-box;
    width: 100%;
    float: none;
    clear: none;
    margin: 0;
    padding: 12px;
    border: 1px solid #d8d8d8;
    text-align: left;
    gap: 6px;
}
.rv-catalog .site-main ul.products li.product .woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
}
.rv-catalog .site-main ul.products li.product a img { margin: 0; background: #f4f4f4; }
.rv-catalog .site-main ul.products li.product .woocommerce-loop-product__title { margin: 0; min-height: 3.78em; font-size: 14px; }
.rv-catalog .site-main ul.products li.product .star-rating { margin: 0; font-size: 12px; }
.rv-catalog .site-main ul.products li.product .price { font-size: 18px; }
.rv-catalog .site-main ul.products li.product .button { min-height: 40px; font-size: 13px; }
.rv-catalog .woocommerce-pagination { margin: 8px auto 24px; float: none; }
.rv-catalog .woocommerce-pagination .page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rv-catalog .woocommerce-pagination .page-numbers li { margin: 0; }
.rv-catalog .woocommerce-pagination .page-numbers a,
.rv-catalog .woocommerce-pagination .page-numbers span { min-width: 36px; padding: 8px 12px; background: #fff; border: 1px solid #d8d8d8; }
.rv-catalog .woocommerce-pagination .page-numbers .current { color: #fff; background: var(--rv-accent); border-color: var(--rv-accent); }
/* A filter heading is clickable, so it gets the hand cursor an anchor already has.
   The rule that used to sit here set cursor: default on every link and button in the
   content column - a guide-page convention that does not belong on a storefront. */
.rv-catalog #content summary { cursor: pointer; }
.rv-filter-toggle, .rv-filters__close, .rv-filter-backdrop { display: none; }

@media (min-width: 768px) and (max-width: 1050px) {
    .rv-catalog .rv-shop { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
    .rv-catalog .rv-filters { width: 210px; }
    .rv-catalog .site-main .rv-shop__main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rv-category-tiles { grid-auto-columns: calc((100% - 36px) / 4); }
}
@media (max-width: 767px) {
    .rv-catalog #content > .col-full,
    .rv-catalog .storefront-breadcrumb > .col-full { padding: 0 16px; }
    .rv-catalog .site-main .woocommerce-products-header h1 { font-size: 26px; }
    .rv-category-tiles { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; margin-bottom: 16px; }
    .rv-category-tile { flex: 0 0 auto; }
    .rv-category-tile img, .rv-category-tile__count { display: none; }
    .rv-category-tile__name { padding: 8px 12px; }
    .rv-catalog .rv-shop { display: block; }
    .rv-catalog .rv-filters { width: 100%; }
    .rv-catalog .site-main .rv-shop__main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .rv-catalog .site-main .rv-shop__main ul.products[class*="columns-"] li.product { padding: 10px; }
    .rv-catalog .site-main ul.products li.product .woocommerce-loop-product__title { font-size: 13px; }
    .rv-catalog .woocommerce-ordering { flex: 1; min-width: 0; order: 0; }
    .rv-catalog .woocommerce-ordering select { width: 100%; font-size: 12px; }
    .rv-catalog .woocommerce-result-count { flex-basis: 100%; order: 2; }
    .rv-catalog .rv-filters__active { order: 3; flex-basis: 100%; }
    .rv-filters-ready .rv-filter-toggle { display: block; order: -1; min-height: 44px; padding: 8px 16px; border: 1px solid var(--rv-accent); background: #fff; color: var(--rv-accent); }
    .rv-filters-ready .rv-filters { display: none; }
    .rv-filters-open { overflow: hidden; }
    .rv-filters-open .rv-filters {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100001;
        width: min(360px, 90vw);
        height: 100dvh;
        overflow-y: auto;
        padding: 20px;
        background: #fff;
        margin: 0;
        box-shadow: -4px 0 24px #0002;
    }
    .rv-filters-open .rv-filters__close { display: block; margin: 0 0 20px auto; background: #fff; color: var(--rv-accent); border: 1px solid var(--rv-accent); padding: 8px 12px; }
    .rv-filters-open .rv-filter-backdrop { display: block; position: fixed; inset: 0; z-index: 100000; background: #0005; width: 100%; height: 100%; border: 0; cursor: default; }
}

/* ============================================================
   12. The product page (Mockup A, panel 1e)
   Three columns: the gallery, the details, and a bordered buy box. Under them,
   About this item on the left and the Specifications table on the right.

   Every rule names .single-product div.product on purpose. This sheet loads after
   Storefront's woocommerce.css, so an override that matches its specificity wins -
   but one that scores lower loses however late it loads, which is the trap that
   collapsed the product cards.
   ============================================================ */

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 40px;
	row-gap: 28px;
	align-items: start;
	overflow: visible;
}

/* Storefront clears its floats with two pseudo-elements. In a grid each one is an
   empty cell, which pushes everything along by two places. */
.single-product div.product::before,
.single-product div.product::after {
	content: none;
	display: none;
}

/* The three cells of the top row. Storefront floats the gallery and the summary and
   gives each a percentage width; the grid track decides the width here.

   Both selectors carry the element's second class - .images on the gallery and
   .entry-summary on the details - to reach four classes. Storefront writes each of
   those widths twice, once plainly and once behind .storefront-full-width-content,
   and that second copy outscores a three-class override: on a site whose sidebar
   holds no widgets it shrank the gallery to 39% of its own grid track. */
.single-product div.product .woocommerce-product-gallery.images {
	grid-column: 1;
	grid-row: 1;
	float: none;
	width: auto;
	margin: 0;
}

/* The bullets sit under the picture, in the same half of the page. */
.single-product div.product .rv-short {
	grid-column: 1;
	grid-row: 2;
}

/* The right-hand half: the title, the item code and the colour, then the buy box. */
.single-product div.product .rv-right {
	display: flex;
	grid-column: 2;
	grid-row: 1 / span 2;
	flex-direction: column;
	gap: 22px;
}

.single-product div.product .summary.entry-summary {
	display: flex;
	float: none;
	width: auto;
	margin: 0;
	flex-direction: column;
	gap: 10px;
}

/* The buy box keeps a sensible width however wide the half it sits in grows. */
.single-product div.product .rv-buybox {
	max-width: 420px;
}

/* About this item runs under both halves. */
.single-product div.product .woocommerce-tabs {
	grid-column: 1 / span 2;
	grid-row: 3;
	clear: none;
	margin: 0;
}

/* Anything WooCommerce adds after that runs the full width. */
.single-product div.product .upsells,
.single-product div.product .related {
	grid-column: 1 / span 2;
	width: auto;
	float: none;
	margin: 0;
}

/* The sale badge sits over the top left corner of the picture. It is printed as a
   sibling of the gallery rather than inside it, so it is taken out of the grid and
   placed against the product box, whose top left corner is the gallery's. */
.single-product div.product .onsale {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	min-height: 0;
	margin: 0;
	padding: .2em .7em;
	font-family: var(--rv-font);
	font-size: .8125em;
	font-weight: 600;
	line-height: 1.6;
	border: 0;
	border-radius: 0;
	color: #ffffff;
	background: var(--rv-accent);
}

/* The breadcrumb above the page, kept small and quiet. */
.single-product .woocommerce-breadcrumb {
	margin: 0;
	font-size: .8125em;
	color: var(--rv-muted);
}

/* Storefront slides a previous and next product panel in from the screen edges on
   hover. The design has no such thing, and over this layout it reads as a fault. */
.single-product .storefront-product-pagination {
	display: none;
}

/* ---- The gallery ---------------------------------------------------------- */

/* A square picture tile on the surface gray, so a tall photo and a wide one take up
   the same room - the same treatment the product cards use. */
.single-product div.product .woocommerce-product-gallery.images .woocommerce-product-gallery__image {
	aspect-ratio: 1;
	background: var(--rv-surface);
}

.single-product div.product .woocommerce-product-gallery.images .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

.single-product div.product .woocommerce-product-gallery.images .flex-viewport {
	margin-bottom: 8px;
}

/* Five thumbnails across, as in the design. Storefront floats them and works out a
   percentage width from the column count; a grid keeps them even however many the
   product has. */
.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
}

.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs::before,
.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs::after {
	content: none;
	display: none;
}

/* The widest rule Storefront has for a thumbnail carries six classes - the full-width
   body class, the gallery's column count and the thumbnail list - and sets a width of
   11% with a float, which inside a grid track left each thumbnail eight pixels wide.
   Naming the body and this theme's own class answers it on count. */
body.rv-shop.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs li {
	float: none;
	width: auto;
	margin: 0;
}

/* Storefront fades every thumbnail but the open one. The design marks the open one
   with the navy outline instead, so all of them stay readable. */
.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs li img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border: 1px solid var(--rv-divider);
	background: var(--rv-surface);
	opacity: 1;
}

.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs li img.flex-active {
	border: var(--rv-rule) solid var(--rv-accent);
}

/* ---- The details column --------------------------------------------------- */

.single-product div.product .summary .product_title {
	margin: 0;
	padding: 0;
	font-family: var(--rv-font);
	font-size: 1.625em;
	font-weight: var(--rv-heading-weight);
	line-height: 1.25;
	color: var(--rv-text);
}

.rv-single__sku,
.rv-single__color {
	margin: 0;
	font-size: .875em;
	line-height: 1.4;
	color: var(--rv-muted);
}

.rv-single__sku span,
.rv-single__color strong {
	font-weight: 600;
	color: var(--rv-text);
}

.single-product div.product .summary .woocommerce-product-rating {
	margin: 0;
	font-size: .875em;
}

/* The bullets under the picture, set off from it by a thin rule. */
.single-product div.product .rv-short {
	padding-top: 16px;
	font-size: .9375em;
	line-height: 1.6;
	border-top: 1px solid var(--rv-divider);
}

.single-product div.product .rv-short ul {
	margin: 0 0 0 1.2em;
	padding: 0;
}

.single-product div.product .rv-short li {
	margin: 0 0 .4em;
}

.single-product div.product .rv-short p {
	margin: 0 0 .6em;
}

/* ---- The buy box ---------------------------------------------------------- */

.rv-buybox {
	display: flex;
	padding: 18px;
	flex-direction: column;
	gap: 10px;
	border: var(--rv-rule) solid var(--rv-accent);
	background: #ffffff;
}

.single-product div.product .rv-buybox .price {
	margin: 0;
	font-family: var(--rv-font);
	font-size: 2em;
	font-weight: var(--rv-heading-weight);
	line-height: 1.1;
	color: var(--rv-text);
}

/* A product sold in several lengths shows a range, which needs more room than one
   price, so it is set a size smaller. */
.product-type-variable .rv-buybox .price {
	font-size: 1.375em;
}

.single-product div.product .rv-buybox .price del {
	margin-right: .4em;
	font-size: .4375em;
	font-weight: 400;
	color: var(--rv-muted);
}

.single-product div.product .rv-buybox .price ins {
	text-decoration: none;
}

.rv-buybox__saving {
	align-self: flex-start;
	margin: 0;
	padding: .15em .6em;
	font-size: .75em;
	font-weight: 600;
	color: #ffffff;
	background: var(--rv-accent);
}

.rv-buybox__stock {
	margin: 0;
	font-size: .8125em;
	line-height: 1.4;
}

.rv-buybox__stock--in {
	font-weight: 700;
	color: var(--rv-accent);
}

.rv-buybox__stock--out {
	color: var(--rv-muted);
}

/* The cart form. A simple product puts the quantity and the button on one line; a
   product with lengths stacks the menu above them. */
.single-product div.product .rv-buybox form.cart {
	display: flex;
	margin: 0;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.single-product div.product .rv-buybox form.cart::before,
.single-product div.product .rv-buybox form.cart::after {
	content: none;
	display: none;
}

.single-product div.product .rv-buybox form.variations_form {
	flex-direction: column;
	align-items: stretch;
}

/* Storefront prints the rows of the length menu as list items. The label reads
   better above its menu, so each part is a block of its own. */
.single-product div.product .rv-buybox table.variations {
	display: block;
	margin: 0;
	border: 0;
}

.single-product div.product .rv-buybox table.variations tbody,
.single-product div.product .rv-buybox table.variations tr {
	display: block;
}

.single-product div.product .rv-buybox table.variations th.label,
.single-product div.product .rv-buybox table.variations td.value {
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

.single-product div.product .rv-buybox table.variations th.label {
	padding-bottom: 4px;
	font-size: .8125em;
	font-weight: 600;
	text-align: left;
}

.single-product div.product .rv-buybox table.variations select {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.single-product div.product .rv-buybox .reset_variations {
	display: inline-block;
	margin: 6px 0 0;
	font-size: .8125em;
}

.single-product div.product .rv-buybox .single_variation_wrap {
	width: 100%;
}

.single-product div.product .rv-buybox .single_variation .price {
	margin: 0 0 6px;
	font-size: 1.375em;
}

.single-product div.product .rv-buybox .woocommerce-variation-availability p {
	margin: 0 0 6px;
	font-size: .8125em;
	color: var(--rv-muted);
}

.single-product div.product .rv-buybox .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.single-product div.product .rv-buybox .woocommerce-variation-add-to-cart::before,
.single-product div.product .rv-buybox .woocommerce-variation-add-to-cart::after {
	content: none;
	display: none;
}

.single-product div.product .rv-buybox .quantity {
	float: none;
	margin: 0;
	flex: 0 0 auto;
}

.single-product div.product .rv-buybox .quantity .qty {
	width: 72px;
	min-height: 44px;
	text-align: center;
}

.single-product div.product .rv-buybox .single_add_to_cart_button {
	min-height: 44px;
	padding: .6em 1em;
	font-family: var(--rv-font);
	font-size: .9375em;
	font-weight: 700;
	border-radius: 0;
	flex: 1 1 140px;
}

/* ---- The specifications box ----------------------------------------------- */

/* The box reads under the description rather than beside it, so it is held to a
   readable width instead of stretching the whole page. */
.rv-specs {
	max-width: 560px;
	margin: 28px 0 0;
	padding: 16px;
	border: 1px solid var(--rv-divider);
	background: #ffffff;
}

.rv-specs__title {
	margin: 0 0 10px;
	font-family: var(--rv-font);
	font-size: 1.125em;
	font-weight: var(--rv-heading-weight);
	color: var(--rv-text);
}

.rv-specs table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: .8125em;
	line-height: 1.5;
}

.rv-specs th,
.rv-specs td {
	padding: 7px 0;
	border: 0;
	border-bottom: 1px solid var(--rv-divider);
	font-weight: 400;
	text-align: left;
	vertical-align: top;
	background: none;
}

.rv-specs th {
	width: 42%;
	padding-right: 10px;
	color: var(--rv-muted);
}

.rv-specs tr:last-child th,
.rv-specs tr:last-child td {
	border-bottom: 0;
}

.rv-specs__category {
	margin: 10px 0 0;
	font-size: .8125em;
	color: var(--rv-muted);
}

/* ---- About this item ------------------------------------------------------ */

/* Storefront stands the tab titles in a narrow column on the left with the panel
   beside them. The design reads them across the top with a rule underneath. */
.single-product div.product .woocommerce-tabs ul.tabs {
	display: flex;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	gap: 24px;
	border-bottom: var(--rv-rule) solid var(--rv-divider);
	list-style: none;
}

.single-product div.product .woocommerce-tabs ul.tabs::before,
.single-product div.product .woocommerce-tabs ul.tabs::after {
	content: none;
	display: none;
}

.single-product div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: var(--rv-rule) solid transparent;
	border-radius: 0;
	background: none;
}

.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	display: none;
}

.single-product div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--rv-accent);
	background: none;
}

.single-product div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 10px 0;
	font-family: var(--rv-font);
	font-size: .9375em;
	font-weight: var(--rv-heading-weight);
	color: var(--rv-muted);
	text-decoration: none;
}

.single-product div.product .woocommerce-tabs ul.tabs li.active a,
.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--rv-text);
}

.single-product div.product .woocommerce-tabs .panel {
	float: none;
	width: auto;
	margin: 16px 0 0;
	padding: 0;
}

.rv-prose {
	font-size: .875em;
	line-height: 1.6;
}

.rv-prose ul {
	margin: 0 0 1em 1.2em;
	padding: 0;
}

.rv-prose li {
	margin: 0 0 .35em;
}

.single-product div.product .related > h2,
.single-product div.product .upsells > h2 {
	font-family: var(--rv-font);
	font-size: 1.25em;
	font-weight: var(--rv-heading-weight);
}

/* The design draws this row as five small cards rather than the four a category
   page shows. Section 10 already draws the card itself, so only the count changes -
   and it has to be stepped down again here, because naming .single-product makes
   this rule outscore section 10's own narrow-screen rules. */
.single-product div.product .related ul.products,
.single-product div.product .upsells ul.products {
	--rv-cards: 5;
}

@media (max-width: 1100px) {

	.single-product div.product .related ul.products,
	.single-product div.product .upsells ul.products {
		--rv-cards: 3;
	}
}

@media (max-width: 768px) {

	.single-product div.product .related ul.products,
	.single-product div.product .upsells ul.products {
		--rv-cards: 2;
	}
}

/* ---- Narrower screens ----------------------------------------------------- */

/* Under the design's own width the buy box moves below the details and the gallery
   keeps the left side, which reads better than three cramped columns. Three columns
   start at 1280px, where they come out at the 460, 368 and 340 they are drawn at. */
@media (max-width: 1100px) {

	.single-product div.product {
		column-gap: 24px;
	}
}

/* One column on a phone, in reading order: picture, details, buy box, the rest. */
@media (max-width: 768px) {

	.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
	}

	.single-product div.product .woocommerce-product-gallery.images,
	.single-product div.product .rv-short,
	.single-product div.product .rv-right,
	.single-product div.product .woocommerce-tabs,
	.single-product div.product .upsells,
	.single-product div.product .related {
		grid-column: 1;
		grid-row: auto;
	}

	.single-product div.product .summary.entry-summary .product_title {
		font-size: 1.375em;
	}

	.single-product div.product .rv-buybox .single_add_to_cart_button {
		flex-basis: 100%;
	}

	.single-product div.product .woocommerce-tabs ul.tabs {
		gap: 16px;
	}
}

/* ---- Large screens -------------------------------------------------------- */

/* Past the design width the page keeps growing rather than sitting in the middle of a
   big monitor with empty sides. The gallery and the buy box hold the sizes they are
   drawn at and the details column takes the extra room, which is how the design's own
   canvas is built - growing all three in proportion would blow the picture up instead.
   The specification table moves to the right of the description, where there is room
   for it on a screen this wide. */
@media (min-width: 1500px) {

	:root {
		--rv-page: 1480px;
	}

	.single-product div.product .woocommerce-Tabs-panel--description {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
		column-gap: 40px;
		align-items: start;
	}

	/* The panel carries a clearfix. In a grid each pseudo-element is an empty cell,
	   which took the first one and pushed the description into a second row. */
	.single-product div.product .woocommerce-Tabs-panel--description::before,
	.single-product div.product .woocommerce-Tabs-panel--description::after {
		content: none;
		display: none;
	}

	.single-product div.product .woocommerce-Tabs-panel--description .rv-prose {
		grid-column: 1;
	}

	.single-product div.product .woocommerce-Tabs-panel--description .rv-specs {
		grid-column: 2;
		grid-row: 1;
		max-width: none;
		margin: 0;
	}
}

@media (min-width: 1800px) {

	:root {
		--rv-page: 1720px;
	}
}

/* ============================================================
   13. The site footer (the footer Michelle picked, 2026-10-13)
   A wide brand column, up to three columns of links, then a thin legal bar.
   The background is white here rather than the surface gray set in section 4,
   because the design draws the footer on the same white the page body uses.
   ============================================================ */

body.rv-shop .site-footer {
	background-color: #ffffff;
	border-top: var(--rv-rule) solid var(--rv-divider);
	padding: 0;
	margin-top: 48px;
}

.rv-footer {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: 24px;
	padding: 36px 0;
	font-size: 13px;
}

/* The number in the class is how many link columns had something to show. */
.rv-footer--2 {
	grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
}

.rv-footer--1 {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.rv-footer--0 {
	grid-template-columns: minmax(0, 1fr);
}

.rv-footer__name {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: var(--rv-heading-weight);
	letter-spacing: -.01em;
}

.rv-footer__blurb,
.rv-footer__reach {
	margin: 0 0 6px;
	color: var(--rv-muted);
	line-height: 1.6;
}

.rv-footer__heading {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
}

.rv-footer__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rv-footer__list li {
	margin: 0;
}

.rv-footer a,
.rv-footer__legal a {
	color: var(--rv-text);
	text-decoration: none;
}

.rv-footer a:hover,
.rv-footer__legal a:hover {
	text-decoration: underline;
}

.rv-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding: 14px 0;
	font-size: 12px;
	color: var(--rv-muted);
	border-top: 1px solid var(--rv-divider);
}

/* The last legal link sits on the right, as it does in the design. */
.rv-footer__legal a:last-child {
	margin-left: auto;
}

@media (max-width: 899px) {

	.rv-footer,
	.rv-footer--2,
	.rv-footer--1 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.rv-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 599px) {

	.rv-footer,
	.rv-footer--2,
	.rv-footer--1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.rv-footer__legal a:last-child {
		margin-left: 0;
	}
}

/* ============================================================
   14. The home page (Mockup A, panel 1a)
   A promo carousel, a strip for trade customers, two rows of round category
   tiles, the bulk-quote band and rows of product cards.
   ============================================================ */

.rv-home {
	display: flex;
	flex-direction: column;
	gap: 44px;
	padding: 24px 0 48px;
}

/* The buttons the home page draws itself, rather than WooCommerce's .button. */
.rv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 12px 20px;
	font-family: var(--rv-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: #ffffff;
	background-color: var(--rv-accent);
	border: var(--rv-rule) solid var(--rv-accent);
	border-radius: var(--rv-radius);
}

.rv-btn:hover,
.rv-btn:focus {
	color: #ffffff;
	background-color: var(--rv-accent-600);
	border-color: var(--rv-accent-600);
}

.rv-btn--light {
	color: var(--rv-accent);
	background-color: #ffffff;
	border-color: #ffffff;
}

.rv-btn--light:hover,
.rv-btn--light:focus {
	color: var(--rv-accent);
	background-color: var(--rv-accent-100);
	border-color: var(--rv-accent-100);
}

/* ---- The carousel --------------------------------------------------------- */

.rv-hero {
	position: relative;
}

/* One slide fills the track, and the track snaps to a slide as it is scrolled, so
   the carousel works with a finger or a trackpad before any script has loaded. */
.rv-hero__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.rv-hero__track::-webkit-scrollbar {
	display: none;
}

.rv-hero__slide {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 420px;
	color: #ffffff;
	background-color: var(--rv-accent-800);
	scroll-snap-align: start;
}

/* The first slide carries no photograph, so its words run the whole width. */
.rv-hero__slide--plain {
	grid-template-columns: minmax(0, 1fr);
}

.rv-hero__media {
	position: relative;
	overflow: hidden;
	background-color: var(--rv-accent-700);
}

/* Hung in its frame rather than sized by its own shape, so the slide is as tall as
   its words and the picture fills whatever that comes to. The 6% of extra height is
   clipped off the bottom, which covers the colored band the supplier's photographs
   carry along their bottom edge - measured at 3.45% to 4.65% of the picture. It is a
   share rather than a number of pixels so that once the photographs themselves are
   cropped it takes a little white margin instead of a slice of the product. */
.rv-hero__media img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 106%;
	object-fit: cover;
}

.rv-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
	padding: 64px 56px;
}

.rv-hero__title {
	margin: 0;
	font-size: 46px;
	line-height: 1.05;
	letter-spacing: -.02em;
	font-weight: var(--rv-heading-weight);
	color: #ffffff;
}

.rv-hero__blurb {
	margin: 0;
	max-width: 420px;
	font-size: 17px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .85);
}

/* The design centers the dots across the slide. Here they sit at the bottom of the
   navy half instead: the other half is a photograph shot on white, and a white dot
   on white cannot be seen. */
.rv-hero__dots {
	position: absolute;
	right: 24px;
	bottom: 18px;
	display: flex;
	gap: 6px;
}

.rv-hero__dot {
	width: 60px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	background-color: rgba(255, 255, 255, .4);
}

.rv-hero__dot.is-on {
	background-color: #ffffff;
}

/* ---- The strip for trade customers ---------------------------------------- */

.rv-trade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: center;
	padding: 24px;
	background-color: var(--rv-surface);
}

.rv-trade__hello {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.rv-trade__greeting {
	margin: 0;
	font-size: 28px;
	line-height: 1.1;
	font-weight: var(--rv-heading-weight);
}

.rv-trade__tile {
	margin: 0;
	padding: 16px;
	font-size: 14px;
	line-height: 1.5;
	background-color: #ffffff;
}

/* ---- The headed sections and the round tiles ------------------------------ */

.rv-home-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.rv-home-section__title {
	margin: 0 0 16px;
	font-size: 22px;
	line-height: 1.2;
	font-weight: var(--rv-heading-weight);
}

.rv-home-section__all {
	font-size: 14px;
}

.rv-tiles {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
}

.rv-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	color: var(--rv-text);
}

/* A white disc with a hairline edge. The catalog's photographs are shot on white,
   so a white circle holds them without a visible square inside a colored one. */
.rv-tile__art {
	position: relative;
	display: flex;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid var(--rv-divider);
	border-radius: 50%;
	background-color: #ffffff;
}

/* Hung 6% taller than the disc and clipped, for the same reason as the carousel
   picture: the supplier's photographs carry a colored band along the bottom edge,
   which inside a circle reads as a stripe drawn across it. */
.rv-tile__art img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 106%;
	object-fit: cover;
}

.rv-tile:hover .rv-tile__name {
	text-decoration: underline;
}

/* ---- The bulk-quote band -------------------------------------------------- */

.rv-quote {
	display: grid;
	grid-template-columns: minmax(0, 2fr) auto;
	gap: 32px;
	align-items: center;
	padding: 40px 48px;
	color: #ffffff;
	background-color: var(--rv-accent);
}

.rv-quote__title {
	margin: 0;
	font-size: 38px;
	line-height: 1.05;
	letter-spacing: -.02em;
	font-weight: var(--rv-heading-weight);
	color: #ffffff;
}

.rv-quote__blurb {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .85);
}

/* ---- The rows of product cards -------------------------------------------- */

/* The same card a category page shows, five across instead of four. Section 10
   draws it; inc/home.php puts the WooCommerce body classes on this page so those
   rules reach it, and only the count is set here. */
.rv-home ul.products {
	--rv-cards: 5;
}

/* ---- Narrower screens ----------------------------------------------------- */

@media (max-width: 1100px) {

	.rv-hero__title {
		font-size: 38px;
	}

	.rv-hero__text {
		padding: 44px 36px;
	}

	.rv-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rv-home ul.products {
		--rv-cards: 3;
	}

	.rv-trade {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.rv-trade__hello {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {

	.rv-home {
		gap: 32px;
	}

	.rv-hero__slide,
	.rv-hero__slide--plain {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.rv-hero__media {
		aspect-ratio: 16 / 9;
	}

	.rv-hero__text {
		padding: 28px 24px 44px;
	}

	.rv-hero__title {
		font-size: 30px;
	}

	.rv-hero__dot {
		width: 36px;
	}

	.rv-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rv-home ul.products {
		--rv-cards: 2;
	}

	.rv-trade,
	.rv-trade__hello {
		grid-template-columns: minmax(0, 1fr);
	}

	.rv-quote {
		grid-template-columns: minmax(0, 1fr);
		padding: 28px 24px;
	}

	.rv-quote__title {
		font-size: 26px;
	}
}