/**
 * ----------------------------------------------------------------------------
 * SIDERIUS WEBSHOP - VORMGEVING
 *
 * Deze stylesheet legt de Siderius-huisstijl over de standaardopmaak van
 * WooCommerce heen. Hij wordt na WooCommerce ingeladen, zodat wat hier staat
 * wint van hun standaardkleuren.
 *
 * De kleuren en vormen komen uit de themacode van Cherry, zodat de winkel
 * exact hetzelfde oogt als de rest van de site.
 * ----------------------------------------------------------------------------
 */

:root {
	--sid-blauw:        #009EE3;  /* het Siderius-blauw, zelfde als de CONTACT-knop */
	--sid-blauw-donker: #006997;  /* de hoverkleur uit het thema */
	--sid-donker:       #002533;  /* de donkere tekstkleur uit het thema */
	--sid-lijn:         #D7D7D7;  /* de randkleur die het thema voor invoervelden gebruikt */
	--sid-vlak:         #F6F7F9;  /* het lichte vlak uit het thema */
}


/* ==========================================================================
   0. RUIMTE RONDOM DE WINKELINHOUD
   ========================================================================== */

/* Zodat de winkel niet tegen de schermrand plakt. */
.woocommerce #main.site-main,
.woocommerce-page #main.site-main {
	padding: 40px 15px 60px;
	box-sizing: border-box;
}


/* ==========================================================================
   1. INLOG- EN WINKELWAGENKNOP RECHTSBOVEN IN DE HEADER
   ========================================================================== */

/* Het groepje knoppen naast het telefoonblok. */
.sid-header-acties {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: 20px;
}

/* De knoppen zelf. */
.sid-header-knop {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	background: var(--sid-blauw);
	color: #fff;
	text-decoration: none;
	transition: ease 0.3s all;
}

.sid-header-knop:hover,
.sid-header-knop:focus {
	background: var(--sid-blauw-donker);
	color: #fff;
}

/* Het account is een rondje, de winkelwagen een vierkantje met ronde hoeken. */
.sid-account-knop {
	border-radius: 50%;
}

.sid-cart-knop {
	border-radius: 5px;
}

/* De tekening mag geen extra ruimte of onderstreping krijgen. */
.sid-header-knop .sid-icoon {
	display: block;
}

/* Het telbolletje rechtsboven op de winkelwagen. */
.sid-cart-teller {
	position: absolute;
	top: -6px;
	right: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #fff;
	color: var(--sid-donker);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}


/* ==========================================================================
   1b. DE CONTACT-KNOP IS NAAR DE MENUBALK VERHUISD
   ========================================================================== */

/**
 * Het thema gaf de CONTACT-knop zijn opmaak via de selector
 * '.top-bar .highlighted-cta a'. Nu die knop in de menubalk staat, matcht die
 * selector niet meer en zou de knop zijn vormgeving verliezen. Hieronder
 * krijgt hij exact dezelfde opmaak terug, op zijn nieuwe plek.
 */
header#masthead .nav-bar .bottom-navigation {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 25px;
}

header#masthead .nav-bar .bottom-navigation .highlighted-cta a {
	display: inline-block;
	padding: 12px 26px;
	line-height: 1.2;
	background: var(--sid-blauw);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	transition: ease 0.3s all;
}

header#masthead .nav-bar .bottom-navigation .highlighted-cta a:hover {
	background: var(--sid-blauw-donker);
	color: #fff;
}


/* ==========================================================================
   2. KNOPPEN IN DE HUISSTIJL
   ========================================================================== */

/**
 * WooCommerce heeft zijn eigen paarse knoppen. Hieronder krijgen ze exact de
 * opmaak die het thema ook aan de CONTACT-knop geeft.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
	padding: 15px 30px;
	line-height: 1.2;
	background: var(--sid-blauw);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 5px;
	transition: ease 0.3s all;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
	background: var(--sid-blauw-donker);
	color: #fff;
}

/* Een uitgeschakelde knop moet er ook uitzien alsof hij niet kan. */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--sid-lijn);
	color: #fff;
	opacity: 1;
}


/* ==========================================================================
   3. MELDINGEN
   ========================================================================== */

/**
 * De balk "product is toegevoegd aan je winkelwagen" en soortgelijke
 * meldingen. Standaard krijgen die een paarse streep; die maken we blauw.
 */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--sid-blauw);
	background: var(--sid-vlak);
	color: var(--sid-donker);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--sid-blauw);
}

.woocommerce-error {
	border-top-color: #C4362F;
	background: var(--sid-vlak);
	color: var(--sid-donker);
}


/* ==========================================================================
   4. PRODUCTPAGINA
   ========================================================================== */

/* De prijs opvallender en in de donkere huisstijlkleur. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--sid-donker);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

/* De voorraadmelding rustiger. */
.woocommerce div.product .stock {
	color: #2F7D32;
	font-weight: 600;
}

.woocommerce div.product .out-of-stock {
	color: #C4362F;
	font-weight: 600;
}

/* Het aantalveld naast de knop netjes uitlijnen. */
.woocommerce .quantity .qty {
	width: 70px;
	height: 50px;
	padding: 5px 10px;
	border: 1px solid var(--sid-lijn);
	color: var(--sid-donker);
	text-align: center;
}


/* ==========================================================================
   5. TABBLADEN ONDER HET PRODUCT
   ========================================================================== */

/**
 * WooCommerce maakt hier standaard lichtpaarse blokjes met afgeronde hoekjes
 * van. Hieronder wordt het een strakke rij met een blauwe onderstreping bij
 * het actieve tabblad.
 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 30px;
	border-bottom: 1px solid var(--sid-lijn);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 30px 0 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 0;
	color: var(--sid-donker);
	font-weight: 700;
	border-bottom: 3px solid transparent;
	transition: ease 0.3s all;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--sid-blauw);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--sid-blauw);
	border-bottom-color: var(--sid-blauw);
}


/* ==========================================================================
   6. WINKELWAGEN EN AFREKENEN
   ========================================================================== */

.woocommerce table.shop_table {
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
}

.woocommerce table.shop_table th {
	color: var(--sid-donker);
	font-weight: 700;
}

.woocommerce-checkout #payment {
	background: var(--sid-vlak);
	border-radius: 5px;
}

.woocommerce-checkout #payment div.payment_box {
	background: #fff;
	border: 1px solid var(--sid-lijn);
	color: var(--sid-donker);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--sid-lijn);
}

/* Links in de winkel in de huisstijlkleur. */
.woocommerce a:not(.button):hover {
	color: var(--sid-blauw);
}