/* =========================
   RESPONSIVE TABLET STYLES
   Geladen via media: (min-width: 768px) and (max-width: 1199px)
   
   Dekt zowel tablet landscape als portrait, inclusief
   Samsung Galaxy Tab SM-T505N portrait (~800px CSS breedte)
   
   Device info Samsung Galaxy Tab A7 10.4 (SM-T505N):
   - Fysieke resolutie: 1200 x 2000 pixels
   - Device pixel ratio: ~1.5
   - CSS viewport portrait:  ~800 x 1333 px
   - CSS viewport landscape: ~1333 x 800 px (valt buiten tablet breakpoint → desktop)
   ========================= */

/* =========================
   BODY & GENERAL STYLES
   ========================= */
body {
	padding-top: 131px;
}

.popular.container-fluid .productSwiper .featured-header {
	flex-shrink: 0;
}

body.archive {
	padding-top: 141px;
}

body.single-product {
	padding-top: 150px;
}

/* =========================
   UTILITY CLASSES
   ========================= */
.fs-11 {
	font-size: 14px;
}

/* =========================
   HERO SECTION
   ========================= */
.hero {
	margin-top: 20px !important;
}

/* =========================
   CHECKIT SECTION
   ========================= */
.checkit {
	padding: 25px 0px;
}

/* =========================
   GREEN BULLET
   ========================= */
.green-bullit::before {
	right: -13px;
}

.green-bullit::after {
	right: -16px;
}

/* =========================
   FORM ELEMENTS
   ========================= */
.orderby {
	height: 45px;
}

/* =========================
   IMAGES
   ========================= */
img.cat-product-image {
	height: 140px !important;
}

/* =========================
   WOOCOMMERCE - CART
   ========================= */
.woocommerce table.shop_table_responsive thead, 
.woocommerce-page table.shop_table_responsive thead {
	display: none;
}

.woocommerce-cart-form .cart_item {
	width: 100%;
}

.cart-collaterals {
	border-radius: 20px;
}

/* ======================================================================
   ALLE TABLETS (768px - 1199px)
   Fixes die op zowel portrait als landscape moeten werken
   ====================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {

	/* ===========================================
	   FIX: CONTAINER MAX-WIDTH
	   Bootstrap default op md (768px+) = 720px.
	   Op een 800px viewport is dat te smal (slechts
	   40px marge per kant). 96% geeft ~768px op
	   800px viewport, veel beter benut.
	   =========================================== */
	.container {
		max-width: 96%;
	}

	/* ===========================================
	   HEADER FIXES
	   =========================================== */

	/* Standalone col-4 gtranslate verbergen op alle tablets
	   (op mobiel wordt deze getoond, op tablet gebruiken
	   we de versie in de action-buttons) */
	header .header .container > .row > .col-4.hide-lg {
		display: none !important;
	}

	/* FIX GTRANSLATE ZICHTBAARHEID:
	   In header.php staan 3 gtranslate instances:
	   - Regel 8:  col-4 hide-lg        → voor mobiel (verborgen hierboven)
	   - Regel 27: hide-xs hide-lg       → voor TABLET (heeft beide classes)
	   - Regel 64: hide-xs              → voor desktop (moet verborgen blijven)
	   
	   hide-xs wordt geladen via responsive-xs.css (max-width: 1199px)
	   en verbergt alles onder 1200px. We overriden hier ALLEEN de
	   tablet-specifieke versie (die met zowel hide-xs ALS hide-lg). */
	header .action-buttons > .hide-xs.hide-lg {
		display: inline-block !important;
	}

	/* Toon button-items die hide-xs hebben (bv. account knop)
	   maar die op tablet wél zichtbaar moeten zijn */
	header .action-buttons .button-item.hide-xs {
		display: flex !important;
	}

	/* Navigation bar font-size */
	.navigation {
		font-size: 14px;
	}

	/* Paginering compacter */
	.facetwp-pager {
		gap: 4px;
	}

	.facetwp-page {
		min-width: 36px;
		height: 36px;
		font-size: 13px;
	}

	/* WooCommerce quantity input */
	.woocommerce .quantity .qty {
		height: 45px;
	}

	/* Checkout form */
	#billing_postcode_field,
	#billing_city_field {
		display: inline-block;
		width: 48%;
	}

	/* ===========================================
	   FIX 2: SUBCATEGORIE BLOKKEN - Te veel ruimte
	   .image-link heeft padding-bottom:100% wat een
	   vierkant blok maakt, maar de afbeelding erin
	   is veel kleiner. Override de padding.
	   =========================================== */
	.product-slide .image-link {
		padding-bottom: 50% !important;
	}

	/* Subcategorie titels dichter bij afbeeldingen */
	.product-slide .block-image h3 {
		margin-top: 8px !important;
	}

	.subcategory {
		padding: 15px;
	}

	/* ===========================================
	   FIX 3: WEEKAANBIEDINGEN (popular sectie)
	   Titel links + swiper rechts past niet op tablets.
	   - Maak het full-width gestapeld (titel boven, swiper eronder)
	   - Beperk de hoogte van product afbeeldingen
	   =========================================== */
	.popular.container-fluid .row {
		flex-direction: column;
	}

	.popular.container-fluid .row > .col-sm-4 {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 15px;
	}

	.popular.container-fluid .row > .col-sm-8 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Titel compacter */
	.popular h3 {
		font-size: 20px;
		margin-bottom: 0;
	}

	.popular .ps-sm-5,
	.popular .pe-sm-5 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Product cards in de popular swiper */
	.popular .featured-item .featured-header > a {
		padding-bottom: 60%;
	}

	.popular .featured-header a > img {
		object-fit: contain;
		padding: 10px;
	}

	.popular-block {
		padding: 20px 15px;
		border-radius: 20px;
	}

	.popular .featured-item {
		display: flex;
		flex-direction: column;
	}

	.popular .featured-content {
		min-height: auto;
		padding: 10px;
	}

	.popular .featured-body {
		display: block !important;
	}

	.popular .featured-body h2 {
		font-size: 14px;
	}

	/* Spacing van het hele popular blok */
	.popular.mtb-150,
	.popular.mb-20 {
		margin-top: 40px;
		margin-bottom: 40px;
	}

	/* ===========================================
	   FIX 4: CATEGORIE PAGINA - Subcategory swiper
	   3.5 items zichtbaar op tablet
	   =========================================== */
	.subcagegorySwiper .swiper-slide {
		min-width: calc((100% - 3 * 15px) / 3.5);
		max-width: calc((100% - 3 * 15px) / 3.5);
	}

	/* Subcategorie: tekst niet over afbeelding */
	.product-slide .image-link {
		padding-bottom: 70% !important;
	}

	/* ===========================================
	   PRODUCTSWIPER: height auto unsetten zodat
	   featured-body zichtbaar wordt
	   =========================================== */
	.popular.container-fluid .productSwiper .swiper-slide {
		height: 100% !important;
	}

	/* ===========================================
	   FIX 5: HOMEPAGE SERVICE ITEMS (categorie blokken)
	   Eerste blok met gele balk is te hoog.
	   =========================================== */
	.service-item {
		height: 180px;
	}

	.service-item .block-content {
		top: 120px;
		min-height: 180px;
	}

	.service-item .block-content h3 {
		font-size: 14px;
	}

	/* Category block grid */
	.category-block .col-6 {
		padding-left: 8px;
		padding-right: 8px;
	}

	/* --- Featured items / product grid --- */
	.featured-content {
		padding: 12px;
	}

	.featured-body h2,
	.featured-item h3 {
		font-size: 14px;
	}

	.featured-item p:not(.title) {
		font-size: 11px;
	}

	.featured-delivery {
		font-size: 10px;
	}

	/* --- Swatches --- */
	.swatch li {
		width: 16px;
		height: 16px;
	}

	.swatch-afm li {
		padding: 2px 6px;
		font-size: 11px;
	}

	/* --- Checkit sectie --- */
	.checkit {
		padding: 20px 12px;
	}

	.checkitout .h1 {
		font-size: 20px;
	}

	/* --- WooCommerce sidebar --- */
	.col-xl-3.sidebar .hide-xs {
		display: none !important;
	}

	/* --- WooCommerce cart table --- */
	.woocommerce table.shop_table_responsive tr.cart_item,
	.woocommerce-page table.shop_table_responsive tr.cart_item {
		border: 1px solid rgba(243,244,244,1) !important;
		border-radius: 20px;
		margin-bottom: 15px;
		padding: 10px;
		display: inline-block;
		width: 100%;
	}

	/* --- Footer: accordion i.p.v. kolommen --- */
	.site-footer .row.hide-xs {
		display: none !important;
	}

	.site-footer .hide-lg {
		display: block !important;
	}

	/* --- Offcanvas breder op tablet --- */
	#offcanvasNavigation,
	#offcanvasFilter,
	.offcanvas.offcanvas-end,
	.offcanvas.offcanvas-start {
		max-width: 55%;
	}

	/* --- Modals --- */
	.modal-xxl .modal-content {
		margin-top: 50px;
	}

	/* --- Block content icons --- */
	.block-content .icon {
		height: 30px;
		width: 30px;
	}

	.block-content .icon i {
		font-size: 14px;
	}

	/* --- Custom container --- */
	.custom-container {
		padding: 30px 20px;
	}

	/* --- Product single page --- */
	.woocommerce div.product .product_title {
		font-size: 1.3rem;
	}

	/* --- USP bar --- */
	.usp-bar {
		font-size: 13px;
		margin-bottom: 20px !important;
	}

	/* --- Description container: geen float op tablet --- */
	.description-container {
		float: none;
		width: 100%;
	}

	/* --- Swiper navigatie --- */
	.swiper-button-prev {
		left: 5px !important;
	}

	.swiper-button-next {
		right: 5px !important;
	}

	/* --- Team afbeelding --- */
	img.team {
		margin-top: 20px;
	}

	/* --- Carousel USP --- */
	#carouselUsp .carousel-item {
		height: 33px;
	}

	/* --- Woocommerce onsale badge --- */
	.woocommerce span.onsale {
		z-index: unset;
	}
}

/* ======================================================================
   TABLET LANDSCAPE SPECIFIEK (811px - 1199px)
   ====================================================================== */
@media (min-width: 811px) and (max-width: 1199px) {
	body {
		padding-top: 121px;
	}

	#offcanvasRight {
		margin-top: 121px;
	}
}

/* ======================================================================
   TABLET PORTRAIT SPECIFIEK (768px - 810px)
   Geoptimaliseerd voor Samsung Galaxy Tab A7 10.4 (~800px CSS viewport)
   ====================================================================== */
@media (min-width: 768px) and (max-width: 810px) {

	/* --- Body padding --- */
	body {
		padding-top: 135px;
	}

	body.archive {
		padding-top: 135px;
	}

	body.single-product {
		padding-top: 140px;
	}

	/* ===========================================
	   CONTAINER PORTRAIT: finetuning padding
	   max-width: 96% staat al in de algemene
	   tablet sectie hierboven.
	   =========================================== */
	.container {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* ===========================================
	   HEADER PORTRAIT OPTIMALISATIE
	   =========================================== */
	header .logo {
		height: 50px;
	}

	.dgwt-wcas-search-wrapp {
		min-width: 220px;
	}

	.button-item {
		height: 42px;
		width: 42px;
	}

	.button-item i {
		font-size: 18px;
	}

	.button-item img:not(.flag) {
		width: 18px;
	}

	/* ===========================================
	   ACTION BUTTONS: compacter layout op portrait
	   zodat alles (incl. gtranslate) past
	   =========================================== */
	.action-buttons {
		gap: 4px;
	}

	.action-buttons .me-2 {
		margin-right: 0.25rem !important;
	}

	/* Portrait: kleinere afbeeldingen */
	img.cat-product-image {
		height: 110px !important;
	}

	/* --- Hero & spacing --- */
	.hero {
		margin: 0px 15px;
	}

	.mt-100 {
		margin-top: 50px;
	}

	.mb-100 {
		margin-bottom: 50px;
	}

	.m-50 {
		margin-bottom: 20px;
	}

	.mse-30 {
		margin-left: 15px;
		margin-right: 15px;
	}

	/* Product grid 3 kolommen behouden */
	.featured-items .col-sm-4 {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}

	#offcanvasRight {
		margin-top: 135px;
	}

	/* ===========================================
	   PRODUCT PAGINA: gallery en info stapelen
	   voor beter overzicht op 800px breedte
	   =========================================== */
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		float: none;
		width: 100%;
	}

	/* ===========================================
	   OFFCANVAS: op portrait iets breder
	   zodat menu items goed leesbaar zijn
	   =========================================== */
	#offcanvasNavigation,
	#offcanvasFilter,
	.offcanvas.offcanvas-end,
	.offcanvas.offcanvas-start {
		max-width: 65%;
	}
}