/* Shop Landing Page Styles */

.tqs-shop-landing-page {
	width: 100%;
	overflow: hidden;
}

/* Shop Override Wrapper */
.tqs-shop-override-wrapper {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 0;
}

.tqs-shop-override-wrapper .tqs-shop-landing-page {
	margin: 0;
	max-width: none;
}

/* Force remove ALL theme padding from parent containers */
body.woocommerce-shop .qodef-content-full-width,
body.woocommerce-shop .qodef-content-grid,
body.woocommerce-shop #qodef-page-inner,
body.woocommerce-shop .qodef-page-content-section {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	margin: 0 !important;
}

/* Target the specific wrapper that has padding */
body.woocommerce-shop div[class*="qodef"] {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Specifically target the #qodef-woo-page container */
body.woocommerce-shop #qodef-woo-page.qodef-page-content-section {
	padding: 0 !important;
}

/* Remove padding from any container holding our shop landing sections */
.tqs-shop-landing-sections,
.tqs-auto-products-grid {
	padding: 0 !important;
	margin: 0 !important;
}

/* CRITICAL: Force product titles to display - Override ALL theme CSS */
body.woocommerce-shop .tqs-product-content-inner h1,
body.woocommerce-shop .tqs-product-item h1,
.tqs-auto-products-grid h1,
.tqs-product-content-inner h1,
.tqs-product-item h1 {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	position: relative !important;
	width: auto !important;
	font-size: 2rem !important;
	color: #000000 !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-weight: 300 !important;
	text-transform: uppercase !important;
	margin: 0 0 1.5rem 0 !important;
	line-height: 1.4 !important;
	letter-spacing: -0.02em !important;
}

/* Hide Shop Page Title - Target Kahlo theme classes */
.woocommerce-products-header,
.woocommerce-products-header__title,
.page-title,
.qodef-page-title,
h1.qodef-m-title,
.qodef-content-grid > h1,
.woocommerce h1.page-title,
body.woocommerce-shop h1 {
	display: none !important;
}

/* Full Width Hero Wrapper - Break out of ALL containers */
.tqs-full-width-hero {
	width: 100vw !important;
	max-width: 100vw !important;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 0 !important;
	padding: 0 !important;
}

/* Override any theme containers */
body .tqs-full-width-hero {
	width: 100vw !important;
	max-width: none !important;
}

/* Make sure parent containers don't constrain */
.qodef-content-grid,
.qodef-content-full-width,
.qodef-page-content-section,
.woocommerce,
#qodef-page-inner {
	overflow: visible !important;
}

/* Specific override for shop page */
body.woocommerce-shop .tqs-full-width-hero {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Hero Section - Squarespace Style */
.tqs-hero-section {
	position: relative;
	width: 100%;
}

/* Hero Slider */
.tqs-hero-slider {
	position: relative;
}

.tqs-hero-slide {
	transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

/* Sizer image - hidden on desktop, drives height on mobile */
.tqs-hero-sizer {
	display: none;
	width: 100%;
	height: auto;
	visibility: hidden;
	pointer-events: none;
}

/* Mobile: section height matches image, no cropping, no white/black bars */
@media (max-width: 768px) {
	.tqs-hero-section {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		display: block !important;
	}
	
	/* Make slider relative so sizer img drives its height */
	.tqs-hero-slider {
		position: relative !important;
		height: auto !important;
	}
	
	.tqs-hero-sizer {
		display: block;
		position: relative;
		z-index: 0;
	}
	
	.tqs-hero-slide,
	.tqs-hero-image {
		background-size: cover !important;
		background-repeat: no-repeat !important;
		background-position: center center !important;
	}
	
	/* Keep scroll-down indicator overlaid on image like desktop */
	.tqs-hero-bottom-wrapper {
		position: absolute !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		grid-row: auto !important;
		z-index: 3 !important;
	}
}

.tqs-hero-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 100vh;
	min-height: 600px;
	max-height: 1200px;
	display: grid !important;
	margin: 0;
	padding: 0;
}

.tqs-hero-image {
	object-fit: cover;
}

.tqs-hero-overlay {
	pointer-events: none;
}

.tqs-hero-bottom-wrapper {
	align-self: end;
}

.tqs-hero-scroll {
	letter-spacing: 0.1em;
}

/* Mailing list section after hero */
.tqs-mailing-section {
	background-color: #000000 !important;
	width: 100%;
	transition: background-color 0.3s ease, border-top 0.3s ease, border-bottom 0.3s ease !important;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
}

.tqs-mailing-section:hover {
	background-color: #ffffff !important;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

.tqs-mailing-section:hover .tqs-hero-mailing {
	color: #000000 !important;
}

.tqs-mailing-section:hover .tqs-mailing-link {
	color: #000000 !important;
	border-bottom-color: #000000 !important;
}

.tqs-hero-mailing a {
	transition: color 0.3s ease, border-color 0.3s ease;
}

/* Responsive hero height */
@media (max-width: 1024px) {
	.tqs-hero-section {
		height: 80vh;
		min-height: 500px;
	}
}

@media (max-width: 768px) {
	.tqs-hero-section {
		height: 70vh;
		min-height: 400px;
	}
	
	.tqs-mailing-section {
		padding: 15px 10px !important;
	}
	
	.tqs-hero-mailing {
		font-size: 0.7rem !important;
	}
	
	.tqs-hero-scroll {
		font-size: 0.65rem !important;
	}
	
	.tqs-hero-bottom-wrapper {
		padding: 15px !important;
	}
}

@media (max-width: 480px) {
	.tqs-hero-section {
		height: 60vh;
		min-height: 350px;
	}
	
	.tqs-hero-mailing {
		font-size: 0.65rem !important;
	}
}

.tqs-hero-inner {
	animation: fadeInUp 0.8s ease-out;
}

.tqs-hero-title {
	animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* Related products heading styling */
.related.products > h2,
.related.products h2 {
	font-family: 'Space Grotesk', sans-serif !important;
	font-weight: 300 !important;
	font-size: 40px !important;
	letter-spacing: -0.02em;
}

/* Related products card typography */
.related.products ul.products li.product .woocommerce-loop-product__title,
.related.products ul.products li.product .price {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

/* Single Product Template - TQS Custom - Larger Images */

/* Reverse the grid: more space for images, less for info */
#qodef-woo-page.qodef--single .qodef-woo-single-inner {
	grid-template-columns: 54.2% 1fr !important;
}

/* Responsive */
@media (max-width: 768px) {
	#qodef-woo-page.qodef--single .qodef-woo-single-inner {
		grid-template-columns: 1fr !important;
	}
}

/* PhotoSwipe Lightbox - White Background & Black Icons */
.pswp__bg {
	background: #fff !important;
}

/* CRITICAL: Prevent image distortion/squeezing on all screens */
.pswp__img {
	object-fit: contain !important;
	object-position: center !important;
	max-width: 100% !important;
	max-height: 100% !important;
}

/* Ensure the image container respects aspect ratio */
.pswp__zoom-wrap {
	width: 100% !important;
	text-align: center !important;
}

/* Ensure the main container fills the viewport correctly */
.pswp__container,
.pswp__item {
	width: 100% !important;
	height: 100% !important;
}

/* Fix for high-DPI/Retina screens (MacBook Pro 14" etc.) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.pswp__img {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
}

/* Change all white icons/buttons to black */
.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before,
.pswp__button--arrow--left,
.pswp__button--arrow--right {
	filter: invert(1) !important;
}

/* Force arrow buttons to have black background circle */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
	background-color: rgba(0, 0, 0, 0.5) !important;
	border-radius: 50% !important;
	width: 44px !important;
	height: 44px !important;
}

/* Make arrow icons themselves visible */
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
	background-color: #fff !important;
	filter: none !important;
}

/* Counter text to black */
.pswp__counter {
	color: #000 !important;
}

/* Hide caption bar at the bottom */
.pswp__caption,
.pswp__caption__center {
	display: none !important;
}

/* Top bar background */
.pswp__top-bar {
	background-color: rgba(255, 255, 255, 0.95) !important;
}

.tqs-hero-subtitle {
	animation: fadeInUp 0.8s ease-out 0.4s both;
}

.tqs-hero-button {
	animation: fadeInUp 0.8s ease-out 0.6s both;
	cursor: pointer;
}

.tqs-hero-button:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

/* Product Sections */
.tqs-product-sections {
	width: 100vw !important;
	max-width: 100vw !important;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 0 !important;
	padding: 0 !important;
}

/* Override theme container padding */
body .tqs-product-sections {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.tqs-product-section {
	width: 100%;
	overflow: hidden;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.tqs-product-section.tqs-visible {
	opacity: 1;
	transform: translateY(0);
}

.tqs-section-inner {
	max-width: 100%;
	margin: 0 auto;
}

.tqs-section-image {
	min-height: 300px;
}

.tqs-section-content {
	box-sizing: border-box;
}

.tqs-section-content-inner {
	max-width: 600px;
}

.tqs-section-title {
	margin-top: 0;
}

.tqs-section-description {
	margin-bottom: 1.5rem;
}

.tqs-section-description p {
	margin-bottom: 1rem;
}

.tqs-section-description p:last-child {
	margin-bottom: 0;
}

.tqs-section-button {
	cursor: pointer;
}

/* Animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive Design */
@media (max-width: 1024px) {
	.tqs-hero-title {
		font-size: 2.5rem !important;
	}
	
	.tqs-hero-subtitle {
		font-size: 1.125rem !important;
	}
	
	.tqs-section-title {
		font-size: 2rem !important;
	}
	
	.tqs-section-description {
		font-size: 1rem !important;
	}
	
	.tqs-section-content {
		padding: 40px !important;
	}
}

@media (max-width: 768px) {
	.tqs-hero-title {
		font-size: 2rem !important;
	}
	
	.tqs-hero-subtitle {
		font-size: 1rem !important;
	}
	
	.tqs-hero-button {
		padding: 12px 30px !important;
		font-size: 0.9rem !important;
	}
	
	.tqs-section-inner {
		flex-direction: column !important;
	}
	
	.tqs-section-image,
	.tqs-section-content {
		flex: 0 0 100% !important;
		width: 100% !important;
	}
	
	.tqs-section-image {
		min-height: 250px;
	}
	
	.tqs-section-content {
		padding: 30px 20px !important;
	}
	
	.tqs-section-title {
		font-size: 1.75rem !important;
	}
	
	.tqs-section-description {
		font-size: 0.95rem !important;
	}
	
	.tqs-section-button {
		padding: 10px 25px !important;
		font-size: 0.9rem !important;
	}
}

@media (max-width: 480px) {
	.tqs-hero-title {
		font-size: 1.75rem !important;
	}
	
	.tqs-hero-subtitle {
		font-size: 0.95rem !important;
	}
	
	.tqs-section-image {
		min-height: 200px;
	}
	
	.tqs-section-content {
		padding: 25px 15px !important;
	}
	
	.tqs-section-title {
		font-size: 1.5rem !important;
	}
}

/* =================================================================
   COMPREHENSIVE SHOP PAGE RESPONSIVE - Product Items (.tqs-product-*)
   Overrides inline styles from PHP template
   ================================================================= */

/* Tablet - 1024px and below */
@media (max-width: 1024px) {
	.tqs-product-inner {
		grid-template-columns: 50% 1px 50% !important;
		min-height: 500px !important;
	}
	
	.tqs-product-content {
		padding: 50px 40px !important;
	}
	
	.tqs-product-content-inner h1,
	.tqs-product-item h1 {
		font-family: 'Space Grotesk', sans-serif !important;
		font-weight: 300 !important;
		font-size: 1.25rem !important;
		line-height: 1.3 !important;
	}
	
	.tqs-product-meta {
		font-size: 0.8rem !important;
	}
}

/* Mobile - 768px and below: Stack layout, image always before content */
@media (max-width: 768px) {
	.tqs-product-inner {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: 1fr !important;
		min-height: auto !important;
	}
	
	/* Force image first, content after - regardless of layout (image-left/image-right) */
	.tqs-product-image {
		order: 1 !important;
		width: 100% !important;
		min-height: 350px !important;
		height: 350px !important;
	}
	
	.tqs-product-divider {
		display: none !important;
	}
	
	.tqs-product-content {
		order: 2 !important;
		padding: 40px 25px !important;
		width: 100% !important;
	}
	
	.tqs-product-content-inner {
		max-width: 100% !important;
	}
	
	.tqs-product-content-inner h1,
	.tqs-product-item h1,
	body.woocommerce-shop .tqs-product-content h1,
	body.woocommerce-shop .tqs-product-content-inner h1 {
		font-family: 'Space Grotesk', sans-serif !important;
		font-weight: 300 !important;
		font-size: 1.1rem !important;
		line-height: 1.3 !important;
		margin-bottom: 1rem !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: auto !important;
	}
	
	.tqs-product-meta {
		font-size: 0.85rem !important;
		margin-bottom: 1rem !important;
	}
	
	.tqs-product-link a {
		font-size: 0.85rem !important;
	}
}

/* Small mobile - 480px and below */
@media (max-width: 480px) {
	.tqs-product-image {
		min-height: 280px !important;
		height: 280px !important;
	}
	
	.tqs-product-content {
		padding: 30px 20px !important;
	}
	
	.tqs-product-content-inner h1,
	.tqs-product-item h1,
	body.woocommerce-shop .tqs-product-content h1,
	body.woocommerce-shop .tqs-product-content-inner h1 {
		font-family: 'Space Grotesk', sans-serif !important;
		font-weight: 300 !important;
		font-size: 1rem !important;
		letter-spacing: -0.01em !important;
	}
	
	.tqs-product-meta {
		font-size: 0.8rem !important;
	}
	
	.tqs-product-link a {
		font-size: 0.8rem !important;
	}
}

/* Very small - 360px and below */
@media (max-width: 360px) {
	.tqs-product-image {
		min-height: 240px !important;
		height: 240px !important;
	}
	
	.tqs-product-content {
		padding: 25px 15px !important;
	}
	
	.tqs-product-content-inner h1,
	.tqs-product-item h1,
	body.woocommerce-shop .tqs-product-content h1,
	body.woocommerce-shop .tqs-product-content-inner h1 {
		font-family: 'Space Grotesk', sans-serif !important;
		font-weight: 300 !important;
		font-size: 0.95rem !important;
	}
}

/* =================================================================
   SHOP PAGE - Theme Product List Responsiveness
   For default WooCommerce/Kahlo theme product grid
   ================================================================= */
@media (max-width: 1024px) {
	body.woocommerce-shop .qodef-woo-product-list .qodef-e-title,
	body.woocommerce-shop .qodef-woo-product-list .qodef-e-title a {
		font-size: 1.1rem !important;
		line-height: 1.3 !important;
	}
}

@media (max-width: 768px) {
	body.woocommerce-shop .qodef-woo-product-list .qodef-e-title,
	body.woocommerce-shop .qodef-woo-product-list .qodef-e-title a {
		font-size: 1rem !important;
		line-height: 1.3 !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}
	
	body.woocommerce-shop .qodef-woo-product-list .price {
		font-size: 0.9rem !important;
	}
}

@media (max-width: 480px) {
	body.woocommerce-shop .qodef-woo-product-list .qodef-e-title,
	body.woocommerce-shop .qodef-woo-product-list .qodef-e-title a {
		font-size: 0.95rem !important;
	}
	
	body.woocommerce-shop .qodef-woo-product-list .price {
		font-size: 0.85rem !important;
	}
	
	body.woocommerce-shop .qodef-woo-product-list .qodef-e-content {
		padding: 10px 0 !important;
	}
}