/**
 * Featured Peptides Widget - Frontend Styles
 *
 * @package NPX_Blocks
 */

/* Container */
.npx-featured-peptides-widget {
	padding: 60px 0;
	width: 100%;
	overflow-x: hidden;
}

.npx-featured-peptides-widget.alignwide {
	max-width: none;
}

.npx-featured-peptides-widget.alignfull {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.npx-tab-button:focus-visible {
	outline: none;
}

/* Section Title - Boxed */
.npx-featured-peptides-widget__title {
	margin: 0 auto 40px;
	line-height: 1.2;
	color: #000;
	max-width: 1200px;
}

/* 
 * Font Size Classes - Responsive Typography
 * Using more specific selectors to override WordPress auto-generated CSS
 * WordPress creates .has-{slug}-font-size with CSS variables and !important
 * Our .npx-featured-peptides-widget__title.has-{slug}-font-size has higher specificity
 */

/* Caption: 12px (all screens) */
.npx-featured-peptides-widget__title.has-caption-font-size {
	font-size: 12px !important;
}

/* Body Small: 14px (all screens) */
.npx-featured-peptides-widget__title.has-body-s-font-size {
	font-size: 14px !important;
}

/* Body Medium: Responsive 14-16px */
.npx-featured-peptides-widget__title.has-body-m-font-size {
	font-size: 14px !important;
}

@media (min-width: 768px) {
	.npx-featured-peptides-widget__title.has-body-m-font-size {
		font-size: 15px !important;
	}
}

@media (min-width: 1024px) {
	.npx-featured-peptides-widget__title.has-body-m-font-size {
		font-size: 16px !important;
	}
}

/* Body Large: 18px (all screens) */
.npx-featured-peptides-widget__title.has-body-l-font-size {
	font-size: 18px !important;
}

/* H4: Responsive 20-24px */
.npx-featured-peptides-widget__title.has-h4-font-size {
	font-size: 20px !important;
}

@media (min-width: 768px) {
	.npx-featured-peptides-widget__title.has-h4-font-size {
		font-size: 22px !important;
	}
}

@media (min-width: 1024px) {
	.npx-featured-peptides-widget__title.has-h4-font-size {
		font-size: 24px !important;
	}
}

/* H3: Responsive 24-32px */
.npx-featured-peptides-widget__title.has-h3-font-size {
	font-size: 24px !important;
}

@media (min-width: 768px) {
	.npx-featured-peptides-widget__title.has-h3-font-size {
		font-size: 28px !important;
	}
}

@media (min-width: 1024px) {
	.npx-featured-peptides-widget__title.has-h3-font-size {
		font-size: 32px !important;
	}
}

/* H2: Responsive 32-56px */
.npx-featured-peptides-widget__title.has-h2-font-size {
	font-size: 32px !important;
}

@media (min-width: 480px) {
	.npx-featured-peptides-widget__title.has-h2-font-size {
		font-size: 38px !important;
	}
}

@media (min-width: 768px) {
	.npx-featured-peptides-widget__title.has-h2-font-size {
		font-size: 48px !important;
	}
}

@media (min-width: 1024px) {
	.npx-featured-peptides-widget__title.has-h2-font-size {
		font-size: 52px !important;
	}
}

@media (min-width: 1440px) {
	.npx-featured-peptides-widget__title.has-h2-font-size {
		font-size: 56px !important;
	}
}

/* H1: Responsive 32-72px */
.npx-featured-peptides-widget__title.has-h1-font-size {
	font-size: 32px !important;
}

@media (min-width: 480px) {
	.npx-featured-peptides-widget__title.has-h1-font-size {
		font-size: 42px !important;
	}
}

@media (min-width: 768px) {
	.npx-featured-peptides-widget__title.has-h1-font-size {
		font-size: 52px !important;
	}
}

@media (min-width: 1024px) {
	.npx-featured-peptides-widget__title.has-h1-font-size {
		font-size: 62px !important;
	}
}

@media (min-width: 1440px) {
	.npx-featured-peptides-widget__title.has-h1-font-size {
		font-size: 72px !important;
	}
}

/* Display (80px): Responsive 40-80px */
.npx-featured-peptides-widget__title.has-display-font-size {
	font-size: 40px !important;
}

@media (min-width: 480px) {
	.npx-featured-peptides-widget__title.has-display-font-size {
		font-size: 50px !important;
	}
}

@media (min-width: 768px) {
	.npx-featured-peptides-widget__title.has-display-font-size {
		font-size: 60px !important;
	}
}

@media (min-width: 1024px) {
	.npx-featured-peptides-widget__title.has-display-font-size {
		font-size: 70px !important;
	}
}

@media (min-width: 1440px) {
	.npx-featured-peptides-widget__title.has-display-font-size {
		font-size: 80px !important;
	}
}

/* Custom font sizes (numeric values) - Applied via inline style */

/* Category Tabs - Boxed */
.npx-featured-peptides-widget__tabs {
	display: flex;
	gap: 40px;
	margin-bottom: 30px;
	margin-top: 30px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	border-bottom: none;
	justify-content: flex-start;
}

.npx-featured-peptides-widget__tabs::-webkit-scrollbar {
	display: none;
}

.npx-tab-button {
	background: none;
	border: none;
	padding: 12px 32px;
	font-size: 16px;
	font-weight: 500;
	color: #6e6e73;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
	min-height: 44px;
	position: relative;
	font-family: inherit;
	border-radius: 8px 8px 0 0;
}

/* Top line indicator using pseudo-element - ALWAYS visible on all tabs */
.npx-tab-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--tab-color);
	transition: all 0.25s ease;
	display: block;
	opacity: 0.4;
}

/* Remove bottom underline */
.npx-tab-button::after {
	display: none;
}

.npx-tab-button:hover {
	color: #000;
	background-color: rgba(0, 0, 0, 0.03);
	transform: translateY(-2px);
}

.npx-tab-button:hover::before {
	height: 4px;
	opacity: 1;
}

/* Active tab - darker text color and stronger indicator */
.npx-tab-button.is-active {
	color: #000;
	font-weight: 600;
	background-color: rgba(0, 0, 0, 0.02);
}

.npx-tab-button.is-active::before {
	height: 4px;
	opacity: 1;
}

.npx-tab-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
}

/* Shop controls (Sort + Result Count) - Boxed 1200px */
.npx-shop-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto 24px;
	padding: 0 20px 16px;
	border-bottom: 1px solid #d2d2d7;
	/* var(--npx-gray) */
}

.npx-shop-controls__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	/* var(--npx-space-1) */
}

.npx-shop-controls__form {
	display: inline-flex;
	align-items: center;
}

.npx-shop-controls__label {
	font-size: 14px;
	/* var(--npx-text-body-s) */
	font-weight: 500;
	color: #86868b;
	/* var(--npx-gray-dark) */
	white-space: nowrap;
}

.npx-shop-controls__select {
	appearance: none;
	-webkit-appearance: none;
	background-color: #fff;
	border: 1px solid #d2d2d7;
	border-radius: 10px;
	/* var(--npx-radius-input) */
	padding: 8px 36px 8px 12px;
	font-size: 14px;
	font-weight: 400;
	color: #000;
	cursor: pointer;
	transition: border-color 0.2s ease;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386868B' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
	min-width: 180px;
}

.npx-shop-controls__select:hover {
	border-color: #0071E3;
}

.npx-shop-controls__count {
	font-size: 14px;
	color: #86868b;
}

.npx-shop-controls__count p {
	margin: 0;
	padding: 0;
}

@media (max-width: 768px) {
	.npx-shop-controls {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

/* Products Wrapper */
.npx-featured-peptides-widget__wrapper {
	position: relative;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

/* Products Grid - Shared base styles */
.npx-featured-peptides-widget__grid {
	display: flex;
	gap: 30px;
	padding-top: 10px;
	padding-bottom: 30px;
	max-width: none;
	margin: 0;
	transition: opacity 0.3s ease;
	--columns: 4;
}

/* Slider mode: carousel container clips overflow, track slides via transform */
.npx-featured-peptides-widget.npx-layout-slider .npx-main-carousel {
	overflow: hidden;
}

/* 
 * FOUC PROTECTION: Hide individual cards while layout is Stabilizing.
 * This keeps the loading spinner visible (inside the track) but prevents
 * huge images from flashing during the split-second JS calculation.
 */
.npx-featured-peptides-widget.npx-layout-slider:not(.is-carousel-ready) .npx-product-card {
	opacity: 0;
}

/* Revealed once JS has initialized the layout */
.npx-featured-peptides-widget.npx-layout-slider.is-carousel-ready .npx-product-card {
	opacity: 1;
	transition: opacity 0.4s ease-in-out;
}



.npx-featured-peptides-widget.npx-layout-slider .npx-main-carousel__track {
	/* JS controls gap via marginRight on each slide — remove CSS gap. */
	gap: 0;
	flex-wrap: nowrap !important;
	display: flex !important;
	width: 100% !important;
	/* Only transition transform, not opacity (loading state uses opacity separately). */
	transition: none;
}

.npx-featured-peptides-widget__grid[data-per-row="1"] {
	--columns: 1;
}

.npx-featured-peptides-widget__grid[data-per-row="2"] {
	--columns: 2;
}

.npx-featured-peptides-widget__grid[data-per-row="3"] {
	--columns: 3;
}

.npx-featured-peptides-widget__grid[data-per-row="4"] {
	--columns: 4;
}

.npx-featured-peptides-widget__grid[data-per-row="5"] {
	--columns: 5;
}

.npx-featured-peptides-widget__grid[data-per-row="6"] {
	--columns: 6;
}


.npx-featured-peptides-widget__grid.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* Grid Layout Overrides - Reset Container Padding to fix 'touching edges' */
.npx-featured-peptides-widget.npx-layout-grid .npx-featured-peptides-widget__grid {
	flex-wrap: wrap;
	overflow: visible;
	justify-content: center;
	padding-left: 20px;
	padding-right: 20px;
	max-width: 1240px;
	margin: 0 auto;
}

/* Product Card - Shared Component used (assets/css/components/product-card.css) */
/* Only widget-specific layout overrides remain here */

.npx-product-card {
	flex: 0 0 calc((100% - (var(--columns) - 1) * 30px) / var(--columns));
	width: calc((100% - (var(--columns) - 1) * 30px) / var(--columns));
	transition: transform 0.3s ease;
}

/* Slider mode: JS sets flex/width/marginRight inline — let it take control */
.npx-featured-peptides-widget.npx-layout-slider .npx-product-card {
	flex-shrink: 0;
}

/* Carousel Arrows - Bottom Center */
.npx-main-carousel-arrows {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: 40px;
}

.npx-main-carousel-arrow {
	position: relative;
	background: #e8e8e8;
	border: none;
	border-radius: 50%;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	color: #666;
}

.npx-main-carousel-arrow:hover,
.npx-carousel-arrow:hover {
	background: #d8d8d8;
	color: #333;
}

.npx-main-carousel-arrow:focus,
.npx-carousel-arrow:focus {
	outline: 2px solid #0066FF;
	outline-offset: 2px;
}

.npx-main-carousel-arrow.is-disabled,
.npx-carousel-arrow.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.npx-main-carousel-arrow--prev {
	right: 0;
}

/* Loading Spinner */
.npx-loading-spinner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 100%;
	flex: 1 0 100%;
	text-align: center;
	padding: 60px 20px;
}

.npx-spinner {
	border: 3px solid #f3f3f3;
	border-top: 3px solid #0066FF;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: npx-spin 1s linear infinite;
	margin: 0 auto 16px;
}

@keyframes npx-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.npx-loading-spinner p {
	margin: 0;
	color: #666;
	font-size: 14px;
}

/* Load More Button */
.npx-featured-peptides-widget__load-more {
	text-align: center;
	margin-top: 40px;
}

.npx-load-more-button {
	background: #0071E3;
	color: white;
	border: none;
	border-radius: 24px;
	padding: 14px 40px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.npx-load-more-button:hover {
	background: #0052CC;
	transform: translateY(-2px);
}

.npx-load-more-button:focus {
	outline: 2px solid #0066FF;
	outline-offset: 2px;
}

.npx-load-more-button:disabled,
.npx-load-more-button.is-loading {
	background: #ccc;
	cursor: not-allowed;
	transform: none;
}

/* Error Message */
.npx-featured-peptides-widget__error {
	width: 100%;
	text-align: center;
	padding: 40px 20px;
	background: #fff3cd;
	border: 1px solid #ffe69c;
	border-radius: 8px;
	color: #856404;
}

.npx-featured-peptides-widget__error strong {
	display: block;
	margin-bottom: 8px;
	font-size: 18px;
}

.npx-featured-peptides-widget__error p {
	margin: 0;
}

/* Block Placeholder */
.npx-block-placeholder {
	background: #f5f5f5;
	border: 2px dashed #ddd;
	border-radius: 8px;
	padding: 60px 20px;
	text-align: center;
}

.npx-block-placeholder p {
	margin: 0;
	color: #757575;
	font-size: 16px;
}

/* Block Error */
.npx-block-error {
	background: #fcf0f1;
	border: 1px solid #d63638;
	border-radius: 8px;
	padding: 30px 20px;
	text-align: center;
}

.npx-block-error p {
	margin: 0;
	color: #d63638;
	font-size: 16px;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Tablet: use data-tablet-columns attribute */
@media (max-width: 1024px) {
	.npx-featured-peptides-widget__title {
		font-size: 40px;
	}

	/* Tablet column overrides via data attributes */
	.npx-featured-peptides-widget__grid[data-tablet-columns="1"] {
		--columns: 1;
	}

	.npx-featured-peptides-widget__grid[data-tablet-columns="2"] {
		--columns: 2;
	}

	.npx-featured-peptides-widget__grid[data-tablet-columns="3"] {
		--columns: 3;
	}

	.npx-featured-peptides-widget__grid[data-tablet-columns="4"] {
		--columns: 4;
	}
}

/* Mobile: use data-mobile-columns attribute */
@media (max-width: 768px) {
	.npx-featured-peptides-widget {
		padding: 40px 20px;
	}

	.npx-featured-peptides-widget__title {
		font-size: 32px;
		margin-bottom: 30px;
	}

	.npx-featured-peptides-widget__tabs {
		gap: 24px;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.npx-tab-button {
		font-size: 14px;
	}

	.npx-product-card__title {
		font-size: 16px;
	}

	.npx-main-carousel-arrow,
	.npx-carousel-arrow {
		width: 48px;
		height: 48px;
	}

	/* Mobile column overrides via data attributes */
	.npx-featured-peptides-widget__grid[data-mobile-columns="1"] {
		--columns: 1;
	}

	.npx-featured-peptides-widget__grid[data-mobile-columns="2"] {
		--columns: 2;
	}

	.npx-featured-peptides-widget__grid[data-mobile-columns="3"] {
		--columns: 3;
	}

	/* In grid mode, reduce gap for mobile */
	.npx-featured-peptides-widget.npx-layout-grid .npx-featured-peptides-widget__grid {
		gap: 16px;
	}

	/* Recalculate card width with smaller gap */
	.npx-featured-peptides-widget.npx-layout-grid .npx-product-card {
		flex: 0 0 calc((100% - (var(--columns) - 1) * 16px) / var(--columns));
		width: calc((100% - (var(--columns) - 1) * 16px) / var(--columns));
	}
}

@media (max-width: 480px) {
	.npx-featured-peptides-widget__title {
		font-size: 38px;
	}

	.npx-featured-peptides-widget__tabs {
		gap: 16px;
	}

	.npx-tab-button {
		font-size: 13px;
		padding: 10px 0;
	}

	/* Arrows show on all screens as requested */
	.npx-main-carousel-arrows {
		display: flex !important;
		margin-top: 24px;
	}
}

/* Print Styles */
@media print {

	.npx-main-carousel-arrow,
	.npx-load-more-button {
		display: none !important;
	}
}

/* Slider layout title indent on tablet + mobile */
@media (max-width: 1023px) {
	.npx-featured-peptides-widget.npx-layout-slider .npx-featured-peptides-widget__title {
		margin-left: 20px;
		margin-right: 20px;
	}
}