:root{
  --bg:#0f1016;
  --surface:#23232f;
  --text:#ffffff;
  --muted:#b8bcc7;

  --accent:#d7263d;
  --accent-2:#ff445c;

  --radius:20px;
  --nav-h:64px;

  /* ВАЖНО: css лежит в /css/, до assets идём через ../assets */
  --bg-mobile-1x: url('../assets/bg-mobile-red-circuit.jpg');
  --bg-mobile-2x: url('../assets/bg-mobile-red-circuit.jpg');
  --bg-desktop-1x: url('../assets/bg-desktop-red-circuit.jpg');
  --bg-desktop-2x: url('../assets/bg-desktop-red-circuit.jpg');
}

*{box-sizing:border-box}
*::before,*::after{box-sizing:inherit}
html,body{height:100%}
body{
  margin:0;
  background:#0d0e15;
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
main{
  position:relative; z-index:1;
  padding:12px 12px calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
}

section{scroll-margin-top:12px}

/* глобальный фон */
.site-bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-color:#0d0e15;
  background-position:center; background-repeat:no-repeat; background-size:cover;
  background-image:
    linear-gradient(180deg, rgba(16,16,24,.76) 0%, rgba(16,16,24,.86) 60%, rgba(16,16,24,.92) 100%),
    radial-gradient(900px 520px at 50% 12%, rgba(215,38,61,.22), rgba(215,38,61,0) 70%),
    image-set( var(--bg-desktop-1x) 1x, var(--bg-desktop-2x) 2x );
  background-image:
    linear-gradient(180deg, rgba(16,16,24,.76) 0%, rgba(16,16,24,.86) 60%, rgba(16,16,24,.92) 100%),
    radial-gradient(900px 520px at 50% 12%, rgba(215,38,61,.22), rgba(215,38,61,0) 70%),
    -webkit-image-set( var(--bg-desktop-1x) 1x, var(--bg-desktop-2x) 2x );
}
@media (orientation:portrait), (max-width:820px){
  .site-bg{
    background-image:
      linear-gradient(180deg, rgba(16,16,24,.78) 0%, rgba(16,16,24,.88) 60%, rgba(16,16,24,.94) 100%),
      radial-gradient(760px 460px at 50% 14%, rgba(215,38,61,.22), rgba(215,38,61,0) 70%),
      image-set( var(--bg-mobile-1x) 1x, var(--bg-mobile-2x) 2x );
    background-image:
      linear-gradient(180deg, rgba(16,16,24,.78) 0%, rgba(16,16,24,.88) 60%, rgba(16,16,24,.94) 100%),
      radial-gradient(760px 460px at 50% 14%, rgba(215,38,61,.22), rgba(215,38,61,0) 70%),
      -webkit-image-set( var(--bg-mobile-1x) 1x, var(--bg-mobile-2x) 2x );
  }
}

/* canvas слой */
.bg-canvas{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:-1; pointer-events:none;
}

/* интро */
body.no-scroll{ overflow:hidden }
.intro{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background: rgba(10,10,16,.55);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
  transition: opacity .4s ease;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .intro{ background: rgba(10,10,16,.74) }
}
.intro--hide{ opacity:0; pointer-events:none }
.intro[hidden]{ display:none }
.intro__center{text-align:center}
.intro__logo{width:72px; margin:0 auto 12px; animation:spin 1.1s linear infinite}
.intro__brand{font-size:28px; font-weight:800; letter-spacing:.5px}
.intro__sub{color:var(--muted); margin-top:4px}
@keyframes spin{to{transform:rotate(360deg)}}

/* hero */
.hero{
  max-width:1100px; margin:10px auto 18px; text-align:center;
  padding:20px 14px 22px; border-radius:22px;
  background:transparent; position:relative;
}
.hero__brand{display:flex; flex-direction:column; align-items:center; gap:8px}
.hero__logo{width:64px}
.hero__title{font-weight:800; font-size:20px; letter-spacing:.4px}
.hero__h1{font-size:clamp(24px, 4.2vw, 32px); margin:16px 0 8px}
.hero__h1 span{color:var(--accent)}
.hero__sub{color:#e6e6ea; opacity:.9; margin-bottom:12px}
.hero__cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; border-radius:16px; font-weight:700;
  min-height:44px; min-width:44px;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, border .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent); color:#fff; border:1px solid var(--accent); box-shadow:0 6px 24px rgba(215,38,61,.35)}
.btn--primary:hover{background:var(--accent-2); border-color:var(--accent-2); box-shadow:0 10px 26px rgba(255,68,92,.28)}
.btn--outline{color:#fff; border:2px solid rgba(255,255,255,.6); background:transparent}
.btn--light{background:#fff; color:#111}

.hero__facts{display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:center; list-style:none; padding:8px 0 0; margin:8px 0 0}
.hero__facts li{color:#e9e9ee; opacity:.95; position:relative; padding-left:18px}
.hero__facts li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent));
}

/* burger */
.burger{
  margin:8px auto 6px; width:48px; height:42px; border-radius:12px; border:1px solid #2f2f42;
  background:linear-gradient(#252536,#202032);
  display:flex; align-items:center; justify-content:center; gap:4px;
  cursor:pointer; position:relative; z-index:3;
}
.burger:active{transform:translateY(1px)}
.burger__bar{display:block; width:22px; height:2px; background:#fff; border-radius:2px; position:relative}
.burger__bar:nth-child(1){top:-6px}
.burger__bar:nth-child(3){top:6px}

/* искры в hero */
.sparks{position:absolute; inset:0; z-index:2; pointer-events:none}
.sparks__zone{position:absolute; left:0; right:0; height:34%}
.sparks__zone--top{top:0}
.sparks__zone--bottom{bottom:0}
.spark{
  position:absolute; width:3px; height:3px; border-radius:50%; opacity:0;
  box-shadow:0 0 6px rgba(255,86,110,0), 0 0 12px rgba(255,68,92,0), 0 0 22px rgba(215,38,61,0)
}
.spark::after{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,110,130,1) 0%, rgba(255,86,110,.55) 35%, rgba(255,68,92,.18) 65%, rgba(215,38,61,0) 100%);
  opacity:0; transform:scale(.6)
}
@keyframes sparkFlash{0%{opacity:0}10%{opacity:.9}35%{opacity:1}100%{opacity:0}}
@keyframes sparkAura{0%{opacity:0;transform:scale(.6)}30%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
.spark--on{
  animation:sparkFlash .85s ease-out forwards;
  box-shadow:0 0 6px rgba(255,86,110,.9), 0 0 12px rgba(255,68,92,.55), 0 0 22px rgba(215,38,61,.35)
}
.spark--on::after{animation:sparkAura .85s ease-out forwards}

/* секции/карточки */
.section{max-width:920px; margin:0 auto 16px; padding:0 4px}
.card{background:rgba(35,35,47,.92); border:1px solid rgba(255,255,255,.10); border-radius:var(--radius); padding:14px}
.section__h2{font-size:18px; margin:0 0 10px}
.grid2{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  background:#25263a; color:#fff; border:1px solid #32334a; border-radius:16px;
  padding:10px 12px; font-weight:600; min-height:44px; cursor:pointer;
  flex:0 1 calc(50% - 5px); text-align:left
}
.details summary{cursor:pointer; color:#fff; font-weight:700; margin-top:10px}
.list{color:var(--muted); padding-left:18px; margin:8px 0 0}
.muted{color:var(--muted); margin:6px 0 12px}

/* docs (Лицензии и аттестация) */
.docs-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 520px){
  .docs-grid{ grid-template-columns: 1fr; }
}
.doc-thumb{
  display:block;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transition: transform .08s ease, border-color .2s ease, box-shadow .2s ease;
}
.doc-thumb:hover{
  border-color: rgba(255,68,92,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.doc-thumb:active{ transform: translateY(1px); }
.doc-thumb img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
}
@media (max-width: 520px){
  .doc-thumb img{ height:200px; }
}
.doc-thumb__cap{
  display:block;
  padding:10px 12px;
  font-weight:800;
  color:#fff;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35));
}

/* форма */
.form{display:flex; flex-direction:column; gap:8px}
.form input,.form select{background:#222437; border:1px solid #32334a; color:#fff; border-radius:14px; padding:12px; min-height:44px}
.form__note{color:var(--muted); font-size:12px; margin-top:4px}

/* quick contacts */
.quick-contacts{display:grid; grid-template-columns:repeat(4,60px); gap:14px; justify-content:flex-start; margin-bottom:12px}
.qc{width:60px; height:60px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#25263a; border:1px solid #32334a}
.qc::before{
  content:""; width:28px; height:28px; background:#fff;
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
          mask-repeat:no-repeat;         mask-position:center;         mask-size:contain
}
.qc--call::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1.5 1.5 0 0 1 1.6-.36l3.5 1.2a1.5 1.5 0 0 1 1 1.41V20a2 2 0 0 1-2 2C9.6 22 2 14.4 2 5a2 2 0 0 1 2-2h2.59c.66 0 1.23.42 1.41 1.06l1.2 3.5c.2.6.05 1.28-.36 1.73L6.6 10.8z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1.5 1.5 0 0 1 1.6-.36l3.5 1.2a1.5 1.5 0 0 1 1 1.41V20a2 2 0 0 1-2 2C9.6 22 2 14.4 2 5a2 2 0 0 1 2-2h2.59c.66 0 1.23.42 1.41 1.06l1.2 3.5c.2.6.05 1.28-.36 1.73L6.6 10.8z'/></svg>");
}
.qc--wa::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-8.94 14.47L2 22l5.7-1.99A10 10 0 1 0 12 2z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-8.94 14.47L2 22l5.7-1.99A10 10 0 1 0 12 2z'/></svg>");
}
.qc--tg::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.9 15.6l-.4 4.3c.6 0 .9-.2 1.2-.5l2.9-2.6 6.1 4.5c1.1.6 1.8.3 2.1-1.1L24 3.6c.3-1.3-.5-1.8-1.6-1.4L1.8 9.7C.5 10.2.6 11 .6 11s.8.3 1.7.6l4.2 1.3 9.8-6.1c.5-.3.9-.1.5.2l-8 7.6z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.9 15.6l-.4 4.3c.6 0 .9-.2 1.2-.5l2.9-2.6 6.1 4.5c1.1.6 1.8.3 2.1-1.1L24 3.6c.3-1.3-.5-1.8-1.6-1.4L1.8 9.7(C.5 10.2.6 11 .6 11s.8.3 1.7.6l4.2 1.3 9.8-6.1c.5-.3.9-.1.5.2l-8 7.6z'/></svg>");
}
.qc--vk::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21.5 16.6c.2.5-.1.9-.7.9h-1.7c-.6 0-.9-.3-1.3-.7l-1.1-1.1c-.2-.2-.4-.2-.6 0l-.7.7c-.3.3-.6.4-1.1.4-3.9 0-7.1-3.2-8.7-7.1-.2-.5 0-.8.5-.8h1.7c.4 0 .7.2.9.7.6 1.6 1.9 3.6 2.5 3.6.2 0 .3-.1.3-.5V9.7c0-.6-.3-.7-.3-1.1 0-.2.2-.4.5-.4h2.2c.4 0 .5.2.5.6V12c0 .3.1.4.2.4.2 0 .4-.1.8-.5 1-1.1 1.8-2.9 1.8-2.9.1-.3.3-.4.7-.4H21c.5 0 .6.2.5.5-.2.9-2 3.4-2 3.4-.2.2-.2.4 0 .6l1 .9c.7.7 1.2 1.4 1.5 2.1z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21.5 16.6c.2.5-.1.9-.7.9h-1.7c-.6 0-.9-.3-1.3-.7l-1.1-1.1c-.2-.2-.4-.2-.6 0l-.7.7c-.3.3-.6.4-1.1.4-3.9 0-7.1-3.2-8.7-7.1-.2-.5 0-.8.5-.8h1.7c.4 0 .7.2.9.7.6 1.6 1.9 3.6 2.5 3.6.2 0 .3-.1.3-.5V9.7c0-.6-.3-.7-.3-1.1 0-.2.2-.4.5-.4h2.2c.4 0 .5.2.5.6V12c0 .3.1.4.2.4.2 0 .4-.1.8-.5 1-1.1 1.8-2.9 1.8-2.9.1-.3.3-.4.7-.4H21c.5 0 .6.2 .5.5-.2.9-2 3.4-2 3.4-.2.2-.2.4 0 .6l1 .9c.7.7 1.2 1.4 1.5 2.1z'/></svg>");
}

/* appbar */
.appbar{
  position:fixed; left:0; right:0; bottom:0;
  height:var(--nav-h); padding-bottom:env(safe-area-inset-bottom);
  display:flex; justify-content:space-around; align-items:center;
  background:#202030; border-top:1px solid #2b2b40; z-index:50;
}
.appbar__item{
  color:#fff; font-size:12px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:6px 8px; border-radius:12px; min-width:56px;
}
.appbar__item.active{background:#26263a}
.appbar__item::before{
  content:""; display:block; width:22px; height:22px; background:currentColor;
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
          mask-repeat:no-repeat;         mask-position:center;         mask-size:contain;
}
.nav-home::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 10.5L12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-10.5z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 10.5L12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-10.5z'/></svg>");
}
.nav-services::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18v6H3V5zm0 8h8v6H3v-6zm10 0h8v6h-8v-6z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18v6H3V5zm0 8h8v6H3v-6zm10 0h8v6h-8v-6z'/></svg>");
}
.nav-projects::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16v4H4V4zm0 6h10v4H4v-4zm0 6h16v4H4v-4z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16v4H4V4zm0 6h10v4H4v-4zm0 6h16v4H4v-4z'/></svg>");
}
.nav-company::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/></svg>");
}
.nav-contacts::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1.5 1.5 0 0 1 1.6-.36l3.5 1.2a1.5 1.5 0 0 1 1 1.41V20a2 2 0 0 1-2 2C9.6 22 2 14.4 2 5a2 2 0 0 1 2-2h2.59c.66 0 1.23.42 1.41 1.06l1.2 3.5c.2.6.05 1.28-.36 1.73L6.6 10.8z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1.5 1.5 0 0 1 1.6-.36l3.5 1.2a1.5 1.5 0 0 1 1 1.41V20a2 2 0 0 1-2 2C9.6 22 2 14.4 2 5a2 2 0 0 1 2-2h2.59c.66 0 1.23.42 1.41 1.06l1.2 3.5c.2.6.05 1.28-.36 1.73L6.6 10.8z'/></svg>");
}

/* bottom sheet */
.sheet{
  position:fixed; left:0; right:0; bottom:-100%;
  background:#1e1e2a; border-top-left-radius:16px; border-top-right-radius:16px;
  z-index:100; padding:10px 14px calc(env(safe-area-inset-bottom) + 12px);
  box-shadow:0 -20px 60px #0008;
  transition:transform .25s ease;
  transform:translateY(100%);
}
.sheet--open{transform:translateY(0%); bottom:0}
.sheet__handle{width:36px; height:4px; background:#3a3a52; border-radius:4px; margin:6px auto 12px}
.sheet__nav{display:flex; flex-direction:column; gap:8px}
.sheet__link{color:#fff; font-weight:700; padding:10px 12px; background:#26263a; border-radius:12px}
.sheet__contacts{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.contact{display:inline-flex; align-items:center; gap:8px; color:#fff; background:#25263a; border:1px solid #32334a; border-radius:14px; padding:8px 10px}

/* backdrop */
.backdrop{position:fixed; inset:0; background:#0007; z-index:90; transition:opacity .2s ease; opacity:0}
.backdrop[hidden]{display:none}
.backdrop--show{opacity:1}

/* map */
.map-section{max-width:920px; margin:0 auto 20px}
.map{border-radius:16px; overflow:hidden; border:1px solid #2e2e45; height:280px; background:#15151e}
.map iframe{width:100%; height:100%; border:0}

@media (prefers-reduced-motion: reduce){
  .intro__logo{animation:none}
  .spark, .spark::after{animation:none !important}
}

/* ===== goods marketplace ===== */
.goods-head{max-width:920px;margin:0 auto 10px;padding:0 4px}
.goods-head__top{display:flex;align-items:center;gap:10px;margin:10px 0 10px}
.goods-back{
  width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)
}
.goods-brand{display:flex;align-items:center;gap:10px}
.goods-brand__logo{width:38px;height:38px}
.goods-brand__name{font-weight:900;font-size:18px}
.goods-brand__sub{color:var(--muted);font-size:12px;margin-top:2px}

.goods-tools{padding:12px}
.goods-tools__row{display:grid;grid-template-columns:1fr 180px;gap:10px}
@media (max-width:520px){.goods-tools__row{grid-template-columns:1fr}}
.goods-search,.goods-select{
  width:100%;min-height:44px;border-radius:14px;padding:12px;
  background:#222437;border:1px solid #32334a;color:#fff;outline:none
}
.goods-tools__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gchip{
  min-height:38px;padding:8px 12px;border-radius:999px;
  background:#25263a;border:1px solid #32334a;color:#fff;font-weight:800;cursor:pointer
}
.gchip--ghost{background:transparent;border-color:rgba(255,255,255,.28)}

.goods-grid{
  max-width:920px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 4px
}
@media (max-width:920px){.goods-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.goods-grid{grid-template-columns:1fr}}

.gcard{
  background:rgba(35,35,47,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;padding:12px;
  display:flex;flex-direction:column;gap:10px
}
.gcard--wide{grid-column:1/-1}
.gcard__top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.gtitle{font-weight:900;font-size:16px;line-height:1.2}
.gbadges{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.gbadge{
  font-size:11px;font-weight:900;letter-spacing:.2px;
  padding:4px 8px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12)
}
.gbadge--hot{border-color:rgba(255,68,92,.55);background:rgba(215,38,61,.20)}
.gbadge--sale{border-color:rgba(255,68,92,.65);background:rgba(255,68,92,.18)}

.gdesc{color:#e9e9ee;opacity:.92;font-size:13px;line-height:1.35}
.gprice{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.gprice__now{font-weight:900;font-size:18px}
.gprice__old{color:var(--muted);text-decoration:line-through}
.gprice__req{color:var(--muted);font-weight:800}

.gactions{display:flex;gap:10px;margin-top:auto}
.gactions .btn{flex:1}

.goods-empty{
  max-width:920px;margin:14px auto 0;padding:12px 14px;
  border-radius:16px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--muted)
}
.goods-help{max-width:920px;margin:16px auto 24px}

/* ===== goods: preview placeholders + modal ===== */
.gthumb{
  height:150px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 220px at 20% 10%, rgba(255,68,92,.28), rgba(255,68,92,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  display:flex;
  align-items:flex-end;
  padding:10px 10px 12px;
  position:relative;
  overflow:hidden;
}
.gthumb::before{
  content:"";
  position:absolute; inset:-40px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%);
  transform:rotate(10deg);
}
.gthumb__tag{
  position:relative;
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gthumb__tag span{
  opacity:.9;
  font-weight:800;
}

.gcard{ cursor:pointer; }
.gactions{ cursor:default; } /* чтобы кнопки не выглядели как “карта” */

/* Modal */
.pmodal-backdrop{
  position:fixed; inset:0;
  background:rgba(10,10,16,.78);
  z-index:4000;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity .2s ease;
}
.pmodal-backdrop.is-open{ opacity:1; }

.pmodal{
  width:min(920px, 94vw);
  max-height:min(86vh, 760px);
  overflow:auto;
  border-radius:18px;
  background:rgba(35,35,47,.94);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}

.pmodal__head{
  position:sticky; top:0;
  background:linear-gradient(180deg, rgba(35,35,47,.98), rgba(35,35,47,.90));
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:14px 14px 10px;
  display:flex; gap:10px; align-items:flex-start; justify-content:space-between;
}
.pmodal__title{ margin:0; font-size:18px; font-weight:900; }
.pmodal__close{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.pmodal__body{ padding:14px; display:grid; gap:12px; }
.pmodal__media{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}
.pmodal__media img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}
@media (max-width:520px){
  .pmodal__media img{ height:200px; }
}
.pmodal__price{
  display:flex; flex-wrap:wrap; gap:10px; align-items:baseline;
}
.pmodal__priceNow{ font-weight:900; font-size:20px; }
.pmodal__priceOld{ color:var(--muted); text-decoration:line-through; }
.pmodal__priceReq{ color:var(--muted); font-weight:800; }

.pmodal__specs{
  margin:0;
  padding-left:18px;
  color:var(--muted);
}
.pmodal__actions{
  display:flex; gap:10px;
  padding:0 14px 14px;
}
.pmodal__actions .btn{ flex:1; }