/* ============================================================
   LUNARA DESIGN SYSTEM — "Soft Boutique" (final direction)
   Shared by retail + B2B pages. Fonts: Lora (display) + Nunito (UI)
   ============================================================ */
:root{
  --bg:#fdf9f4;          /* warm cream canvas */
  --card:#ffffff;
  --ink:#3a332d;         /* warm charcoal text */
  --mut:#8b8177;         /* muted text */
  --plum:#7c5a6e;        /* primary brand */
  --plum-d:#5f4456;      /* primary hover */
  --rose:#e9cbc5;        /* soft accent */
  --rose-d:#c98d84;
  --sage:#b7c3ac;
  --gold:#c9a96a;
  --line:#eee4d8;
  --ok:#5da571;--warn:#d99a3d;--bad:#cf6a6a;
  --r-lg:28px;--r-md:20px;--r-sm:12px;--r-pill:999px;
  --sh-sm:0 4px 14px rgba(58,51,45,.07);
  --sh-md:0 10px 30px rgba(58,51,45,.10);
  --sh-lg:0 22px 55px rgba(124,90,110,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
.serif{font-family:'Lora',serif}
img{display:block}

/* ---------- announcement bar ---------- */
.bar{text-align:center;font-size:13px;font-weight:600;padding:10px 16px;background:var(--plum);color:#fff}
.bar.b2b{background:var(--ink)}
.bar b{color:var(--rose)}

/* ---------- header ---------- */
header.site{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 44px;position:sticky;top:0;background:rgba(253,249,244,.94);backdrop-filter:blur(8px);z-index:50;border-bottom:1px solid var(--line)}
.logo{font-family:'Lora',serif;font-size:25px;color:var(--plum);text-decoration:none;white-space:nowrap}
.logo .tag{display:block;font-family:'Nunito';font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--mut);margin-top:1px}
nav.main{display:flex;gap:26px}
nav.main a{color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:700;padding:6px 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a.on{color:var(--plum);border-bottom-color:var(--rose-d)}
.hdr-actions{display:flex;gap:10px;align-items:center}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;text-decoration:none;color:var(--ink);font-size:16px}
.icon-btn:hover{border-color:var(--plum);color:var(--plum)}
.pill-btn{background:var(--plum);color:#fff;padding:10px 22px;border-radius:var(--r-pill);text-decoration:none;font-weight:800;font-size:14px}
.pill-btn:hover{background:var(--plum-d)}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--plum);color:#fff;padding:15px 34px;border-radius:var(--r-pill);text-decoration:none;font-weight:800;font-size:15px;border:2px solid var(--plum);box-shadow:var(--sh-md);transition:.25s;cursor:pointer;font-family:'Nunito'}
.btn:hover{background:var(--plum-d);border-color:var(--plum-d);transform:translateY(-2px)}
.btn.ghost{background:#fff;color:var(--plum);box-shadow:none}
.btn.ghost:hover{background:var(--rose);border-color:var(--rose);color:var(--ink)}
.btn.sm{padding:9px 20px;font-size:13px;box-shadow:none}
.btn.rose{background:var(--rose-d);border-color:var(--rose-d)}
.btn.block{display:block;text-align:center;width:100%}

/* ---------- badges & chips ---------- */
.badge{background:#fff;border-radius:var(--r-pill);padding:11px 22px;font-size:13px;font-weight:700;box-shadow:var(--sh-sm)}
.chip{display:inline-block;font-size:12.5px;padding:7px 16px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:#fff;font-weight:700;cursor:pointer;color:var(--ink)}
.chip.on{background:var(--plum);border-color:var(--plum);color:#fff}
.chip:hover:not(.on){border-color:var(--plum)}
.tag-soft{display:inline-block;font-size:11.5px;font-weight:800;padding:5px 13px;border-radius:var(--r-pill);background:var(--rose);color:#6d4038}
.tag-soft.sage{background:#dfe7d7;color:#4c5c40}
.tag-soft.gold{background:#f0e3c8;color:#7a5c22}

/* ---------- section scaffolding ---------- */
section.pad{padding:64px 44px}
.sec-head{text-align:center;margin-bottom:38px}
.sec-head h2{font-family:'Lora',serif;font-size:36px;color:var(--plum);font-weight:500}
.sec-head p{color:var(--mut);margin-top:8px;font-size:15px}
.sec-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px}
.sec-row h2{font-family:'Lora',serif;font-size:30px;color:var(--plum);font-weight:500}
.sec-row a{color:var(--rose-d);font-weight:800;text-decoration:none;font-size:14px}

/* ---------- product card ---------- */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.prod{background:var(--card);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);transition:.3s;position:relative}
.prod:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.prod .ph{height:300px;overflow:hidden;position:relative;background:#f2ebe1}
.prod .ph img{width:100%;height:100%;object-fit:cover;object-position:top}
.prod .flag{position:absolute;top:14px;left:14px}
.prod .info{padding:16px 18px 20px}
.prod h3{font-size:15.5px;font-weight:800}
.prod h3 a{color:var(--ink);text-decoration:none}
.prod .fab{font-size:12.5px;color:var(--mut);margin:3px 0 8px}
.prod .row{display:flex;justify-content:space-between;align-items:center}
.prod .pr{font-weight:800;color:var(--plum);font-size:16.5px}
.prod .pr s{color:var(--mut);font-weight:400;font-size:13px;margin-right:6px}
.sw-row{display:flex;gap:6px;margin-top:10px}
.sw{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer}
.sw.on{box-shadow:0 0 0 2px var(--plum)}

/* ---------- forms ---------- */
label.f{display:block;font-size:13px;font-weight:800;margin:16px 0 6px;color:var(--ink)}
input.f,select.f,textarea.f{width:100%;padding:13px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:#fff;font-family:'Nunito';font-size:14.5px;color:var(--ink)}
input.f:focus,select.f:focus,textarea.f:focus{outline:none;border-color:var(--plum)}

/* ---------- qty stepper ---------- */
.qty{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:var(--r-pill);background:#fff;overflow:hidden}
.qty button{width:38px;height:38px;border:none;background:none;font-size:17px;cursor:pointer;color:var(--plum);font-weight:800;font-family:'Nunito'}
.qty button:hover{background:var(--rose)}
.qty input{width:56px;text-align:center;border:none;font-family:'Nunito';font-weight:800;font-size:15px;color:var(--ink)}
.qty input:focus{outline:none}

/* ---------- tables (B2B/admin) ---------- */
table.soft{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm)}
table.soft th{text-align:left;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding:14px 16px;border-bottom:1.5px solid var(--line);background:#fbf6ee}
table.soft td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
table.soft tr:last-child td{border-bottom:none}
table.soft tr:hover td{background:#fdf8f1}

/* ---------- status pills ---------- */
.st{display:inline-block;padding:4px 13px;border-radius:var(--r-pill);font-size:12px;font-weight:800}
.st.ok{background:#e2efe4;color:#3c7a4e}
.st.warn{background:#f7ead2;color:#93672a}
.st.bad{background:#f6dede;color:#a04747}
.st.info{background:#e6e0ea;color:var(--plum)}

/* ---------- footer ---------- */
footer.site{background:#fff;border-top:1px solid var(--line);padding:52px 44px 36px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;font-size:14px;color:var(--mut)}
footer.site h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--plum);margin-bottom:14px}
footer.site a{display:block;color:var(--mut);text-decoration:none;margin-bottom:9px}
footer.site a:hover{color:var(--plum)}
.foot-note{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;font-size:12.5px}

/* ---------- demo tag ---------- */
.demo-tag{position:fixed;bottom:16px;right:16px;background:var(--plum);color:#fff;padding:8px 15px;font-size:11.5px;letter-spacing:.14em;z-index:99;border-radius:var(--r-pill);font-weight:800;box-shadow:var(--sh-md)}