/* ============================================================
   HARD-CASH · футуристичний світлий стиль · v3.0 (очищено)
   Файл: catalog/view/theme/mintleaf/stylesheet/custom.css
   Після змін: очистити storage/cache + Ctrl+F5
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --hc-ice:#FAFBFD;
  --hc-ink:#0B0F14;
  --hc-mint:#0ADB8B;
  --hc-mint-deep:#00A876;
  --hc-steel:#5C6B7A;
  --hc-hairline:#E3E9F0;
  --hc-glow:0 0 0 1px rgba(10,219,139,.5), 0 8px 28px rgba(10,219,139,.18);
}

/* ── 1. База ──────────────────────────────────────────── */
html body{
  font-family:'Manrope',sans-serif !important;
  color:var(--hc-ink) !important;
  background:var(--hc-ice) !important;
  background-image:
    linear-gradient(rgba(11,15,20,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,15,20,.035) 1px, transparent 1px) !important;
  background-size:56px 56px !important;
  background-attachment:fixed !important;
}
html body h1, html body h2, html body h3{
  font-family:'Unbounded',sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-.01em;
}
html body h4, html body h5, html body h6{
  font-family:'Manrope',sans-serif !important;
  font-weight:700 !important;
}
html body a{color:var(--hc-mint-deep)}
html body a:hover, html body a:focus{color:var(--hc-ink)}
::selection{background:rgba(10,219,139,.25)}
html body img{border-radius:8px}

html body .topbar{
  display:block !important;
  max-width:1140px;
  margin:10px auto 0 !important;
  padding:7px 20px !important;
  min-height:0 !important;
  border-radius:14px !important;

  /* — iOS-скло: глибокий блюр + соковитість — */
  background:rgba(11,15,20,.96) !important;
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);

  /* світла кромка зверху як у панелей iOS */
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),   /* блиск верхньої грані */
    inset 0 -1px 0 rgba(0,0,0,.25),        /* тінь нижньої грані  */
    0 8px 24px rgba(11,15,20,.16);          /* м'яке відкидання    */

  color:#E8EDF2 !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:12px !important;
  letter-spacing:.05em;
  position:relative;
  overflow:hidden;
}
/* м'ятна лінія знизу — залишаємо, вона доречна */
html body .topbar::after{
  content:'';
  position:absolute;left:16px;right:16px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(10,219,139,.55),transparent);
  pointer-events:none;
}
/* текст трохи світліший, щоб читався на склі */
html body .topbar a, html body .topbar p{color:#E8EDF2 !important}
html body .topbar a:hover{color:var(--hc-mint) !important}

/* делікатне сяйво під капсулою, щоб склу було що переломлювати */
html body .topbar::before{
  content:'';
  position:absolute;inset:-40%;
  background:radial-gradient(ellipse at 20% 0%, rgba(10,219,139,.16), transparent 45%),
             radial-gradient(ellipse at 85% 100%, rgba(90,140,255,.10), transparent 50%);
  pointer-events:none;
  z-index:-1;
}

/* статус із пульсуючою точкою */
html body .hc-status{display:inline-flex !important;align-items:center;gap:8px;letter-spacing:.08em}
html body .hc-dot{
  flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  position:static !important;margin:0 !important;
  background:var(--hc-mint);box-shadow:0 0 10px var(--hc-mint);
  animation:hcPulse 2.2s infinite;
}
@keyframes hcPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* мобільні: капсула з полями, текст по центру */
@media (max-width:1199px){
  html body .topbar{max-width:calc(100% - 20px);margin:8px auto 0 !important}
}
@media (max-width:767px){
  html body .topbar{border-radius:10px !important;padding:6px 14px !important}
  html body .topbar .pull-left-lg, html body .topbar .pull-left-md, html body .topbar .pull-left-sm,
  html body .topbar .pull-right-lg, html body .topbar .pull-right-md, html body .topbar .pull-right-sm{
    float:none !important;
    display:block;
    text-align:center !important;
  }
  html body .hc-status{justify-content:center;width:100%}
  html body .topbar .top-links{text-align:center !important;margin-top:4px !important}
  html body .topbar .top-links li{float:none;display:inline-block}
}

/* ── 3. Шапка та меню ─────────────────────────────────── */
html body .main-header{
  position:sticky !important; top:0; z-index:999;
  background:rgba(255,255,255,.85) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hc-hairline) !important;
}
html body .main-header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--hc-mint) 30%,var(--hc-mint) 70%,transparent);
  opacity:.65;pointer-events:none;z-index:5;
}
html body #menu, html body #menu .navbar-nav > li > a{
  background:transparent !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  color:var(--hc-steel) !important;
}
html body #menu .navbar-nav > li > a:hover,
html body #menu .navbar-nav > li.active > a{color:var(--hc-ink) !important}

/* ── 4. Кнопки ────────────────────────────────────────── */
html body .btn-primary,
html body .btn-main,
html body .btn-default,
html body #button-cart,
html body .product-thumb .btn,
html body button[type="submit"].btn:not(.btn-link){
  background:var(--hc-ink) !important;
  background-image:none !important;
  border:1px solid var(--hc-ink) !important;
  color:#fff !important;
  border-radius:10px !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  transition:box-shadow .22s, transform .22s !important;
}
html body .btn-primary:hover, html body .btn-primary:focus, html body .btn-primary:active, html body .btn-primary.active,
html body .btn-main:hover,    html body .btn-main:focus,    html body .btn-main:active,    html body .btn-main.active,
html body .btn-default:hover, html body .btn-default:focus, html body .btn-default:active, html body .btn-default.active,
html body #button-cart:hover, html body #button-cart:focus,
html body .product-thumb .btn:hover{
  background:linear-gradient(120deg,#0B0F14,#14211C) !important;
  border-color:var(--hc-mint) !important;
  color:#fff !important;
  box-shadow:var(--hc-glow) !important;
  transform:translateY(-2px);
}
html body .btn-outline-1{
  background:#fff !important;
  border:1px solid var(--hc-hairline) !important;
  color:var(--hc-ink) !important;
  border-radius:10px !important;
}
html body .btn-outline-1:hover{border-color:var(--hc-mint) !important;color:var(--hc-ink) !important}

/* ── 5. Картки товарів ────────────────────────────────── */
html body .product-thumb{
  position:relative;
  background:#fff !important;
  border:1px solid var(--hc-hairline) !important;
  border-radius:16px !important;
  transition:transform .24s, box-shadow .24s, border-color .24s !important;
  overflow:hidden;
}
html body .product-thumb:hover{
  transform:translateY(-5px);
  border-color:rgba(10,219,139,.55) !important;
  box-shadow:0 16px 44px rgba(11,15,20,.08), 0 0 0 1px rgba(10,219,139,.3) !important;
}
html body .product-thumb h4, html body .product-thumb h4 a{
  font-family:'Manrope',sans-serif !important;
  font-weight:700 !important;
  color:var(--hc-ink) !important;
}
html body .product-thumb h4 a:hover{color:var(--hc-mint-deep) !important}

/* HUD-кутики при наведенні */
html body .product-thumb::before,
html body .product-thumb::after{
  content:'';position:absolute;width:18px;height:18px;
  border:2px solid var(--hc-mint);opacity:0;transition:opacity .25s;
  pointer-events:none;z-index:3;
}
html body .product-thumb::before{top:10px;left:10px;border-right:none;border-bottom:none;border-radius:6px 0 0 0}
html body .product-thumb::after{bottom:10px;right:10px;border-left:none;border-top:none;border-radius:0 0 6px 0}
html body .product-thumb:hover::before,
html body .product-thumb:hover::after{opacity:1}

/* СКАН-ПРОМІНЬ (div .hc-beam додається скриптом у custom.js) */
html body .product-thumb .hc-beam{
  position:absolute;left:0;right:0;top:-15%;height:60px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(10,219,139,.10) 30%,
    rgba(10,219,139,.50) 50%,
    rgba(10,219,139,.10) 70%,
    transparent 100%);
  border-top:1px solid rgba(10,219,139,.9);
  border-bottom:1px solid rgba(10,219,139,.9);
  box-shadow:0 0 34px rgba(10,219,139,.55);
  opacity:0;pointer-events:none;z-index:9;
}
html body .product-thumb:hover .hc-beam{
  opacity:1;
  animation:hcBeam 1.5s ease-in-out infinite;
}
@keyframes hcBeam{0%{top:-12%}100%{top:108%}}
html body .product-thumb:hover .image img{
  filter:contrast(1.06) saturate(1.08);
  transition:filter .4s;
}

/* ── 6. Ціни — «дисплей лічильника» ───────────────────── */
html body .price,
html body .price-new,
html body .product-thumb .price,
html body .module-product-price,
html body #content .price{
  font-family:'IBM Plex Mono',monospace !important;
  font-variant-numeric:tabular-nums;
  font-weight:600 !important;
  color:var(--hc-ink) !important;
}
html body .price-old{
  color:var(--hc-steel) !important;
  font-family:'IBM Plex Mono',monospace !important;
}
html body .product-thumb:hover .price,
html body .product-thumb:hover .price-new{
  color:var(--hc-mint-deep) !important;
  text-shadow:0 0 14px rgba(10,219,139,.35);
}

/* ── 7. Заголовки секцій ──────────────────────────────── */
html body .page-heading, html body .page-sub-heading{
  font-family:'Unbounded',sans-serif !important;
  font-weight:600 !important;
  color:var(--hc-ink) !important;
}
html body .page-heading:after, html body .page-sub-heading:after,
html body .hr, html body .hr-1{
  background:var(--hc-mint) !important;
  border-color:var(--hc-mint) !important;
  height:2px !important;
}
html body .text-color-brand{color:var(--hc-ink) !important}
html body .page-heading{position:relative;padding-top:20px}
html body .page-heading::before{
  content:'/// HARD-CASH SYSTEMS';
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.3em;
  color:var(--hc-mint-deep);
}

/* ── 8. Сторінка товару ───────────────────────────────── */
html body #content h1{color:var(--hc-ink) !important}
html body .nav-tabs{border-bottom:1px solid var(--hc-hairline) !important}
html body .nav-tabs > li > a{
  color:var(--hc-steel) !important;
  font-weight:600 !important;
  border:none !important;
  background:transparent !important;
}
html body .nav-tabs > li.active > a,
html body .nav-tabs > li > a:hover{
  color:var(--hc-ink) !important;
  border:none !important;
  border-bottom:2px solid var(--hc-mint) !important;
  background:transparent !important;
}
html body .rating .fa-stack .fa-star{color:var(--hc-mint-deep) !important}
html body .thumbnails img, html body .image-additional img{
  border:1px solid var(--hc-hairline) !important;
  border-radius:10px !important;
  transition:border-color .2s, box-shadow .2s;
}
html body .thumbnails img:hover, html body .image-additional img:hover{
  border-color:var(--hc-mint) !important;
  box-shadow:0 0 0 1px rgba(10,219,139,.4), 0 6px 18px rgba(10,219,139,.15);
}

/* ── 9. Лайтбокс (перегляд фото) ──────────────────────── */
html body .mfp-bg{background:#050A0E !important;opacity:.96 !important}
html body .mfp-figure{overflow:hidden;border-radius:12px;position:relative}
html body .mfp-img{
  border:1px solid rgba(10,219,139,.5) !important;
  border-radius:12px !important;
  box-shadow:0 0 0 1px rgba(10,219,139,.25),
             0 0 60px rgba(10,219,139,.18),
             0 24px 80px rgba(0,0,0,.55) !important;
  background:#fff;
  padding:0 !important;
}
html body .mfp-container::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  width:min(90vw,900px);height:2px;top:12%;
  background:linear-gradient(90deg,transparent,var(--hc-mint),transparent);
  box-shadow:0 0 18px var(--hc-mint);
  animation:hcLbScan 3s ease-in-out infinite;
  pointer-events:none;z-index:1046;opacity:.7;
}
@keyframes hcLbScan{0%,100%{top:12%}50%{top:86%}}
html body .mfp-title{
  font:600 13px 'IBM Plex Mono',monospace !important;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--hc-mint) !important;
}
html body .mfp-counter{
  font:500 12px 'IBM Plex Mono',monospace !important;
  color:#7E8B96 !important;letter-spacing:.15em;
}
html body .mfp-close{
  width:44px !important;height:44px !important;line-height:44px !important;
  background:rgba(11,15,20,.85) !important;
  border:1px solid rgba(10,219,139,.5) !important;
  border-radius:10px !important;
  right:8px;top:8px;
  color:var(--hc-mint) !important;
  font-size:30px !important;
  opacity:.9;
}
html body .mfp-close:hover{opacity:1;text-shadow:0 0 12px var(--hc-mint)}
html body .mfp-arrow:before{border:none !important}
html body .mfp-arrow-left:after{border-right-color:var(--hc-mint) !important}
html body .mfp-arrow-right:after{border-left-color:var(--hc-mint) !important}

/* ── 10. Хлібні крихти, форми, пагінація ──────────────── */
html body .breadcrumb{
  background:transparent !important;
  border:none !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:12px !important;
  letter-spacing:.04em;
}
html body .breadcrumb a{color:var(--hc-steel) !important}
html body .breadcrumb a:hover{color:var(--hc-mint-deep) !important}
html body .form-control{
  border:1px solid var(--hc-hairline) !important;
  border-radius:10px !important;
  box-shadow:none !important;
}
html body .form-control:focus{
  border-color:var(--hc-mint) !important;
  box-shadow:0 0 0 3px rgba(10,219,139,.15) !important;
}
html body .pagination > li > a{
  border-color:var(--hc-hairline) !important;
  color:var(--hc-ink) !important;
  border-radius:8px !important;
  margin:0 3px;
}
html body .pagination > .active > a{
  background:var(--hc-ink) !important;
  border-color:var(--hc-ink) !important;
  color:#fff !important;
}
html body .alert-success{
  background:rgba(10,219,139,.1) !important;
  border-color:var(--hc-mint) !important;
  color:var(--hc-ink) !important;
}

/* ── 11. Карусель партнерів ───────────────────────────── */
html body .main-carousel img{
  filter:grayscale(1) opacity(.55);transition:filter .25s;
}
html body .main-carousel img:hover{filter:none}

/* ── 12. Футер ────────────────────────────────────────── */
html body .main-footer{
  background:var(--hc-ink) !important;
  border:none !important;
  position:relative;
  padding-top:52px;
}
html body .main-footer::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hc-mint) 30%,var(--hc-mint) 70%,transparent);
  opacity:.6;
}
html body .foot-col-head{
  font-family:'IBM Plex Mono',monospace !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#7E8B96 !important;
}
html body .main-footer p, html body .main-footer li,
html body .footer-links a, html body .footer-contact-links li{
  color:#B8C4CE !important;
  font-size:14px !important;
}
html body .footer-links a:hover{color:var(--hc-mint) !important}
html body .footer-contact-links{font-family:'IBM Plex Mono',monospace !important;font-size:13px !important}
html body .copyright{
  background:var(--hc-ink) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:12px !important;
  letter-spacing:.06em;
}
html body .copyright p, html body .copyright .copyright-text{color:#7E8B96 !important}

/* ── 13. Адаптивне відео та фото в описах ─────────────── */
html body #tab-description iframe,
html body #tab-description video,
html body #tab-description embed,
html body .product-tabs-wrap iframe,
html body #content iframe[src*="youtube"],
html body #content iframe[src*="youtu.be"],
html body #content iframe[src*="vimeo"]{
  display:block;
  width:100% !important;
  max-width:820px;
  height:auto !important;
  aspect-ratio:16/9;
  margin:20px auto;
  border:1px solid var(--hc-hairline);
  border-radius:12px;
}
html body #tab-description img,
html body .product-tabs-wrap img{
  max-width:100% !important;
  height:auto !important;
}

/* ── 14. Скролбар та решта ────────────────────────────── */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--hc-ice)}
::-webkit-scrollbar-thumb{background:#C7D2DC;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--hc-mint)}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important;transition:none !important}
}
/* ═══ Прибрати форму зворотного зв'язку зі сторінки Контакти ═══ */
html body #information-contact form,
html body #information-contact legend,
html body #information-contact fieldset{
  display:none !important;
}