/* ==========================================================================
   Hush Bundles — builder UI
   Uses the Hush theme's CSS custom properties when present, with sensible
   fallbacks so the plugin looks good on any theme.
   ========================================================================== */

.hush-bundle{
	--hb-cream:      var(--hush-cream, #fffcf5);
	--hb-ink:        var(--hush-ink, #1c1340);
	--hb-ink-soft:   var(--hush-ink-soft, #4a4364);
	--hb-muted:      var(--hush-muted, #8b869b);
	--hb-line:       var(--hush-line, #ece7f5);
	--hb-line-2:     var(--hush-line-2, #e3ddf0);
	--hb-blue:       var(--hush-blue, #0554ff);
	--hb-blue-600:   var(--hush-blue-600, #0043d6);
	--hb-blue-050:   var(--hush-blue-050, #eef2ff);
	--hb-pink:       var(--hush-pink, #ff3ea5);
	--hb-pink-050:   var(--hush-pink-050, #ffeef7);
	--hb-green:      var(--hush-green, #8fd14f);
	--hb-card:       var(--hush-card, #fff);
	--hb-r-sm:       var(--hush-r-sm, 10px);
	--hb-r-md:       var(--hush-r-md, 16px);
	--hb-r-lg:       var(--hush-r-lg, 24px);
	--hb-r-pill:     var(--hush-r-pill, 999px);
	--hb-shadow-sm:  var(--hush-shadow-sm, 0 2px 8px rgba(28,19,64,.05));
	--hb-shadow-md:  var(--hush-shadow-md, 0 10px 30px rgba(28,19,64,.08));
	--hb-ease:       var(--hush-ease, cubic-bezier(.22,1,.36,1));
	--hb-font-disp:  var(--hush-font-display, Georgia, serif);
	margin-top:1rem;
}

/* ---- Promo banner ---- */
.hush-bundle__promo{
	display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
	background:linear-gradient(100deg,var(--hb-pink-050),var(--hb-blue-050));
	border:1px solid var(--hb-line);border-radius:var(--hb-r-md);
	padding:.9rem 1.1rem;margin-bottom:1.4rem;
}
.hush-bundle__promo-badge{
	background:var(--hb-pink);color:#fff;font-weight:800;font-size:.8rem;
	padding:.4em .9em;border-radius:var(--hb-r-pill);white-space:nowrap;
}
.hush-bundle__promo-text{color:var(--hb-ink);font-weight:600;font-size:.92rem}

/* ---- Layout: slots + sticky summary ---- */
.hush-bundle__form{display:grid;grid-template-columns:1fr 340px;gap:1.6rem;align-items:start;margin:0}
.hush-bundle__slots{display:flex;flex-direction:column;gap:1.2rem;min-width:0}

/* ---- Slot ---- */
.hush-bundle-slot{
	background:var(--hb-card);border:1px solid var(--hb-line);
	border-radius:var(--hb-r-lg);padding:1.2rem;transition:border-color .3s var(--hb-ease),box-shadow .3s var(--hb-ease);
}
.hush-bundle-slot.is-complete{border-color:var(--hb-blue);box-shadow:0 0 0 3px var(--hb-blue-050)}
.hush-bundle-slot__head{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.hush-bundle-slot__step{
	width:30px;height:30px;flex:none;border-radius:50%;background:var(--hb-ink);color:#fff;
	display:grid;place-items:center;font-weight:800;font-size:.85rem;transition:background .3s;
}
.hush-bundle-slot.is-complete .hush-bundle-slot__step{background:var(--hb-blue)}
.hush-bundle-slot__title{font-family:var(--hb-font-disp);font-size:1.15rem;color:var(--hb-ink);margin:0;flex:1;line-height:1.2}
.hush-bundle-slot__status{
	font-size:.72rem;font-weight:800;color:var(--hb-green);text-transform:uppercase;letter-spacing:.04em;
	display:inline-flex;align-items:center;gap:.3rem;
}
.hush-bundle-slot__status:not(:empty)::before{content:"✓";font-size:.9rem}

/* ---- Options grid ---- */
.hush-bundle-slot__options{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.hush-bundle-option{
	position:relative;display:flex;flex-direction:column;cursor:pointer;
	border:1.5px solid var(--hb-line-2);border-radius:var(--hb-r-md);overflow:hidden;background:#fff;
	transition:transform .28s var(--hb-ease),border-color .28s,box-shadow .28s;
}
.hush-bundle-option:hover{transform:translateY(-3px);box-shadow:var(--hb-shadow-md);border-color:var(--hb-blue)}
.hush-bundle-option__input{position:absolute;opacity:0;pointer-events:none}
.hush-bundle-option__media{position:relative;aspect-ratio:1/1;background:var(--hb-pink-050);overflow:hidden}
.hush-bundle-option__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--hb-ease)}
.hush-bundle-option:hover .hush-bundle-option__media img{transform:scale(1.06)}
.hush-bundle-option__check{
	position:absolute;top:.5rem;inset-inline-end:.5rem;width:24px;height:24px;border-radius:50%;
	background:#fff;border:2px solid var(--hb-line-2);display:grid;place-items:center;transition:all .25s var(--hb-ease);
}
.hush-bundle-option__check::after{content:"";width:9px;height:9px;border-radius:50%;background:transparent;transition:background .25s}
.hush-bundle-option__info{padding:.7rem .8rem .85rem;display:flex;flex-direction:column;gap:.2rem;flex:1}
.hush-bundle-option__name{font-weight:700;font-size:.82rem;color:var(--hb-ink);line-height:1.3}
.hush-bundle-option__price{font-size:.82rem;color:var(--hb-muted);margin-top:auto;padding-top:.5rem}
.hush-bundle-option__price ins{text-decoration:none;color:var(--hb-pink);font-weight:700}
.hush-bundle-option__price del{color:var(--hb-muted);margin-inline-end:.25rem}
.hush-bundle-option__scent{font-size:.72rem;color:var(--hb-ink-soft,#4a4364);line-height:1.35;margin-top:.35rem;
  padding-top:.4rem;border-top:1px solid var(--hb-line)}
.hush-bundle-option__scent-k{font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  font-size:.62rem;color:var(--hb-blue,#0554ff)}

/* selected state */
.hush-bundle-option.is-selected{border-color:var(--hb-blue);box-shadow:0 0 0 3px var(--hb-blue-050)}
.hush-bundle-option.is-selected .hush-bundle-option__check{background:var(--hb-blue);border-color:var(--hb-blue)}
.hush-bundle-option.is-selected .hush-bundle-option__check::after{background:#fff}
.hush-bundle-option.just-picked{animation:hb-pop .38s var(--hb-ease)}
@keyframes hb-pop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}

/* ---- Summary ---- */
.hush-bundle__summary{position:sticky;top:90px}
.hush-bundle__summary-inner{
	background:var(--hb-card);border:1px solid var(--hb-line);border-radius:var(--hb-r-lg);
	padding:1.4rem;box-shadow:var(--hb-shadow-sm);
}
.hush-bundle__summary-title{font-family:var(--hb-font-disp);font-size:1.2rem;color:var(--hb-ink);margin:0 0 1rem}
.hush-bundle__summary-list{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.6rem;max-height:230px;overflow:auto}
.hush-bundle__summary-item{display:flex;align-items:center;gap:.6rem;font-size:.85rem}
.hush-bundle__summary-item img{width:40px;height:40px;border-radius:var(--hb-r-sm);object-fit:cover;flex:none}
.hush-bundle__summary-name{flex:1;color:var(--hb-ink);font-weight:600;line-height:1.2}
.hush-bundle__summary-price{color:var(--hb-muted);font-weight:600}

.hush-bundle__summary-totals{border-top:1px solid var(--hb-line);padding-top:1rem;display:flex;flex-direction:column;gap:.5rem}
.hush-bundle__row{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--hb-ink-soft)}
.hush-bundle__row--save{color:var(--hb-green);font-weight:700}
.hush-bundle__row--save .hush-bundle__save::before{content:"−"}
.hush-bundle__row--total{font-size:1.15rem;font-weight:800;color:var(--hb-ink);border-top:1px dashed var(--hb-line);padding-top:.7rem;margin-top:.2rem}
.hush-bundle__row--total .hush-bundle__total{font-family:var(--hb-font-disp)}

.hush-bundle__add{
	width:100%;margin-top:1.1rem;border:none;cursor:pointer;
	background:var(--hb-blue);color:#fff;font-weight:800;font-size:.98rem;
	border-radius:var(--hb-r-pill);padding:1em 1.4em;transition:all .3s var(--hb-ease);
	box-shadow:0 8px 20px rgba(5,84,255,.28);
}
.hush-bundle__add:hover:not(:disabled){background:var(--hb-blue-600);transform:translateY(-2px)}
.hush-bundle__add:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.hush-bundle__add.is-ready{animation:hb-ready .4s var(--hb-ease)}
@keyframes hb-ready{0%{transform:scale(.98)}100%{transform:scale(1)}}
.hush-bundle__hint{margin:.8rem 0 0;font-size:.78rem;color:var(--hb-muted);text-align:center}

/* ---- Cart line "includes" ---- */
.hush-bundle-includes{display:block;color:var(--hb-muted, #8b869b);font-size:.85em}
.hush-bundle-includes small{opacity:.8}

/* ---- Responsive ---- */
@media (max-width:900px){
	.hush-bundle__form{grid-template-columns:1fr}
	.hush-bundle__summary{position:static;order:2}
	.hush-bundle__slots{order:1}
	.hush-bundle__summary-inner{
		position:sticky;bottom:0;box-shadow:0 -10px 30px rgba(28,19,64,.1);
	}
}
@media (max-width:480px){
	.hush-bundle-slot__options{grid-template-columns:1fr 1fr}
}

/* ---- RTL ---- */
[dir="rtl"] .hush-bundle__row--save .hush-bundle__save::before{content:"−"}