/*
Theme Name: Super Pet
Theme URI: https://superpetdelivery.com.br
Author: Super Pet Delivery
Description: Storefront theme replicating the original Next.js front (home, product archive, single product). Reuses the compiled CSS from the original build; markup ported to PHP templates.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: superpet
*/

/* Real styling comes from the compiled bundles enqueued in functions.php.
   This file only carries the theme header (required by WordPress) plus tiny helpers. */

.superpet-section-stub {
	max-width: 1200px;
	margin: 2rem auto;
	padding: 2rem;
	border: 2px dashed #cbd5e1;
	border-radius: 8px;
	color: #64748b;
	text-align: center;
	font-family: sans-serif;
}

/* The close (×) button only shows when the search is open (the original rendered it
   conditionally; here it's always in the DOM, so hide it until open). */
.wk-header__search-close {
	display: none;
}
.wk-header__search--open .wk-header__search-close {
	display: inline-flex;
}

/* Entrance animations — replicating the original framer-motion pop variants
   (opacity + 400px translate, ~0.8s spring, triggered when 40% in view).
   Scoped to .js so content stays visible if JavaScript is off. */
.js [data-anim] {
	opacity: 0;
	transition: opacity .8s ease, transform .8s cubic-bezier( 0.34, 1.56, 0.64, 1 );
	will-change: opacity, transform;
}
.js [data-anim="left"]   { transform: translateX( -400px ); }
.js [data-anim="right"]  { transform: translateX( 400px ); }
.js [data-anim="top"]    { transform: translateY( -400px ); }
.js [data-anim="bottom"] { transform: translateY( 400px ); }
.js [data-anim].is-visible {
	opacity: 1;
	transform: none;
}
@media ( prefers-reduced-motion: reduce ) {
	.js [data-anim] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Footer social icons: the original wrapped a square <svg>; the Font Awesome <i> glyph
   isn't square, so the padded circle went oval. Force the glyph into a square box. */
.wk-footer-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wk-footer-icons a i {
	width: 1.6rem;
	height: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Swiper carousels (home hero + single-product gallery). */
.superpet-hero-swiper,
.superpet-gallery-top,
.superpet-gallery-thumbs {
	--swiper-theme-color: #2e82cf;
}
.wk-slider .swiper-slide img,
.superpet-gallery-top .swiper-slide img,
.superpet-gallery-thumbs .swiper-slide img {
	width: 100%;
	display: block;
}
.superpet-gallery-thumbs .swiper-slide {
	width: 90px; /* fixed small thumbnails (slidesPerView: 'auto') regardless of image count */
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s;
}
.superpet-gallery-thumbs .swiper-slide-thumb-active {
	opacity: 1;
}

/* Logo: the bundle sizes it via `.wk-header .wk-header__image` (2-class specificity) to 100% of an
   unconstrained box, so it renders at the image's natural 150px. Match that specificity and pin to
   the original 90px (desktop) / 50px (mobile). */
.wk-header .wk-header__image {
	width: 90px;
	height: 90px;
	object-fit: contain;
}
@media ( max-width: 768px ) {
	.wk-header .wk-header__image {
		width: 50px;
		height: 50px;
	}
}

/* Position the header so the mobile nav overlay (absolute, top:8.5rem) is measured from the header
   instead of the viewport — this self-corrects the offset caused by the logged-in WP admin bar. */
.wk-header {
	position: relative;
}

/* Keep the hamburger (and its X state) above the nav overlay (z-index 999) so it's always clickable. */
.wk-header .wk-hamburger {
	position: relative;
	z-index: 1001;
}