/**
 * Theme Name: Grogin Child
 * Description: This is a child theme of Grogin, generated by Merlin WP.
 * Author: KlbTheme (Sinan ISIK)
 * Template: grogin
 * Version: 1.2.8
 */

/* =====================================================================
   NATURAL DOCUMENT SCROLLING (DESKTOP, TABLET & MOBILE)
   ===================================================================== */

html {
	overflow-y: auto;
	-webkit-text-size-adjust: 100%;
	touch-action: pan-y;
	overscroll-behavior-y: auto !important;
	overscroll-behavior: auto !important;
}

body {
	min-height: 100%;
	margin: 0;
	position: relative;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	overscroll-behavior-y: auto !important;
	overscroll-behavior: auto !important;
}

#page {
	min-height: 100vh;
	height: auto !important;
	overflow-x: clip;
	touch-action: pan-y;
}

#main {
	flex: 1 0 auto;
	height: auto !important;
	min-height: auto;
	touch-action: pan-y;
}

/* Ensure body scroll lock applies ONLY when a modal/drawer is explicitly open */
body.modal-open,
body.cpl-drawer-open-body,
body.filtered-sidebar-active,
body.site-menu-drawer-active,
body.site-categories-drawer-active,
body.site-search-drawer-active {
	overflow: hidden !important;
}

/* Prevent preloader, drawers, or overlays from blocking mobile touch interaction when inactive */
.site-loading {
	display: none !important;
	pointer-events: none !important;
}

.site-drawer {
	pointer-events: none !important;
}

.site-menu-drawer-active .site-drawer,
.site-categories-drawer-active .site-drawer,
.site-search-drawer-active .site-drawer,
.site-drawer.site-drawer-open {
	pointer-events: auto !important;
}

.mobile-overlay:not(.active),
.site-modal-overlay:not(.active),
.site-drawer-overlay:not(.active),
.cpl-drawer-backdrop:not(.cpl-backdrop-active) {
	pointer-events: none !important;
}

/* Safe spacing for mobile bottom navigation */
@media (max-width: 767px) {
	.main-content,
	.site-content,
	.klb-page,
	.page-wrapper,
	.crackers-product-list-page {
		padding-bottom: 90px !important;
	}
}

/* =====================================================================
   WOOCOMMERCE SINGLE PRODUCT GALLERY — BALANCED IMAGE DISPLAY
   Strictly scoped to single product gallery to eliminate excessive height
   ===================================================================== */
.single-product .single-product-wrapper .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery {
	position: relative;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
	text-align: center;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	width: 100%;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img {
	max-height: 520px;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	object-fit: contain;
	margin-left: auto !important;
	margin-right: auto !important;
	display: block !important;
}

@media (max-width: 991px) {
	.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
	.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img {
		max-height: 450px;
	}
}

@media (max-width: 575px) {
	.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
	.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img {
		max-height: 360px;
	}
}

/* =====================================================================
   PHOTOSWIPE LIGHTBOX — VIEWPORT & STACKING CONTEXT ELEVATION
   Prevents site header (z-index: 3) or cookie banners from covering
   PhotoSwipe fullscreen dialog and blocking the close button.
   ===================================================================== */
.single-product #main.main-content {
	z-index: auto !important;
}

.pswp {
	position: fixed !important;
	z-index: 99999999 !important;
}

.pswp__ui {
	z-index: 100000000 !important;
}

.pswp__top-bar {
	z-index: 100000001 !important;
}

.pswp__button--close {
	z-index: 100000002 !important;
}

/* =====================================================================
   WOOCOMMERCE SINGLE PRODUCT — RELATED PRODUCTS RESPONSIVE GRID & IMAGES
   Provides deterministic 4-col (desktop), 3-col (tablet), 2-col (mobile)
   grid sizing, prevents orphan card row expansion, and provides uniform
   contained image viewing areas for all packaging aspect ratios.
   Strictly scoped to Single Product Related Products section only.
   ===================================================================== */

/* 1. Flex Container */
.single-product section.related .products,
.single-product #related-products .products {
	display: flex !important;
	flex-wrap: wrap !important;
}

/* 2. Deterministic Column Sizing: Base / Mobile (< 576px) = 2 columns (50%) */
.single-product section.related .products > .product,
.single-product #related-products .products > .product {
	display: flex !important;
	flex-direction: column !important;
	flex: 0 0 50% !important;
	max-width: 50% !important;
	width: 50% !important;
	box-sizing: border-box !important;
}

/* 3. Deterministic Column Sizing: Tablet (576px - 991px) = 3 columns (33.333333%) */
@media (min-width: 576px) and (max-width: 991px) {
	.single-product section.related .products > .product,
	.single-product #related-products .products > .product {
		flex: 0 0 33.333333% !important;
		max-width: 33.333333% !important;
		width: 33.333333% !important;
	}
}

/* 4. Deterministic Column Sizing: Desktop (>= 992px) = 4 columns (25%) */
@media (min-width: 992px) {
	.single-product section.related .products > .product,
	.single-product #related-products .products > .product {
		flex: 0 0 25% !important;
		max-width: 25% !important;
		width: 25% !important;
	}
}

/* 5. Card Internal Vertical Flex Stretching (Equal Card Heights) */
.single-product section.related .products .product .product-wrapper,
.single-product #related-products .products .product .product-wrapper {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	width: 100% !important;
}

.single-product section.related .products .product .product-inner,
.single-product #related-products .products .product .product-inner {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	height: 100% !important;
}

.single-product section.related .products .product .thumbnail-wrapper,
.single-product #related-products .products .product .thumbnail-wrapper {
	position: relative !important;
}

/* 6. Responsive Image Viewing Area */
.single-product section.related .products .product .product-thumbnail.entry-media,
.single-product #related-products .products .product .product-thumbnail.entry-media {
	width: 100% !important;
	height: 260px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	overflow: hidden !important;
}

@media (max-width: 991px) {
	.single-product section.related .products .product .product-thumbnail.entry-media,
	.single-product #related-products .products .product .product-thumbnail.entry-media {
		height: 220px !important;
	}
}

@media (max-width: 575px) {
	.single-product section.related .products .product .product-thumbnail.entry-media,
	.single-product #related-products .products .product .product-thumbnail.entry-media {
		height: 160px !important;
	}
}

/* 7. Image Container Hierarchy & Intermediate Wrappers */
.single-product section.related .products .product .product-thumbnail.entry-media .images,
.single-product #related-products .products .product .product-thumbnail.entry-media .images,
.single-product section.related .products .product .product-thumbnail.entry-media .woocommerce-product-gallery__image,
.single-product #related-products .products .product .product-thumbnail.entry-media .woocommerce-product-gallery__image,
.single-product section.related .products .product .product-thumbnail.entry-media .product-box-image-zoom,
.single-product #related-products .products .product .product-thumbnail.entry-media .product-box-image-zoom,
.single-product section.related .products .product .product-thumbnail.entry-media a,
.single-product #related-products .products .product .product-thumbnail.entry-media a {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	overflow: hidden !important;
}

/* Hide empty anchors if present to prevent flex sibling squashing */
.single-product section.related .products .product .product-thumbnail.entry-media a:empty,
.single-product #related-products .products .product .product-thumbnail.entry-media a:empty {
	display: none !important;
}

/* 8. Contained Image Rendering (Aspect Ratio Preserved, Centered, No Cropping/Distortion) */
.single-product section.related .products .product .product-thumbnail.entry-media img.wp-post-image,
.single-product #related-products .products .product .product-thumbnail.entry-media img.wp-post-image {
	max-height: 100% !important;
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	display: block !important;
	margin: auto !important;
}