/* ==========================================================================
   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: #ff4600;
  --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)
      classic line-height centring (more reliable than flex for icon fonts)
   -------------------------------------------------------------------------- */
.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;
  line-height: 1 !important;
  text-align: center;
  border-radius: 50%;
  background: var(--exin-accent);
  color: #fff;
  font-size: 14px;
  margin-right: 10px;
  flex: 0 0 auto;
}
.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) Category toolbar (grid/list switch + "Sorrend" sort box) — both
      sit on the same flex baseline so nothing looks off-centre
   -------------------------------------------------------------------------- */
#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;
  gap: 10px;
}
.products-sort-order .sorrend-span{
  position: static;
  padding-right: 0;
  line-height: 1;
}
.products-sort-order .select-title{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: auto;
  min-width: 190px;
  height: 36px;
  line-height: 1;
  padding: 0 12px;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   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;
  }
}

/* --------------------------------------------------------------------------
   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;
}