/*
 * Sterren die naar het tabblad Beoordelingen linken, op de productkaart en
 * bovenaan de productpagina. Zie beoordelingen-link.php.
 */

/* Productkaart ----------------------------------------------------------- */

/* De link staat alleen om de sterren. Zijn ::after ligt over de hele regel,
   dus "(180)" en "(4.88)" klikken mee. De regel is zo breed als zijn inhoud
   (Blocksy), dus een klik naast de sterren doet niets. Het vlak steekt 6px
   boven en onder uit: de sterren zijn 16px hoog, zo wordt het tikvlak 33px.
   De ruimte boven en onder de regel is 10px. */
.ct-woo-card-rating {
	position: relative;
}

.nrd-kaart-sterren {
	display: flex;
}

.nrd-kaart-sterren::after {
	content: "";
	position: absolute;
	inset: -6px -8px;
	border-radius: 6px;
}

.ct-woo-card-rating:hover .ct-rating-count,
.nrd-kaart-sterren:focus-visible ~ .ct-rating-count {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* De focusring van Blocksy komt om het hele vlak, niet alleen om de sterren. */
.nrd-kaart-sterren:focus-visible {
	outline: none;
}

.nrd-kaart-sterren:focus-visible::after {
	outline: 2px solid var(--theme-palette-color-1);
	outline-offset: 2px;
}

/* Productpagina ---------------------------------------------------------- */

/* Bovenaan staan de sterren en de link "(27 klantbeoordelingen)" van
   WooCommerce. De ::after van die link ligt over beide, dus de sterren
   klikken mee. De regel is standaard zo breed als de kolom; fit-content houdt
   het vlak bij de sterren en de tekst. */
.woocommerce-product-rating {
	position: relative;
	width: fit-content;
}

.woocommerce-product-rating .woocommerce-review-link::after {
	content: "";
	position: absolute;
	inset: -6px -8px;
	border-radius: 6px;
}

.woocommerce-product-rating:hover .woocommerce-review-link {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-product-rating .woocommerce-review-link:focus-visible {
	outline: none;
}

.woocommerce-product-rating .woocommerce-review-link:focus-visible::after {
	outline: 2px solid var(--theme-palette-color-1);
	outline-offset: 2px;
}

/* Waar het script de tabbladbalk neerzet: onder de sticky header, met wat
   lucht. Dezelfde som als Blocksy gebruikt voor :target in main.min.css. */
.woocommerce-tabs {
	scroll-margin-top: calc(var(--admin-bar, 0px) + var(--theme-frame-size, 0px) + var(--scroll-margin-top, 0px) + var(--scroll-margin-top-offset, 0px) + 20px);
}