/**
 * Tak Center - Dedicated Special Offers Page Styles (/special-offers/)
 * Strictly scoped under body.tak-page-special-offers
 *
 * Ensures full responsiveness across Desktop (4 cols), Tablet (3 cols),
 * and Mobile (strictly 2 cols down to 320px) with 0 horizontal overflow.
 *
 * @package Tak_Center
 */

/* ==========================================================================
   1. PAGE SHELL & CONTAINER NORMALIZATION
   ========================================================================== */

/* Remove narrow 820px/760px constraint imposed by article templates */
body.tak-page-special-offers .tk-page-main {
	width: min(100% - 32px, 1320px) !important;
	max-width: 1320px !important;
	margin-inline: auto !important;
	margin-top: 16px !important;
	margin-bottom: 50px !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	overflow-x: clip !important;
}

body.tak-page-special-offers .tk-page-main > .wp-block-post-content,
body.tak-page-special-offers .entry-content,
body.tak-page-special-offers .entry-content.is-layout-constrained {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

body.tak-page-special-offers .entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 100% !important;
	width: 100% !important;
	margin-inline: 0 !important;
}

body.tak-page-special-offers .tk-special-offers {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Hide duplicate post title above hero banner */
body.tak-page-special-offers .wp-block-post-title {
	display: none !important;
}

/* Breadcrumb styling */
body.tak-page-special-offers .woocommerce-breadcrumb {
	margin: 8px 0 18px !important;
	padding: 0 !important;
	font-size: 13px !important;
	color: #64748b !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

body.tak-page-special-offers .woocommerce-breadcrumb a {
	color: #64748b !important;
	text-decoration: none !important;
	transition: color 0.15s ease !important;
}

body.tak-page-special-offers .woocommerce-breadcrumb a:hover {
	color: #d97706 !important;
}

/* ==========================================================================
   2. SPECIAL OFFERS HERO BANNER (.tk-landing-hero)
   ========================================================================== */

body.tak-page-special-offers .tk-landing-hero {
	position: relative !important;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
	color: #ffffff !important;
	border-radius: 20px !important;
	padding: clamp(32px, 4.5vw, 52px) clamp(20px, 4vw, 44px) !important;
	margin-bottom: 32px !important;
	overflow: hidden !important;
	box-shadow: 0 14px 35px -5px rgba(15, 23, 42, 0.25) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-sizing: border-box !important;
}

body.tak-page-special-offers .tk-landing-hero::before {
	content: '' !important;
	position: absolute !important;
	top: -50% !important;
	left: -20% !important;
	width: 380px !important;
	height: 380px !important;
	background: radial-gradient(circle, rgba(225, 29, 72, 0.22) 0%, transparent 70%) !important;
	border-radius: 50% !important;
	pointer-events: none !important;
}

body.tak-page-special-offers .tk-landing-hero::after {
	content: '' !important;
	position: absolute !important;
	bottom: -40px !important;
	right: -40px !important;
	width: 300px !important;
	height: 300px !important;
	background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 70%) !important;
	border-radius: 50% !important;
	pointer-events: none !important;
}

body.tak-page-special-offers .tk-landing-hero__inner {
	position: relative !important;
	z-index: 2 !important;
	max-width: 820px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	text-align: right !important;
}

body.tak-page-special-offers .tk-landing-hero .tk-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: rgba(225, 29, 72, 0.16) !important;
	color: #fb7185 !important;
	border: 1px solid rgba(225, 29, 72, 0.4) !important;
	border-radius: 999px !important;
	padding: 6px 16px !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	margin-bottom: 14px !important;
	backdrop-filter: blur(8px) !important;
	box-shadow: 0 2px 10px rgba(225, 29, 72, 0.15) !important;
	box-sizing: border-box !important;
}

body.tak-page-special-offers .tk-landing-hero h1 {
	font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
	font-weight: 900 !important;
	margin: 0 0 14px !important;
	color: #ffffff !important;
	line-height: 1.35 !important;
	letter-spacing: -0.02em !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.tak-page-special-offers .tk-landing-hero p {
	font-size: clamp(0.92rem, 1.8vw, 1.1rem) !important;
	color: #e2e8f0 !important;
	line-height: 1.8 !important;
	margin: 0 !important;
	max-width: 720px !important;
}

/* Optional Countdown Box & Timers inside Special Offers Banner */
body.tak-page-special-offers .tk-deal-countdown-box {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-top: 18px !important;
	background: rgba(15, 23, 42, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	padding: 8px 16px !important;
	border-radius: 12px !important;
	backdrop-filter: blur(10px) !important;
}

body.tak-page-special-offers .tk-countdown-timer {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	direction: rtl !important;
}

body.tak-page-special-offers .tk-timer-unit {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border-radius: 8px !important;
	padding: 4px 8px !important;
	min-width: 44px !important;
}

body.tak-page-special-offers .tk-timer-num {
	font-size: 16px !important;
	font-weight: 900 !important;
	color: #ffffff !important;
}

body.tak-page-special-offers .tk-timer-lbl {
	font-size: 10px !important;
	color: #94a3b8 !important;
}

/* Category Filter Tabs (if present) - Smooth Horizontal Touch Scroll */
body.tak-page-special-offers .tk-filter-tabs,
body.tak-page-special-offers .tk-categories-pills {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: none !important;
	padding-bottom: 6px !important;
	margin-bottom: 20px !important;
}

body.tak-page-special-offers .tk-filter-tabs::-webkit-scrollbar,
body.tak-page-special-offers .tk-categories-pills::-webkit-scrollbar {
	display: none !important;
}

/* ==========================================================================
   3. PRODUCT CARDS GRID BREAKPOINTS
   ========================================================================== */

/* Default Grid Structure */
body.tak-page-special-offers .tk-products,
body.tak-page-special-offers .tk-products--offers {
	display: grid !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Desktop Viewports (1200px+): STRICTLY 4 Columns */
@media (min-width: 1200px) {
	body.tak-page-special-offers .tk-products,
	body.tak-page-special-offers .tk-products--offers {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 20px !important;
	}
}

/* Medium Desktops & Tablet Landscape (992px to 1199px): 4 Columns */
@media (min-width: 992px) and (max-width: 1199px) {
	body.tak-page-special-offers .tk-products,
	body.tak-page-special-offers .tk-products--offers {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}
}

/* Tablet Portrait (768px to 991px): STRICTLY 3 Columns */
@media (min-width: 768px) and (max-width: 991px) {
	body.tak-page-special-offers .tk-products,
	body.tak-page-special-offers .tk-products--offers {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}
}

/* Mobile Screens (<= 767px down to 320px): STRICTLY Clean 2 Columns */
@media (max-width: 767px) {
	body.tak-page-special-offers .tk-page-main {
		width: calc(100% - 20px) !important;
		margin-top: 10px !important;
		margin-bottom: 36px !important;
	}

	body.tak-page-special-offers .tk-landing-hero {
		padding: 24px 16px !important;
		border-radius: 16px !important;
		margin-bottom: 20px !important;
	}

	body.tak-page-special-offers .tk-landing-hero .tk-chip {
		font-size: 11.5px !important;
		padding: 5px 12px !important;
		margin-bottom: 10px !important;
		max-width: 100% !important;
		white-space: normal !important;
		text-align: center !important;
		line-height: 1.4 !important;
		min-height: auto !important;
	}

	body.tak-page-special-offers .tk-landing-hero h1 {
		font-size: 1.55rem !important;
		margin-bottom: 8px !important;
	}

	body.tak-page-special-offers .tk-landing-hero p {
		font-size: 0.9rem !important;
		line-height: 1.65 !important;
	}

	/* Grid on Mobile: STRICTLY 2 Columns */
	body.tak-page-special-offers .tk-products,
	body.tak-page-special-offers .tk-products--offers {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}

	/* Master Card Mobile Adjustments (.tc-product-card) */
	body.tak-page-special-offers .tc-product-card {
		width: 100% !important;
		min-width: 0 !important;
		border-radius: 12px !important;
		box-sizing: border-box !important;
	}

	body.tak-page-special-offers .tc-product-card__body {
		padding: 10px 10px 12px !important;
		gap: 6px !important;
	}

	body.tak-page-special-offers .tc-product-card__title {
		font-size: 12.5px !important;
		line-height: 1.4 !important;
		min-height: 35px !important;
	}

	body.tak-page-special-offers .tc-product-card__brand {
		font-size: 11px !important;
		min-height: 18px !important;
	}

	body.tak-page-special-offers .tc-product-card__specs {
		gap: 3px !important;
	}

	body.tak-page-special-offers .tc-product-card__spec-chip {
		font-size: 10px !important;
		padding: 2px 5px !important;
		line-height: 1.3 !important;
	}

	body.tak-page-special-offers .tc-product-card__wholesale-moq {
		font-size: 10px !important;
		padding: 2px 5px !important;
	}

	body.tak-page-special-offers .tc-product-card__price-box {
		margin-top: auto !important;
		padding-top: 6px !important;
	}

	body.tak-page-special-offers .tc-product-card__price-del {
		font-size: 11px !important;
	}

	body.tak-page-special-offers .tc-product-card__price-ins strong {
		font-size: 14.5px !important;
	}

	body.tak-page-special-offers .tc-product-card__price-ins .tc-currency {
		font-size: 10.5px !important;
	}

	/* Button Touch Targets (min 38px, optimal 40px) */
	body.tak-page-special-offers .tc-product-card__btn-cart {
		min-height: 40px !important;
		padding: 8px 6px !important;
		font-size: 12px !important;
		border-radius: 8px !important;
		box-sizing: border-box !important;
	}

	body.tak-page-special-offers .tc-product-card__btn-text {
		font-size: 12px !important;
		white-space: nowrap !important;
	}

	body.tak-page-special-offers .tc-product-card__cart-icon {
		width: 15px !important;
		height: 15px !important;
	}
}

/* Extra Small Mobile Screens (<= 360px down to 320px) */
@media (max-width: 360px) {
	body.tak-page-special-offers .tk-page-main {
		width: calc(100% - 16px) !important;
	}

	body.tak-page-special-offers .tk-products,
	body.tak-page-special-offers .tk-products--offers {
		gap: 8px !important;
	}

	body.tak-page-special-offers .tc-product-card__body {
		padding: 8px 8px 10px !important;
	}

	body.tak-page-special-offers .tc-product-card__title {
		font-size: 11.5px !important;
	}

	body.tak-page-special-offers .tc-product-card__price-ins strong {
		font-size: 13.5px !important;
	}

	body.tak-page-special-offers .tc-product-card__btn-cart {
		min-height: 38px !important;
		padding: 6px 4px !important;
		font-size: 11px !important;
		gap: 4px !important;
	}

	body.tak-page-special-offers .tc-product-card__btn-text {
		font-size: 11px !important;
		white-space: nowrap !important;
	}

	body.tak-page-special-offers .tc-product-card__cart-icon {
		width: 14px !important;
		height: 14px !important;
		flex-shrink: 0 !important;
	}
}