/* Heero overrides on top of the Electro theme */
#notificator { display: none; left: 50%; margin-left: -100px; padding: 15px 25px; position: fixed; text-align: center; top: 20px; width: 200px; z-index: 5000; }

/* product cards: equal image height whatever the uploaded photo size */
.product .product-img a { display: block; }
.product .product-img img { width: 100%; height: 260px; object-fit: contain; }
.product-widget .product-img img { object-fit: contain; }
.product .atc-wrap .add-to-cart-btn { display: block; width: 100%; text-align: center; }
.heero-out { opacity: .6; cursor: default; }

/* cart dropdown (kept as a Bootstrap .dropdown-menu so the shop's cart JS keeps working) */
.header-ctn .dropdown-cart { width: 300px; max-height: 420px; overflow-y: auto; padding: 10px; right: 0; left: auto; border-radius: 0; box-shadow: 0 0 0 2px #E4E7ED; border: 0; }
.heero-cart li .item { display: block; margin: 3px 0; position: relative; }
.heero-cart li .item:after { clear: both; content: " "; display: block; }
.heero-cart li .item-in { float: left; }
.heero-cart li .item-in img { height: 50px; width: 50px; object-fit: contain; }
.heero-cart li .item-in .left-side { float: left; margin-right: 10px; }
.heero-cart li .item-in .right-side a { color: #2B2D42; font-size: 12px; }
.heero-cart li .item-in .right-side span { display: block; }
.heero-cart .go-checkout { background: #D10024; color: #FFF; width: 100%; text-transform: uppercase; font-weight: 700; border-radius: 40px; }
.header-ctn > .shop-dropdown > a > .qty.badge { background: #D10024; }

/* shop sidebar links (categories / brands / stock) */
.heero-cat a { color: #8D99AE; display: block; padding: 4px 0; }
.heero-cat a.selected, .heero-cat a:hover { color: #D10024; font-weight: 700; }
.heero-cat.depth-1 { padding-left: 15px; }
.heero-cat.depth-2 { padding-left: 30px; }
.heero-cat.depth-3 { padding-left: 45px; }
.heero-apply { margin-top: 10px; padding: 6px 20px; border: 0; }
.store-pagination .pagination { margin: 0; }
.store-pagination .pagination > .active > a { background: #D10024; border-color: #D10024; }

/* product page */
.atc-wrap .heero-buynow { background: #2B2D42; margin-left: 10px; }
.product-details .atc-wrap { margin: 25px 0; }
#product-tab .tab-content img { max-width: 100%; height: auto; }


/* =====================================================================
   LAYOUT FIXES (landing page polish)
   ===================================================================== */

/* never allow sideways scrolling (skewed shapes / slick clones used to cause it) */
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; }

/* ---- HEADER: logo can no longer blow the layout up ---- */
#header .row { display: flex; flex-wrap: wrap; align-items: center; }
#header .row:before, #header .row:after { display: none; }
.header-logo { float: none; }
.header-logo .logo { display: inline-block; }
.header-logo .logo img { display: block; width: auto; max-width: 100%; object-fit: contain; }
.header-logo .logo img.logo-heero { height: 46px; }                 /* HEERO wordmark (transparent PNG, sits directly on the dark header) */
.header-logo .logo img.logo-custom { height: 56px; background: #fff; border-radius: 8px; padding: 3px; }  /* admin-uploaded logos with white backgrounds */
.header-search { padding: 0; }
.header-search form { display: flex; align-items: stretch; }
.header-search form .input-select { flex: 0 0 150px; width: 150px; margin: 0; height: 44px; }
.header-search form .input { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; height: 44px; border-radius: 0; }
.header-search form .search-btn { flex: 0 0 100px; height: 44px; margin: 0; }
.header-ctn { float: none; padding: 0; text-align: right; }

/* ---- COLLECTION BANNERS: fixed height, image always right-aligned & contained ---- */
.shop { height: 260px; background: #E4E7ED; margin: 15px 0; }
.shop .shop-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: #E4E7ED; }
.shop .shop-img > img {
  position: absolute; right: 4%; bottom: 6%;
  width: 58%; height: 88%;
  object-fit: contain; object-position: right bottom;
  mix-blend-mode: multiply;   /* white photo backgrounds melt into the grey tile */
}
.shop:before, .shop:after { z-index: 1; }
.shop .shop-body { z-index: 10; }
.shop .shop-body h3 { font-size: 24px; line-height: 1.25; text-transform: none; }

/* ---- PRODUCT SLIDERS ---- */
.products-slick .slick-track { margin-left: 0; margin-right: 0; }   /* few items stay left-aligned, no ghost gaps */
.products-slick .product .product-img { background: #fff; }
.products-slick .product .product-img img { padding: 10px; }
.products-slick .product.slick-slide { height: auto; }
.product .product-name { min-height: 40px; }
.product .product-name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- HOT DEAL ---- */
#hot-deal.section { background-size: cover; }
#hot-deal .hot-deal h2 { margin-top: 0; }
#hot-deal .hot-deal p { color: #fff; }

/* ---- NAV ---- */
#navigation .main-nav > li > a { white-space: nowrap; }

/* ---- TABLET / MOBILE ---- */
@media only screen and (max-width: 991px) {
  #header .row > div { width: 100%; }
  #header .row > div + div { margin-top: 12px; }
  .header-logo { text-align: center; }
  .header-ctn { text-align: center; }
  .header-search form .input-select { flex-basis: 110px; width: 110px; }
}
@media only screen and (max-width: 480px) {
  .shop { height: 210px; }
  .shop .shop-body { padding: 20px; }
  .shop .shop-body h3 { font-size: 19px; }
  .header-search form .input-select { display: none; }
  .header-search form .input { border-radius: 40px 0 0 40px; }
}