/* TechBar Catalog UI — məhsul kartları (köhnə mu-plugins/techbar-cards.php v1.3.5 CSS-i) */
/* ═══════════ KART ÇƏRÇİVƏSİ ═══════════ */
body.tb-cards .product-grid-item .product-wrapper{
	position:relative;
	display:flex; flex-direction:column;
	background:#fff;
	border:1px solid #EBEFF6;
	border-radius:14px;
	padding:14px;
	height:100%;
	/* İlkin: hover-də kart hərəkət/ölçü QƏTİ DƏYİŞMƏSİN — yalnız şəkil zoom.
	   Qalxma (translateY) və kölgə söndürüldü; yalnız zərif border qalır */
	transition:border-color .25s ease;
}
body.tb-cards .product-grid-item .product-wrapper:hover{
	border-color:#CFDDF5;
}
/* ⚠️ Woodmart-ın ÖZ hover effekti (wd-hover-with-fade) `.product-wrapper`-ə
   `transform:translateY(-5px)` + `z-index:20` verir — mənim :hover qaydamdan SPESİFİKDİR,
   ona görə kartı 5px qaldırır və qonşuların üstünə çıxarır (İlkin: "hər sətrin birinci kartı
   hover-də kənarlara çıxır"). Bütün hover-state selektorlarında SÖNDÜRÜLÜR (kart QƏTİ tərpənmir) */
body.tb-cards .product-grid-item:hover > .product-wrapper,
body.tb-cards .product-grid-item.state-hover > .product-wrapper,
body.tb-cards .product-grid-item.hover-ready:hover > .product-wrapper,
body.tb-cards .product-grid-item.wd-hover-with-fade:hover .product-wrapper,
body.tb-cards .product-grid-item.wd-hover-with-fade.state-hover .product-wrapper{
	transform:none !important;
	z-index:auto !important;
}
/* Woodmart-ın öz kart haşiyə/fon qatını söndür — ikiqat çərçivə olmasın */
body.tb-cards .products-bordered-grid .product-grid-item,
body.tb-cards .wd-products-with-bg .product-grid-item{
	border:0 !important; background:transparent !important; padding:0 !important;
}
body.tb-cards .products-bordered-grid.wd-products-with-bg .product-grid-item{ box-shadow:none !important; }

/* ═══════════ ŞƏKİL SAHƏSİ — açıq mavi qradient + blend ═══════════ */
body.tb-cards .product-grid-item .product-element-top{
	isolation:isolate;
	position:relative;
	border-radius:12px;
	overflow:hidden;
	margin-bottom:13px;
	background:linear-gradient(160deg,#E8F1FE 0%,#F4F9FF 55%,#FCFDFF 100%);
}
/* hover-də fon dəyişmir — İlkin yalnız şəkil zoom istədi */
body.tb-cards .product-grid-item .product-image-link{
	width:100% !important; height:auto !important;
	aspect-ratio:1/1;
	display:flex !important; align-items:center; justify-content:center;
	padding:10px;
	margin:0 !important;
}
/* ağ fonlu şəkillər mavi ilə qarışsın (fayl emalı lazım deyil) */
body.tb-cards .product-grid-item .product-image-link img,
body.tb-cards .product-grid-item .wd-product-grid-slide img,
body.tb-cards .product-grid-item .hover-img img{
	mix-blend-mode:multiply;
	max-width:100% !important; max-height:100% !important;
	width:auto !important; height:auto !important;
	object-fit:contain !important;
	margin:auto !important;
	transition:transform .3s ease;
}
body.tb-cards .product-grid-item .product-wrapper:hover .product-image-link img{ transform:scale(1.035); }
body.tb-cards .product-grid-item .wd-product-grid-slider,
body.tb-cards .product-grid-item .wd-product-grid-slide{
	display:flex; align-items:center; justify-content:center;
}
/* istək siyahısı / müqayisə düymələri — şəffaf fonda yumşaq */
body.tb-cards .product-grid-item .wd-buttons{ z-index:3; }
body.tb-cards .product-grid-item .wd-buttons .wd-action-btn > a{
	background:rgba(255,255,255,.86) !important;
	border-radius:50% !important;
	color:#7E8CA6 !important;
	backdrop-filter:blur(2px);
}
body.tb-cards .product-grid-item .wd-buttons .wd-action-btn > a:hover{ color:#1A62E7 !important; }

/* ═══════════ ALT HİSSƏ — sıra və ritm ═══════════ */
body.tb-cards .product-grid-item .product-element-bottom{
	display:flex; flex-direction:column; flex:1 1 auto; min-width:0;
}
/* sticker sırası başlıqdan ƏVVƏLƏ (DOM dəyişmir, yalnız vizual sıra) */
body.tb-cards .product-grid-item .custom-buttons{ order:-1; }

/* ═══════════ STICKER-LƏR — yumşaq pastel, tək sətir ═══════════ */
body.tb-cards .product-grid-item .custom-buttons{
	display:flex !important; flex-wrap:nowrap; align-items:center; gap:6px;
	height:23px; overflow:hidden; margin:0 0 10px !important; padding:0 !important;
}
body.tb-cards .product-grid-item .custom-buttons .button-stock-status{
	position:static !important;
	flex:0 0 auto;
	width:auto !important; min-width:0 !important; max-width:none !important;
	margin:0 !important;
	padding:6px 9px !important;
	font-size:10.5px !important; font-weight:600 !important; line-height:1 !important;
	letter-spacing:.015em;
	border:0 !important; border-radius:20px !important;
	white-space:nowrap;
	box-shadow:none !important;
	animation:none !important; transform:none !important;
	text-transform:none !important;
}
body.tb-cards .product-grid-item .custom-buttons .in-stock{ background:#EEF4FF !important; color:#3E6FD1 !important; }
body.tb-cards .product-grid-item .custom-buttons .order-online{ background:#EFF7F3 !important; color:#41876A !important; }
body.tb-cards .product-grid-item .custom-buttons .taksit-button{ background:#FEF3E6 !important; color:#B96A21 !important; }
body.tb-cards .product-grid-item .custom-buttons .out-of-stock{ background:#FDECEC !important; color:#C0392B !important; }
/* tooltip-lər olduğu kimi işləsin */
body.tb-cards .product-grid-item .credit-tooltip,
body.tb-cards .product-grid-item .online-tooltip{ z-index:6; }

/* ═══════════ BAŞLIQ — 2 sətir ═══════════ */
body.tb-cards .product-grid-item .woocommerce-loop-product__title{
	display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
	overflow:hidden;
	height:40px !important; min-height:0 !important; max-height:none !important;
	margin:0 0 8px !important; padding:0 !important;
	font-size:14.5px !important; line-height:20px !important; font-weight:600 !important;
}
body.tb-cards .product-grid-item .woocommerce-loop-product__title a{
	color:#3D4C66 !important; text-decoration:none;
	transition:color .2s ease;
}
body.tb-cards .product-grid-item .woocommerce-loop-product__title a:hover{ color:#1A62E7 !important; }

/* ═══════════ QISA TƏSVİR — DƏQİQ 3 SƏTİR ═══════════ */
body.tb-cards .product-grid-item .short-description{
	display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical;
	overflow:hidden !important;
	height:57px !important; min-height:0 !important; max-height:57px !important;
	margin:0 0 12px !important; padding:0 !important;
	font-size:12.5px !important; line-height:19px !important; font-weight:400 !important;
	color:#93A0B8 !important;
}
body.tb-cards .product-grid-item .short-description *{ font-size:inherit !important; color:inherit !important; }

/* ═══════════ QİYMƏT ═══════════ */
body.tb-cards .product-grid-item .wrap-price{
	display:flex !important; flex-direction:column; gap:0;
	width:100% !important; margin:0 !important; padding:12px 0 0 !important;
	border-top:1px solid #EBEFF6;
}
body.tb-cards .product-grid-item .wrap-price .price{
	display:flex !important; align-items:baseline; flex-wrap:nowrap; gap:8px;
	width:100% !important; height:30px; overflow:hidden;
	margin:0 0 11px !important; padding:0 !important;
	font-size:22px !important; font-weight:700 !important; letter-spacing:-.02em;
	color:#3D4C66 !important;
	white-space:nowrap;
}
body.tb-cards .product-grid-item .wrap-price .price ins{
	order:1; text-decoration:none !important; background:transparent !important;
	font-size:22px !important; font-weight:700 !important; color:#3D4C66 !important;
}
body.tb-cards .product-grid-item .wrap-price .price del{
	order:2; opacity:1 !important;
	font-size:12.5px !important; font-weight:400 !important;
	color:#AEB9CC !important; text-decoration:line-through !important;
	min-width:0; overflow:hidden;
}
body.tb-cards .product-grid-item .wrap-price .price del *{ font-size:inherit !important; color:inherit !important; }

/* ═══════════ TAKSİT BLOKU — açıq mavi + brend zolağı ═══════════ */
body.tb-cards .product-grid-item .taksit-container{
	position:relative;
	display:flex !important; flex-direction:row !important; align-items:center;
	/* geniş kart (desktop/tablet): center + sabit gap → content mərkəzdə YIĞCAM, artıq yer kənarlara.
	   Mobil dar kartda bu daşdıra bilər → @600-də space-around-a keçir (aşağı) */
	justify-content:center; gap:14px;
	width:100% !important; height:46px; min-height:0 !important;
	margin:0 0 13px !important; padding:0 10px 0 12px !important;
	border:0 !important; border-radius:11px;
	background:linear-gradient(135deg,#EAF1FE 0%,#F5F9FF 100%) !important;
	overflow:hidden;
}
body.tb-cards .product-grid-item .taksit-container::before{
	content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
	background:linear-gradient(180deg,#5A90F1,#1A62E7);
}
body.tb-cards .product-grid-item .taksit-options{
	display:flex !important; align-items:center; gap:2px;
	/* Woodmart seqmentə flex-grow verir → geniş kartda qutu böyüyür, labellər solda qalır,
	   sağı boşalır (İlkinin gördüyü "orta boşluq"). flex:0 0 auto → seqment yalnız məzmun qədər */
	flex:0 0 auto !important; width:auto !important;
	background:rgba(255,255,255,.85); border-radius:8px; padding:2px;
	margin:0 !important;
}
body.tb-cards .product-grid-item .taksit-options input[type="radio"]{
	position:absolute !important; opacity:0 !important; width:0 !important; height:0 !important;
	margin:0 !important; pointer-events:none;
}
body.tb-cards .product-grid-item .taksit-options label{
	margin:0 !important;
	padding:6px 9px !important;
	font-size:11.5px !important; font-weight:600 !important; line-height:1 !important;
	color:#697999 !important;
	background:transparent !important;
	border:0 !important; border-radius:6px !important;
	cursor:pointer; white-space:nowrap;
	transition:background .18s ease, color .18s ease;
}
body.tb-cards .product-grid-item .taksit-options label:hover{ color:#1A62E7 !important; }
body.tb-cards .product-grid-item .taksit-options input[type="radio"]:checked + label{
	background:#1A62E7 !important; color:#fff !important; font-weight:600 !important;
	box-shadow:none !important;
}
body.tb-cards .product-grid-item .taksit-price{
	flex:0 0 auto !important;
	margin:0 !important; padding:0 !important;
	font-size:13.5px !important; font-weight:700 !important; letter-spacing:-.01em;
	color:#1A62E7 !important; white-space:nowrap;
}
/* "/ay" CSS-dədir — JS yalnız textContent-i dəyişir, pseudo-element qalır */
body.tb-cards .product-grid-item .taksit-price::after{
	content:"/ay";
	font-size:11px; font-weight:500; color:#93A6C6; letter-spacing:0; margin-left:2px;
}

/* ═══════════ SƏBƏTƏ ƏLAVƏ ET ═══════════ */
body.tb-cards .product-grid-item .wd-add-btn{
	margin-top:auto !important; width:100%;
}
body.tb-cards .product-grid-item .wd-add-btn > a,
body.tb-cards .product-grid-item .wd-add-btn .button{
	display:flex !important; align-items:center; justify-content:center;
	width:100% !important; height:44px !important;
	margin:0 !important; padding:0 10px !important;
	border:0 !important; border-radius:10px !important;
	background:#1A62E7 !important; color:#fff !important;
	font-size:13.5px !important; font-weight:600 !important; letter-spacing:.01em;
	text-transform:none !important;
	transition:background .18s ease, box-shadow .18s ease;
}
body.tb-cards .product-grid-item .wd-add-btn > a:hover,
body.tb-cards .product-grid-item .wd-add-btn .button:hover{
	background:#1354CE !important; box-shadow:0 6px 18px rgba(26,98,231,.26);
}

/* ═══════════ TABLET ═══════════ */
@media(max-width:1024px){
	body.tb-cards .product-grid-item .product-wrapper{ padding:12px; }
	/* 217px kartda taksit 4px daşırdı (ölçüldü) — etiket və paddinglər yığcamlaşır */
	body.tb-cards .product-grid-item .taksit-container{ padding:0 8px 0 11px !important; gap:12px; }
	body.tb-cards .product-grid-item .taksit-options label{ font-size:10.5px !important; padding:5px 7px !important; }
	body.tb-cards .product-grid-item .taksit-price{ font-size:12.5px !important; }
	body.tb-cards .product-grid-item .taksit-price::after{ font-size:10px; }
}

/* ═══════════ MOBİL ═══════════ */
@media(max-width:600px){
	body.tb-cards .product-grid-item .product-wrapper{ padding:11px; border-radius:12px; }
	body.tb-cards .product-grid-item .product-element-top{ margin-bottom:10px; border-radius:9px; }
	body.tb-cards .product-grid-item .product-image-link{ padding:7px; }
	/* sticker sırası: kəsilmək əvəzinə barmaqla sürüşür (PDP ilə eyni pattern) */
	body.tb-cards .product-grid-item .custom-buttons{
		height:21px; margin-bottom:8px !important;
		overflow-x:auto; overflow-y:hidden;
		scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
	}
	body.tb-cards .product-grid-item .custom-buttons::-webkit-scrollbar{ display:none; }
	body.tb-cards .product-grid-item .custom-buttons .button-stock-status{
		font-size:9.5px !important; padding:5px 7px !important;
	}
	body.tb-cards .product-grid-item .woocommerce-loop-product__title{
		font-size:12.8px !important; line-height:17px !important; height:34px !important; margin-bottom:7px !important;
	}
	body.tb-cards .product-grid-item .short-description{ display:none !important; }
	body.tb-cards .product-grid-item .wrap-price{ border-top:0; padding-top:0 !important; }
	body.tb-cards .product-grid-item .wrap-price .price{ height:25px; margin-bottom:8px !important; gap:5px; font-size:16px !important; }
	body.tb-cards .product-grid-item .wrap-price .price ins{ font-size:16px !important; }
	body.tb-cards .product-grid-item .wrap-price .price del{ font-size:10.5px !important; }
	/* mobil dar kart: space-around (İlkin bəyəndi) — content sahəni doldurur, gap daşdırmasın */
	body.tb-cards .product-grid-item .taksit-container{ justify-content:space-around !important; height:40px; padding:0 6px 0 9px !important; gap:4px; margin-bottom:9px !important; }
	body.tb-cards .product-grid-item .taksit-options{ padding:1px; }
	body.tb-cards .product-grid-item .taksit-options label{ font-size:9.5px !important; padding:5px 6px !important; }
	body.tb-cards .product-grid-item .taksit-price{ font-size:11px !important; }
	body.tb-cards .product-grid-item .taksit-price::after{ font-size:9px; margin-left:1px; }
	body.tb-cards .product-grid-item .wd-add-btn > a,
	body.tb-cards .product-grid-item .wd-add-btn .button{ height:38px !important; font-size:12px !important; }
}

/* ═══════════ ÇOX DAR EKRAN — taksit şaquli ═══════════ */
@media(max-width:365px){
	body.tb-cards .product-grid-item .wrap-price .price{ font-size:15px !important; }
	body.tb-cards .product-grid-item .wrap-price .price ins{ font-size:15px !important; }
	body.tb-cards .product-grid-item .wrap-price .price del{ display:none !important; }
	body.tb-cards .product-grid-item .taksit-container{
		flex-direction:column !important; align-items:flex-start !important;
		justify-content:center; gap:2px; height:46px; padding:0 7px 0 9px !important;
	}
	body.tb-cards .product-grid-item .taksit-options label{ font-size:9px !important; padding:4px 6px !important; }
	body.tb-cards .product-grid-item .taksit-price{ font-size:11px !important; }
}

/* ==== ŞƏKİL QUTUSU: bütün kartlarda EYNİ kvadrat (2026-07-21) ====
   Baq (ölçüldü, kateqoriya səhifəsi): sıranın İLK kartında <img> elementi
   205×185 render olunurdu, qalanlarda 205×205 — halbuki bütün şəkillər
   1000×1000 (nisbət 1.000) və konteyner eynidir (225×225, aspect 1/1).
   Fərq: ilk kartın .product-image-link-ində 3 əlavə <link> düyünü var
   (LCP preload) və flex hesablaması şəklin hündürlüyünü 20px əskik verirdi
   → object-fit:contain şəkli 185×185-ə kiçildirdi (İlkin: "ilk məhsulun
   şəkli balacalaşır"). Həll: şəkil qutusunu hər kartda məcburi kvadrat et. */
body.tb-cards .product-grid-item .product-image-link > img,
body.tb-cards .product-grid-item .product-image-link > a > img{
  width:100% !important; height:100% !important;
  aspect-ratio:1 / 1 !important; object-fit:contain !important;
}

/* ═══════════ TechBar Catalog UI əlavələri ═══════════ */
/* «Taksitlə al» nişanı (əvvəl şablonda inline stil idi) */
.custom-buttons .button-stock-status.taksit-button{background-color:#fff;color:red;border-radius:4px;font-weight:bold;}
/* Taksit həddindən ucuz / stoksuz məhsulda aylıq blok yoxdur */
.taksit-container.tbcu-monthly.is-empty{display:none !important;}
/* Kateqoriya üst mətni (əvvəl functions.php-də hər səhifəyə inline yazılırdı) */
.shop-cat-ust-icerik{background:#FFFFFF;border-radius:6px;padding:20px;margin-bottom:35px;font-size:1.1em;color:#222;}
.shop-cat-ust-icerik p:last-child{margin-bottom:0;}
/* Sayt boyu gizlədilən bloklar (əvvəl functions.php wp_head inline) */
.product-label.onsale,
section.wd-negative-gap.elementor-section.elementor-top-section.elementor-element.elementor-element-77356c7.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default.wd-section-disabled{display:none !important;}
.top-promo-banner,.promo-bar,.home-top-banner,.whb-row.whb-top-bar{display:none !important;}