/* =====================================================================
 * SHAHAZ.com — Men's Fashion landing (page-templates/shahaz-mens-fashion.php)
 * Clean rebuild (ZIP-157):
 *   1. Page shell · 2. Trust bar · 3. Hero (3 product images + copy)
 *   4. Category image tiles · 5. Sort chips + filter · 6. Product grid
 * Product cards are the shared canonical card (shahaz-canonical-card.css).
 * ===================================================================== */

/* ---------- 1. Page shell ---------- */
body.page-template-shahaz-mens-fashion{overflow-x:hidden;background:#F4F8FF;color:#172033;}
body.page-template-shahaz-mens-fashion #page,
body.page-template-shahaz-mens-fashion .site,
body.page-template-shahaz-mens-fashion .site-content,
body.page-template-shahaz-mens-fashion .ast-container{width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important;}
body.page-template-shahaz-mens-fashion #shahaz-header,
body.page-template-shahaz-mens-fashion .woocommerce-store-notice{display:none !important;}
body.page-template-shahaz-mens-fashion #shahaz-global-market-header{margin-bottom:0 !important;}

#shz-mens-fashion{
	--mf-pink:#E8336D;
	--mf-pink-deep:#C2185B;
	--mf-crimson:#B3123E;
	--mf-blue:#0B5DCF;
	--mf-navy:#0A2D67;
	--mf-teal:#007F86;
	--mf-line:#E3E8F1;
	min-height:100vh;
	padding:0 0 24px;
	background:radial-gradient(circle at 8% 30%,rgba(76,160,255,.16),transparent 28%),radial-gradient(circle at 92% 70%,rgba(0,190,170,.14),transparent 30%),#F4F8FF;
	font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
#shz-mens-fashion *,
#shz-mens-fashion *::before,
#shz-mens-fashion *::after{box-sizing:border-box;}
#shz-mens-fashion a,
#shz-mens-fashion button{-webkit-tap-highlight-color:transparent;}
#shz-mens-fashion a{color:inherit;text-decoration:none;}
#shz-mens-fashion a:focus:not(:focus-visible),
#shz-mens-fashion button:focus:not(:focus-visible){outline:none;}

/* ---------- 2. Trust bar ---------- */
.shz-mf-trust{display:flex;gap:2px;margin:0;padding:7px 6px;overflow-x:auto;scrollbar-width:none;background:#FFFFFF;border-bottom:1px solid var(--mf-line);box-shadow:none;}
.shz-mf-trust::-webkit-scrollbar{display:none;}
.shz-mf-trust__item{display:flex;flex:1 1 auto;align-items:center;justify-content:center;gap:4px;min-width:0;}
.shz-mf-trust__icon{flex:0 0 auto;width:22px;height:22px;filter:none;}
.shz-mf-trust__icon svg{display:block;width:100% !important;height:100% !important;}
.shz-mf-trust__text{display:flex;flex-direction:column;min-width:0;line-height:1.12;white-space:nowrap;}
.shz-mf-trust__text b,
.shz-mf-trust__text small{overflow:hidden;text-overflow:ellipsis;}
.shz-mf-trust__text b{color:var(--mf-crimson);font-size:9.5px;font-weight:800;}
.shz-mf-trust__text small{color:#2E2A33;font-size:8px;}

/* ---------- 3. Hero ---------- */
.shz-mf-hero{position:relative;isolation:isolate;min-height:160px;margin:6px 10px 0;overflow:hidden;border:1px solid #74A7EC;border-radius:22px;background:linear-gradient(110deg,#DFEEFF,#EDF7FF 55%,#D8F5F1);box-shadow:none;}
.shz-mf-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.98),transparent 26%),radial-gradient(circle at 76% 80%,rgba(255,255,255,.85),transparent 25%);}
.shz-mf-hero-copy{position:absolute;top:0;right:0;z-index:4;width:50%;padding:12px 10px 8px;overflow:hidden;}
.shz-mf-hero-copy > span{color:var(--mf-blue);font-size:10px;font-weight:900;letter-spacing:.08em;}
.shz-mf-hero-copy h1{margin:3px 0;color:var(--mf-navy);font-size:25px;line-height:.9;letter-spacing:-.02em;}
.shz-mf-hero-copy h1 b{display:block;color:var(--mf-teal);}
.shz-mf-hero-copy p{margin:0;color:#18365F;font-size:11px;font-weight:800;}
/* Product images: column 3 (next to the copy) stays as it was; columns 1-2
 * are larger, sit on the banner floor and overlap like a styled stack. */
.shz-mf-hero-models{position:absolute;top:0;bottom:0;left:0;z-index:1;width:58%;}
.shz-mf-hero-image-link{position:absolute;bottom:0;display:block;width:33.3333%;height:96%;filter:none;transition:transform .25s ease;}
.shz-mf-hero-image-link:nth-child(1){left:2%;z-index:1;width:36%;height:88%;bottom:5%;transform:rotate(-4deg);transform-origin:bottom center;}
.shz-mf-hero-image-link:nth-child(2){left:30%;z-index:3;width:38%;height:92%;bottom:3%;transform:rotate(2deg);transform-origin:bottom center;}
.shz-mf-hero-image-link:nth-child(3){left:66.6666%;z-index:2;transform:rotate(2.5deg);transform-origin:bottom center;}
.shz-mf-hero-image{position:absolute;inset:0;display:block;width:100% !important;height:100% !important;max-width:none !important;object-fit:cover;object-position:center top;border:2px solid #FFFFFF;border-radius:16px 16px 5px 5px;box-shadow:none;}
.shz-mf-hero-image-link:nth-child(1) .shz-mf-hero-image{border:3px solid #F5B928;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.8);}
.shz-mf-hero-image-link:nth-child(2) .shz-mf-hero-image{border:3px solid #FFFFFF;border-radius:16px;box-shadow:none;}
.shz-mf-hero-image-link:nth-child(3) .shz-mf-hero-image{border-color:rgba(0,169,154,.9);border-radius:8px 18px 8px 6px;}
.shz-mf-hero-image-link:active{transform:scale(.98);}

/* ---------- 4. Category image tiles ---------- */
.shz-mf-cats{display:flex;gap:8px;margin:8px 0 0;padding:2px 10px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;}
.shz-mf-cats::-webkit-scrollbar{display:none;}
.shz-mf-cat{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:4px;width:62px;}
.shz-mf-cat__img{display:grid;place-items:center;width:58px;height:58px;overflow:hidden;border:1.5px solid transparent;border-radius:12px;background:#F0F2F5;box-shadow:none;}
.shz-mf-cat__img img{display:block;width:100% !important;height:100% !important;max-width:none;object-fit:cover;}
.shz-mf-cat__img b{color:var(--mf-pink);font-size:20px;font-weight:800;}
.shz-mf-cat__name{max-width:100%;overflow:hidden;color:#24202A;font-size:11px;font-weight:600;line-height:1.15;white-space:nowrap;text-overflow:ellipsis;}
.shz-mf-cat.is-active .shz-mf-cat__img{border-color:var(--mf-pink);background:#FFF0F5;box-shadow:none;}
.shz-mf-cat.is-active .shz-mf-cat__name{color:var(--mf-crimson);font-weight:800;}

/* ---------- 5. Sort chips + filter ---------- */
.shz-mf-sort{display:flex;align-items:center;gap:6px;margin:8px 10px 0;}
.shz-mf-sort__chips{display:flex;flex:1 1 auto;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;}
.shz-mf-sort__chips::-webkit-scrollbar{display:none;}
.shz-mf-chip{display:inline-flex;flex:0 0 auto;align-items:center;gap:4px;height:30px;padding:0 11px;border:1px solid var(--mf-line);border-radius:10px;background:#FFFFFF;color:#24202A;font-size:12px;font-weight:600;white-space:nowrap;box-shadow:none;}
#shz-mens-fashion a.shz-mf-chip.is-active{border-color:transparent;background:linear-gradient(180deg,#EF4D7E 0%,var(--mf-pink-deep) 100%);color:#FFFFFF;box-shadow:none;}
.shz-mf-chip__arrows{width:8px;height:12px;fill:currentColor;opacity:.8;}
.shz-mf-chip__arrows.is-asc path:last-child,
.shz-mf-chip__arrows.is-desc path:first-child{opacity:.3;}
#shz-mens-fashion .shz-mf-filter{display:inline-flex;flex:0 0 auto;align-items:center;gap:4px;height:30px;min-height:0;margin:0;padding:0 4px;border:0;background:transparent;color:var(--mf-pink);font-size:13px;font-weight:700;box-shadow:none;cursor:pointer;}
#shz-mens-fashion .shz-mf-filter:hover,
#shz-mens-fashion .shz-mf-filter:focus{background:transparent;color:var(--mf-pink);}
.shz-mf-filter svg{width:18px;height:18px;}
.shz-mf-filter.is-active svg path{fill:rgba(232,51,109,.18);}
.shz-mf-sheet{margin:6px 10px 0;padding:10px;border:1px solid var(--mf-line);border-radius:12px;background:#FFFFFF;box-shadow:none;}
.shz-mf-sheet[hidden]{display:none;}
.shz-mf-sheet__row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.shz-mf-sheet label{display:flex;flex-direction:column;gap:3px;color:#24202A;font-size:12px;font-weight:600;}
.shz-mf-sheet input[type="number"]{width:100%;height:34px;min-height:0;margin:0;padding:0 10px;border:1px solid var(--mf-line);border-radius:8px;background:#F8FAFD;font-size:14px;}
.shz-mf-sheet label.shz-mf-sheet__check{flex-direction:row;align-items:center;gap:6px;margin-top:8px;}
.shz-mf-sheet__check input{accent-color:var(--mf-pink);}
.shz-mf-sheet__actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:10px;}
.shz-mf-sheet__actions a{color:#6B7280;font-size:13px;font-weight:600;}
#shz-mens-fashion .shz-mf-sheet__actions button{height:32px;min-height:0;margin:0;padding:0 18px;border:0;border-radius:9px;background:linear-gradient(180deg,#EF4D7E 0%,var(--mf-pink-deep) 100%);color:#FFFFFF;font-size:13px;font-weight:700;cursor:pointer;}

/* ---------- 6. Product grid ---------- */
.shz-mf-products{margin:0 12px;}
.shz-mf-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:12px 4px 10px;}
.shz-mf-section-heading small{color:var(--mf-blue);font-weight:900;letter-spacing:.12em;}
.shz-mf-section-heading h2{margin:3px 0 0;color:#172A46;font-size:clamp(22px,4vw,42px);line-height:1;}
.shz-mf-section-heading > span{color:#5F7898;font-size:12px;font-weight:800;}
.shz-mf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start;}
.shz-mf-empty{padding:34px 18px;border:1px solid #B7CCE8;border-radius:14px;background:rgba(255,255,255,.84);color:#536983;text-align:center;}

@media (min-width:521px){
	.shz-mf-hero{min-height:208px;margin:8px 12px 0;}
	.shz-mf-hero-copy{width:48%;padding:24px 20px 16px;}
	.shz-mf-hero-copy > span{font-size:13px;}
	.shz-mf-hero-copy h1{margin:6px 0 4px;font-size:clamp(28px,5vw,58px);line-height:.96;}
	.shz-mf-hero-copy p{font-size:18px;}
	.shz-mf-trust{padding:9px 14px;justify-content:space-around;}
	.shz-mf-trust__item{flex:0 1 auto;gap:8px;}
	.shz-mf-trust__icon{width:30px;height:30px;}
	.shz-mf-trust__text b{font-size:13px;}
	.shz-mf-trust__text small{font-size:11px;}
	.shz-mf-cat{width:76px;}
	.shz-mf-cat__img{width:70px;height:70px;}
	.shz-mf-cat__name{font-size:12px;}
}
@media (min-width:700px){
	.shz-mf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
	.shz-mf-hero{min-height:230px;}
	.shz-mf-hero-copy{padding:28px 34px;}
}
@media (min-width:1100px){
	.shz-mf-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
	.shz-mf-hero{min-height:269px;}
	.shz-mf-hero-copy{padding:38px 50px;}
}
@media (prefers-reduced-motion:reduce){
	.shz-mf-hero-image-link{transition:none;}
}