/* =========================================================
   Solo Fit: WooCommerce pages

   Only on the shop's own pages (body.sf-shop): a light
   paper page with dark text, the header solid from the top,
   and buttons and fields in the site's type and yellow.
   body.sf-shop in front of every rule keeps it one step
   heavier than WooCommerce's own selectors.
   ========================================================= */

body.sf-shop {
	--sf-shop-ink: #0d0d0d;
	--sf-shop-paper: #f2f0eb;
	--sf-shop-accent: #f2b705;
	--sf-shop-accent-2: #d9a404;
	--sf-shop-line: rgba(13, 13, 13, .18);

	background: var(--sf-shop-paper);
	color: var(--sf-shop-ink);
	font-family: "Barlow", sans-serif;
}

body.sf-shop :is(h1, h2, h3, h4, h5, h6) {
	color: var(--sf-shop-ink);
	font-family: "Chakra Petch", "Barlow", sans-serif;
	font-weight: 700;
	letter-spacing: -.01em;
}

/* Text links inside the page: dark, underlined, the underline turns yellow.
   :where() keeps the weight low, so WooCommerce's own link styles and the
   Moje konto menu below still win. */
body.sf-shop :where(.site-main, .woocommerce) a:where(:not(.button, .wc-block-components-button, .wp-element-button)) {
	color: var(--sf-shop-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	body.sf-shop :where(.site-main, .woocommerce) a:where(:not(.button, .wc-block-components-button, .wp-element-button)):hover {
		text-decoration-color: var(--sf-shop-accent);
		text-decoration-thickness: 2px;
	}
}

/* The header: solid over a light page, not see-through. */
body.sf-shop .sfh::before {
	opacity: 1;
}

body.sf-shop .sfh::after {
	opacity: 0;
}

/* ---------- buttons: classic templates and blocks ---------- */

body.sf-shop :is(a.button, button.button, input.button, #respond input#submit, a.button.alt, button.button.alt, input.button.alt, .wc-block-components-button:not(.is-link), .wp-element-button) {
	padding: .85em 1.5em;
	border: 0;
	border-radius: 3px;
	background: var(--sf-shop-accent);
	color: var(--sf-shop-ink);
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
	body.sf-shop :is(a.button, button.button, input.button, #respond input#submit, a.button.alt, button.button.alt, input.button.alt, .wc-block-components-button:not(.is-link), .wp-element-button):hover {
		background: var(--sf-shop-accent-2);
		color: var(--sf-shop-ink);
	}
}

body.sf-shop :is(a.button, button.button, input.button, .wc-block-components-button, .wp-element-button):focus-visible {
	outline: 2px solid var(--sf-shop-ink);
	outline-offset: 3px;
}

body.sf-shop :is(a.button, button.button, input.button):is(:disabled, .disabled) {
	background: var(--sf-shop-accent);
	color: var(--sf-shop-ink);
	opacity: .5;
}

/* ---------- fields of the classic forms (the block checkout draws its own) ---------- */

body.sf-shop .woocommerce form :is(.input-text, select),
body.sf-shop .woocommerce :is(.woocommerce-Input, .woocommerce-Button) {
	border: 1px solid var(--sf-shop-line);
	border-radius: 3px;
	background: #ffffff;
	color: var(--sf-shop-ink);
	font-family: "Barlow", sans-serif;
}

body.sf-shop .woocommerce form .input-text {
	padding: .7em .8em;
}

body.sf-shop .woocommerce form :is(.input-text, select):focus {
	border-color: var(--sf-shop-ink);
	outline: 2px solid var(--sf-shop-accent);
	outline-offset: 0;
}

/* ---------- Moje konto: the menu on the left ---------- */

body.sf-shop .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sf-shop-line);
}

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

body.sf-shop .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: .75em 0;
	text-decoration: none;
	font-weight: 500;
}

body.sf-shop .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--sf-shop-accent);
	padding-left: .75em;
}