/* ==========================================================================
   Exin design refresh — additive, visual-layer only.
   Loaded after theme.css / custom.css / appagebuilder styles.
   Same file (byte-identical) on all 4 shops except --exin-accent.
   ========================================================================== */

:root{
  --exin-accent: #34a7ea;
  --exin-ink: #2b2b2b;
  --exin-radius: 5px;
}

/* --------------------------------------------------------------------------
   1) Backgrounds — remove the grunge/torn-paper textures, flat surfaces
   -------------------------------------------------------------------------- */
body{
  background-image: none;
  background-color: #f7f7f7;
}
.footer-center{
  background-image: none;
  background-color: #19191d;
}
.footer-center:before{
  display: none;
}
#wrapper .breadcrumb{
  background-color: #efefef;
}
#wrapper .breadcrumb .category-cover{
  display: none;
}
#wrapper .breadcrumb .container{
  position: relative;
  transform: none;
  top: auto;
  padding-top: 18px;
  padding-bottom: 18px;
}
#wrapper .breadcrumb ol{
  color: #777;
  font-size: 16px;
  text-align: left;
  margin-top: 0;
}
#wrapper .breadcrumb li a{
  color: #777;
}
#wrapper .breadcrumb li:last-child a{
  color: var(--exin-ink);
}
#wrapper .breadcrumb li:last-child::after{
  display: none;
}
#wrapper .breadcrumb li::after{
  color: #bbb;
}

/* --------------------------------------------------------------------------
   2) Typography & readability
   -------------------------------------------------------------------------- */
.thumbnail-container .product-title,
.thumbnail-container .product-title a{
  text-transform: none;
}
.ApColumn .title_block,
.products-section-title{
  text-transform: none;
  font-weight: 600;
  letter-spacing: .2px;
}

/* --------------------------------------------------------------------------
   3) Heading underline — same motif, flat colour instead of the PNG stripe
   -------------------------------------------------------------------------- */
.ApColumn .title_block:before,
.products-section-title:before{
  background-image: none;
  background-color: var(--exin-accent);
  height: 3px;
  width: 60px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3b) Advanced search filter labels — selected/hover weight toned down
   -------------------------------------------------------------------------- */
.PM_ASCriterionGroupCheckbox .PM_ASLabelCheckboxSelected .PM_ASLabelLink,
.PM_ASCriterionGroupCheckbox .PM_ASLabelCheckbox .PM_ASLabelLink:hover{
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   4) Uniform 5px corners on every block/frame (buttons, inputs, cards,
      images, menus, filter panels, modals) — one radius, everywhere
   -------------------------------------------------------------------------- */
.btn,
.custom-select,
input.form-control,
select.form-control,
textarea.form-control,
.input-group .input-group-btn .btn,
.thumbnail-container,
.thumbnail-container img,
.product-miniature img,
#product .product-cover img,
.card,
.block-category .category-cover img,
.leo-megamenu .dropdown-menu,
.sort-select .dropdown-menu,
.PM_ASCriterionsGroup,
#search_filters,
.modal-content,
.alert,
.nb-newsletter,
.nb-newsletter__content,
.nb-perk,
.termekold-ikon-block{
  border-radius: var(--exin-radius);
}
.leo-megamenu .dropdown-menu{
  border-radius: 0 0 var(--exin-radius) var(--exin-radius);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* --------------------------------------------------------------------------
   5) Trust-badge icons — circular accent badges (matches the homepage block)
      The original glyphs come from the legacy "fa fa-*" icon font, which
      renders inconsistently here (version/glyph-set clash). Instead of
      fighting that, the font glyph is suppressed entirely and replaced
      with a small inline SVG per icon — renders identically everywhere,
      no font dependency at all.
   -------------------------------------------------------------------------- */
.termekold-ikon-block .cimspan i,
.talalj-meg-minket-block i{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background-color: var(--exin-accent);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  margin-right: 10px;
  flex: 0 0 auto;
}
.termekold-ikon-block .cimspan i:before,
.talalj-meg-minket-block i:before{
  content: none !important;
}
.termekold-ikon-block .cimspan i.fa-money,
.talalj-meg-minket-block i.fa-money{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
.termekold-ikon-block .cimspan i.fa-truck,
.talalj-meg-minket-block i.fa-truck{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='13' height='10'/%3E%3Cpath d='M14 9h4l3 3v4h-7z'/%3E%3Ccircle cx='6' cy='18' r='1.6' fill='white' stroke='none'/%3E%3Ccircle cx='17.5' cy='18' r='1.6' fill='white' stroke='none'/%3E%3C/svg%3E");
}
.termekold-ikon-block .cimspan i.fa-star,
.talalj-meg-minket-block i.fa-star{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='none'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z'/%3E%3C/svg%3E");
}
.termekold-ikon-block .cimspan{
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  text-transform: none;
  color: var(--exin-ink);
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   5b) KOSÁRBA overlay button — reliable centring in both grid and list view
   -------------------------------------------------------------------------- */
.thumbnail-container .add-to-cart{
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   5c) "Sorrend" label — dropped everywhere (desktop included); the dropdown
      button shows a short built-in placeholder instead, reusing the space
      already reserved for the caret icon, so nothing grows or shifts.
      Width-neutral, so this is safe to apply at every viewport.
   -------------------------------------------------------------------------- */
.products-sort-order .sorrend-span{
  display: none;
}
.products-sort-order .select-title{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  line-height: 1;
  box-sizing: border-box;
}
.products-sort-order .select-title:before{
  content: "Sorrend";
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   5d) Category toolbar, desktop only (grid/list switch + sort box) — put
      both on the same flex baseline so nothing looks off-centre. Left
      untouched below 768px: that's a native 50/50 row shared with the
      "Szűrők" filter-toggle button, and widening the sort box there was
      squeezing that button's label — do not repeat that here.
   -------------------------------------------------------------------------- */
@media (min-width: 768px){
  #js-product-list-top .row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .products-selection .total-products{
    padding-top: 0;
  }
  .products-sort-order{
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .products-sort-order .select-title{
    width: auto;
    min-width: 170px;
    padding: 0 12px;
  }
}

/* --------------------------------------------------------------------------
   6) Navigation — kill the flyout submenu, show subcategories inline
      (click-to-open top level is unchanged; this only fixes the
      hard-to-reach second-level flyout the user flagged), and darken
      the panel background so text stays readable over page content
   -------------------------------------------------------------------------- */
.leo-megamenu .dropdown-menu,
.leo-megamenu .dropdown-menu.level1,
.leo-megamenu .dropdown-menu.level2,
.leo-megamenu .dropdown-submenu .dropdown-menu{
  background-color: rgba(12, 12, 15, .97) !important;
}
@media (min-width: 992px){
  .leo-megamenu .dropdown-menu{
    min-width: 280px;
  }
  .leo-megamenu .dropdown-submenu .dropdown-menu{
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    opacity: 1;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    padding: 2px 0 10px 16px;
    margin: 2px 0 6px 0;
    border-left: 2px solid rgba(255,255,255,.15);
    transition: none;
  }
  .leo-megamenu .dropdown-submenu .dropdown-menu li a{
    font-size: 15px;
  }
  .leo-megamenu .dropdown-submenu > a .caret,
  .leo-megamenu .dropdown-submenu > a:after{
    opacity: .6;
  }
}

/* --------------------------------------------------------------------------
   6b) Product cards (home carousel + category grid) — the manufacturer
      mini-logo is absolutely positioned over the price by inline style;
      below 400px it collides with the price text, so it drops onto its
      own line above the price instead
   -------------------------------------------------------------------------- */
@media (max-width: 400px){
  .product-price-and-shipping{
    padding-right: 0 !important;
    float: none !important;
    text-align: center !important;
  }
  .product-manufacturer-mini-logo{
    position: static !important;
    display: block !important;
    margin: 0 auto 6px !important;
    max-height: 26px !important;
    max-width: 64px !important;
  }
}

/* --------------------------------------------------------------------------
   7) Mobile fixes explicitly reported: tall breadcrumb band, stacked
      gender/category quick-filters wasting vertical space
   -------------------------------------------------------------------------- */
@media (max-width: 767px){
  #wrapper .breadcrumb .container{
    padding-top: 12px;
    padding-bottom: 12px;
  }
  #wrapper .breadcrumb ol{
    font-size: 14px;
  }

  .PM_ASCriterions ul{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .PM_ASCriterions ul li{
    flex: 0 0 auto;
    padding: 0 !important;
  }
  .PM_ASCriterions .radio{
    margin: 0;
  }
  .PM_ASCriterions .PM_ASLabelCheckbox{
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.2;
    background: #fff;
  }
  .PM_ASCriterions .PM_ASCriterionNbProduct{
    display: inline;
    margin-left: 4px;
    font-size: 11px;
    color: #999;
  }
  .PM_ASCriterionCheckbox:checked + .PM_ASLabelCheckbox{
    border-color: var(--exin-accent);
    color: var(--exin-accent);
  }
}

/* --------------------------------------------------------------------------
   8) Checkout (supercheckout) — visual consistency only, no structural/
      functional change. Pure black step-bars softened to the site's ink
      tone and rounded to match every other block; buttons get the same
      5px radius. Colours/semantics (orange=primary, red=remove/logout)
      are left untouched on purpose.
   -------------------------------------------------------------------------- */
.opc-container .custom-panel h2,
.title.section-title{
  background: var(--exin-ink) !important;
  border-radius: var(--exin-radius) !important;
}
.myAccountLi a,
.accountLogoutLi a,
#supercheckout_confirm_order,
.kb_edit_btn,
.kb_delete_btn{
  border-radius: var(--exin-radius) !important;
}

/* --------------------------------------------------------------------------
   9) Header search overlay — confirmed via DevTools: the theme's own
      #header .block-form is a position:fixed, full-viewport box that
      flex-centers the search form both horizontally AND vertically, so
      it (and whatever search module renders inside it, JoliSearch
      included) lands in the middle of the screen instead of docking
      under the header like a normal search field. Anchoring it to the
      top instead gives JoliSearch's own dropdown a sane place to start
      from, right under the input, closing the actual gap reported.
   -------------------------------------------------------------------------- */
#header .block-form{
  align-items: flex-start !important;
  padding-top: 45px;
}
@media (max-width: 767px){
  #header .block-form{
    padding-top: 70px;
  }
}
.ui-autocomplete.ui-jolisearch,
.ui-menu.ui-jolisearch{
  position: absolute !important;
}

/* --------------------------------------------------------------------------
   9b) JoliSearch panel polish — bigger type, softer frame, visible "floating
      above the page" shadow, and the orange focus outline on the search
      input removed (it was bleeding into the top edge of the results box
      directly underneath it).
   -------------------------------------------------------------------------- */
#header .block-form .search-widget form input[type=text]:focus,
#header #search_widget .form-search .search_query:focus{
  outline: none !important;
  border-color: #333b48 !important;
}
.ui-menu.ui-jolisearch{
  border: none !important;
  border-radius: var(--exin-radius) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.22) !important;
}
.ui-menu.ui-jolisearch .jolisearch-body h4{
  font-size: 18px !important;
}
.ui-menu.ui-jolisearch .jolisearch-filter__link,
.ui-menu.ui-jolisearch .jolisearch-body aside[role="complementary"] a{
  font-size: 15px !important;
}
.ui-menu.ui-jolisearch .items-count{
  font-size: 13px !important;
}
.ui-menu.ui-jolisearch .product-name{
  font-size: 15px !important;
  line-height: 20px !important;
}
.ui-menu.ui-jolisearch .product-manufacturer,
.ui-menu.ui-jolisearch .product-category{
  font-size: 13px !important;
}
.ui-menu.ui-jolisearch .product-price{
  font-size: 15px !important;
}

/* --------------------------------------------------------------------------
   9c) Mobile: show products first, filters (Categories/Manufacturers)
      after — the module has no admin toggle for this, but the sidebar
      and product grid are plain siblings in a float-based grid, so a
      flex + order swap handles it without touching any module file.
   -------------------------------------------------------------------------- */
@media (max-width: 575px){
  .ui-menu.ui-jolisearch .jolisearch-body{
    display: flex;
    flex-direction: column;
  }
  .ui-menu.ui-jolisearch .jolisearch-body section[role="main"]{
    order: 1;
  }
  .ui-menu.ui-jolisearch .jolisearch-body aside[role="complementary"]{
    order: 2;
  }
  #header .block-form form{
    width: 92% !important;
  }
  .ui-menu.ui-jolisearch{
    position: fixed !important;
    top: 115px !important;
    left: 0px;
    right: 16px !important;
    width: calc(100vw - 32px) !important;
    max-width: none !important;
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .ui-menu.ui-jolisearch .jolisearch-body{
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   9d) Product availability badge in search results — reuses the exact same
      Tools::getProductAvailabilityFeature_2() the category list view calls,
      via a theme override of dropdown-list.tpl, so wording/colour/logic
      stay identical everywhere; this just fits it into the compact card.
   -------------------------------------------------------------------------- */
.ui-menu.ui-jolisearch .jolisearch-availability{
  display: block;
  margin: 2px 0 4px;
}
.ui-menu.ui-jolisearch .jolisearch-availability .control-label-elerh{
  font-size: 12px !important;
}

/* --------------------------------------------------------------------------
   9e) "Összes találat" — make it read as a button, not a plain link
   -------------------------------------------------------------------------- */
.ui-menu.ui-jolisearch .more-results a{
  display: inline-block;
  background: var(--exin-accent) !important;
  color: #fff !important;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--exin-radius);
  text-decoration: none !important;
}
.ui-menu.ui-jolisearch .more-results a:hover{
  opacity: .9;
}