/* Smart Shop Flow – design layer for product page and product grids.
 * Targets WooCommerce's standard classes (kept by Razzi). Selectors are kept simple
 * (no :is/:where) so older mobile browsers still get the styles.
 */
:root {
	--ssf-r-lg: 20px;
	--ssf-r-md: 14px;
	--ssf-ease: cubic-bezier(.22, 1, .36, 1);
	--ssf-soft: #f6f7f9;
}

/* =================================================================
 * Product image: heart + share overlay, double-tap burst
 * ================================================================= */
.single-product .woocommerce-product-gallery { position: relative; }
.ssf-gal-actions {
	position: absolute; top: 14px; right: 14px; z-index: 9;
	display: flex; flex-direction: row; gap: 10px;
}
.ssf-gal-actions button.is-active { background: #fff !important; box-shadow: 0 0 0 2px var(--ssf-brand), 0 4px 16px rgba(17, 24, 39, .14); }

/* Share popover (Amazon-style list under the share button) */
.ssf-share {
	position: absolute; top: calc(100% + 12px); right: 30px; z-index: 12; width: 250px;
	padding: 8px; background: #fff; border-radius: 18px; border: 1px solid #e8eaee;
	box-shadow: 0 24px 50px -18px rgba(17, 24, 39, .4);
	animation: ssf-pop-in .25s var(--ssf-ease); transform-origin: top right;
}
.ssf-share[hidden] { display: none; }
.ssf-share::before {
	content: ""; position: absolute; top: -7px; right: 36px; width: 12px; height: 12px;
	background: #fff; border-left: 1px solid #e8eaee; border-top: 1px solid #e8eaee; transform: rotate(45deg);
}
.ssf-share .ssf-share__x {
	all: unset; cursor: pointer; position: absolute !important; top: 10px; right: 10px; z-index: 1;
	width: 32px !important; height: 32px !important; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; color: #374151;
	background: none !important; box-shadow: none !important;
}
.ssf-share .ssf-share__x:hover { background: #f3f4f6 !important; }
.ssf-share__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ssf-share .ssf-share__item {
	all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
	display: flex !important; align-items: center; gap: 14px; padding: 9px 10px; border-radius: 12px;
	font-size: 15px; font-weight: 500; color: #111827 !important; text-decoration: none !important;
	height: auto !important; background: none !important; box-shadow: none !important; transform: none !important;
	transition: background .15s;
}
.ssf-share .ssf-share__item:hover { background: #f5f6f8 !important; }
.ssf-share__item + .ssf-share__item { border-top: 1px solid #f1f2f4; border-radius: 0; }
.ssf-share__item:hover + .ssf-share__item, .ssf-share__item:hover { border-radius: 12px; }
.ssf-share__ico {
	flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: var(--brand); color: #fff;
}
.ssf-share__item[data-net="email"] .ssf-share__ico, .ssf-share__item[data-net="link"] .ssf-share__ico, .ssf-share__item[data-net="more"] .ssf-share__ico { background: #f1f3f6; color: #111827; }
.ssf-share__ico svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
	.ssf-share { right: 22px; width: min(250px, calc(100vw - 48px)); }
	.ssf-share::before { right: 34px; }
}
.ssf-gal-actions button {
	all: unset; box-sizing: border-box; cursor: pointer;
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important;
	border-radius: 50% !important; background: rgba(255, 255, 255, .88) !important; color: #1f2937;
	box-shadow: 0 4px 16px rgba(17, 24, 39, .14);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: transform .25s var(--ssf-ease), background .2s;
}
.ssf-gal-actions button:hover { transform: scale(1.08); background: #fff !important; }
.ssf-gal-actions button:active { transform: scale(.92); }
.ssf-gal-actions .ssf-heart { width: 22px; height: 22px; }
.ssf-gal-share svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* WooCommerce zoom trigger moves out of the way */
.ssf-gallery-heart.single-product .woocommerce-product-gallery__trigger { top: auto !important; bottom: 14px !important; right: 14px !important; }

.ssf-burst { position: absolute; z-index: 10; width: 0; height: 0; pointer-events: none; }
.ssf-burst svg {
	position: absolute; left: -48px; top: -48px; width: 96px; height: 96px;
	fill: #fff; stroke: none; filter: drop-shadow(0 6px 18px rgba(255, 63, 108, .55));
	animation: ssf-burst .9s var(--ssf-ease) forwards;
}
@keyframes ssf-burst {
	0% { transform: scale(0); opacity: 0; }
	15% { transform: scale(1.2); opacity: 1; }
	30% { transform: scale(.95); }
	45%, 70% { transform: scale(1); opacity: 1; }
	100% { transform: scale(1.4) translateY(-30px); opacity: 0; }
}

/* On phones the heart lives on the image, so the Wishlist button in the buy row goes away */
@media (max-width: 768px) {
	.ssf-gallery-heart.single-product form.cart .ssf-wl-btn--single { display: none !important; }
	.ssf-gal-actions { top: 12px; right: 12px; }
	.ssf-gal-actions button { width: 40px !important; height: 40px !important; }
}

/* =================================================================
 * Single product page
 * ================================================================= */
.ssf-skin-single.single-product .woocommerce-product-gallery {
	border-radius: var(--ssf-r-lg); overflow: hidden; background: var(--ssf-soft);
}
.ssf-skin-single.single-product .woocommerce-product-gallery .flex-viewport,
.ssf-skin-single.single-product .woocommerce-product-gallery__wrapper { border-radius: var(--ssf-r-lg); }
.ssf-skin-single.single-product .woocommerce-product-gallery img { border-radius: 0; }
.ssf-skin-single.single-product .flex-control-thumbs { display: flex; gap: 10px; padding: 12px !important; margin: 0 !important; overflow-x: auto; scrollbar-width: none; }
.ssf-skin-single.single-product .flex-control-thumbs li { flex: 0 0 72px; width: 72px !important; margin: 0 !important; float: none !important; }
.ssf-skin-single.single-product .flex-control-thumbs img {
	border-radius: 12px !important; opacity: .55; outline: 2px solid transparent; outline-offset: 2px;
	transition: opacity .2s, outline-color .2s, transform .2s;
}
.ssf-skin-single.single-product .flex-control-thumbs img:hover { opacity: .9; transform: translateY(-2px); }
.ssf-skin-single.single-product .flex-control-thumbs img.flex-active { opacity: 1; outline-color: var(--ssf-brand); }

@media (min-width: 992px) {
	/* Gallery stays in view while the details scroll */
	.ssf-skin-single.single-product div.product .woocommerce-product-gallery { position: sticky; top: calc(96px + var(--wp-admin--admin-bar--height, 0px)); align-self: flex-start; }
}

.ssf-skin-single.single-product .product_title {
	font-size: clamp(22px, 1.4vw + 14px, 34px) !important; line-height: 1.25 !important;
	font-weight: 700 !important; letter-spacing: -.01em; margin-bottom: 10px !important;
}
/* Price block:  ₹209  ₹299  30% off
 *              You save ₹90 · Inclusive of all taxes
 *              ● Only 3 left in stock                                   */
.ssf-skin-single.single-product .summary .price.ssf-price-row,
.ssf-skin-single.single-product .summary > .price {
	display: flex !important; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
	width: 100%; font-size: clamp(26px, 1vw + 20px, 34px) !important; line-height: 1.15 !important; margin: 8px 0 6px !important;
}
.ssf-skin-single.single-product .summary .price ins { order: -1; background: none !important; text-decoration: none !important; font-weight: 700; color: var(--ssf-brand); padding: 0 !important; }
.ssf-skin-single.single-product .summary .price del { order: 0; font-size: .5em; color: #9ca3af !important; opacity: 1; font-weight: 400; }
.ssf-skin-single.single-product .summary .price del .amount { color: #9ca3af !important; }
.ssf-off-badge {
	order: 1; display: inline-block; align-self: center; padding: 4px 10px; border-radius: 8px;
	background: #e11d48; color: #fff; font-size: 13px !important; font-weight: 700; line-height: 1.3; letter-spacing: .2px;
}
.ssf-off-badge[hidden] { display: none !important; }

.ssf-savings { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 18px; width: 100%; }
.ssf-savings > .ssf-off-badge { display: none; } /* only shown once moved into the price row */
.ssf-savings__pill[hidden] { display: none !important; }
.ssf-savings__pill {
	display: inline-block; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
	background: #e7f7ef; color: #047857; font-size: 14px; font-weight: 700; line-height: 1.3;
}
.ssf-savings__pill .amount, .ssf-savings__pill bdi { color: inherit !important; font-weight: inherit; }
.ssf-savings__tax { font-size: 13px; color: #6b7280; }

/* Stock note → pill with a status dot */
.ssf-skin-single.single-product .summary .stock.ssf-stock {
	display: inline-flex !important; align-items: center; gap: 7px; width: auto !important; flex-basis: auto !important;
	margin: 0 !important; padding: 6px 12px 6px 10px !important; border-radius: 999px;
	font-size: 13.5px !important; font-weight: 600; line-height: 1.3; float: none !important;
	background: #e7f7ef; color: #047857 !important;
}
.ssf-skin-single.single-product .summary .stock.ssf-stock::before {
	content: "" !important; display: inline-block !important; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
	position: static !important; margin: 0 !important; font-size: 0 !important;
}
.ssf-skin-single.single-product .summary .stock.ssf-stock--low { background: #fff4e5; color: #b45309 !important; }
.ssf-skin-single.single-product .summary .stock.ssf-stock--low::before { animation: ssf-pulse 1.4s ease-in-out infinite; }
.ssf-skin-single.single-product .summary .stock.out-of-stock.ssf-stock { background: #fef2f2; color: #b91c1c !important; }
@keyframes ssf-pulse { 50% { opacity: .35; } }
.ssf-savings .stock.ssf-stock { flex-basis: 100%; }

.ssf-pop-in { animation: ssf-pop-in .35s var(--ssf-ease); }
@keyframes ssf-pop-in { from { opacity: 0; transform: translateY(4px) scale(.97); } }

.ssf-skin-single.single-product .woocommerce-product-details__short-description {
	color: #4b5563; line-height: 1.75; font-size: 15.5px;
}

.ssf-trust {
	list-style: none !important; margin: 22px 0 !important; padding: 0 !important;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
}
.ssf-trust li {
	display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 12px 14px;
	border-radius: var(--ssf-r-md); background: var(--ssf-soft); font-size: 13.5px; font-weight: 600; color: #1f2937;
	transition: transform .25s var(--ssf-ease), background .2s;
}
.ssf-trust li:hover { transform: translateY(-2px); background: #eef1f6; }
.ssf-trust__ico {
	flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
	background: #fff; color: var(--ssf-brand); box-shadow: 0 2px 8px rgba(17, 24, 39, .06);
}
.ssf-trust__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Tabs → segmented pills, panel as a soft card */
.ssf-skin-single.single-product .woocommerce-tabs ul.tabs {
	display: flex !important; flex-wrap: wrap; gap: 6px; justify-content: flex-start;
	padding: 6px !important; margin: 0 0 18px !important; border: 0 !important;
	background: var(--ssf-soft); border-radius: 999px; width: max-content; max-width: 100%;
}
.ssf-skin-single.single-product .woocommerce-tabs ul.tabs::before,
.ssf-skin-single.single-product .woocommerce-tabs ul.tabs::after { display: none !important; }
.ssf-skin-single.single-product .woocommerce-tabs ul.tabs li {
	margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; border-radius: 999px !important;
}
.ssf-skin-single.single-product .woocommerce-tabs ul.tabs li::before,
.ssf-skin-single.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.ssf-skin-single.single-product .woocommerce-tabs ul.tabs li a {
	display: block; padding: 10px 18px !important; border-radius: 999px; font-weight: 600; font-size: 14.5px;
	color: #4b5563 !important; text-decoration: none !important; transition: background .25s var(--ssf-ease), color .2s, box-shadow .25s;
}
.ssf-skin-single.single-product .woocommerce-tabs ul.tabs li a::after,
.ssf-skin-single.single-product .woocommerce-tabs ul.tabs li a::before { display: none !important; }
.ssf-skin-single.single-product .woocommerce-tabs ul.tabs li.active a {
	background: #fff; color: #111827 !important; box-shadow: 0 2px 10px rgba(17, 24, 39, .08);
}
.ssf-skin-single.single-product .woocommerce-tabs .panel {
	padding: clamp(16px, 2vw, 28px) !important; border-radius: var(--ssf-r-lg); background: #fff; border: 1px solid #eef0f3;
	line-height: 1.8; animation: ssf-pop-in .35s var(--ssf-ease);
}
@media (max-width: 600px) {
	.ssf-skin-single.single-product .woocommerce-tabs ul.tabs { width: 100%; border-radius: 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.ssf-skin-single.single-product .woocommerce-tabs ul.tabs li { flex: 0 0 auto; }
}

.ssf-skin-single.single-product .product_meta { font-size: 13.5px; color: #6b7280; }
.ssf-skin-single.single-product .product_meta > span { display: block; margin: 4px 0; }

.ssf-skin-single.single-product .related > h2,
.ssf-skin-single.single-product .upsells > h2 {
	font-size: clamp(20px, 1vw + 14px, 26px) !important; font-weight: 700; letter-spacing: -.01em; margin-bottom: 18px !important;
}

/* =================================================================
 * Product grids (shop, categories, related, home carousels)
 * Razzi keeps control of the card layout, hover panel, badges and buttons'
 * position — this layer only refines looks, so nothing gets clipped or moved.
 * ================================================================= */

/* Image: rounded, soft background, gentle zoom */
.ssf-skin-shop ul.products li.product .product-thumbnail {
	border-radius: var(--ssf-r-md); overflow: hidden; background: var(--ssf-soft);
	-webkit-mask-image: -webkit-radial-gradient(white, black); /* keeps rounding during zoom in Safari */
}
.ssf-skin-shop ul.products li.product .product-thumbnail img {
	transition: transform .7s var(--ssf-ease), opacity .3s;
}
.ssf-skin-shop ul.products li.product:hover .product-thumbnail img { transform: scale(1.05); }

/* Title: max 2 lines so cards line up */
.ssf-skin-shop ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	line-height: 1.45 !important; min-height: 2.9em;
}

/* Price: sale price first, MRP struck after it */
.ssf-skin-shop ul.products li.product .price ins { background: none !important; text-decoration: none !important; }
.ssf-skin-shop ul.products li.product .price del { color: #9ca3af !important; opacity: 1; }
.ssf-skin-shop ul.products li.product .price del .amount { color: #9ca3af !important; }

/* Add to cart on cards: colour and shape only (size/position stay Razzi's) */
.ssf-skin-shop ul.products li.product a.add_to_cart_button,
.ssf-skin-shop ul.products li.product a.product_type_simple.button,
.ssf-skin-shop ul.products li.product a.product_type_variable.button {
	--c: var(--ssf-brand);
	border-radius: 12px !important; text-transform: none !important;
	background-color: var(--c) !important;
	background-image: linear-gradient(135deg, color-mix(in srgb, var(--c) 86%, #fff), color-mix(in srgb, var(--c) 82%, #000)) !important;
	border-color: transparent !important; color: #fff !important;
	transition: background-color .3s, filter .2s, transform .2s var(--ssf-ease);
}
.ssf-skin-shop ul.products li.product a.button:hover { filter: brightness(1.08); }
.ssf-skin-shop ul.products li.product a.button.ssf-in-cart { --c: var(--ssf-go); }
.ssf-skin-shop ul.products li.product a.added_to_cart { display: none !important; }

/* Heart on cards: glassy */
.ssf-skin-shop ul.products li.product .ssf-wl-btn--loop {
	background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: transform .25s var(--ssf-ease);
}

/* Scroll reveal (only applied by JS to cards below the fold, never inside carousels) */
.ssf-reveal { opacity: 0; transform: translateY(22px); }
.ssf-reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ssf-ease), transform .6s var(--ssf-ease); }

@media (prefers-reduced-motion: reduce) {
	.ssf-skin-shop ul.products li.product img, .ssf-trust li { transition: none !important; transform: none !important; }
	.ssf-reveal { opacity: 1; transform: none; }
}