/*
 * ═══════════════════════════════════════════════════════════════
 *  TopStore.co.il — Woodmart Brand Redesign (v4: לבן + ירוק/נייבי)
 *  topstore-brand.css — לטעינה מ-child theme (עדיפות 999)
 * ═══════════════════════════════════════════════════════════════
 *  פלטה מהלוגו: ירוק ליים #8FBE2F | נייבי #1B3956 | רקע לבן/בהיר
 *  טיפוגרפיה: Rubik (כותרות) + Heebo (טקסט)
 *  שלוש מחלקות: מוצרי חשמל / מתצוגה / תעשייתיים
 * ═══════════════════════════════════════════════════════════════
 */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&family=Heebo:wght@300;400;500;600;700;800&display=swap');

:root {
  --ts-green: #8FBE2F;
  --ts-green-l: #A8D44E;
  --ts-green-d: #6F9A1E;
  --ts-green-bg: #F3F9E8;
  --ts-navy: #1B3956;
  --ts-navy-l: #2A5580;
  --ts-navy-d: #0F2640;
  --ts-navy-bg: #EDF1F5;
  --ts-steel: #565D68;      /* תעשייתיים */
  --ts-white: #FFFFFF;
  --ts-off: #F7F8FA;
  --ts-border: #E0E4EA;
  --ts-text: #1C2A3A;
  --ts-text2: #4A5568;
  --ts-text3: #8896A6;
  --ts-red: #D94444;
  --ts-red-bg: #FEF2F2;
  --ts-radius: 12px;
  --ts-radius-sm: 8px;
  --ts-shadow: 0 4px 16px rgba(27,57,86,.08);
  --ts-shadow-lg: 0 12px 40px rgba(27,57,86,.1);
  --ts-ease: cubic-bezier(.4,0,.2,1);
}

/* ═══ 1. GLOBAL ═══ */
body {
  background-color: var(--ts-off) !important;
  font-family: 'Heebo', sans-serif !important;
  color: var(--ts-text) !important;
}
h1, h2, h3, h4, h5, h6,
.title, .woodmart-title-container .title {
  font-family: 'Rubik', 'Heebo', sans-serif !important;
  color: var(--ts-navy);
}
::selection { background: var(--ts-green); color: #fff; }

/* ═══ 2. TOP BAR ═══ */
.topbar-wrapp, .woodmart-topbar {
  background-color: var(--ts-navy) !important;
}
.topbar-wrapp *, .woodmart-topbar * {
  color: #fff !important;
  font-size: 13px !important;
}
.topbar-wrapp a:hover { color: var(--ts-green-l) !important; }

/* ═══ 3. HEADER ═══ */
.whb-main-header, .whb-header, .whb-row {
  background-color: var(--ts-white) !important;
}
.whb-sticky-header .whb-main-header, .whb-sticky-header .whb-row {
  background-color: var(--ts-white) !important;
  box-shadow: 0 2px 20px rgba(27,57,86,.08) !important;
}

/* Search */
.woodmart-search-form input[type="text"],
.whb-header .searchform input {
  background: var(--ts-off) !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: 40px !important;
  color: var(--ts-text) !important;
  transition: all .3s var(--ts-ease) !important;
}
.woodmart-search-form input[type="text"]:focus,
.whb-header .searchform input:focus {
  border-color: var(--ts-green) !important;
  background: var(--ts-white) !important;
  box-shadow: 0 0 0 3px rgba(143,190,47,.15) !important;
}

/* Header icons */
.whb-header .woodmart-shopping-cart .woodmart-cart-icon,
.whb-header .woodmart-wishlist-icon,
.whb-header .woodmart-header-links a,
.whb-header .whb-row a {
  color: var(--ts-text2) !important;
}
.whb-header a:hover { color: var(--ts-green-d) !important; }
.woodmart-cart-icon .woodmart-cart-number,
.woodmart-shopping-cart .woodmart-cart-number {
  background-color: var(--ts-green) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* ═══ 4. NAVIGATION ═══ */
.whb-general-header .whb-navigation,
nav.whb-navigation { background: var(--ts-white) !important; border-top: 1px solid var(--ts-border) !important; }
.woodmart-navigation .menu > li > a {
  color: var(--ts-text2) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: color .3s !important;
  position: relative;
}
.woodmart-navigation .menu > li > a:hover,
.woodmart-navigation .menu > li.current-menu-item > a {
  color: var(--ts-green-d) !important;
}
.woodmart-navigation .menu > li > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; right: 0 !important; left: 0 !important;
  height: 3px !important;
  background: var(--ts-green) !important;
  border-radius: 2px 2px 0 0 !important;
  transform: scaleX(0) !important;
  transition: transform .3s var(--ts-ease) !important;
}
.woodmart-navigation .menu > li > a:hover::after,
.woodmart-navigation .menu > li.current-menu-item > a::after { transform: scaleX(1) !important; }

/* Mega menu / dropdowns */
.woodmart-navigation .menu .sub-menu,
.woodmart-mega-menu {
  background: var(--ts-white) !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: var(--ts-radius-sm) !important;
  box-shadow: var(--ts-shadow-lg) !important;
}
.woodmart-navigation .sub-menu li a { color: var(--ts-text2) !important; }
.woodmart-navigation .sub-menu li a:hover {
  color: var(--ts-green-d) !important;
  background: var(--ts-green-bg) !important;
}
.woodmart-mega-menu .menu-item-has-children > a {
  color: var(--ts-navy) !important;
  font-weight: 700 !important;
}

/* ═══ 5. BUTTONS ═══ */
.btn-color-primary, .button.alt, .woocommerce .button.alt,
.checkout-button, .single_add_to_cart_button,
.woodmart-add-btn a, button[type="submit"] {
  background-color: var(--ts-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ts-radius-sm) !important;
  font-family: 'Heebo', sans-serif !important;
  font-weight: 700 !important;
  transition: all .3s var(--ts-ease) !important;
}
.btn-color-primary:hover, .button.alt:hover,
.single_add_to_cart_button:hover {
  background-color: var(--ts-green-l) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(143,190,47,.35) !important;
}
.btn-color-primary.btn-style-bordered, .button:not(.alt) {
  background: transparent !important;
  border: 1px solid var(--ts-navy) !important;
  color: var(--ts-navy) !important;
}
.btn-color-primary.btn-style-bordered:hover, .button:not(.alt):hover {
  background: var(--ts-navy) !important;
  color: #fff !important;
}

/* ═══ 6. PRODUCT CARDS ═══ */
.woodmart-products .product .product-wrapper, .product-grid-item {
  background: var(--ts-white) !important;
  border-radius: var(--ts-radius) !important;
  border: 1px solid var(--ts-border) !important;
  overflow: hidden !important;
  transition: all .35s var(--ts-ease) !important;
}
.woodmart-products .product .product-wrapper:hover, .product-grid-item:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--ts-shadow-lg) !important;
  border-color: var(--ts-green) !important;
}
.product-image-link img { transition: transform .5s ease !important; }
.product-wrapper:hover .product-image-link img { transform: scale(1.05) !important; }

.woodmart-products .product .product-title,
.woocommerce-loop-product__title {
  font-family: 'Heebo', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--ts-text) !important;
}
.woodmart-product-brands-links a, .woodmart-product-cats a {
  color: var(--ts-green-d) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.woodmart-products .product .price ins, .woocommerce .price ins {
  font-family: 'Rubik', sans-serif !important;
  color: var(--ts-navy) !important;
  font-weight: 800 !important;
}
.woodmart-products .product .price del { color: var(--ts-text3) !important; }

/* Badges: מבצע=אדום | מתצוגה=ירוק | חדש=נייבי */
.onsale, .product-label .onsale {
  background-color: var(--ts-red) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}
.product-label .woodmart-custom-label {
  background-color: var(--ts-green) !important;
  color: #fff !important;
  border-radius: 6px !important;
}
.product-label .new {
  background-color: var(--ts-navy) !important;
  color: #fff !important;
  border-radius: 6px !important;
}

/* ═══ 7. SINGLE PRODUCT ═══ */
.single-product .summary h1.product_title {
  font-family: 'Rubik', sans-serif !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  color: var(--ts-navy) !important;
}
.single-product .summary .price,
.single-product .summary .price ins {
  font-family: 'Rubik', sans-serif !important;
  color: var(--ts-navy) !important;
  font-weight: 800 !important;
}
.woocommerce-tabs .tabs li.active a {
  color: var(--ts-green-d) !important;
  border-bottom-color: var(--ts-green) !important;
}

/* ═══ 8. CATEGORY / ARCHIVE ═══ */
.woocommerce .page-title, .woocommerce-products-header__title {
  font-family: 'Rubik', sans-serif !important;
  font-weight: 800 !important;
  color: var(--ts-navy) !important;
}
.widget-title, .woodmart-widget-title {
  font-weight: 700 !important;
  color: var(--ts-navy) !important;
  border-bottom: 3px solid var(--ts-green) !important;
  padding-bottom: 10px !important;
}
.widget_price_filter .ui-slider-range { background: var(--ts-green) !important; }
.widget_price_filter .ui-slider-handle {
  background: var(--ts-green) !important;
  border-color: var(--ts-green-d) !important;
}
.woocommerce-breadcrumb a, .breadcrumbs a { color: var(--ts-green-d) !important; }

/* ═══ 9. HOMEPAGE SECTIONS ═══ */
.woodmart-title-container .subtitle {
  color: var(--ts-green-d) !important;
  font-size: 12px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
.woodmart-title-container .title {
  font-family: 'Rubik', sans-serif !important;
  font-weight: 800 !important;
  color: var(--ts-navy) !important;
}
.woodmart-title-container .title-separator {
  background: linear-gradient(90deg, var(--ts-green), var(--ts-green-l)) !important;
  height: 3px !important;
  width: 50px !important;
  border-radius: 2px !important;
}

/* ═══ 10. שלוש המחלקות — באנרים ═══ */
/* class מותאם לכל באנר ב-WPBakery/Elementor */
.ts-division-banner {
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform .4s var(--ts-ease), box-shadow .4s !important;
  min-height: 300px !important;
}
.ts-division-banner:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--ts-shadow-lg) !important;
}
.ts-division-new { background: linear-gradient(135deg, var(--ts-navy-d), var(--ts-navy), var(--ts-navy-l)) !important; }
.ts-division-display { background: linear-gradient(135deg, #4A7A20, var(--ts-green-d), #4A7A20) !important; }
.ts-division-industrial { background: linear-gradient(135deg, #3A3F47, var(--ts-steel), #3A3F47) !important; }
.ts-division-banner h3, .ts-division-banner h2 { color: #fff !important; }
.ts-division-banner p { color: rgba(255,255,255,.65) !important; }

/* ═══ 11. כפתורי חדש/מתצוגה כפולים (כרטיסי קטגוריה) ═══ */
/* לשימוש ב-HTML block בתוך כרטיסי קטגוריה */
.ts-cat-links { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.ts-cl {
  flex: 1; padding: 8px 6px; border-radius: 6px;
  font-size: 12px; font-weight: 700; text-align: center;
  transition: all .25s var(--ts-ease); text-decoration: none !important;
}
.ts-cl-new {
  background: var(--ts-navy-bg); color: var(--ts-navy) !important;
  border: 1px solid rgba(27,57,86,.12);
}
.ts-cl-new:hover { background: var(--ts-navy); color: #fff !important; }
.ts-cl-display {
  background: var(--ts-red-bg); color: var(--ts-red) !important;
  border: 1px solid rgba(217,68,68,.15);
}
.ts-cl-display:hover { background: var(--ts-red); color: #fff !important; }
.ts-cl-industrial {
  background: #EEF0F3; color: var(--ts-steel) !important;
  border: 1px solid rgba(86,93,104,.2);
}
.ts-cl-industrial:hover { background: var(--ts-steel); color: #fff !important; }

/* ═══ 12. TRUST BAR ═══ */
.ts-trust-bar { background: var(--ts-white) !important; border-bottom: 1px solid var(--ts-border) !important; }
.ts-trust-bar .woodmart-info-box-icon {
  background: var(--ts-green-bg) !important;
  border: 1px solid rgba(143,190,47,.15) !important;
  border-radius: 12px !important;
  color: var(--ts-green-d) !important;
}
.ts-trust-bar .woodmart-info-box h4 { color: var(--ts-navy) !important; font-weight: 700 !important; }

/* ═══ 13. CTA BANNER ═══ */
.ts-cta-banner {
  background: var(--ts-navy) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  position: relative !important;
}
.ts-cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 50%, rgba(143,190,47,.12), transparent 50%);
  pointer-events: none;
}
.ts-cta-banner h2 { color: #fff !important; }
.ts-cta-banner p { color: rgba(255,255,255,.55) !important; }
.ts-cta-banner .ts-phone { color: var(--ts-green-l) !important; font-family: 'Rubik', sans-serif !important; font-weight: 800 !important; }

/* ═══ 14. FOOTER ═══ */
.footer-container, footer.footer-container, .woodmart-prefooter {
  background-color: var(--ts-navy-d) !important;
}
.footer-container .widget-title {
  color: var(--ts-green-l) !important;
  font-weight: 700 !important;
  border-bottom: none !important;
}
.footer-container .widget a, .footer-container .widget li a {
  color: rgba(255,255,255,.45) !important;
}
.footer-container .widget a:hover { color: var(--ts-green-l) !important; }
.footer-container, .footer-container .widget, .footer-container .widget p {
  color: rgba(255,255,255,.45) !important;
}
.copyrights-wrapper {
  background: var(--ts-navy-d) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.25) !important;
}

/* ═══ 15. MISC ═══ */
.scrollToTop, .woodmart-scroll-to-top {
  background-color: var(--ts-green) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 20px rgba(143,190,47,.4) !important;
}
.star-rating span::before, .star-rating::before { color: var(--ts-green) !important; }
.woodmart-loader, .woodmart-loading::after {
  border-color: var(--ts-green) !important;
  border-right-color: transparent !important;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--ts-off); }
::-webkit-scrollbar-thumb { background: var(--ts-green); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ts-green-d); }

/* Mobile menu */
.woodmart-mobile-menu, .mobile-nav { background: var(--ts-white) !important; }
.woodmart-mobile-menu li a { color: var(--ts-text2) !important; }
.woodmart-mobile-menu li a:hover { color: var(--ts-green-d) !important; }

/* ═══ 16. RESPONSIVE ═══ */
@media (max-width: 768px) {
  .woodmart-title-container .title { font-size: 26px !important; }
  .single-product .summary h1.product_title { font-size: 24px !important; }
  .ts-division-banner { min-height: 220px !important; }
}