/*
 * De WooCommerce-pagina's die na `Wings_Republiek_Shop` overblijven:
 * de bijdragenpagina, de afrekenpagina en /mijn-account/.
 *
 * WooCommerce levert die pagina's met klassieke templates die het Dreamkit-thema
 * niet kent. Het resultaat is markup zonder opmaak: een accountmenu als
 * opsomming met bolletjes, een "Bewerken"-link die los onder een kop hangt, en
 * meldingen met een icoonvierkantje van een lettertype dat hier niet geladen
 * wordt. Dit bestand geeft die onderdelen de opmaak die het thema ze niet geeft.
 *
 * Wat hier níet in zit: de knopkleuren. Dat is een sitebrede correctie op één
 * thema-token en staat in `Wings_Republiek_Tweaks::output_republiek_styles()`.
 */

/* -------------------------------------------------------- accountlayout */

/*
 * Het thema legt paginainhoud in een leeskolom van 743px. Dat klopt voor een
 * artikel en niet voor /mijn-account/: WooCommerce zet daar een menukolom
 * naast de inhoud, en wat er dan overblijft is ~500px. In die 500px brak
 * "Lidmaatschap Republiek – €50 per jaar" over twee regels en wrapte elke
 * kaart in de portal. Dezelfde bredere kolom als op de afrekenpagina
 * (`--wings-content-width-large`, een bestaande thema-token) geeft de inhoud
 * de ruimte die ze nodig heeft zonder de rest van de site aan te raken.
 */
.woocommerce-account .wings-content-main .entry-content {
	width: 100%;
	max-width: var(--wings-content-width-large, 960px);
	margin-inline: auto;
}

/* ------------------------------------------------------------ accountmenu */

/*
 * Het menu is navigatie, geen opsomming. Bolletjes en onderstrepingen maken er
 * een lijstje losse links van; een kolom met ruimte en een duidelijke actieve
 * regel leest als een zijbalk.
 */
.woocommerce-MyAccount-navigation ul {
	margin: 0 0 2rem;
	padding: 0;
	border-left: 2px solid var(--wings-border-color, #d3d5de);
	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.5em 0 0.5em 1em;
	color: inherit;
	font-size: 0.95em;
	text-decoration: none !important;
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:focus {
	background: var(--wings-background-muted, #f5f5f4);
}

/*
 * De actieve regel krijgt het roze van de huisstijl als markering op de rand.
 * Als kleurmarkering, niet als enig onderscheid: de tekst wordt óók vet, zodat
 * de actieve regel zonder kleurwaarneming herkenbaar blijft.
 */
.woocommerce-MyAccount-navigation li.is-active a {
	box-shadow: -2px 0 0 0 var(--wings-button-background, #ffcaf5);
	font-weight: var(--font-weight-semibold, 600);
}

/* ------------------------------------------------------------- adresblok */

/*
 * WooCommerce zet de kop en de bewerk-link als broers in één `header` zonder
 * opmaak. Zonder deze regels valt de link onder de kop met een inspringing die
 * uit het niets komt. Naast elkaar, met de link als bijzaak achter de kop, is
 * wat de markup bedoelt.
 */
.woocommerce-Address-title {
	margin-bottom: 0.5rem;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0 0 0.25em;
}

/*
 * WooCommerce laat deze link rechts naast de kop zweven (`float: right`) en
 * rekent op een breedte die deze kolom niet heeft; het resultaat was een link
 * die met een onverklaarbare inspringing onder de kop hing. Als eigen regel
 * onder de kop, op dezelfde marge als het adres eronder, klopt de uitlijning
 * op elke breedte.
 *
 * De kleur komt erbij omdat het thema deze link niet raakt: onbehandeld kwam
 * hij als browserblauw (#0000ee) op een verder navy pagina te staan.
 */
.woocommerce-Address-title .edit {
	display: inline-block;
	float: none;
	margin-bottom: 0.5em;
	color: var(--wings-link-color, #232d59);
	font-size: 0.85em;
}

.woocommerce-Address address {
	font-style: normal;
	line-height: 1.5;
}

/* --------------------------------------------------------------- meldingen */

/*
 * `.woocommerce-info::before` en zijn broers tekenen een icoon uit het
 * WooCommerce-lettertype. Dat lettertype laadt hier niet, dus wat de bezoeker
 * ziet is een leeg vierkantje naast zijn melding. Weg ermee; de kleur van de
 * rand draagt de betekenis al.
 */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-error li::before {
	content: none !important;
}

/*
 * De melding zelf: tekst en knop naast elkaar in plaats van de knop midden in
 * een zin. `justify-content` duwt de knop naar rechts zodra er ruimte is en
 * laat 'm eronder vallen als die er niet is.
 */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em 1.5em;
	margin: 0 0 2rem;
	padding: 1em 1.25em;

	/*
	 * `border: 0` eerst: WooCommerce tekent hier een blauwe streep van 3px
	 * bovenlangs, die anders naast onze eigen markering aan de zijkant blijft
	 * staan.
	 */
	border: 0;
	border-left: 4px solid var(--wings-border-color, #d3d5de);
	background: var(--wings-background-muted, #f5f5f4);
	list-style: none;
}

/*
 * De melding zet zijn knop vóór de tekst in de markup. In een rij betekent dat
 * "Opnieuw verzenden" links van een zin die zelf twee regels lang is, en bij
 * gebrek aan ruimte zelfs erbovenop. De tekst hoort eerst en mag de ruimte
 * pakken; de knop volgt.
 */
.woocommerce-info > .button,
.woocommerce-message > .button,
.woocommerce-error > .button {
	order: 2;
}

.woocommerce-error {
	border-left-color: #c0392b;
}

.woocommerce-message {
	border-left-color: #4a8b3b;
}

.woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-error .button {
	flex: 0 0 auto;
	margin-left: auto;
}

/* -------------------------------------------------------- de bijdragenpagina */

/*
 * De ene productpagina die blijft staan is een keuzelijst met bedragen, geen
 * productpagina. Zonder afbeelding mag de tekstkolom de volle breedte pakken —
 * anders houdt WooCommerce de helft leeg voor een foto die er niet komt.
 */
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
	float: none;
	width: 100%;
	margin-bottom: 2rem;
}

/*
 * De galerij is een leeg kader (`hide_placeholder_gallery()` haalt de
 * placeholder eruit) dat anders de linkerhelft bezet houdt.
 */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.single-product div.product .woocommerce-product-gallery {
	display: none;
}

/*
 * De prijsregel boven de keuzelijst is bij een variabel product een "vanaf"-
 * bereik dat `Wings_Republiek_Products` al leegmaakt; wat overblijft is een
 * lege alinea die ruimte pakt.
 */
.single-product div.product .summary > .price:empty {
	display: none;
}

/*
 * Kop, keuzelijst en knop in de stijl van /word-lid/ (A4): de kop
 * linksuitgelijnd op de kantlijn van de tekst eronder in plaats van
 * gecentreerd boven een linkse kolom, de keuzelijst als echt formulierveld in
 * plaats van de kale browserselect, en de knop navy zoals de knoppen op de
 * word-lid-pagina.
 *
 * De selector is bewust zwaar: het thema zet de kop met
 * `.single .no-headerimage h1.post-title` (0,3,1) gecentreerd op 3.5em, en
 * `.single-product .post-title` (0,2,0) verloor daar stil van (review PR #499).
 */
.single-product .post-title-container h1.post-title,
.single-product .post-title-container.no-headerimage h1.post-title {
	max-width: var(--wings-content-width-standard, 743px);
	margin-inline: auto;
	font-size: clamp(2rem, 4.2vw, 2.75rem);
	line-height: 1.04;
	text-align: left;
}

.single-product div.product form.variations_form select {
	width: 100%;
	max-width: 22rem;
	padding: 0.6em 2.5em 0.6em 0.8em;
	border: 2px solid var(--wings-text-color, #232d59);
	border-radius: 8px;
	background-color: #fff;
	color: var(--wings-text-color, #232d59);
	font: inherit;
	line-height: 1.3;
}

.single-product div.product form.variations_form select:focus-visible {
	outline: 3px solid var(--wings-secondary-color, #37d3b5);
	outline-offset: 2px;
}

.single-product div.product form.variations_form .variations th,
.single-product div.product form.variations_form .variations td {
	padding-block: 0.4em;
	vertical-align: middle;
}

.single-product div.product form.cart .single_add_to_cart_button {
	padding: 0.75em 1.4em;
	border: 2px solid var(--wings-text-color, #232d59);
	border-radius: 8px;
	background: var(--wings-text-color, #232d59);
	color: #fff;
	font-weight: 700;
}

.single-product div.product form.cart .single_add_to_cart_button:hover,
.single-product div.product form.cart .single_add_to_cart_button:focus-visible {
	border-color: #39426a;
	background: #39426a;
	color: #fff;
}

/* ---------------------------------------------------------- de bedankpagina */

/*
 * Het blok met nummer, datum, e-mailadres, bedrag en betaalmethode. Zonder
 * opmaak liep het als losse regels onder elkaar door, sprong het in ten
 * opzichte van de tekst en plakten "Totaal" en "Betaalmethode" tegen de regel
 * erboven (bevinding A2). Nu een kader op de kantlijn van de tekst, met het
 * label links en de waarde rechts, en een lijn tussen de regels.
 *
 * De `float`, de hoofdletters en de gestippelde scheiding komen uit de
 * algemene WooCommerce-CSS, die de regels naast elkaar zet als een strook;
 * die gaan eraf.
 */
.woocommerce-order-received ul.woocommerce-order-overview {
	max-width: 32rem;
	margin: 0 0 2rem;
	padding: 0.25em 1.25em;
	border: 1px solid var(--wings-border-color, #d3d5de);
	border-radius: 8px;
	background: #fff;
	list-style: none;
}

.woocommerce-order-received ul.woocommerce-order-overview::before,
.woocommerce-order-received ul.woocommerce-order-overview::after {
	content: none;
}

.woocommerce-order-received ul.woocommerce-order-overview li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1.5em;
	align-items: baseline;
	justify-content: space-between;
	float: none;
	margin: 0;
	padding: 0.65em 0;
	border: 0;
	border-top: 1px solid var(--wings-border-color, #d3d5de);
	font-size: 0.95em;
	line-height: 1.4;
	text-transform: none;
}

.woocommerce-order-received ul.woocommerce-order-overview li:first-child {
	border-top: 0;
}

.woocommerce-order-received ul.woocommerce-order-overview li::before {
	content: none;
}

.woocommerce-order-received ul.woocommerce-order-overview li strong {
	display: inline;
	font-size: 1em;
	text-align: right;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ productgrid */

/*
 * Blijft er ergens een productgrid staan (WooCommerce zet er meer dan één in
 * shortcodes en blokken), dan horen de knoppen op één lijn te staan in plaats
 * van elk op de hoogte van hun eigen titel. Een kolom per kaart met de knop
 * `margin-top: auto` doet dat zonder vaste hoogtes.
 */
ul.products li.product {
	display: flex;
	flex-direction: column;
}

ul.products li.product .button {
	align-self: flex-start;
	margin-top: auto;
}