/* TattooClub Wishlist — dynamic behavior layer styling only.
   Visual structure/colors otherwise come from the Elementor containers
   themselves (Design System tokens); this file only supplies states
   that Elementor's static settings can't express (hidden templates,
   open/close toggles, hover). */

/* Authoritative positioning for the two Elementor Library floating
   panels (dropdown + toast). They're injected straight into wp_footer
   via get_builder_content_for_display(), which does not reliably
   enqueue that post's own generated Elementor CSS file (post-147.css /
   post-148.css never load on the front end) -- so their fixed/absolute
   positioning is authored here instead, mirroring the values set in
   the Elementor editor for these two elements exactly. */
#tc-wishlist-dropdown{
	display:none;
	position:fixed; top:78px; right:32px; z-index:9500;
	width:340px;
	flex-direction:column; gap:16px;
	background:#FFFFFF; border-radius:18px; padding:22px;
	box-shadow:0 16px 40px rgba(17,17,17,.2);
}
#tc-wishlist-dropdown.is-open{ display:flex !important; }

#tc-wishlist-toast{
	display:none;
	position:fixed; top:90px; left:50%; z-index:9999;
	width:360px;
	flex-direction:row; align-items:flex-start; gap:14px;
	background:#111111; border-radius:16px; padding:18px;
	box-shadow:0 14px 36px rgba(17,17,17,.35);
	opacity:0;
	transform:translate(-50%,-8px);
	transition:opacity .22s ease, transform .22s ease;
}
#tc-wishlist-toast.is-visible{
	display:flex !important;
	opacity:1;
	transform:translate(-50%,0);
}

.tc-wl-tpl,
.tc-wl-row-tpl,
[data-id="tc-wl-dd-row-template"],
[data-id="tc-wl-row-template"]{ display:none; }

.tc-wl-dd-remove,
[data-id="tc-wl-dd-close"],
[data-id="tc-wl-toast-close"]{ cursor:pointer; transition:opacity .15s ease; }
.tc-wl-dd-remove:hover,
[data-id="tc-wl-dd-close"]:hover,
[data-id="tc-wl-toast-close"]:hover{ opacity:.55; }

#tc-wishlist-icon-wrap{ cursor:pointer; }

.tc-wl-dd-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* -----------------------------------------------------------------
   Product page: "Ajouter à la wishlist" toggle button
   Rendered via a WooCommerce hook (no Elementor single-product
   template exists on this site), styled to match the Design System.
------------------------------------------------------------------ */
.tc-wl-product-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	width:100%; margin-top:10px; padding:13px 20px;
	border-radius:999px; border:1px solid #111111; background:#FFFFFF; color:#111111;
	font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:700;
	letter-spacing: 0; text-transform: none; cursor:pointer;
	transition:background .15s ease, color .15s ease, border-color .15s ease;
	line-height:1;
}
.tc-wl-product-btn:hover{ background:#F9F5EF; }
.tc-wl-product-btn.is-active{ background:#111111; color:#F9F5EF; border-color:#111111; }
.tc-wl-product-btn.is-active:hover{ background:#B7E41C; color:#111111; border-color:#B7E41C; }
.tc-wl-product-btn i{ font-size:13px; }
.tc-wl-product-btn .tc-wl-btn-label-added{ display:none; }
.tc-wl-product-btn.is-active .tc-wl-btn-label-add{ display:none; }
.tc-wl-product-btn.is-active .tc-wl-btn-label-added{ display:inline; }

/* Product image corner heart (matches mockup's on-image toggle) */
.tc-wl-image-heart{
	position:absolute; top:14px; right:60px; z-index:100;
	width:36px; height:36px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:rgba(255,255,255,.92); border:none; cursor:pointer;
	box-shadow:0 2px 10px rgba(17,17,17,.14);
	transition:transform .15s ease;
}
.tc-wl-image-heart:hover{ transform:scale(1.06); }
.tc-wl-image-heart i{ color:#111111; font-size:15px; }
.tc-wl-image-heart.is-active i{ color:#B7E41C; }

/* -----------------------------------------------------------------
   Wishlist page (Liste de souhaits)
------------------------------------------------------------------ */
.tc-wl-page-empty,
[data-id="tcwlempty1"]{ display:none; }

/* Wishlist page card image: Elementor's compiled CSS for this container
   omits width/height entirely (present in the editor settings, but not
   in the generated post-58.css -- same family of issue as the floating
   panels' missing CSS), leaving the SVG artwork to render at its
   intrinsic size. Pin it explicitly via the always-reliable
   elementor-element-<id> class. */
.elementor-element-tcwlcardimgw{
	width:100% !important; height:220px !important;
	flex-shrink:0;
}
@media (max-width: 767px){
	.elementor-element-tcwlcardimgw{ height:240px !important; }
}

/* Same missing-width/height issue for the mini-dropdown's thumbnail. */
.elementor-element-tcwlddimgw{
	width:52px !important; height:52px !important; flex-shrink:0;
}

/* Elementor's own responsive width/height (%) controls on these two image
   widgets aren't taking effect (same missing-CSS family as above), so the
   SVG artwork renders at its raw intrinsic size instead of filling its
   thumbnail box. Force it here. */
.elementor-element-tcwlcardimg img,
.elementor-element-tcwlddimg img{
	width:100% !important; height:100% !important; object-fit:cover !important;
}

/* The wishlist page's card template (a container, isInner:true) has its
   31.3%/48%/100% responsive width set in the editor, but -- same missing-CSS
   family -- it never compiles into post-58.css (only display/flex-direction
   come through), so every card was rendering at full row width instead of
   a 3-up grid. Pin it explicitly per breakpoint. */
.elementor-element-tc-wl-row-template{
	width:31.3% !important;
}
@media (max-width: 1024px){
	.elementor-element-tc-wl-row-template{ width:48% !important; }
}
@media (max-width: 767px){
	.elementor-element-tc-wl-row-template{ width:100% !important; }
}
.tc-wl-card-remove{ cursor:pointer; transition:opacity .15s ease; }
.tc-wl-card-remove:hover{ opacity:.6; }

@media (max-width: 767px){
	#tc-wishlist-dropdown{
		right:12px !important; left:12px !important; width:auto !important;
		top:70px !important;
	}
	#tc-wishlist-toast{
		width:90vw !important; max-width:360px;
	}
}
/* Wishlist toggle in flight (global toast follows the server response). */
.tc-wl-product-btn.is-busy,
.tc-wl-image-heart.is-busy { opacity: .6; pointer-events: none; cursor: progress; }