/**
 * Aestheticz Box Builder — box.css
 * Dreamcore Luxe palette with hardcoded fallbacks so it renders
 * correctly even if the theme's --dlx-* vars aren't present on this page.
 */

.abx-wrap,
#abxGrid,
.abx-banner,
.abx-tray{
	--abx-bg:#FFF9FC;
	--abx-card:#FFFFFF;
	--abx-lilac:#B58BFF;
	--abx-lilac-soft:#EAD9FF;
	--abx-pink:#FF7DBA;
	--abx-pink-soft:#FFE6F1;
	--abx-text:#2E2434;
	--abx-text-soft:#6E6178;
	--abx-accent:#7C5CFF;
	--abx-radius:16px;
	--abx-shadow:0 10px 30px -14px rgba(124,92,255,.35);
}
html[data-dlx-theme="dark"] .abx-banner,
html[data-dlx-theme="dark"] #abxGrid,
html[data-dlx-theme="dark"] .abx-tray{
	--abx-card:#1C1824;
	--abx-text:#FFFFFF;
	--abx-text-soft:#BDB3C9;
	--abx-accent:#D7C2FF;
}

/* ── Banner ─────────────────────────────────────────────────── */
.abx-banner{ margin:0 0 1.6rem; border-radius:var(--abx-radius); overflow:hidden; }
.abx-banner--full{
	/* break out to full viewport width even inside a constrained page */
	width:100vw; max-width:100vw;
	margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
	border-radius:0;
}
.abx-banner-link{ display:block; }
.abx-banner-img{ display:block; width:100%; }
.abx-banner-img--natural{ height:auto; }

.abx-banner-fallback{
	background:linear-gradient(135deg, var(--abx-lilac), var(--abx-pink));
	color:#fff; text-align:center;
	padding:2.6rem 1.5rem;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.abx-banner-eyebrow{
	font-family:'Outfit',sans-serif; text-transform:uppercase; letter-spacing:3px;
	font-size:.72rem; font-weight:600; margin:0 0 .5rem; opacity:.9;
}
.abx-banner-heading{
	font-family:'Cormorant Garamond',serif; font-weight:700;
	font-size:clamp(2rem,4vw,3rem); line-height:1.05; margin:0 0 .4rem; color:#fff;
}
.abx-banner-tagline{ font-family:'Poppins',sans-serif; margin:.3rem 0 0; font-size:.95rem; opacity:.95; }

/* ── Grid ───────────────────────────────────────────────────── */
.abx-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
	gap:1.1rem;
	padding-bottom:8rem; /* clearance for the sticky tray */
}
.abx-card{
	background:var(--abx-card);
	border-radius:14px; overflow:hidden;
	box-shadow:var(--abx-shadow);
	border:2px solid transparent;
	transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	display:flex; flex-direction:column;
}
.abx-card:hover{ transform:translateY(-4px); }
.abx-card.abx-selected{ border-color:var(--abx-accent); }
.abx-card-media{ position:relative; aspect-ratio:1; overflow:hidden; }
.abx-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.abx-card-check{
	position:absolute; top:8px; right:8px;
	width:26px; height:26px; border-radius:50%;
	background:var(--abx-accent); color:#fff;
	display:flex; align-items:center; justify-content:center;
	font-size:.85rem; font-weight:700;
	opacity:0; transform:scale(.5); transition:opacity .25s ease, transform .25s ease;
}
.abx-card.abx-selected .abx-card-check{ opacity:1; transform:scale(1); }
.abx-card-body{ padding:.75rem .8rem .9rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.abx-card-name{
	font-family:'Poppins',sans-serif; font-weight:600; font-size:.86rem;
	color:var(--abx-text); margin:0; line-height:1.3;
}
.abx-card-price{ font-family:'Outfit',sans-serif; font-size:.8rem; color:var(--abx-text-soft); margin:0; }
.abx-card-price del{ opacity:.6; margin-right:.3rem; }
.abx-card-btn{
	margin-top:auto;
	width:100%; padding:.55rem; border:1.5px solid var(--abx-pink);
	border-radius:999px; background:transparent; color:var(--abx-pink);
	font-family:'Outfit',sans-serif; font-weight:600; font-size:.78rem; cursor:pointer;
	transition:background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
.abx-card-btn:hover{ background:var(--abx-pink-soft); }
.abx-card.abx-selected .abx-card-btn{
	background:var(--abx-accent); border-color:var(--abx-accent); color:#fff;
}
.abx-card.abx-disabled .abx-card-btn{ opacity:.45; cursor:not-allowed; }
.abx-card.abx-disabled:hover{ transform:none; }

/* ── Sticky tray ────────────────────────────────────────────── */
.abx-tray{
	position:fixed; left:0; right:0; bottom:0; z-index:9990;
	background:var(--abx-card);
	border-top:1px solid rgba(46,36,52,.1);
	box-shadow:0 -10px 30px -14px rgba(124,92,255,.4);
	transform:translateY(100%); transition:transform .35s cubic-bezier(.2,.9,.3,1.1);
}
html[data-dlx-theme="dark"] .abx-tray{ border-top-color:rgba(255,255,255,.12); }
.abx-tray.abx-tray--show{ transform:translateY(0); }
.abx-tray-inner{
	max-width:1200px; margin:0 auto;
	display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
	padding:.9rem 1.2rem;
}
.abx-tray-slots{ display:flex; gap:.5rem; }
.abx-slot{
	width:50px; height:50px; border-radius:10px;
	border:2px dashed rgba(124,92,255,.35);
	display:flex; align-items:center; justify-content:center;
	overflow:hidden; position:relative;
	background:var(--abx-bg);
}
.abx-slot-plus{ color:var(--abx-lilac); font-size:1.4rem; line-height:1; }
.abx-slot.abx-slot--filled{ border-style:solid; border-color:var(--abx-accent); }
.abx-slot img{ width:100%; height:100%; object-fit:cover; }
.abx-slot-remove{
	position:absolute; top:-6px; right:-6px;
	width:20px; height:20px; border-radius:50%;
	background:var(--abx-text); color:#fff; border:0; cursor:pointer;
	font-size:.75rem; line-height:1; display:none; align-items:center; justify-content:center;
}
.abx-slot.abx-slot--filled .abx-slot-remove{ display:flex; }
.abx-tray-meta{ display:flex; flex-direction:column; margin-left:auto; }
.abx-tray-label{ font-family:'Poppins',sans-serif; font-size:.72rem; color:var(--abx-text-soft); }
.abx-tray-price{ font-family:'Outfit',sans-serif; font-size:1.25rem; font-weight:700; color:var(--abx-text); }
.abx-tray-price .amount{ color:inherit; }
.abx-tray-btn{
	padding:.85rem 1.7rem; border:0; border-radius:999px;
	background:linear-gradient(135deg, var(--abx-lilac), var(--abx-pink));
	color:#fff; font-family:'Outfit',sans-serif; font-weight:600; font-size:.85rem;
	cursor:pointer; white-space:nowrap;
	transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.abx-tray-btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 8px 22px -8px rgba(255,125,186,.55); }
.abx-tray-btn:disabled{ background:#C7B8E0; cursor:default; }
html[data-dlx-theme="dark"] .abx-tray-btn:disabled{ background:#3A3348; }

.abx-toast{
	position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px);
	background:var(--abx-text); color:#fff;
	padding:.7rem 1.3rem; border-radius:999px; font-family:'Poppins',sans-serif; font-size:.85rem;
	z-index:9991; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
}
.abx-toast.abx-toast--show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width:600px){
	.abx-grid{ grid-template-columns:repeat(2,1fr); gap:.8rem; }
	.abx-tray-inner{ padding:.7rem .9rem; gap:.7rem; }
	.abx-slot{ width:42px; height:42px; }
	.abx-tray-btn{ padding:.75rem 1.2rem; font-size:.8rem; flex:1; }
	.abx-tray-meta{ margin-left:0; }
}

@media (prefers-reduced-motion: reduce){
	.abx-card,.abx-tray,.abx-card-check,.abx-toast{ transition:none; }
}