/* Fresh theme by Gravity Host. Copyright (c) 2026 GK Tools Ltd. All rights reserved. Licensed for one live shop per licence, see LICENSE.txt; sharing or reselling is not allowed. Download ID: marketplace */
/* Fresh: top bar, header and category menu. Light utility strip, white header row, a light
   menu bar with drop-down panels; on phones every control is at least 44 px. Only colour
   variables, so every colour scheme and dark mode follow. */

/* ==========================================================================
   1. TOP BAR (#top): Light, airy utility strip with WCAG AA contrast
   ========================================================================== */
#top {
  background: var(--gk-page);
  border-bottom: 1px solid var(--gk-line);
  padding: 4px 0;
  margin: 0;
  font-family: var(--gk-text);
  font-size: 13.5px;
  color: var(--gk-ink-soft);
}
#top > .container {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
}
#top > .container::before,
#top > .container::after { display: none; }
#top .pull-left,
#top .pull-right { float: none !important; }
#top form { margin: 0; }
#top .btn-group { display: inline-flex; position: relative; }

/* Unified trigger buttons: Currency, Language (OpenCart's, Fresh's or the shop's own), Phone,
   Account, Wish List: one size and weight for all of them. */
#top .pull-left .dropdown-toggle,
#top #form-currency .dropdown-toggle,
#top #form-language .dropdown-toggle,
#top #top-links > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--gk-ink-soft) !important;
  font-family: var(--gk-text);
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none !important;
  text-shadow: none;
  box-shadow: none;
  transition: background-color 0.15s var(--gk-ease), color 0.15s var(--gk-ease), border-color 0.15s var(--gk-ease);
}
#top .pull-left .dropdown-toggle span,
#top #top-links > ul > li > a > span { font-size: 14px !important; font-weight: 500 !important; }
/* The currency sign and language code: the same small tag on both. */
#top .pull-left .dropdown-toggle strong,
#top #form-currency .dropdown-toggle strong,
#top #form-language .dropdown-toggle strong {
  display: inline-block;
  min-width: 24px;
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--gk-tint-deep);
  color: var(--gk-ink);
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}
#top .pull-left .dropdown-toggle:focus-visible,
#top #form-currency .dropdown-toggle:focus-visible,
#top #form-language .dropdown-toggle:focus-visible,
#top #top-links > ul > li > a:focus-visible,
#top .open > .dropdown-toggle,
#top #top-links .open > a {
  background: var(--gk-tint) !important;
  border-color: var(--gk-tint-line);
  color: var(--gk-deep) !important;
  box-shadow: none;
}
/* Hover colours only where there is a real pointer: on an iPhone a hover style turns the first
   tap into a hover, so the menus needed two taps. */
@media (hover: hover) {
  #top .pull-left .dropdown-toggle:hover,
  #top #form-currency .dropdown-toggle:hover,
  #top #form-language .dropdown-toggle:hover,
  #top #top-links > ul > li > a:hover {
    background: var(--gk-tint) !important;
    border-color: var(--gk-tint-line);
    color: var(--gk-deep) !important;
    box-shadow: none;
  }
}

/* Right-side utility links (#top-links) */
#top-links {
  margin-left: auto;
  padding: 0;
}
#top-links > ul.list-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#top-links > ul.list-inline > li {
  display: inline-flex;
  align-items: center;
  padding: 0;
  position: relative;
}
/* Phone item: align bare span beside contact icon link */
#top-links > ul.list-inline > li:first-child {
  gap: 2px;
  color: var(--gk-ink-soft);
  font-size: 13.5px;
  font-weight: 500;
}
#top-links > ul.list-inline > li:first-child > span {
  padding-right: 8px;
  color: var(--gk-ink-soft);
}
/* Hide duplicate Cart & Checkout links in #top (handled by #cart button) */
#top-links li:has(> a[href*="checkout/cart"]),
#top-links li:has(> a[href*="checkout/checkout"]) { display: none; }

/* Language & Currency Flag Replacement (our own 20x15 SVG flags) */
.gk-flags #form-language img {
  width: 20px;
  height: 15px;
  box-sizing: border-box;
  padding-left: 20px;
  border-radius: 2.5px;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 20px;
  background-position: center;
  background-size: 20px 15px;
  background-repeat: no-repeat;
}
.gk-flags #form-language img[src*="en-gb"] { background-image: url("flags/gb.svg"); }
.gk-flags #form-language img[src*="de-de"] { background-image: url("flags/de.svg"); }
.gk-flags #form-language img[src*="es-es"] { background-image: url("flags/es.svg"); }
.gk-flags #form-language img[src*="fr-fr"] { background-image: url("flags/fr.svg"); }
.gk-flags #form-language img[src*="it-it"] { background-image: url("flags/it.svg"); }
.gk-flags #form-language img[src*="nl-nl"] { background-image: url("flags/nl.svg"); }
.gk-flags #form-language img[src*="pl-pl"] { background-image: url("flags/pl.svg"); }
.gk-flags #form-language img[src*="pt-br"] { background-image: url("flags/br.svg"); }

/* Currency dropdown items with matching 20x15 flags */
.gk-flags #top #form-currency .currency-select::before {
  content: "";
  width: 20px;
  height: 15px;
  flex: 0 0 20px;
  border-radius: 2.5px;
  background-position: center;
  background-size: 20px 15px;
  background-repeat: no-repeat;
}
.gk-flags #top #form-currency .currency-select[name="EUR"]::before { background-image: url("flags/eu.svg"); }
.gk-flags #top #form-currency .currency-select[name="PLN"]::before { background-image: url("flags/pl.svg"); }
.gk-flags #top #form-currency .currency-select[name="GBP"]::before { background-image: url("flags/gb.svg"); }
.gk-flags #top #form-currency .currency-select[name="USD"]::before { background-image: url("flags/us.svg"); }

/* Top bar dropdown menus (Currency, Language, My Account) */
#top .dropdown-menu {
  top: calc(100% + 4px);
  min-width: 196px;
  padding: 6px;
  margin: 0;
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-r-card);
  box-shadow: var(--gk-shadow-hover);
}
#top .dropdown-menu li + li { margin-top: 2px; }
#top #form-currency .currency-select,
#top #form-language .language-select,
#top #top-links .dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gk-ink) !important;
  font-family: var(--gk-text);
  font-size: 14px !important;
  font-weight: 500;
  text-align: left;
  text-decoration: none !important;
  transition: background-color 0.14s var(--gk-ease), color 0.14s var(--gk-ease);
}
#top #form-currency .currency-select:hover,
#top #form-currency .currency-select:focus-visible,
#top #form-language .language-select:hover,
#top #form-language .language-select:focus-visible,
#top #top-links .dropdown-menu a:hover,
#top #top-links .dropdown-menu a:focus-visible {
  background: var(--gk-tint) !important;
  color: var(--gk-deep) !important;
}

/* ==========================================================================
   2. HEADER ROW (header): Balanced Logo, Search & Basket
   ========================================================================== */
header {
  background: var(--gk-surface);
  padding: 18px 0 14px;
  margin-bottom: 20px;
  border-bottom: 0;
}
/* OpenCart's own thirds, as on Best Immune live: logo, search in the middle, then the basket, with
   the same gap between search and basket as the columns have (D1680). */
header > .container > .row {
  display: grid;
  grid-template-columns: 4fr 5fr 3fr;
  align-items: center;
  gap: 30px;
  margin: 0;
}
header > .container > .row::before,
header > .container > .row::after { display: none; }
header .col-sm-4,
header .col-sm-5,
header .col-sm-3 {
  float: none;
  padding: 0;
  margin: 0;
}
header .col-sm-4,
header .col-sm-5,
header .col-sm-3 { width: auto; min-width: 0; }
header .col-sm-3 #cart,
header .col-sm-3 #cart > .btn { width: 100%; }

/* Logo: crisp at 40px header height */
#logo { margin: 0; }
#logo a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
#logo img {
  max-height: 36px;
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
}

/* Search bar: unified pill with palette-aware focus ring */
#search {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
  background: var(--gk-field);
  border: 1px solid var(--gk-line-strong);
  border-radius: var(--gk-r-btn);
  overflow: hidden;
  transition: border-color 0.16s var(--gk-ease), box-shadow 0.16s var(--gk-ease), background-color 0.16s var(--gk-ease);
}
#search:focus-within {
  background: var(--gk-surface);
  border-color: var(--gk-deep);
  box-shadow: 0 0 0 3px var(--gk-tint-deep);
}
#search .input-lg {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 16px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  color: var(--gk-ink);
  font-family: var(--gk-text);
  font-size: 15px;
  box-shadow: none !important;
}
#search .input-lg::placeholder { color: var(--gk-mute); opacity: 1; }
#search .input-group-btn {
  width: auto;
  display: flex;
}
#search .btn-lg {
  width: 48px;
  height: 44px;
  padding: 0;
  border: 0 !important;
  border-left: 1px solid var(--gk-line) !important;
  border-radius: 0 !important;
  background: var(--gk-tint);
  color: var(--gk-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: background-color 0.15s var(--gk-ease), color 0.15s var(--gk-ease);
}
#search .btn-lg:hover,
#search .btn-lg:focus-visible {
  background: var(--gk-tint-deep);
  color: var(--gk-deeper);
}
#search .btn-lg:active { background: var(--gk-tint-line); }

/* Header Basket (#cart) */
#cart { position: relative; width: auto; margin-bottom: 0; }
#cart > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto;
  min-height: 46px;
  padding: 0 18px;
  border-radius: var(--gk-r-btn);
  background: var(--gk-tint);
  border: 1px solid var(--gk-tint-line);
  color: var(--gk-ink);
  font-family: var(--gk-text);
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
  box-shadow: none;
  transition: background-color 0.16s var(--gk-ease), border-color 0.16s var(--gk-ease), color 0.16s var(--gk-ease);
}
#cart > .btn .fa-shopping-cart {
  width: 19px;
  height: 19px;
  color: var(--gk-deep);
}
#cart > .btn:hover,
#cart > .btn:focus-visible,
#cart.open > .btn, #cart.open > .btn:hover {
  background: var(--gk-tint-deep);
  border-color: var(--gk-brand);
  color: var(--gk-ink);
  box-shadow: none;
}
#cart > .btn:active {
  background: var(--gk-tint-line);
  color: var(--gk-ink);
}
#cart .dropdown-menu {
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 340px;
  max-width: 400px;
  padding: 16px;
  margin: 0;
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-r-card);
  box-shadow: var(--gk-shadow-hover);
}
#cart .dropdown-menu > li:only-child::before { content: none; }
#cart .dropdown-menu > li:only-child > p.text-center {
  margin: 0;
  padding: 20px 8px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gk-ink-soft);
}
#cart .dropdown-menu > li:only-child > p.text-center::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
  background-color: var(--gk-deep);
  -webkit-mask: url("icons/shopping-cart.svg") center / contain no-repeat;
  mask: url("icons/shopping-cart.svg") center / contain no-repeat;
}

/* ==========================================================================
   3. CATEGORY MENU BAR (#menu): Light, airy desktop bar & phone drawer
   ========================================================================== */
#menu {
  background: var(--gk-surface) !important;
  background-image: none !important;
  border: 1px solid var(--gk-line) !important;
  border-radius: var(--gk-r-btn);
  box-shadow: var(--gk-shadow);
  min-height: 48px;
  margin-bottom: 24px;
  font-family: var(--gk-text);
}
#menu .navbar-collapse {
  padding: 4px 6px;
  border: 0;
  box-shadow: none;
}
#menu .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  float: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu .navbar-nav > li {
  float: none;
  position: relative;
  list-style: none;
}
#menu .navbar-nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 14px !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--gk-ink) !important;
  font-family: var(--gk-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: background-color 0.15s var(--gk-ease), color 0.15s var(--gk-ease);
}
/* Automatic chevron on categories with sub-menus */
#menu .navbar-nav > li.dropdown > a::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  opacity: 0.65;
  transition: transform 0.16s var(--gk-ease), opacity 0.16s var(--gk-ease);
  -webkit-mask: url("icons/caret-down.svg") center / contain no-repeat;
  mask: url("icons/caret-down.svg") center / contain no-repeat;
}
#menu .navbar-nav > li > a:hover,
#menu .navbar-nav > li > a:focus-visible,
#menu .navbar-nav > li.open > a,
#menu .navbar-nav > li.dropdown:hover > a {
  background: var(--gk-tint) !important;
  color: var(--gk-deep) !important;
}
#menu .navbar-nav > li.open > a::after,
#menu .navbar-nav > li.dropdown:hover > a::after {
  transform: rotate(180deg);
  opacity: 1;
}

/* Desktop Category Dropdown Panels */
#menu .dropdown-menu {
  top: calc(100% + 4px);
  left: 0;
  min-width: 224px;
  padding: 8px !important;
  margin: 0;
  background: var(--gk-surface) !important;
  border: 1px solid var(--gk-line) !important;
  border-radius: var(--gk-r-card) !important;
  box-shadow: var(--gk-shadow-hover) !important;
}
@media (min-width: 768px) {
  /* Smooth hover/focus-within reveal alongside Bootstrap click toggle */
  #menu .navbar-nav > li.dropdown:hover > .dropdown-menu,
  #menu .navbar-nav > li.dropdown:focus-within > .dropdown-menu,
  #menu .navbar-nav > li.dropdown.open > .dropdown-menu {
    display: block;
  }
  /* Invisible hover bridge so cursor doesn't lose hover crossing the 4px gap */
  #menu .navbar-nav > li.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
  }
}
#menu .dropdown-inner {
  display: flex;
  gap: 8px;
}
#menu .dropdown-inner ul.list-unstyled {
  display: block !important;
  min-width: 196px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu .dropdown-inner ul.list-unstyled + ul.list-unstyled {
  border-left: 1px solid var(--gk-line);
  padding-left: 8px;
}
#menu .dropdown-inner li + li { margin-top: 2px; }
#menu .dropdown-inner a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-width: 0 !important;
  min-height: 38px;
  padding: 8px 12px !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--gk-ink-soft) !important;
  font-family: var(--gk-text);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none !important;
  transition: background-color 0.14s var(--gk-ease), color 0.14s var(--gk-ease);
}
#menu .dropdown-inner a:hover,
#menu .dropdown-inner a:focus-visible {
  background: var(--gk-tint) !important;
  color: var(--gk-deep) !important;
}

/* "Show All <Category>" footer inside dropdown */
#menu .see-all {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  margin-top: 6px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-top: 1px solid var(--gk-line) !important;
  border-radius: 0 0 8px 8px !important;
  background: transparent !important;
  color: var(--gk-deep) !important;
  font-family: var(--gk-text);
  font-size: 13.5px !important;
  font-weight: 600;
  text-decoration: none !important;
}
#menu .see-all::after {
  content: "\2192";
  font-size: 15px;
  line-height: 1;
  transition: transform 0.15s var(--gk-ease);
}
#menu .see-all:hover,
#menu .see-all:focus-visible {
  background: var(--gk-tint) !important;
  color: var(--gk-deeper) !important;
  border-radius: 8px !important;
}
#menu .see-all:hover::after { transform: translateX(3px); }

/* ==========================================================================
   4. MOBILE-FIRST (<768px): 44px Touch Targets & Compact 2-Row Header
   ========================================================================== */
@media (max-width: 767px) {
  /* Top bar: every control is a >=44x44px hit target */
  #top { padding: 2px 0; }
  #top > .container {
    min-height: 44px;
    gap: 2px;
  }
  #top .pull-left .dropdown-toggle,
  #top #form-currency .dropdown-toggle,
  #top #form-language .dropdown-toggle,
  #top #top-links > ul > li > a {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    justify-content: center;
  }
  #top #form-currency .currency-select,
  #top #form-language .language-select,
  #top #top-links .dropdown-menu a {
    min-height: 44px;
    padding: 10px 12px;
  }

  /* Header: Compact 2-row grid (Row 1: Logo + Basket, Row 2: Full-width Search) */
  header { padding: 12px 0 10px; margin-bottom: 14px; border-bottom: 1px solid var(--gk-line); }
  header > .container > .row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    align-items: center;
  }
  header .col-sm-4 { grid-column: 1; grid-row: 1; }
  header .col-sm-3 { grid-column: 2; grid-row: 1; }
  header .col-sm-5 { grid-column: 1 / -1; grid-row: 2; max-width: none; width: 100%; }
  /* The logo fills its 44px row as on Best Immune live, so a square-ish logo isn't lost (D1459 compare). */
  #logo img { max-height: 40px; }
  header .col-sm-4 { min-width: 0; }
  #cart > .btn {
    min-height: 44px;
    padding: 0 13px;
    font-size: 13.5px;
  }
  /* Opens below the basket button (D1444), a little wider than the search box below it, so its corners never show. */
  #cart .dropdown-menu {
    position: absolute;
    left: auto;
    right: -4px;
    top: calc(100% + 6px);
    min-width: 0;
    max-width: none;
    width: calc(100vw - 22px);
    z-index: 1050;
  }

  /* Mobile Category Menu Bar */
  #menu {
    margin-bottom: 16px;
    border-color: var(--gk-line-strong) !important;
  }
  #menu .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 3px 6px 3px 16px;
    margin: 0 !important;
    float: none;
  }
  #menu .navbar-header::before,
  #menu .navbar-header::after { display: none; }
  #menu #category {
    float: none;
    padding: 0;
    margin: 0;
    font-family: var(--gk-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--gk-ink);
    line-height: 1.2;
    text-shadow: none;
  }
  #menu .btn-navbar {
    float: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--gk-tint) !important;
    border: 1px solid var(--gk-tint-line) !important;
    color: var(--gk-deep) !important;
    box-shadow: none !important;
  }
  #menu .btn-navbar:hover,
  #menu .btn-navbar:focus-visible,
  #menu .btn-navbar:active,
  #menu .btn-navbar[aria-expanded="true"] {
    background: var(--gk-deep) !important;
    border-color: var(--gk-deep) !important;
    color: var(--gk-surface) !important;
  }

  /* Mobile Collapsible Category Drawer */
  #menu .navbar-collapse {
    padding: 8px;
    margin: 0 !important;
    border-top: 1px solid var(--gk-line);
    background: var(--gk-surface);
  }
  #menu .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  #menu .navbar-nav > li > a {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px !important;
    justify-content: space-between;
    font-size: 15.5px;
  }
  #menu .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    min-width: 0;
    margin: 2px 0 6px;
    padding: 6px !important;
    background: var(--gk-page) !important;
    border: 1px solid var(--gk-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  #menu .dropdown-inner {
    flex-direction: column;
    gap: 0;
  }
  #menu .dropdown-inner ul.list-unstyled { min-width: 0; }
  #menu .dropdown-inner ul.list-unstyled + ul.list-unstyled {
    border-left: 0;
    padding-left: 0;
  }
  #menu .dropdown-inner a,
  #menu .see-all {
    min-height: 44px;
    padding: 10px 12px !important;
    font-size: 14.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #top *, header *, #menu * { transition: none !important; }
}

/* The basket drop-down's close (x), top right, a 44 px target. */
#cart .dropdown-menu > li:first-child::before { padding-right: 44px; }
#cart .dropdown-menu > li:first-child { position: static; }
#cart .gk-cart-x { position: absolute; top: 6px; right: 6px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gk-ink-soft); font-size: 28px; line-height: 1; cursor: pointer; touch-action: manipulation; }
#cart .gk-cart-x:hover, #cart .gk-cart-x:focus-visible { background: var(--gk-tint); color: var(--gk-ink); }
#cart .gk-cart-x:focus-visible { outline: 2px solid var(--gk-deep); outline-offset: 1px; }