/**
 * SOL - Single Product Masonry Gallery
 * Pinterest-style masonry layout for the WooCommerce single product page.
 * Color scheme: blue & yellow.
 */

:root {
	--sol-blue: #1a3a8f;
	--sol-blue-dark: #12275f;
	--sol-blue-light: #eaf0ff;
	--sol-yellow: #ffd23f;
	--sol-yellow-dark: #e6b800;
}

/* ---------------------------------------------------------------------------
 * Layout: gallery on the left, summary on the right (stacked on mobile).
 * ------------------------------------------------------------------------- */

.single-product div.product.sol-masonry-product {
	display: block;
	overflow: hidden;
}

.single-product div.product.sol-masonry-product .sol-masonry-gallery {
	width: 55%;
	float: left;
	margin-bottom: 2em;
}

.single-product div.product.sol-masonry-product .summary.entry-summary {
	width: 41%;
	float: right;
	margin-left: 4%;
}

@media (max-width: 768px) {
	.single-product div.product.sol-masonry-product .sol-masonry-gallery,
	.single-product div.product.sol-masonry-product .summary.entry-summary {
		width: 100%;
		float: none;
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Masonry grid (Pinterest style) - CSS columns, no JS required.
 * ------------------------------------------------------------------------- */

.sol-masonry-gallery {
	column-count: 3;
	column-gap: 14px;
	padding: 14px;
	background: var(--sol-blue-light);
	border: 3px solid var(--sol-blue);
	border-radius: 16px;
}

@media (max-width: 1024px) {
	.sol-masonry-gallery {
		column-count: 2;
	}
}

@media (max-width: 480px) {
	.sol-masonry-gallery {
		column-count: 1;
	}
}

.sol-masonry-item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 14px;
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	background: #fff;
	border: 2px solid var(--sol-blue);
	box-shadow: 0 4px 10px rgba(26, 58, 143, 0.18);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.sol-masonry-item:hover {
	transform: translateY(-3px);
	border-color: var(--sol-yellow);
	box-shadow: 0 10px 22px rgba(26, 58, 143, 0.3);
}

.sol-masonry-link {
	display: block;
	position: relative;
	line-height: 0;
}

.sol-masonry-img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.35s ease;
}

.sol-masonry-item:hover .sol-masonry-img {
	transform: scale(1.05);
}

/* Hover overlay - Pinterest style, yellow/blue tint */
.sol-masonry-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	background: linear-gradient(
		to top,
		rgba(18, 39, 95, 0.85) 0%,
		rgba(18, 39, 95, 0.25) 45%,
		rgba(255, 210, 63, 0) 100%
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	line-height: 1.4;
}

.sol-masonry-item:hover .sol-masonry-overlay {
	opacity: 1;
}

.sol-masonry-overlay-text {
	color: var(--sol-yellow);
	font-weight: 600;
	font-size: 0.85em;
	padding: 10px 14px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Summary / product info - blue & yellow theme.
 * ------------------------------------------------------------------------- */

.sol-masonry-product .summary.entry-summary {
	background: #fff;
	border: 3px solid var(--sol-blue);
	border-radius: 16px;
	padding: 1.5em;
	box-shadow: 0 4px 10px rgba(26, 58, 143, 0.12);
}

.sol-masonry-product .summary .product_title {
	color: var(--sol-blue);
	border-bottom: 4px solid var(--sol-yellow);
	display: inline-block;
	padding-bottom: 0.15em;
	margin-bottom: 0.5em;
}

.sol-masonry-product .summary .price,
.sol-masonry-product .summary .price .amount {
	color: var(--sol-blue-dark);
	font-weight: 700;
}

.sol-masonry-product .summary .price ins {
	background: var(--sol-yellow);
	border-radius: 4px;
	padding: 0 0.25em;
	text-decoration: none;
}

.sol-masonry-product .summary .cart .button,
.sol-masonry-product .summary .single_add_to_cart_button {
	background-color: var(--sol-blue) !important;
	color: var(--sol-yellow) !important;
	border: 2px solid var(--sol-blue) !important;
	border-radius: 8px;
	font-weight: 700;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.sol-masonry-product .summary .cart .button:hover,
.sol-masonry-product .summary .single_add_to_cart_button:hover {
	background-color: var(--sol-yellow) !important;
	color: var(--sol-blue-dark) !important;
	border-color: var(--sol-yellow-dark) !important;
}

.sol-masonry-product .summary .quantity .qty {
	border: 2px solid var(--sol-blue);
	border-radius: 8px;
}

.sol-masonry-product .summary .product_meta {
	border-top: 2px dashed var(--sol-yellow);
	padding-top: 1em;
	color: var(--sol-blue-dark);
}

.sol-masonry-product .summary .product_meta a {
	color: var(--sol-blue);
	text-decoration: underline;
	text-decoration-color: var(--sol-yellow);
	text-decoration-thickness: 2px;
}

/* Sale flash badge */
.sol-masonry-product .onsale {
	background-color: var(--sol-yellow);
	color: var(--sol-blue-dark);
	font-weight: 700;
	border: 2px solid var(--sol-blue);
}

/* ---------------------------------------------------------------------------
 * Tabs / related products area accents.
 * ------------------------------------------------------------------------- */

.sol-masonry-product .woocommerce-tabs {
	clear: both;
	padding-top: 1.5em;
}

.sol-masonry-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--sol-blue);
	border-bottom: 3px solid var(--sol-yellow);
}

.sol-masonry-product .related.products > h2,
.sol-masonry-product .upsells.products > h2 {
	color: var(--sol-blue);
	border-bottom: 4px solid var(--sol-yellow);
	display: inline-block;
	padding-bottom: 0.15em;
}