/* ==========================================================================
   Mini cart — header hover dropdown (desktop) + off-canvas drawer (mobile)
   Markup: woocommerce/cart/mini-cart.php. Tokens: cat-design-system.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dropdown shell — Flatsome renders it as a `display:table` panel with a 2px
   grey border, a hard shadow and 20px of padding it can't opt out of.
   -------------------------------------------------------------------------- */
.header .cart-item.has-dropdown > .nav-dropdown {
	display: block;
	width: 372px;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--cat-line);
	border-radius: 18px;
	box-shadow: 0 30px 70px -28px rgba(20, 22, 30, 0.4), 0 2px 8px rgba(20, 22, 30, 0.06);
}

.header .cart-item.has-dropdown > .nav-dropdown > li.html,
.header .cart-item.has-dropdown > .nav-dropdown > li.widget_shopping_cart {
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

/* Recolour the little pointer triangle to match the new border. */
.nav-dropdown-has-arrow.nav-dropdown-has-border .cart-item.has-dropdown::before {
	border-bottom-color: var(--cat-line);
}

.nav-dropdown-has-arrow .cart-item.has-dropdown::before {
	border-width: 9px;
	margin-left: -9px;
}

/* Single product pages confirm an add-to-cart with the .cat-atc-modal popup, so
   the dropdown must only ever open on hover there. `theme_mod_cart_dropdown_show`
   (includes/shop-modern.php) already switches off both of Flatsome's reveal
   triggers; this is the backstop for anything else that sets .current-dropdown,
   e.g. the `<span class="added-to-cart">` marker on a no-JS form submit. */
.single-product .cart-item.has-dropdown.current-dropdown:not(:hover) > .nav-dropdown {
	max-height: 0;
	opacity: 0;
	visibility: hidden;
}

.single-product .nav-dropdown-has-arrow .cart-item.has-dropdown.current-dropdown:not(:hover)::before,
.single-product .nav-dropdown-has-arrow .cart-item.has-dropdown.current-dropdown:not(:hover)::after {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   Header row: icon tile + title + item count
   -------------------------------------------------------------------------- */
.cat-mini-cart__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 18px;
	border-bottom: 1px solid var(--cat-line);
}

.cat-mini-cart__head-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--cat-gradient);
	color: var(--cat-ink);
	box-shadow: 0 8px 18px -10px var(--cat-glow);
}

.cat-mini-cart__head-icon svg {
	width: 17px;
	height: 17px;
}

.cat-mini-cart__head-title {
	flex: 1 1 auto;
	font-size: 0.95em;
	font-weight: 700;
	color: var(--cat-ink);
	line-height: 1.6;
}

.cat-mini-cart__count {
	flex: 0 0 auto;
	font-size: 0.72em;
	padding: 3px 11px;
	font-family: 'IRANSansFaNum', IRANSans, sans-serif;
}

/* --------------------------------------------------------------------------
   Item list
   -------------------------------------------------------------------------- */
/* Scoped to .nav-dropdown to beat Flatsome's `.nav-dropdown .product_list_widget`,
   which otherwise sets the cap to a flat 50vh. */
.cat-mini-cart__list,
.nav-dropdown .cat-mini-cart__list {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: min(50vh, 400px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cat-mini-cart__list::-webkit-scrollbar {
	width: 5px;
}

.cat-mini-cart__list::-webkit-scrollbar-thumb {
	background: var(--cat-line);
	border-radius: 999px;
}

/* Flatsome's product_list_widget rules reserve 75px of padding for an absolutely
   positioned thumbnail — this layout places the thumbnail in flow instead. */
.cat-mini-cart__list > li.cat-mini-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	position: relative;
	min-height: 0;
	margin: 0;
	padding: 14px 18px;
	overflow: visible;
	list-style: none;
}

.cat-mini-cart__list > li.cat-mini-item + li.cat-mini-item {
	border-top: 1px solid var(--cat-line);
}

.cat-mini-item__media {
	flex: 0 0 auto;
	order: 1;
	display: block;
	width: 60px;
	height: 60px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--cat-line);
	border-radius: 12px;
	background: var(--cat-surface);
	overflow: hidden;
}

.cat-mini-cart__list li .cat-mini-item__media img {
	position: static;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	border-radius: 11px;
}

.cat-mini-item__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	order: 2;
	/* Match the thumbnail so single-line titles sit centred against it. */
	min-height: 60px;
}

/* Flatsome's `ul.product_list_widget li a:not(.remove)` forces display:block,
   which would kill the line clamp — hence the extra class in the selector. */
.cat-mini-cart__list .cat-mini-item__body a.cat-mini-item__name,
.cat-mini-cart__list .cat-mini-item__body span.cat-mini-item__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.75;
	color: var(--cat-ink);
	text-overflow: clip;
}

.cat-mini-cart__list .cat-mini-item__body a.cat-mini-item__name:hover {
	color: var(--cat-accent-text);
}

/* Variation data — WooCommerce emits a <dl> with block-level dt/dd, which would
   break "سایز: ۴۳" across two lines in a row this narrow. */
.cat-mini-item__meta,
.cat-mini-cart__list li .cat-mini-item__meta dl.variation {
	margin: 0;
	font-size: 0.72em;
	line-height: 1.7;
	color: var(--cat-muted);
}

.cat-mini-cart__list li .cat-mini-item__meta dl.variation,
.cat-mini-cart__list li .cat-mini-item__meta dt,
.cat-mini-cart__list li .cat-mini-item__meta dd,
.cat-mini-cart__list li .cat-mini-item__meta p {
	display: inline;
	margin: 0;
	padding: 0;
	font-weight: 400;
}

/* The <dt>/<dd> pair collapses to "سایز:۴۳" once inlined. */
.cat-mini-cart__list li .cat-mini-item__meta dt {
	margin-inline-end: 4px;
}

.cat-mini-cart__list li .cat-mini-item__meta dd {
	color: var(--cat-ink);
	font-weight: 500;
}

/* Quantity + price row. .ux-mini-cart-qty is Flatsome's own wrapper around the
   filtered quantity markup — it ships with a negative margin for the old layout. */
.cat-mini-cart__list li .ux-mini-cart-qty {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	opacity: 1;
}

/* dir:ltr keeps the multiplier in front of the number ("×۲", not "۲×") — the
   `×` is bidi-neutral and would otherwise flip to the far side in RTL. */
.cat-mini-item__qty {
	flex: 0 0 auto;
	direction: ltr;
	padding: 2px 9px;
	font-size: 0.7em;
	font-family: 'IRANSansFaNum', IRANSans, sans-serif;
}

.cat-mini-item__price {
	margin-inline-start: auto;
	font-size: 0.84em;
	font-weight: 700;
	color: var(--cat-ink);
	white-space: nowrap;
	font-family: 'IRANSansFaNum', IRANSans, sans-serif;
}

/* Remove button — a quiet circle that turns red on hover. It sits in the row's
   flex flow as the last item (thumbnail → details → remove) rather than pinned
   to the card corner, so it reads as part of the item. Flatsome pins
   `a.remove` to `position:absolute; left:0`, hence the resets. */
.cat-mini-cart__list li a.cat-mini-item__remove {
	position: static;
	order: 3;
	flex: 0 0 auto;
	align-self: center;
	left: auto;
	right: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--cat-surface);
	color: var(--cat-muted);
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cat-mini-cart__list li a.cat-mini-item__remove:hover {
	background: #fdeaea;
	color: #d4383e;
}

/* --------------------------------------------------------------------------
   Footer: subtotal + actions
   -------------------------------------------------------------------------- */
.cat-mini-cart__footer {
	padding: 16px 18px 18px;
	border-top: 1px solid var(--cat-line);
	background: var(--cat-surface);
}

.cat-mini-cart__footer p.woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	text-align: start;
	font-size: 1em;
}

.cat-mini-cart__footer p.woocommerce-mini-cart__total strong {
	font-size: 0.85em;
	font-weight: 500;
	color: var(--cat-muted);
}

.cat-mini-cart__footer p.woocommerce-mini-cart__total .amount {
	font-size: 1.05em;
	font-weight: 800;
	color: var(--cat-ink);
	font-family: 'IRANSansFaNum', IRANSans, sans-serif;
}

.cat-mini-cart__footer p.woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

/* WooCommerce/Flatsome inject these two links through
   woocommerce_widget_shopping_cart_buttons — restyle rather than re-template. */
.cat-mini-cart__footer .woocommerce-mini-cart__buttons .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--cat-line);
	/* Pill: same buy-flow treatment as the cart and checkout CTAs. */
	border-radius: 999px;
	background: #fff;
	color: var(--cat-ink);
	font-size: 0.88em;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cat-mini-cart__footer .woocommerce-mini-cart__buttons .button:hover {
	border-color: var(--cat-accent-500);
	color: var(--cat-ink);
	box-shadow: 0 10px 22px -16px var(--cat-glow);
}

.cat-mini-cart__footer .woocommerce-mini-cart__buttons .button.checkout {
	border-color: transparent;
	background: var(--cat-gradient);
	font-weight: 700;
	box-shadow: 0 12px 26px -14px var(--cat-glow);
}

.cat-mini-cart__footer .woocommerce-mini-cart__buttons .button.checkout:hover {
	transform: translateY(-1px);
	border-color: transparent;
	box-shadow: 0 16px 30px -14px var(--cat-glow);
}

.cat-mini-cart__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
	color: var(--cat-muted);
	font-size: 0.74em;
}

.cat-mini-cart__note svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Empty state — Flatsome hooks in the bag icon and the "return to shop" button
   -------------------------------------------------------------------------- */
.cat-mini-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 30px 22px 26px;
	text-align: center;
}

.cat-mini-cart__empty .ux-mini-cart-empty-icon {
	line-height: 0;
}

.cat-mini-cart__empty .ux-mini-cart-empty-icon svg {
	height: 54px !important;
	opacity: 0.16 !important;
	color: var(--cat-ink);
}

.cat-mini-cart__empty p.woocommerce-mini-cart__empty-message {
	margin: 6px 0 14px;
	padding: 0;
	color: var(--cat-muted);
	font-size: 0.88em;
}

.cat-mini-cart__empty p.return-to-shop {
	margin: 0;
}

.cat-mini-cart__empty .return-to-shop .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin: 0;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--cat-gradient);
	color: var(--cat-ink);
	font-size: 0.88em;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 12px 26px -14px var(--cat-glow);
}

/* --------------------------------------------------------------------------
   Off-canvas drawer (mobile) — same components, full-height layout
   -------------------------------------------------------------------------- */
/* Flatsome prints its own centred "سبد خرید" heading above the widget — the
   head row below already carries the title, icon and item count. */
.cart-popup-inner .cart-popup-title {
	display: none;
}

/* .inner-padding gives the drawer 30px of side padding. */
.cart-popup-inner .cat-mini-cart__head {
	padding: 0 0 15px;
}

.cart-popup-inner .cat-mini-cart__list,
.cart-popup-inner ul.woocommerce-mini-cart {
	max-height: none;
	margin-bottom: 0;
	flex: 1 1 auto;
}

.cart-popup-inner .cat-mini-cart__list > li.cat-mini-item {
	padding-inline: 0;
}

.cart-popup-inner .cat-mini-cart__footer.ux-mini-cart-footer {
	margin: 0 -30px;
	padding: 16px 30px 30px;
	background: var(--cat-surface);
	border-top: 1px solid var(--cat-line);
}

.cart-popup-inner .cat-mini-cart__empty {
	padding-inline: 0;
}

/* --------------------------------------------------------------------------
   Narrow viewports — the dropdown must never exceed the screen
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
	.header .cart-item.has-dropdown > .nav-dropdown {
		width: calc(100vw - 24px);
	}
}