/* ============================================================
   RETAIL theme для OpenCart 3 — light + фиолет, стиль Anker
   Оверрайд стоковой темы default (Bootstrap 3 DOM)
   Загружается ПОСЛЕ штатных стилей → побеждает
   ============================================================ */
:root{
  --page:#F6F5FB; --surf:#FFFFFF; --soft:#F0EEF8; --line:#E7E4F2;
  --ink:#1A1726; --mut:#6E6A85; --muted2:#948FAC;
  --primary:#6D28D9; --primary-d:#5B21B6; --primary-l:#7C3AED;
  --grad:linear-gradient(120deg,#4C1D95 0%,#6D28D9 48%,#A21CAF 100%);
  --grad-soft:linear-gradient(120deg,#E9E1FB,#F6E2F6);
  --ok:#16A06A; --star:#F5A524;
  --radius:16px; --radius-s:12px; --shadow-h:0 16px 40px rgba(124,58,237,.16);
}
/* базовое */
body{background:var(--page)!important;color:var(--ink);font-family:'Onest',system-ui,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
a{color:var(--primary)}a:hover{color:var(--primary-d)}
.container{max-width:1280px}
img{max-width:100%}
/* убрать стоковую «рамочность» */
#content{padding-top:6px}

/* ---------- ВЕРХНЯЯ ПЛАШКА (#top) ---------- */
#top{background:var(--ink);border:none;padding:6px 0;min-height:0}
#top .container{max-width:1280px}
#top,#top a,#top .dropdown-menu li>a{color:#D8D3EA!important;font-size:12.5px}
#top a:hover{color:#fff!important}
#top .btn-link{color:#D8D3EA!important}

/* ---------- ШАПКА (#header) ---------- */
header#header,#header{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border:none!important;box-shadow:0 1px 0 var(--line);margin:0;position:sticky;top:0;z-index:1000}
#logo{margin:14px 0}
#logo a{font-family:'Manrope';font-weight:800;font-size:26px;color:var(--ink);background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* поиск */
#search{margin:14px 0;height:auto}
#search .form-control{height:48px;border:1.5px solid var(--line);border-radius:var(--radius-s) 0 0 var(--radius-s);background:var(--soft);font-size:14.5px;box-shadow:none}
#search .form-control:focus{border-color:var(--primary)}
#search .btn,#search .input-group-btn .btn{height:48px;background:var(--primary);border:none;border-radius:0 var(--radius-s) var(--radius-s) 0;color:#fff;padding:0 20px}
#search .btn:hover{background:var(--primary-d)}
/* корзина */
#cart{margin:14px 0}
#cart>.btn{background:var(--primary);border:none;border-radius:var(--radius-s);color:#fff;font-weight:700;height:48px;padding:0 18px}
#cart>.btn:hover,#cart.open>.btn{background:var(--primary-d);color:#fff}
#cart .dropdown-menu{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-h);min-width:340px}

/* ---------- МЕНЮ КАТЕГОРИЙ (#menu) ---------- */
#menu{background:var(--surf);border:none;border-radius:var(--radius-s);margin-bottom:18px;box-shadow:0 6px 20px rgba(26,23,38,.05)}
#menu .navbar-nav>li>a{color:var(--ink);font-family:'Manrope';font-weight:600;font-size:14.5px;padding:15px 16px;background:none}
#menu .navbar-nav>li>a:hover,#menu .navbar-nav>li.open>a{color:var(--primary);background:var(--soft)}
#menu .dropdown-menu{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-h);padding:10px}
#menu .dropdown-inner a{color:var(--ink)}#menu .dropdown-inner a:hover{color:var(--primary)}
#menu .see-all{border-radius:0 0 var(--radius) var(--radius);color:var(--primary)}

/* ---------- ЗАГОЛОВКИ/ХЛЕБНЫЕ КРОШКИ ---------- */
.breadcrumb{background:none;padding:14px 0;font-size:13px}
.breadcrumb>li a{color:var(--mut)}
h1,h2{font-size:28px;margin:8px 0 18px}

/* ---------- КАРТОЧКА ТОВАРА (.product-thumb) ---------- */
.product-thumb{background:var(--surf);border:1px solid var(--line)!important;border-radius:var(--radius);overflow:hidden;transition:.22s;margin-bottom:24px}
.product-thumb:hover{transform:translateY(-6px);box-shadow:var(--shadow-h);border-color:transparent!important}
.product-thumb .image{padding:10px;background:var(--soft)}
.product-thumb .image img{border-radius:10px;margin:0 auto}
.product-thumb .caption{padding:14px 16px;min-height:auto}
.product-thumb h4{font-family:'Onest';font-weight:600;font-size:14.5px;line-height:1.35}
.product-thumb h4 a{color:var(--ink)}
.product-thumb .description{display:none}
.product-thumb .price{color:var(--ink);font-family:'Manrope';font-weight:800;font-size:20px;padding:0 16px}
.product-thumb .price-old{color:var(--muted2);font-weight:400;font-size:13px;text-decoration:line-through}
.product-thumb .price-new{color:var(--ink)}
.product-thumb .price-tax{display:none}
/* кнопки на карточке */
.product-thumb .button-group{border:none;background:none;display:flex;gap:6px;padding:12px 16px 16px}
.product-thumb .button-group button{background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:10px;height:44px;font-weight:600;transition:.18s}
.product-thumb .button-group button:first-child{flex:1;background:var(--primary);color:#fff;border-color:transparent}
.product-thumb .button-group button:first-child:hover{background:var(--primary-d)}
.product-thumb .button-group button:hover{color:var(--primary);border-color:var(--primary)}

/* ---------- КНОПКИ ---------- */
.btn-primary{background:var(--primary);border-color:var(--primary);border-radius:var(--radius-s);font-family:'Manrope';font-weight:700;padding:11px 22px}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:var(--primary-d);border-color:var(--primary-d)}
.btn-default{border-radius:var(--radius-s);border:1.5px solid var(--line);background:var(--surf);font-weight:600}
.btn-default:hover{border-color:var(--primary);color:var(--primary)}
.btn-lg{padding:15px 30px}

/* ---------- СТРАНИЦА ТОВАРА ---------- */
#product .price-new,ul.list-unstyled .price-new,.product-info .price{font-family:'Manrope';font-weight:800;color:var(--ink)}
.thumbnails>li a{border:1px solid var(--line);border-radius:10px}
.nav-tabs{border-bottom:1px solid var(--line)}
.nav-tabs>li.active>a{color:var(--primary);border:none;border-bottom:2px solid var(--primary);background:none}
.nav-tabs>li>a{color:var(--mut);border:none}

/* фильтры / колонки */
#column-left .list-group-item,#column-right .list-group-item{border-color:var(--line);color:var(--ink)}
#column-left .list-group-item:hover{color:var(--primary)}
.panel{border-radius:var(--radius);border-color:var(--line)}
.panel-heading{background:var(--soft);border-radius:var(--radius) var(--radius) 0 0}

/* алерты/успех */
.alert-success{background:#E9F9F1;border-color:#BFE9D6;color:#0B6B45;border-radius:var(--radius-s)}

/* ---------- ФУТЕР ---------- */
footer{background:var(--ink)!important;color:#B9B4CC;margin-top:44px;padding:44px 0 18px;border:none}
footer h5{color:#fff;font-family:'Manrope';font-size:15px;margin-bottom:14px}
footer a,footer ul li a{color:#B9B4CC}
footer a:hover{color:#C9A7FF}
footer hr{border-color:rgba(255,255,255,.08)}
footer .secret-adm{color:#7E7995;cursor:pointer;font-size:12.5px}

/* ---------- HERO-заставка (вставим на главной) ---------- */
.retail-hero{position:relative;border-radius:24px;overflow:hidden;background:var(--grad);color:#fff;padding:56px 56px;margin:8px 0 26px;min-height:320px;display:flex;flex-direction:column;justify-content:center}
.retail-hero::before{content:"";position:absolute;width:420px;height:420px;right:-90px;top:-120px;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 60%);border-radius:50%}
.retail-hero h1{color:#fff;font-size:48px;max-width:560px;margin:0 0 14px;position:relative}
.retail-hero p{font-size:18px;opacity:.95;max-width:440px;margin-bottom:26px;position:relative}
.retail-hero .btn{position:relative}
.retail-hero .k{font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;opacity:.92;position:relative;margin-bottom:10px}
.retail-hero .btn-white{background:#fff;color:var(--primary-d);font-family:'Manrope';font-weight:700;border:none;display:inline-block}
.retail-hero .btn-white:hover{background:#F3EEFE;color:var(--primary-d)}
.retail-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.retail-feats .f{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;gap:12px;align-items:center;font-size:13.5px}
.retail-feats .f .e{font-size:22px}
.retail-feats .f b{font-family:'Manrope';display:block;font-size:14px}
.retail-feats .f span{color:var(--mut)}

/* плитки категорий на главной */
.retail-sec-h{font-family:'Manrope';font-size:26px;font-weight:800;margin:28px 0 16px}
.retail-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:14px}
.rc{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);padding:20px 12px;text-align:center;transition:.2s;color:var(--ink);display:block;text-decoration:none}
.rc:hover{transform:translateY(-5px);box-shadow:var(--shadow-h);border-color:transparent;color:var(--ink)}
.rc .ic{width:56px;height:56px;margin:0 auto 10px;border-radius:16px;background:var(--grad-soft);display:grid;place-items:center;font-size:26px}
.rc b{font-family:'Manrope';font-weight:700;font-size:13px;display:block}
.rc span{font-size:11px;color:var(--muted2)}
@media(max-width:1080px){.retail-cats{grid-template-columns:repeat(4,1fr)}}
@media(max-width:767px){.retail-cats{grid-template-columns:repeat(3,1fr)}}

/* ---------- АНИМАЦИИ (GSAP reveal) ---------- */
.reveal,.product-thumb{will-change:transform,opacity}
/* скрытое стартовое состояние — ТОЛЬКО если JS активен (иначе контент виден всегда) */
html.js [data-reveal]{opacity:0;transform:translateY(24px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- мобилка ---------- */
@media(max-width:767px){
  .retail-hero{padding:32px 22px;min-height:auto}
  .retail-hero h1{font-size:30px}
  .retail-feats{grid-template-columns:1fr 1fr}
  #logo a{font-size:22px}
  h1,h2{font-size:23px}
}
