/* framework#222 — webshop / portal / login pages follow the client's Design Tokens.
 *
 * These pages are frappe's, not Builder's, and style themselves from frappe's own
 * variables (--font-stack, --text-color, --heading-color, --bg-color, --btn-primary).
 * The values below point those at the Builder Tokens in the *Webshop* group, which
 * client_app.setup.ensure_webshop_tokens creates from her current brand values. Edit
 * them in Builder → Design Tokens and every shop page follows; nothing here holds a
 * brand value except the fallback used if a token is ever deleted.
 *
 * Declared on `body`, not `:root`: frappe declares its variables at the root, and a
 * custom property resolves from the NEAREST ancestor that declares it — so this wins for
 * everything on the page whatever order the stylesheets load in.
 *
 * Loaded through web_include_css, which Builder pages never receive (they render their
 * own shell). The site chrome (navbar, footer) is Builder markup and is left alone. */

body {
	--font-stack: var(--Webshop_Body_Font, Manrope), system-ui, -apple-system, "Segoe UI", sans-serif;
	--text-color: var(--Webshop_Body_Colour, #2d4b65);
	--heading-color: var(--Webshop_Title_Colour, #2d4b65);
	--bg-color: var(--Webshop_Page_Background, #e6f7f5);
	/* webshop's own `body.product-page { background: var(--body-bg-color) }` (listing,
	   product and cart pages) — more specific than this rule, so map its variable too. */
	--body-bg-color: var(--Webshop_Page_Background, #e6f7f5);
	--btn-primary: var(--Webshop_Button_Background, #872a62);
	background-color: var(--Webshop_Page_Background, #e6f7f5);
	color: var(--Webshop_Body_Colour, #2d4b65);
	font-family: var(--font-stack);
	font-size: var(--Webshop_Body_Size, 16px);
}

/* Breathing room between the last card and the footer. */
.page-content-wrapper {
	padding-bottom: 3rem;
}

/* Small grey text — item code, item group, "(R 95.00 / Nos)". frappe styles it with
   `var(--text-muted)`, and Builder ALSO publishes her own token called `text-muted`
   (#d1eced, for dark grounds), so the name clash made it unreadably light. Scoped to the
   page content, so her token still means what she set it to in the navbar and footer. */
.page-content-wrapper {
	--text-muted: var(--Webshop_Meta_Colour, #7c7c7c);
}

.page-content-wrapper :is(.product-item-code, .product-item-group, .formatted-price) {
	font-size: var(--Webshop_Meta_Size, 14px);
}

/* Page titles ("Shopping Cart", "Orders", "All Products") and product names. */
body
	:is(h1, h2, h3, .shopping-cart-header, .my-account-header, .product-title, .item-name):not(
		header *,
		footer *,
		.hdr2 *,
		.oam-footer *
	) {
	font-family: var(--Webshop_Title_Font, Roca), Georgia, serif;
	color: var(--Webshop_Title_Colour, #2d4b65);
}

/* Sizes. Selectors MIRROR webshop's own (same specificity; this sheet loads last, so it
   wins). The listing's smaller product name and price derive from the same tokens by the
   ratio webshop already uses (14/16, 18/22), so one edit in Builder moves both pages. */
body :is(.shopping-cart-header, .my-account-header) {
	font-size: var(--Webshop_Title_Size, 30px);
}
.product-container .product-title {
	font-size: var(--Webshop_Product_Size, 16px);
}
.item-card-group-section .product-title {
	font-size: calc(var(--Webshop_Product_Size, 16px) * 0.875);
}
.product-container .item-cart .product-price {
	font-size: var(--Webshop_Price_Size, 22px);
}
.item-card-group-section .product-price {
	font-size: calc(var(--Webshop_Price_Size, 22px) * 0.818);
}

/* Primary buttons: Add to Cart, Place Order, Continue, Pay, Sign in… */
body .btn-primary:not(header *, footer *, .hdr2 *, .oam-footer *) {
	background-color: var(--Webshop_Button_Background, #872a62);
	border-color: var(--Webshop_Button_Background, #872a62);
	color: var(--Webshop_Button_Colour, #ffffff);
	font-family: var(--Webshop_Button_Font, Manrope), system-ui, sans-serif;
	font-size: var(--Webshop_Button_Size, 14px);
}

body .btn-primary:not(header *, footer *, .hdr2 *, .oam-footer *):is(:hover, :focus-visible) {
	background-color: var(--Webshop_Button_Background, #872a62);
	color: var(--Webshop_Button_Colour, #ffffff);
	filter: brightness(0.9);
}

/* Secondary buttons (Write a Review, Contact Us, Continue Shopping, Past Orders, Prev/Next,
   the quantity +/–): the outline version of the primary button, from the same tokens, so
   one colour change in Builder moves both. Scoped to the page content, which also keeps
   it off the navbar and footer (they sit outside it). */
.page-content-wrapper
	:is(.btn-default, .btn-light, .btn-secondary, .btn-primary-light, .btn-write-review, .btn-inquiry, .cart-btn) {
	background-color: transparent;
	border: 1px solid var(--Webshop_Button_Background, #872a62);
	color: var(--Webshop_Button_Background, #872a62);
	font-family: var(--Webshop_Button_Font, Manrope), system-ui, sans-serif;
	font-size: var(--Webshop_Button_Size, 14px);
}

.page-content-wrapper
	:is(.btn-default, .btn-light, .btn-secondary, .btn-primary-light, .btn-write-review, .btn-inquiry, .cart-btn):is(:hover, :focus-visible) {
	background-color: var(--Webshop_Button_Background, #872a62);
	color: var(--Webshop_Button_Colour, #ffffff);
}

/* The cart's quantity +/–: webshop styles them through an id selector. */
#page-cart .cart-container .number-spinner .cart-btn {
	background-color: transparent;
	border: 1px solid var(--Webshop_Button_Background, #872a62);
	color: var(--Webshop_Button_Background, #872a62);
}

/* webshop declares `.btn-write-review { border: none !important }` — only another
   !important can restore the outline the other secondary buttons have. */
.page-content-wrapper .btn-write-review {
	border: 1px solid var(--Webshop_Button_Background, #872a62) !important;
}