/*
Theme Name: Just for Shop
Theme URI: https://justfor-shop.nl/
Author: Just for IT
Author URI: https://justfor-it.nl/
Description: Block theme voor Just for Shop, de webshop van Just for IT. Zelfde huisstijl als justfor-it.nl, met WooCommerce-opmaak voor overzicht, productpagina, winkelwagen en afrekenen.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jfi-shop
*/

/* ==========================================================================
   1. Basis
   ========================================================================== */

:root {
	--jfi-base: var(--wp--preset--color--base);
	--jfi-tint: var(--wp--preset--color--tint);
	--jfi-border: var(--wp--preset--color--border);
	--jfi-muted: var(--wp--preset--color--muted);
	--jfi-text: var(--wp--preset--color--contrast);
	--jfi-navy: var(--wp--preset--color--navy);
	--jfi-primary: var(--wp--preset--color--primary);
	--jfi-accent: var(--wp--preset--color--accent);
	--jfi-shadow: var(--wp--preset--shadow--card);
	--jfi-shadow-lifted: var(--wp--preset--shadow--lifted);
	--jfi-gutter: 1.5rem;
	--jfi-wide: 1200px;
	--jfi-topbar: 36px;
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid rgba(78, 182, 179, 0.6);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.jfi-icon {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.2em;
}

.jfi-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--jfi-wide) + 2 * var(--jfi-gutter));
	margin-inline: auto;
	padding-inline: var(--jfi-gutter);
}

.jfi-eyebrow {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--jfi-primary);
}

/* ==========================================================================
   2. Knoppen
   ========================================================================== */

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(0.85rem - 2px) calc(1.5rem - 2px);
	border: 2px solid var(--jfi-navy);
	background: transparent;
	color: var(--jfi-navy);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--jfi-navy);
	color: var(--jfi-base);
}

.wp-block-button.is-style-navy > .wp-block-button__link {
	background: var(--jfi-navy);
	color: var(--jfi-base);
}

.wp-block-button.is-style-navy > .wp-block-button__link:hover {
	background: var(--jfi-primary);
}

.jfi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	box-sizing: border-box;
	padding: 0.6rem 1.25rem;
	border: 2px solid transparent;
	border-radius: 10px;
	background: var(--jfi-primary);
	color: var(--jfi-base);
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.jfi-btn:hover {
	background: var(--jfi-navy);
	color: var(--jfi-base);
}

.jfi-btn--navy {
	background: var(--jfi-navy);
}

.jfi-btn--navy:hover {
	background: var(--jfi-primary);
}

.jfi-btn--outline {
	border-color: var(--jfi-navy);
	background: transparent;
	color: var(--jfi-navy);
}

.jfi-btn--outline:hover {
	background: var(--jfi-navy);
	color: var(--jfi-base);
}

.jfi-btn--accent {
	background: var(--jfi-accent);
	color: var(--jfi-navy);
	font-weight: 800;
}

.jfi-btn--accent:hover {
	background: var(--jfi-base);
	color: var(--jfi-navy);
}

.jfi-btn--ghost {
	border-color: rgba(255, 255, 255, 0.45);
	background: transparent;
	color: var(--jfi-base);
}

.jfi-btn--ghost:hover {
	border-color: var(--jfi-base);
	background: var(--jfi-base);
	color: var(--jfi-navy);
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.jfi-topbar {
	background: var(--jfi-navy);
	color: var(--jfi-base);
	font-size: 0.8125rem;
	font-weight: 500;
}

.jfi-topbar__inner {
	height: var(--jfi-topbar);
	gap: 1.5rem;
	overflow: hidden;
}

.jfi-topbar__usps {
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.jfi-topbar__usps li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.jfi-topbar__usps li::before {
	content: "";
	width: 0.95rem;
	height: 0.95rem;
	background: var(--jfi-accent);
	-webkit-mask: url("assets/icons/check.svg") center / contain no-repeat;
	mask: url("assets/icons/check.svg") center / contain no-repeat;
}

.jfi-topbar__contact {
	display: flex;
	gap: 1.25rem;
	margin: 0;
	white-space: nowrap;
}

.jfi-topbar__contact a {
	color: var(--jfi-base);
	text-decoration: none;
}

.jfi-topbar__contact a:hover {
	color: var(--jfi-accent);
}

header.wp-block-template-part {
	position: relative;
	z-index: 50;
}

.jfi-header {
	border-bottom: 1px solid var(--jfi-border);
	background: var(--jfi-base);
}

.jfi-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"logo search actions"
		"nav nav nav";
	align-items: center;
	gap: 0.75rem 2rem;
	padding-block: 1.1rem 0.75rem;
}

.jfi-header__inner > * {
	margin-block: 0 !important;
}

.jfi-header__inner > .wp-block-site-logo {
	grid-area: logo;
}

.jfi-header__inner > .wp-block-search {
	grid-area: search;
}

.jfi-header__inner > .jfi-header__actions {
	grid-area: actions;
}

.jfi-header__inner > .jfi-nav {
	grid-area: nav;
}

.jfi-header .wp-block-site-logo img {
	display: block;
	width: auto;
	max-width: 190px;
	max-height: 48px;
	object-fit: contain;
}

.jfi-wordmark a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--jfi-navy);
	text-decoration: none;
}

.jfi-wordmark__name {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.jfi-wordmark__name span {
	color: var(--jfi-primary);
}

.jfi-wordmark__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.6rem;
	line-height: 1;
	border: 1px solid var(--jfi-border);
	border-radius: 999px;
	background: var(--jfi-tint);
	color: var(--jfi-primary);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Zoekveld */
.wp-block-search .wp-block-search__inside-wrapper {
	gap: 0;
	padding: 5px;
	border: 1px solid var(--jfi-border);
	border-radius: 12px;
	background: var(--jfi-tint);
}

.wp-block-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--jfi-accent);
	box-shadow: 0 0 0 3px rgba(78, 182, 179, 0.25);
}

.wp-block-search .wp-block-search__input {
	min-width: 0;
	height: 2.25rem;
	padding: 0 0.75rem 0 2.25rem;
	border: 0;
	border-radius: 8px;
	background: transparent url("assets/icons/search-muted.svg") 0.6rem center / 1.1rem no-repeat;
	color: var(--jfi-text);
	font: inherit;
	font-size: 0.9375rem;
	appearance: none;
}

.wp-block-search .wp-block-search__input:focus {
	outline: none;
}

.wp-block-search .wp-block-search__button {
	height: 2.25rem;
	margin: 0;
	padding: 0 1rem;
	border-radius: 8px;
	font-size: 0.875rem;
}

/* Account en winkelwagen */
.jfi-header__actions {
	gap: 0.5rem;
}

.jfi-header__actions .wc-block-customer-account a,
.jfi-header__actions .wp-block-woocommerce-customer-account a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border-radius: 10px;
	color: var(--jfi-text);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.jfi-header__actions .wp-block-woocommerce-customer-account a:hover {
	background: var(--jfi-tint);
	color: var(--jfi-navy);
}

.jfi-header__actions .wp-block-woocommerce-customer-account svg {
	width: 1.25rem;
	height: 1.25rem;
}

.jfi-header__actions .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 0.9rem;
	border: 0;
	border-radius: 10px;
	background: var(--jfi-navy);
	color: var(--jfi-base);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.jfi-header__actions .wc-block-mini-cart__button:hover:not([disabled]) {
	background: var(--jfi-primary);
	opacity: 1;
}

.jfi-header__actions .wc-block-mini-cart__amount {
	color: inherit;
	margin: 0;
}

.jfi-header__actions .wc-block-mini-cart__badge {
	background: var(--jfi-accent) !important;
	color: var(--jfi-navy) !important;
	font-weight: 800;
}

.jfi-header__actions .wc-block-mini-cart__icon {
	color: inherit;
}

/* Sobere header op de afrekenpagina */
.jfi-header--checkout {
	padding-block: 1rem;
}

.jfi-checkout-head {
	gap: 1rem;
}

.jfi-checkout-head > * {
	margin: 0;
}

.jfi-secure {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--jfi-navy);
	font-size: 0.9375rem;
	font-weight: 700;
}

.jfi-secure::before {
	content: "";
	width: 1.1rem;
	height: 1.1rem;
	background: var(--jfi-primary);
	-webkit-mask: url("assets/icons/lock.svg") center / contain no-repeat;
	mask: url("assets/icons/lock.svg") center / contain no-repeat;
}

/* Navigatie */
.jfi-nav {
	font-size: 0.9375rem;
	font-weight: 600;
}

.jfi-nav .wp-block-navigation__container {
	gap: 0.25rem;
	width: 100%;
}

.jfi-nav .wp-block-navigation-item__content {
	color: var(--jfi-text);
	text-decoration: none;
}

.jfi-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: 10px;
}

.jfi-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.jfi-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--jfi-tint);
	color: var(--jfi-navy);
}

.jfi-nav .wp-block-navigation__container > .jfi-nav-all > .wp-block-navigation-item__content {
	padding-left: 2.4rem;
	padding-right: 0.35rem;
	background: url("assets/icons/grid-navy.svg") 0.85rem center / 1rem no-repeat;
	color: var(--jfi-navy);
}

.jfi-nav .wp-block-navigation__container > .jfi-nav-all {
	margin-right: 0.5rem;
	border: 1px solid var(--jfi-border);
	border-radius: 10px;
	background: var(--jfi-tint);
}

.jfi-nav .wp-block-navigation__container > .jfi-nav-all > .wp-block-navigation__submenu-icon {
	margin-right: 0.75rem;
}

.jfi-nav .wp-block-navigation__container > .jfi-nav-sale > .wp-block-navigation-item__content {
	color: var(--jfi-primary);
}

.jfi-nav .wp-block-navigation__container > .jfi-nav-push {
	margin-left: auto;
}

.jfi-nav .wp-block-navigation__container > .jfi-nav-muted > .wp-block-navigation-item__content {
	color: var(--jfi-muted);
	font-size: 0.875rem;
}

.jfi-nav .wp-block-navigation__submenu-container {
	min-width: 16rem !important;
	padding: 0.5rem;
	border: 1px solid var(--jfi-border) !important;
	border-radius: 12px;
	background: var(--jfi-base) !important;
	box-shadow: var(--jfi-shadow-lifted);
	font-weight: 500;
}

.jfi-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem !important;
	border-radius: 8px;
}

.jfi-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--jfi-tint);
	color: var(--jfi-navy);
}

.jfi-nav .wp-block-navigation__responsive-container-open,
.jfi-nav .wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 10px;
	color: var(--jfi-navy);
}

@media (min-width: 600px) {
	.jfi-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

.jfi-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem var(--jfi-gutter);
	background: var(--jfi-base);
	color: var(--jfi-text);
}

.jfi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .jfi-nav-all {
	margin-right: 0;
	border: 0;
	background: transparent;
}

.jfi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	min-height: 2.75rem;
}

.jfi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.25rem;
	font-size: 1.0625rem;
}

.jfi-nav .wp-block-navigation__responsive-container.is-menu-open .jfi-nav-push {
	margin-left: 0;
}

.jfi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none;
	padding: 0 0 0.5rem 0.75rem;
}

@media (min-width: 782px) {
	header.wp-block-template-part {
		position: sticky;
		top: calc(-1 * var(--jfi-topbar));
	}

	.admin-bar header.wp-block-template-part {
		top: calc(32px - var(--jfi-topbar));
	}
}

@media (max-width: 899px) {
	.jfi-topbar__usps li:nth-child(n + 3) {
		display: none;
	}
}

@media (max-width: 599px) {
	.jfi-topbar__usps li:nth-child(n + 2),
	.jfi-topbar__contact a:nth-child(n + 2) {
		display: none;
	}

	.jfi-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"nav logo actions"
			"search search search";
		gap: 0.6rem 0.5rem;
		padding-block: 0.6rem 0.85rem;
	}

	.jfi-header .wp-block-site-logo img {
		max-width: 140px;
		max-height: 38px;
	}

	.jfi-wordmark__name {
		font-size: 1.2rem;
	}

	.jfi-header__actions .wp-block-woocommerce-customer-account .label,
	.jfi-header__actions .wc-block-mini-cart__amount {
		display: none;
	}

	.jfi-header__actions .wp-block-woocommerce-customer-account a {
		padding: 0 0.6rem;
	}
}

/* ==========================================================================
   4. Paginakop, inhoud en blokstijlen
   ========================================================================== */

.jfi-band {
	padding-block: 2.25rem 2.5rem;
	border-bottom: 1px solid var(--jfi-border);
	background: var(--jfi-tint);
}

.jfi-band h1,
.jfi-band .wp-block-post-title,
.jfi-band .wp-block-query-title {
	margin-block: 0.35rem 0;
	font-size: var(--wp--preset--font-size--xx-large);
}

.jfi-band > * + *,
.jfi-band .jfi-wrap > * + * {
	margin-block-start: 0.6rem;
}

.jfi-band .term-description,
.jfi-band .page-description,
.jfi-band .woocommerce-products-header p {
	max-width: 42rem;
	margin: 0.6rem 0 0;
}

.jfi-content {
	padding-block: 3rem 5rem;
}

.jfi-main > .wp-block-query {
	padding-block: 3rem 5rem;
}

.jfi-main > .wp-block-post-featured-image {
	margin-block: 2.5rem 0;
}

.jfi-main > .wp-block-post-featured-image img {
	border-radius: 20px;
}

.jfi-main--full > .wp-block-post-content > * {
	margin-block: 0;
}

.jfi-404 {
	padding-block: var(--wp--preset--spacing--70);
}

.wp-block-group.is-style-card {
	padding: 1.5rem;
	border: 1px solid var(--jfi-border);
	border-radius: 16px;
	background: var(--jfi-base);
	box-shadow: var(--jfi-shadow);
}

.wp-block-group.is-style-glass {
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--jfi-base);
}

ul.is-style-checklist {
	padding: 0;
	list-style: none;
}

ul.is-style-checklist li {
	position: relative;
	padding-left: 1.75rem;
}

ul.is-style-checklist li + li {
	margin-top: 0.5rem;
}

ul.is-style-checklist li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 0;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--jfi-primary);
	-webkit-mask: url("assets/icons/check.svg") center / contain no-repeat;
	mask: url("assets/icons/check.svg") center / contain no-repeat;
}

.wp-block-details {
	padding: 1rem 1.25rem;
	border: 1px solid var(--jfi-border);
	border-radius: 12px;
}

.wp-block-details + .wp-block-details {
	margin-top: 0.75rem;
}

.wp-block-details summary {
	font-weight: 700;
	color: var(--jfi-navy);
	cursor: pointer;
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--jfi-border);
}

.wp-block-query-pagination {
	margin-top: 2.5rem;
}

.wp-block-post-date {
	color: var(--jfi-muted);
}

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], select, textarea) {
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--jfi-border);
	border-radius: 10px;
	background: var(--jfi-base);
	color: var(--jfi-text);
	font: inherit;
}

/* Tijdelijke opmaak voor oude Flatsome-pagina's */
.jfi-fl-section {
	margin-block: 0 2rem;
}

.jfi-fl-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	margin-block: 0 1.5rem;
}

.jfi-fl-col {
	flex: 1 1 calc(var(--jfi-span, 12) / 12 * 100% - 2.5rem);
	min-width: min(100%, 16rem);
}

.jfi-fl-col > :first-child,
.jfi-fl-text > :first-child {
	margin-top: 0;
}

.jfi-fl-banner {
	padding: 2rem;
	border: 1px solid var(--jfi-border);
	border-radius: 20px;
	background: var(--jfi-tint);
}

.jfi-fl-accordion {
	margin-block: 1rem;
}

/* ==========================================================================
   5. Homepage
   ========================================================================== */

.jfi-hero {
	padding-block: var(--wp--preset--spacing--60);
	background-color: var(--jfi-tint);
	background-image:
		radial-gradient(circle at 88% 12%, rgba(78, 182, 179, 0.28), transparent 42%),
		radial-gradient(circle at 5% 100%, rgba(78, 182, 179, 0.14), transparent 38%);
}

.jfi-hero__cols {
	gap: 3rem 4rem;
	margin-block: 0;
}

.jfi-hero h1 {
	margin-block: 0.9rem 1.1rem;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.jfi-hero .wp-block-column > p {
	max-width: 33rem;
	margin-block: 0;
}

.jfi-hero .wp-block-buttons {
	margin-top: 1.75rem;
}

.jfi-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.jfi-tiles--1 {
	grid-template-columns: minmax(0, 1fr);
}

.jfi-tile {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	box-sizing: border-box;
	min-height: 10.25rem;
	padding: 1.4rem;
	border: 1px solid var(--jfi-border);
	border-radius: 20px;
	background: var(--jfi-base);
	box-shadow: var(--jfi-shadow);
	color: var(--jfi-text);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.jfi-tile:hover {
	transform: translateY(-3px);
	box-shadow: var(--jfi-shadow-lifted);
	color: var(--jfi-text);
}

.jfi-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.4rem;
	border-radius: 12px;
	background: var(--jfi-tint);
	color: var(--jfi-primary);
	font-size: 1.2rem;
}

.jfi-tile__name {
	font-size: 1.125rem;
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--jfi-navy);
}

.jfi-tile__desc {
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--jfi-muted);
}

.jfi-tile--main {
	position: relative;
	grid-row: span 2;
	justify-content: flex-end;
	min-height: 21.5rem;
	padding: 1.75rem;
	overflow: hidden;
	border-color: transparent;
	background-color: var(--jfi-navy);
	background-image: radial-gradient(circle at 100% 0%, rgba(78, 182, 179, 0.34), transparent 55%);
	color: var(--jfi-base);
}

.jfi-tile--main:hover {
	color: var(--jfi-base);
}

.jfi-tiles--1 .jfi-tile--main,
.jfi-tiles--2 .jfi-tile--main {
	grid-row: auto;
}

@media (max-width: 599px) {
	.jfi-tiles--3 .jfi-tile--main {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 13rem;
	}
}

.jfi-tile__bigicon {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 4.5rem;
	height: 4.5rem;
	color: var(--jfi-accent);
	stroke-width: 1.5;
}

.jfi-tile__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jfi-accent);
}

.jfi-tile--main .jfi-tile__name {
	font-size: 1.75rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--jfi-base);
}

.jfi-tile--main .jfi-tile__desc {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.82);
}

.jfi-tile__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 700;
}

/* Zekerheden */
.jfi-usps {
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--jfi-border);
}

.jfi-usps__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem 2rem;
	margin-block: 0;
}

.jfi-usp {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 2.75rem;
	margin: 0 !important;
	padding-left: 3.6rem;
	line-height: 1.35;
}

.jfi-usp > * {
	margin: 0 !important;
}

.jfi-usp::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 12px;
	background: var(--jfi-tint);
	transform: translateY(-50%);
}

.jfi-usp::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.7rem;
	width: 1.35rem;
	height: 1.35rem;
	background: var(--jfi-primary);
	transform: translateY(-50%);
	-webkit-mask: var(--jfi-usp-icon) center / contain no-repeat;
	mask: var(--jfi-usp-icon) center / contain no-repeat;
}

.jfi-usp--truck { --jfi-usp-icon: url("assets/icons/truck.svg"); }
.jfi-usp--rotate-ccw { --jfi-usp-icon: url("assets/icons/rotate-ccw.svg"); }
.jfi-usp--credit-card { --jfi-usp-icon: url("assets/icons/credit-card.svg"); }
.jfi-usp--phone { --jfi-usp-icon: url("assets/icons/phone.svg"); }
.jfi-usp--shield { --jfi-usp-icon: url("assets/icons/shield.svg"); }
.jfi-usp--clock { --jfi-usp-icon: url("assets/icons/clock.svg"); }
.jfi-usp--check { --jfi-usp-icon: url("assets/icons/check.svg"); }

.jfi-usp__title {
	font-weight: 700;
	color: var(--jfi-navy);
}

.jfi-usp__text {
	font-size: 0.875rem;
	color: var(--jfi-muted);
}

/* Secties */
.jfi-section {
	padding-block: var(--wp--preset--spacing--60) 0;
}

.jfi-section:last-child {
	padding-bottom: var(--wp--preset--spacing--70);
}

.jfi-section--deal:not(:has(.jfi-deal)) {
	display: none;
}

.jfi-section__head {
	gap: 0.75rem 1.5rem;
	margin-block: 0 1.75rem;
}

.jfi-section__title > * {
	margin: 0;
}

.jfi-section__title h2 {
	margin-top: 0.35rem;
	font-size: clamp(1.6rem, 3vw, 2rem);
}

.jfi-section__body {
	margin-block: 0;
}

.jfi-more {
	margin: 0;
}

.jfi-more a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	text-decoration: none;
}

.jfi-more a::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
}

/* Categorietegels */
.jfi-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
}

.jfi-cat {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-height: 5.25rem;
	box-sizing: border-box;
	padding: 1.1rem;
	border: 1px solid var(--jfi-border);
	border-radius: 16px;
	background: var(--jfi-base);
	color: var(--jfi-text);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.jfi-cat:hover {
	border-color: var(--jfi-accent);
	box-shadow: var(--jfi-shadow);
	color: var(--jfi-text);
	transform: translateY(-2px);
}

.jfi-cat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 12px;
	background: var(--jfi-tint);
	color: var(--jfi-primary);
	font-size: 1.2rem;
}

.jfi-cat__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
}

.jfi-cat__name {
	font-weight: 700;
	color: var(--jfi-navy);
}

.jfi-cat__sub {
	overflow: hidden;
	font-size: 0.875rem;
	color: var(--jfi-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jfi-cat__arrow {
	margin-left: auto;
	color: var(--jfi-muted);
}

/* Aanbieding */
.jfi-deal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem 3.5rem;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: 24px;
	background-color: var(--jfi-navy);
	background-image: radial-gradient(circle at 92% 8%, rgba(78, 182, 179, 0.3), transparent 46%);
	color: var(--jfi-base);
}

.jfi-deal__body {
	display: flex;
	flex: 1 1 26rem;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
	min-width: 0;
}

.jfi-deal__label {
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--jfi-accent);
	color: var(--jfi-navy);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jfi-deal__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.4vw, 2.25rem);
	line-height: 1.12;
}

.jfi-deal__title a {
	color: var(--jfi-base);
	text-decoration: none;
}

.jfi-deal__desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
}

.jfi-deal__price {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0.25rem 0 0;
}

.jfi-deal__now {
	font-size: clamp(2rem, 4vw, 2.5rem);
	font-weight: 750;
	line-height: 1;
	letter-spacing: -0.02em;
}

.jfi-deal__price del {
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.82);
}

.jfi-deal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.6rem;
}

.jfi-deal__actions .jfi-btn {
	min-height: 3.25rem;
	padding-inline: 1.5rem;
}

.jfi-deal__media {
	display: flex;
	flex: 1 1 18rem;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 16.5rem;
	overflow: hidden;
	border-radius: 16px;
	background: var(--jfi-base);
}

.jfi-deal__img {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 1.25rem;
	object-fit: contain;
}

/* IT-diensten */
.jfi-service {
	gap: 1.5rem 3rem;
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--jfi-border);
	border-radius: 24px;
	background: var(--jfi-tint);
}

.jfi-service__text {
	flex: 1 1 30rem;
	min-width: 0;
}

.jfi-service__text > * {
	margin: 0;
}

.jfi-service__text h2 {
	margin-block: 0.35rem 0.6rem;
	font-size: clamp(1.4rem, 2.6vw, 1.75rem);
}

.jfi-service__text p:last-child {
	max-width: 39rem;
}

.jfi-service .wp-block-buttons {
	margin: 0;
}

/* ==========================================================================
   6. WooCommerce: productkaarten
   ========================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex;
	flex-direction: column;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--jfi-border);
	border-radius: 16px;
	background: var(--jfi-base);
	box-shadow: var(--jfi-shadow);
	text-align: left;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--jfi-shadow-lifted);
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0 1rem;
	color: var(--jfi-text);
	text-decoration: none;
}

.jfi-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	margin: 0 -1rem 0.45rem;
	background: var(--jfi-tint);
}

.woocommerce ul.products li.product .jfi-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	box-sizing: border-box;
	padding: 1rem;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.jfi-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
}

.jfi-card__media .jfi-badge {
	position: absolute;
	z-index: 1;
	top: 0.75rem;
	left: 0.75rem;
}

.jfi-badge--sale {
	background: var(--jfi-navy);
	color: var(--jfi-base);
}

.jfi-badge--soldout {
	border: 1px solid var(--jfi-border);
	background: var(--jfi-base);
	color: var(--jfi-muted);
}

.jfi-card__cat {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jfi-muted);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	min-height: 2.8em;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--jfi-navy);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.woocommerce ul.products li.product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.5rem;
	margin: auto 0 0;
	padding-top: 0.2rem;
	font-size: 1.25rem;
	font-weight: 750;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--jfi-navy);
}

.woocommerce ul.products li.product .price del {
	order: 2;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--jfi-muted);
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	font-weight: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product .star-rating {
	margin: 0;
	font-size: 0.8rem;
}

.woocommerce ul.products li.product .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-sizing: border-box;
	min-height: 2.75rem;
	margin: 0.9rem 1rem 1rem;
	padding: 0.5rem 0.75rem;
	border: 2px solid var(--jfi-primary);
	border-radius: 10px;
	background: var(--jfi-primary);
	color: var(--jfi-base);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

.woocommerce ul.products li.product .button:hover {
	border-color: var(--jfi-navy);
	background: var(--jfi-navy);
	color: var(--jfi-base);
}

.woocommerce ul.products li.product .button.ajax_add_to_cart::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: url("assets/icons/shopping-cart.svg") center / contain no-repeat;
	mask: url("assets/icons/shopping-cart.svg") center / contain no-repeat;
}

.woocommerce ul.products li.product .button:not(.ajax_add_to_cart) {
	background: transparent;
	color: var(--jfi-primary);
}

.woocommerce ul.products li.product .button:not(.ajax_add_to_cart):hover {
	background: var(--jfi-primary);
	border-color: var(--jfi-primary);
	color: var(--jfi-base);
}

.woocommerce ul.products li.product .button.loading {
	opacity: 0.7;
}

.woocommerce ul.products li.product .button.added::after {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	margin: 0;
	background: currentColor;
	-webkit-mask: url("assets/icons/check.svg") center / contain no-repeat;
	mask: url("assets/icons/check.svg") center / contain no-repeat;
}

.woocommerce ul.products li.product .added_to_cart {
	margin: -0.5rem 1rem 1rem;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 700;
	text-align: center;
}

@media (max-width: 599px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
		padding: 0 0.75rem;
	}

	.jfi-card__media {
		margin: 0 -0.75rem 0.3rem;
	}

	.woocommerce ul.products li.product .jfi-card__media img {
		padding: 0.6rem;
	}

	.jfi-card__media .jfi-badge {
		top: 0.5rem;
		left: 0.5rem;
		padding: 0.15rem 0.55rem;
		font-size: 0.6875rem;
	}

	.jfi-card__cat {
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.875rem;
	}

	.woocommerce ul.products li.product .price {
		font-size: 1.0625rem;
	}

	.woocommerce ul.products li.product .button {
		margin: 0.7rem 0.75rem 0.75rem;
		padding: 0.4rem 0.4rem;
		font-size: 0.8125rem;
	}

	.woocommerce ul.products li.product .button.ajax_add_to_cart::before {
		display: none;
	}
}

/* ==========================================================================
   7. WooCommerce: overzicht
   ========================================================================== */

.jfi-main--woo {
	margin-block: 0;
}

.woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.875rem;
	color: var(--jfi-navy);
	font-weight: 600;
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--jfi-muted);
	font-weight: 400;
	text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--jfi-primary);
}

.jfi-crumb-sep {
	display: inline-flex;
	color: var(--jfi-muted);
	font-size: 0.8rem;
}

.woocommerce-products-header__title {
	margin: 0.5rem 0 0;
}

.jfi-archive {
	display: flex;
	align-items: flex-start;
	gap: 2rem 2.5rem;
	padding-block: 3rem 5rem;
}

.jfi-filters-col {
	flex: 0 0 15.5rem;
	min-width: 0;
}

.jfi-archive__main {
	flex: 1 1 0;
	min-width: 0;
}

.jfi-filters > summary {
	display: none;
}

.jfi-filters__body {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.jfi-filter {
	margin: 0;
}

.jfi-filter__title {
	margin: 0 0 0.6rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jfi-navy);
}

.jfi-filter__list,
.jfi-filter__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jfi-filter__sub {
	margin: 0.15rem 0 0.35rem 0.75rem;
	padding-left: 0.5rem;
	border-left: 1px solid var(--jfi-border);
}

.jfi-filter__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 2.25rem;
	padding: 0.2rem 0.75rem;
	border-radius: 10px;
	color: var(--jfi-text);
	font-size: 0.9375rem;
	line-height: 1.35;
	text-decoration: none;
}

.jfi-filter__list a:hover,
.jfi-filter__list a.is-active {
	background: var(--jfi-tint);
	color: var(--jfi-navy);
}

.jfi-filter__list a.is-active {
	font-weight: 700;
}

.jfi-filter__count {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--jfi-muted);
}

.jfi-filter__price {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--jfi-muted);
}

.jfi-filter__price input {
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 2.75rem;
	padding: 0 0.75rem;
	font-size: 0.9375rem;
}

.jfi-filter__apply {
	width: 100%;
	min-height: 2.75rem;
	margin-top: 0.75rem;
	border: 2px solid var(--jfi-navy);
	border-radius: 10px;
	background: transparent;
	color: var(--jfi-navy);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.jfi-filter__apply:hover {
	background: var(--jfi-navy);
	color: var(--jfi-base);
}

.jfi-filter__reset {
	display: inline-block;
	margin-top: 0.6rem;
	font-size: 0.875rem;
}

.jfi-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1.5rem;
}

.jfi-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.jfi-chip {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 0.9rem;
	border: 1px solid var(--jfi-border);
	border-radius: 999px;
	color: var(--jfi-navy);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.jfi-chip:hover {
	border-color: var(--jfi-accent);
	color: var(--jfi-navy);
}

.jfi-chip.is-active {
	border-color: var(--jfi-navy);
	background: var(--jfi-navy);
	color: var(--jfi-base);
	font-weight: 700;
}

.jfi-toolbar__sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.woocommerce .jfi-toolbar .woocommerce-result-count {
	float: none;
	margin: 0;
	font-size: 0.875rem;
	color: var(--jfi-muted);
}

.woocommerce .jfi-toolbar .woocommerce-ordering {
	float: none;
	margin: 0;
}

.woocommerce .woocommerce-ordering select {
	height: 2.75rem;
	padding: 0 2.25rem 0 0.9rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--jfi-navy);
}

.woocommerce nav.woocommerce-pagination {
	margin-top: 2.5rem;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	float: none;
	margin: 0;
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	box-sizing: border-box;
	padding: 0 0.5rem;
	border: 1px solid var(--jfi-border);
	border-radius: 10px;
	background: var(--jfi-base);
	color: var(--jfi-navy);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--jfi-accent);
	background: var(--jfi-tint);
	color: var(--jfi-navy);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	border-color: var(--jfi-navy);
	background: var(--jfi-navy);
	color: var(--jfi-base);
}

.woocommerce-no-products-found {
	margin: 0;
}

@media (max-width: 899px) {
	.jfi-archive {
		flex-direction: column;
		align-items: stretch;
		padding-block: 1.5rem 3.5rem;
	}

	.jfi-filters-col {
		flex: none;
	}

	.jfi-filters {
		border: 1px solid var(--jfi-border);
		border-radius: 12px;
	}

	.jfi-filters > summary {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		min-height: 3rem;
		padding: 0 1rem;
		font-weight: 700;
		color: var(--jfi-navy);
		cursor: pointer;
		list-style: none;
	}

	.jfi-filters > summary::-webkit-details-marker {
		display: none;
	}

	.jfi-filters__body {
		padding: 0.5rem 1rem 1.25rem;
	}
}

/* ==========================================================================
   8. WooCommerce: productpagina
   ========================================================================== */

.jfi-single {
	padding-block: 1.5rem 5rem;
}

.jfi-single .woocommerce-breadcrumb {
	margin-bottom: 1.5rem;
}

.woocommerce .jfi-single div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem 3.5rem;
	align-items: start;
}

.woocommerce .jfi-single div.product::before,
.woocommerce .jfi-single div.product::after {
	display: none;
}

.woocommerce .jfi-single div.product > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.woocommerce .jfi-single div.product div.images,
.woocommerce .jfi-single div.product div.summary {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce .jfi-single div.product div.images {
	grid-column: 1;
}

.woocommerce .jfi-single div.product div.summary {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.woocommerce .jfi-single div.product div.summary > * {
	margin: 0;
}

.woocommerce .jfi-single div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce .jfi-single div.product div.images .flex-viewport {
	border: 1px solid var(--jfi-border);
	border-radius: 20px;
	background: var(--jfi-tint);
	overflow: hidden;
}

.woocommerce .jfi-single div.product div.images .flex-viewport .woocommerce-product-gallery__wrapper {
	border: 0;
	border-radius: 0;
}

.woocommerce .jfi-single div.product div.images .woocommerce-product-gallery__image img,
.woocommerce .jfi-single div.product div.images .woocommerce-product-gallery__image--placeholder img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	padding: 1.5rem;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.woocommerce .jfi-single div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce .jfi-single div.product div.images .flex-control-thumbs li {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce .jfi-single div.product div.images .flex-control-thumbs li img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	padding: 0.4rem;
	border: 1px solid var(--jfi-border);
	border-radius: 12px;
	background: var(--jfi-tint);
	object-fit: contain;
	opacity: 1;
	cursor: pointer;
}

.woocommerce .jfi-single div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce .jfi-single div.product div.images .flex-control-thumbs li img:hover {
	border: 2px solid var(--jfi-primary);
	padding: calc(0.4rem - 1px);
}

.woocommerce .jfi-single div.product div.images .woocommerce-product-gallery__trigger {
	top: 1rem;
	right: 1rem;
	border: 1px solid var(--jfi-border);
	background: var(--jfi-base);
}

.jfi-single__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.jfi-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.2rem 0.65rem;
	border: 1px solid var(--jfi-border);
	border-radius: 999px;
	background: var(--jfi-tint);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--jfi-navy);
}

.jfi-stock::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--jfi-primary);
}

.jfi-stock--out {
	background: var(--jfi-base);
	color: var(--jfi-muted);
}

.jfi-stock--out::before {
	background: var(--jfi-muted);
}

.woocommerce .jfi-single div.product .product_title {
	font-size: clamp(1.6rem, 3vw, 2.125rem);
	line-height: 1.15;
}

.woocommerce .jfi-single div.product div.summary p.price,
.woocommerce .jfi-single div.product div.summary .woocommerce-variation-price span.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	font-size: clamp(2rem, 4vw, 2.5rem);
	font-weight: 750;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--jfi-navy);
}

.woocommerce .jfi-single div.product div.summary p.price del {
	order: 2;
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--jfi-muted);
	opacity: 1;
}

.woocommerce .jfi-single div.product div.summary p.price ins {
	font-weight: inherit;
	text-decoration: none;
}

.woocommerce .jfi-single div.product p.jfi-price-note {
	margin-top: -0.8rem;
	font-size: 0.875rem;
	color: var(--jfi-muted);
}

.woocommerce-product-details__short-description > :first-child {
	margin-top: 0;
}

.woocommerce-product-details__short-description > :last-child {
	margin-bottom: 0;
}

.woocommerce .jfi-single div.product p.stock {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--jfi-primary);
}

.woocommerce .jfi-single div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.woocommerce .jfi-single div.product form.cart::before,
.woocommerce .jfi-single div.product form.cart::after {
	display: none;
}

.woocommerce .jfi-single div.product form.cart div.quantity {
	float: none;
	margin: 0;
}

.woocommerce .jfi-single div.product form.cart .quantity .qty {
	width: 5rem;
	height: 3.5rem;
	padding: 0 0.5rem;
	border-radius: 12px;
	font-weight: 700;
	text-align: center;
	color: var(--jfi-navy);
}

.woocommerce .jfi-single div.product form.cart .button {
	flex: 1 1 14rem;
	float: none;
	min-height: 3.5rem;
	padding: 0 1.5rem;
	border-radius: 12px;
	background: var(--jfi-primary);
	color: var(--jfi-base);
	font-size: 1.0625rem;
	font-weight: 700;
}

.woocommerce .jfi-single div.product form.cart .button:hover {
	background: var(--jfi-navy);
}

.woocommerce .jfi-single div.product form.cart .button.disabled,
.woocommerce .jfi-single div.product form.cart .button:disabled {
	background: var(--jfi-muted);
	opacity: 0.6;
}

.woocommerce .jfi-single div.product form.variations_form {
	display: block;
}

.woocommerce .jfi-single div.product form.cart .variations {
	width: 100%;
	margin: 0 0 1rem;
	border: 0;
}

.woocommerce .jfi-single div.product form.cart .variations th,
.woocommerce .jfi-single div.product form.cart .variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}

.woocommerce .jfi-single div.product form.cart .variations label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--jfi-navy);
}

.woocommerce .jfi-single div.product form.cart .variations select {
	width: 100%;
	height: 3rem;
	margin: 0;
	padding: 0 0.9rem;
}

.woocommerce .jfi-single div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 0.875rem;
}

.woocommerce .jfi-single div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.woocommerce .jfi-single div.product .woocommerce-variation-price {
	margin-bottom: 0.75rem;
}

.jfi-single__usps {
	padding: 0;
	border: 1px solid var(--jfi-border);
	border-radius: 16px;
	font-size: 0.9375rem;
	list-style: none;
}

.jfi-single__usps li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1.1rem;
}

.jfi-single__usps li + li {
	border-top: 1px solid var(--jfi-border);
}

.jfi-single__usps .jfi-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--jfi-primary);
}

.jfi-single__usps strong {
	color: var(--jfi-navy);
}

.woocommerce .jfi-single div.product .product_meta {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: 0.875rem;
	color: var(--jfi-muted);
}

.woocommerce .jfi-single div.product .product_meta a {
	color: var(--jfi-muted);
}

/* Tabbladen */
.woocommerce .jfi-single div.product .woocommerce-tabs {
	margin: 1.5rem 0 0;
	padding: 0;
}

.woocommerce .jfi-single div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
	margin: 0 0 1.75rem;
	padding: 0;
	border-bottom: 1px solid var(--jfi-border);
	list-style: none;
}

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

.woocommerce .jfi-single div.product .woocommerce-tabs ul.tabs li {
	margin: 0 0 -1px;
	padding: 0;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: transparent;
}

.woocommerce .jfi-single div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.75rem 0;
	color: var(--jfi-muted);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce .jfi-single div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--jfi-primary);
	background: transparent;
}

.woocommerce .jfi-single div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce .jfi-single div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--jfi-navy);
}

.woocommerce .jfi-single div.product .woocommerce-tabs .panel {
	max-width: 48rem;
	margin: 0;
	padding: 0;
}

.woocommerce .jfi-single div.product .woocommerce-tabs .panel > h2:first-child {
	margin-top: 0;
	font-size: 1.5rem;
}

.woocommerce table.shop_attributes {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	padding: 0.75rem 1rem;
	border: 0;
	background: transparent;
	font-style: normal;
	text-align: left;
}

.woocommerce table.shop_attributes th {
	width: 40%;
	font-weight: 600;
	color: var(--jfi-muted);
}

.woocommerce table.shop_attributes td {
	font-weight: 600;
	color: var(--jfi-navy);
}

.woocommerce table.shop_attributes td p {
	margin: 0;
	padding: 0;
}

.woocommerce table.shop_attributes tr:nth-child(odd) th,
.woocommerce table.shop_attributes tr:nth-child(odd) td {
	background: var(--jfi-tint);
}

.jfi-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--jfi-border);
	border-radius: 16px;
	background: var(--jfi-tint);
}

.jfi-help p {
	margin: 0;
}

.jfi-help__title {
	font-weight: 750;
	color: var(--jfi-navy);
}

.jfi-help__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.woocommerce .jfi-single div.product .related,
.woocommerce .jfi-single div.product .upsells {
	margin-top: 2rem;
}

.woocommerce .jfi-single div.product .related > h2,
.woocommerce .jfi-single div.product .upsells > h2 {
	margin: 0 0 1.5rem;
	font-size: clamp(1.6rem, 3vw, 2rem);
}

@media (max-width: 899px) {
	.woocommerce .jfi-single div.product {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	.woocommerce .jfi-single div.product div.images,
	.woocommerce .jfi-single div.product div.summary {
		grid-column: 1;
	}
}

/* ==========================================================================
   9. WooCommerce: winkelwagen, afrekenen, account, meldingen
   ========================================================================== */

.woocommerce-cart main.wp-block-group:not(.jfi-main),
.woocommerce-checkout main.wp-block-group:not(.jfi-main),
.woocommerce-account main.wp-block-group:not(.jfi-main) {
	padding-block: 2.5rem 5rem;
}

.woocommerce-cart main .wp-block-post-title,
.woocommerce-checkout main .wp-block-post-title,
.woocommerce-account main .wp-block-post-title {
	margin-block: 0 1.75rem;
	font-size: var(--wp--preset--font-size--xx-large);
}

.wc-block-components-button:not(.is-link) {
	border-radius: 10px;
	font-weight: 700;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	min-height: 3.5rem;
	border-radius: 12px !important;
	font-size: 1.0625rem;
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-cart .wc-block-cart__totals-title {
	font-family: inherit;
}

.wc-block-cart .wc-block-components-sidebar {
	box-sizing: border-box;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--jfi-border);
	border-radius: 20px;
	background: var(--jfi-tint);
}

.wc-block-components-product-name {
	color: var(--jfi-navy);
	font-weight: 700;
	text-decoration: none;
}

.wc-block-cart-items .wc-block-cart-items__row img,
.wc-block-components-order-summary-item__image img {
	border-radius: 10px;
	background: var(--jfi-tint);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--jfi-navy);
	font-weight: 750;
}

.wc-block-components-text-input input,
.wc-block-components-select .wc-block-components-select__select,
.wc-blocks-components-select .wc-blocks-components-select__select {
	border-radius: 10px !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title,
.wc-block-mini-cart__drawer {
	font-family: var(--wp--preset--font-family--jakarta);
}

.wc-block-mini-cart__footer-actions .wc-block-components-button {
	border-radius: 10px;
}

/* Klassieke winkelwagen en klassiek afrekenen (shortcodes) */
.woocommerce table.shop_table {
	border: 1px solid var(--jfi-border);
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 0.9rem 1rem;
	border-color: var(--jfi-border);
}

.woocommerce table.shop_table thead th {
	background: var(--jfi-tint);
	color: var(--jfi-navy);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td.product-name a {
	color: var(--jfi-navy);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce table.cart img {
	width: 4rem;
	border-radius: 10px;
	background: var(--jfi-tint);
}

.woocommerce a.remove {
	color: var(--jfi-muted) !important;
}

.woocommerce a.remove:hover {
	background: var(--jfi-navy);
	color: var(--jfi-base) !important;
}

.woocommerce :is(a.button, button.button, input.button, #respond input#submit) {
	border-radius: 10px;
	font-weight: 700;
}

.woocommerce :is(a.button, button.button, input.button).alt,
.woocommerce #payment #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	background: var(--jfi-primary);
	color: var(--jfi-base);
}

.woocommerce :is(a.button, button.button, input.button).alt:hover,
.woocommerce #payment #place_order:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--jfi-navy);
	color: var(--jfi-base);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.5rem;
	margin-bottom: 0;
	padding-block: 0.5rem;
	border-radius: 12px;
	font-size: 1.0625rem;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
	box-sizing: border-box;
	padding: 1.5rem;
	border: 1px solid var(--jfi-border);
	border-radius: 20px;
	background: var(--jfi-tint);
}

.woocommerce .cart-collaterals .cart_totals table.shop_table,
.woocommerce-checkout #order_review table.shop_table {
	background: var(--jfi-base);
}

.woocommerce #payment {
	border-radius: 16px;
	background: var(--jfi-base);
}

.woocommerce-checkout #payment div.payment_box {
	border-radius: 10px;
	background: var(--jfi-tint);
	color: var(--jfi-text);
}

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

.woocommerce form .form-row label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--jfi-navy);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--jfi-border);
	border-radius: 10px;
}

/* Mijn account */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.55rem 0.9rem;
	border-radius: 10px;
	color: var(--jfi-text);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--jfi-tint);
	color: var(--jfi-navy);
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
	border: 1px solid var(--jfi-border);
	border-radius: 16px;
}

/* Meldingen */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: 12px;
}

.wc-block-components-notice-banner {
	border-radius: 12px !important;
}

.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info {
	border-color: var(--jfi-border);
	background: var(--jfi-tint);
	color: var(--jfi-navy);
}

.wc-block-components-notice-banner.is-success > svg,
.wc-block-components-notice-banner.is-info > svg {
	background-color: var(--jfi-primary);
}

.jfi-archive__main .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 1.25rem;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.jfi-footer {
	padding-block: var(--wp--preset--spacing--60) 0;
	background: var(--jfi-navy);
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.9375rem;
}

.jfi-footer a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.jfi-footer a:hover {
	color: var(--jfi-accent);
}

.jfi-footer__cols {
	gap: 2.5rem 3rem;
	margin-block: 0 2.75rem;
}

.jfi-footer__cols .wp-block-column > * {
	margin-block: 0;
}

.jfi-footer__brand {
	margin-bottom: 0.9rem !important;
	color: var(--jfi-base);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.jfi-footer__title {
	margin-bottom: 0.9rem !important;
	color: var(--jfi-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.jfi-footer__links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.jfi-footer__links strong {
	color: var(--jfi-base);
}

.jfi-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
}

.jfi-contact__phone {
	color: var(--jfi-base) !important;
	font-size: 1.375rem;
	font-weight: 750;
	letter-spacing: -0.01em;
}

.jfi-contact .jfi-btn {
	margin-top: 0.5rem;
	border-color: rgba(255, 255, 255, 0.24);
	color: var(--jfi-base);
}

.jfi-contact .jfi-btn:hover {
	color: var(--jfi-navy);
}

.jfi-footer__bottom {
	gap: 0.75rem 1.5rem;
	margin-block: 0;
	padding-block: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.8125rem;
}

.jfi-footer__bottom > * {
	margin: 0;
}

.jfi-copyright {
	margin: 0;
}

.jfi-pay {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.jfi-pay li {
	padding: 0.3rem 0.75rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--jfi-base);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		transition: none !important;
	}
}