/* =========================================================
   ALUME CANDLE — SIGNATURE UI v2
   Premium pastel + symmetric layout + motion-first
   No Tailwind. Full custom CSS.
   ========================================================= */

:root{
    --bg: #fbfbfd;
    --ink: #0f1016;
    --muted: rgba(15,16,22,.66);

    --glass: rgba(255,255,255,.72);
    --glass2: rgba(255,255,255,.55);
    --stroke: rgba(15,16,22,.10);

    --mint:  #cfeee4;
    --lilac: #eadcff;
    --peach: #ffe1d8;
    --sand:  #fff3dc;

    --accent:  #221a32;
    --accent2: #146a56;

    --shadow: 0 22px 70px rgba(15,16,22,.10);
    --shadow2: 0 12px 34px rgba(15,16,22,.10);

    --r2: 26px;
    --r:  18px;
    --r1: 14px;

    --container: min(1200px, calc(100% - 40px));

    --h1: clamp(36px, 5vw, 66px);
    --h2: clamp(26px, 3.2vw, 38px);
    --p: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: Manrope, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--ink);
    background:
            radial-gradient(1200px 900px at 14% 10%, var(--mint), transparent 56%),
            radial-gradient(1100px 800px at 88% 16%, var(--lilac), transparent 54%),
            radial-gradient(1000px 800px at 84% 88%, var(--peach), transparent 55%),
            radial-gradient(900px 700px at 14% 86%, var(--sand), transparent 55%),
            var(--bg);
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.container{width:var(--container); margin:0 auto}
::selection{background: rgba(207,238,228,.85)}

/* ---------------- Topbar ---------------- */
.topbar{
    position:sticky; top:0; z-index:100;
    background: rgba(251,251,253,.72);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--stroke);
}
.topbar__inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; padding:14px 0;
}
.brand{
    display:flex; align-items:center; gap:10px;
    font-weight:900; letter-spacing:.2px;
}
.brand__mark{
    width:42px; height:42px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(207,238,228,.95), rgba(234,220,255,.95));
    box-shadow: 0 16px 34px rgba(15,16,22,.12);
    position:relative; overflow:hidden;
}
.brand__mark:before{
    content:"";
    position:absolute; inset:-65%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.88), transparent 60%);
    animation: shimmer 5.6s ease-in-out infinite;
}
@keyframes shimmer{
    0%{transform:translate3d(-12%,-10%,0) rotate(0deg)}
    50%{transform:translate3d(14%,10%,0) rotate(12deg)}
    100%{transform:translate3d(-12%,-10%,0) rotate(0deg)}
}

.nav{
    display:flex; align-items:center; gap:10px;
}
.nav__links{
    display:flex; align-items:center; gap:6px;
    font-size:14px; color:var(--muted);
}
.nav__links a{
    padding:10px 12px;
    border-radius: 12px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav__links a:hover{
    background: rgba(255,255,255,.76);
    color:var(--ink);
    transform: translateY(-1px);
}

/* ---------------- Buttons / chips ---------------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.80);
    box-shadow: var(--shadow2);
    font-weight: 800;
    cursor:pointer; user-select:none;
    transition: transform .15s ease, filter .15s ease, background .2s ease;
}
.btn:hover{filter: brightness(1.02)}
.btn:active{transform: translateY(1px)}
.btn--primary{
    background: linear-gradient(135deg, rgba(34,26,50,.96), rgba(20,106,86,.92));
    color:#fff;
    border-color: rgba(255,255,255,.18);
}
.btn--soft{ background: rgba(255,255,255,.60); }
.btn--icon{ width:46px; height:46px; padding:0; }

.chip{
    display:inline-flex; align-items:center; gap:8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.66);
    border: 1px solid var(--stroke);
    color: var(--muted);
    font-size: 13px;
}
.dot{
    width:8px; height:8px; border-radius:99px;
    background: linear-gradient(135deg, var(--mint), var(--lilac));
    box-shadow: 0 10px 20px rgba(15,16,22,.12);
}

/* ---------------- Sections / typography ---------------- */
.section{ padding: 46px 0; }
.card{
    background: var(--glass);
    border: 1px solid var(--stroke);
    border-radius: var(--r2);
    box-shadow: var(--shadow);
}
.card--pad{ padding: 24px; }

.h1{
    font-family: "Fraunces", "Playfair Display", Georgia, serif;
    font-size: var(--h1);
    line-height: 1.04;
    letter-spacing: -0.25px;
}
.h2{
    font-family: "Fraunces", "Playfair Display", Georgia, serif;
    font-size: var(--h2);
    letter-spacing: -0.12px;
}
.p{
    font-size: var(--p);
    line-height: 1.78;
    color: var(--muted);
}
.hr{ height:1px; background: rgba(15,16,22,.08); margin: 18px 0; }

.grid{ display:grid; gap: 14px; }
.grid--sym{ grid-template-columns: 1.05fr .95fr; align-items: stretch; }
.grid--2{ grid-template-columns: 1fr 1fr; }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.stack{ display:flex; flex-direction:column; gap: 12px; }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ---------------- Hero ---------------- */
.hero{ padding: 34px 0 10px; }
.hero__left{ padding: 26px; }
.hero__actions{ display:flex; gap: 12px; flex-wrap:wrap; }
.hero__pills{ display:flex; gap:10px; flex-wrap:wrap; }

.hero__right{ position:relative; overflow:hidden; padding:0; }
.art{ position:relative; height:100%; min-height: 440px; }
.art__glow{
    position:absolute; inset:-30%;
    background:
            radial-gradient(circle at 22% 18%, rgba(207,238,228,.92), transparent 55%),
            radial-gradient(circle at 72% 18%, rgba(234,220,255,.92), transparent 52%),
            radial-gradient(circle at 60% 78%, rgba(255,225,216,.90), transparent 55%);
    filter: blur(18px);
    animation: floaty 10s ease-in-out infinite;
}
@keyframes floaty{
    0%{transform: translate3d(0,0,0) scale(1)}
    50%{transform: translate3d(12px,-14px,0) scale(1.02)}
    100%{transform: translate3d(0,0,0) scale(1)}
}
.art svg{
    position:absolute; inset:0;
    width:100%; height:100%;
    padding: 18px;
    opacity: .98;
}
[data-parallax]{ transform: translate3d(var(--px,0px), var(--py,0px), 0); }

/* ---------------- Tiles ---------------- */
.tile{
    border-radius: var(--r);
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.65);
    padding: 18px;
    transition: transform .18s ease, background .2s ease;
}
.tile:hover{
    transform: translateY(-3px);
    background: rgba(255,255,255,.78);
}
.tile__title{ font-weight: 900; letter-spacing:.1px; }
.tile__p{ margin-top: 8px; color: var(--muted); line-height:1.7; font-size: 14px; }
.tile__cta{ margin-top: 12px; display:flex; justify-content:space-between; align-items:center; gap:10px; }

.iconBadge{
    width: 44px; height: 44px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,225,216,.80), rgba(234,220,255,.80));
    border: 1px solid rgba(15,16,22,.10);
    box-shadow: 0 14px 28px rgba(15,16,22,.10);
    display:flex; align-items:center; justify-content:center;
}
.iconBadge svg{ width: 22px; height: 22px; opacity: .9; }

/* ---------------- Forms ---------------- */
.form{ display:flex; gap:10px; flex-wrap:wrap; }
.input{
    flex: 1 1 260px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.82);
    outline:none;
}
.input:focus{ box-shadow: 0 0 0 4px rgba(207,238,228,.55); }
.toast{ margin-top: 10px; font-size: 14px; color: var(--muted); }

/* ---------------- Reveal ---------------- */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .75s ease, transform .75s ease; }
.reveal.show{ opacity:1; transform:none; }

/* ---------------- Footer ---------------- */
.footer{ padding: 18px 0 36px; }
.footer__inner{ border-top: 1px solid var(--stroke); padding-top: 18px; }
.footerGrid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }
.footerLinks{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 14px; color: var(--muted); }
.footerLinks a{
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15,16,22,.08);
    background: rgba(255,255,255,.55);
}
.footerLinks a:hover{ background: rgba(255,255,255,.74); color: var(--ink); }

/* ---------------- CART MODAL ---------------- */
.modal{
    position:fixed; inset:0;
    display:none;
    z-index: 200;
}
.modal.show{ display:block; }
.modal__backdrop{
    position:absolute; inset:0;
    background: rgba(10,10,14,.36);
    backdrop-filter: blur(6px);
    animation: fadeIn .18s ease both;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.modal__panel{
    position:absolute;
    top: 16px; right: 16px;
    width: min(520px, calc(100% - 32px));
    height: calc(100% - 32px);
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(15,16,22,.12);
    border-radius: 22px;
    box-shadow: 0 30px 90px rgba(15,16,22,.18);
    overflow:hidden;
    animation: slideIn .22s ease both;
}
@keyframes slideIn{
    from{ transform: translateX(14px); opacity:.65 }
    to{ transform:none; opacity:1 }
}
.modal__head{
    padding: 16px;
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    border-bottom: 1px solid rgba(15,16,22,.10);
    background: rgba(255,255,255,.70);
}
.modal__title{ font-weight: 900; }
.modal__body{
    padding: 14px 16px;
    height: calc(100% - 140px);
    overflow:auto;
}
.cartItem{
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(15,16,22,.10);
    background: rgba(255,255,255,.66);
    display:grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 10px;
}
.cartItem__name{ font-weight: 900; }
.cartItem__meta{ color: var(--muted); font-size: 13px; margin-top: 4px; }
.cartItem__actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.qty{
    width: 84px;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(15,16,22,.12);
    background: rgba(255,255,255,.80);
    outline:none;
    font-weight: 800;
}
.modal__foot{
    padding: 14px 16px;
    border-top: 1px solid rgba(15,16,22,.10);
    background: rgba(255,255,255,.70);
}
.totalRow{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    margin-bottom: 10px;
}
.totalRow strong{ font-size: 16px; }
.smallMuted{ color: var(--muted); font-size: 13px; }

/* ---------------- Mobile ---------------- */
.burger{ display:none; }
.drawer{ display:none; }

@media (max-width: 980px){
    .grid--sym{ grid-template-columns: 1fr; }
    .grid--3{ grid-template-columns: 1fr; }
    .grid--2{ grid-template-columns: 1fr; }

    .nav__links{ display:none; }
    .burger{ display:inline-flex; }
    .drawer{ display:block; padding-bottom: 12px; }
    .drawer .card{ padding: 12px; border-radius: var(--r); }

    .art{ min-height: 360px; }
    .footerGrid{ grid-template-columns: 1fr; }
}