/*
Theme Name: Safety4You
Template: kadence
Version: 1.0.0
Description: Safety4You egyedi kezdőlap – Kadence child téma, a mockup alapján kódolva.
Author: JesssyBoy
*/

/* ===== Kezdőlap – Safety4You ===== */

.s4y-home {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 20px 60px;
	font-family: inherit;
}

/* --- Gombok --- */
.s4y-btn {
	display: inline-block;
	background: #E67E12;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
	padding: 12px 28px;
	border-radius: 6px;
	transition: background .15s ease;
	line-height: 1.2;
}
.s4y-btn:hover { background: #C06A0C; }
.s4y-btn-lg {
	font-size: 20px;
	padding: 16px 36px;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* --- Hero --- */
.s4y-hero {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	min-height: 440px;
	display: flex;
	align-items: center;
	background: #2B3038 url('assets/hero.jpg') no-repeat right center;
	background-size: cover;
}
.s4y-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(30,34,40,.92) 0%, rgba(30,34,40,.72) 38%, rgba(30,34,40,.15) 70%, rgba(30,34,40,0) 100%);
}
.s4y-hero-inner {
	position: relative;
	z-index: 1;
	padding: 48px 56px;
	max-width: 620px;
}
.s4y-hero h1 {
	color: #fff;
	font-weight: 800;
	font-size: clamp(30px, 4.5vw, 52px);
	line-height: 1.12;
	text-transform: uppercase;
	margin: 0 0 28px;
}

/* --- Kategóriakártyák --- */
.s4y-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 28px;
}
.s4y-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	background: #f3f4f7;
	border-radius: 10px;
	min-height: 300px;
	padding: 28px 16px 26px;
	text-decoration: none !important;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}
.s4y-cat:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(43,48,56,.14);
}
.s4y-cat img {
	max-height: 150px;
	width: auto;
	margin-bottom: auto;
	margin-top: auto;
}
.s4y-cat-title {
	font-size: 22px;
	font-weight: 800;
	color: #2B3038;
	text-transform: uppercase;
	letter-spacing: .01em;
	text-align: center;
}
/* fotós kártya (Munkaruházat) */
.s4y-cat-photo {
	background: #2B3038 url('assets/munkaruha.jpg') no-repeat center top;
	background-size: cover;
}
.s4y-cat-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30,34,40,0) 35%, rgba(30,34,40,.82) 100%);
}
.s4y-cat-photo .s4y-cat-title { color: #fff; position: relative; }
.s4y-cat-photo .s4y-btn { position: relative; }

/* --- Kiemelt termékek --- */
.s4y-featured { margin-top: 56px; }
.s4y-featured > h2 {
	text-align: center;
	font-weight: 800;
	text-transform: uppercase;
	color: #2B3038;
	font-size: clamp(24px, 3vw, 34px);
	margin-bottom: 34px;
}

/* --- Mobil --- */
@media (max-width: 980px) {
	.s4y-cats { grid-template-columns: repeat(2, 1fr); }
	.s4y-hero { min-height: 360px; }
	.s4y-hero-inner { padding: 32px 28px; }
}
@media (max-width: 560px) {
	.s4y-cats { grid-template-columns: 1fr; }
	.s4y-cat { min-height: 240px; }
}

/* ===== Fejléc – mockup szerint ===== */

/* a Kadence saját fejléce el van rejtve, helyette a s4y-header él */
#masthead, .site-header { display: none !important; }

.s4y-header { width: 100%; }
.s4y-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 28px;
}

/* felső sötét sáv */
.s4y-bar { background: #2B3038; }
.s4y-bar .s4y-inner { padding-top: 14px; padding-bottom: 14px; }
.s4y-logo img { height: 52px; width: auto; display: block; }

/* kereső */
.s4y-search { flex: 1; }
.s4y-search .woocommerce-product-search { display: flex; }
.s4y-search .woocommerce-product-search .search-field {
	flex: 1;
	border: none;
	border-radius: 6px 0 0 6px;
	padding: 12px 16px;
	font-size: 15px;
}
.s4y-search .woocommerce-product-search button {
	background: #E67E12;
	color: #fff;
	border: none;
	border-radius: 0 6px 6px 0;
	padding: 12px 22px;
	font-weight: 700;
	cursor: pointer;
}
.s4y-search .woocommerce-product-search button:hover { background: #C06A0C; }

/* fiók + kosár */
.s4y-usernav { display: flex; gap: 26px; }
.s4y-usernav a {
	color: #fff;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	position: relative;
}
.s4y-usernav a:hover { color: #E67E12; }
.s4y-usernav svg { width: 26px; height: 26px; }
.s4y-cart-count {
	position: absolute;
	top: -7px;
	right: -10px;
	background: #E67E12;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

/* narancs menüsor */
.s4y-mainnav { background: #E67E12; }
.s4y-mainnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
.s4y-mainnav a {
	display: block;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: 15px;
	text-decoration: none;
	padding: 14px 20px;
}
.s4y-mainnav a:hover { background: #C06A0C; }

@media (max-width: 860px) {
	.s4y-bar .s4y-inner { flex-wrap: wrap; gap: 14px; }
	.s4y-search { order: 3; flex-basis: 100%; }
	.s4y-logo img { height: 42px; }
	.s4y-mainnav a { padding: 12px 14px; font-size: 14px; }
}