/* Limit the whole gallery width and center it */
.single-product .woocommerce-product-gallery {
    width: 100%;
    max-width: 600px;      /* desktop size */
    margin: 0 auto 1.5rem; /* center + some space below */
}

/* On mobile: smaller box */
@media (max-width: 768px) {
    .single-product .woocommerce-product-gallery {
        max-width: 300px;  /* ~300x300 on phones */
    }
}

/* Each slide keeps a square ratio to prevent CLS */
.single-product .woocommerce-product-gallery__image {
    aspect-ratio: 1 / 1;   /* square */
    overflow: hidden;
}

/* Image fits inside the square box */
.single-product .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* or 'cover' if you prefer cropping */
}
/* --- Prevent CLS on single product gallery (desktop + mobile) --- */

/* Make sure wrappers behave like blocks */
/*.single-product .woocommerce-product-gallery__image,*/
/*.single-product .woocommerce-product-gallery__image img {*/
/*    display: block;*/
/*}*/

/* Reserve vertical space via aspect ratio (approx 600x501 = 1.2) */
/*.single-product .woocommerce-product-gallery__image {*/
    aspect-ratio: 600 / 501;  /* tweak if you prefer more square */
/*    overflow: hidden;*/
/*}*/

/* Make the image fill the reserved box without changing layout */
/*.single-product .woocommerce-product-gallery__image img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: contain;*/
/*}*/

/* theme tweaks */
/*line-camp for getting 2 lines only */
.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.site-header {
	padding-inline : clamp(1rem, 0.848rem + 0.758w, 1.5rem);
}
/* text balance / pretty */

:is(h1, h2 h3,h4,h5,h6), .balance{
	text-wrap: balance;
}
p, blockquote, li {
	text-wrap: pretty;
	
}

p:last-child:last-of-type {
	margin-bottom: 0px;
}

/* Uitilities */

/*line limits*/
.line-limit-3, .line-limit2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-limit-3 {
	-webkit-line-clamp: 3;
}
.line-limit-2 {
	-webkit-line-clamp: 2;
}

/* visually hidden */
.visually-hidden:not(:focus):not(:active){
	clip: rect (0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	width: 1px;
	
}


/* transitions */
.transition{
	transition: all .25s ease-in-out;
}

 /* GP Menu Accessibility Tweak */
#site-navigation ul.sub-menu{
	display: block;
}
#site-navigation li:hover .gp-icon svg {
	transform: rotate(180deg);
}

#site-navigation li:hover .sub-menu {
	visibility: visible;
}