/* ================================================================
   Puentec Home — Base styles (Tailwind handles most layout/design)
   ================================================================ */

html {
	overflow-x: hidden !important;
}

body {
	overflow-x: hidden !important;
}

/* Force full-width — override theme container padding */
#primary,
#main,
#content,
.content-area,
.site-content,
.site-main,
.entry-content,
.hentry,
.col-full,
.page .entry-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	overflow: visible !important;
}

.ph-home-sections {
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.ph-home-sections .ph-section {
	padding-left: 20px;
	padding-right: 20px;
}

@media (max-width: 768px) {
	.ph-home-sections .ph-section {
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media (max-width: 480px) {
	.ph-home-sections .ph-section {
		padding-left: 6px;
		padding-right: 6px;
	}
}

/* ── Category circles: hide overflow text on mobile ───────────── */

@media (max-width: 768px) {
	.ph-category-carousel-section .ph-carousel-item .w-44 {
		width: 100px !important;
		height: 100px !important;
	}
}

@media (max-width: 480px) {
	.ph-category-carousel-section .ph-carousel-item .w-44 {
		width: 80px !important;
		height: 80px !important;
	}
}

.ph-home-sections a {
	text-decoration: none !important;
}

/* ── Scrollbar hide ──────────────────────────────────────────── */

.scrollbar-hide {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
	display: none;
}

/* ── WooCommerce price HTML overrides ────────────────────────── */

.ph-home-sections del {
	color: #9ca3af;
	font-size: 0.8em;
	font-weight: 400;
}

.ph-home-sections ins {
	text-decoration: none;
}

/* ── Brand showcase tab states ───────────────────────────────── */

.ph-brand-tab.active {
	background-color: #1b3a5c !important;
	color: #fff !important;
}

/* ── Brand product card filtered state ───────────────────────── */

.ph-brand-product-card.ph-hidden {
	display: none;
}

/* ── Responsive: product carousel items ──────────────────────── */

@media (max-width: 1024px) {
	.ph-product-carousel-section .ph-carousel-item {
		width: calc((100% - 3 * 1rem) / 4) !important;
	}
}

@media (max-width: 768px) {
	.ph-product-carousel-section .ph-carousel-item {
		width: calc((100% - 2 * 1rem) / 3) !important;
	}
	.ph-category-carousel-section .ph-carousel-item {
		width: calc((100% - 2 * 1.5rem) / 3) !important;
	}
	/* Hide carousel arrows on mobile (touch scroll) */
	.ph-carousel-arrow {
		display: none !important;
	}

}

@media (max-width: 480px) {
	.ph-product-carousel-section .ph-carousel-item {
		width: calc((100% - 1rem) / 2) !important;
	}
	.ph-category-carousel-section .ph-carousel-item {
		width: calc((100% - 1 * 1.5rem) / 2) !important;
	}
}

/* ── Benefits cards equal height ────────────────────────────── */

.ph-benefits-grid {
	align-items: stretch !important;
}

.ph-benefit-card {
	height: 100% !important;
}

.ph-benefit-card:hover {
	transform: translateY(-4px);
}

.ph-benefit-card .dashicons {
	color: #1b3a5c;
}

/* ── Brand logos section ─────────────────────────────────────── */

.ph-brand-logos-section {
	padding: 40px 0 0 !important;
	margin-bottom: -20px !important;
	overflow: hidden !important;
}

.ph-brand-title {
	text-align: center;
	margin-bottom: 24px;
}

.ph-brand-title h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: #1f2937;
}

/* Marquee wrapper */
.ph-marquee-wrapper {
	position: relative;
	overflow: hidden;
	padding: 8px 0 16px;
}

.ph-marquee-track {
	display: flex !important;
	gap: 32px !important;
	align-items: center !important;
	animation: ph-marquee-scroll 30s linear infinite;
	width: max-content !important;
}

.ph-marquee-wrapper:hover .ph-marquee-track {
	animation-play-state: paused;
}

/* Brand logo item */
.ph-brand-logo-item {
	flex-shrink: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 150px !important;
	text-decoration: none !important;
}

/* Circular container */
.ph-brand-circle {
	width: 120px !important;
	height: 120px !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 1px solid #e5e7eb !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
	overflow: hidden !important;
	transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.ph-brand-logo-item:hover .ph-brand-circle {
	box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
	border-color: var(--theme-accent-color, #ef8c00) !important;
	border-width: 2px !important;
}

/* Logo image */
.ph-brand-logo-img {
	max-width: 65% !important;
	max-height: 65% !important;
	object-fit: contain !important;
	transition: filter 0.3s ease !important;
}

/* Fallback letter */
.ph-brand-letter {
	font-size: 1.5rem;
	font-weight: 700;
	color: #1f2937;
}

@keyframes ph-marquee-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(var(--marquee-distance, -50%));
	}
}

/* ── Category circles styling ────────────────────────────────── */

.ph-category-carousel .ph-carousel-item > div:first-child {
	border: 2px solid #e5e7eb !important;
	border-radius: 50% !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.ph-category-carousel .ph-carousel-item:hover > div:first-child {
	border-color: var(--theme-accent-color, #ef8c00) !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* ── Category thumbnails grayscale → color on hover ────────── */

.ph-category-carousel .ph-carousel-item img {
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}

.ph-category-carousel .ph-carousel-item:hover img {
	filter: grayscale(0%);
}

/* ── Brand logos grayscale ───────────────────────────────────── */

.ph-brand-logo-img {
	filter: grayscale(100%) !important;
}

.ph-brand-logo-item:hover .ph-brand-logo-img {
	filter: grayscale(0%) !important;
}

/* ── Promo banner ────────────────────────────────────────────── */

.ph-promo-banner {
	margin: 2.5rem 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.ph-promo-banner img {
	width: 100%;
	height: auto;
	display: block;
}

.ph-promo-banner-mobile {
	display: none;
}

@media (max-width: 768px) {
	.ph-promo-banner-desktop {
		display: none;
	}
	.ph-promo-banner-mobile {
		display: block;
	}
}

/* ── Simple contact form ───────────────────────────────────── */

.ph-cf-input {
	width: 100% !important;
	padding: 14px 16px !important;
	border: none !important;
	border-bottom: 1px solid rgba(255,255,255,0.2) !important;
	background: transparent !important;
	font-size: 15px !important;
	color: #fff !important;
	transition: border-color 0.3s ease !important;
	outline: none !important;
	border-radius: 0 !important;
	box-sizing: border-box !important;
}

.ph-cf-input:focus {
	border-bottom-color: #e67e22 !important;
}

.ph-cf-input::placeholder {
	color: rgba(255,255,255,0.5) !important;
}

.ph-cf-submit {
	width: 100% !important;
	padding: 14px !important;
	background: #e67e22 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	cursor: pointer !important;
	transition: background 0.3s ease !important;
	margin-top: 8px !important;
}

.ph-cf-submit:hover {
	background: #d35400 !important;
}