/* Shop layer. Extends the mockup's tokens rather than restating them. */

.rvg-woo { max-width: 1180px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.rvg-woo > h1, .woocommerce-products-header__title {
	font-family: 'Chakra Petch', Inter, sans-serif; font-size: 2.4rem; margin: 0 0 .5rem;
}

/* ---- store filter bar ---- */
.rvg-storebar {
	display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
	padding: 1rem 1.1rem; margin: 0 0 2rem;
	background: var(--white); border: 1px solid var(--line); border-radius: 14px;
}
.rvg-storebar-home { max-width: 780px; margin: 1.5rem auto 0; }
.rvg-storebar-label {
	font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--muted); font-weight: 700; margin-right: .4rem;
}
.rvg-storebtn {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .45rem .85rem; border-radius: 999px;
	border: 1px solid var(--line); background: var(--paper);
	font-size: .85rem; font-weight: 600; color: var(--ink);
	transition: background .15s, color .15s, border-color .15s;
}
.rvg-storebtn b {
	font-size: .72rem; background: var(--line); color: var(--ink);
	border-radius: 999px; padding: .08rem .42rem;
}
.rvg-storebtn:hover { border-color: var(--green); color: var(--green-dark); }
.rvg-storebtn.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.rvg-storebtn.is-active b { background: rgba(255,255,255,.25); color: #fff; }

/* ---- product grid ---- */
/*
 * WooCommerce's own layout stylesheet sets `li.product { width: 22.05%; float: left }`.
 * Inside a CSS grid that percentage resolves against the grid CELL, collapsing every
 * card to ~50px. These overrides match Woo's selector specificity to undo the float
 * layout before applying the grid.
 */
.woocommerce ul.products,
ul.products {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: 1.25rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }

.woocommerce ul.products li.product,
ul.products li.product {
	width: auto; float: none; margin: 0; clear: none;
	background: var(--white); border: 1px solid var(--line); border-radius: 16px;
	padding: 1rem; display: flex; flex-direction: column; position: relative;
	transition: transform .15s, box-shadow .15s;
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(23,34,26,.10); }

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: block; width: 100%; }
.woocommerce ul.products li.product img,
ul.products li.product img {
	width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
	border-radius: 10px; margin: 0 0 .6rem; display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: .95rem; font-weight: 700; line-height: 1.32; margin: .1rem 0 .4rem; padding: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.5em;
}
.woocommerce ul.products li.product .price {
	font-size: 1.05rem; font-weight: 800; color: var(--green-dark); margin: 0 0 .5rem;
}
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 500; font-size: .85rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
ul.products li.product .button {
	margin-top: auto; background: var(--green); color: #fff; border: 0;
	border-radius: 999px; padding: .55rem 1rem; font-weight: 700; font-size: .82rem;
	text-align: center; cursor: pointer; display: block; width: 100%;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.woocommerce ul.products li.product .button:hover { background: var(--green-dark); }
/* Woo's .onsale is a full-width block by default, which buries the platform
   label printed across the top of the cover. Shrink it to a corner pill. */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute; top: .85rem; left: .85rem; right: auto; z-index: 3;
	display: inline-block; width: auto; min-width: 0; min-height: 0;
	margin: 0; line-height: 1.4;
	background: #d63b2f; color: #fff; font-size: .6rem; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase; padding: .2rem .48rem; border-radius: 999px;
}

/*
 * Third place Woo's float layout leaks in: woocommerce-smallscreen.css uses
 * `.woocommerce ul.products[class*="columns-"] li.product { width: 48% }`.
 * The attribute selector out-specifies a plain class chain, so the override
 * has to carry it too — otherwise phones render 79px-wide cards.
 */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto; float: none; margin: 0; clear: none;
}
.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n),
.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n+1) {
	float: none; clear: none;
}

/* ---- condition badge ---- */
.rvg-condition {
	position: absolute; top: .85rem; right: .85rem; z-index: 3;
	font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 800;
	background: var(--ink); color: var(--paper); padding: .22rem .5rem; border-radius: 999px;
}

/* ---- per-store availability ---- */
.rvg-avail { margin: .1rem 0 .6rem; }
.rvg-avail-heading {
	font-size: .78rem; color: var(--muted); margin: 0 0 .5rem; font-weight: 600;
}
.rvg-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.rvg-chip {
	font-size: .64rem; font-weight: 700; padding: .2rem .45rem; border-radius: 6px;
	background: rgba(47,143,78,.10); color: var(--green-dark);
	border: 1px solid rgba(47,143,78,.25);
	display: inline-flex; gap: .25rem; align-items: center;
}
.rvg-chip b { font-size: .68rem; }
.rvg-chip-empty { background: transparent; color: #9aa79c; border-color: var(--line); font-weight: 600; }
.rvg-avail-none { font-size: .8rem; color: #9aa79c; font-style: italic; margin: .2rem 0 .6rem; }

/* ---- single product ---- */
/* Woo's own selectors are `.woocommerce div.product ...`, so these match that
   specificity rather than relying on !important. */
.single-product .rvg-woo { max-width: 1120px; }
.woocommerce div.product {
	display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
	gap: 3rem; align-items: start;
}
/* Woo ships `.woocommerce div.product div.images { width: 48% }` for its float
   layout. In a grid that 48% resolves against the grid CELL, so each column
   renders at half width. Match Woo's selector shape plus one class to win. */
.woocommerce div.product div.images.woocommerce-product-gallery {
	width: 100%; float: none; margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery img {
	width: 100%; height: auto; border-radius: 16px; display: block;
}
.woocommerce div.product div.summary.entry-summary {
	width: 100%; float: none; margin: 0;
}
.woocommerce div.product .product_title {
	font-family: 'Chakra Petch', Inter, sans-serif; font-size: 2.1rem;
	line-height: 1.15; margin: 0 0 .6rem;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
	font-size: 1.75rem; font-weight: 800; color: var(--green-dark); margin: 0 0 1rem;
}
.woocommerce div.product p.price del { color: var(--muted); font-weight: 500; font-size: 1.1rem; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted); line-height: 1.6; }

.woocommerce div.product form.cart { margin: 1.4rem 0; display: flex; gap: .6rem; align-items: center; }
.woocommerce div.product form.cart .quantity input {
	width: 4.5rem; padding: .7rem .6rem; border: 1px solid var(--line);
	border-radius: 999px; text-align: center; font-weight: 700;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	background: var(--green); color: #fff; border: 0; border-radius: 999px;
	padding: .85rem 1.8rem; font-weight: 700; font-size: .95rem; cursor: pointer;
}
.woocommerce div.product form.cart .button:hover { background: var(--green-dark); }
.woocommerce div.product .product_meta { font-size: .8rem; color: var(--muted); line-height: 1.7; }
.woocommerce div.product .stock { font-weight: 700; color: var(--green-dark); }

.single-product .rvg-avail {
	margin: 1.2rem 0; padding: 1rem 1.1rem; background: var(--white);
	border: 1px solid var(--line); border-radius: 12px;
}
.single-product .rvg-chip { font-size: .78rem; padding: .3rem .6rem; }
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; }
.woocommerce div.product .related { grid-column: 1 / -1; }

.rvg-transfer {
	font-size: .9rem; line-height: 1.55; padding: .85rem 1.05rem; border-radius: 10px;
	background: rgba(40,120,255,.07); border: 1px solid rgba(40,120,255,.28); color: var(--ink); margin: 0 0 1rem;
}
.rvg-transfer-ready { background: rgba(47,143,78,.08); border-color: rgba(47,143,78,.32); }

/* ---- misc ---- */
/*
 * The mockup styles EVERY link inside a location card as a solid green button
 * (.location-card a sets background:green; color:white). That's meant for the
 * "Call ..." link. The stock-count link should read as a text link instead, so
 * it has to undo the button styling as well as the colour -- setting colour
 * alone gives green text on a green button, i.e. invisible.
 */
.rvg-loc-count { margin-top: .6rem !important; }
.location-card .rvg-loc-count a {
	display: inline-block;
	background: none;
	padding: 0;
	border-radius: 0;
	color: var(--green-dark);
	font-weight: 700;
	font-size: .85rem;
}
.location-card .rvg-loc-count a:hover { text-decoration: underline; }
.rvg-empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.woocommerce-result-count { color: var(--muted); font-size: .85rem; }
.woocommerce-ordering select { padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--line); }
/* WooCommerce notices carry a left border here, not core's icon-and-top-rule.
   Core reserves a 3.5em left pad and drops an icon glyph into it with
   position:absolute. Overriding only the padding leaves the glyph behind,
   still absolutely placed, sitting on top of the first word -- and core's
   border-top survives alongside our border-left as a second coloured edge.
   Both have to be undone explicitly, so both are undone here. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--white); border-left: 4px solid var(--green);
	border-top: 0;
	padding: .9rem 1.1rem; border-radius: 8px; margin-bottom: 1.5rem; list-style: none;
}
/* Keep the clearfix half of core's ::before, drop the icon it layers on top. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
	content: " "; display: table; position: static;
}
.woocommerce-pagination ul { list-style: none; display: flex; gap: .4rem; padding: 0; justify-content: center; margin-top: 2rem; }
.woocommerce-pagination a, .woocommerce-pagination span {
	padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--white);
}
.woocommerce-pagination .current { background: var(--green); color: #fff; border-color: var(--green); }

/* Breakpoints must carry the .woocommerce prefix too, or the desktop
   4-column rule above out-specifies them and phones keep 4 columns. */
@media (max-width: 1100px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce div.product { grid-template-columns: 1fr; gap: 1.5rem; }
	.rvg-woo { padding: 2rem 1rem 3rem; }
	.rvg-storebar { gap: .4rem; }
}
@media (max-width: 440px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
	.woocommerce ul.products li.product { padding: .65rem; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .82rem; }
	.rvg-chip { font-size: .58rem; padding: .15rem .35rem; }
	.rvg-condition, .woocommerce span.onsale { font-size: .52rem; padding: .16rem .38rem; }
	.woocommerce ul.products li.product .button { font-size: .72rem; padding: .5rem .4rem; border-radius: 10px; }
}

/* ---- standard pages (cart, checkout, account) ---- */
.rvg-page-title { font-family: 'Chakra Petch', Inter, sans-serif; font-size: 2.2rem; margin: 0 0 1.5rem; }
.rvg-page .wc-block-components-title,
.rvg-page .wp-block-woocommerce-checkout-order-summary-block h2 { font-family: 'Chakra Petch', Inter, sans-serif; }
.rvg-page .wc-block-components-button,
.rvg-page .wc-block-cart__submit-button,
.rvg-page .wc-block-components-checkout-place-order-button {
	background: var(--green) !important; border-radius: 999px !important; font-weight: 700;
}
.rvg-page .wc-block-components-button:hover { background: var(--green-dark) !important; }
.rvg-page .wc-block-components-radio-control__option { border-radius: 10px; }

/* ---- mobile nav (addition, not in the original mockup) ---- */
.rvg-mobilenav { display: none; }
@media (max-width: 900px) {
	.rvg-mobilenav {
		display: flex; gap: .3rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
		padding: .6rem 1rem; background: var(--white);
		border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40;
	}
	.rvg-mobilenav a {
		flex: 0 0 auto; padding: .4rem .8rem; border-radius: 999px;
		background: var(--paper); border: 1px solid var(--line);
		font-size: .82rem; font-weight: 600; white-space: nowrap;
	}
}