/* =====================================================
   Techno-Smart — HEADER / MENU STABILITY + FIXES (FILE-SAFE)
   (Desktop menu no-jump + wishlist + mobile filters)
   ===================================================== */

/* ===== DESKTOP: MENU STABILITY (NO JUMP) ===== */
@media (min-width: 1025px){

  html{ overflow-y: scroll; }

  html.ts-mega-open{
    overflow-y: scroll !important;
    padding-right: 0 !important;
  }

  html.ts-mega-open body{
    overflow: hidden !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  #primary-menu,
  #primary-menu > li{
    display: flex !important;
    align-items: center !important;
  }

  #primary-menu > li{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #primary-menu > li > a,
  #primary-menu > li > a:hover,
  #primary-menu > li.current-menu-item > a,
  #primary-menu > li.current_page_item > a,
  #primary-menu > li.current-menu-ancestor > a,
  #primary-menu > li.current-menu-parent > a{
    font-weight: 500 !important;
    border: 0 !important;
    text-decoration: none !important;
  }

  #primary-menu > li.ts-mega-trigger > a{
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    min-height: 44px !important;
  }

  #primary-menu > li.ts-mega-trigger > a,
  #primary-menu > li.ts-mega-trigger:hover > a,
  html.ts-mega-open #primary-menu > li.ts-mega-trigger > a{
    transform: none !important;
  }
}

/* ===== TABLET/DESKTOP: WISHLIST ICON ===== */
@media (min-width: 769px){
  #primary-menu a[href*="/wishlist/"]{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin-left: 8px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  #primary-menu a[href*="/wishlist/"] img.emoji{
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    margin: 0 !important;
  }

  #primary-menu a[href*="/wishlist/"]:hover{
    text-decoration: none !important;
    border: 0 !important;
  }
}

/* ===== SINGLE PRODUCT ATTRIBUTES TABLE (strong) ===== */
body.single-product table.shop_attributes th,
body.single-product table.shop_attributes th.woocommerce-product-attributes-item__label,
.single-product .woocommerce-product-attributes th{
  font-weight: 400 !important;
}

/* ===== MOBILE FILTER UI (FILE-SAFE + YOUR EXACT BEHAVIOR) ===== */
@media (max-width: 768px){
  .ts-top-filter-wrap{ margin: 10px 0 14px; }

  /* Кнопка */
  button.ts-filter-btn{
    width: 100% !important;
    padding: 12px 14px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    border: 1px solid var(--global-palette1) !important;
    background: var(--global-palette1) !important;
    color: var(--global-palette9) !important;
    cursor: pointer !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Панель: файлда басқа CSS басып кетпесін деп display-ді күшейттік */
  body .ts-mobile-filters{
    display: none !important;
    padding: 12px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    margin-top: 10px !important;
    color: var(--global-palette3) !important;

    max-height: 70vh;             /* көп фильтр бар — скролл үшін */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  body .ts-mobile-filters.is-open{
    display: block !important;
  }

  /* Сізде Additional CSS-та осылай “бәріне түс беру” жұмыс істеп тұрған — сақтаймыз */
  body .ts-mobile-filters *,
  body .ts-mobile-filters a,
  body .ts-mobile-filters a:visited,
  body .ts-mobile-filters a:hover,
  body .ts-mobile-filters a:active{
    color: var(--global-palette3) !important;
  }

  body .ts-mobile-filters .widget-title{
    color: var(--global-palette3) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  /* Sidebar жасыру */
  #secondary{ display: none !important; }
  .site-footer{ padding-bottom: 0 !important; }
}

/* Mega panel font */
.ts-mega-panel{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
/* =====================================================
   FINAL FORCE FIX — MOBILE FILTER VISIBILITY
   (Kadence / Woo inline styles override)
   ===================================================== */

/* Тек мобильде */
@media (max-width: 768px){

  /* 1️⃣ Панель әрқашан жабық */
  body .site .content-area .ts-mobile-filters{
    display: none !important;
  }

  /* 2️⃣ is-open келгенде МІНДЕТТІ түрде ашылады */
  body .site .content-area .ts-mobile-filters.is-open{
    display: block !important;
  }

  /* 3️⃣ Woo price slider ішінде display бұзылмасын */
  body .site .content-area .ts-mobile-filters .price_slider,
  body .site .content-area .ts-mobile-filters .price_slider_amount{
    display: block !important;
  }

  /* 4️⃣ Түстерді Kadence override етпесін */
  body .site .content-area .ts-mobile-filters,
  body .site .content-area .ts-mobile-filters *{
    color: var(--global-palette3) !important;
  }

}
/* Prevent product image CLS */
.woocommerce ul.products li.product img{
  aspect-ratio: 1 / 1;
  object-fit: contain;
  height: auto;
}
/* =========================
   MOBILE OPTIMIZATION PACK
========================= */

/* 1) Tap targets: buttons/links bigger (UX + Core Web Vitals) */
@media (max-width: 768px){
  a, button, .woocommerce a.button, .woocommerce button.button, .elementor-button{
    min-height: 44px;
  }
}

/* 2) Prevent image layout shifts (general) */
img{
  height: auto;
}

/* 3) Product grid images: stable box (CLS) */
.woocommerce ul.products li.product img{
  aspect-ratio: 1 / 1;
  object-fit: contain;
  height: auto;
}

/* 4) Avoid overflow causing reflow on mobile */
html, body{
  overflow-x: hidden;
}

/* 5) Smooth scroll lock issues (optional, safe) */
@media (max-width: 768px){
  .ts-catalog-panel{ -webkit-overflow-scrolling: touch; }
}
/* =========================================================
   TS FINAL — Product tabs + Attributes (Woo)
   moved from snippet inline <style> -> ts-custom.css
========================================================= */

/* Hide Description tab */
.single-product li.description_tab,
.single-product #tab-description{
  display:none !important;
}

/* Attributes table styling */
.single-product .woocommerce-product-attributes{
  width:100% !important;
  margin:0 !important;
}

/* IMPORTANT FIX: !important дұрыс жазылуы керек */
.single-product .woocommerce-product-attributes th{
  text-align:left;
  width:50%;
  font-weight:400 !important;
  font-size:15px;
  line-height:1.4;
}

.single-product .woocommerce-product-attributes td{
  text-align:right;
  width:50%;
  font-size:14px;
  line-height:1.4;
  white-space:normal;
  word-break:break-word;
}

/* DESKTOP: bring attribute name & value closer */
@media (min-width: 769px){
  .single-product .woocommerce-product-attributes th{
    width:30%;
    padding-right:12px;
  }
  .single-product .woocommerce-product-attributes td{
    width:70%;
    max-width:520px;
    padding-left:8px;
    white-space:normal;
    word-break:break-word;
    text-align:left;
    line-height:1.35;
  }
}

/* Disable attribute links visually */
.single-product .woocommerce-product-attributes a{
  pointer-events:none;
  cursor:default;
  text-decoration:none;
  color:inherit;
}


/* =========================================================
   TS FINAL — Mobile bottom nav + Catalog panel
   moved from snippet inline <style> -> ts-custom.css
========================================================= */

/* Bottom nav (BLACK) */
@media (max-width: 768px){

  .ts-mobile-bottom-nav{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 99999;
    display: flex;
    justify-content: space-around;

    /* FIX: бір item төмен түсіп қалмасын */
    align-items: stretch;

    background: #000;
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  }

  /* FIX: a және button-ды бірдей қыламыз */
  .ts-mobile-bottom-nav a,
  .ts-mobile-bottom-nav .tsbn-btn{
    flex: 1;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    height:56px;
    padding:0 !important;
    margin:0 !important;

    text-align:center;
    text-decoration:none;
    color:#fff;
    font-size:11px;

    line-height:1 !important;

    border:0 !important;
    background:transparent !important;
    cursor:pointer;

    font: inherit !important;
    letter-spacing: inherit !important;

    -webkit-appearance:none !important;
    appearance:none !important;

    -webkit-tap-highlight-color: transparent;
  }

  .ts-mobile-bottom-nav .icon{
    display:block;
    font-size:18px;
    margin:0 0 4px 0 !important;
    line-height:1 !important;
  }

  .ts-mobile-bottom-nav .text{
    display:block;
    margin:0 !important;
    line-height:1.1 !important;
  }

  /* Space so content isn't hidden under bottom nav */
  body{
    padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }

  /* Overlay + panel */
  .ts-catalog-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99998;
  }

  .ts-catalog-panel{
    position: fixed;
    left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom));
    z-index: 99999;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 12px 12px 10px;
    box-shadow: 0 -10px 30px rgba(0,0,0,.25);
    max-height: 72vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ts-catalog-head{
    display:flex;
    justify-content: space-between;
    align-items:center;
    margin-bottom: 10px;
  }

  .ts-close{
    border:0;
    background:transparent;
    font-size:18px;
    cursor:pointer;
    padding: 6px 8px;
  }

  /* WP Menu basic styling */
  .ts-catalog-menu .ts-menu{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ts-catalog-menu .ts-menu > li{
    border-bottom: 1px solid rgba(0,0,0,.08);
  }

  .ts-catalog-menu .ts-menu li a{
    display: block;
    padding: 11px 8px;
    text-decoration: none;
    color: #111;
  }

  /* Accordion */
  .ts-catalog-menu .ts-menu li.menu-item-has-children > .sub-menu{
    display: none;
    margin: 0;
    padding: 0 0 6px 10px;
    list-style: none;
    border-top: 1px solid rgba(0,0,0,.06);
    background: rgba(0,0,0,.02);
  }

  .ts-catalog-menu .ts-menu .sub-menu li a{
    padding: 10px 8px;
  }

  /* caret */
  .ts-catalog-menu .ts-menu li.menu-item-has-children > a{
    position: relative;
    padding-right: 36px;
  }

  .ts-catalog-menu .ts-menu li.menu-item-has-children > a::after{
    content: "▾";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: .7;
  }

  /* open state */
  .ts-catalog-menu .ts-menu li.ts-open > .sub-menu{ display: block; }
  .ts-catalog-menu .ts-menu li.ts-open > a::after{ content: "▴"; }

  /* "All products" */
  .ts-all{
    display:block;
    margin-top: 10px;
    padding: 11px 8px;
    text-decoration: none;
    font-weight: 600;
    color: #111;
  }

  .ts-menu-empty{
    padding: 10px 8px;
    color: #b00020;
  }
}
/* FIX: bottom nav text too large */
@media (max-width: 768px){

  .ts-mobile-bottom-nav a,
  .ts-mobile-bottom-nav .tsbn-btn{
    font-size: 11px !important;     /* мәтін */
    font-weight: 500 !important;
  }

  .ts-mobile-bottom-nav .icon{
    font-size: 18px !important;     /* иконка */
  }

  .ts-mobile-bottom-nav .text{
    font-size: 11px !important;
    line-height: 1.15 !important;
  }
}
/* =========================================
   FIX: Bottom nav background too tall
========================================= */
@media (max-width: 768px){

  /* 1) фонның ішкі padding-ін азайтамыз */
  .ts-mobile-bottom-nav{
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
  }

  /* 2) әр item биіктігін аздап кішірейтеміз */
  .ts-mobile-bottom-nav a,
  .ts-mobile-bottom-nav .tsbn-btn{
    height: 42px !important;   /* бұрын 56px */
  }

  /* 3) контент төменнен артық бос орын алмауы үшін */
  body{
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
}


/* TS: FORCE same font in Mega Menu (Kadence) — SPEED SAFE */
html body .site-header .kadence-header-menu,
html body .site-header .kadence-header-menu *,
html body .site-header .header-navigation,
html body .site-header .header-navigation *,
html body .site-header .primary-navigation,
html body .site-header .primary-navigation *,
html body .site-header .main-navigation,
html body .site-header .main-navigation *,
html body .site-header .menu,
html body .site-header .menu *,
html body .site-header .sub-menu,
html body .site-header .sub-menu *{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 500 !important;
}






/* === FIX: Remove Montserrat + heavy bold from site title (Kadence) === */
.site-branding .site-title,
.site-branding .site-title a{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 600 !important; /* 500 немесе 600 ұсынылады */
  letter-spacing: 0 !important;
}

/* Hide TS mobile filter button on desktop */
@media (min-width: 769px){
  .ts-top-filter-wrap{ display: none !important; }
}
/* =========================================
   TS: Mobile FILTER PANEL typography (Inter)
   Only inside .ts-mobile-filters (mobile)
========================================= */
@media (max-width: 768px){

  /* Панельдің жалпы мәтіні */
  body .ts-mobile-filters,
  body .ts-mobile-filters *{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
  }

  /* Тақырыптар (Производитель, Процессор...) — бұрынғыдай жинақы */
  body .ts-mobile-filters .widget-title{
    font-size: 17px !important;     
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }

  /* Сілтемелер/фильтр элементтері */
  body .ts-mobile-filters a,
  body .ts-mobile-filters .woocommerce-widget-layered-nav-list__item{
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
  }

  /* Count (2), (1) */
  body .ts-mobile-filters .count{
    font-size: 12px !important;
    font-weight: 500 !important;
    opacity: .75;
  }

  /* Price filter батырмасы */
  body .ts-mobile-filters .widget_price_filter .button{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }
}
@media (max-width: 767px){
  .best-sellers-2col ul.wc-block-grid__products{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===== Kadence Button (Exact Clone) ===== */
.kadence-btn-like{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;

  padding: 12px 26px !important;
  min-height: 44px;

  font-family: inherit;
  font-size: 16px;
  font-weight: 500;

  background-color: var(--global-palette1) !important;
  color: var(--global-palette9) !important;

  border-radius: var(--global-radius, 6px) !important;
  text-decoration: none !important;

  cursor: pointer;
  position: relative;
  z-index: 999 !important;

  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: all .2s ease;
}

/* Hover */
.kadence-btn-like:hover{
  background-color: var(--global-palette2) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* Mobile */
@media (max-width: 768px){
  .kadence-btn-like{
    font-size: 15px;
    padding: 10px 22px !important;
  }
}