/* =====================================================
 * SHARMERAJ — WooCommerce styling
 * ===================================================== */

/* ---- Layout wrapper (clears fixed nav) ---- */
.sharmeraj-shop-main {
	padding: calc(var(--nav-h) + 48px) 0 90px;
}
.woocommerce .container,
.sharmeraj-shop-main .container { max-width: var(--max-w); }

/* ---- Page title ---- */
.woocommerce-products-header {
	text-align: center;
	margin-bottom: 48px;
}
.woocommerce-products-header__title,
.woocommerce h1.page-title {
	font-family: var(--font);
	font-weight: 400;
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	letter-spacing: 0.04em;
}

/* ---- Result count + ordering ---- */
.woocommerce .woocommerce-result-count {
	font-size: 0.78rem;
	color: var(--text-muted);
	letter-spacing: 0.05em;
}
.woocommerce .woocommerce-ordering select {
	font-family: var(--font);
	padding: 8px 12px;
	border: 1px solid var(--border);
	background: var(--white);
	font-size: 0.8rem;
}

/* ---- Product grid ---- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px 28px;
	margin: 0 0 48px;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	text-align: left;
}
.woocommerce ul.products li.product a img {
	margin: 0 0 16px;
	aspect-ratio: 3/4;
	object-fit: cover;
	background: var(--bg-warm);
	transition: transform 0.7s var(--ease);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font);
	font-size: 0.92rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	padding: 0 0 4px;
	color: var(--text);
}
.woocommerce ul.products li.product .price {
	font-family: var(--font);
	color: var(--text-mid);
	font-size: 0.85rem;
	font-weight: 400;
}
.woocommerce ul.products li.product .price del { color: var(--text-muted); opacity: 0.6; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--burgundy); }

/* loop buttons */
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	font-family: var(--font);
	background: var(--text);
	color: var(--bg);
	border-radius: 0;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 11px 22px;
	transition: background var(--t) var(--ease);
	margin-top: 12px;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--burgundy);
	color: var(--cream);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--burgundy);
	color: var(--cream);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--burgundy-dark); }

/* ---- Single product ---- */
.single-product div.product { display: block; }

/* Flex row: gallery (sticky) + summary. Reliable sticky (tall flex parent). */
.single-product div.product .sharmeraj-product-main {
	display: flex;
	align-items: flex-start;
	gap: 56px;
}
.single-product div.product .woocommerce-product-gallery {
	flex: 0 0 46%;
	max-width: 46%;
	width: 46% !important;
	float: none !important;
	margin: 0 !important;
	/* !important needed: WooCommerce sets position:relative on the gallery */
	position: sticky !important;
	top: calc(var(--nav-h) + 24px);
	align-self: flex-start;
	/* Cap height so the image is shorter than the options panel → stays pinned the whole scroll */
	height: calc(100vh - var(--nav-h) - 48px);
	max-height: 760px;
	overflow: hidden;
	background: var(--bg-warm);
}
.single-product div.product .woocommerce-product-gallery__wrapper,
.single-product div.product .woocommerce-product-gallery__image,
.single-product div.product .woocommerce-product-gallery__image a { height: 100%; }
.single-product div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
}
.single-product div.product .summary {
	flex: 1 1 auto;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0;
}
.single-product div.product .product_title {
	font-family: var(--font);
	font-weight: 400;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	line-height: 1.15;
	margin-bottom: 18px;
}
.single-product div.product p.price,
.single-product div.product span.price {
	font-family: var(--font);
	color: var(--burgundy);
	font-size: 1.4rem;
	font-weight: 400;
}
.single-product .woocommerce-product-details__short-description {
	font-size: 0.88rem;
	color: var(--text-mid);
	line-height: 1.8;
	margin: 18px 0;
}
.single-product div.product form.cart .quantity input {
	font-family: var(--font);
	border: 1px solid var(--border);
	padding: 12px;
	width: 70px;
}
.single-product .product_meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 20px; }

/* Single add-to-cart button uses brand btn (configurable uses .btn classes already) */
.single-product div.product form.cart .single_add_to_cart_button {
	font-family: var(--font);
	background: var(--burgundy);
	color: var(--cream);
	border-radius: 0;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 16px 32px;
}
.single-product div.product form.cart .single_add_to_cart_button:hover { background: var(--burgundy-dark); }

/* Related products heading */
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	font-family: var(--font);
	font-weight: 400;
	font-size: clamp(1.6rem, 2.5vw, 2.2rem);
	letter-spacing: 0.03em;
	text-align: center;
	margin: 80px 0 36px;
}

/* ---- Tabs (Opis / Recenzije) — minimal, brand-styled ---- */
.woocommerce div.product .woocommerce-tabs {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0 0 0 0;
	margin: 0 0 32px;
	text-align: left;
	border-bottom: 1px solid var(--border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0 32px 0 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--font);
	font-size: 0.78rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 14px 0;
	display: inline-block;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--t), border-color var(--t);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--text);
	border-bottom-color: var(--burgundy);
}
.woocommerce div.product .woocommerce-Tabs-panel {
	font-size: 0.92rem;
	color: var(--text-mid);
	line-height: 1.9;
	max-width: 720px;
}
.woocommerce div.product .woocommerce-Tabs-panel h2 { display: none; }

/* ---- Cart & checkout ---- */
.woocommerce table.shop_table {
	font-family: var(--font);
	border-radius: 0;
}
.woocommerce table.shop_table th { font-weight: 700; letter-spacing: 0.05em; }
.woocommerce-cart table.cart img { width: 70px; }
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3 {
	font-family: var(--font);
	font-weight: 400;
}
.woocommerce form .form-row label { font-size: 0.8rem; letter-spacing: 0.04em; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	font-family: var(--font);
	border: 1px solid var(--border);
	border-radius: 0;
	padding: 12px 14px;
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background: var(--burgundy);
	color: var(--cream);
	border-radius: 0;
	font-family: var(--font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--burgundy-dark); }

/* ---- Notices ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	font-family: var(--font);
	border-top-color: var(--gold);
	border-radius: 0;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--gold); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
	.sharmeraj-shop-main { padding: calc(var(--nav-h) + 28px) 0 64px; }

	/*
	 * Mobile: collapsing sticky header image.
	 * Image sits right under the nav, stays pinned, and shrinks on scroll (.is-shrunk).
	 * Everything else flows normally below it (page scroll), nothing overlaps.
	 */
	.single-product div.product .sharmeraj-product-main { display: block; }

	.single-product div.product .woocommerce-product-gallery {
		position: sticky !important;
		top: var(--nav-h);
		z-index: 10;
		flex: none;
		width: auto !important;
		max-width: none;
		height: 46vh;
		max-height: none;
		float: none !important;
		overflow: hidden;
		background: var(--bg);
		margin: 0 -16px;
		box-shadow: 0 1px 0 var(--border);
		transition: height 0.35s var(--ease);
	}
	.single-product div.product .woocommerce-product-gallery.is-shrunk { height: 15vh; }

	/* Image fills whatever height the gallery currently has */
	.single-product div.product .woocommerce-product-gallery__wrapper,
	.single-product div.product .woocommerce-product-gallery__image,
	.single-product div.product .woocommerce-product-gallery__image a { height: 100%; }
	.single-product div.product .woocommerce-product-gallery__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 35%;
	}
	/* Hide gallery thumbnails/zoom triggers on mobile for the clean header look */
	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs,
	.single-product div.product .woocommerce-product-gallery__trigger { display: none; }

	/* Content flows below the sticky image (scrolls under it; image is opaque on top) */
	.single-product div.product .summary {
		position: relative;
		z-index: 1;
		background: var(--bg);
		width: auto !important;
		padding-top: 18px;
	}
	.single-product div.product .product_title { font-size: 1.6rem; }

	.single-product div.product .woocommerce-tabs,
	.single-product div.product .related.products { clear: both; }
}
@media (max-width: 560px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: 1fr; }
}