/* =======================================================================================
   FanArt18 — Ultra Dark Premium Theme (без изменения размеров изображений)
   ======================================================================================= */

/* -------------------- Палитра -------------------- */
:root{
  --accent-red:#ff2e2e;
  --violet:#3a1e5c;
  --steel:#5f5f5f;
  --panel:#181a20;
  --panel-2:#171a21;
  --ink:#0f1116;
  --text:#e6e6e6;
  --muted:#a6a6a6;
  --hairline:rgba(255,255,255,.08);
}

/* === GLOBAL STYLES (dark theme like mockup) === */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }

body {
  width: 100%;
  height: 100%;
  font-family: 'KyivType', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  background:
    radial-gradient(1200px 500px at 50% -200px, rgba(99,72,199,.12), transparent 60%),
    linear-gradient(180deg, #0f1116 0%, #0d0f14 100%);
  background-attachment: fixed,fixed;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Полупрозрачный «пропеллер» поверх фона */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('prop.png');
  background-repeat: repeat;
  background-size: 1200px 1500px;
  background-position: center center;
  opacity: 0.18;
  z-index: -1;
  pointer-events: none;
}

/* Типографика */
h1, h2, h3, h4, h5, h6 { color: #dcdcdc; margin:0 0 .5rem; }
h3 {
  color: #ffffff;
  font-size: 26px;
  text-transform: uppercase;
  padding-top: 10px;
  padding-bottom: 20px;
  position: relative;
  letter-spacing: 1px;
  text-align: center;
}
a{ color:#dee1ff; text-decoration:none; }
a:hover{ color:#fff; }

legend { padding: 7px 0; margin-bottom: 20px; border-bottom: 1px solid #2b2f36; }
label { font-size: 12px; font-weight: normal; }
button:focus { outline: none !important; }

/* container */
#container { width: 100%; min-height: 100%; position: relative; }

/* content paddings */
#content, #column-left, #column-right { padding-bottom: 380px; }
@media (min-width: 576px){ #content, #column-left, #column-right { padding-bottom: 300px; }}

/* alerts */
#alert { z-index: 9999; position: fixed; top: 30%; left: 50%; width: 420px; margin-left: -210px; }
@media (min-width: 992px){ #alert { width: 600px; margin-left: -300px; } }
#alert .alert { margin-bottom: 15px; box-shadow:0 0 0 5px rgba(255,255,255,.06); }

/* top bar */
#top{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 20px; position: relative; padding-bottom: 5px;
  color: #b9b9b9;
}
#top ul.list-inline { margin-bottom: 0; }
#top .list-inline-item > a, #top .list-inline-item .dropdown > a{
  font-size: 1.05em; color: #d4d4d4; line-height: 40px; vertical-align: middle; padding: 10px 0 5px 0;
}
#top a:hover{ color:#ffffff; }

/* logo */
#logo{ text-align:center; margin:7px 0; }
#logo img{ max-width:200px; height:auto; }
@media (min-width:768px){ #logo{ text-align:left; } }

/* search */
#search{ margin-bottom:10px; }
#search .form-control-lg{
  height:40px; font-size:13px; line-height:20px; padding:0 12px;
  background:linear-gradient(180deg, #1c1f26, #15171c);
  border:1px solid var(--hairline);
  color:#fff;
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
#search .form-control-lg::placeholder{ color:#9aa0ab; }
#search .form-control-lg:focus{ box-shadow:0 0 0 3px rgba(58,30,92,.35); }
#search .btn-lg{ font-size:15px; line-height:18px; padding:.57rem 30px; text-shadow:0 1px 0 #000; border-radius:10px; }

/* === CART STYLE === */
#cart{ margin-bottom:10px; }
#cart .img-thumbnail{ min-width:100px; border-radius:6px; border:1px solid #444; }

/* Кнопка корзины — новая версия */
#cart .btn-lg {
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  padding: 12px 30px;
  color: #f1f1f1;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
#cart .btn-lg:hover {
  background: linear-gradient(180deg, #6a6a78, #4a4a55, #33333d);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,46,46,.18);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(90deg, #ff3d3d, #ff5f5f, #ff8a5f);
  -webkit-text-fill-color: transparent;
}

/* текст становится кроваво-красным на hover */
#cart .btn-lg:hover{
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg,#b31217 0%, #e52d27 35%, #ff6a59 70%, #b31217 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 6px rgba(194,30,44,.35); /* мягкий «blood glow», можно убрать */
}

/* ===== Empty cart: Continue button — premium GREY ===== */
#shopping-cart .btn.btn-primary{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* размер: длиннее и чуть шире */
  min-height: 40px;
  min-width: 220px;            /* длина */
  padding: 10px 22px;          /* ширина */

  /* типографика: на размер больше */
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .25px;

  color: #E9EDF3;
  background: linear-gradient(180deg,#595c67 0%, #3a3d45 60%, #2b2d33 100%);
  border: 1px solid #6f747c;
  border-radius: 14px;
  outline: 0;

  box-shadow: 0 8px 18px rgba(0,0,0,.35),
              inset 0 1px 0 rgba(255,255,255,.06);
  transition: background .2s ease, border-color .2s ease,
              box-shadow .25s ease, transform .08s ease;
  overflow: hidden; /* для блика */
}

/* мягкий «стеклянный» верхний блик */
#shopping-cart .btn.btn-primary::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(130% 70% at 50% -20%,
            rgba(255,255,255,.16), transparent 60%);
  pointer-events:none;
  opacity:.35;
  transition: opacity .2s ease;
}

/* hover: светлее графит, деликатное свечение */
#shopping-cart .btn.btn-primary:hover{
  background: linear-gradient(180deg,#676a76 0%, #474a54 60%, #343740 100%);
  border-color:#8a9099;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06),
              0 14px 32px rgba(0,0,0,.45);
  transform: translateY(-1px);
}

/* shine-полоска при hover */
#shopping-cart .btn.btn-primary:hover::after{
  content:"";
  position:absolute; top:0; left:-120%;
  width:100%; height:100%;
  background: linear-gradient(105deg,
              transparent 0%,
              rgba(255,255,255,.18) 40%,
              rgba(255,255,255,.45) 50%,
              rgba(255,255,255,.18) 60%,
              transparent 100%);
  transform: skewX(-15deg);
  animation: cartGreyShine 900ms ease forwards;
}
@keyframes cartGreyShine{ to { left:120%; } }

/* active / focus */
#shopping-cart .btn.btn-primary:active{
  transform: translateY(1px);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.4);
}
#shopping-cart .btn.btn-primary:focus-visible{
  outline:0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08),
              0 0 0 6px rgba(130,135,145,.35);
}

/* мобилка: на всю ширину */
@media (max-width:576px){
  #shopping-cart .btn.btn-primary{ width:100%; min-width:0; }
}


#cart .btn-lg:focus { outline: none; box-shadow: 0 0 0 2px rgba(120,120,140,0.5); }

#cart .dropdown-menu {
  background: #1e1e1e;
  color: #eee;
  border-radius: 10px;
  border: 1px solid #555;
  padding: 10px;
  box-shadow:0 24px 40px rgba(0,0,0,.55);
}
#cart .dropdown-menu li { min-width: 320px; padding: 8px 10px; border-bottom: 1px solid #444; }
#cart .dropdown-menu li:last-child { border-bottom: none; }
@media (max-width: 768px) { #cart .dropdown-menu li { min-width: 100%; } }

/* ===== NAV MENU ===== */
#menu{
  background: transparent !important;
  border: 0;
  border-radius: 12px;
  padding: 0 .75rem;
  margin-bottom: 20px;
}

/* Градиент шапки через .bg-primary */
.bg-primary{
  background: linear-gradient(90deg, #13151b 0%, var(--violet) 46%, var(--steel) 100%) !important;
  border-bottom: 2px solid var(--accent-red);
  box-shadow: 0 10px 28px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  border-radius: 12px;
  position: sticky; top: 8px; z-index: 1030; overflow:hidden;
  backdrop-filter: saturate(120%) blur(2px);
}
.bg-primary::after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}

/* Ссылки навигации */
#menu .navbar-nav > li > a,
.navbar .nav-link{
  color:#f1f1f1 !important;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:700;
  padding:.75rem 1rem;
  background: transparent;
  text-shadow: none;
  border-radius:8px;
  position:relative;
  transition:color .25s ease, background-color .25s ease, transform .2s ease;
}

/* Подчеркивание */
.navbar .nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: linear-gradient(90deg, transparent, var(--accent-red), transparent);
  transform: scaleX(0); transform-origin:center; transition:transform .25s ease; border-radius:2px;
}
#menu .navbar-nav > li > a:hover,
.navbar .nav-link:hover{
  color:#ff2e2e !important;
  background-color: rgba(255,255,255,.06);
}
.navbar .nav-link:hover::after{ transform: scaleX(1); }

/* Выпадающие меню */
#menu .dropdown-menu{
  border-top-left-radius: 0; border-top-right-radius: 0;
  background: linear-gradient(180deg, #1a1c22, #15171c);
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 48px rgba(0,0,0,.65);
  padding: .5rem;
}
#menu .dropdown-inner{ display:flex; flex-direction:column; }
#menu .dropdown-inner ul{ width:100%; min-width:210px; }
#menu .dropdown-item{
  color:#e0e0e0; font-weight:600; border-radius:8px; transition:all .2s ease; padding:.5rem .75rem;
}
#menu .dropdown-item:hover{ background:#2b2f3a; color:#fff; }

/* Desktop hover-open */
@media (min-width:960px){
  #menu .dropdown:hover .dropdown-menu{ display:block; }
  #menu .dropdown-inner{ flex-direction:row; }
  #menu .nav-item + .nav-item + .nav-item .dropdown-column-3{ left:-200px; }
  #menu .nav-item + .nav-item + .nav-item .dropdown-column-4{ left:-400px; }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-2{ left:-200px; }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-3{ left:-400px; }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-4{ left:-600px; }
}

/* Текст "Categories" */
#category{
  float:left; font-size:16px; font-weight:800; line-height:40px;
  color:#f0f0f0; text-shadow:none; text-transform:uppercase;
}

/* Бургер */
#menu .navbar-toggler i{ color:#fff; border-color:#fff; font-size:1.2rem; }
.navbar-toggler{ border-color:#fff; color:#fff; }

/* -------------------- Breadcrumb -------------------- */
.breadcrumb{
  margin:0 0 20px 0;
  padding:8px 12px;
  border:1px solid var(--hairline);
  border-radius: 10px;
  background-color: rgba(255,255,255,.03);
}
.breadcrumb i{ font-size:15px; }
.breadcrumb > li.breadcrumb-item{
  text-shadow:none; padding:0 20px; position:relative; white-space:nowrap; color:#dcdcdc;
}
.breadcrumb > li.breadcrumb-item > a{ text-decoration:none; color:#e6e6e6; }
.breadcrumb > li.breadcrumb-item:after{
  content:""; display:block; position:absolute; top:-3px; right:-5px; width:29px; height:29px;
  border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  transform: rotate(-45deg);
}
.breadcrumb > li.breadcrumb-item + li:before{ content:""; padding:0; }

/* -------------------- Product Thumb (изображения НЕ трогаем) -------------------- */
.product-thumb{
  border:1px solid var(--hairline);
  position:relative; height:100%;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius:12px; overflow:hidden;
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-thumb:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(0,0,0,.55);
  border-color: rgba(255,46,46,.5);
}
.product-thumb .image{ text-align:center; background:#121419; }
/* ВАЖНО: img не трогаем — никаких aspect-ratio/object-fit/width/height */

.product-thumb .image a:hover{ opacity:.9; }
.product-thumb .description{ padding:15px; margin-bottom:48px; }
.product-thumb .description h4{ font-weight:800; color:#fff; letter-spacing:.2px; }

.product-thumb .button{ display:flex; position:absolute; width:100%; bottom:0; }
.product-thumb .button button{
  width:33.33%; border:none; border-top:1px solid var(--hairline);
  background-color:#20232b; color:#d7d7d7; line-height:38px; text-align:center;
  font-weight:700; transition: background .2s ease, color .2s ease;
}
.product-thumb .button button:hover{ color:#fff; background-color:#262a33; text-decoration:none; cursor:pointer; }
.product-thumb .button button + button{ border-left:1px solid var(--hairline); }

@media (min-width:960px){
  .product-list .product-thumb{ display:flex; }
  .product-list .product-thumb .image{ flex-direction:column; margin-bottom:0; }
  .product-list .product-thumb .content{ flex-direction:column; flex:75%; position:relative; }
  .product-list .product-thumb .button{ border-left:1px solid var(--hairline); width:calc(100% - 15px); margin-left:15px; }
}

/* rating & price */
.rating .fa-stack{ width:20px; }
.rating .fa-star{ color:#FC0; font-size:15px; }
.rating .fa-star + .fa-star{ color:#E6B800; }
.price{ color:#ffd26f; font-weight:800; letter-spacing:.2px; }
.price-new{ font-weight:700; }
.price-old{ color:#dc512c; text-decoration:line-through; }
.price-tax{ color:#999; font-size:12px; display:block; }

/* -------------------- Blog -------------------- */
.blog-thumb{
  border:1px solid var(--hairline);
  margin-bottom:15px;
  background:var(--panel);
  border-radius:12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.blog-thumb .image{ text-align:center; margin-bottom:15px; }
.blog-thumb .image a:hover{ opacity:.9; }
.blog-thumb .description{ padding:15px; }

/* -------------------- Footer -------------------- */
footer{
  position:relative;
  width:100%;
  padding-top:30px;
  padding-bottom:28px;
  background: linear-gradient(180deg, #14161b 0%, #0e0f13 100%);
  border-top:1px solid var(--hairline);
  color:#cfcfcf;
}
footer::before{
  content:""; display:block; height:1px; margin:10px 0 22px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
footer hr{ border-top:none; border-bottom:1px solid #444; }
footer a{ color:#ddd; text-decoration:none; }
footer a:hover{ color:#fff; }
footer h5{
  font-size:16px; font-weight:800; color:#8b8b8b; margin:10px 0; text-transform:uppercase; letter-spacing:.4px;
}
footer .list-unstyled li a{ opacity:.92; transition:opacity .2s ease, color .2s ease; }
footer .list-unstyled li a:hover{ opacity:1; color:#fff; }

/* -------------------- Theme Custom CSS -------------------- */
#cookie{
  position:fixed; left:0; bottom:0; width:100%; height:150px; z-index:9999;
  opacity:.95; color:#ecf0f1; background:#343a40;
}
#cookie div{ font-size:16px; color:#FFFFFF; }

/* fonts */
@font-face{
  font-family:'KyivType';
  src: url('../stylesheet/fonts/KyivTypeSerif-VarGX.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal; font-display:swap;
}

/* header small btns */
.header-cart .btn{
  background-image: linear-gradient(180deg, #ff5c5c, #cc2a2a, #990000);
  color:#fff; border-radius:6px;
}

/* ===== misc ===== */
hr.custom-line{
  display:block; margin:10px auto 35px auto; width:85%; max-width:100%; height:1px;
  background-color: rgba(225,44,17,.95); border:none; opacity:.55;
}
h2.module-title{
  color:#BC3D2A; font-weight:800; text-transform:uppercase;
  text-shadow: 2px 2px 4px rgba(0,0,0,.7);
}
.carusel{ border:2px solid rgba(162,47,47,.8); }

/* -------------------- Адаптив -------------------- */
/* 1200↓ */
@media (max-width: 1200px){
  .navbar .nav-link{ padding:.65rem .85rem; }
  #search .form-control-lg{ height:38px; }
}

/* 992↓ — меню с горизонтальным скроллом */
@media (max-width: 992px){
  #menu .navbar-nav{
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap:.25rem;
  }
  #menu .navbar-nav > li{ flex: 0 0 auto; }
  .product-thumb{ margin-bottom:16px; }
}

/* 768↓ */
@media (max-width: 768px){
  h3{ font-size:22px; }
  .product-thumb .description{ padding:12px; margin-bottom:42px; }
  .product-thumb .button button{ line-height:36px; }
  footer .row > [class*="col-"]{ margin-bottom:18px; }
}

/* 576↓ — инпуты/кнопки на всю ширину */
@media (max-width: 576px){
  #search .form-control-lg, #cart .btn-lg{ width:100%; }
  .navbar .nav-link{ font-size:.92rem; }
}

/* -------------------- Наведение «shine» для .btn-primary -------------------- */
@keyframes shine { from{background-position:200% 0} to{background-position:-200% 0} }
.btn-primary{
  background:linear-gradient(180deg, #5e5a86, #3b3956);
  border:0; color:#fff; border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.btn-primary:hover{
  background-image: linear-gradient(110deg, rgba(255,255,255,.08) 10%, rgba(255,255,255,0) 30%),
                    linear-gradient(180deg, #6a6694, #474564);
  background-size:200% 100%, 100% 100%;
  animation:shine 1.2s linear 1;
}

/* -------------------- Bootstrap мелочи -------------------- */
.nav-tabs{ margin-bottom:15px; border-color:var(--hairline); }
.nav-tabs .nav-link{ color:#cfcfcf; }
.nav-tabs .nav-link.active{ background:var(--panel); border-color:var(--hairline); color:#fff; }
.form-check .form-check-input{ margin-top:.25rem; }
div.required .col-form-label:before, div.required .form-label:before{ content:"* "; color:#F00; font-weight:bold; }

/* ==== FIX: dropdown в шапке не открывается из-за overflow ==== */
#menu.navbar.bg-primary{
  overflow: visible !important;   /* было hidden */
  z-index: 1040;                  /* поверх остального контента */
}

#menu .navbar-collapse{
  overflow: visible !important;   /* чтобы меню из .collapse не резалось */
}

#menu .dropdown-menu{
  z-index: 2000;                  /* выше шапки и слайдера */
  margin-top: .4rem;              /* небольшой отступ вниз */
}

/* На десктопе оставляем ховер-поведение */
@media (min-width: 960px){
  #menu .dropdown:hover .dropdown-menu{
    display: block;
  }
}