/* Smart Shop Flow */
:root {
	--ssf-add: #ff9f00;
	--ssf-buy: #fb641b;
	--ssf-heart: #ff3f6c;
	--ssf-ink: #212121;
	--ssf-muted: #6b7280;
	--ssf-line: #e5e7eb;
	--ssf-bg: #fff;
	--ssf-radius: 10px;
	--ssf-shadow: 0 10px 40px rgba(0, 0, 0, .18);
}

/* ---------- Buttons ---------- */
.ssf-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 22px; border: 0; border-radius: 6px;
	font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none !important;
	cursor: pointer; color: #fff !important; transition: filter .15s, transform .1s;
}
.ssf-btn:hover { filter: brightness(.95); }
.ssf-btn:active { transform: scale(.98); }
.ssf-btn--add { background: var(--ssf-add); }
.ssf-btn--buy { background: var(--ssf-buy); }
.ssf-btn--ghost { background: transparent; color: var(--ssf-ink) !important; border: 1px solid var(--ssf-line); }
.ssf-btn.is-soft-disabled { opacity: .55; }

.ssf-btn.loading, .ssf-buy-now.loading, .single_add_to_cart_button.loading { position: relative; color: transparent !important; pointer-events: none; }
.ssf-btn.loading::after, .ssf-buy-now.loading::after, .single_add_to_cart_button.loading::after {
	content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
	border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%;
	animation: ssf-spin .6s linear infinite;
}
@keyframes ssf-spin { to { transform: rotate(360deg); } }

/* Flipkart-style product page buttons
 * Laid out on the element that directly holds the Add to Cart button (Razzi wraps it in its own div).
 * JS marks it .ssf-actions and the quantity box .ssf-qty; the :has() copies only avoid a flash before JS runs.
 * Rules are kept separate on purpose: one unsupported selector in a list would drop the whole rule.
 *
 *   [ - 1 + ]                         [ ♡ Wishlist ]
 *   [    ADD TO CART    ][     BUY NOW      ]
 */
body.ssf-styled.single-product form.cart .ssf-actions {display:flex !important; flex-wrap:wrap !important; flex-direction:row !important; align-items:center !important; width:100% !important; max-width:100% !important;}
body.ssf-styled.single-product form.cart :has(> .single_add_to_cart_button) {display:flex !important; flex-wrap:wrap !important; flex-direction:row !important; align-items:center !important; width:100% !important; max-width:100% !important;}
body.ssf-styled.single-product form.cart.ssf-actions {display:flex !important; flex-wrap:wrap !important; flex-direction:row !important; align-items:center !important; width:100% !important; max-width:100% !important;}
body.ssf-styled.single-product form.cart:has(> .single_add_to_cart_button) {display:flex !important; flex-wrap:wrap !important; flex-direction:row !important; align-items:center !important; width:100% !important; max-width:100% !important;}
body.ssf-styled.single-product form.cart .ssf-actions::after {content:"" !important; display:block !important; order:3 !important; flex:0 0 100% !important; width:100% !important; height:0 !important; margin:0 !important; clear:none !important;}
body.ssf-styled.single-product form.cart .ssf-actions::before {display:none !important;}
body.ssf-styled.single-product form.cart.ssf-actions::after {content:"" !important; display:block !important; order:3 !important; flex:0 0 100% !important; width:100% !important; height:0 !important; margin:0 !important; clear:none !important;}
body.ssf-styled.single-product form.cart.ssf-actions::before {display:none !important;}
body.ssf-styled.single-product form.cart :has(> .single_add_to_cart_button)::after {content:"" !important; display:block !important; order:3 !important; flex:0 0 100% !important; width:100% !important; height:0 !important; margin:0 !important; clear:none !important;}
body.ssf-styled.single-product form.cart :has(> .single_add_to_cart_button)::before {display:none !important;}
body.ssf-styled.single-product form.cart:has(> .single_add_to_cart_button)::after {content:"" !important; display:block !important; order:3 !important; flex:0 0 100% !important; width:100% !important; height:0 !important; margin:0 !important; clear:none !important;}
body.ssf-styled.single-product form.cart:has(> .single_add_to_cart_button)::before {display:none !important;}
.ssf-actions > * { order: 9; flex: 0 0 100%; margin: 12px 0 0; }
form.cart :has(> .single_add_to_cart_button) > * { order: 9; flex: 0 0 100%; margin: 12px 0 0; }
body.ssf-styled.single-product form.cart .ssf-qty {order:1 !important; flex:0 0 auto !important; width:auto !important; margin:0 !important; float:none !important;}
body.ssf-styled.single-product form.cart :has(> .single_add_to_cart_button) > .quantity {order:1 !important; flex:0 0 auto !important; width:auto !important; margin:0 !important; float:none !important;}
body.ssf-styled.single-product form.cart .ssf-wl-btn--single {
	order: 2 !important; flex: 0 0 auto !important; margin: 0 0 0 auto !important;
	height: 46px; min-height: 46px; padding: 0 16px;
}
body.ssf-styled.single-product form.cart .single_add_to_cart_button,
body.ssf-styled.single-product form.cart .ssf-buy-now {
	-webkit-box-flex: 1; flex: 1 1 40% !important; width: auto !important; max-width: none !important; min-width: 0 !important;
	margin: 16px 0 0 !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	box-sizing: border-box !important; height: 54px !important; min-height: 54px !important; padding: 0 12px !important;
	border: 0 !important; border-radius: 8px !important; box-shadow: none !important; float: none !important;
	color: #fff !important; font-size: 15px !important; font-weight: 700 !important;
	line-height: 1 !important; letter-spacing: .4px !important; text-transform: uppercase !important; white-space: nowrap;
	position: relative; top: auto !important; left: auto !important;
}
body.ssf-styled.single-product form.cart .single_add_to_cart_button { order: 4 !important; margin-right: 12px !important; background: var(--ssf-add) !important; }
body.ssf-styled.single-product form.cart .ssf-buy-now { order: 5 !important; background: var(--ssf-buy) !important; }
body.ssf-styled.single-product form.cart .single_add_to_cart_button *,
body.ssf-styled.single-product form.cart .ssf-buy-now * { text-transform: inherit !important; color: inherit !important; }
body.ssf-styled.single-product form.cart .single_add_to_cart_button svg,
body.ssf-styled.single-product form.cart .ssf-buy-now svg { width: 20px; height: 20px; flex: 0 0 auto; margin: 0 8px 0 0 !important; fill: currentColor; }
/* No Buy Now on this product → Add to Cart takes the whole row */
body.ssf-styled.single-product form.cart .ssf-no-buy .single_add_to_cart_button { flex-basis: 100% !important; margin-right: 0 !important; }

@media (max-width: 420px) {
	body.ssf-styled.single-product form.cart .single_add_to_cart_button,
	body.ssf-styled.single-product form.cart .ssf-buy-now { font-size: 13px !important; letter-spacing: 0 !important; }
	body.ssf-styled.single-product form.cart .single_add_to_cart_button svg { display: none; }
}

/* While WCBoost is still active (before import), hide its buttons so only our heart shows */
.ssf-wcb-hide .wcboost-wishlist-button,
.ssf-wcb-hide [class*="wcboost-wishlist-button"],
.ssf-wcb-hide [class*="wcboost-wishlist__button"] { display: none !important; }

/* Hide the theme's own Buy Now – ours replaces it (also done in JS for unknown class names) */
.ssf-has-buy-now form.cart [class*="buy-now"]:not(.ssf-buy-now),
.ssf-has-buy-now form.cart [class*="buy_now"]:not(.ssf-buy-now),
.ssf-has-buy-now form.cart [name*="buy_now"]:not([name="ssf_buy_now"]),
.ssf-hidden-dup { display: none !important; }


.ssf-buy-now.disabled, .single_add_to_cart_button.disabled { opacity: .55; cursor: not-allowed; }
body:not(.ssf-styled) .ssf-buy-now { margin-left: 8px; }

form.cart.ssf-flash { animation: ssf-flash 1.4s ease; border-radius: 8px; }
@keyframes ssf-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px rgba(251, 100, 27, .35); } }

/* ---------- Hearts ---------- */
.ssf-wl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	background: none; border: 0; padding: 0; cursor: pointer; color: var(--ssf-ink);
	-webkit-tap-highlight-color: transparent;
}
.ssf-heart { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: fill .2s, stroke .2s; }
.ssf-wl-btn.is-active .ssf-heart { fill: var(--ssf-heart); stroke: var(--ssf-heart); }
.ssf-wl-btn.pop .ssf-heart { animation: ssf-pop .35s ease; }
@keyframes ssf-pop { 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

li.product, .product-inner { position: relative; }
.ssf-wl-btn--loop {
	position: absolute; top: 10px; right: 10px; z-index: 5;
	width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.ssf-wl-btn--loop:hover { transform: scale(1.06); }

.ssf-wl-btn--single {
	flex: 0 0 auto; min-height: 52px; padding: 0 16px; border: 1px solid var(--ssf-line) !important;
	border-radius: 6px; font-weight: 600; font-size: 14px; background: var(--ssf-bg);
}
body:not(.ssf-styled) .ssf-wl-btn--single { margin-left: 8px; }

/* Header counter */
.ssf-wl-link { position: relative; display: inline-flex; align-items: center; color: inherit; }
.ssf-wl-link .ssf-heart { width: 22px; height: 22px; }
.ssf-wl-count {
	position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 9px; background: var(--ssf-heart); color: #fff; font-size: 11px; font-weight: 700;
	line-height: 18px; text-align: center;
}
.ssf-wl-count[data-count="0"] { display: none; }

/* ---------- Toast ---------- */
.ssf-toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 100000; transform: translate(-50%, 20px);
	display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px);
	padding: 12px 18px; border-radius: 8px; background: #1f2937; color: #fff; font-size: 14px;
	box-shadow: var(--ssf-shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.ssf-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ssf-toast__act { background: none; border: 0; padding: 0; color: #fdba74 !important; font-weight: 700; cursor: pointer; text-decoration: none; text-transform: uppercase; font-size: 13px; }
.ssf-has-sticky .ssf-toast { bottom: 96px; }

/* ---------- Cart drawer ---------- */
html.ssf-lock { overflow: hidden; }
.ssf-drawer { position: fixed; inset: 0; z-index: 99999; visibility: hidden; }
.ssf-drawer.is-open { visibility: visible; }
.ssf-drawer__bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .25s; }
.ssf-drawer.is-open .ssf-drawer__bg { opacity: 1; }
.ssf-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100vw);
	background: var(--ssf-bg); box-shadow: var(--ssf-shadow); outline: none;
	transform: translateX(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
	overflow-y: auto;
}
.ssf-drawer.is-open .ssf-drawer__panel { transform: none; }
.ssf-drawer__x { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ssf-muted); }
.ssf-drawer__body { display: flex; flex-direction: column; gap: 14px; padding: 28px 22px; }
.ssf-drawer__ok { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: #15803d; }
.ssf-drawer__ok svg { width: 24px; height: 24px; fill: currentColor; }
.ssf-drawer__item { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-block: 1px solid var(--ssf-line); }
.ssf-drawer__item img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.ssf-drawer__name { font-weight: 600; color: var(--ssf-ink); }
.ssf-drawer__qty { color: var(--ssf-muted); font-size: 14px; margin-top: 4px; }
.ssf-drawer__sub { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.ssf-drawer__body .ssf-btn { width: 100%; }

/* Bottom sheet on phones */
@media (max-width: 600px) {
	.ssf-drawer__panel { top: auto; left: 0; width: 100%; max-height: 85vh; border-radius: 16px 16px 0 0; transform: translateY(100%); }
}

/* ---------- Sticky buy bar ---------- */
.ssf-sticky {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 10px max(16px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
	background: var(--ssf-bg); border-top: 1px solid var(--ssf-line); box-shadow: 0 -4px 20px rgba(0, 0, 0, .08);
	transform: translateY(110%); transition: transform .25s ease;
}
.ssf-sticky.is-on { transform: none; }
.ssf-sticky[hidden] { display: none; }
.ssf-sticky__info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ssf-sticky__info img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.ssf-sticky__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.ssf-sticky__price { font-size: 14px; color: var(--ssf-muted); }
.ssf-sticky__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.ssf-sticky__actions .ssf-btn { min-width: 160px; text-transform: uppercase; }

@media (max-width: 768px) {
	.ssf-sticky { padding: 0; gap: 0; }
	.ssf-sticky__info { display: none; }
	.ssf-sticky__actions { flex: 1; gap: 0; }
	.ssf-sticky__actions .ssf-btn { flex: 1; min-width: 0; min-height: 56px; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
	body.ssf-has-sticky { padding-bottom: 56px; }
}

/* ---------- Wishlist page ---------- */
.ssf-wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.ssf-wl-skel { aspect-ratio: 3 / 4; border-radius: var(--ssf-radius); background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%); background-size: 400% 100%; animation: ssf-shimmer 1.2s infinite; }
@keyframes ssf-shimmer { to { background-position: -100% 0; } }

.ssf-wl-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ssf-line); border-radius: var(--ssf-radius); overflow: hidden; background: var(--ssf-bg); transition: opacity .25s, transform .25s; }
.ssf-wl-card.is-leaving { opacity: 0; transform: scale(.96); }
.ssf-wl-card__img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ssf-wl-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px; flex: 1; }
.ssf-wl-card__title { color: var(--ssf-ink); font-weight: 600; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ssf-wl-card__stock { font-size: 13px; }
.ssf-wl-card__stock.is-in { color: #15803d; }
.ssf-wl-card__stock.is-out { color: #b91c1c; }
.ssf-wl-card .ssf-btn { margin-top: auto; min-height: 42px; font-size: 14px; }
.ssf-wl-remove { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 6px rgba(0, 0, 0, .15); font-size: 20px; line-height: 1; cursor: pointer; color: var(--ssf-ink); }

.ssf-wl-empty { text-align: center; padding: 60px 16px; }
.ssf-wl-empty svg { width: 64px; height: 64px; fill: none; stroke: var(--ssf-heart); stroke-width: 1.4; }
.ssf-wl-empty h3 { margin: 16px 0 6px; }
.ssf-wl-empty p { color: var(--ssf-muted); margin-bottom: 20px; }

@media (max-width: 480px) {
	.ssf-wl-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ---------- Cart: save for later ---------- */
.ssf-save-later { margin-top: 6px; }
.ssf-link { background: none; border: 0; padding: 0; color: #2563eb; font-size: 13px; font-weight: 600; cursor: pointer; }
.ssf-link:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.ssf-drawer__panel, .ssf-sticky, .ssf-toast, .ssf-wl-card { transition: none; }
	.ssf-wl-btn.pop .ssf-heart { animation: none; }
}