/* ===== V:KIT header bar: #t4-section-1 (language, search, currency, cart, Register/Login) ===== */
/* Replaces Vertex #s5_above_header_area. Everything is scoped to #t4-section-1, so nothing leaks elsewhere. */

/* the bar: green, 50px, desktop only (Vertex showed it from 1100px) */
#t4-section-1 {
  display: none;
  background: #74af27;
  height: 50px;
  text-align: right;
}
@media (min-width: 1100px) {
  #t4-section-1 { display: block; }
}
#t4-section-1 .t4-section-inner {
  width: 100%;
  max-width: 1325px;
  margin: 0 auto;
  padding: 0;
}

/* one row, vertically centred, everything pushed right except the language switcher */
#t4-section-1 .t4-row {
  width: 100%; /* without this the row shrinks to its contents and centres */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  height: 50px;
  margin: 0;
}
#t4-section-1 .t4-row > .t4-col {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0 15px;
}
#t4-section-1 .t4-col.language_switcher { margin: 0 auto 0 20px; }
#t4-section-1 .t4-col.login_links { margin: 0; }

/* language flags */
#t4-section-1 .mod-languages ul { margin: 0; padding: 0; list-style: none; }
#t4-section-1 .mod-languages li { display: inline-block; margin-right: 8px; }
#t4-section-1 .mod-languages li:last-child { margin-right: 0; }


/* search: a plain compact field (Vertex had an icon opening a full-width overlay) */
#t4-section-1 .t4-col.search input[type="text"] { height: 30px; width: 180px; padding: 0 10px; border: 0; }

/* currency: plain white text on the bar with a chevron (Vertex look) */
#t4-section-1 .hikashop_currency_module form { margin: 0; }
#t4-section-1 .hikashopcurrencylist { position: relative; }
#t4-section-1 select.hikashopcurrency {
  height: 30px;
  width: auto;
  padding: 0 24px 0 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
#t4-section-1 select.hikashopcurrency:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#t4-section-1 select.hikashopcurrency option { color: #000; } /* the open list has a white background */
#t4-section-1 .hikashopcurrencylist:after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Register / Login links (custom module in position login_links) */
#t4-section-1 .vk-bar-link {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0 32px;
  background: #3c3c3b;
  color: #fff;
  font-weight: 300;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
#t4-section-1 .vk-bar-link:hover,
#t4-section-1 .vk-bar-link:focus { background: #94c74f; color: #fff; text-decoration: none; }

/* ----- cart icon + counter ----- */
#t4-section-1 .hikashop_cart { position: relative; z-index: 10; }
/* top/right reset: the Vertex-era rule #hikashop_cart_240 .btn-toggle positions the icon at top:-36px / right:290px for the old bar */
#t4-section-1 .hikashop_cart .btn-toggle { position: relative; top: auto; right: auto; display: block; line-height: 1; color: #fff; text-decoration: none; }
#t4-section-1 .hikashop_cart .btn-toggle i.fa-shopping-cart { display: block; font-size: 20px; line-height: 1; }
#t4-section-1 .hikashop_cart .cart_empty { margin-top: 1px; }
#t4-section-1 .hikashop_cart_counter {
  position: absolute;
  top: -8px;
  right: -20px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background: #fff;
  border-radius: 100%;
}
#t4-section-1 .hikashop_cart_count {
  position: relative;
  top: -1px;
  vertical-align: middle;
  font-family: inherit; /* Vertex used Open Sans here; inherit keeps din-2014 */
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #000;
}

/* ----- cart panel (closed until the icon is clicked; vkit.js toggles it, cart.php adds .cart_open after add-to-cart) ----- */
#t4-section-1 form.hikashop_form_cart,
#t4-section-1 div.hikashop_empty_cart_wrapper {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4001;
  width: 500px;
  background: #fff;
  border: 1px solid #bbb;
  border-top: 2px solid #3a3a3c;
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, .2);
}
#t4-section-1 form.hikashop_form_cart.cart_open { display: block; }
#t4-section-1 div.hikashop_empty_cart_wrapper { width: 400px; height: 135px; }
#t4-section-1 .hikashop_cart_empty { margin-top: 18px; text-align: center; color: #3a3a3c; }

#t4-section-1 div.hikashop_cart_wrapper { max-height: 70vh; overflow: auto; }
#t4-section-1 .hikashop_cart_value { border-bottom: 1px solid #9a9a9a; }
#t4-section-1 .hikashop_cart_module_product_image { width: 15%; padding-top: 15px; padding-bottom: 15px; }
#t4-section-1 .hikashop_cart_module_product_name_value { text-align: left; padding: 5px 5px 5px 0; }
#t4-section-1 .hikashop_cart_module_product_name_value a { font-weight: bold; font-size: 12px; }
#t4-section-1 .hikashop_cart_module_product_name_value br { display: block; }
#t4-section-1 .hikashop_cart_module_product_quantity_value { width: 8%; padding-left: 5px; }
#t4-section-1 .hikashop_product_quantity_field { width: 100%; padding: 0; font-size: 14px; }
#t4-section-1 .hikashop_cart_module_product_refresh_value { width: 6%; color: #3a3a3c; margin-left: 3px; cursor: pointer; }
#t4-section-1 .hikashop_cart_module_product_refresh_value div { position: relative; padding-left: 8px; }
#t4-section-1 .hikashop_cart_module_product_price_value { padding-left: 15px; }
#t4-section-1 .hikashop_cart_module_product_price_value span.hikashop_product_price { font-size: 14px; }
#t4-section-1 .hikashop_cart_module_product_price_value .hikashop_product_price_full { margin-bottom: 0; }

/* panel buttons: Continue shopping (left) and Proceed to checkout (right) */
#t4-section-1 .hikacart {
  display: block;
  min-width: 200px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  padding: 0 32px;
  border: 0;
  border-radius: 0;
  background: #74af27;
  color: #fff;
  font-family: inherit; /* Vertex used Open Sans here */
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}
#t4-section-1 .hikacart:hover,
#t4-section-1 .hikacart:focus { background: #3c3c3b; color: #fff; }
#t4-section-1 form.hikashop_form_cart .hikashop_cart_continue { float: left; }
#t4-section-1 form.hikashop_form_cart .hikashop_cart_checkout { float: right; }

/* ===== V:KIT footer menu: #t4-footer-menu ===== */
/* Replaces Vertex #s5_bottom_row3_area1. Source rules: main.css (#s5_bottom_row3_area1 ...). Everything is scoped to #t4-footer-menu. */

/* dark band, centred links */
#t4-footer-menu {
  text-align: center;
  padding: 25px 20px;
  background: #3c3c3b;
}
@media (min-width: 960px) {
  #t4-footer-menu { padding: 50px 20px; }
}

/* T4 wraps the list in .navbar > ul.navbar-nav; make it a centred wrapping row (navbar-nav is a column on small screens) */
#t4-footer-menu .navbar { padding: 0; justify-content: center; }
#t4-footer-menu .nav-pills,
#t4-footer-menu .navbar-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  width: 100%;
}

/* links: white, green on hover (original used !important to beat Vertex; the id selector is enough here) */
/* link box: the old Bootstrap 2 .nav-pills>li>a values (Bootstrap 5 defaults are padding .5rem 1rem, no side margin) */
#t4-footer-menu .nav-link {
  margin: 2px 2px 2px 0;
  padding: 8px 12px;
  line-height: 14px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
}
#t4-footer-menu .nav-link:hover {
  background-color: #3c3c3b;
  color: #94c74f;
}
#t4-footer-menu .nav-link:focus {
  background-color: #3c3c3b;
  color: #fff;
}

#t4-footer span{
    font-size: 16px;
    letter-spacing: normal;
}