/* ==========================================================================
   modern-patch-v3.css  ·  EGO Textile storefront polish
   Addresses 4 issues:
   1) Search bar ~76px tall (style.css:57 #search{padding:15px}) → lock to 44px
   2) Hamburger icon vertically off-center inside .btn-menu line-box
   3) VIER filter sidebar (#block_filter_vier) – retro asymmetric pills overhaul
   4) Product cards (.product-thumb) – clean boutique surface, kill noise
   Uses --ego-* tokens already defined by modern.css. !important is used
   intentionally to override inline OpenCart/VIER plugin styles.
   ========================================================================== */


/* ==========================================================================
   1) SEARCH BAR HEIGHT FIX  —  align with .btn-menu (44px)
   --------------------------------------------------------------------------
   ROOT CAUSE: style.css line 57 forces  #search { padding: 15px }
   which adds 30px vertical bloat around the already 44px input → ~76px box.
   Fix: strip wrapper padding, lock wrapper to 44px, pin input + button.
   ========================================================================== */
#search.input-group,
#search {
  padding: 0 !important;                       /* kills style.css:57 (15px)   */
  height: 44px !important;                     /* match .btn-menu reference   */
  display: flex !important;
  align-items: stretch !important;
  background: var(--ego-surface) !important;
  border: 1px solid var(--ego-border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

#search .form-control,
#search input.form-control,
#search input.form-control.input-lg,
#search input {
  height: 44px !important;                     /* overrides style.css:59 42px */
  line-height: 44px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: var(--ego-text) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#search .form-control::placeholder,
#search input::placeholder {
  color: var(--ego-text-soft) !important;
  opacity: 1 !important;
}

#search .input-group-btn,
#search .input-group-btn:last-child {
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  width: auto !important;
}

#search .input-group-btn > .btn,
#search .btn.btn-default,
#search .btn.btn-default.btn-lg,
#search .input-group-btn:last-child > .btn {
  height: 44px !important;                     /* overrides style.css:60      */
  min-height: 44px !important;
  padding: 0 18px !important;
  margin: 0 !important;                        /* kills the -25px overlap     */
  line-height: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ego-accent) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: background-color .15s ease;
}
#search .input-group-btn > .btn:hover,
#search .btn.btn-default:hover {
  background: #5a39a8 !important;              /* slightly darker --ego-accent */
}
#search .input-group-btn > .btn i.fa,
#search .btn.btn-default i.fa {
  line-height: 1 !important;
  font-size: 16px !important;
}


/* ==========================================================================
   2) CATALOG BUTTON  —  vertically center the hamburger icon
   --------------------------------------------------------------------------
   ROOT CAUSE: .btn-menu relied on  line-height:44px  for centering, but
   fa-icons have line-height:1 + vertical-align:baseline. In a 44px line-box
   the baseline sits above the optical center, pushing the icon up.
   Fix: flex layout, line-height:1 everywhere, vertical-align:middle.
   ========================================================================== */
#menu-vertical .btn-menu {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  line-height: 1 !important;                   /* flex aligns optical center  */
}
#menu-vertical .btn-menu.btn-block {
  display: flex !important;
  width: 100% !important;
}
#menu-vertical .btn-menu i.fa,
#menu-vertical .btn-menu i.fa-bars {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin: 0 !important;
  font-size: 16px !important;
}
#menu-vertical .btn-menu .text-category,
#menu-vertical .btn-menu span {
  line-height: 1 !important;
  vertical-align: middle !important;
}


/* ==========================================================================
   3) VIER FILTER SIDEBAR  —  replace retro asymmetric pills with clean look
   --------------------------------------------------------------------------
   Source of mess: filter_vier/user_style/user_style.css lines 193-202 define
   asymmetric radii (40/20/20/40) on #head_filter and .title_filter, plus a
   dark-grey #333 background with off-white text. Counts are floated white
   pills. We override everything to a flat boutique look: uppercase section
   labels with a quiet border-bottom, clean checkbox rows with hover bg,
   outlined "Очистити" button, soft accented counts.
   ========================================================================== */

#block_filter_vier {
  background: var(--ego-surface) !important;
  border: 1px solid var(--ego-border) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  font-size: 13px !important;
  color: var(--ego-text) !important;
}

/* --- Top "Фільтр" header strip ------------------------------------------- */
#name_filter {
  margin: 0 !important;
  padding: 0 !important;
}
#head_filter,
#head_filter.blok {
  background: var(--ego-accent-soft) !important;
  color: var(--ego-text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  /* kill the asymmetric pill radii from user_style.css */
  border-radius: 0 !important;
  border-bottom: 1px solid var(--ego-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
}
#head_filter .arrow_n_f,
#head_filter .strel_fa_mob {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--ego-accent) !important;
  margin: 0 !important;
}
#head_filter .strel_fa_mob i.fa {
  line-height: 1 !important;
  font-size: 12px !important;
}

#ajx_bloc_filter { padding: 0 !important; }
#filter_vier { padding: 0 !important; background: transparent !important; }

/* --- "Очищення фільтра / Очистити" toolbar ------------------------------- */
#action_get,
#action_get.block_fv,
#action_get.block_fv.chc {
  background: transparent !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--ego-border) !important;
  margin: 0 !important;
}
#action_get .tec_vibor,
#action_get .tec_vibor.block_param {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
#action_get .blok.title_filter,
#action_get > .blok.title_filter {
  background: transparent !important;
  color: var(--ego-text-soft) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0 0 8px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
}
#action_get .text_dia {
  margin: 0 !important;
  padding: 0 !important;
}
#action_get .text_dia a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  border: 1px solid var(--ego-accent) !important;
  border-radius: 999px !important;
  background: var(--ego-surface) !important;
  color: var(--ego-accent) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
#action_get .text_dia a:hover {
  background: var(--ego-accent) !important;
  color: #ffffff !important;
}

/* --- Section headers (.title_filter) — uppercase boutique labels --------- */
.block_fv,
.block_fv.optv,
.block_fv.attrb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.block_fv .block_param,
.block_param {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.blok.head_group { display: none !important; }   /* keep VIER default        */

.blok.title_filter,
.title_filter.curs_point {
  background: transparent !important;
  color: var(--ego-text) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 14px 16px 8px 16px !important;
  /* kill asymmetric pills */
  border-radius: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--ego-border) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
}
.title_filter .title_p_f {
  color: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* --- Options list -------------------------------------------------------- */
.onli_param,
.onli_param.blok.link_fv,
.onli_param.scropis {
  background: transparent !important;
  padding: 4px 8px 12px 8px !important;
  margin: 0 !important;
  border: 0 !important;
  max-height: 280px !important;
  overflow-y: auto !important;
}

/* --- Checkbox rows ------------------------------------------------------- */
.row_blok {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  margin: 1px 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  transition: background-color .12s ease;
  cursor: pointer !important;
}
.row_blok:hover,
.row_blok.actionis {
  background: var(--ego-accent-soft) !important;
}
.row_blok label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  font-weight: 400 !important;
  color: var(--ego-text) !important;
  cursor: pointer !important;
}
.row_blok .text_param {
  font-size: 13px !important;
  color: inherit !important;
  line-height: 1.3 !important;
}

/* --- Custom checkbox markers (VIER uses :before pseudo) ----------------- */
#filter_vier .link_fv .checkb,
#filter_vier .link_fv .checka {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}
#filter_vier .link_fv .checkb:before,
#filter_vier .link_fv .checka:before {
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  border: 1.5px solid var(--ego-border) !important;
  border-radius: 4px !important;
  background: var(--ego-surface) !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  transition: background-color .12s ease, border-color .12s ease;
}
#filter_vier .link_fv .checkb:hover:not(.curs_def):before {
  border-color: var(--ego-accent) !important;
}
#filter_vier .link_fv .checka.actionis:before {
  background: var(--ego-accent) !important;
  border-color: var(--ego-accent) !important;
  box-shadow: inset 0 0 0 3px var(--ego-surface) !important;
}

/* --- Count chips (.total_product) — soft accent, no float --------------- */
.total_product,
.total_product.btn_fv,
.total_product.btn_fv.count_1,
.total_product.btn_fv.count_2,
.btn_fv {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 7px !important;
  margin: 0 !important;
  background: var(--ego-accent-soft) !important;
  color: var(--ego-accent) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.btn_fv:hover {
  background: var(--ego-accent) !important;
  color: #ffffff !important;
}

/* --- Mobile toggle icon swap — keep VIER behavior intact --------------- */
#mobil_mini i:first-child { display: inline-flex !important; }
#mobil_mini.open_fv i:first-child { display: none !important; }
#mobil_mini.open_fv i:last-child  { display: inline-flex !important; }


/* ==========================================================================
   4) PRODUCT CARDS  —  clean boutique surface, kill noise
   --------------------------------------------------------------------------
   Ships zero card-grid styling in modern-patch.css today. Cards fall back to
   transparent BS3 defaults. Fix: white surface + border + radius + hover,
   2-line clamp on title, hide empty rating stars / "Ціна:" prefix /
   thumbs-up "Відгуки (0)" block, style the unclassed Купити button.
   ========================================================================== */

.product-layout.product-grid { margin-bottom: 20px !important; }

.product-thumb {
  background: var(--ego-surface) !important;
  border: 1px solid var(--ego-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.product-thumb:hover {
  border-color: var(--ego-accent) !important;
  box-shadow: 0 6px 18px rgba(99, 65, 192, 0.12) !important;
  transform: translateY(-1px);
}

.product-thumb .image {
  background: var(--ego-surface) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.product-thumb .image a {
  display: block !important;
  line-height: 0 !important;
}
.product-thumb .image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  transition: transform .25s ease;
}
.product-thumb:hover .image img {
  transform: scale(1.03);
}

.product-thumb .caption {
  padding: 12px 14px 10px 14px !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
}

.product-thumb .caption h4,
.product-thumb .caption h4 a {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  color: var(--ego-text) !important;
  text-decoration: none !important;
}
.product-thumb .caption h4 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
}
.product-thumb .caption h4 a:hover {
  color: var(--ego-accent) !important;
}

.product-thumb .caption p { margin: 0 !important; padding: 0 !important; }

/* hide empty rating stars + "Відгуки (0)" thumbs-up noise */
.product-thumb .rating,
.product-thumb .caption .rating,
.product-thumb .caption .review,
.product-thumb .caption p.review,
.product-thumb .thumbs-up,
.product-thumb .caption .fa-thumbs-up { display: none !important; }

/* price block */
.product-thumb .price,
.product-thumb .caption .price {
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ego-text) !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
/* kill "Ціна:" prefix text node — hide nothing here; rely on .price-new + strikethrough */
.product-thumb .price .price-old {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ego-text-soft) !important;
  text-decoration: line-through !important;
}
.product-thumb .price .price-new {
  color: var(--ego-accent) !important;
}
.product-thumb .price .price-tax { display: none !important; }

/* Купити button — unclassed link in BS3 default; reach via descendant of .button-group */
.product-thumb .button-group {
  background: transparent !important;
  border: 0 !important;
  padding: 0 14px 14px 14px !important;
  margin: 0 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
}
.product-thumb .button-group button,
.product-thumb .button-group .btn {
  flex: 1 1 auto !important;
  height: 40px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--ego-accent) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: background-color .15s ease;
}
.product-thumb .button-group button:hover,
.product-thumb .button-group .btn:hover {
  background: #5a39a8 !important;
}
/* secondary buttons: wishlist / compare → ghost square */
.product-thumb .button-group button + button,
.product-thumb .button-group button:not(:first-child) {
  flex: 0 0 40px !important;
  width: 40px !important;
  padding: 0 !important;
  background: var(--ego-surface) !important;
  color: var(--ego-text-soft) !important;
  border: 1px solid var(--ego-border) !important;
}
.product-thumb .button-group button + button:hover,
.product-thumb .button-group button:not(:first-child):hover {
  background: var(--ego-accent-soft) !important;
  color: var(--ego-accent) !important;
  border-color: var(--ego-accent) !important;
}