/* ==========================================================================
   Jam Trading Co. — Responsive Stylesheet
   Mobile-first overrides + breakpoint-specific component adjustments.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILE (default, < 768px)
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	/* Top bar — compact for mobile */
	.jam-topbar {
		font-size: 11px;
		padding: 0.4rem 0;
	}

	.jam-topbar__inner {
		gap: 0.4rem;
		justify-content: center;
		text-align: center;
	}

	.jam-topbar__tagline {
		font-size: 0.7rem;
	}

	.jam-topbar__contact {
		gap: 0.8rem;
	}

	.jam-topbar__link span {
		font-size: 0.7rem;
	}

	/* Header — show mobile toggle, hide desktop nav */
	.jam-nav {
		display: none;
	}

	.jam-header__cta {
		display: none;
	}

	.jam-mobile-toggle {
		display: inline-flex;
	}

	.jam-header__main {
		padding: 0.875rem 0;
	}

	.jam-logo img {
		max-height: 48px;
	}

	/* Hero — stack: image on top, text below */
	.jam-hero {
		height: auto;
		max-height: none;
		min-height: 0;
		text-align: center;
	}

	.jam-hero__slide {
		position: relative;
		display: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.jam-hero__slide.is-active {
		display: block;
	}

	.jam-hero__slide::after {
		display: none;
	}

	.jam-hero__image {
		position: relative;
		height: 280px;
		object-position: right center;
	}

	/* Mobile: switch image back to cover so it fills the 280px strip (no letterboxing) */
	img.jam-hero__media {
		object-fit: cover;
		object-position: right center;
	}

	/* Mobile: same height for video and iframe wrapper as for image */
	.jam-hero__media {
		position: relative;
		inset: auto;
		height: 280px;
	}

	video.jam-hero__media {
		object-position: right center;
	}

	.jam-hero__iframe-wrap {
		height: 280px;
	}

	/* On mobile (narrow container), iframe should be sized by height */
	.jam-hero__iframe {
		width: auto;
		height: 100%;
		min-width: 100%;
	}

	.jam-hero__inner {
		position: relative;
		inset: auto;
		padding: 1.75rem 0 2rem;
		background: var(--jam-white);
	}

	/* On mobile, even video slides have text below on white bg — revert to dark text */
	.jam-hero__slide--has-video .jam-hero__eyebrow {
		color: var(--jam-secondary);
	}

	.jam-hero__slide--has-video .jam-hero__title-1 {
		color: var(--jam-text);
		text-shadow: none;
	}

	.jam-hero__slide--has-video .jam-hero__title-2 {
		color: var(--jam-primary);
		text-shadow: none;
	}

	.jam-hero__slide--has-video .jam-hero__description {
		color: var(--jam-body);
		text-shadow: none;
	}

	.jam-hero__slide--has-video .jam-btn--outline {
		border-color: var(--jam-border);
		color: var(--jam-text);
		background: transparent;
		backdrop-filter: none;
	}

	.jam-hero__content {
		max-width: 100%;
		padding: 0;
		margin: 0 auto;
	}

	.jam-hero__title {
		font-size: clamp(2rem, 7vw, 2.75rem);
	}

	.jam-hero__description {
		max-width: 100%;
		margin-inline: auto;
	}

	.jam-hero__ctas {
		justify-content: center;
	}

	.jam-hero__nav {
		width: 38px;
		height: 38px;
		top: 140px;
	}

	.jam-hero__nav--prev {
		left: 0.5rem;
	}

	.jam-hero__nav--next {
		right: 0.5rem;
	}

	.jam-hero__dots {
		bottom: auto;
		top: 244px;
		padding: 0.4rem 0.75rem;
	}

	/* Features — single column, tighter spacing */
	.jam-features__grid {
		gap: 1rem;
	}

	.jam-feature {
		padding: 0;
	}

	.jam-feature__icon {
		width: 48px;
		height: 48px;
	}

	/* Section header — smaller dividers */
	.jam-section-header {
		gap: 0.75rem;
		margin-bottom: 2rem;
	}

	.jam-section-header__divider {
		width: 60px;
	}

	.jam-section-header__title {
		font-size: var(--jam-fs-2xl);
	}

	/* Bulk banner — stack vertically */
	.jam-bulk__decor {
		display: none;
	}

	.jam-bulk__banner {
		padding: 1.5rem 1.25rem;
	}

	.jam-bulk__title {
		font-size: var(--jam-fs-xl);
	}

	.jam-bulk__image img {
		max-width: 160px;
	}

	.jam-bulk__action {
		display: flex;
		justify-content: center;
	}

	.jam-bulk__action .jam-btn {
		width: 100%;
		max-width: 320px;
		justify-content: center;
	}

	/* Footer — center-align */
	.jam-footer__about {
		text-align: center;
		margin-inline: auto;
	}

	.jam-footer__social {
		justify-content: center;
	}

	.jam-footer__bottom {
		font-size: var(--jam-fs-xs);
		padding: 0.875rem 0;
	}

	/* Product detail */
	.jam-product-detail__media {
		padding: 1rem;
	}

	.jam-product-detail__title {
		font-size: var(--jam-fs-2xl);
	}

	.jam-product-detail__actions {
		flex-direction: column;
	}

	.jam-product-detail__actions .jam-btn {
		width: 100%;
		justify-content: center;
	}

	/* Catalog sidebar — horizontal pill list above products */
	.jam-catalog__sidebar {
		position: static;
		padding: 1rem;
	}

	.jam-catalog__cat-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.jam-catalog__cat-list li {
		flex: 0 1 auto;
	}

	.jam-catalog__cat-list a {
		padding: 0.4rem 0.75rem;
		background: var(--jam-white);
		border: 1px solid var(--jam-border);
		font-size: var(--jam-fs-xs);
	}

	/* Carousel buttons — smaller */
	.jam-carousel__btn {
		width: 36px;
		height: 36px;
	}

	/* Contact form */
	.jam-contact__form-wrapper {
		padding: 1.5rem;
	}

	.jam-contact__form-title {
		font-size: var(--jam-fs-xl);
	}

	/* 404 */
	.jam-error-404__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.jam-error-404__actions .jam-btn {
		width: 100%;
		justify-content: center;
	}

	/* Floating WhatsApp */
	.jam-whatsapp-float {
		width: 52px;
		height: 52px;
	}

	.jam-whatsapp-float svg {
		width: 26px;
		height: 26px;
	}
}

/* --------------------------------------------------------------------------
   TABLET (768px+)
   -------------------------------------------------------------------------- */

@media (min-width: 48em) {
	.jam-whatsapp-float {
		width: 60px;
		height: 60px;
	}

	.jam-mobile-menu {
		display: none;
	}
}

@media (min-width: 48em) and (max-width: 63.99em) {
	.jam-nav__list,
	.jam-nav .menu {
		gap: 1.25rem;
	}

	.jam-header__cta span {
		display: none;
	}

	.jam-header__cta {
		padding: 0.75rem 1rem;
	}

	/* Hero on tablet — overlay still works but content wider, image emphasized less */
	.jam-hero {
		height: 52vw;
		min-height: 420px;
		max-height: 640px;
	}

	.jam-hero__content {
		max-width: 55%;
	}

	.jam-hero__title {
		font-size: clamp(1.75rem, 4vw, 2.5rem);
	}

	.jam-hero__description {
		font-size: var(--jam-fs-sm);
		margin-bottom: 1.25rem;
	}

	.jam-hero__slide::after {
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%);
	}
}

/* --------------------------------------------------------------------------
   DESKTOP (1024px+)
   -------------------------------------------------------------------------- */

@media (min-width: 64em) {
	:root {
		--jam-section-py: clamp(3.5rem, 6vw, 6rem);
	}

	.jam-mobile-toggle {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   LARGE DESKTOP (1280px+)
   -------------------------------------------------------------------------- */

@media (min-width: 80em) {
	.jam-container {
		padding-inline: 2rem;
	}
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */

@media print {
	.jam-topbar,
	.jam-header,
	.jam-footer,
	.jam-whatsapp-float,
	.jam-skip-link,
	.jam-mobile-menu,
	.jam-mobile-backdrop,
	.jam-carousel__btn,
	.jam-bulk,
	.jam-related-products {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	.jam-container {
		max-width: 100%;
	}

	.jam-product-card,
	.jam-category-card {
		break-inside: avoid;
	}
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.jam-hero__slide {
		transition: none;
	}

	.jam-whatsapp-float::before {
		animation: none;
	}

	.jam-product-card:hover,
	.jam-category-card:hover {
		transform: none;
	}
}