/*
Theme Name:  Shopmighty Child
Description: Boomkroon-aanpassingen op Shopmighty. Wordt beheerd in yapsr/arborea-sdk (themes/shopmighty-child).
Author:      Yapsr
Author URI:  https://www.yapsr.nl
Template:    shopmighty
Version:     1.8.4
Text Domain: shopmighty-child
*/

/* -------------------------------------------------------------------------
 * "Bomen die uitstekend samen gaan…" (gekoppelde artikelen, carrousel)
 *
 * De knoppen < en > staan in de template naast de kop. Hier zetten we ze
 * onder de rij met bomen, gecentreerd, als ronde lichtgrijze knoppen.
 * De groep met kop + knoppen wordt opgeheven (display: contents), zodat
 * de knoppen met `order` achteraan kunnen.
 * ---------------------------------------------------------------------- */

.wp-block-woocommerce-product-collection:has(> .wp-block-group > .wc-block-next-previous-buttons) {
	display: flex;
	flex-direction: column;
}

.wp-block-woocommerce-product-collection > .wp-block-group:has(> .wc-block-next-previous-buttons) {
	display: contents;
}

.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons {
	order: 99;
	align-self: center;
	gap: 12px;
	margin-top: 1rem;
}

.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #e9e9e9;
	color: #212353;
	transition: background-color 0.2s ease;
}

.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons__button:hover,
.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons__button:focus-visible {
	background: #d4d4d4;
}

.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons__button[aria-disabled="true"]:hover {
	background: #e9e9e9;
}

/* -------------------------------------------------------------------------
 * Productfoto: de hele foto is aanklikbaar (opent de vergroting).
 * touch-action: de browser scrollt de pagina zelf als je met je vinger op de
 * foto veegt, wat de scripts (Flexslider, PhotoSwipe) ook doen. Knijpen om
 * de pagina te zoomen blijft mogelijk; tikken opent de vergroting.
 * ---------------------------------------------------------------------- */

.woocommerce-product-gallery,
.woocommerce-product-gallery__image {
	touch-action: pan-y pinch-zoom;
}

.woocommerce-product-gallery__image {
	cursor: zoom-in;
}

/* -------------------------------------------------------------------------
 * Vergroting (PhotoSwipe): klikken of tikken op de foto sluit hem.
 * Standaard zoomt een muisklik op een grote foto verder in. Door de foto zelf
 * geen klikdoel te maken, valt de klik op .pswp__zoom-wrap, die PhotoSwipe als
 * "sluiten" behandelt (closeElClasses). Knijpen en vegen blijven werken.
 * ---------------------------------------------------------------------- */

.pswp__img {
	pointer-events: none;
}

.pswp__zoom-wrap {
	cursor: zoom-out;
}

/* -------------------------------------------------------------------------
 * Winkelwagen in de header: het bolletje met het aantal producten.
 * WooCommerce 11.1 leidt de kleuren af uit de omgeving en kwam op wit-op-wit
 * uit. Vaste kleuren: huisblauw met witte cijfers.
 * ---------------------------------------------------------------------- */

.wc-block-mini-cart__badge {
	background-color: #222751 !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
}

/* -------------------------------------------------------------------------
 * Winkelwagen: ruimte tussen de productfoto en de productgegevens.
 * In de brede weergave (tabel) zat er 0px tussen; op de telefoon (grid) is
 * er al 16px.
 * ---------------------------------------------------------------------- */

.wc-block-cart.is-large .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
.wc-block-cart.is-medium .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	padding-left: 24px;
}

/* -------------------------------------------------------------------------
 * Productpagina: verwijzing naar de aanplantmaterialen onder de beschrijving
 * (functions.php, woocommerce_after_single_product_summary).
 * ---------------------------------------------------------------------- */

.boomkroon-aanplantmaterialen {
	margin: 1.5rem auto 2.5rem;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--light-color, #f4f4f4);
	border-left: 4px solid var(--wp--preset--color--primary, #4d7c3a);
	border-radius: 4px;
}

.boomkroon-aanplantmaterialen p {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Menu op een smal scherm (hamburger): het kruisje om te sluiten stond strak
 * tegen de bovenrand. WordPress geeft het geopende menu een padding van
 * clamp(1rem, var(--wp--style--root--padding-top), 20rem), maar Shopmighty
 * definieert die variabele niet, waardoor de hele padding wegvalt (0). Hier een
 * vaste padding: het kruisje staat 24px van de boven- en rechterrand en krijgt
 * een tikdoel van 44px; de menu-items beginnen daaronder.
 * ---------------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: 14px 0 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-close {
	padding: 10px 24px 10px 10px;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	padding-top: calc(44px + 1rem);
}

/* -------------------------------------------------------------------------
 * Productpagina: tabbladen "Beschrijving" en "Aanvullende informatie" op een
 * smal scherm (WooCommerce stapelt ze onder 768px, met een streep links van
 * het actieve tabblad). De tekst stond tegen die streep aan, omdat het thema
 * `padding: 10px 0 !important` op de link zet; hier ruimte links van de tekst,
 * en wat ruimte tussen de twee gestapelde labels.
 * ---------------------------------------------------------------------- */

@media (max-width: 768px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		margin: 0 0 0.5rem !important;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		padding: 10px 0 10px 14px !important;
	}
}

/* -------------------------------------------------------------------------
 * Kruimelpad: de productcategorieën heten in de database "appel", "peer", …
 * (zo komen ze uit Arborea). In het kruimelpad willen we een hoofdletter,
 * zonder de namen zelf aan te passen. ::first-letter werkt alleen op
 * blok-achtige elementen, vandaar inline-block.
 * ---------------------------------------------------------------------- */

.woocommerce-breadcrumb a {
	display: inline-block;
}

.woocommerce-breadcrumb a::first-letter {
	text-transform: uppercase;
}