/* ============ Redesigned slide-in mini-cart panel + wishlist (2026) ============ */
/* Client loads the production minified_style.css bundle via JS AFTER this file, so every
   selector is prefixed with `body` to raise specificity and win the cascade regardless of
   load order (the bundle still defines the legacy `header .shopping-cart .products` dropdown). */

body .cart-overlay {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0; visibility: hidden; transition: opacity .3s ease;
	z-index: 1090;
}
body .cart-overlay.show { opacity: 1; visibility: visible; }

body header .shopping-cart .products {
	position: fixed; top: 0; right: 0;
	width: 380px; max-width: 100%; height: 100%;
	background: #fff; box-shadow: -3px 0 18px rgba(0, 0, 0, 0.18);
	transform: translateX(100%); transition: transform .3s ease;
	display: flex; flex-direction: column; padding: 0; z-index: 1100;
	font-family: inherit;
}
body header .shopping-cart .products.open { transform: translateX(0); }

body header .shopping-cart .products .cart-panel-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 20px; border-bottom: 1px solid #e6e6e6; flex: 0 0 auto;
}
body header .shopping-cart .products .cart-panel-title { font-size: 18px; font-weight: 700; text-transform: uppercase; }
body header .shopping-cart .products .cart-close { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: #333; padding: 0 4px; }

body header .shopping-cart .products .prods-wrapper { flex: 1 1 auto; overflow-y: auto; border-top: 0; padding: 0 20px; position: relative; }

body header .shopping-cart .products .prod {
	display: flex; align-items: flex-start;
	padding: 16px 0; border-bottom: 1px solid #ececec;
	width: auto; text-align: left;
}
body header .shopping-cart .products a.thumb { flex: 0 0 80px; text-align: center; margin-right: 14px; }
body header .shopping-cart .products a.thumb img { max-width: 80px; }
body header .shopping-cart .products .prod-info { flex: 1 1 auto; min-width: 0; }
body header .shopping-cart .products a.title {
	font-size: 14px; font-weight: 600; color: #222; display: block; text-align: left;
	white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; margin-bottom: 4px;
}
body header .shopping-cart .products .prod-info .meta { display: block; font-size: 12px; color: #777; margin-bottom: 4px; }
body header .shopping-cart .products .prod-info .price { display: block; font-size: 15px; font-weight: 700; color: #f04545; text-align: left; padding: 0; margin-bottom: 8px; }
body header .shopping-cart .products .prod-info .price .old-price { font-weight: 400; text-decoration: line-through; font-size: 0.8em; color: #999; margin-right: 4px; }

body header .shopping-cart .products .prod-actions { display: flex; }
body header .shopping-cart .products .prod-actions button {
	border: 0; background: none; cursor: pointer; padding: 0; margin-right: 16px;
	font-size: 12px; color: #777; display: inline-flex; align-items: center;
}
body header .shopping-cart .products .prod-actions button i { font-size: 14px; margin-right: 5px; }
body header .shopping-cart .products .prod-actions button:hover { color: #f04545; }
body header .shopping-cart .products .prod-actions button.cart-fav.is-active { color: #f04545; }

body header .shopping-cart .products .cart-delivery { padding: 14px 20px 4px; font-size: 13px; color: #1aa251; flex: 0 0 auto; }
body header .shopping-cart .products .cart-freeship { padding: 0 20px 4px; font-size: 13px; color: #1aa251; flex: 0 0 auto; }

body header .shopping-cart .products .cart-foot { flex: 0 0 auto; padding: 16px 20px 20px; border-top: 1px solid #e6e6e6; }
body header .shopping-cart .products .cart-foot .total { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; margin: 0 0 14px; text-align: left; }
body header .shopping-cart .products .cart-foot .total strong { font-size: 16px; }
body header .shopping-cart .products a.buy {
	width: 100%; height: 52px; line-height: 52px;
	background: #f04545; color: #fff; text-align: center; font-size: 16px; font-weight: 700;
	text-transform: uppercase; display: block; border-radius: 30px;
}

body header .shopping-cart .products .empty-cart { padding: 40px 20px; text-align: center; font-weight: 600; border: 0; }
body header .shopping-cart .products .package { display: block; padding: 0 20px; font-size: 13px; text-align: left; }

@media (max-width: 480px) {
	body header .shopping-cart .products { width: 100%; }
}

/* Header favourites (wishlist) icon — sits inside the cart cluster, just left of the cart icon */
body header .shopping-cart .wishlist-btn { float: right; position: relative; height: 70px; display: flex; align-items: center; margin-right: 30px; color: #333; cursor: pointer; }
body header .shopping-cart .wishlist-btn i { font-size: 35px; line-height: 1; display: block; }
body header .shopping-cart .wishlist-btn:hover { color: #f04545; }
body header .shopping-cart .wishlist-btn .wishlist-count {
	position: absolute; top: 16px; right: -8px; min-width: 18px; height: 18px; line-height: 18px;
	padding: 0 4px; background: #f04545; color: #fff; border-radius: 50%; font-size: 11px; text-align: center; font-weight: 700;
}

/* Mobile: the cart cluster is position:absolute (top-right), so the centred logo does not
   reserve space for it. Mirror the theme's smaller mobile logo and tuck the heart tight to the
   cart (no right margin, smaller glyph, compact badge) so it never overlaps the logo. Desktop
   (>767px) keeps the roomy layout unchanged. */
@media (max-width: 767px) {
	body header .logo { width: 118px; }
	body header .shopping-cart .wishlist-btn { margin-right: 10px; }
	body header .shopping-cart .wishlist-btn i { font-size: 35px; }
	body header .shopping-cart .wishlist-btn .wishlist-count {
		top: 10px; right: -4px; min-width: 15px; height: 15px; line-height: 15px; font-size: 9px; padding: 0 3px;
	}
}

/* Favourite heart on product photos — catalogue cards + product page.
   Absolute, above the hover overlay (z-index), with a translucent backing layer so the icon
   never blends into the photo. >=34px keeps a comfortable thumb tap target on mobile. */
body .listitem { position: relative; }
body .product-details .main-image { position: relative; }
body .fav-heart {
	position: absolute; top: 15px; left: 15px; z-index: 599;
	width: 36px; height: 36px; padding: 0; border: 0; background: none;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; line-height: 1;
}
body .fav-heart .fav-heart-bg {
	position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%;
	background: rgba(255, 255, 255, 0.85); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
body .fav-heart i { position: relative; font-size: 18px; color: #555; transition: color .15s ease; }
body .fav-heart:hover i,
body .fav-heart.is-active i { color: #f04545; }
/* Product page: slightly larger over the main gallery image. */
body .product-details .main-image .fav-heart { width: 40px; height: 40px; top: 12px; right: 12px; }
body .product-details .main-image .fav-heart i { font-size: 20px; }
@media (max-width: 767px) {
	body .fav-heart { width: 38px; height: 38px; top: 5px; left: 5px;}
	body .fav-heart i { font-size: 19px; }
}

body .empty-favourites { text-align: center; padding: 40px 0; }
body .empty-favourites p { font-size: 16px; margin-bottom: 16px; }

/* "Share the list" control on the Favourites page */
body .wishlist-share { position: relative; display: inline-block; margin: 0 0 18px; }
body .wishlist-share-tray { display: none; margin-top: 10px; align-items: center; flex-wrap: wrap; }
body .wishlist-share-tray.open { display: flex; }
body .wishlist-share-tray > * { margin: 0 8px 8px 0; }
body .wishlist-share-tray .ws-target,
body .wishlist-share-copy {
	display: inline-flex; align-items: center; justify-content: center;
	height: 40px; min-width: 40px; padding: 0; border: 1px solid #e0e0e0; border-radius: 50%;
	background: #fff; color: #555; cursor: pointer; text-decoration: none; font-size: 18px;
}
body .wishlist-share-copy { width: auto; padding: 0 14px; border-radius: 20px; font-size: 14px; }
body .wishlist-share-copy i { margin-right: 6px; }
body .wishlist-share-tray .ws-target:hover,
body .wishlist-share-copy:hover { color: #f04545; border-color: #f04545; }
body .wishlist-share-tray .ws-brand svg { width: 20px; height: 20px; fill: currentColor; display: block; }
body .wishlist-share-tray .ws-copied { display: none; align-self: center; color: #1aa251; font-size: 13px; font-weight: 600; }
/* Viber & Messenger are mobile app deep-links; hide them where there is a fine pointer + hover (desktop). */
@media (hover: hover) and (pointer: fine) {
	body .wishlist-share-tray .ws-mobile-only { display: none; }
}