/* Camu Shop Fixes — styles found missing or broken in the 2026-10-28 QA round. */

/* Yellow buttons carry dark text everywhere else; these two had white text on yellow (contrast 1.4:1). */
.wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout a.checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:focus,
#place_order,
#place_order:hover,
#place_order:focus {
	color: #222 !important;
}

/* The sidebar "Näytä vain ale-tuotteet" button (Additional CSS: width 100% plus 41px side padding) was 82px wider than
   its column, so the label sat off-centre and the right edge was cut off. */
#block-7 .wp-block-button__link {
	box-sizing: border-box;
}

/* Phones and tablets: the cart and checkout kept the desktop 75% column (the theme's mobile rule for #primary is weaker
   than its cart/checkout rule), so both were squeezed into the middle of the screen. */
@media (max-width: 979px) {
	.woocommerce-checkout #primary,
	.woocommerce-cart #primary {
		width: 100%;
	}
}

/* Tablets (768–979px): three 33.33% product cards fit a row only without the gaps that the spaces between the cards (and
   the site-wide 0.3px letter spacing) add, so every row wrapped after two cards and left a third of the screen empty. */
@media (max-width: 979px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		font-size: 0;
		letter-spacing: 0;
	}
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		letter-spacing: 0.3px;
	}
}

/* Quick view ("Pikakatselu") on category pages: the theme hides every .variations table on archive pages (meant for the
   product grid), which also hid the colour and size choice in the popup, so only the preselected size could be bought. */
.archive #yith-quick-view-content .variations {
	display: table !important;
}

/* One copy of the category menu serves every width (camu-performance.php drops the theme's second, mobile copy):
   Max Mega Menu switches to its own toggle below 992px; from 992px up the bar stays horizontal, slightly tighter up to
   1200px so its eight sections fit one row (the theme hid the bar there and showed the second copy). */
@media (max-width: 1200px) {
	.header-bottom .navigation-bar.main-navigation {
		display: block;
	}
	.header-bottom .mobile-navigation-cat {
		display: none;
	}
}
@media (min-width: 992px) and (max-width: 1200px) {
	#mega-menu-wrap-header-category-menu #mega-menu-header-category-menu > li.mega-menu-item > a.mega-menu-link {
		padding: 0 4px;
		font-size: 12px;
	}
}

/* The logo has only a width attribute, so the header grew when the image arrived and pushed the whole page down
   (a layout shift on every page view). The PNG is 228 × 78. */
.header-logo img {
	aspect-ratio: 228 / 78;
	height: auto;
}

/* Phones: the theme hid the cart count under 480px, so the header never showed that something was in the cart. */
@media (max-width: 479px) {
	.header-cart .cart-contents {
		display: block;
	}
}

/* Product page: the theme draws a divider after "Lisää toivelistalle" for a compare button the shop no longer has. */
.summary.entry-summary .yith-wcwl-add-to-wishlist:has(+ .product_meta) {
	border-right: 0;
}

/* Category and search pages showed the breadcrumb twice: in the title banner and again above the products. */
body:has(.page-title-inner .breadcrumbs) .site-main-inner > .woo-breadcrumbs {
	display: none;
}

/* Newsletter sign-up (Mailchimp for WP form): labelled fields in a grid, inputs and button in the site style. */
.mc4wp-form .mc4wp-form-fields {
	display: grid;
	gap: 14px;
}
.mc4wp-form .mc4wp-form-fields p {
	margin: 0;
}
.mc4wp-form .camu-mc4wp-names {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.mc4wp-form .camu-mc4wp-field {
	display: block;
	font-size: 14px;
	line-height: 1.4;
}
.mc4wp-form .camu-mc4wp-field input {
	display: block;
	width: 100%;
	margin-top: 6px;
}
.mc4wp-form input[type="email"],
.mc4wp-form input[type="text"] {
	box-sizing: border-box;
	height: 44px;
	padding: 10px 18px;
	border: 1px solid #e0e0e0;
	border-radius: 22px;
	background: #fff;
	color: #222;
	font: inherit;
}
.mc4wp-form input[type="email"]:focus,
.mc4wp-form input[type="text"]:focus {
	border-color: #222;
	outline: none;
}
.mc4wp-form .camu-mc4wp-consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.4;
}
.mc4wp-form .camu-mc4wp-consent input {
	flex: none;
	margin: 2px 0 0;
}
.mc4wp-form input[type="submit"] {
	justify-self: start;
	padding: 12px 28px;
	border: 0;
	border-radius: 50px;
	background: #f7d929;
	color: #222;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s ease;
}
.mc4wp-form input[type="submit"]:hover,
.mc4wp-form input[type="submit"]:focus {
	background: #222;
	color: #fff;
}
@media (max-width: 600px) {
	.mc4wp-form .camu-mc4wp-names {
		grid-template-columns: 1fr;
	}
	.mc4wp-form input[type="submit"] {
		justify-self: stretch;
	}
}