:root{
  --bg:#050505;
  --card1:#0e0e0e;
  --card2:#090909;
  --stroke:rgba(255,255,255,.10);
  --muted:rgba(255,255,255,.72);
  --gold:rgba(214,179,106,.92);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#f3f3f3;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:inherit}

.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;
  background:rgba(0,0,0,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
}
.topbar__left,.topbar__right{display:flex;gap:10px;align-items:center}
.pill{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
  color:#fff;
  border-radius:999px;
  padding:10px 14px;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
}
.pill:hover{filter:brightness(1.06)}
.brand{font-weight:900;letter-spacing:.12em}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  border:1px solid rgba(214,179,106,.35);
  background:rgba(214,179,106,.12);
  font-weight:900;font-size:12px;
}

.user__dot{
  width:8px;height:8px;border-radius:999px;
  background:rgba(214,179,106,.75);
  box-shadow:0 0 0 4px rgba(214,179,106,.10);
}
.user__ava{
  width:26px;height:26px;border-radius:10px;object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  display:none;
}
.user__name{font-weight:800;letter-spacing:.02em}

.wrap{max-width:1200px;margin:0 auto;padding:18px}
.card{
  background:linear-gradient(180deg,var(--card1),var(--card2));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:0 20px 90px rgba(0,0,0,.55);
}
.hero{padding:18px}
.hero__title{font-size:44px;font-weight:900;letter-spacing:.02em}
.hero__subtitle{margin-top:8px;color:var(--muted)}
.hero__tags{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.chip{padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.78)}

.filters{margin-top:14px;padding:14px;display:grid;grid-template-columns:1fr 320px auto;gap:12px;align-items:center}
.input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:#fff;
  outline:none;
}
.meta{margin:14px 2px;color:rgba(255,255,255,.70)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:980px){.grid{grid-template-columns:1fr}}
.cardItem{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(circle at 60% 40%, rgba(214,179,106,.14), rgba(0,0,0,0) 55%), linear-gradient(180deg,#0d0d0d,#070707);
  overflow:hidden;
  cursor:pointer;
}
.cardItem:hover{filter:brightness(1.03)}
.cardImg{
  height:220px;display:flex;align-items:center;justify-content:center;
  color:rgba(214,179,106,.85);
  font-weight:900;letter-spacing:.18em;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cardBody{padding:14px}
.title{font-weight:900;font-size:20px}
.small{margin-top:6px;color:rgba(255,255,255,.72)}
.price{margin-top:10px;font-weight:900;font-size:22px}
.addRow{margin-top:12px;display:flex;align-items:center;gap:10px}
.qtyBtn{
  width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:#fff;font-weight:900;font-size:18px;cursor:pointer;
}
.qtyBtn:hover{filter:brightness(1.05)}
.qty{min-width:20px;text-align:center;font-weight:900}

/* drawer */
.drawer{position:fixed;inset:0;display:none;z-index:1000}
.drawer[aria-hidden="false"]{display:block}
.drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);z-index:1000}
.drawer__panel{
  position:absolute;top:0;right:0;height:100%;width:min(520px,96vw);
  background:linear-gradient(180deg,#0e0e0e,#080808);
  border-left:1px solid rgba(255,255,255,.08);
  z-index:1001;
  box-shadow:-30px 0 120px rgba(0,0,0,.70);
  display:flex;flex-direction:column;
}
.drawer__head{padding:14px 14px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:flex-start}
.drawer__title{font-weight:900;font-size:20px}
.drawer__sub{color:rgba(255,255,255,.65);font-size:13px}
.drawer__items{padding:14px;display:flex;flex-direction:column;gap:10px;overflow:auto;flex:1}
.it{border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:12px;background:rgba(0,0,0,.18)}
.itHead{display:flex;justify-content:space-between;gap:10px;font-weight:800}
.itSub{margin-top:6px;color:rgba(255,255,255,.65);font-size:13px}
.itActions{margin-top:10px;display:flex;gap:10px;align-items:center}
.itActions .qtyBtn{width:38px;height:38px;border-radius:12px}
.delBtn{margin-left:auto}

.drawer__footer{padding:14px;border-top:1px solid rgba(255,255,255,.06)}
.sumRow{display:flex;justify-content:space-between;align-items:center}
.sum{font-weight:900;font-size:20px}
.btnRow{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btnPrimary{
  border:1px solid rgba(214,179,106,.35);
  background:linear-gradient(180deg, rgba(214,179,106,.22), rgba(214,179,106,.08));
  color:#fff;border-radius:14px;padding:12px 14px;font-weight:900;cursor:pointer
}
.btnGhost{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
  color:#fff;border-radius:14px;padding:12px 14px;font-weight:900;cursor:pointer
}
.btnPrimary:hover,.btnGhost:hover{filter:brightness(1.06)}
.hint{margin-top:10px;color:rgba(255,255,255,.55);font-size:12px}
.empty{color:rgba(255,255,255,.70);padding:8px}

/* modal */
.modal{position:fixed;inset:0;display:none;z-index:1200}
.modal[aria-hidden="false"]{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:0}
.modal__panel{position:relative;z-index:1;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(820px,96vw);
  background:linear-gradient(180deg,#0e0e0e,#090909);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  box-shadow:0 30px 140px rgba(0,0,0,.75);
  overflow:hidden;
}
.modal__head{padding:14px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center}
.modal__kicker{color:rgba(214,179,106,.85);font-weight:900;letter-spacing:.18em}
.modal__body{padding:16px}
.modal__title{font-weight:900;font-size:24px}
.modal__meta{margin-top:6px;color:rgba(255,255,255,.72)}
.modal__desc{margin-top:10px;color:rgba(255,255,255,.78);line-height:1.45;white-space:pre-line}

/* gallery */
#mGallery{margin-top:12px}
#mGallery .mMain{border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;background:rgba(0,0,0,.22)}
#mGallery .mMain img{display:block;width:100%;height:260px;object-fit:cover}
#mGallery .mThumbs{margin-top:10px;display:flex;gap:10px;overflow:auto;padding-bottom:2px}
#mGallery .mThumb{width:84px;height:64px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.10);cursor:pointer;opacity:.92}
#mGallery .mThumb:hover{opacity:1;filter:brightness(1.05)}
.modal__row{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal__price{font-weight:900;font-size:22px}
.qtyCtl{display:flex;gap:10px;align-items:center}
.qtyN{min-width:20px;text-align:center;font-weight:900}
.full{width:100%;margin-top:14px}


/* FIX_Z_START */
:root{
  --z-overlay: 9000;
  --z-modal:   9100;
  --z-drawer:  9200;
}
.modal, .productModal, .dialog, .popup{
  z-index: var(--z-modal) !important;
}
.modalOverlay, .overlay, .backdrop{
  z-index: var(--z-overlay) !important;
}
.cartDrawer, .drawer, .sideCart, .cartPanel{
  z-index: var(--z-drawer) !important;
}
/* Если где-то стоит pointer-events:none на оверлее/контейнере */
.modalOverlay, .overlay, .backdrop, .cartDrawer, .drawer, .sideCart, .cartPanel{
  pointer-events: auto !important;
}
/* FIX_Z_END */


/* === Categories grid (top of shop) === */
.cat-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
  margin: 18px 0 10px 0;
}
@media (max-width: 1100px){
  .cat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .cat-grid{ grid-template-columns: 1fr; }
}

.cat-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  cursor:pointer;
  min-height: 220px;
}

.cat-card .bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter: saturate(0.95) contrast(1.02);
  transform: scale(1.02);
}

.cat-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.80) 100%);
}

.cat-card .content{
  position:absolute; left:18px; right:18px; bottom:16px;
  z-index:2;
}

.cat-card .title{
  font-size:26px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:0.2px;
  margin:0 0 6px 0;
}

.cat-card .meta{
  opacity:0.78;
  font-size:13px;
}

.cat-card .btn{
  margin-top:10px;
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
}

/* === Clean hero background (remove noisy right glow/pattern) === */
.hero, .shop-hero, .page-hero{
  background: transparent !important;
  box-shadow: none !important;
}
.hero::before, .hero::after,
.shop-hero::before, .shop-hero::after,
.page-hero::before, .page-hero::after{
  display:none !important;
  content:none !important;
}

/* ===== CRAFTHAUS CATEGORIES GRID ===== */
#catGridWrap { margin-top: 12px; }
.catGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px){ .catGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px){ .catGrid{ grid-template-columns: 1fr; } }

.catCard{
  position: relative;
  display:block;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  text-decoration:none;
  min-height: 220px;
}
.catCard:hover{ border-color: rgba(255,255,255,.14); }

.catWide{ grid-column: 1 / -1; min-height: 260px; }

.catImg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.02) contrast(1.02);
  transform: scale(1.02);
}
.catCard:before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.18) 100%);
}
.catMeta{
  position:absolute; left:18px; right:18px; bottom:16px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
}
.catTitle{
  font-size: 28px;
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.catBtn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color:#fff;
  cursor:pointer;
}

/* ===== HERO compact (убираем бордеры/лишний воздух) ===== */
.hero.card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 0 0 0 !important;
}
.hero .title{ margin: 0 0 6px 0; }
.hero .subtitle{ margin: 0 0 8px 0; opacity:.9; font-size: 14px; line-height: 1.35; }

/* === CH: hide "Раздел XX" labels on category tiles === */
.cat-card .code,
.cat-card .cat-code,
.category-card .code,
.category-card .cat-code,
[data-role="cat-code"]{
  display:none !important;
}