/* ============================================================
   Small, theme-local bridge between WooCommerce's own markup
   (add-to-cart button, variation form) and the copied rowe-theme.css
   .btn look. Layered on top of the canonical stylesheet, not part of
   it - keep edits to the shared design system in ROWE-shopify-theme.
   ============================================================ */
.bookcard .single_add_to_cart_button,
.bookcard button.single_add_to_cart_button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 20px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 11px 18px;
	min-height: 44px;
	border-radius: 6px;
	border: 1px solid var(--copper);
	background: var(--copper);
	color: white;
	cursor: pointer;
	transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.bookcard .single_add_to_cart_button:hover {
	background: var(--copper-hover);
	border-color: var(--copper-hover);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(196, 69, 16, .28);
}
.bookcard .quantity {
	display: block;
	margin-top: 14px;
}
.bookcard table.variations {
	width: 100%;
	margin-top: 14px;
}
.bookcard table.variations td {
	padding: 0;
	display: block;
}
.bookcard table.variations select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: white;
	font-family: inherit;
	font-size: 16px;
	color: var(--graphite);
}
.bookcard .woocommerce-variation-price {
	margin-top: 8px;
	font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   Shop archive toolbar (result count + sort dropdown) and pagination.
   WooCommerce renders these via woocommerce_before_shop_loop /
   woocommerce_after_shop_loop with its own generic markup and no theme
   styling at all - previously rendered as plain default browser text/
   select/links, clashing with the rest of the page. .shop-toolbar is a
   wrapper archive-product.php adds around the before-loop hooks;
   .page-numbers' own look is defined once in rowe-theme.css (shared
   with the blog's .pgn pagination) rather than duplicated here.
   ============================================================ */
.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.woocommerce-result-count {
	margin: 0;
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	color: var(--stone);
}
.woocommerce-ordering {
	margin: 0;
}
.woocommerce-ordering select.orderby {
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: white;
	font-family: inherit;
	font-size: 14px;
	color: var(--graphite);
	cursor: pointer;
}
.woocommerce-ordering select.orderby:focus {
	border-color: var(--copper);
	outline: none;
}
.woocommerce-pagination {
	/* Resets, not additions: rowe-theme.css has a bare `nav{...}`
	   element selector for the sticky site header, which - having no
	   class scoping - also matches WooCommerce's own
	   <nav class="woocommerce-pagination">, inheriting a dark sticky
	   header look onto page-number links that has nothing to do with
	   this element. */
	position: static;
	top: auto;
	z-index: auto;
	background: none;
	border-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 38px;
}
.woocommerce-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 500px) {
	.shop-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ============================================================
   My Account — the members' portal shell (2026-09-11).

   WooCommerce ships My Account as a two-column layout with no styling
   of its own beyond structure, so before this it rendered as a grey
   bulleted list next to unstyled prose. The screens INSIDE it are
   styled by the rowe-members plugin; what is here is the shell they sit
   in — the nav, the forms WooCommerce itself renders (login, register,
   lost password, addresses), and its notices.

   Colours are tokens throughout. The login and registration forms are
   WooCommerce's own markup, so these selectors are its class names
   rather than ours.
   ============================================================ */

/* The page template wraps content in .rte, which caps prose at 760px.
   Right for an article, wrong for a two-column dashboard with a slot
   grid in it, so the cap is lifted for this page only. */
.woocommerce-account .rte {
	max-width: none;
}

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
	max-width: none;
}

/* WooCommerce clearfixes its layout containers with `::before/::after {
   content:" "; display:table }`. That is invisible in a float layout and
   NOT invisible in a grid one: a generated box on a grid container
   becomes a grid ITEM, so the clearfix silently takes the first cell and
   shunts every real child one place along. Left in, the account nav
   lands in column 2 and the content wraps to a second row.

   This is the single cause of the same symptom in both grids on this
   page, so both switch the pseudo-elements off. Anything else here that
   is turned into a grid or flex container needs the same treatment. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
#customer_login::before,
#customer_login::after {
	content: none;
}

/* WooCommerce's layout stylesheet also floats these two and gives them
   percentage widths (30%/68%). The float is ignored on a grid item; the
   width is not, and would shrink each column to a third of its own
   track. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
}

/* Logged out there is no account nav, so the dashboard grid above does
   not apply: what the page holds is WooCommerce's login form and, since
   registration is open, its registration form beside it. */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
	max-width: none;
}

#customer_login {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(20px, 3vw, 34px);
	align-items: start;
	max-width: 860px;
}

/* WooCommerce gives these two columns float and ~47% width of their
   own, the same fight as the dashboard columns above. */
#customer_login .u-column1,
#customer_login .u-column2 {
	float: none;
	width: auto;
	margin: 0;
}

#customer_login h2 {
	font-size: 20px;
	font-weight: 600;
	color: var(--graphite);
	margin: 0 0 12px;
}

/* The registration column's POPIA/privacy note is fine print, not body
   copy, and at full size it dwarfs the two fields above it. */
#customer_login .woocommerce-privacy-policy-text p {
	font-size: 13px;
	color: var(--stone);
	line-height: 1.5;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--paper);
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--line);
}

.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--stone);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--sage-tint);
	color: var(--graphite);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--graphite);
	color: var(--bone);
	font-weight: 600;
}

/* Logging out is not navigation to a sibling screen, so it does not
   read as one. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stone);
}

.woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

/* ---------- WooCommerce's own forms ---------- */

.woocommerce-account .woocommerce-form,
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: clamp(20px, 4vw, 30px);
}

.woocommerce-account .woocommerce-form h2,
.woocommerce-account form h2 {
	font-size: 20px;
	font-weight: 600;
	color: var(--graphite);
	margin: 0 0 6px;
}

.woocommerce-account .form-row {
	display: block;
	margin-bottom: 16px;
}

.woocommerce-account .form-row label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--copper);
	font-weight: 600;
	margin-bottom: 7px;
}

.woocommerce-account .form-row input[type="text"],
.woocommerce-account .form-row input[type="email"],
.woocommerce-account .form-row input[type="password"],
.woocommerce-account .form-row input[type="tel"],
.woocommerce-account .form-row select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: white;
	color: var(--graphite);
	font-family: var(--font-body);
	font-size: 15px;
}

.woocommerce-account .form-row input:focus,
.woocommerce-account .form-row select:focus {
	outline: 2px solid var(--copper);
	outline-offset: 1px;
	border-color: var(--copper);
}

/* WooCommerce's password field wraps the input in a relative container
   with a reveal button pinned inside it. Without a little right padding
   the button sits on top of the last characters typed. */
.woocommerce-account .woocommerce-form__input-password {
	padding-right: 42px;
}

.woocommerce-account .show-password-input {
	top: 12px;
	right: 12px;
}

/* "Remember me" is a checkbox label, not a field label, so it opts out
   of the mono/uppercase/copper treatment above. The class is repeated on
   the element selector to outrank `.woocommerce-account .form-row label`,
   which is one point more specific than the class on its own.

   display:flex also lifts it onto its own line, which puts the checkbox
   above the submit button instead of beside it — the two shared a row in
   WooCommerce's markup and read as one control. */
.woocommerce-account .form-row label.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--stone);
}

.woocommerce-account .form-row label.woocommerce-form-login__rememberme input {
	margin: 0;
}

.woocommerce-account .form-row label.woocommerce-form-login__rememberme span {
	font-weight: 400;
}

.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 18px;
	border-radius: 6px;
	border: 1px solid var(--copper);
	background: var(--copper);
	color: white;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.woocommerce-account button[type="submit"]:hover,
.woocommerce-account input[type="submit"]:hover {
	background: var(--copper-hover);
	border-color: var(--copper-hover);
}

/* The cancel control in the bookings table is deliberately not a filled
   button (see the plugin's stylesheet); the blanket submit rule above
   would have made it one. */
.woocommerce-account button.rowe-cancel {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--copper);
}

.woocommerce-account button.rowe-cancel:hover {
	background: none;
	border: 0;
	color: var(--copper-hover);
}

.woocommerce-account .woocommerce-LostPassword {
	margin-top: 14px;
	font-size: 14px;
}

/* ---------- notices ---------- */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
	list-style: none;
	border-radius: 8px;
	padding: 12px 16px;
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.45;
}

.woocommerce-account .woocommerce-message {
	background: var(--sage-tint);
	border: 1px solid var(--sage-tint-line);
	color: var(--sage-deep-2);
}

.woocommerce-account .woocommerce-error {
	background: var(--copper-tint);
	border: 1px solid var(--copper-tint-line);
	color: var(--copper-deep);
}

.woocommerce-account .woocommerce-info {
	background: var(--paper);
	border: 1px solid var(--line);
	color: var(--stone);
}

@media (max-width: 760px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Single column: source order already puts the nav above the
	   content it navigates, so nothing else is needed here. */
}