:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --primary:#2563eb;
  --primaryText:#ffffff;
  --shadow:0 10px 30px rgba(2,6,23,.06);
  --radius:18px;
  --radius2:14px;
  --cardImgFit: cover;
  --bannerImgFit: cover;
}
[data-theme="warm"]{ --bg:#fbf7f3; --primary:#b45309; }
[data-theme="emerald"]{ --bg:#f2fbf7; --primary:#059669; }
[data-theme="mono"]{ --bg:#0b1220; --card:#111827; --text:#e5e7eb; --muted:#94a3b8; --border:#1f2937; --primary:#f59e0b; --primaryText:#111827; --shadow:none; }

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
[data-theme="mono"] .top{background:#0b1220}
.top__in{display:flex;align-items:center;gap:14px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{height:34px;max-width:160px;object-fit:contain}
.brand__text{font-weight:800;letter-spacing:.2px}
.nav{display:flex;gap:12px;flex-wrap:wrap}
.nav a{padding:8px 10px;border-radius:12px;color:var(--muted)}
.nav a:hover{background:rgba(2,6,23,.04);color:var(--text)}
[data-theme="mono"] .nav a:hover{background:#111827}
.cartbtn{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;background:var(--primary);color:var(--primaryText);font-size:12px;padding:0 6px}

.h1{font-size:28px;margin:12px 0 6px}
.h2{font-size:18px;margin:0 0 10px}
.p{padding:14px}
.small{font-size:12px}
.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:var(--card);cursor:pointer}
.btn.primary{background:var(--primary);border-color:transparent;color:var(--primaryText)}
.btn.smallbtn{padding:8px 10px;border-radius:12px;font-size:13px}
.search{width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:var(--card);color:var(--text)}
.toolbar{display:flex;gap:10px;align-items:center}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
@media (max-width:860px){
  .nav{display:none}
  .grid{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:520px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .toolbar{flex-direction:column;align-items:stretch}
}
.vlist a{display:block;padding:8px 0;color:var(--muted)}
.vlist a:hover{color:var(--text)}
.crumbs{color:var(--muted);margin:8px 0}

.cat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:14px}
.cat__name{font-weight:700}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pitem{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius2);overflow:hidden;background:var(--card);box-shadow:0 8px 18px rgba(2,6,23,.05)}
.pitem__img{width:100%;height:170px;object-fit:var(--cardImgFit);display:block;background:#e5e7eb}
.pitem__body{padding:12px;display:flex;flex-direction:column;gap:6px}
.pitem__title{font-weight:700}
.pitem__price{margin-top:auto}
.old{color:var(--muted);text-decoration:line-through;margin-left:8px}

.plist{display:flex;flex-direction:column;gap:10px}
.plist .pitem{flex-direction:row;grid-column:auto}
.plist .pitem__img{width:170px;height:120px;flex:0 0 170px;object-fit:var(--cardImgFit)}

/* product */
.prod{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;margin-top:12px}
@media (max-width:860px){ .prod{grid-template-columns:1fr} }
.imgframe{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.prod__img{width:100%;height:360px;object-fit:contain;display:block;background:#f1f5f9}
@media (max-width:520px){ .prod__img{height:260px} }
.price{display:flex;align-items:center;gap:10px;margin:8px 0 10px}
.opt{display:flex;gap:10px;align-items:flex-start;margin:8px 0}

/* slider */
.slider-wrap{border-radius:var(--radius);overflow:hidden}
.slider{display:flex;will-change:transform;transition:transform 600ms ease;gap:0}
.slide{flex:0 0 100%;position:relative;display:block}
.slide img{width:100%;height:260px;object-fit:var(--bannerImgFit);display:block;background:#e5e7eb}
.slide__title{position:absolute;left:14px;bottom:14px;background:rgba(15,23,42,.6);color:#fff;padding:8px 10px;border-radius:14px;font-weight:600;max-width:calc(100% - 28px)}
@media (max-width:520px){ .slide img{height:180px} }

/* cart */
.tablewrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left;vertical-align:top}
.cartbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.cartbar__btns{display:flex;gap:10px;flex-wrap:wrap}

/* footer */
.footer{margin-top:20px;padding:14px 0;border-top:1px solid var(--border);background:rgba(255,255,255,.6)}
[data-theme="mono"] .footer{background:#0b1220}
.footer__in{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* template variations */
[data-template="shop"] .pitem__img{height:190px}
.shopgrid .shopcard{border:1px solid var(--border);border-radius:var(--radius2);overflow:hidden;background:var(--card);box-shadow:0 10px 24px rgba(2,6,23,.06)}
.shopcard__img img{width:100%;height:190px;object-fit:cover;display:block;background:#e5e7eb}
.shopcard__body{padding:12px;display:flex;flex-direction:column;gap:8px}
.shopcard__title{font-weight:800}
.shopcard__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shopcard__price{font-weight:800}

.svclist{display:flex;flex-direction:column;gap:10px}
.svcitem{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:var(--radius2);padding:14px;background:var(--card)}
.svcitem__title{font-weight:800}
.svcitem__price{font-weight:900}
.svcitem__cta{color:var(--muted);font-size:13px;margin-top:6px}

/* mobile burger */
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;border:1px solid var(--border);background:var(--card)}
.burger svg{width:20px;height:20px}
.drawer{position:fixed;inset:0;display:none;z-index:80}
.drawer__bg{position:absolute;inset:0;background:rgba(2,6,23,.55)}
.drawer__panel{position:absolute;right:0;top:0;height:100%;width:min(86vw,360px);background:var(--card);border-left:1px solid var(--border);padding:16px;box-shadow:var(--shadow);transform:translateX(100%);transition:transform 220ms ease}
.drawer--open{display:block}
.drawer--open .drawer__panel{transform:translateX(0)}
.drawer a{display:block;padding:10px 10px;border-radius:12px;color:var(--text)}
.drawer a:hover{background:rgba(2,6,23,.04)}
.drawer .muted{margin:12px 10px 6px}
@media (max-width:860px){
  .burger{display:inline-flex}
  .nav{display:none}
}

/* product badges */
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badgechip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--border);background:rgba(255,255,255,.7)}
[data-theme="mono"] .badgechip{background:#0b1220}
.badgechip.new{border-color:rgba(16,185,129,.35)}
.badgechip.pop{border-color:rgba(245,158,11,.35)}
.pitem__badges{position:absolute;left:10px;top:10px;display:flex;gap:8px;flex-wrap:wrap}
.pitem{position:relative}
.pitem__tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;background:rgba(15,23,42,.65);color:#fff}

/* badge banner style */
.badgeBanner{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  font-size:12px;font-weight:700;color:#0b1220;background:rgba(255,255,255,.85);
  border:1px solid rgba(226,232,240,.9);box-shadow:0 10px 22px rgba(2,6,23,.10);
  backdrop-filter: blur(6px);
}
.badgeBanner.new{background:linear-gradient(135deg, rgba(16,185,129,.18), rgba(255,255,255,.86));}
.badgeBanner.pop{background:linear-gradient(135deg, rgba(245,158,11,.20), rgba(255,255,255,.86));}
.badgeStack{position:absolute;left:10px;top:10px;display:flex;gap:8px;flex-wrap:wrap;z-index:2}


/* category cards like facade decor catalog */
.category-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;align-items:stretch}
.category-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease;min-width:0}
.category-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(2,6,23,.08)}
.category-card__imgwrap{position:relative;width:100%;height:220px;max-height:220px;background:#eef2f7;overflow:hidden;flex:0 0 220px}
.category-card__img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover;object-position:center}
.category-card__body{padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.category-card__title{font-weight:800;font-size:17px;line-height:1.25;word-break:break-word}
.category-card__desc{color:var(--muted);font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.category-card__meta{margin-top:auto;font-size:13px;color:var(--muted)}
.category-hero{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1.1fr);overflow:hidden;align-items:stretch}
.category-hero__media{position:relative;min-width:0;max-height:320px;overflow:hidden;background:#eef2f7}
.category-hero__media img{display:block;width:100%;height:100%;min-height:320px;max-height:320px;max-width:100%;object-fit:cover;object-position:center;background:#eef2f7}
.category-hero__body{padding:22px;display:flex;flex-direction:column;justify-content:center;min-width:0}
@media (max-width:860px){
  .category-hero{grid-template-columns:1fr}
  .category-card__imgwrap{height:180px;max-height:180px;flex-basis:180px}
  .category-hero__media{max-height:220px}
  .category-hero__media img{min-height:220px;max-height:220px}
}

/* safety guard for category images */
img.category-card__img,
.category-hero__media img{
  contain: content;
}