/* ==========================================================================
   VIA Marketing Shop — header + homepage (Alza/Mironet layout language)
   Layout only; every colour comes from the existing tokens in custom_v3.css.
   ========================================================================== */

/* ---------- HEADER: logo · big search · full-width category bar ---------- */
.header-top { padding: 12px 0 0 !important; }
.header-top .container > .row { align-items: center !important; }

.header-top-right { display: flex !important; align-items: center !important; gap: 18px; flex-wrap: wrap; }

/* Prominent search, like Alza/Mironet */
#_desktop_search_widget, #search_widget {
  order: 1; flex: 1 1 420px !important; max-width: none !important; margin: 0 !important; position: relative;
}
#search_widget form { width: 100%; position: relative; }
#search_widget form input[type="text"],
#search_widget input.ui-autocomplete-input {
  width: 100% !important; height: 46px !important; padding: 0 52px 0 18px !important;
  font-size: .92rem !important; border: 2px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important; background: var(--bg-white) !important;
  color: var(--text-dark) !important; box-shadow: none !important; transition: border-color var(--transition);
}
#search_widget form input[type="text"]:focus { border-color: var(--accent-navy) !important; outline: none !important; }
#search_widget form button[type="submit"] {
  position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 52px !important; border: 0 !important; background: var(--accent-navy) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; color: #fff !important;
  display: flex !important; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--transition);
}
#search_widget form button[type="submit"]:hover { background: var(--accent-gold) !important; }
#search_widget form button[type="submit"] i,
#search_widget form button[type="submit"] .search { color: #fff !important; font-size: 22px !important; opacity: 1 !important; }
#search_widget form button[type="submit"]:hover i { color: var(--text-dark) !important; }

/* Category bar: full-bleed navy strip under the logo row */
#_desktop_top_menu { position: relative; margin-top: 12px !important; }
#_desktop_top_menu::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; background: var(--accent-navy); z-index: 0;
}
#_desktop_top_menu .top-menu,
#_desktop_top_menu #top-menu { position: relative; z-index: 1; }
#top-menu > li > a {
  color: rgba(255,255,255,.92) !important; padding: 13px 14px !important;
  font-size: .8rem !important; letter-spacing: .6px !important;
}
#top-menu > li > a:hover,
#top-menu > li.sfHover > a { color: var(--accent-gold) !important; background: rgba(255,255,255,.07) !important; }
#top-menu > li > a::after { display: none !important; }

/* Dropdowns stay light on the dark bar */
#top-menu .sub-menu, #top-menu .popover {
  background: var(--bg-white) !important; border: 1px solid var(--border-light) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important; box-shadow: var(--shadow-lg) !important;
  padding: 10px 0 !important;
}
#top-menu .sub-menu a { color: var(--text-body) !important; font-size: .82rem !important; padding: 6px 18px !important; }
#top-menu .sub-menu a:hover { color: var(--accent-navy) !important; background: var(--bg-section) !important; }

/* ---------- HOMEPAGE ---------- */
/* Section headings: left aligned with a rule, like Alza/Mironet */
#index .featured-products .h2,
#index .products-section-title,
#index section h2.h2,
#index .section-title h2 {
  font-size: 1.35rem !important; text-align: left !important; letter-spacing: .6px;
  margin: 0 0 14px !important; padding-bottom: 8px; border-bottom: 2px solid var(--border-light);
  position: relative;
}
#index .featured-products .h2::after,
#index .products-section-title::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 64px; height: 2px; background: var(--accent-gold);
}
#index .featured-products, #index .product-accessories, #index section.featured-products { margin-bottom: 34px; }

/* Category tiles (injected by home-v4.js) */
.vm-cat-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 0 0 30px;
}
@media (max-width: 991px) { .vm-cat-tiles { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 575px) { .vm-cat-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.vm-cat-tile {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--bg-white); border: 1px solid var(--border-card); border-radius: var(--radius-md);
  color: var(--text-dark) !important; font-weight: 600; font-size: .86rem; line-height: 1.25;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.vm-cat-tile:hover { border-color: var(--accent-gold); box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--accent-navy) !important; }
.vm-cat-tile .material-icons {
  font-size: 26px; color: var(--accent-navy); background: var(--bg-section);
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex: 0 0 44px;
}
.vm-cat-tile:hover .material-icons { background: var(--accent-gold); color: var(--text-dark); }
.vm-cat-tile span.vm-tile-text { flex: 1 1 auto; }
.vm-cat-tile small { display: block; font-weight: 400; font-size: .72rem; color: var(--text-muted); margin-top: 2px; }

/* Homepage product cards — same density as the catalog */
#index .featured-products .products,
#index .products {
  display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 10px !important; margin: 0 !important;
}
@media (max-width: 1199px) { #index .featured-products .products, #index .products { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 767px)  { #index .featured-products .products, #index .products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 479px)  { #index .featured-products .products, #index .products { grid-template-columns: 1fr !important; } }

#index .products > *, #index .product-miniature {
  width: 100% !important; max-width: 100% !important; flex: none !important;
  padding: 0 !important; margin: 0 !important; height: 100% !important;
  justify-self: stretch !important;
}
#index .product-miniature { border-radius: var(--radius-md) !important; box-shadow: none !important; margin-bottom: 0 !important; }
#index .product-miniature:hover { transform: none !important; box-shadow: var(--shadow-md) !important; }
#index .thumbnail-container { padding: 0 !important; }
#index .thumbnail-container .thumbnail-top { min-height: 150px !important; max-height: 160px !important; padding: 10px !important; border-radius: var(--radius-md) var(--radius-md) 0 0 !important; }
#index .product-miniature img { max-height: 138px !important; }
#index .product-miniature:hover img { transform: none !important; }
#index .product-miniature .product-description { padding: 10px 12px 46px !important; }
#index .product-miniature .product-title { font-size: .84rem !important; margin: 0 0 6px !important; min-height: 2.2em; }
#index .product-miniature .product-title a {
  font-family: var(--font-body) !important; font-size: .84rem !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important; line-height: 1.32 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#index .product-miniature .vm-spec { -webkit-line-clamp: 2; }
#index .product-miniature .product-price-and-shipping { padding-top: 8px !important; display: block !important; }
#index .product-miniature .product-price-and-shipping .price { font-size: 1.1rem !important; display: block !important; }
#index .product-miniature .product-flags { top: 8px !important; left: 8px !important; gap: 4px !important; }
#index .product-miniature .product-flag { font-size: .62rem !important; padding: 3px 7px !important; margin: 0 !important; white-space: nowrap !important; box-shadow: none !important; }
#index .btn-product-miniature { padding: 7px 14px !important; font-size: .74rem !important; }
#index .highlighted-informations { display: none !important; }

/* "All products" link under a section */
#index .all-product-link { font-size: .82rem !important; font-weight: 600; }

/* ---- Header geometry fixes ----
   The navy strip must be anchored to the menu itself (it was static, so the
   pseudo-element stretched over the whole header and hid logo + search). */
#_desktop_top_menu { position: relative !important; z-index: 0; }
#_desktop_top_menu::before { z-index: -1; }
.header-top .container > .row { align-items: flex-start !important; }
#_desktop_logo { align-self: flex-start !important; margin-top: 10px !important; position: relative; z-index: 2; }
#search_widget { position: relative; z-index: 2; }
/* keep the navy strip visible even with a negative z-index pseudo */
.header-top { background: transparent !important; }
.header-top > .container { background: var(--bg-white); }

/* Tile icons are inline SVG (icon fonts rendered as tofu boxes) */
.vm-cat-tile .vm-ico {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--radius-md);
  background: var(--bg-section); display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.vm-cat-tile .vm-ico svg { width: 22px; height: 22px; stroke: var(--accent-navy); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vm-cat-tile:hover .vm-ico { background: var(--accent-gold); }
.vm-cat-tile:hover .vm-ico svg { stroke: var(--text-dark); }

/* Full-bleed navy bar without extra markup: paint the background beyond the
   element's box and clip it vertically (the ::before approach was centred on
   the menu, not the viewport, so the strip sat off-centre). */
#_desktop_top_menu::before { display: none !important; }
#_desktop_top_menu {
  background: var(--accent-navy) !important;
  box-shadow: 0 0 0 100vmax var(--accent-navy);
  clip-path: inset(0 -100vmax);
}

/* Pull the category bar's links out to the container's left edge (the menu
   lives inside the right column, which starts after the logo). */
@media (min-width: 992px) {
  #_desktop_top_menu { margin-left: -190px !important; width: calc(100% + 190px) !important; }
}

/* ---------- Hero with the VIA-Bot mascot (replaces the stock photo slide) ---------- */
.vm-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr minmax(240px, 360px); align-items: center; gap: 24px;
  background: linear-gradient(135deg, #22375E 0%, var(--accent-navy) 45%, #101B31 100%);
  border-radius: var(--radius-lg); padding: 34px 40px; margin: 0 0 30px;
}
/* subtle dotted tech texture + gold glow */
.vm-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .5; pointer-events: none;
}
.vm-hero::after {
  content: ''; position: absolute; right: -60px; top: -80px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255,200,0,.20) 0%, rgba(255,200,0,0) 65%); pointer-events: none;
}
.vm-hero-copy { position: relative; z-index: 2; }
.vm-hero-badge {
  display: inline-block; background: var(--accent-gold); color: var(--text-dark);
  font-family: var(--font-heading); font-weight: 600; font-size: .72rem; letter-spacing: 1px;
  text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.vm-hero-title {
  font-family: var(--font-heading); color: #fff !important; font-weight: 600;
  font-size: 2.3rem; line-height: 1.1; letter-spacing: .5px; text-transform: uppercase; margin: 0 0 12px;
}
.vm-hero-title em { color: var(--accent-gold); font-style: normal; }
.vm-hero-sub { color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.55; margin: 0 0 22px; max-width: 46ch; }
.vm-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vm-hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-gold); color: var(--text-dark) !important;
  font-family: var(--font-heading); font-weight: 600; font-size: .92rem; letter-spacing: .6px; text-transform: uppercase;
  padding: 13px 26px; border-radius: var(--radius-pill); box-shadow: 0 8px 22px rgba(255,200,0,.28);
  transition: transform var(--transition), box-shadow var(--transition);
}
.vm-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,200,0,.42); color: var(--text-dark) !important; }
.vm-hero-link { color: rgba(255,255,255,.85) !important; font-weight: 600; font-size: .88rem; }
.vm-hero-link:hover { color: var(--accent-gold) !important; }

.vm-hero-art { position: relative; z-index: 2; text-align: center; }
.vm-hero-art img { width: 100%; max-width: 300px; height: auto; display: inline-block; animation: vmFloat 5s ease-in-out infinite; }
@keyframes vmFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .vm-hero-art img { animation: none; } }

/* Trust strip under the hero */
.vm-usp { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 0 0 30px; }
.vm-usp div {
  background: var(--bg-white); border: 1px solid var(--border-card); border-radius: var(--radius-md);
  padding: 12px 16px; font-size: .82rem; font-weight: 600; color: var(--text-dark);
}
.vm-usp div small { display: block; font-weight: 400; font-size: .74rem; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 900px) {
  .vm-hero { grid-template-columns: 1fr; padding: 26px 24px; text-align: center; }
  .vm-hero-sub { margin-left: auto; margin-right: auto; }
  .vm-hero-actions { justify-content: center; }
  .vm-hero-art img { max-width: 200px; }
  .vm-usp { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* the old photo slider is replaced by the hero above */
#index .ps_imageslider, #index #carousel { display: none !important; }

/* ---- Search autocomplete must sit above the navy category bar ----
   The bar paints its full-bleed background with box-shadow + clip-path, which
   creates a stacking context that swallowed the first suggestions. */
.ui-autocomplete,
ul.ui-autocomplete,
#search_widget .ui-autocomplete,
.ui-front { z-index: 10050 !important; }
#search_widget, #_desktop_search_widget { z-index: 10060 !important; }
.header-top, .header-top .container { position: relative; z-index: 20; }
#_desktop_top_menu { z-index: 1 !important; }

/* legible suggestion rows */
.ui-autocomplete {
  background: var(--bg-white) !important; border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg) !important;
  padding: 6px !important; max-height: 70vh; overflow-y: auto;
}
.ui-autocomplete .ui-menu-item a,
.ui-autocomplete .ui-menu-item div {
  font-size: .84rem !important; padding: 7px 10px !important; border-radius: var(--radius-sm);
  color: var(--text-dark) !important; line-height: 1.35;
}
.ui-autocomplete .ui-menu-item a:hover,
.ui-autocomplete .ui-menu-item div.ui-state-active {
  background: var(--bg-section) !important; border: 0 !important; color: var(--accent-navy) !important;
}
.ui-autocomplete img { max-width: 42px; height: auto; margin-right: 8px; }

/* trial-operation notice */
.vm-devbar{background:#FFF4CC;border-bottom:1px solid #F0D98A;color:#5A4A12;font-size:13px;line-height:1.45;padding:8px 0}
.vm-devbar .container{max-width:1400px;padding-left:15px;padding-right:15px}
.vm-devbar strong{color:#3D3208}
@media(max-width:767px){.vm-devbar{font-size:12px;padding:7px 0}}
.vm-devbar a{color:#3D3208;text-decoration:underline}