:root{
  --bg:#f7f8fb;
  --glass:#ffffffcc;
  --ink:#0f172a;
  --muted:#6b7280;
  --brand:#ec4899;    /* pink */
  --brand-2:#db2777;
  --accent:#10b981;   /* green */
  --line:#e5e7eb;
}
html,body{height:100%}
body{font-family: Inter, system-ui, -apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg)}

/* Top glass nav + 2-level megamenu */
.nav-glass{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.75); backdrop-filter: blur(8px); border-bottom:1px solid var(--line)}
.brand{font-weight:800; letter-spacing:.3px; color:#be185d}
.catbar{display:flex; gap:1rem; flex-wrap:wrap}
.catbar details{position:relative}
.catbar summary{list-style:none; cursor:pointer; padding:.5rem .75rem; border-radius:.75rem; color:#6b7280; font-weight:600}
.catbar summary::-webkit-details-marker{display:none}
.catbar details[open] summary{background:#fff0f6; color:#9d174d; border:1px solid #fecdd3}
.catbar .panel{
  position:absolute; left:0; top:100%; z-index:30; min-width:340px;
  background:#fff; border:1px solid var(--line); border-radius:1rem; padding:.75rem;
  box-shadow:0 18px 40px rgba(2,6,23,.12);
}
.catbar .panel .group{display:grid; grid-template-columns: 1fr 1fr; gap:.25rem .75rem}
.catbar .panel a{display:block; padding:.35rem .5rem; border-radius:.5rem; color:#111827}
.catbar .panel a:hover{background:#fff1f2; color:#9f1239}

/* Hero */
.hero{
  background: radial-gradient(800px 360px at 10% -10%, rgba(236,72,153,.18), transparent),
              radial-gradient(700px 360px at 90% -10%, rgba(16,185,129,.18), transparent);
  min-height:44vh; display:flex; align-items:center;
}
.btn-brand{background:var(--brand); border-color:var(--brand); color:#fff; border-radius:999px; padding:.6rem 1.1rem}
.btn-brand:hover{background:var(--brand-2); border-color:var(--brand-2); color:#fff}
.btn-ghost{background:#fff; border:1px solid var(--line); color:#111827; border-radius:999px; padding:.6rem 1.1rem}

/* Product cards */
.card-product{background:#fff; border:1px solid var(--line); border-radius:1rem; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease}
.card-product:hover{transform:translateY(-3px); box-shadow:0 12px 24px rgba(2,6,23,.08)}
.card-product .thumb{aspect-ratio: 4/3; background:#e2e8f0 center/cover no-repeat; border-bottom:1px solid var(--line)}
.badge-soft{background:#fff0f3; color:#9d174d; border:1px solid #fecdd3}
.badge-green{background:#ecfeff; color:#047857; border:1px solid #a7f3d0}
.grid-tiles{display:grid; gap:1.25rem; grid-template-columns: repeat(1,minmax(0,1fr))}
@media (min-width:576px){.grid-tiles{grid-template-columns: repeat(2,minmax(0,1fr))}}
@media (min-width:992px){.grid-tiles{grid-template-columns: repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.grid-tiles{grid-template-columns: repeat(4,minmax(0,1fr))}}

/* Sidebar 2-level category tree */
.cat-tree{background:#fff; border:1px solid var(--line); border-radius:1rem}
.cat-tree details{border-top:1px dashed #e5e7eb}
.cat-tree details:first-child{border-top:0}
.cat-tree summary{cursor:pointer; list-style:none; padding:.6rem .9rem; font-weight:600; color:#9d174d}
.cat-tree summary::-webkit-details-marker{display:none}
.cat-tree .children{padding:.25rem .75rem 1rem}
.cat-tree .children a{display:block; padding:.25rem .5rem; border-radius:.5rem; color:#111827}
.cat-tree .children a.active{background:#fff1f2; color:#9d174d; font-weight:600}

/* Table cart */
.table-cart img{width:72px; height:54px; object-fit:cover; border-radius:.5rem; border:1px solid var(--line)}
.table-cart th, .table-cart td{vertical-align:middle}
.form-control, .form-select{border-radius:.75rem}
footer{background:#0b1220; color:#cbd5e1}
footer a{color:#cbd5e1}
.kit-note{font-size:.875rem; color:var(--muted); background:#fff1f2; border:1px dashed #fecdd3; border-radius:.75rem; padding:.5rem .75rem}