/* ============================================
   MOTOR-DJI.RU — Modern 2026 Skin Overlay
   Version: 1.0 | Date: 2026-02-25
   Non-destructive: remove one <link> to revert
   ============================================ */

/* --- Design Tokens --- */
:root {
  --g: #46c673;
  --g-light: #e8faf0;
  --g-dark: #2ea85a;
  --g-glow: rgba(70,198,115,.25);
  --orange: #f38539;
  --orange-light: #fff4ec;
  --bg: #f5f7f6;
  --card: #ffffff;
  --text: #1a2b25;
  --text-2: #5a6b63;
  --text-3: #8a9b93;
  --border: rgba(0,0,0,.06);
  --glass: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.45);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.08);
  --glass-blur: blur(16px);
  --r: 18px;        /* border-radius base */
  --r-sm: 12px;
  --r-lg: 24px;
  --r-xl: 32px;
  --ease: cubic-bezier(.25,.8,.25,1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* --- Font --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --- Base Reset --- */
body {
  font-family: var(--font) !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
  transition-timing-function: var(--ease);
}

a {
  color: var(--g-dark);
  transition: color .2s var(--ease);
}
a:hover, a:focus {
  color: var(--g);
  text-decoration: none;
}

/* --- Typography --- */
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
  font-family: var(--font) !important;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
h1.title, h2.title, h3.title {
  font-weight: 700;
  letter-spacing: -.02em;
}
.main-title {
  font-family: var(--font) !important;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: none;
}
.main-title:after {
  display: none !important;
}

/* --- Container max-width bump --- */
@media (min-width: 1200px) {
  .container { width: 1200px; }
}

/* =============================================
   HEADER — Liquid Glass
   ============================================= */
.header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.header-top {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}
@media (max-width:767px) {
  .header-top {
    box-shadow: none !important;
    height: auto !important;
    margin-top: 70px !important;
    margin-bottom: 5px !important;
  }
}

/* Phone block */
.header-phones {
  background: var(--g-light) !important;
  border-radius: var(--r) !important;
  border: 1px solid rgba(70,198,115,.15);
  padding: 8px 14px !important;
  backdrop-filter: blur(8px);
}
.header-phones:after {
  display: none !important;
}
.header .phone a, .header .phone a:hover {
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}
.header-phones .mode {
  color: var(--text-3) !important;
  font-size: 12px !important;
}

/* Logo */
.header .logo img {
  max-width: 280px;
  transition: opacity .3s;
}
.header .logo img:hover { opacity: .85; }

/* Address */
.header .address a span {
  font-style: normal !important;
  font-weight: 500 !important;
  border-bottom: none !important;
  color: var(--text-2);
}

/* Ali-Avito badge */
.ali-avito {
  background: var(--bg) !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--border);
  padding: 6px 10px 5px !important;
}

/* User block */
.user-block {
  background: var(--bg) !important;
  border-radius: var(--r) !important;
  border: 1px solid var(--border);
  padding: 8px 14px !important;
}
.header .auth a {
  font-weight: 500 !important;
  color: var(--text-2) !important;
}
.header .auth a:hover { color: var(--g) !important; }
.header .auth .logged {
  background: var(--g-light) !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid rgba(70,198,115,.12);
}
.header .auth .logged a.username {
  color: var(--g-dark) !important;
  font-weight: 600 !important;
}
.header .auth .lk {
  color: var(--g-dark) !important;
  font-weight: 600 !important;
}

/* Reviews button */
.btn-head-reviews, .btn-menu-reviews {
  border-color: var(--orange) !important;
  color: var(--orange) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
  transition: all .25s var(--ease);
}
.btn-head-reviews:hover, .btn-menu-reviews:hover {
  background: var(--orange) !important;
  color: #fff !important;
  border-color: var(--orange) !important;
}

/* Cart instruction */
.cart-instr-block a span {
  border-bottom: 1px solid rgba(0,0,0,.15) !important;
  color: var(--text-3) !important;
}

/* =============================================
   NAVIGATION BAR — Glass Dark
   ============================================= */
.header-menu {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
  margin-top: 12px !important;
  border-radius: 0;
}
.header-menu .nav > li > a,
.header-menu .nav > li > a:focus {
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: .01em;
  padding: 13px 16px !important;
  color: rgba(255,255,255,.85) !important;
  transition: color .2s, background .2s;
  border-radius: 8px;
  margin: 2px 0;
}
.header-menu .nav > li > a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}
.header-menu .nav > li > a:after {
  display: none !important;
}
.header-menu .nav > li.first > a {
  padding-left: 16px !important;
}

/* Callback / VIN / Bookmark links in nav */
.callback-link, .add-bookmark, .vinquery-link {
  border-radius: var(--r-sm) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: rgba(255,255,255,.6) !important;
  font-weight: 500 !important;
  backdrop-filter: blur(4px);
  transition: all .25s var(--ease);
}
.callback-link:hover, .add-bookmark:hover, .vinquery-link:hover {
  border-color: var(--g) !important;
  color: var(--g) !important;
  background: rgba(70,198,115,.08);
}

/* =============================================
   SEARCH BAR — Liquid Glass Green
   ============================================= */
.header-search {
  background: linear-gradient(135deg, #3dba68 0%, #46c673 40%, #50d080 100%) !important;
  padding: 10px 0 12px !important;
  position: relative;
}
.header-search::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.15) 0%, transparent 60%);
  pointer-events: none;
}

/* Catalog button */
.header-search .catalog-block a {
  border-radius: var(--r) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 11px 18px !important;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  transition: all .25s var(--ease);
}
.header-search .catalog-block a:hover {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Search input — glass */
.header-search .search-block .search-input-group input {
  border-radius: var(--r) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(12px);
  padding: 13px 42px 13px 16px !important;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: all .3s var(--ease);
}
.header-search .search-block .search-input-group input:focus {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(255,255,255,.6) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.1), 0 0 0 3px rgba(255,255,255,.2);
  outline: none;
}
.header-search .search-block .search-input-group input::placeholder {
  color: var(--text-3);
  font-weight: 400;
}
.header-search .search-block .search-input-group button {
  color: var(--text-3) !important;
  font-size: 18px !important;
  right: 14px !important;
  top: 10px !important;
  transition: color .2s;
}
.header-search .search-block .search-input-group button:hover {
  color: var(--g-dark) !important;
}

/* Cart button — glass dark */
.header-search .cart-block {
  background: rgba(0,0,0,.25) !important;
  backdrop-filter: blur(12px);
  border-radius: var(--r) !important;
  border: 1px solid rgba(255,255,255,.1);
  padding: 2px 10px 1px !important;
  transition: all .25s var(--ease);
}
.header-search .cart-block:hover {
  background: rgba(0,0,0,.35) !important;
  transform: translateY(-1px);
}
.header-search .cart-block a span {
  background: var(--orange) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
}

/* Popular query */
.popular-query a, .popular-query a:focus {
  color: rgba(255,255,255,.8) !important;
  border-bottom-color: rgba(255,255,255,.3) !important;
  font-weight: 400;
}
.popular-query a:hover {
  color: #fff !important;
}

/* Floating search */
.header-search.floating {
  box-shadow: 0 4px 24px rgba(0,0,0,.15) !important;
}

/* =============================================
   BREADCRUMBS
   ============================================= */
.breadcrumb {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  padding: 10px 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.breadcrumb > .active { color: var(--text-3) !important; }
.breadcrumb > li + li:before { color: var(--text-3) !important; }

/* =============================================
   BUTTONS — Modern pill/rounded
   ============================================= */
.btn {
  border-radius: 50px !important;
  font-weight: 500 !important;
  font-family: var(--font) !important;
  transition: all .25s var(--ease);
  letter-spacing: .01em;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.btn:active {
  transform: translateY(0);
}

.btn-success, .btn-green {
  background: linear-gradient(135deg, var(--g) 0%, var(--g-dark) 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px var(--g-glow);
}
.btn-success:hover, .btn-green:hover {
  box-shadow: 0 4px 14px rgba(70,198,115,.15), 0 10px 30px rgba(70,198,115,.12) !important;
  background: linear-gradient(135deg, #50d080 0%, var(--g) 100%) !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--g) 0%, var(--g-dark) 100%) !important;
  border: none !important;
  box-shadow: 0 2px 8px var(--g-glow);
}
.btn-primary:hover {
  box-shadow: 0 4px 14px rgba(70,198,115,.15), 0 10px 30px rgba(70,198,115,.12) !important;
}

.btn-default {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.btn-default:hover {
  background: var(--bg) !important;
  border-color: rgba(0,0,0,.12) !important;
}

/* =============================================
   FORM CONTROLS
   ============================================= */
.form-control {
  border-radius: var(--r-sm) !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  font-family: var(--font) !important;
  padding: 10px 14px !important;
  transition: border-color .2s, box-shadow .2s;
  background: var(--card) !important;
}
.form-control:focus {
  border-color: var(--g) !important;
  box-shadow: 0 0 0 3px var(--g-glow) !important;
  outline: none;
}

/* =============================================
   CARDS / PRODUCT ITEMS — Glass Cards
   ============================================= */

/* Tile product cards */
.products-list-block .products-list-tile .product-item,
.products-list-block .products-list-bar .product-item,
.product-item-carousel {
  border-radius: var(--r) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.02), 0 4px 16px rgba(0,0,0,.04) !important;
  overflow: hidden;
  background: var(--card);
  transition: all .3s var(--ease);
}
.products-list-block .products-list-tile .product-item:hover,
.products-list-block .products-list-bar .product-item:hover,
.product-item-carousel:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.03), 0 12px 40px rgba(70,198,115,.1) !important;
  transform: translateY(-3px);
  border-color: rgba(70,198,115,.2) !important;
}

/* Product photo */
.products-list-block .products-list-bar .product-item .product-photo,
.products-list-block .products-list-tile .product-item .product-photo,
.product-item-carousel .product-photo {
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
}
.products-list-block .products-list-bar .product-item .product-photo.out-of-stock:before,
.products-list-block .products-list-tile .product-item .product-photo.out-of-stock:before,
.product-item-carousel .product-photo.out-of-stock:before {
  border-radius: 8px !important;
  font-weight: 500 !important;
  background-color: rgba(243,133,57,.9) !important;
  backdrop-filter: blur(4px);
  border: none !important;
}

/* Product name */
.products-list-block .products-list-bar .product-item .product-name a,
.products-list-block .products-list-tile .product-item .product-name a,
.product-item-carousel .product-name a {
  color: var(--text) !important;
  font-weight: 500 !important;
}

/* Product price */
.products-list-block .products-list-bar .product-item .product-price,
.products-list-block .products-list-tile .product-item .product-price,
.product-item-carousel .product-price {
  font-weight: 700 !important;
  color: var(--text) !important;
}
.products-list-block .products-list-bar .product-item .product-price.discount,
.products-list-block .products-list-tile .product-item .product-price.discount,
.product-item-carousel .product-price.discount {
  color: var(--orange) !important;
}

/* Product cart area */
.products-list-block .products-list-tile .product-item .product-cart,
.products-list-block .products-list-bar .product-item .product-cart,
.product-item-carousel .product-cart {
  background: var(--bg) !important;
  border-top: 1px solid var(--border);
}

/* Tile green button */
.products-list-block .products-list-tile .product-item .product-cart .btn-green {
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, var(--g) 0%, var(--g-dark) 100%) !important;
  border: none !important;
  box-shadow: 0 2px 8px var(--g-glow);
  transition: all .25s var(--ease);
}
.products-list-block .products-list-tile .product-item .product-cart .btn-green:hover {
  box-shadow: 0 4px 16px var(--g-glow) !important;
  opacity: 1 !important;
  transform: translateY(-1px);
}

/* Out of stock button */
.products-list-block .products-list-tile .product-item .product-cart .btn-out-stock,
.product-page-v2 .product-block .product-cart-block .out-stock-block .btn-out-stock {
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
}

/* =============================================
   PRODUCT PAGE v2 — Modernized
   ============================================= */
.product-page-v2 .product-block .product-cart-block {
  background: var(--bg) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border);
  padding: 16px 22px !important;
}
.product-page-v2 .product-block .product-cart-block .cart-brand-oem {
  border-bottom-color: rgba(0,0,0,.06) !important;
}
.product-page-v2 .product-block .cart-stock {
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
  font-style: normal !important;
}
.product-page-v2 .product-block .product-cart-block .add-to-cart {
  border-radius: var(--r-sm) !important;
  background: linear-gradient(135deg, var(--g) 0%, var(--g-dark) 100%) !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px var(--g-glow);
}
.product-page-v2 .product-block .product-cart-block .add-to-cart:hover {
  box-shadow: 0 4px 14px rgba(70,198,115,.15), 0 10px 30px rgba(70,198,115,.12) !important;
}
.product-page-v2 .product-block .product-cart-block .btn-quick-order {
  border-radius: var(--r-sm) !important;
}
.product-page-v2 .product-block .product-cart-block .btn-credit-order {
  border-radius: var(--r-sm) !important;
}

/* Product tabs */
.product-page-v2 .product-tabs .nav li a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  transition: all .2s var(--ease);
}
.product-page-v2 .product-tabs .nav li.active a {
  border-bottom: 2px solid var(--orange) !important;
  color: var(--orange) !important;
  background: var(--orange-light) !important;
}
.product-page-v2 .product-tabs .nav li a:hover {
  background: var(--bg) !important;
}

/* VIN block on product page */
.product-page-v2 .product-vin {
  background: linear-gradient(135deg, #3dba68 0%, #46c673 40%, #50d080 100%) !important;
  border-radius: var(--r-lg);
  margin: 20px 0 !important;
  padding: 30px 0 35px !important;
  position: relative;
  overflow: hidden;
}
.product-page-v2 .product-vin::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.12) 0%, transparent 50%);
  pointer-events: none;
}
.product-page-v2 .product-vin .product-vin-block a {
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Product images */
.product-images .images-big {
  border-radius: var(--r) !important;
  border-color: var(--border) !important;
}

/* Supplier products */
.product-page-v2 .supplier-products {
  border-radius: var(--r) !important;
  background: var(--bg) !important;
  border: 1px solid var(--border);
}

/* =============================================
   HOMEPAGE — Catalog Blocks
   ============================================= */
.homepage-catalog-1 .c-img {
  border-radius: var(--r) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.02), 0 4px 16px rgba(0,0,0,.04) !important;
  border: 1px solid var(--border);
  font-weight: 500 !important;
  transition: all .3s var(--ease);
}
.homepage-catalog-1 .c-img:hover {
  box-shadow: 0 8px 24px var(--g-glow) !important;
  transform: translateY(-2px);
}

.homepage-catalog-1 .minicatalog {
  border-radius: var(--r) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.02), 0 4px 16px rgba(0,0,0,.04) !important;
  border: 1px solid var(--border);
}

.homepage-catalog-2 .c-img {
  border-radius: var(--r) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.02), 0 4px 16px rgba(0,0,0,.04) !important;
  border: 1px solid var(--border);
  transition: all .3s var(--ease);
}
.homepage-catalog-2 .c-img:hover {
  box-shadow: 0 8px 24px var(--g-glow) !important;
  transform: translateY(-2px);
}

/* VIN box on homepage */
.homepage-catalog-2 .vin-box {
  background: linear-gradient(135deg, #3dba68, #46c673, #50d080) !important;
  border-radius: var(--r) !important;
  position: relative;
  overflow: hidden;
}
.homepage-catalog-2 .vin-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.15) 0%, transparent 60%);
  pointer-events: none;
}
.homepage-catalog-2 .vin-box h3 {
  position: relative;
}
.homepage-catalog-2 .vin-box .btn {
  border-radius: 50px !important;
  font-weight: 500 !important;
  backdrop-filter: blur(4px);
  position: relative;
}

/* =============================================
   FEATURES SECTION
   ============================================= */
.features {
  background: linear-gradient(135deg, #3dba68 0%, #46c673 50%, #50d080 100%) !important;
  position: relative;
}
.features::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(255,255,255,.1) 0%, transparent 50%);
  pointer-events: none;
}
.features .text {
  font-weight: 500 !important;
  font-size: 16px !important;
  letter-spacing: .01em;
  position: relative;
}

/* =============================================
   NEWS
   ============================================= */
.news .news-item,
.news-item {
  border-radius: var(--r) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.02), 0 4px 16px rgba(0,0,0,.04) !important;
  border: 1px solid var(--border);
  transition: all .3s var(--ease);
}
.news-item:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.08) !important;
}
.news-item .btn-green {
  border-radius: var(--r-sm) !important;
}
.show-news {
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
  transition: all .25s var(--ease);
}

/* =============================================
   BLOG POSTS
   ============================================= */
.blog-post {
  border-radius: var(--r) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
  border-color: var(--border) !important;
}

/* =============================================
   CATEGORY LIST
   ============================================= */
.category-list ul li a {
  border-radius: var(--r-sm) !important;
  border-color: var(--border) !important;
  font-weight: 500 !important;
  transition: all .2s var(--ease);
}
.category-list ul li a:hover {
  background: var(--g-light) !important;
  color: var(--g-dark) !important;
  border-color: rgba(70,198,115,.2) !important;
  transform: translateX(4px);
}

/* =============================================
   PAGINATION
   ============================================= */
.pagination > li > a, .pagination > li > span {
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
  margin: 0 2px !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  transition: all .2s var(--ease);
}
.pagination > li > a:hover {
  background: var(--g-light) !important;
  border-color: rgba(70,198,115,.2) !important;
  color: var(--g-dark) !important;
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
  background: linear-gradient(135deg, var(--g) 0%, var(--g-dark) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px var(--g-glow);
}

/* =============================================
   FOOTER — Modern Dark
   ============================================= */
footer {
  background: linear-gradient(180deg, #1a1a1a 0%, #111 100%) !important;
  border-top: 1px solid rgba(255,255,255,.05);
}
.footer-content {
  color: rgba(255,255,255,.6) !important;
  font-weight: 400;
}
footer ul li a {
  color: rgba(255,255,255,.5) !important;
  transition: color .2s var(--ease);
  font-weight: 400;
}
footer ul li a:hover {
  color: var(--g) !important;
  text-decoration: none !important;
}
footer .copyright {
  color: rgba(255,255,255,.3) !important;
  border-top: 1px solid rgba(255,255,255,.05);
  padding-top: 16px;
}
footer .foot-1, footer .foot-2, footer .foot-3 {
  border-right-color: rgba(255,255,255,.08) !important;
}

/* =============================================
   ALERTS
   ============================================= */
.alert {
  border-radius: var(--r) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  border: none !important;
}
#alert .alert-success {
  border-radius: var(--r) !important;
  background: rgba(20,20,20,.92) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* =============================================
   MODALS
   ============================================= */
.modal-content {
  border-radius: 28px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.2) !important;
  overflow: hidden;
}
.modal-header {
  border-bottom-color: var(--border) !important;
}
.modal-footer {
  border-top-color: var(--border) !important;
}

/* =============================================
   DROPDOWNS
   ============================================= */
.dropdown-menu {
  border-radius: var(--r) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.12) !important;
  padding: 6px !important;
  overflow: hidden;
}
.dropdown-menu > li > a {
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-weight: 400 !important;
  transition: all .15s var(--ease);
}
.dropdown-menu > li > a:hover {
  background: var(--g-light) !important;
  color: var(--g-dark) !important;
}

/* =============================================
   TABLES
   ============================================= */
.table {
  font-size: 14px !important;
}
.table > thead > tr > th,
.table > thead > tr > td {
  border-bottom-color: var(--border) !important;
  font-weight: 600;
}
.table > tbody > tr > td {
  border-top-color: var(--border) !important;
}
.table-hover > tbody > tr:hover {
  background: var(--g-light) !important;
}

/* =============================================
   WELL / PANELS
   ============================================= */
.well {
  border-radius: var(--r) !important;
  border-color: var(--border) !important;
  background: var(--bg) !important;
}
.panel {
  border-radius: var(--r) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.03) !important;
}

/* =============================================
   CART PAGE
   ============================================= */
.cart-form .well {
  border-radius: var(--r) !important;
  background: var(--bg) !important;
}
.cart-form .well:after {
  border-radius: 50% !important;
  background: var(--g) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* =============================================
   PRODUCT SORT BAR
   ============================================= */
.products-top-bar {
  background: var(--bg) !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--border);
}
.products-top-bar a {
  font-weight: 500 !important;
  color: var(--text-3) !important;
}
.products-top-bar a.active {
  color: var(--text) !important;
}

/* =============================================
   CONTACTS PAGE
   ============================================= */
.page-contacts .contacts-data {
  background: var(--bg) !important;
  border-radius: var(--r) !important;
  border: 1px solid var(--border);
  font-family: var(--font) !important;
}

/* =============================================
   VIN FORM
   ============================================= */
.vin-form {
  border-radius: var(--r) !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.06) !important;
  overflow: hidden;
}
.vin-form .vin-header {
  background: var(--bg) !important;
  font-weight: 600 !important;
}
.vin-form button {
  border-radius: var(--r-sm) !important;
}

/* =============================================
   CATALOG PAGE (Green box)
   ============================================= */
.page-catalog-new .catalog-green-box {
  border-radius: var(--r) !important;
  background: linear-gradient(135deg, #3dba68 0%, #46c673 100%) !important;
}

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); }

/* =============================================
   SELECTION
   ============================================= */
::selection {
  background: rgba(70,198,115,.2);
  color: var(--text);
}

/* =============================================
   SOCIAL
   ============================================= */
.social img {
  border-radius: var(--r-sm) !important;
  transition: all .25s var(--ease);
}
.social img:hover,
.social a:hover img {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
}

/* =============================================
   ACCOUNT
   ============================================= */
.account-menu a {
  border-radius: var(--r-sm) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.04) !important;
  font-weight: 500 !important;
  transition: all .2s var(--ease);
}
.account-menu a.active, .account-menu a:hover {
  background: var(--g-light) !important;
  box-shadow: none !important;
  color: var(--g-dark) !important;
}
.account-block {
  border-radius: var(--r) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.02), 0 4px 16px rgba(0,0,0,.04) !important;
}

/* =============================================
   MOBILE MENU — Glass Dark
   ============================================= */
@media (max-width: 767px) {
  .header-menu {
    background: rgba(20,20,20,.96) !important;
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255,255,255,.06);
  }
  .header-menu .nav > li.first > a,
  .header-menu .nav > li > a {
    border-radius: var(--r-sm) !important;
    margin: 2px 8px !important;
    padding: 12px 14px !important;
  }
  .header-search {
    box-shadow: 0 2px 12px rgba(0,0,0,.1) !important;
  }

  /* Mobile cart fix */
  .header .cart-fix {
    border-radius: var(--r-sm) 0 0 var(--r-sm) !important;
    background: var(--card) !important;
    border-color: var(--border) !important;
    box-shadow: -2px 0 12px rgba(0,0,0,.08) !important;
  }
}

/* =============================================
   SMOOTH SCROLL
   ============================================= */
html {
  scroll-behavior: smooth;
}

/* =============================================
   SEARCH HINT DROPDOWN
   ============================================= */
.search-form .search-hint {
  border-radius: var(--r) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.15) !important;
  border: 1px solid var(--border) !important;
  padding: 12px !important;
}
.search-form .search-hint a {
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
  border-color: var(--border) !important;
  transition: all .2s var(--ease);
}
.search-form .search-hint a:hover {
  background: var(--g-light) !important;
  border-color: rgba(70,198,115,.2) !important;
  color: var(--g-dark) !important;
}

/* =============================================
   SEARCH NOTICE
   ============================================= */
.search-notice {
  border-radius: var(--r-sm) !important;
}

/* =============================================
   ALERT SEARCH BAR
   ============================================= */
.alert-search {
  background: rgba(20,20,20,.95) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 4px 20px rgba(0,0,0,.2) !important;
}
.alert-search .btn {
  border-radius: 50px !important;
}

/* =============================================
   PRODUCT DELIVERY BOX
   ============================================= */
.product-delivery {
  border-top-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
}
.pd-right {
  background: var(--bg) !important;
  border-radius: var(--r) !important;
}

/* =============================================
   OWL CAROUSEL DOTS
   ============================================= */
.owl-theme .owl-dots .owl-dot span {
  border-radius: 50% !important;
  transition: all .25s var(--ease);
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--g) !important;
}
.owl-theme .owl-nav [class*=owl-] {
  border-radius: 50% !important;
  width: 36px;
  height: 36px;
  line-height: 36px;
  padding: 0 !important;
  text-align: center;
  transition: all .25s var(--ease);
}
.owl-theme .owl-nav [class*=owl-]:hover {
  background: var(--g) !important;
}

/* =============================================
   BANNERS
   ============================================= */
.banners .banner-row img {
  border-radius: var(--r-sm);
}

/* =============================================
   PRODUCT DISCOUNT / CALLME BLOCKS
   ============================================= */
.product-discount {
  border-radius: var(--r-lg) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
}
.product-callme {
  border-radius: var(--r-lg) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

/* =============================================
   PAYKEEPER
   ============================================= */
.paykeeper img {
  border-radius: var(--r-sm);
}

/* =============================================
   TOOLTIP / POPOVER
   ============================================= */
.tooltip-inner {
  border-radius: 8px !important;
  font-family: var(--font) !important;
  font-weight: 500;
  padding: 6px 12px !important;
}
.popover {
  border-radius: var(--r) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.15) !important;
}

/* =============================================
   AVITO RATING BADGE
   ============================================= */
.avito-rating {
  border-radius: var(--r-sm);
}

/* === PRODUCT CAROUSEL (Analogs, Components, Related) === */
.pcr-wrap{position:relative;margin:8px 0 16px;overflow:hidden}
.pcr-track{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;padding:8px 4px 12px;
    -ms-overflow-style:none;scrollbar-width:none}
.pcr-track::-webkit-scrollbar{display:none}

.pcr-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
    width:34px;height:34px;border-radius:50%;border:none;
    background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
    box-shadow:0 2px 12px rgba(0,0,0,.12);cursor:pointer;
    display:flex;align-items:center;justify-content:center;color:#444;
    transition:all .25s ease;opacity:0}
.pcr-wrap:hover .pcr-nav{opacity:.85}
.pcr-nav:hover{background:#46c673;color:#fff;opacity:1;box-shadow:0 4px 20px rgba(70,198,115,.4)}
.pcr-nav--l{left:2px}
.pcr-nav--r{right:2px}

.pcr-card{flex:0 0 190px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;
    overflow:hidden;transition:all .3s cubic-bezier(.25,.8,.25,1)}
.pcr-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(70,198,115,.2);border-color:rgba(70,198,115,.25)}

.pcr-card__img{height:150px;background:#fafafa url(/image/no_preview.png) center/contain no-repeat;
    position:relative;overflow:hidden}
.pcr-card__img a{display:block;width:100%;height:100%}
.pcr-card__img.out-of-stock::before{content:"Нет в наличии";position:absolute;top:8px;left:8px;
    background:#f38539;color:#fff;font-size:11px;padding:3px 8px;border-radius:6px;font-weight:500;z-index:1}

.pcr-card__meta{padding:8px 10px 0;display:flex;justify-content:space-between;align-items:center}
.pcr-card__oem{font-size:11px;color:#aaa;font-weight:600;letter-spacing:.02em}
.pcr-card__brand{font-size:11px;color:#666;font-weight:500}

.pcr-card__name{padding:4px 10px;height:36px;overflow:hidden}
.pcr-card__name a{font-size:13px;color:#444;text-decoration:none;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcr-card__name a:hover{color:#2a9d54}

.pcr-card__price{padding:4px 10px;font-size:17px;font-weight:600;color:#333}
.pcr-card__price.discount{color:#f38539}
.pcr-card__old{font-size:13px;color:#999;text-decoration:line-through;font-weight:400;margin-left:6px}

.pcr-card__cart{padding:6px 10px 10px}
.pcr-card__cart .btn{width:100%;border-radius:8px;font-size:12px;font-weight:500;
    padding:6px 10px;background:linear-gradient(135deg,#46c673 0%,#2ea85a 100%);
    border:none;color:#fff;transition:all .2s}
.pcr-card__cart .btn:hover{box-shadow:0 4px 14px rgba(70,198,115,.35);transform:translateY(-1px)}
.pcr-card__cart .btn:disabled{background:#ddd;color:#999;box-shadow:none;transform:none}

@media(max-width:768px){
    .pcr-card{flex:0 0 160px}
    .pcr-card__img{height:120px}
    .pcr-card__name{height:32px}
    .pcr-card__price{font-size:15px}
    .pcr-nav{width:28px;height:28px}
}
@media(max-width:480px){
    .pcr-card{flex:0 0 145px}
    .pcr-card__img{height:100px}
}

/* =============================================
   APPLE POLISH — iPhone-like refinements
   ============================================= */

/* Softer body background */
body {
  background: #f2f2f7 !important;
}

/* Cards — double-layer shadow like iOS */
.w-product {
  background: #fff;
  border-radius: 20px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: 0 0.5px 0 rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.03);
  border: none;
}

/* Product cart block — pill buttons */
.product-page-v2 .product-block .product-cart-block .add-to-cart {
  border-radius: 50px !important;
  padding: 12px 28px !important;
  font-size: 15px !important;
  letter-spacing: .02em;
}
.product-page-v2 .product-block .product-cart-block .btn-quick-order,
.product-page-v2 .product-block .product-cart-block .btn-credit-order {
  border-radius: 50px !important;
}

/* Info rows — cleaner spacing */
.product-info .info-row {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.product-info .info-row:last-child {
  border-bottom: none;
}
.product-info .info-title {
  color: #86868b !important;
  font-weight: 500;
  font-size: 14px;
}
.product-info .info-data {
  color: #1d1d1f !important;
  font-weight: 400;
  font-size: 14px;
}

/* Labels — softer pills */
.label-outline-info {
  border-radius: 50px !important;
  padding: 5px 12px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  border-color: rgba(0,122,255,.2) !important;
  color: #007aff !important;
  background: rgba(0,122,255,.06) !important;
}

/* Main title — Apple SF style */
.main-title span {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #1d1d1f;
}

/* AI Description — Apple reading style */
.ai-description {
  font-size: 15px;
  line-height: 1.65;
  color: #424245;
  letter-spacing: -.01em;
}
.ai-description h2, .ai-description h3 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  margin: 20px 0 8px !important;
}
.ai-description ul, .ai-description ol {
  padding-left: 20px;
}
.ai-description li {
  margin-bottom: 6px;
}

/* Collapse headers — cleaner */
.w-collapse .main-title a {
  color: #1d1d1f !important;
  text-decoration: none !important;
}
.w-collapse .main-title a:hover {
  color: #007aff !important;
}
.w-collapse .main-title .fa-plus-circle {
  color: #007aff;
  font-size: 18px;
  margin-right: 6px;
}

/* Header phones — softer */
.header-phones {
  border-radius: 16px !important;
}

/* Search input — extra smooth */
.header-search .search-block .search-input-group input {
  border-radius: 16px !important;
  padding: 14px 44px 14px 18px !important;
  font-size: 16px;
}

/* Catalog button — pill */
.header-search .catalog-block a {
  border-radius: 16px !important;
}

/* Cart button — rounder */
.header-search .cart-block {
  border-radius: 16px !important;
}

/* Breadcrumbs — softer */
.breadcrumb {
  border-radius: 14px !important;
  padding: 12px 18px !important;
}

/* Product photos — rounded corners */
.product-images .images-big {
  border-radius: 20px !important;
  overflow: hidden;
}

/* Dropdown — iOS sheet style */
.dropdown-menu {
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 20px 60px rgba(0,0,0,.12) !important;
  border: 0.5px solid rgba(0,0,0,.08) !important;
  padding: 8px !important;
}
.dropdown-menu > li > a {
  border-radius: 10px !important;
  padding: 10px 14px !important;
}

/* Pagination — pill style */
.pagination > li > a, .pagination > li > span {
  border-radius: 50px !important;
  min-width: 38px;
  text-align: center;
  padding: 8px 14px !important;
}

/* Product carousel cards — Apple card style */
.pcr-card {
  border-radius: 16px !important;
  box-shadow: 0 0.5px 0 rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.03) !important;
  border: none !important;
}
.pcr-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 10px 32px rgba(70,198,115,.12) !important;
  border: none !important;
}
.pcr-card__cart .btn {
  border-radius: 50px !important;
}

/* Aggregate carousel cards — Apple style */
.agg-c {
  border-radius: 16px !important;
  box-shadow: 0 0.5px 0 rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.03) !important;
  border: none !important;
}
.agg-c:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 10px 32px rgba(70,198,115,.12) !important;
}
.agg-c__lbl {
  border-top: none !important;
  background: transparent !important;
}
.agg-c.active .agg-c__lbl {
  background: #46c673 !important;
  border-radius: 0 0 16px 16px;
}

/* Nav arrows — pill shape */
.pcr-nav, .agg-nav {
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 0.5px 0 rgba(0,0,0,.04) !important;
}

/* Alerts — iOS style toast */
#alert .alert-success {
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.2) !important;
}

/* Product delivery box */
.product-page-v2 .product-block .product-cart-block {
  border-radius: 20px !important;
}

/* VIN block — extra rounded */
.product-page-v2 .product-vin {
  border-radius: 24px !important;
}
.product-page-v2 .product-vin .product-vin-block a {
  border-radius: 50px !important;
}

/* Page features — subtle background */
.page-grey {
  background: #f2f2f7 !important;
}

/* Form controls — bigger radius */
.form-control {
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  padding: 12px 16px !important;
}

/* User block, ali-avito — softer */
.user-block {
  border-radius: 16px !important;
}
.ali-avito {
  border-radius: 14px !important;
}

/* Smoother transitions globally */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Input quantity — round */
.product-cart .input-group .form-control {
  border-radius: 0 !important;
}
.product-cart .input-group .input-group-btn:first-child .btn {
  border-radius: 12px 0 0 12px !important;
}
.product-cart .input-group .input-group-btn:last-child .btn {
  border-radius: 0 12px 12px 0 !important;
}

/* ==============================
   STICKY PRODUCT TABS (Apple-style)
   ============================== */
.product-tabs{background:rgba(255,255,255,.85);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(0,0,0,.06);z-index:100;transition:box-shadow .3s ease}
.product-tabs.is-sticky{position:sticky;top:0;box-shadow:0 1px 12px rgba(0,0,0,.06)}
.product-tabs__track{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:0}
.product-tabs__track::-webkit-scrollbar{display:none}
.product-tabs__tab{display:flex;align-items:center;gap:6px;padding:14px 20px;font-size:13px;font-weight:500;color:#666;text-decoration:none;white-space:nowrap;border-bottom:2.5px solid transparent;transition:all .25s ease;letter-spacing:.01em}
.product-tabs__tab:hover{color:#1d1d1f;text-decoration:none;background:rgba(0,0,0,.02)}
.product-tabs__tab.active{color:#1d1d1f;border-bottom-color:#007aff;font-weight:600}
.product-tabs__tab i{font-size:14px;opacity:.6;transition:opacity .25s}
.product-tabs__tab.active i{opacity:1;color:#007aff}
.product-tabs__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:50px;background:rgba(0,122,255,.08);color:#007aff;font-size:11px;font-weight:600;margin-left:4px}

/* Tab sections */
.tab-section{scroll-margin-top:60px;padding:4px 0 0}
.tab-section__head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.tab-section__icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px}
.tab-section__icon.desc-icon{background:rgba(0,122,255,.08);color:#007aff}
.tab-section__icon.spec-icon{background:rgba(88,86,214,.08);color:#5856d6}
.tab-section__icon.car-icon{background:rgba(52,199,89,.08);color:#34c759}
.tab-section__icon.rel-icon{background:rgba(255,149,0,.08);color:#ff9500}

/* Compatibility grid */
.compat-grid{display:flex;flex-wrap:wrap;gap:8px}
.compat-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:50px;background:#f5f5f7;font-size:13px;color:#1d1d1f;transition:all .2s;border:1px solid transparent}
.compat-chip:hover{background:#e8e8ed;border-color:rgba(0,0,0,.06);transform:translateY(-1px)}
.compat-chip__icon{font-size:15px;opacity:.5}
.compat-brand{font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.03em;color:#007aff;margin:12px 0 6px;padding-left:4px}
.compat-brand:first-child{margin-top:0}

/* Related section combined */
.related-group{margin-bottom:20px}
.related-group__title{font-size:14px;font-weight:600;color:#1d1d1f;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.related-group__title i{color:#999;font-size:13px}

/* Mobile */
@media(max-width:767px){
    .product-tabs__tab{padding:12px 14px;font-size:12px}
    .product-tabs__tab i{display:none}
    .compat-chip{padding:6px 10px;font-size:12px}
}

/* ==============================
   TABS + SECTIONS — Contain Width
   ============================== */
.product-tabs{max-width:1170px;margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px}
.tab-section{max-width:1170px;margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px}

/* ==============================
   VIN CTA — Compact Apple-style
   ============================== */
.vin-cta-compact{display:flex;align-items:center;gap:16px;padding:18px 24px;margin:8px 0 16px;border-radius:18px;background:linear-gradient(135deg,#f0faf0 0%,#e8f5e9 100%);border:1px solid rgba(52,199,89,.15);transition:all .3s ease}
.vin-cta-compact:hover{box-shadow:0 4px 20px rgba(52,199,89,.12);transform:translateY(-1px)}
.vin-cta__icon{font-size:28px;flex-shrink:0}
.vin-cta__text{flex:1;line-height:1.4}
.vin-cta__text strong{display:block;font-size:14px;color:#1d1d1f;margin-bottom:2px}
.vin-cta__text span{font-size:13px;color:#666}
.vin-cta__actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.vin-cta__actions .btn{padding:10px 20px;font-size:13px;font-weight:600;border-radius:50px;white-space:nowrap}
.vin-cta__phone{display:flex;align-items:center;gap:6px;color:#34c759;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.vin-cta__phone:hover{color:#2da44e;text-decoration:none}
.vin-cta__phone i{font-size:14px}

@media(max-width:767px){
    .vin-cta-compact{flex-direction:column;text-align:center;padding:16px}
    .vin-cta__actions{flex-direction:column;width:100%;gap:8px}
    .vin-cta__actions .btn{width:100%}
}

/* ==============================
   WIGGLY TEXT — Easter Egg
   ============================== */
.wiggly{display:inline-block;animation:none;cursor:pointer}
.wiggly:hover span{display:inline-block;animation:wiggle .4s ease infinite}
.wiggly:hover{animation:jelly .6s ease}
@keyframes wiggle{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3px) rotate(-3deg)}50%{transform:translateY(1px) rotate(2deg)}75%{transform:translateY(-2px) rotate(-1deg)}}
@keyframes jelly{0%{transform:scale(1,1)}25%{transform:scale(.95,1.05)}50%{transform:scale(1.05,.95)}75%{transform:scale(.98,1.02)}100%{transform:scale(1,1)}}

/* ==============================
   SPECIAL OFFERS — Creative Effects
   ============================== */

/* === 1. Stagger entrance — карточки въезжают снизу пружиной === */
.carousel-home-2 .carousel-item{opacity:0;transform:translateY(40px);animation:cardEntrance .6s cubic-bezier(.34,1.56,.64,1) forwards}
.carousel-home-2 .owl-item:nth-child(1) .carousel-item{animation-delay:.1s}
.carousel-home-2 .owl-item:nth-child(2) .carousel-item{animation-delay:.2s}
.carousel-home-2 .owl-item:nth-child(3) .carousel-item{animation-delay:.3s}
.carousel-home-2 .owl-item:nth-child(4) .carousel-item{animation-delay:.4s}
.carousel-home-2 .owl-item:nth-child(5) .carousel-item{animation-delay:.5s}
.carousel-home-2 .owl-item:nth-child(6) .carousel-item{animation-delay:.6s}
@keyframes cardEntrance{to{opacity:1;transform:translateY(0)}}

/* === 2. 3D tilt container === */
.carousel-home-2 .carousel-item{transition:transform .3s ease,box-shadow .3s ease;transform-style:preserve-3d;perspective:800px;position:relative;overflow:hidden;border-radius:14px}

/* === 3. Photo zoom + dim siblings on hover === */
.carousel-home-2 .product-photo{transition:transform .5s cubic-bezier(.25,.8,.25,1);overflow:hidden;border-radius:14px 14px 0 0}
.carousel-home-2 .carousel-item:hover .product-photo{transform:scale(1.06)}
.carousel-home-2:hover .owl-item:not(:hover) .carousel-item{opacity:.6;filter:saturate(.7);transition:all .4s ease}
.carousel-home-2:hover .owl-item:hover .carousel-item{opacity:1;filter:saturate(1);transform:translateY(-6px);box-shadow:0 12px 40px rgba(70,198,115,.2)}

/* === 4. Shine glare effect on hover === */
.carousel-home-2 .carousel-item::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);transform:translateX(-100%) rotate(0deg);transition:none;pointer-events:none;z-index:10}
.carousel-home-2 .carousel-item:hover::after{animation:shine .8s ease forwards}
@keyframes shine{to{transform:translateX(60%) rotate(0deg)}}

/* === 5. Discount badge pulse === */
.carousel-home-2 .price-sale{position:relative;animation:pulseBadge 2s ease-in-out infinite}
@keyframes pulseBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}


/* === 7. Cart button pop === */
.carousel-home-2 .add-to-cart{transition:all .2s cubic-bezier(.34,1.56,.64,1)}
.carousel-home-2 .add-to-cart:hover{transform:scale(1.15) rotate(-3deg);box-shadow:0 4px 15px rgba(70,198,115,.4)}
.carousel-home-2 .add-to-cart:active{transform:scale(.9)}

/* ==============================
   UNIVERSAL CARD EFFECTS — All Product Cards
   ============================== */

/* 3D tilt + shine for ALL card types */
.product-item-carousel,
.pcr-card,
.cf-card,
.agg-c,
.product-item,
.product-item-tile,
.product-item-roll{
    transform-style:preserve-3d;
    perspective:800px;
    position:relative;
    overflow:hidden;
    transition:transform .3s ease,box-shadow .3s ease,opacity .4s ease,filter .4s ease;
}

/* Shine glare — universal */
.product-item-carousel::after,
.pcr-card::after,
.cf-card::after,
.agg-c::after,
.product-item::after,
.product-item-tile::after,
.product-item-roll::after{
    content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
    background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);
    transform:translateX(-100%);pointer-events:none;z-index:10;transition:none;
}
.product-item-carousel:hover::after,
.pcr-card:hover::after,
.cf-card:hover::after,
.agg-c:hover::after,
.product-item:hover::after,
.product-item-tile:hover::after,
.product-item-roll:hover::after{
    animation:shine .8s ease forwards;
}

/* Dim siblings on container hover */
.owl-carousel:hover .owl-item:not(:hover) .product-item-carousel,
.pcr-track:hover .pcr-card:not(:hover),
.cf-grid:hover .cf-item:not(:hover) .cf-card,
.agg-track:hover .agg-c:not(:hover),
.products-tile:hover .product-item:not(:hover),
.products-list:hover .product-item:not(:hover){
    opacity:.55;filter:saturate(.6);
}

/* Hover lift — universal */
.pcr-card:hover,
.cf-card:hover,
.agg-c:hover,
.product-item:hover,
.product-item-tile:hover,
.product-item-roll:hover{
    box-shadow:0 12px 40px rgba(70,198,115,.18);
}

/* Remove duplicate carousel-specific rules that conflict */
.carousel-home-2:hover .owl-item:not(:hover) .carousel-item{opacity:.55;filter:saturate(.6)}
.carousel-home-2:hover .owl-item:hover .carousel-item{opacity:1;filter:saturate(1)}

/* ============================================
   PRODUCT GALLERY — Apple-style
   ============================================ */

.pg-gallery {
    position: relative;
}

/* Main image container */
.pg-main {
    position: relative;
    background: linear-gradient(145deg, #fafafa 0%, #f0f0f0 100%);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.04);
    min-height: 340px;
    max-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.03);
    transition: box-shadow .3s ease;
}

.pg-main:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04);
}

.pg-main img {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.25,.46,.45,.94), opacity .3s ease;
    will-change: transform;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.08));
}

.pg-main:hover img:not(.noimage) {
    transform: scale(1.05);
    filter: drop-shadow(0 8px 24px rgba(0,0,0,.12));
}

.pg-main .noimage {
    max-width: 200px;
    opacity: .4;
}

/* Photo counter — glass pill */
.pg-counter {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 14px;
    border-radius: 50px;
    letter-spacing: .5px;
    pointer-events: none;
    z-index: 2;
}

/* Navigation arrows */
.pg-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #333;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s, background .2s, transform .2s;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.pg-prev { left: 10px; }
.pg-next { right: 10px; }

.pg-gallery:hover .pg-nav {
    opacity: 1;
}

.pg-nav:hover {
    background: rgba(255,255,255,.95);
    transform: translateY(-50%) scale(1.1);
}

.pg-nav:active {
    transform: translateY(-50%) scale(.95);
}

/* Thumbnails strip */
.pg-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding: 4px 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pg-thumbs::-webkit-scrollbar {
    display: none;
}

.pg-thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    background: #fff;
}

.pg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .2s;
}

.pg-thumb:hover {
    border-color: rgba(0,0,0,.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.pg-thumb--active {
    border-color: var(--accent, #46c673) !important;
    box-shadow: 0 0 0 1px var(--accent, #46c673);
}

.pg-thumb:not(.pg-thumb--active) img {
    opacity: .7;
}

.pg-thumb:not(.pg-thumb--active):hover img {
    opacity: 1;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .pg-main {
        border-radius: 14px;
        max-height: 300px;
    }
    
    .pg-nav {
        opacity: 1;
        width: 34px;
        height: 34px;
        font-size: 18px;
    }
    
    .pg-thumb {
        width: 56px;
        height: 56px;
        border-radius: 10px;
    }
    
    .pg-thumbs {
        gap: 6px;
    }
}

/* Swipe animation for main image */
.pg-main img.pg-fade-out {
    opacity: 0;
    transform: scale(.97);
}

.pg-main img.pg-fade-in {
    animation: pgFadeIn .35s cubic-bezier(.25,.46,.45,.94) forwards;
}

@keyframes pgFadeIn {
    from { opacity: 0; transform: scale(.97); }
    to { opacity: 1; transform: scale(1); }
}


/* ============================================
   PRODUCT CART BLOCK — Modern override
   ============================================ */

.product-page-v2 .product-block .product-cart-block {
    background: #fff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    padding: 20px 24px !important;
}

.product-page-v2 .product-block .product-cart-block .cart-brand-oem {
    border-bottom-color: rgba(0,0,0,.08);
}

.product-page-v2 .product-block .product-cart-block .rouble {
    font-weight: 200;
}

.product-page-v2 .product-delivery {
    border-radius: 14px;
    background: #f8f8f8;
    border: 1px solid rgba(0,0,0,.04);
    padding: 16px 20px;
    margin-top: 12px;
}


/* Sticky tabs — rounder */
.product-tabs {
    border-radius: 18px !important;
    overflow: hidden;
}

.product-tabs.is-sticky {
    border-radius: 0 0 18px 18px !important;
}

.product-tabs__tab {
    border-radius: 50px !important;
    padding: 8px 18px !important;
}


/* === Special Offers Title === */
@keyframes special-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.main-title--special {
  line-height: 1.15;
  display: inline-block;
  text-transform: none;
}
.main-title--special:after,
.main-title--special:before {
  display: none !important;
  content: none !important;
}
.main-title--special .line1 {
  display: block;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #3ab85e;
  -webkit-text-fill-color: #3ab85e;
}
.main-title--special .line2 {
  display: block;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.03em;
  background: linear-gradient(90deg, #3ab85e, #46c673, #8ae0a0, #d4b44a, #8ae0a0, #46c673, #3ab85e);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: special-shimmer 10s linear infinite;
}
.main-title--special .sticker {
  display: inline-block;
  background: #f38539;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,.1);
  margin-left: 8px;
  vertical-align: middle;
  -webkit-text-fill-color: #fff;
}