/* ShopKit Widgets — Wishlist */

.skwl { display: block; line-height: 1; }
.skwl *, .skwl-host *, .skwl-toast { box-sizing: border-box; }

/* ---------- Trigger ---------- */
.skwl .skwl-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1em;
	min-height: 1em;
	padding: 8px;
	color: #111827;
	text-decoration: none;
	cursor: pointer;
	line-height: 1;
	visibility: visible;
	opacity: 1;
	transition: color .2s ease, background-color .2s ease;
}
.skwl-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 1em; min-height: 1em; font-size: 24px; line-height: 1; color: inherit; }
.skwl-icon svg { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skwl-icon i { display: inline-block; line-height: 1; }

.skwl .skwl-count {
	position: absolute;
	top: -6px;
	right: -8px;
	display: inline-block;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #e11d48;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
}
.skwl[data-hide-zero="yes"] .skwl-count[data-count="0"] { display: none; }
.skwl[data-editor="yes"] .skwl-count { display: inline-block !important; }
.skwl-count.skwl-bump { animation: skwl-bump .4s ease; }
@keyframes skwl-bump {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* ---------- Drawer shell ---------- */
.skwl-drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 999998;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear var(--skwl-duration, .4s);
}
.skwl-drawer.skwl-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.skwl-no-overlay.skwl-open { pointer-events: none; }
.skwl-no-overlay .skwl-panel { pointer-events: auto; }
.skwl-no-overlay .skwl-overlay { display: none; }

.skwl-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity var(--skwl-duration, .4s) ease;
}
.skwl-open .skwl-overlay { opacity: 1; }

.skwl-panel { display: flex; flex-direction: column; max-width: 100%; background: #fff; color: #111827; }
.skwl-drawer .skwl-panel {
	position: absolute;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
	transition: transform var(--skwl-duration, .4s) ease, opacity var(--skwl-duration, .4s) ease;
}

/* Position */
.skwl-pos-right .skwl-panel  { top: 0; right: 0; bottom: 0; width: 400px; }
.skwl-pos-left .skwl-panel   { top: 0; left: 0; bottom: 0; width: 400px; }
.skwl-pos-top .skwl-panel    { top: 0; left: 0; right: 0; max-height: 85vh; }
.skwl-pos-bottom .skwl-panel { bottom: 0; left: 0; right: 0; max-height: 85vh; }

/* Animation: closed state */
.skwl-anim-slide.skwl-pos-right .skwl-panel  { transform: translateX(100%); }
.skwl-anim-slide.skwl-pos-left .skwl-panel   { transform: translateX(-100%); }
.skwl-anim-slide.skwl-pos-top .skwl-panel    { transform: translateY(-100%); }
.skwl-anim-slide.skwl-pos-bottom .skwl-panel { transform: translateY(100%); }
.skwl-anim-fade .skwl-panel { opacity: 0; }
.skwl-anim-zoom .skwl-panel { opacity: 0; transform: scale(.92); }
.skwl-anim-none .skwl-panel,
.skwl-anim-none .skwl-overlay,
.skwl-anim-none.skwl-drawer { transition: none; }

/* Animation: open state (must stay after the closed rules) */
.skwl-anim-slide.skwl-open .skwl-panel,
.skwl-anim-zoom.skwl-open .skwl-panel { transform: none; opacity: 1; }
.skwl-anim-fade.skwl-open .skwl-panel { opacity: 1; }

html.skwl-lock { overflow: hidden; }

/* ---------- Page layout ---------- */
.skwl-page .skwl-panel { display: block; background: transparent; }
.skwl-page .skwl-body { padding: 0; overflow: visible; }
.skwl-page .skwl-head { padding: 0 0 14px; }
.skwl-page .skwl-foot { margin-top: 16px; padding: 16px 0 0; background: transparent; }

/* ---------- Header ---------- */
.skwl-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
}
.skwl-ui .skwl-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: #111827; }
.skwl-ui .skwl-close {
	padding: 6px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #111827;
	line-height: 0;
	cursor: pointer;
	box-shadow: none;
}
.skwl-ui .skwl-close:hover,
.skwl-ui .skwl-close:focus { background: transparent; color: #e11d48; }
.skwl-close svg, .skwl-remove svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.skwl-close svg { width: 20px; height: 20px; }

.skwl-notice {
	margin: 10px 20px 0;
	padding: 8px 12px;
	border-radius: 6px;
	background: #fef2f2;
	color: #991b1b;
	font-size: 13px;
}
.skwl-notice[hidden] { display: none; }

/* ---------- Body / products ---------- */
.skwl-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px; }
.skwl-loading .skwl-list,
.skwl-busy .skwl-list { opacity: .55; pointer-events: none; }
.skwl-busy .skwl-foot { pointer-events: none; opacity: .7; }
.skwl-list { display: flex; flex-direction: column; gap: 12px; transition: opacity .2s ease; }

.skwl-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
}
.skwl-item-img { flex: 0 0 76px; display: block; }
.skwl-item-img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 6px; object-fit: cover; }
.skwl-item.is-out .skwl-item-img img { opacity: .55; }
.skwl-item-info { flex: 1 1 auto; min-width: 0; padding-right: 22px; }
.skwl-ui .skwl-item-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; color: #111827; text-decoration: none; }
.skwl-item-price { margin-top: 4px; font-size: 13px; color: #111827; }
.skwl-item-price del { opacity: .55; margin-right: 4px; }
.skwl-item-price ins { text-decoration: none; font-weight: 600; }
.skwl-item-stock { margin-top: 4px; font-size: 12px; font-weight: 500; line-height: 1.3; }
.skwl-item-stock.is-in { color: #059669; }
.skwl-item-stock.is-out { color: #dc2626; }
.skwl-item-btns { margin-top: 10px; }

.skwl-ui .skwl-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 4px;
	border: 0;
	background: transparent;
	color: #9ca3af;
	line-height: 0;
	cursor: pointer;
	box-shadow: none;
}
.skwl-ui .skwl-remove:hover,
.skwl-ui .skwl-remove:focus { background: transparent; color: #e11d48; }
.skwl-remove svg { width: 16px; height: 16px; }

.skwl-hide-img .skwl-item-img { display: none; }
.skwl-hide-price .skwl-item-price { display: none; }
.skwl-hide-stock .skwl-item-stock { display: none; }
.skwl-hide-cart .skwl-item-btns { display: none; }
.skwl-hide-remove .skwl-remove { display: none; }

/* ---------- Empty state ---------- */
.skwl-empty-msg { display: none; padding: 36px 10px; text-align: center; }
.skwl-ui.skwl-ready.skwl-empty .skwl-empty-msg { display: block; }
.skwl-empty .skwl-list,
.skwl-empty .skwl-foot { display: none; }
.skwl-empty-icon { display: inline-flex; margin-bottom: 12px; font-size: 44px; line-height: 1; color: #d1d5db; }
.skwl-empty-icon svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.skwl-empty-text { margin: 0 0 16px; font-size: 15px; color: #6b7280; }

/* ---------- Buttons ---------- */
.skwl-panel :is(a, button).skwl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.skwl-panel .skwl-btn-add { padding: 8px 14px; font-size: 13px; color: #fff; background: #111827; border-color: #111827; }
.skwl-panel .skwl-btn-add:hover { color: #fff; background: #e11d48; border-color: #e11d48; }
.skwl-panel .skwl-btn-add.is-loading { opacity: .6; cursor: progress; }
.skwl-panel .skwl-btn-add.is-added { background: #059669; border-color: #059669; color: #fff; }

.skwl-empty-btn { color: #fff; background: #111827; border-color: #111827; }
.skwl-panel .skwl-empty-btn:hover { color: #fff; background: #e11d48; border-color: #e11d48; }

/* ---------- Footer ---------- */
.skwl-foot { padding: 16px 20px; border-top: 1px solid #e5e7eb; background: #fff; }
.skwl-buttons { display: flex; flex-direction: column; gap: 10px; }
.skwl-foot .skwl-btn { width: 100%; flex: 1 1 auto; }
.skwl-panel .skwl-btn-all { color: #fff; background: #e11d48; border-color: #e11d48; }
.skwl-panel .skwl-btn-all:hover { color: #fff; background: #be123c; border-color: #be123c; }
.skwl-panel .skwl-btn-view { color: #111827; background: #fff; border-color: #111827; }
.skwl-panel .skwl-btn-view:hover { color: #fff; background: #111827; border-color: #111827; }
.skwl-panel .skwl-btn-clear { color: #6b7280; background: #fff; border-color: #e5e7eb; font-weight: 500; }
.skwl-panel .skwl-btn-clear:hover { color: #e11d48; background: #fff; border-color: #e11d48; }
.skwl-no-addable .skwl-btn-all { display: none; }

/* ---------- Heart button (shortcode) ---------- */
.skwl-heart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	color: #111827;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .15s ease;
}
.skwl-heart-btn:hover { color: #e11d48; border-color: #e11d48; background: #fff; }
.skwl-heart-btn:active { transform: scale(.96); }
.skwl-heart-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skwl-heart-btn.is-active { color: #e11d48; border-color: #e11d48; }
.skwl-heart-btn.is-active svg { fill: currentColor; }

/* ---------- Toast ---------- */
.skwl-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 1000000;
	max-width: calc(100% - 32px);
	padding: 10px 18px;
	border-radius: 999px;
	background: #111827;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	opacity: 0;
	pointer-events: none;
	transform: translate( -50%, 12px );
	transition: opacity .25s ease, transform .25s ease;
}
.skwl-toast.is-show { opacity: 1; transform: translate( -50%, 0 ); }

@media (max-width: 480px) {
	.skwl-pos-right .skwl-panel,
	.skwl-pos-left .skwl-panel { width: 100%; }
}