.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow-x: auto; overflow-y: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ============================================
   ROOT VARIABLES
   ============================================ */
:root {
	--color-primary: #114F3C;
	--color-secondary: #054330;
	--color-accent: #ef4c0d;
	--color-white: #FCFAF8;
	--color-text: #2A2A2A;
	--color-text-light: #666666;
	--color-border: #E5E5E5;
	--font-primary: 'Poppins', sans-serif;
	--section-gap: 80px;
	--transition: 0.3s ease;
}

/* ============================================
   RESET & BASICS
   ============================================ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
	font-family: var(--font-primary);
	color: var(--color-text);
	background: var(--color-white);
	line-height: 1.6;
	overflow-x: hidden;
}
a {
	text-decoration: none;
	color: inherit;
	transition: color var(--transition);
}
ul { list-style: none; }
img {
	max-width: 100%;
	height: auto;
	display: block;
}
.container {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: 30px;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--transition);
	font-family: 'Stolzl', 'Poppins', sans-serif;
}
.btn-primary {
	background: var(--color-accent);
	color: var(--color-white);
	border: 2px solid var(--color-accent);
}
.btn-primary:hover {
	background: transparent;
	color: var(--color-accent);
}
.btn-white {
	background: var(--color-white);
	color: var(--color-primary);
	border: 2px solid var(--color-white);
}
.btn-white:hover {
	background: transparent;
	color: var(--color-white);
}

/* ============================================
   HEADER
   ============================================ */
/* Navigation Fixes */
.main-nav .nav-list {
	display: flex;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-nav a {
	color: var(--color-white);
	font-weight: 500;
	font-size: 16px;
	opacity: 0.9;
}
.main-nav a:hover { opacity: 1; }
.burger-btn, .mobile-menu { display: none; }
.header-action-btn, .logo, .logo-text { color: var(--color-white) !important; }
.site-header {
	background: var(--color-accent);
	padding: 16px 0;
	position: sticky;
	top: 0;
	z-index: 100;
}
.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.logo {
	font-family: 'Sigmar', cursive;
	font-size: 28px;
	color: var(--color-white);
	letter-spacing: -0.5px;
}
.header-actions {
	display: flex;
	gap: 24px;
	align-items: center;
}
.header-action-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-white);
	font-size: 16px;
	font-weight: 500;
	opacity: 0.9;
}
.header-action-btn:hover { opacity: 1; }
.header-action-btn svg, .header-action-btn img {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ============================================
   HERO SECTION (UNIFIED & FOOLPROOF)
   ============================================ */
.hero-section {
	background: linear-gradient(135deg, #054330 0%, #114F3C 100%);
	display: flex;
	align-items: center;
	position: relative;
	min-height: 640px;
	padding-top: 60px;
	padding-bottom: 120px; /* Space for the wave */
	overflow-x: auto; overflow-y: hidden; /* Hide anything going out of the sides/top */
}

/* Decor container */
.hero-decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.hero-cursor, .hero-paw {
	position: absolute;
	opacity: 0.4;
}
.hero-cursor--1 { top: 15%; left: 8%; transform: rotate(-25deg); width: 70px; }
.hero-cursor--2 { top: 12%; right: 12%; transform: rotate(15deg); width: 60px; }
.hero-cursor--3 { top: 75%; left: 10%; transform: rotate(-10deg); width: 65px; }
.hero-paw--tr { left: 89.2%; top: 18%; width: 124px; height: 130px; transform: rotate(-61deg); }
.hero-paw--bl { left: 1.5%; top: 78%; width: 124px; height: 130px; transform: rotate(58deg); }
.hero-paw--ml { left: 1.2%; top: 58%; width: 81px; height: 68px; transform: rotate(31deg); }
.hero-paw--br { left: 90.8%; top: 63.5%; width: 69px; height: 77px; transform: rotate(-124deg); }

/* Images container for Cat and Dog (goes BEHIND the wave) */
.hero-images {
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100%;
	pointer-events: none;
	z-index: 1; /* Behind the wave */
}
.hero-img {
	position: absolute;
	display: block;
	max-width: none;
	object-fit: contain;
	object-position: bottom center;
}
.hero-img--cat {
	right: 480px;
	bottom: 30px;
	height: 480px;
	z-index: 1;
}
.hero-img--dog {
	right: 50px;
	bottom: 0;
	height: 560px;
	z-index: 2;
}

/* The Wave (hides the flat bottom of the dog) */
.custom-shape-divider-bottom-1681234567 {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow-x: auto; overflow-y: hidden;
    line-height: 0;
    z-index: 3; /* IN FRONT of dog/cat */
}
.custom-shape-divider-bottom-1681234567 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 120px;
}
.custom-shape-divider-bottom-1681234567 .shape-fill {
    fill: #FFFFFF;
}

/* The Bowl (goes IN FRONT of the wave) */
.hero-img--bowl {
	right: 180px;
	bottom: 10px; /* Sits slightly on top of the wave */
	height: 200px;
	z-index: 4; /* IN FRONT of wave */
	pointer-events: none;
}

/* Content Container */
.hero-container {
	position: relative;
	z-index: 5;
	width: 100%;
}
.hero-content {
	flex: none;
	width: 100%;
	max-width: 750px; /* Safe width for text */
}

/* Typography */
.hero-title {
	font-family: 'Sigmar', cursive;
	font-size: 60px;
	font-weight: 400;
	color: var(--color-white);
	line-height: 1.4;
	margin-bottom: 20px;
	letter-spacing: -1px;
}
.hero-accent {
	font-family: 'Caveat', cursive;
	color: var(--color-accent);
	font-style: italic;
	font-size: 40px;
	font-weight: 700;
	margin-right: 4px;
}
.hero-subtitle {
	font-family: 'Poppins', sans-serif;
	font-size: 26px;
	color: rgba(255,255,255,0.9);
	margin-bottom: 40px;
	max-width: 500px;
	line-height: 1.5;
	font-weight: 400;
}
.hero-buttons {
	display: flex;
	gap: 23px;
	flex-wrap: wrap;
}
.hero-buttons .btn {
	width: 240px;
	padding: 16px 20px;
	font-size: 18px;
	font-weight: 400;
}

/* Responsive */
@media (max-width: 1400px) {
    .hero-img--dog { height: 480px; right: 0; }
    .hero-img--cat { right: 380px; height: 380px; }
    .hero-img--bowl { height: 160px; right: 120px; }
    .hero-title { font-size: 50px; }
	.hero-content { max-width: 650px; }
}
@media (max-width: 1200px) {
    .hero-img--cat { display: none; }
}
@media (max-width: 992px) {
	.hero-img--dog { height: 400px; opacity: 0.5; }
	.hero-img--bowl { height: 140px; right: 60px; }
	.hero-content { position: relative; z-index: 6; }
}
@media (max-width: 768px) {
	.hero-title { font-size: 40px; }
	.hero-subtitle { font-size: 20px; }
	.hero-img--dog { display: none; }
	.hero-img--bowl { display: none; }
	.hero-buttons .btn { width: 100%; }
}
/* ============================================
   SECTION COMMON
   ============================================ */
.section-title {
	font-size: 32px;
	font-weight: 800;
	margin-bottom: 12px;
	color: var(--color-primary);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.section-title--left { text-align: left; text-transform: uppercase; }
.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
}

/* ============================================
   CATEGORIES
   ============================================ */
.categories-section { padding: calc(var(--section-gap) + 80px) 0 var(--section-gap); }
.categories-section .section-title { margin-bottom: 80px; }
.categories-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 292px));
	justify-content: center;
	gap: 72px;
}
.category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 24px 24px 32px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 3.8px 9.5px rgba(202, 202, 202, 0.25);
	transition: all var(--transition);
	text-align: center;
	color: var(--color-primary);
}
.category-card:hover {
	transform: translateY(-6px);
	color: var(--color-primary);
}
.category-card__media {
	position: relative;
	width: 244px;
	height: 283px;
	overflow: visible;}
.category-card__blob {
	position: absolute;
	inset: 8px 4px auto;
	width: 239px;
	height: auto;
	z-index: 0;
}
.category-card__photo {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	width: 189px;
	height: 191px;
	object-fit: contain;
	z-index: 1;
}
.category-card__photo--acc {
	width: 199px;
	height: 203px;
	bottom: 16px;
}
.category-card__title {
	font-size: 24px;
	font-weight: 400;
	color: var(--color-primary);
}

.category-card__image {
	width: 180px;
	height: 160px;
	border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;}
.category-card__image img {
	max-width: 85%;
	max-height: 85%;
	object-fit: contain;
}
.category-card__image--dog {
	background: #f5e6d3;
}
.category-card__image--cat {
	background: #f0e8f5;
	border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%;
}
.category-card__image--acc {
	background: #d4edda;
	border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
}
.category-card:hover .category-card__image {
	transform: scale(1.05);
}
.category-card__title {
	font-size: 16px;
	font-weight: 700;
}

/* ============================================
   PRODUCTS
   ============================================ */
.products-section {
	padding: var(--section-gap) 0;
	position: relative;
	overflow: visible;}
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 0;
	margin: 0;
	list-style: none;
}
.products-grid--wc {
	display: contents;
}
.products-bg-pattern {
	position: absolute;
	bottom: -60px;
	right: -60px;
	width: 300px;
	opacity: 0.06;
	pointer-events: none;
}

/* Product card */
.product-card {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(202, 202, 202, 0.25);
	overflow-x: auto; overflow-y: hidden;
	transition: all var(--transition);
	display: flex;
	flex-direction: column;
	list-style: none;
}
.product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 20px rgba(202, 202, 202, 0.25);
}
.product-card__image {
	position: relative;
	background: #fff;
	padding: 16px 24px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 246px;
}
.product-card__image img {
	max-height: 229px;
	width: auto;
	max-width: 244px;
	object-fit: contain;
}
.product-card__wishlist {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}
.product-card__wishlist img {
	width: 40px;
	height: 40px;
	max-height: none;
}
.product-card__info {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
}
.product-card__desc {
	font-size: 14px;
	color: var(--color-text);
	line-height: 1.6;
}
.product-card__meta {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}
.product-card__weight-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
}
.product-card__weight {
	display: inline-flex;
	align-items: center;
	border: 1px solid #95a49f;
	border-radius: 10px;
	padding: 6px 12px;
	background: #fff;
	position: static;
}
.product-card__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}
.product-card__price {
	font-size: 25px;
	font-weight: 800;
	color: var(--color-text);
	line-height: 1;
}
.products-more {
	text-align: center;
	margin-top: 50px;
}
.products-more .btn {
	min-width: 248px;
}

/* WooCommerce overrides */
.woocommerce ul.products li.product {
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}
.woocommerce .products .product-card__image img {
	width: auto;
	height: auto;
}

/* ============================================
   ABOUT / INGREDIENTS
   ============================================ */
.about-section {
	padding: var(--section-gap) 0;
	background: var(--color-bg-alt);
	border-radius: 32px;
	margin: 0 20px;
}
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.about-content .section-title { margin-bottom: 20px; }
.about-text {
	font-size: 16px;
	color: var(--color-text-light);
	margin-bottom: 32px;
	line-height: 1.7;
}
.about-features {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.about-feature {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 500;
}
.about-feature__icon {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

/* About images */
.about-images {
	position: relative;
	height: 400px;
}
.about-img {
	position: absolute;
	object-fit: contain;
}
.about-img--herbs {
	left: 10%;
	top: 10%;
	width: 180px;
	transform: rotate(-15deg);
}
.about-img--carrot {
	right: 10%;
	bottom: 20%;
	width: 160px;
}
.about-img--drop {
	left: 30%;
	bottom: 10%;
	width: 80px;
}

/* ============================================
   SOCIAL / INSTAGRAM
   ============================================ */
.social-section {
	padding: var(--section-gap) 0;
	text-align: center;
}
.social-section .section-title { margin-bottom: 8px; }
.social-link {
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	color: var(--color-accent);
	margin-bottom: 32px;
}
.social-gallery {
	border-radius: var(--card-radius);
	overflow-x: auto; overflow-y: hidden;
	max-width: 800px;
	margin: 0 auto;
}
.social-img {
	width: 100%;
}

.why-section {
	padding: 80px 0 100px;
	background: var(--color-bg-alt);
}
.why-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.why-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 48px;
	margin-top: 40px;
}
.why-list li {
	display: flex;
	gap: 16px;
	align-items: center;
}
.why-num {
	font-size: 80px;
	font-weight: 800;
	color: var(--color-accent);
	line-height: 1;
	min-width: 62px;
}
.why-list h3 {
	font-size: 24px;
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: 12px;
}
.why-list p {
	font-size: 18px;
	line-height: 1.4;
	color: var(--color-text);
}
.why-visual {
	position: relative;
	min-height: 420px;
}
.why-note {
	position: absolute;
	top: 0;
	right: 8%;
	font-family: var(--font-hand);
	color: var(--color-accent);
	font-size: 28px;
	transform: rotate(-12deg);
	z-index: 2;
}
.why-dog {
	position: relative;
	z-index: 1;
	width: 72%;
	height: auto;
	max-width: 450px;
}
.why-bags {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 58%;
	max-width: 360px;
	height: auto;
	z-index: 2;
}

.ingredients-section {
	padding: var(--section-gap) 0;
}
.ingredients-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	margin-bottom: 48px;
}
.ingredients-grid p,
.ingredients-aside {
	font-size: 18px;
	line-height: 1.6;
}
.ingredients-sub {
	font-size: 22px;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 24px;
}
.ingredients-points {
	display: grid;
	gap: 20px;
	font-size: 16px;
	max-width: 720px;
}

.features-section { padding: 0 0 var(--section-gap); }
.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 48px;
}
.feature-card {
	background: #fff;
	border-radius: 16px;
	padding: 90px 32px 32px;
	box-shadow: 0 8px 24px rgba(17, 79, 60, 0.08);
	min-height: 260px;
}
.feature-card h3 {
	font-size: 18px;
	color: var(--color-primary);
	margin-bottom: 12px;
}

.health-section { padding: 0 0 var(--section-gap); }
.health-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}
.health-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 24px;
	font-size: 16px;
}

.made-section {
	padding: 80px 0;
	background: var(--color-primary);
	color: var(--color-white);
	text-align: center;
}
.made-title {
	font-size: 32px;
	text-transform: uppercase;
	margin: 16px 0 20px;
}
.made-section p {
	max-width: 813px;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.6;
}
.made-flag {
	width: 80px;
	height: 50px;
	margin: 0 auto;
	overflow-x: auto; overflow-y: hidden;
	border-radius: 2px;
}
.made-flag span { display: block; height: 25px; }
.made-flag span:first-child { background: #fff; }
.made-flag span:last-child { background: #dc143c; }

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
	padding: 80px 0 100px;
	background: var(--color-bg);
	text-align: center;
}
.cta-title {
	font-size: 32px;
	font-weight: 800;
	color: var(--color-primary);
	margin-bottom: 16px;
	text-transform: uppercase;
}
.cta-text {
	font-size: 18px;
	color: var(--color-text);
	margin-bottom: 32px;
}
.cta-buttons {
	display: flex;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
}
.cta-cat {
	min-width: 280px;
	padding: 36px 32px;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: 16px;
	font-size: 20px;
	font-weight: 600;
}
.cta-cat:hover { color: var(--color-white); }
.cta-caption {
	margin-top: 40px;
	font-size: 15px;
	color: var(--color-primary);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
	background: #054330;
	color: var(--color-white);
	padding: 80px 0 0;
}
.footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	padding-bottom: 40px;
}
.footer-brand {
	font-family: var(--font-logo);
	font-size: 64px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 8px 0 32px;
	color: var(--color-white);
}
.footer-social-list a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--color-white);
}
.footer-title {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 24px;
	line-height: 1.6;
}
.footer-nav li { margin-bottom: 20px; }
.footer-nav li a {
	font-size: 18px;
	color: var(--color-white);
}
.footer-nav li a:hover { color: rgba(255,255,255,0.8); }

.footer-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px 0;
	border-top: 1px solid var(--color-white);
	font-size: 15px;
	color: var(--color-white);
	text-align: center;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
	.hero-title { font-size: 42px; }
	.hero-accent { font-size: 54px; }
	.hero-img--dog {
	right: -10px;
	bottom: 0;
	height: 560px;
	z-index: 2;
}
	.hero-img--cat {
	right: 48%;
	bottom: 40px;
	height: 420px;
	z-index: 1;
}
	.hero-img--bowl {
	right: 15%;
	bottom: -20px;
	height: 220px;
	z-index: 5;
}
	.categories-grid { grid-template-columns: repeat(3, 1fr); }
	.products-grid { grid-template-columns: repeat(2, 1fr); }
	.about-grid { grid-template-columns: 1fr; }
	.why-grid,
	.ingredients-grid,
	.health-grid { grid-template-columns: 1fr; }
	.features-grid { grid-template-columns: 1fr 1fr; }
	.categories-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-brand { font-size: 42px; }
}

@media (max-width: 768px) {
	:root {
		--section-gap: 50px;
	}

	.main-nav { display: none; }
	.burger-btn { display: flex; }

	.hero-section { min-height: auto; padding: 40px 0 0; }
	.hero-container { flex-direction: column; text-align: center; min-height: auto; padding-bottom: 280px; }
	.hero-content {
	position: relative;
	z-index: 5;
	flex: none;
	width: 100%;
	max-width: 850px;
	padding-bottom: 20px;
}
	.hero-title { font-size: 34px; }
	.hero-accent { font-size: 44px; }
	.hero-subtitle { margin-left: auto; margin-right: auto; }
	.hero-buttons { justify-content: center; }
	.hero-images {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 60%;
	pointer-events: none;
}
	.hero-img--cat {
	right: 48%;
	bottom: 40px;
	height: 420px;
	z-index: 1;
}
	.hero-img--dog {
	right: -10px;
	bottom: 0;
	height: 560px;
	z-index: 2;
}
	.hero-img--bowl {
	right: 15%;
	bottom: -20px;
	height: 220px;
	z-index: 5;
}

	.section-title { font-size: 28px; }
	.section-header { flex-direction: column; gap: 16px; align-items: flex-start; }

	.categories-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.category-card { padding: 24px 16px; }
	.category-card__image { width: 120px; height: 110px; }

	.products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.product-card__image { height: 180px; padding: 16px; }

	.about-section { margin: 0 12px; border-radius: 24px; }
	.about-images { height: 260px; }

	.cta-section { margin: 0 12px; border-radius: 24px; }
	.cta-title { font-size: 28px; }

	.footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
	.features-grid { grid-template-columns: 1fr; }
	.cta-cat { width: 100%; }
}

@media (max-width: 480px) {
	.hero-title { font-size: 24px; }
	.hero-accent { font-size: 32px; }
	.hero-container { padding-bottom: 220px; }
	.hero-img--dog {
	right: -10px;
	bottom: 0;
	height: 560px;
	z-index: 2;
}
	.hero-img--cat {
	right: 48%;
	bottom: 40px;
	height: 420px;
	z-index: 1;
}
	.hero-img--bowl {
	right: 15%;
	bottom: -20px;
	height: 220px;
	z-index: 5;
}
	.hero-buttons { flex-direction: column; }
	.hero-buttons .btn { width: 100%; }
	.categories-grid { grid-template-columns: 1fr 1fr; }
	.products-grid { grid-template-columns: 1fr; }
	.product-card__info { padding: 16px; }
}

/* ============================================
   SINGLE PRODUCT PAGE
   ============================================ */
.product-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    padding: 40px 0;
}
.product-page__gallery {
    background: var(--color-bg-alt);
    border-radius: var(--card-radius);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-page__gallery img {
    max-height: 500px;
    object-fit: contain;
}
.product-page__title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 16px;
}
.product-page__price {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-accent);
    margin-bottom: 20px;
}
.product-page__short-desc {
    font-size: 15px;
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 24px;
}
.product-page__add-to-cart { margin-bottom: 24px; }
.product-page__add-to-cart .quantity {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--color-border);
    border-radius: var(--btn-radius);
    overflow-x: auto; overflow-y: hidden;
    margin-right: 12px;
}
.product-page__add-to-cart .quantity input {
    width: 50px;
    height: 48px;
    text-align: center;
    border: none;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 600;
}
.product-page__meta { font-size: 13px; color: var(--color-text-light); }
.product-page__meta a { color: var(--color-accent); }
.product-page__tabs { margin-top: 60px; }

/* WooCommerce overrides */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 32px 0;
    float: none;
}
.woocommerce-pagination { margin-top: 40px; text-align: center; }
.woocommerce-pagination ul {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--color-border);
    transition: all var(--transition);
}
.woocommerce-pagination ul li a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.woocommerce-pagination ul li.current span {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}
.woocommerce .woocommerce-ordering { margin-bottom: 24px; }
.woocommerce-result-count { font-size: 14px; color: var(--color-text-light); }


/* ============================================
   BENEFITS SECTION
   ============================================ */
.benefits-section {
	padding: var(--section-gap) 0;
	background: var(--color-white);
}
.benefits-wrapper {
	display: flex;
	align-items: center;
	gap: 60px;
	margin-top: 60px;
}
.benefits-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.benefit-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.benefit-num {
	font-family: 'Sigmar', cursive;
	font-size: 60px;
	line-height: 1;
	color: var(--color-accent);
}
.benefit-title {
	font-family: 'Sigmar', cursive;
	font-size: 24px;
	color: var(--color-primary);
	margin-bottom: 8px;
}
.benefit-desc {
	font-size: 16px;
	color: var(--color-text-light);
}
.benefits-image {
	flex: 1;
	position: relative;
}
.benefits-dog {
	width: 100%;
	height: auto;
	object-fit: contain;
}
@media (max-width: 992px) {
	.benefits-wrapper { flex-direction: column; }
	.benefits-image { order: -1; max-width: 400px; margin: 0 auto; }
}
/* ============================================
   HEALTH SECTION
   ============================================ */
.health-section {
	padding: var(--section-gap) 0;
	background: var(--color-white);
}
.health-content {
	display: flex;
	align-items: center;
	gap: 60px;
}
.health-text {
	flex: 1;
}
.health-subtitle {
	font-size: 20px;
	color: var(--color-text-light);
	line-height: 1.6;
}
.health-infographic {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.health-center img {
	width: 250px;
	border-radius: 50%;
	background: var(--color-border); /* Placeholder for green circle */
}
.health-list {
	margin-top: 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.health-list li {
	position: relative;
	padding-left: 24px;
	font-weight: 500;
	font-size: 16px;
}
.health-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-accent);
	font-weight: bold;
}
@media (max-width: 992px) {
	.health-content { flex-direction: column; }
	.health-list { grid-template-columns: 1fr; }
}
/* ============================================
   FEATURES SECTION
   ============================================ */
.features-section {
	padding: var(--section-gap) 0;
	background: var(--color-white);
}
.features-section .section-title {
	margin-bottom: 60px;
}
.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.feature-card {
	background: #F8F9FA;
	border-radius: 24px;
	padding: 40px 24px;
	position: relative;
	overflow: visible;}
.feature-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--color-primary);
}
.feature-desc {
	font-size: 15px;
	color: var(--color-text-light);
	line-height: 1.5;
}
@media (max-width: 992px) {
	.features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
	.features-grid { grid-template-columns: 1fr; }
}
/* ============================================
   REVIEWS SECTION
   ============================================ */
.reviews-section {
	padding: var(--section-gap) 0;
	background: var(--color-white);
}
.reviews-subtitle {
	font-size: 20px;
	color: var(--color-text-light);
	margin-bottom: 40px;
}
.reviews-wrapper {
	display: flex;
	gap: 40px;
	align-items: center;
}
.reviews-instagram {
	flex: 1;
	background: #F8F9FA;
	padding: 30px;
	border-radius: 24px;
}
.instagram-profile {
	display: flex;
	gap: 30px;
	align-items: flex-start;
}
.instagram-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	background: #e0e0e0;
}
.instagram-top {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 16px;
}
.instagram-username {
	font-size: 20px;
	font-weight: 600;
}
.btn-sm { padding: 8px 16px; font-size: 14px; }
.instagram-stats {
	display: flex;
	gap: 20px;
	margin-bottom: 16px;
	font-size: 14px;
}
.instagram-bio {
	font-size: 14px;
	line-height: 1.6;
}
.reviews-carousel {
	flex: 1;
	display: flex;
	gap: 20px;
	overflow-x: auto;
	padding-bottom: 20px;
}
.review-card {
	min-width: 280px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
@media (max-width: 992px) {
	.reviews-wrapper { flex-direction: column; }
	.instagram-profile { flex-direction: column; align-items: center; text-align: center; }
	.instagram-stats { justify-content: center; flex-wrap: wrap; }
}
/* FIX MOBILE OVERFLOW */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

@media (max-width: 768px) {
    .header-action-text { display: none; }
    .header-actions { gap: 16px; }
    .site-header { padding: 10px 0 !important; }
}

/* BENEFITS BACKGROUND FIX */
.benefits-section {
    background-color: #FFF6EA !important; /* Soft beige from design */
}

/* RADIAL INFOGRAPHIC */
.health-infographic {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 450px;
}
.health-center img {
    width: 280px;
    height: auto;
    background: transparent;
    border-radius: 0;
    position: relative;
    z-index: 2;
}
.health-radial {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}
.h-label {
    position: absolute;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    line-height: 1.3;
    width: 140px;
    transform: translate(-50%, -50%);
}
/* Positions assuming a 500x500 box roughly */
.h-top { top: 0%; left: 50%; }
.h-bottom { top: 100%; left: 50%; }
.h-left { top: 50%; left: 0%; text-align: right; transform: translate(-100%, -50%); padding-right:15px; }
.h-right { top: 50%; left: 100%; text-align: left; transform: translate(0, -50%); padding-left:15px; }
.h-top-left { top: 15%; left: 15%; text-align: right; transform: translate(-80%, -50%); }
.h-top-right { top: 15%; left: 85%; text-align: left; transform: translate(-20%, -50%); }
.h-bottom-left { top: 85%; left: 15%; text-align: right; transform: translate(-80%, -50%); }
.h-bottom-right { top: 85%; left: 85%; text-align: left; transform: translate(-20%, -50%); }

.health-list-mobile {
    display: none;
    list-style: none;
    margin-top: 30px;
    padding: 0;
    width: 100%;
}
.health-list-mobile li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 15px;
}
.health-list-mobile li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent);
}
.health-list { display: none !important; } /* Hide old list */

@media (max-width: 992px) {
    .health-radial { display: none; }
    .health-list-mobile { display: block; }
    .health-infographic { min-height: auto; flex-direction: column; }
}

/* RADIAL INFOGRAPHIC FIXES */
.health-infographic {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 450px;
}
.health-center {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.health-center img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}
.health-radial {
    position: absolute;
    /* Match the size of the inner circle to keep texts tight */
    width: 280px;
    height: 280px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
}
.h-label {
    position: absolute;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    line-height: 1.3;
    width: 160px;
    transform: translate(-50%, -50%);
}

/* Tighter coordinates */
.h-top { top: -5%; left: 50%; }
.h-bottom { top: 105%; left: 50%; }
.h-left { top: 50%; left: -5%; text-align: right; transform: translate(-100%, -50%); padding-right:5px; }
.h-right { top: 50%; left: 105%; text-align: left; transform: translate(0, -50%); padding-left:5px; }
.h-top-left { top: 15%; left: 15%; text-align: right; transform: translate(-80%, -50%); }
.h-top-right { top: 15%; left: 85%; text-align: left; transform: translate(-20%, -50%); }
.h-bottom-left { top: 85%; left: 15%; text-align: right; transform: translate(-80%, -50%); }
.h-bottom-right { top: 85%; left: 85%; text-align: left; transform: translate(-20%, -50%); }


/* FEATURES ORIGINAL DESIGN FIX */
.features-grid {
    margin-top: 60px; /* Space for floating icons */
}
.feature-card {
    position: relative;
    border-radius: 12px;
    padding: 60px 12px 12px 12px;
    display: flex;
    flex-direction: column;
    /* Remove old background/overflow */
    background: transparent;
    overflow: visible;
}
.feature-card--1 { background-color: #E64C1E; }
.feature-card--2 { background-color: #92C063; }
.feature-card--3 { background-color: #F6AA00; }
.feature-card--4 { background-color: #1A5E44; }

/* The SVG icons already have the white circle and colored borders */
.feature-icon {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    z-index: 2;
    display: block;
}

.feature-card__content {
    background: #fff;
    border-radius: 8px;
    padding: 24px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.feature-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 12px;
    line-height: 1.3;
}
.feature-desc {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 0;
}

/* TIKTOK CAROUSEL 5 PHONES */
.tiktok-section {
    padding: var(--section-gap) 0;
    background: #FFF6EA; 
    overflow: visible;}
.tiktok-header {
    text-align: center;
    margin-bottom: 50px;
}
.tiktok-subtitle {
    font-size: 20px;
    margin-top: 10px;
    color: var(--color-text);
}
.tiktok-carousel-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tiktok-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.tiktok-phone {
    border-radius: 36px; /* iPhone border radius */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    object-fit: cover;
}
.tiktok-phone--center {
    height: 540px;
    z-index: 3;
    transform: scale(1);
}
.tiktok-phone--inner {
    height: 460px;
    z-index: 2;
    opacity: 0.9;
}
.tiktok-phone--outer {
    height: 380px;
    z-index: 1;
    opacity: 0.7;
}

@media (max-width: 1200px) {
    .tiktok-carousel { gap: 15px; }
}
@media (max-width: 992px) {
    .tiktok-phone--outer { display: none; }
}
@media (max-width: 768px) {
    .tiktok-carousel { flex-direction: column; gap: 40px; }
    .tiktok-phone { height: auto; width: 100%; max-width: 320px; opacity: 1; }
    .tiktok-phone--inner { display: flex; }
}

/* WOOCOMMERCE LOOP GRID FIX */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin: 0 !important;
}
.woocommerce ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* WOOCOMMERCE BUTTON OVERRIDE */
.woocommerce ul.products li.product .button {
    margin-top: 16px !important;
    background: var(--color-accent) !important;
    color: #fff !important;
    border-radius: 30px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 100% !important;
    border: none !important;
    transition: 0.3s ease !important;
    display: block !important;
}
.woocommerce ul.products li.product .button:hover {
    background: #c84015 !important;
}

/* PRICE FONT FIX */
.product-card__price {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--color-text) !important;
    margin-top: 10px !important;
    display: block !important;
}


/* VARIATION FORM FIXES */
.variations_form {
    margin-top: 24px;
}
.variations_form table {
    border: none !important;
    width: 100%;
}
.variations_form td {
    padding: 10px 0;
    vertical-align: middle;
    border: none !important;
}
.variations_form td.label {
    width: 30%;
    font-weight: 700;
    color: var(--color-text);
}
.variations_form select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    font-size: 16px;
}
.woocommerce-variation-price {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 800;
    color: var(--color-text);
}
.woocommerce-variation-add-to-cart .qty {
    padding: 12px;
    width: 80px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    margin-right: 15px;
}


/* ============================================
   MOBILE RESPONSIVE FIXES (CLEANUP)
   ============================================ */
@media (max-width: 768px) {
    /* 1. HORIZONTAL SCROLL FOR PRODUCTS */
    .woocommerce ul.products {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 16px !important;
        padding-bottom: 20px !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        scrollbar-width: none;
    }
    .woocommerce ul.products::-webkit-scrollbar {
        display: none;
    }
    .woocommerce ul.products li.product {
        min-width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        scroll-snap-align: start !important;
        flex: 0 0 auto !important;
    }
    .woocommerce ul.products li.product .wvs-archive-variations-wrapper {
        max-width: 100%;
        overflow: visible;}
    .woocommerce ul.products li.product .button {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    .product-card__title {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    .product-card__price {
        font-size: 16px !important;
    }

    /* 2. FOOTER CENTERING */
    .site-footer {
        text-align: center;
    }
    .footer-col {
        text-align: center;
    }
    .footer-nav {
        align-items: center;
    }
    .footer-nav li {
        width: 100%;
        text-align: center;
    }
    .footer-social-list li a {
        justify-content: center;
    }

    /* 3. HERO SECTION TYPOGRAPHY */
    .hero-title {
        font-size: clamp(28px, 9vw, 42px) !important;
        line-height: 1.1 !important;
        padding: 0 10px !important;
    }
    .hero-subtitle {
        font-size: clamp(15px, 4.5vw, 18px) !important;
        line-height: 1.4 !important;
    }
    .hero-accent {
        font-size: clamp(24px, 7vw, 32px) !important;
    }
    .hero-buttons .btn {
        padding: 20px 24px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        border-radius: 50px !important;
        margin-bottom: 12px !important;
    }

    /* 4. HERO IMAGES (VW SCALING & FULL WIDTH) */
    .hero-cursor {
        display: none !important; /* Hide floating bubbles */
    }
    .hero-images {
        width: 100% !important; /* Force full width container */
    }
    .hero-img--cat {
        left: auto !important;
        right: 45% !important;
        width: 55vw !important;
        height: auto !important;
        bottom: 55px !important;
        z-index: 1 !important;
        opacity: 1 !important;
        display: block !important;
    }
    .hero-img--dog {
        left: auto !important;
        right: -10px !important;
        width: 60vw !important;
        height: auto !important;
        bottom: 30px !important;
        z-index: 2 !important;
        opacity: 1 !important;
        display: block !important;
    }
    .hero-img--bowl {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 60vw !important;
        height: auto !important;
        bottom: 15px !important;
        z-index: 3 !important;
        opacity: 1 !important;
        display: block !important;
    }
}
/* ============================================
   CATEGORIES RE-WRITE (HTML UPDATED)
   ============================================ */
.categories-main-title {
    text-align: center;
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 40px;
    line-height: 1.3;
}
.category-card__img-wrap {
    width: 100%;
}
.category-card__img-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.category-paw {
    position: absolute;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}
.category-card__title {
    position: relative;
    z-index: 1;
}

/* Desktop Defaults */
@media (min-width: 769px) {
    .category-paw { display: none; } /* Hide paws on desktop unless requested */
}

/* Mobile Overrides for Categories */
@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .category-card {
        flex-direction: row !important;
        justify-content: flex-start !important;
        padding: 12px 24px 12px 12px !important;
        border-radius: 60px !important;
        gap: 24px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
        position: relative;
        overflow: visible;}
    .category-card__img-wrap {
        width: 110px !important;
        flex-shrink: 0;
    }
    .category-card__title {
        font-size: 18px !important;
        font-weight: 800 !important;
        color: #2A2A2A !important;
        text-align: left !important;
    }
    .category-paw--dog {
        top: 15px;
        right: 25px;
        width: 35px;
    }
    .category-paw--cat {
        bottom: 15px;
        left: 110px;
        width: 35px;
    }
    .category-paw--acc {
        bottom: 15px;
        right: 25px;
        width: 35px;
    }
}
/* ============================================
   REVIEWS (INSTAGRAM STYLE)
   ============================================ */
.reviews-section {
    background: #fafafa;
}
.reviews-wrapper {
    max-width: 600px;
    margin: 0 auto;
}
.instagram-profile {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}
.instagram-avatar-wrap {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    padding: 3px;
    border-radius: 50%;
    flex-shrink: 0;
}
.instagram-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid #fafafa;
}
.instagram-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.instagram-username {
    font-size: 18px;
    font-weight: 700;
    color: #262626;
}
.instagram-follow-btn {
    padding: 6px 16px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    background: var(--color-accent) !important;
    color: #fff !important;
}
.instagram-stats {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #8e8e8e;
    flex-wrap: wrap;
}
.instagram-stats strong {
    color: #262626;
    font-weight: 600;
}
.instagram-bio {
    font-size: 15px;
    line-height: 1.6;
    color: #262626;
}
.instagram-bio .bio-subtitle {
    color: #8e8e8e;
}
.reviews-carousel {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    margin-top: 32px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px; /* shadow room */
}
.reviews-carousel::-webkit-scrollbar {
    display: none;
}
.review-slide {
    flex: 0 0 65%;
    scroll-snap-align: center;
    border-radius: 20px;
    overflow-x: auto; overflow-y: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.review-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.reviews-arrows {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 10px;
}
.review-arrow {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.review-arrow img {
    width: 40px;
    height: 40px;
    /* Turn paw SVG to orange */
    filter: invert(45%) sepia(87%) saturate(2250%) hue-rotate(345deg) brightness(98%) contrast(95%);
}
.review-arrow-prev img {
    transform: scaleX(-1);
}

@media (max-width: 480px) {
    .instagram-avatar { width: 70px; height: 70px; }
    .instagram-profile { gap: 12px; }
    .instagram-stats { flex-direction: column; gap: 4px; }
    .instagram-top { flex-wrap: wrap; gap: 10px; }
}
/* ============================================
   FOOTER RE-STYLE (DESKTOP & MOBILE)
   ============================================ */
.footer-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}
.footer-nav li { margin-bottom: 12px !important; }
.footer-nav li a {
    font-size: 13px !important;
}
.footer-brand {
    font-size: 32px !important;
    margin: 32px 0 24px !important;
}
.footer-bottom {
    border-top: none !important;
    position: relative;
    padding: 24px 0 !important;
    font-size: 12px !important;
}
.footer-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: rgba(255,255,255,0.3);
}

@media (max-width: 768px) {
    .footer-brand { font-size: 28px !important; }
    .footer-bottom::before { width: 80%; }
}
/* ============================================
   CTA SECTION (3D POPPING HEADS)
   ============================================ */
.cta-buttons-wrap {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.cta-pill {
    background: #fff;
    border-radius: 60px;
    height: 70px;
    width: 320px;
    display: flex;
    align-items: center;
    position: relative;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
.cta-pill:hover {
    transform: translateY(-5px);
}
.cta-pill-head {
    position: absolute;
    left: -10px;
    bottom: 0;
    height: 120px;
    width: auto;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}
.cta-pill-head--cat {
    left: -5px;
    height: 110px;
}
.cta-pill-text {
    flex-grow: 1;
    text-align: center;
    padding-left: 60px;
    font-size: 18px;
    font-weight: 700;
    color: #2A2A2A;
    z-index: 1;
}
.cta-pill-paw {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    opacity: 0.05;
    z-index: 0;
}
.cta-caption {
    color: var(--color-accent);
    font-size: 24px;
    font-family: 'Caveat', 'Dancing Script', 'Comic Sans MS', cursive;
    font-weight: 600;
}

@media (max-width: 768px) {
    .cta-buttons-wrap {
        gap: 60px; /* Space for overflowing heads */
        flex-direction: column;
        align-items: center;
    }
    .cta-pill {
        width: 100%;
        max-width: 300px;
    }
}
/* ============================================
   REVIEWS DESKTOP LAYOUT (SIDE BY SIDE)
   ============================================ */
@media (min-width: 769px) {
    .reviews-wrapper {
        max-width: 1000px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
    }
    .reviews-instagram {
        flex: 0 0 40%;
    }
    .reviews-right {
        flex: 0 0 55%;
        overflow: visible;}
    .reviews-carousel {
        margin-top: 0 !important;
        gap: 20px !important;
    }
    .review-slide {
        flex: 0 0 45% !important; /* show roughly 2 cards at a time on desktop */
    }
    .reviews-arrows {
        justify-content: flex-end !important;
    }
}
/* ============================================
   REVIEWS RE-STYLE (SMALLER SLIDES, SIDE ARROWS)
   ============================================ */
.reviews-header.text-center {
    text-align: center;
}
.reviews-right {
    position: relative;
    display: flex;
    align-items: center;
}
.reviews-carousel {
    flex-grow: 1;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 10px 0;
}
.review-slide {
    flex: 0 0 60%; /* Mobile fallback */
    border-radius: 12px;
}
.review-arrow {
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 2;
    flex-shrink: 0;
}
.review-arrow img {
    width: 32px;
    height: 32px;
    filter: invert(45%) sepia(87%) saturate(2250%) hue-rotate(345deg) brightness(98%) contrast(95%);
}
.review-arrow-prev img {
    transform: scaleX(-1);
}

@media (min-width: 769px) {
    .reviews-wrapper {
        max-width: 1100px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
    }
    .reviews-instagram {
        flex: 0 0 350px;
    }
    .reviews-right {
        flex: 1;
        min-width: 0;
        gap: 10px;
    }
    .review-slide {
        flex: 0 0 calc(25% - 12px) !important; /* Exactly 4 cards on desktop */
        max-width: 190px;
    }
}
/* ============================================
   CTA CAT/DOG HEADS FIX
   ============================================ */
.cta-pill-text {
    padding-left: 90px !important; /* Make sure text clears the wide heads */
}
.cta-pill-head {
    left: -15px !important;
    height: 120px !important;
    z-index: 10 !important;
    bottom: 0 !important; /* Move dog slightly more left */
}
.cta-pill-head--cat {
    left: -20px !important; /* Move cat even more left because it's wider */
    height: 105px !important; /* Slightly smaller to prevent text overlap */
}

@media (max-width: 768px) {
    .cta-pill-text {
        padding-left: 100px !important; /* Push text further right on mobile */
        font-size: 16px !important; /* Slightly smaller text so it fits */
    }
    .cta-pill-head {
        left: -10px !important;
        height: 105px !important;
    }
    .cta-pill-head--cat {
        left: -15px !important;
        height: 95px !important; /* Smaller on mobile to prevent overlapping */
    }
}
/* ============================================
   REMOVE WHITE GAP AT BOTTOM OF PAGE
   ============================================ */
html, body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#page, .site-main, .site-footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.footer-bottom {
    margin-bottom: 0 !important;
    padding-bottom: 24px !important; /* Keep internal padding only */
}
/* Storefront Handheld Footer Bar removal if it's there */
.storefront-handheld-footer-bar {
    display: none !important;
}
/* ============================================
   MOBILE FOOTER ALIGNMENT FIX
   ============================================ */
@media (max-width: 768px) {
    .footer-social-list {
        display: inline-block !important; /* Shrink to content width */
        text-align: left !important; /* Align icons and text perfectly inside the block */
    }
    .footer-social-list li {
        width: auto !important; /* Remove 100% width */
        margin-bottom: 16px !important;
    }
    .footer-social-list li a {
        justify-content: flex-start !important; /* Align left within the inline-block */
    }
    /* Add more spacing between sections */
    .footer-col {
        margin-bottom: 40px !important;
    }
    .footer-title {
        margin-bottom: 24px !important;
    }
    /* Space out standard links more cleanly */
    .footer-nav li {
        margin-bottom: 16px !important;
    }
}
/* ============================================
   CTA MOBILE ZIG-ZAG LAYOUT (CAT ON RIGHT)
   ============================================ */
@media (max-width: 768px) {
    /* Move cat head to the right */
    .cta-pill-head--cat {
        left: auto !important;
        right: -20px !important;
    }
    /* Adjust text padding for the cat button */
    .cta-pill:nth-child(2) .cta-pill-text {
        padding-left: 0 !important;
        padding-right: 90px !important;
    }
    /* Move paw to the left for the cat button */
    .cta-pill:nth-child(2) .cta-pill-paw {
        right: auto !important;
        left: 20px !important;
        top: 65% !important; /* Lower left corner */
    }
    /* Keep dog text padding left */
    .cta-pill:nth-child(1) .cta-pill-text {
        padding-left: 90px !important;
        padding-right: 0 !important;
    }
    /* Move dog paw to top right */
    .cta-pill:nth-child(1) .cta-pill-paw {
        top: 25% !important;
    }
}
/* ============================================
   FEATURES CHECKERBOARD LAYOUT
   ============================================ */
.feature-icon {
    /* Reset from previous center */
    left: auto !important;
    transform: none !important;
    width: 90px !important;
    height: 90px !important;
    top: -30px !important;
}

/* Odd cards: Icon on Top Right */
.feature-card:nth-child(odd) .feature-icon {
    right: 20px !important;
}
.feature-card:nth-child(odd) {
    padding: 50px 12px 12px 12px !important; /* Make room for icon */
}

/* Even cards: Icon on Top Left */
.feature-card:nth-child(even) .feature-icon {
    left: 20px !important;
}
.feature-card:nth-child(even) {
    padding: 50px 12px 12px 12px !important;
}

/* Ensure desktop also alternates correctly */
@media (min-width: 769px) {
    .features-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}
/* ============================================
   FEATURES CHECKERBOARD FIX (HANGING ICONS)
   ============================================ */
.features-section {
    overflow-x: hidden; /* Prevent horizontal scroll from hanging icons */
}
.feature-icon {
    width: 110px !important;
    height: 110px !important;
    top: -45px !important;
}

/* Odd cards: Icon hangs off Top Right */
.feature-card:nth-child(odd) .feature-icon {
    right: -20px !important;
    left: auto !important;
}

/* Even cards: Icon hangs off Top Left */
.feature-card:nth-child(even) .feature-icon {
    left: -20px !important;
    right: auto !important;
}
/* ============================================
   FEATURES CHECKERBOARD FIX (INSIDE THE CARD)
   ============================================ */
/* Odd cards: Icon on Top Right, but INSIDE the card */
.feature-card:nth-child(odd) .feature-icon {
    right: 12px !important; /* Align with the right edge of the inner white box */
    left: auto !important;
}

/* Even cards: Icon on Top Left, but INSIDE the card */
.feature-card:nth-child(even) .feature-icon {
    left: 12px !important; /* Align with the left edge of the inner white box */
    right: auto !important;
}

/* Ensure they only break the top boundary, not the side boundaries */
.feature-icon {
    top: -35px !important; /* Break top edge */
    width: 100px !important; /* Slightly smaller so it fits nicely */
    height: 100px !important;
}
/* ============================================
   PRODUCT SWATCHES (WEIGHT SWITCHER)
   ============================================ */
.product-swatches {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.product-swatch {
    background: #F8F9FA;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #4A4A4A;
    cursor: pointer;
    transition: all 0.2s ease;
}
.product-swatch:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.product-swatch.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.product-card__add {
    width: 100%;
}
/* ============================================
   PRODUCT SWATCHES SELECT DROPDOWN
   ============================================ */
.product-swatch-select {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    background-color: #F8F9FA;
    font-size: 15px;
    font-weight: 600;
    color: #4A4A4A;
    cursor: pointer;
    outline: none;
    appearance: none; /* custom arrow below */
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L6 6.5L11 1.5" stroke="%234A4A4A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    transition: all 0.2s ease;
}
.product-swatch-select:hover,
.product-swatch-select:focus {
    border-color: var(--color-primary);
}
/* ============================================
   PRODUCT SWATCHES (INLINE PRICE & LABEL)
   ============================================ */
.product-card__weight-label {
    font-size: 13px;
    color: #4A4A4A;
    margin-bottom: 8px;
    text-align: left;
}
.product-card__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 10px;
}
.product-swatches {
    margin-bottom: 0 !important; /* Override old margin */
    flex: 0 0 100px; /* Make dropdown smaller */
}
.product-swatch-select {
    padding: 6px 12px !important;
    border-radius: 20px !important; /* Pill shape like mockup */
    background-color: transparent !important;
    border: 1px solid #c7c7c7 !important;
    background-position: right 10px center !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    width: 100px;
}
.product-card__price {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #2a2a2a; /* Make price darker/bigger if needed */
    margin-bottom: 0 !important;
    display: block;
    text-align: right;
}
/* ============================================
   NEW HERO WAVE (FIGMA VECTOR 4)
   ============================================ */
.custom-shape-divider-bottom-1681234567 {
    bottom: 0px !important;
}
.custom-shape-divider-bottom-1681234567 img {
    width: 100% !important;
    height: auto !important;
    min-height: 4vw; /* Ensure it scales nicely */
    object-fit: cover;
    object-position: top;
    display: block;
}
/* Adjust animals if they peek below the new shallow wave */
.hero-img--cat {
    bottom: 10px !important; 
}
.hero-img--dog {
    bottom: 0px !important;
}
.hero-img--bowl {
    bottom: 15px !important;
}
/* ============================================
   HERO BONES
   ============================================ */
.hero-bone {
    position: absolute;
    opacity: 0.6; /* Slight transparency like mockup */
}
.hero-bone--1 { 
    top: 15%; 
    left: 4%; 
    transform: rotate(-20deg); 
    width: 60px; 
}
.hero-bone--2 { 
    top: 50%; 
    right: 2%; 
    transform: rotate(-30deg); 
    width: 50px; 
}
@media (max-width: 768px) {
    .hero-bone {
        display: none !important; /* Hide on mobile to keep it clean */
    }
}
/* ============================================
   PERFECT HERO POSITIONING (MOCKUP MATCH)
   ============================================ */
/* Ensure wave covers everything */
.custom-shape-divider-bottom-1681234567 {
    z-index: 5 !important;
}

/* Adjust bowl to sit exactly behind the wave, center-right */
.hero-img--bowl {
    z-index: 2 !important; /* Behind the wave */
    right: 18% !important;
    bottom: -10px !important; /* Sink into the wave */
    height: 180px !important; 
    width: auto !important;
}

/* Adjust Dog - Far Right */
.hero-img--dog {
    right: -2% !important;
    bottom: 0px !important;
    height: 600px !important; 
    width: auto !important;
}

/* Adjust Cat - Center Right, behind bowl */
.hero-img--cat {
    right: 35% !important;
    bottom: 0px !important;
    height: 400px !important; 
    width: auto !important;
}

/* Restrict text width so it doesn't overlap cat */
.hero-content {
    max-width: 55% !important;
}

@media (max-width: 1024px) {
    .hero-content { max-width: 100% !important; }
    .hero-img--cat { right: 40% !important; height: 350px !important; }
    .hero-img--dog { right: -5% !important; height: 500px !important; }
    .hero-img--bowl { right: 10% !important; height: 150px !important; }
}
@media (max-width: 768px) {
    /* Reset on mobile */
    .hero-img--cat { position: relative !important; right: auto !important; left: 50% !important; transform: translateX(-50%) !important; height: 300px !important; margin-top: 40px; }
    .hero-img--dog, .hero-img--bowl { display: none !important; }
}
/* ============================================
   HERO TEXT COLOR FIX
   ============================================ */
.hero-accent {
    color: var(--color-accent) !important; /* Orange */
}
/* ============================================
   SMALL HERO BONE
   ============================================ */
.hero-bone--small { 
    top: 6%; 
    left: 2%; 
    transform: rotate(15deg); 
    width: 28px; 
}
/* ============================================
   TINY HERO BONE
   ============================================ */
.hero-bone--tiny { 
    top: 9%; 
    left: -0.5%; 
    transform: rotate(45deg); 
    width: 16px; 
}
/* ============================================
   RIGHT SIDE HERO BONE (KOSTOCHKA 3)
   ============================================ */
.hero-bone--3 { 
    top: 70%; 
    right: 4%; 
    transform: rotate(-30deg); 
    width: 68px; 
}
/* ============================================
   HERO POLISH (TEXT, PAWS, BUTTONS, BOWL, WAVE)
   ============================================ */

/* 1. Wave - let it scale naturally without min-height stretching */
.custom-shape-divider-bottom-1681234567 img {
    min-height: 0 !important;
}

/* 2. Text layout - let it breathe */
.hero-content {
    max-width: 65% !important; /* Allow more width for text */
}
.hero-title {
    font-size: 54px !important; /* Fixed large size on desktop */
}
.hero-subtitle {
    font-size: 20px !important;
}
.hero-accent {
    font-size: 40px !important;
}

/* 3. Buttons */
.hero-btn {
    padding: 14px 40px !important;
    border-radius: 30px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* 4. Paw prints */
.hero-paw {
    width: 160px !important;
    height: auto !important;
}
.hero-paw--tr {
    left: auto !important;
    right: 5% !important;
    top: 15% !important;
    transform: rotate(15deg) !important;
}
.hero-paw--bl {
    left: 2% !important;
    top: auto !important;
    bottom: 8% !important;
    transform: rotate(-10deg) !important;
}

/* 5. Bowl and Animals */
.hero-img--bowl {
    height: 100px !important; /* Much shallower bowl */
    right: 25% !important;
    bottom: -15px !important; /* Sunk deeply into the wave */
}
.hero-img--dog {
    height: 520px !important;
    right: 2% !important;
    bottom: -10px !important;
}
.hero-img--cat {
    height: 380px !important;
    right: 36% !important;
    bottom: -10px !important;
}

/* Mobile responsive resets */
@media (max-width: 1024px) {
    .hero-title { font-size: 40px !important; }
    .hero-img--cat { right: 40% !important; height: 300px !important; }
    .hero-img--bowl { right: 20% !important; height: 80px !important; }
    .hero-content { max-width: 100% !important; }
}
/* ============================================
   HERO SECTION - COMPLETE RESET & REBUILD
   (Overrides all previous conflicting rules)
   ============================================ */

/* === BASE LAYOUT === */
.hero-section {
    background: linear-gradient(135deg, #054330 0%, #114F3C 100%) !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    min-height: 560px !important;
    padding-top: 50px !important;
    padding-bottom: 0px !important;
    overflow: visible !important;}

/* === TEXT CONTENT === */
.hero-content {
    position: relative !important;
    z-index: 6 !important;
    max-width: 52% !important;
    flex: none !important;
}
.hero-title {
    font-size: 56px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 16px !important;
    letter-spacing: -1px !important;
}
.hero-subtitle {
    font-size: 18px !important;
    line-height: 1.5 !important;
    color: #fff !important;
    margin-bottom: 28px !important;
}
.hero-accent {
    font-family: 'Caveat', cursive !important;
    font-size: 36px !important;
    color: var(--color-accent) !important;
    display: inline !important;
}

/* === BUTTONS === */
.hero-buttons {
    display: flex !important;
    gap: 14px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}
.hero-btn {
    padding: 12px 32px !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* === DECOR CONTAINER === */
.hero-decor {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    overflow: visible !important;}

/* === PAW PRINTS === */
.hero-paw {
    position: absolute !important;
    pointer-events: none !important;
    opacity: 0.25 !important;
    width: 180px !important;
    height: auto !important;
}
/* Top-right cluster */
.hero-paw--tr {
    top: 8% !important;
    right: 3% !important;
    left: auto !important;
    transform: rotate(10deg) !important;
}
/* Bottom-left cluster */
.hero-paw--bl {
    bottom: 16% !important;
    top: auto !important;
    left: 1% !important;
    transform: rotate(-5deg) !important;
}

/* === IMAGES CONTAINER === */
.hero-images {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 55% !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
.hero-img {
    position: absolute !important;
    display: block !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: bottom !important;
}

/* Dog - rightmost, full height */
.hero-img--dog {
    right: -1% !important;
    bottom: 0 !important;
    height: 90% !important;
    width: auto !important;
    z-index: 2 !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    display: block !important;
}

/* Cat - center-left within image area */
.hero-img--cat {
    right: 44% !important;
    left: auto !important;
    bottom: 0 !important;
    height: 75% !important;
    width: auto !important;
    z-index: 1 !important;
    transform: none !important;
    opacity: 1 !important;
    display: block !important;
}

/* Bowl - bottom center, sunk into wave */
.hero-img--bowl {
    right: 22% !important;
    left: auto !important;
    bottom: -5px !important;
    height: 130px !important;
    width: auto !important;
    z-index: 3 !important;
    display: block !important;
    transform: none !important;
}

/* === WAVE === */
.custom-shape-divider-bottom-1681234567 {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 4 !important;
    line-height: 0 !important;
}
.custom-shape-divider-bottom-1681234567 img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: initial !important;
}

/* === BONES === */
.hero-bone {
    position: absolute !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
}
.hero-bone--1    { top: 16%; left: 5%;   width: 58px;  transform: rotate(-20deg); }
.hero-bone--small{ top: 8%;  left: 3%;   width: 26px;  transform: rotate(15deg);  }
.hero-bone--tiny { top: 11%; left: 1.5%; width: 14px;  transform: rotate(45deg);  }
.hero-bone--3    { top: 65%; right: 3%;  width: 65px;  transform: rotate(-30deg); }


/* ============================================
   HERO RESPONSIVE
   ============================================ */

/* Large desktop: everything matches the mockup */
@media (min-width: 1280px) {
    .hero-title { font-size: 60px !important; }
}

/* Tablet landscape */
@media (max-width: 1200px) {
    .hero-content  { max-width: 55% !important; }
    .hero-title    { font-size: 46px !important; }
    .hero-img--dog { height: 85% !important; }
    .hero-img--cat { height: 68% !important; right: 43% !important; }
    .hero-img--bowl{ height: 110px !important; right: 20% !important; }
}

/* Tablet portrait */
@media (max-width: 1024px) {
    .hero-section  { min-height: 480px !important; }
    .hero-content  { max-width: 50% !important; }
    .hero-title    { font-size: 38px !important; }
    .hero-accent   { font-size: 30px !important; }
    .hero-subtitle { font-size: 15px !important; }
    .hero-img--dog { height: 80% !important; }
    .hero-img--cat { height: 62% !important; right: 42% !important; }
    .hero-img--bowl{ height: 90px !important; right: 19% !important; }
}

/* Mobile */
@media (max-width: 768px) {
    .hero-section   { min-height: auto !important; padding-top: 32px !important; padding-bottom: 220px !important; overflow: visible !important; }
    .hero-content   { max-width: 100% !important; text-align: center !important; }
    .hero-title     { font-size: clamp(28px, 8vw, 40px) !important; }
    .hero-accent    { font-size: clamp(24px, 6.5vw, 32px) !important; }
    .hero-subtitle  { font-size: 15px !important; }
    .hero-buttons   { justify-content: center !important; flex-wrap: wrap !important; }
    
    .hero-images    { width: 100% !important; top: auto !important; bottom: 0 !important; height: 240px !important; }
    .hero-img--cat  { right: 45% !important; height: 220px !important; bottom: 0 !important; display: block !important; }
    .hero-img--dog  { right: -5px !important; height: 230px !important; bottom: 0 !important; display: block !important; }
    .hero-img--bowl { display: none !important; }
    
    .hero-bone      { display: none !important; }
    .hero-paw--tr   { display: none !important; }
    .hero-paw--bl   { width: 100px !important; }
}

@media (max-width: 480px) {
    .hero-title  { font-size: clamp(24px, 7.5vw, 34px) !important; }
    .hero-images { height: 200px !important; }
    .hero-img--cat { height: 185px !important; }
    .hero-img--dog { height: 195px !important; }
}
/* ============================================
   HERO FIXES v3
   ============================================ */

/* Title smaller so line 2 fits: "Kochamy jeszcze bardziej." */
.hero-title {
    font-size: 46px !important;
    line-height: 1.1 !important;
}
@media (min-width: 1280px) {
    .hero-title { font-size: 52px !important; }
}
@media (max-width: 1200px) {
    .hero-title { font-size: 40px !important; }
}
@media (max-width: 1024px) {
    .hero-title { font-size: 34px !important; }
}
@media (max-width: 768px) {
    .hero-title { font-size: clamp(24px, 7.5vw, 36px) !important; }
}

/* Widen hero content slightly so the long second line fits */
.hero-content {
    max-width: 56% !important;
}
@media (max-width: 1024px) {
    .hero-content { max-width: 52% !important; }
}
@media (max-width: 768px) {
    .hero-content { max-width: 100% !important; }
}

/* Paw prints - much smaller and more subtle */
.hero-paw {
    width: 110px !important;
    opacity: 0.18 !important;
}
.hero-paw--tr {
    top: 5% !important;
    right: 2% !important;
}
.hero-paw--bl {
    bottom: 20% !important;
    left: 0.5% !important;
}

/* Bowl - shift right towards the dog */
.hero-img--bowl {
    right: 8% !important;
    bottom: -5px !important;
    height: 130px !important;
    z-index: 3 !important;
}
/* ============================================
   HERO FIX v4 — Mobile animals & title fix
   ============================================ */

/* --- Desktop: title still 3 lines? Reduce font + widen content --- */
.hero-title {
    font-size: 42px !important;
    line-height: 1.12 !important;
}
@media (min-width: 1280px) {
    .hero-title    { font-size: 50px !important; }
    .hero-content  { max-width: 58% !important; }
}
@media (min-width: 1400px) {
    .hero-title    { font-size: 56px !important; }
}
@media (max-width: 1200px) {
    .hero-title    { font-size: 38px !important; }
    .hero-content  { max-width: 55% !important; }
}
@media (max-width: 1024px) {
    .hero-title    { font-size: 32px !important; }
    .hero-content  { max-width: 52% !important; }
}

/* --- Mobile: completely different layout approach --- */
@media (max-width: 768px) {
    /* Section has fixed height, not padding-based */
    .hero-section {
        min-height: 0 !important;
        padding-top: 28px !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        height: auto !important;
    }

    /* Content block sits on top of images */
    .hero-content {
        position: relative !important;
        z-index: 6 !important;
        max-width: 100% !important;
        text-align: left !important;
        padding-bottom: 0 !important;
    }

    /* Images strip — at the bottom, tight */
    .hero-images {
        position: relative !important;
        width: 100% !important;
        height: 200px !important;
        top: auto !important;
        bottom: auto !important;
        display: block !important;
        overflow: visible !important;
        margin-top: 16px !important;
    }

    /* Cat — left side of image strip */
    .hero-img--cat {
        position: absolute !important;
        left: 5% !important;
        right: auto !important;
        bottom: 0 !important;
        height: 195px !important;
        width: auto !important;
        display: block !important;
        transform: none !important;
    }

    /* Dog — right side */
    .hero-img--dog {
        position: absolute !important;
        right: -5px !important;
        left: auto !important;
        bottom: 0 !important;
        height: 210px !important;
        width: auto !important;
        display: block !important;
    }

    /* Bowl — hidden on mobile */
    .hero-img--bowl { display: none !important; }

    /* Wave sits at bottom of images strip */
    .custom-shape-divider-bottom-1681234567 {
        position: relative !important;
        bottom: auto !important;
        margin-top: -8px !important;
    }
    .custom-shape-divider-bottom-1681234567 img {
        width: 100% !important;
        height: auto !important;
    }

    /* Hero container: normal flow */
    .hero-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: auto !important;
    }
}

@media (max-width: 480px) {
    .hero-images   { height: 170px !important; }
    .hero-img--cat { height: 165px !important; }
    .hero-img--dog { height: 175px !important; }
    .hero-title    { font-size: clamp(22px, 7vw, 32px) !important; }
}
/* ============================================
   HERO MOBILE — FULL REBUILD (MATCHES FIGMA)
   ============================================ */
@media (max-width: 768px) {
    /* Section: fixed tall so animals fit at bottom */
    .hero-section {
        min-height: 100svh !important;
        min-height: 620px !important;
        padding-top: 28px !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        display: block !important; /* Not flex so we can layer absolute kids */
        position: relative !important;
    }

    /* Container: just the text block at the top */
    .hero-container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: auto !important;
    }

    /* Content block: left-aligned, top of section */
    .hero-content {
        position: relative !important;
        z-index: 6 !important;
        max-width: 100% !important;
        text-align: left !important;
        padding-bottom: 16px !important;
    }

    /* Title: smaller, left-aligned */
    .hero-title {
        font-size: clamp(26px, 7vw, 34px) !important;
        line-height: 1.1 !important;
        margin-bottom: 12px !important;
    }

    /* Accent + subtitle */
    .hero-accent   { font-size: clamp(22px, 6vw, 28px) !important; }
    .hero-subtitle { font-size: 14px !important; margin-bottom: 20px !important; }

    /* Buttons: stacked, full width */
    .hero-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 340px !important;
    }
    .hero-buttons .btn {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }

    /* Images container: absolute at bottom of section */
    .hero-images {
        position: absolute !important;
        bottom: 30px !important;  /* above the wave */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 220px !important;
        top: auto !important;
        z-index: 2 !important;
        display: block !important;
        margin-top: 0 !important;
    }

    /* Cat: left side */
    .hero-img--cat {
        position: absolute !important;
        left: 5% !important;
        right: auto !important;
        bottom: 0 !important;
        height: 180px !important;
        width: auto !important;
        display: block !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Dog: right side */
    .hero-img--dog {
        position: absolute !important;
        right: -5px !important;
        left: auto !important;
        bottom: 0 !important;
        height: 215px !important;
        width: auto !important;
        display: block !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Bowl: visible on mobile, between cat and dog */
    .hero-img--bowl {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        bottom: 0px !important;
        height: 70px !important;
        width: auto !important;
        z-index: 3 !important;
    }

    /* Wave: at the very bottom */
    .custom-shape-divider-bottom-1681234567 {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 4 !important;
    }
    .custom-shape-divider-bottom-1681234567 img {
        width: 100% !important;
        height: auto !important;
    }

    /* Decor: hide bones, keep paws tiny */
    .hero-bone { display: none !important; }
    .hero-paw  { width: 80px !important; opacity: 0.15 !important; }
    .hero-paw--tr { display: none !important; }
}

@media (max-width: 480px) {
    .hero-images   { height: 190px !important; bottom: 24px !important; }
    .hero-img--cat { height: 155px !important; }
    .hero-img--dog { height: 185px !important; }
    .hero-img--bowl { height: 55px !important; }
    .hero-title    { font-size: clamp(22px, 6.5vw, 28px) !important; }
}
/* ============================================
   HERO FINAL TWEAKS
   ============================================ */

/* Fix title to 45px so line 2 fits */
.hero-title { font-size: 45px !important; }
@media (min-width: 1400px) { .hero-title { font-size: 54px !important; } }
@media (max-width: 1200px) { .hero-title { font-size: 38px !important; } }
@media (max-width: 1024px) { .hero-title { font-size: 32px !important; } }

/* ---- PAW CLUSTERS ---- */
/* shared */
.hero-paw {
    position: absolute !important;
    pointer-events: none !important;
    opacity: 0.22 !important;
    width: 90px !important;
    height: auto !important;
}

/* TOP-RIGHT cluster — 3 paws staggered diagonally */
.hero-paw--tr-1 {
    top: 4% !important; right: 5% !important; left: auto !important;
    transform: rotate(20deg) !important;
    width: 90px !important;
}
.hero-paw--tr-2 {
    top: 13% !important; right: 2% !important; left: auto !important;
    transform: rotate(10deg) !important;
    width: 75px !important;
}
.hero-paw--tr-3 {
    top: 22% !important; right: 7% !important; left: auto !important;
    transform: rotate(30deg) !important;
    width: 65px !important;
}

/* BOTTOM-LEFT cluster — 3 paws staggered diagonally */
.hero-paw--bl-1 {
    bottom: 20% !important; top: auto !important; left: 1% !important;
    transform: rotate(-15deg) !important;
    width: 90px !important;
}
.hero-paw--bl-2 {
    bottom: 10% !important; top: auto !important; left: 4% !important;
    transform: rotate(-5deg) !important;
    width: 75px !important;
}
.hero-paw--bl-3 {
    bottom: 28% !important; top: auto !important; left: 7% !important;
    transform: rotate(-25deg) !important;
    width: 65px !important;
}

/* Hide on mobile */
@media (max-width: 768px) {
    .hero-paw--tr-1, .hero-paw--tr-2, .hero-paw--tr-3 { display: none !important; }
    .hero-paw--bl-1 { display: block !important; width: 60px !important; }
    .hero-paw--bl-2, .hero-paw--bl-3 { display: none !important; }
}
/* ============================================
   HERO MOBILE v5 — Side-by-side like desktop
   + Paws more visible
   ============================================ */

/* Make paws more expressive */
.hero-paw { opacity: 0.35 !important; }

/* MOBILE: same side-by-side layout as desktop, just smaller */
@media (max-width: 768px) {
    .hero-section {
        min-height: 580px !important;
        padding-top: 30px !important;
        padding-bottom: 0 !important;
        display: block !important;
        position: relative !important;
        overflow: visible !important;}

    /* Container: just carries the text, left-aligned */
    .hero-container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: auto !important;
        flex-direction: row !important;
        align-items: flex-start !important;
    }

    /* Text: left side, 60% width */
    .hero-content {
        position: relative !important;
        z-index: 6 !important;
        max-width: 62% !important;
        text-align: left !important;
        padding-bottom: 0 !important;
    }

    /* Title: 3 lines is fine on mobile */
    .hero-title {
        font-size: clamp(24px, 6.5vw, 32px) !important;
        line-height: 1.1 !important;
        margin-bottom: 10px !important;
    }
    .hero-accent   { font-size: clamp(20px, 5.5vw, 26px) !important; }
    .hero-subtitle { font-size: 13px !important; margin-bottom: 18px !important; }

    /* Buttons: stacked, limited width */
    .hero-buttons {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    .hero-buttons .btn {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
    }

    /* Images: absolute RIGHT side, full height — like desktop */
    .hero-images {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 55% !important;
        height: 100% !important;
        left: auto !important;
        pointer-events: none !important;
        z-index: 2 !important;
        display: block !important;
        margin-top: 0 !important;
    }

    /* Cat: left within images area */
    .hero-img--cat {
        position: absolute !important;
        left: 0% !important;
        right: auto !important;
        bottom: 0 !important;
        height: 65% !important;
        width: auto !important;
        display: block !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Dog: right side */
    .hero-img--dog {
        position: absolute !important;
        right: -5px !important;
        left: auto !important;
        bottom: 0 !important;
        height: 80% !important;
        width: auto !important;
        display: block !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Bowl: at the bottom between them */
    .hero-img--bowl {
        display: block !important;
        position: absolute !important;
        right: 5% !important;
        left: auto !important;
        bottom: 0px !important;
        height: 55px !important;
        width: auto !important;
        z-index: 3 !important;
        transform: none !important;
    }

    /* Wave: absolute at bottom */
    .custom-shape-divider-bottom-1681234567 {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 4 !important;
    }

    /* Paws on mobile: just bottom-left, small */
    .hero-paw--tr-1, .hero-paw--tr-2, .hero-paw--tr-3 { display: none !important; }
    .hero-paw--bl-1 { display: block !important; width: 65px !important; bottom: 22% !important; left: 0 !important; }
    .hero-paw--bl-2 { display: block !important; width: 52px !important; bottom: 13% !important; left: 3% !important; }
    .hero-paw--bl-3 { display: none !important; }
}

@media (max-width: 480px) {
    .hero-section   { min-height: 520px !important; }
    .hero-img--dog  { height: 72% !important; }
    .hero-img--cat  { height: 58% !important; }
    .hero-title     { font-size: clamp(20px, 6vw, 28px) !important; }
}
/* ============================================
   HERO MOBILE v6 — FINAL (matches Figma)
   Text top → Buttons → Animals at bottom
   ============================================ */
@media (max-width: 768px) {
    /* Full viewport height section */
    .hero-section {
        min-height: 100svh !important;
        min-height: 620px !important;
        padding-top: 32px !important;
        padding-bottom: 0 !important;
        position: relative !important;
        display: block !important;
        overflow: visible !important;}

    /* Hero container: normal block flow */
    .hero-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-top: 0 !important;
        padding-bottom: 260px !important; /* reserve space so buttons don't overlap animals */
        min-height: auto !important;
    }

    /* Content: full width, left-aligned */
    .hero-content {
        position: relative !important;
        z-index: 6 !important;
        max-width: 100% !important;
        text-align: left !important;
        padding-bottom: 0 !important;
    }

    /* Title: 3 lines is fine */
    .hero-title {
        font-size: clamp(26px, 7vw, 34px) !important;
        line-height: 1.1 !important;
        margin-bottom: 10px !important;
    }
    .hero-accent   { font-size: clamp(20px, 5.5vw, 26px) !important; }
    .hero-subtitle { font-size: 14px !important; margin-bottom: 20px !important; }

    /* Buttons: stacked, full width */
    .hero-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    .hero-buttons .btn {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }

    /* Animals container: absolute at bottom */
    .hero-images {
        position: absolute !important;
        bottom: 35px !important;  /* sit above the wave */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 250px !important;
        top: auto !important;
        z-index: 2 !important;
        display: block !important;
        margin-top: 0 !important;
    }

    /* Cat: left side */
    .hero-img--cat {
        position: absolute !important;
        left: 2% !important;
        right: auto !important;
        bottom: 0 !important;
        height: 200px !important;
        width: auto !important;
        display: block !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Dog: right/center */
    .hero-img--dog {
        position: absolute !important;
        right: 2% !important;
        left: auto !important;
        bottom: 0 !important;
        height: 240px !important;
        width: auto !important;
        display: block !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Bowl: center-right in front */
    .hero-img--bowl {
        display: block !important;
        position: absolute !important;
        right: 18% !important;
        left: auto !important;
        bottom: -5px !important;
        height: 70px !important;
        width: auto !important;
        z-index: 3 !important;
        transform: none !important;
    }

    /* Wave: absolute bottom */
    .custom-shape-divider-bottom-1681234567 {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 4 !important;
    }
    .custom-shape-divider-bottom-1681234567 img {
        width: 100% !important;
        height: auto !important;
    }

    /* Paws: just bottom-left cluster */
    .hero-paw--tr-1, .hero-paw--tr-2, .hero-paw--tr-3 { display: none !important; }
    .hero-paw--bl-1 { display: block !important; width: 65px !important; bottom: 22% !important; left: 0 !important; }
    .hero-paw--bl-2 { display: block !important; width: 52px !important; bottom: 12% !important; left: 3% !important; }
    .hero-paw--bl-3 { display: none !important; }

    /* Bones: hide on mobile */
    .hero-bone { display: none !important; }
}

@media (max-width: 480px) {
    .hero-section      { min-height: 580px !important; }
    .hero-container    { padding-bottom: 230px !important; }
    .hero-images       { height: 220px !important; bottom: 30px !important; }
    .hero-img--dog     { height: 215px !important; }
    .hero-img--cat     { height: 175px !important; }
    .hero-img--bowl    { height: 60px !important; right: 15% !important; }
    .hero-title        { font-size: clamp(22px, 6.5vw, 30px) !important; }
}
/* ============================================
   MOBILE HERO: Cat closer to dog
   ============================================ */
@media (max-width: 768px) {
    /* Cat: shift right to be beside the dog */
    .hero-img--cat {
        left: auto !important;
        right: 40% !important;  /* close to dog's left side */
    }
    /* Dog: slightly more center-right */
    .hero-img--dog {
        right: 0% !important;
    }
    /* Bowl: in front of dog, bottom right */
    .hero-img--bowl {
        right: 5% !important;
    }
}
@media (max-width: 480px) {
    .hero-img--cat { right: 38% !important; }
    .hero-img--bowl { right: 4% !important; }
}
/* ============================================

/* ============================================
   PRODUCTS SECTION — DEFINITIVE FIX
   ============================================ */

/* 1. RESET ANY WOOCOMMERCE DEFAULTS */
.products-section .woocommerce,
.products-section .products-wrapper {
    width: 100% !important;
    overflow: visible !important;
}

/* 2. DESKTOP GRID */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}
ul.products:before, ul.products:after {
    display: none !important;
}

@media (max-width: 1024px) {
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 3. MOBILE CAROUSEL (max-width: 600px) */
@media (max-width: 600px) {
    .products-section .products-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 20px !important;
    }
    .products-section .products-wrapper::-webkit-scrollbar {
        display: none !important;
    }
    
    ul.products {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        width: max-content !important;
    }
}

/* 4. PRODUCT CARD STYLING */
ul.products li.product {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

@media (max-width: 600px) {
    ul.products li.product {
        flex: 0 0 calc(50vw - 25px) !important;
        width: calc(50vw - 25px) !important;
        max-width: calc(50vw - 25px) !important;
    }
}

/* Image */
.product-card__image {
    background: #f5f3ee !important;
    position: relative !important;
}
.product-card__image img {
    width: 100% !important;
    height: 190px !important;
    object-fit: contain !important;
    padding: 16px !important;
    display: block !important;
}
@media (max-width: 600px) {
    .product-card__image img {
        height: 140px !important;
        padding: 10px !important;
    }
}

/* Info */
.product-card__info {
    padding: 15px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* Title */
.product-card__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 10px !important;
    line-height: 1.35 !important;
}
.product-card__title a { color: inherit !important; text-decoration: none !important; }

/* Price */
.product-card__price {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
}
@media (max-width: 600px) {
    .product-card__price { font-size: 16px !important; }
}

/* Weight Label */
.product-card__weight-label {
    font-size: 12px !important;
    color: #888 !important;
    margin-bottom: 5px !important;
}

/* Price Row */
.product-card__price-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

/* Dropdown */
.product-swatch-select {
    padding: 6px 24px 6px 10px !important;
    border-radius: 20px !important;
    border: 1px solid #ddd !important;
    background: #fff url('data:image/svg+xml;utf8,<svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l4 4 4-4" stroke="%23333" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>') no-repeat right 8px center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    cursor: pointer !important;
    min-width: 80px !important;
}
@media (max-width: 600px) {
    .product-swatch-select {
        font-size: 12px !important;
        padding: 4px 20px 4px 8px !important;
        min-width: 65px !important;
    }
}

/* Button */
.product-card__add {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: var(--color-accent) !important;
    color: #fff !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    margin-top: auto !important;
}
.product-card__add:hover { opacity: 0.9 !important; color: #fff !important; }

/* Wishlist */
.product-card__wishlist {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(255,255,255,0.9) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #ccc !important;
}
.product-card__wishlist:hover { color: #e74c3c !important; }
/* ============================================
   PRODUCTS SECTION — MOBILE CAROUSEL FIX
   ============================================ */

/* 3. MOBILE CAROUSEL (max-width: 600px) */
@media (max-width: 600px) {
    .products-section .products-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 20px !important;
    }
    .products-section .products-wrapper::-webkit-scrollbar {
        display: none !important;
    }
    
    .products-section ul.products {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        width: max-content !important;
    }
    
    .products-section ul.products li.product,
    .products-section ul.products li.product-card {
        flex: 0 0 calc(50vw - 25px) !important;
        width: calc(50vw - 25px) !important;
        max-width: calc(50vw - 25px) !important;
    }
}
/* ============================================
   MOBILE CAROUSEL — FINAL POLISH
   ============================================ */
.products-section ul.products li.product,
.products-section ul.products li.product * {
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    /* Make sure cards are exactly half screen and don't overflow */
    .products-section ul.products li.product,
    .products-section ul.products li.product-card {
        flex: 0 0 calc(50vw - 20px) !important;
        width: calc(50vw - 20px) !important;
        max-width: calc(50vw - 20px) !important;
        margin: 0 !important;
        /* prevent internal content from stretching the card */
        overflow: visible !important;}

    /* Price row needs to fit tight space */
    .product-card__price-row {
        gap: 5px !important;
        flex-wrap: wrap !important;
    }

    .product-swatch-select {
        min-width: 60px !important;
        width: auto !important;
        max-width: 100% !important;
        font-size: 11px !important;
        padding: 4px 18px 4px 6px !important;
    }

    .product-card__price {
        font-size: 14px !important;
    }
}
/* ============================================
   MOBILE CAROUSEL — FIX LEFT CUT-OFF
   ============================================ */
@media (max-width: 600px) {
    .products-section ul.products {
        /* Force left alignment so it doesn't center and cut off the left edge */
        justify-content: flex-start !important;
        /* Ensure it starts exactly at the left edge without negative margins */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important; /* Add padding so first card isn't glued to screen edge */
        padding-right: 15px !important;
    }
}
/* ============================================
   MOBILE CAROUSEL — PRICE ROW & PADDING FIX
   ============================================ */
@media (max-width: 600px) {
    /* Give content inside cards more breathing room by reducing padding */
    .product-card__info {
        padding: 10px 8px !important;
        overflow: visible !important;
    }

    /* Price row must not clip */
    .product-card__price-row {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        overflow: visible !important;
        width: 100% !important;
    }

    /* Shrink the dropdown heavily so it fits */
    .product-swatch-select {
        min-width: 0 !important;
        width: auto !important;
        max-width: 65px !important;
        padding: 4px 16px 4px 6px !important;
        font-size: 11px !important;
        flex-shrink: 1 !important;
        background-position: right 4px center !important;
    }

    /* Shrink the price text */
    .product-card__price {
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }

    /* Add to cart button */
    .product-card__add {
        padding: 10px 6px !important;
        font-size: 13px !important;
    }
    
    /* Make the title smaller so it wraps nicer */
    .product-card__title {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
    .product-card__weight-label {
        font-size: 10px !important;
    }
}
/* ============================================
   MOBILE CAROUSEL — SCROLL SNAP FIX
   ============================================ */
@media (max-width: 600px) {
    .products-section .products-wrapper {
        scroll-snap-type: x mandatory !important;
    }
    
    .products-section ul.products li.product,
    .products-section ul.products li.product-card {
        scroll-snap-align: start !important;
        scroll-margin-left: 15px !important; /* Account for the ul padding-left */
    }
}
/* ============================================
   MOBILE CAROUSEL — ULTIMATE FIXED WIDTH FIX
   ============================================ */
@media (max-width: 600px) {
    /* Ensure the wrapper is the boundary */
    .products-section .products-wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        display: block !important;
    }

    /* Force the ul to be flex row, starting from left */
    .products-section .products-wrapper ul.products,
    .woocommerce ul.products {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        width: max-content !important;
        margin: 0 !important;
        padding: 10px 15px 20px 15px !important; /* 15px padding on ends */
        gap: 12px !important;
    }

    /* Force fixed width on every card */
    .products-section .products-wrapper ul.products li.product,
    .woocommerce ul.products li.product {
        flex: 0 0 165px !important;  /* Strict fixed width: ~half of 375px screen minus gaps */
        width: 165px !important;
        max-width: 165px !important;
        min-width: 165px !important; /* Override any WooCommerce min-widths */
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        
        /* Snap perfectly */
        scroll-snap-align: start !important;
    }
}
/* ============================================
   MOBILE CAROUSEL — EXACT MATCH TO MOCKUP
   ============================================ */
@media (max-width: 600px) {
    /* 1. Reset card sizes to be exactly 50% minus gap */
    .products-section .products-wrapper ul.products li.product,
    .woocommerce ul.products li.product {
        flex: 0 0 calc(50% - 6px) !important; /* Exactly half container minus half the 12px gap */
        width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        min-width: 0 !important;
    }

    /* 2. Fix the layout INSIDE the card to match mockup */
    /* Break the price and dropdown onto separate lines */
    .product-card__price-row {
        display: block !important; /* Remove flex so they stack */
        margin-bottom: 15px !important;
    }

    /* Price goes FIRST and LARGE */
    .product-card__price {
        display: block !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        margin-bottom: 8px !important;
    }

    /* Weight label */
    .product-card__weight-label {
        display: block !important;
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    /* Dropdown */
    .product-swatches {
        display: block !important;
    }
    .product-swatch-select {
        width: 100% !important; /* Take full width of its new line, or set max-width */
        max-width: 100px !important;
        font-size: 12px !important;
        padding: 6px 24px 6px 10px !important;
        background-position: right 8px center !important;
    }

    /* Title - adjust to match mockup */
    .product-card__title {
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    /* Add to cart button */
    .product-card__add {
        font-size: 13px !important;
        padding: 10px !important;
        margin-top: 0 !important;
    }
}
/* ============================================
   MOBILE CAROUSEL — BULLETPROOF FIX
   ============================================ */
@media (max-width: 600px) {
    /* 1. Strict card width - absolute pixels guarantee it fits */
    .products-section .products-wrapper ul.products li.product,
    .woocommerce ul.products li.product {
        flex: 0 0 160px !important; 
        width: 160px !important;
        max-width: 160px !important;
        min-width: 160px !important;
        margin: 0 !important;
    }

    /* 2. Reorder price to be ABOVE the dropdown using flex column-reverse */
    .product-card__price-row {
        display: flex !important;
        flex-direction: column-reverse !important; /* Price is 2nd in HTML, this puts it 1st visually! */
        align-items: flex-start !important;
        margin-bottom: 12px !important;
        gap: 8px !important;
    }

    /* 3. Ensure Price is visible and large */
    .product-card__price {
        display: block !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        color: #1a1a1a !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 4. Dropdown */
    .product-swatch-select {
        width: 100% !important;
        max-width: 130px !important;
    }
}
/* ============================================
   ABOUT INGREDIENTS SECTION (TO NIE PRZYPADEK)
   ============================================ */
.about-ingredients-section {
    background: #fff;
    padding: 80px 0 100px;
    position: relative;
    overflow: visible;}

.about-ingredients-grid {
    position: relative;
    z-index: 2;
}

.about-title {
    font-size: 36px !important;
    font-weight: 900 !important;
    margin-bottom: 30px !important;
    color: #1a4f38;
}
.about-title .text-accent {
    color: var(--color-accent);
}

.about-paragraphs {
    color: #333;
    font-size: 15px;
    line-height: 1.6;
}
.about-paragraphs p {
    margin-bottom: 20px;
}
.about-paragraphs strong {
    color: #1a4f38;
    font-weight: 700;
}

/* === DESKTOP LAYOUT === */
@media (min-width: 992px) {
    .about-ingredients-grid {
        display: grid;
        grid-template-columns: 50% 50%;
        min-height: 500px;
    }
    
    .about-ingredients-text {
        grid-column: 1;
        grid-row: 1;
        padding-top: 20px;
        max-width: 480px;
    }

    .about-ingredients-text-right {
        grid-column: 2;
        grid-row: 1;
        padding-top: 260px; /* Push down to sit in the middle of collage */
        padding-left: 60px;
        max-width: 450px;
    }

    .about-ingredients-collage {
        position: absolute;
        top: -40px;
        left: 20%;
        width: 80%;
        z-index: -1;
        pointer-events: none;
    }
    .about-ingredients-collage img {
        width: 100%;
        height: auto;
        display: block;
    }

    .about-features {
        margin-top: 40px;
        max-width: 500px;
        position: relative;
        z-index: 2;
    }
}

/* === MOBILE & TABLET LAYOUT === */
@media (max-width: 991px) {
    .about-ingredients-collage {
        margin: 30px -15px;
        position: relative;
    }
    .about-ingredients-collage img {
        width: 100%;
        height: auto;
        display: block;
        transform: scale(1.1);
    }
    .about-title {
        font-size: 28px !important;
    }
    .about-features {
        margin-top: 60px;
    }
}

/* === LIST STYLES (CO NAS WYRÓŻNIA) === */
.about-features-title {
    font-size: 24px;
    font-weight: 800;
    color: #1a4f38;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.about-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.about-features-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.5;
    color: #444;
}
.about-features-list li strong {
    color: #1a1a1a;
    font-weight: 700;
}

.about-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 16px;
    margin-top: 2px;
}
/* ============================================
   ABOUT INGREDIENTS — DESKTOP COLLAGE TWEAKS
   ============================================ */
@media (min-width: 992px) {
    /* Allow title to fit on one line */
    .about-ingredients-text {
        max-width: 580px !important;
    }
    
    .about-title {
        white-space: nowrap !important;
        font-size: 34px !important;
    }

    /* Move the right text up */
    .about-ingredients-text-right {
        padding-top: 160px !important;
        padding-left: 20px !important;
    }

    /* Make collage huge and shift it left */
    .about-ingredients-collage {
        top: -80px !important;
        left: 5% !important;
        width: 95% !important;
    }
}
/* ============================================
   ABOUT INGREDIENTS — COLLAGE POSITION TWEAKS
   ============================================ */
@media (min-width: 992px) {
    /* 1. Move collage DOWN and slightly RIGHT */
    .about-ingredients-collage {
        top: 60px !important;
        left: 12% !important;
        width: 95% !important;
    }

    /* 2. Push right text further down so it sits BELOW the meat and spoon */
    .about-ingredients-text-right {
        padding-top: 300px !important;
        padding-left: 20px !important;
    }

    /* 3. Add margin bottom to grid to make room for collage */
    .about-ingredients-grid {
        margin-bottom: 80px !important;
    }
}
/* ============================================
   ABOUT INGREDIENTS — COLLAGE POSITION TWEAKS 2
   ============================================ */
@media (min-width: 992px) {
    /* Make the collage larger and move it significantly to the left */
    .about-ingredients-collage {
        width: 115% !important;  /* Scale up to match mockup size */
        left: -12% !important;   /* Move left so the kibble aligns with text left edge */
        top: 0px !important;     /* Adjust top so the kibble sits right below the text */
    }

    /* Since we scaled the collage, the right text needs to move slightly */
    .about-ingredients-text-right {
        padding-top: 260px !important;
        padding-left: 60px !important;
    }
}
/* ============================================
   ABOUT INGREDIENTS — COLLAGE FINE-TUNING
   ============================================ */
@media (min-width: 992px) {
    /* 1. Scale down slightly and move back to the right */
    .about-ingredients-collage {
        width: 105% !important; 
        left: -5% !important;   
        top: 20px !important;     
    }

    /* 2. Push right text down so it doesn't overlap the meat/spoon */
    .about-ingredients-text-right {
        padding-top: 320px !important;
        padding-left: 50px !important;
    }
    
    /* 3. Push the features list down so the big meat chunk doesn't overlap the title */
    .about-features {
        margin-top: 100px !important;
    }
}
/* ============================================
   ABOUT INGREDIENTS — COLLAGE FINAL LIFT
   ============================================ */
@media (min-width: 992px) {
    /* Lift the collage UP by 60px */
    .about-ingredients-collage {
        top: -40px !important;     
    }

    /* Lift the right text UP so it sits correctly under the spoon */
    .about-ingredients-text-right {
        padding-top: 220px !important;
    }
    
    /* Bring the features list back up a bit since the meat chunk moved up */
    .about-features {
        margin-top: 50px !important;
    }
}
/* ============================================
   ABOUT INGREDIENTS — MOBILE SPLIT LAYOUT
   ============================================ */
.mobile-ingr {
    display: none;
    width: 110%; /* slightly wider to match the edge-to-edge look */
    max-width: 450px;
    height: auto;
    margin: 20px -5%;
}

@media (max-width: 991px) {
    /* Hide the giant desktop collage */
    .desktop-only {
        display: none !important;
    }
    
    /* Show the 3 sliced images */
    .mobile-ingr {
        display: block !important;
    }
    
    /* Center all the text and titles */
    .about-ingredients-text, 
    .about-ingredients-text-right {
        text-align: center !important;
    }
    
    .about-title {
        text-align: center !important;
        font-size: 28px !important;
        white-space: normal !important; /* Allow wrapping on mobile */
    }
    
    .about-paragraphs p {
        margin-bottom: 20px;
    }

    /* Specific margins for the sliced images to match mockup */
    .mobile-ingr-1 {
        margin: 10px -5% 30px; /* between P1 and P2 */
    }
    .mobile-ingr-2 {
        margin: 30px -5% 30px; /* inside P2 and P3 */
    }
    .mobile-ingr-3 {
        margin: 50px -5% 0; /* below the list */
    }
    
    /* Center the features title */
    .about-features-title {
        text-align: center !important;
    }
}
/* ============================================
   ABOUT INGREDIENTS — TEXT REFINEMENTS
   ============================================ */
/* Default (Desktop) */
.mobile-text {
    display: none !important;
}
.desktop-text {
    display: block !important;
}
.mobile-break {
    display: none !important;
}

/* Mobile */
@media (max-width: 991px) {
    .desktop-text {
        display: none !important;
    }
    .mobile-text {
        display: block !important;
    }
    .mobile-break {
        display: block !important;
    }
    
    /* Fine-tune typography for mobile */
    .about-paragraphs {
        font-size: 13px !important; /* Smaller text for mobile */
        padding: 0 10px;
    }
    .about-paragraphs p {
        margin-bottom: 15px !important;
    }
    
    .about-features-title {
        font-size: 20px !important;
        margin-bottom: 24px !important;
    }
    
    .about-features-list li {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }
    
    .about-icon {
        width: 24px !important;
        height: 24px !important;
        margin-right: 12px !important;
    }
}
/* ============================================
   ABOUT INGREDIENTS — MOBILE TYPOGRAPHY FIX 2
   ============================================ */
@media (max-width: 991px) {
    /* Make title fit in 2 lines exactly */
    .about-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
    }
    
    /* Make paragraph fit in 5 lines by giving it full width and adjusting size */
    .about-paragraphs {
        font-size: 13px !important;
        line-height: 1.5 !important;
        padding: 0 !important; /* Remove side padding to give text more room */
    }
}
/* ============================================
   ABOUT INGREDIENTS — ULTIMATE 3-PIECE LAYOUT
   ============================================ */
/* Hide old collage */
.about-ingredients-collage { display: none !important; }

/* Base for pieces */
.ingr-piece {
    display: block;
    width: 110%;
    max-width: 450px;
    height: auto;
    margin: 20px -5%;
}

/* Base for grid */
.about-ingredients-grid {
    position: relative;
    z-index: 2;
}

/* === DESKTOP === */
@media (min-width: 992px) {
    .about-ingredients-grid {
        display: grid !important;
        grid-template-columns: 50% 50%;
        margin-bottom: 40px !important;
    }

    .about-ingredients-col-left {
        max-width: 580px;
        padding-top: 20px;
    }
    
    .about-ingredients-col-right {
        padding-top: 180px !important;
        padding-left: 80px !important;
        max-width: 500px;
    }
    
    .about-features {
        margin-top: 0 !important;
        max-width: 500px;
    }
    
    /* Absolute position the 3 pieces */
    .ingr-piece {
        position: absolute !important;
        margin: 0 !important;
        z-index: 1;
        pointer-events: none;
    }
    
    .ingr-spoon {
        top: 0;
        right: -60px;
        width: 550px !important;
        max-width: 550px !important;
    }
    
    .ingr-meat {
        top: 240px;
        left: -50px;
        width: 400px !important;
        max-width: 400px !important;
    }
    
    .ingr-veggies {
        bottom: -20px;
        right: -80px;
        width: 550px !important;
        max-width: 550px !important;
    }
}

/* === MOBILE === */
@media (max-width: 991px) {
    .ingr-piece {
        position: relative !important;
    }
    
    /* Flex reordering */
    .about-ingredients-section .container {
        display: flex;
        flex-direction: column;
    }
    
    .about-ingredients-grid { 
        display: contents !important; 
    }
    
    .about-ingredients-col-left { order: 1; text-align: center !important; }
    .ingr-spoon { order: 2; margin: 10px -5% 20px !important; }
    .about-ingredients-col-right { order: 3; text-align: center !important; }
    .ingr-meat { order: 4; margin: 20px -5% 30px !important; }
    .about-features { order: 5; margin-top: 20px !important; }
    .ingr-veggies { order: 6; margin: 30px -5% 0 !important; }
}
/* ============================================
   ABOUT INGREDIENTS — 3-PIECE SIZES FIX
   ============================================ */
@media (min-width: 992px) {
    /* Right text needs to be lower to avoid the spoon */
    .about-ingredients-col-right {
        padding-top: 250px !important;
        padding-left: 20px !important;
    }

    /* 1. Spoon (Top Right) */
    .ingr-spoon {
        top: -60px !important;
        right: -30px !important;
        width: 450px !important;
        max-width: 450px !important;
    }
    
    /* 2. Big Meat (Center Left, but between the columns) */
    .ingr-meat {
        top: 220px !important;
        left: 25% !important; /* Move it to the center between texts */
        width: 400px !important;
        max-width: 400px !important;
    }
    
    /* 3. Veggies (Bottom Right) */
    .ingr-veggies {
        bottom: 0px !important;
        right: 0px !important;
        width: 480px !important;
        max-width: 480px !important;
    }
    
    /* Adjust grid margin to accommodate veggies */
    .about-ingredients-grid {
        margin-bottom: 80px !important;
    }
    .about-features {
        margin-top: 40px !important;
    }
}
/* ============================================
   ABOUT INGREDIENTS — ULTIMATE GRID APPROACH
   ============================================ */
/* Hide old elements */
.about-ingredients-collage, .mobile-ingr, .ingr-piece, .about-ingredients-grid { display: none !important; }

.about-ingredients-section {
    padding: 80px 0;
    overflow: visible;}

.about-grid-layout img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* === DESKTOP === */
@media (min-width: 992px) {
    .about-grid-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0px 40px;
        align-items: center; /* Vertically center items in their row */
    }

    /* ROW 1 */
    .about-cell-text-1 { padding-right: 40px; align-self: start; }
    .about-cell-img-1 { display: flex; justify-content: flex-end; align-self: start; }
    .about-cell-img-1 img { max-width: 450px; margin-top: -30px; margin-right: -40px; }
    
    /* ROW 2 */
    .about-cell-img-2 { display: flex; justify-content: flex-end; padding-right: 10px; }
    .about-cell-img-2 img { max-width: 380px; }
    .about-cell-text-2 { padding-left: 20px; }
    
    /* ROW 3 */
    .about-cell-text-3 { padding-top: 40px; padding-right: 20px; align-self: start; }
    .about-cell-img-3 { display: flex; justify-content: flex-start; align-items: flex-end; }
    .about-cell-img-3 img { max-width: 480px; margin-bottom: -40px; margin-left: 20px; }
}

/* === MOBILE === */
@media (max-width: 991px) {
    .about-grid-layout {
        display: flex;
        flex-direction: column;
    }
    
    .about-cell-text-1, 
    .about-cell-text-2 { text-align: center !important; }
    
    /* Flex reordering */
    .about-cell-text-1 { order: 1; }
    
    .about-cell-img-1  { order: 2; margin: 10px -5% 30px; width: 110%; }
    .about-cell-img-1 img { width: 100%; max-width: 400px; margin: 0 auto; }
    
    .about-cell-text-2 { order: 3; }
    
    .about-cell-img-2  { order: 4; margin: 20px -5% 30px; width: 110%; }
    .about-cell-img-2 img { width: 100%; max-width: 400px; margin: 0 auto; }
    
    .about-cell-text-3 { order: 5; margin-top: 20px; }
    
    .about-cell-img-3  { order: 6; margin: 40px -5% 0; width: 110%; }
    .about-cell-img-3 img { width: 100%; max-width: 450px; margin: 0 auto; }
}
/* ============================================
   ABOUT INGREDIENTS — PUSH IMAGES TO EDGES
   ============================================ */
@media (min-width: 992px) {
    /* ROW 1: Push Spoon to the right edge */
    .about-cell-img-1 { 
        justify-content: flex-end !important; 
    }
    .about-cell-img-1 img { 
        margin-right: -80px !important; 
        max-width: 480px !important;
    }
    
    /* ROW 2: Push Meat slightly to the left edge */
    .about-cell-img-2 { 
        justify-content: center !important; /* Move it from flex-end (center gap) towards the left */
        padding-right: 0 !important;
    }
    .about-cell-img-2 img { 
        margin-left: -40px !important; 
        max-width: 400px !important;
    }
    
    /* ROW 3: Push Veggies to the right edge */
    .about-cell-img-3 { 
        justify-content: flex-end !important; /* Move it to the right edge */
    }
    .about-cell-img-3 img { 
        margin-left: 0 !important; 
        margin-right: -60px !important;
        max-width: 500px !important;
    }
}
/* ============================================
   ABOUT INGREDIENTS — USER'S PERFECT MARGINS
   ============================================ */
@media (min-width: 992px) {
    /* 1. Spoon: user says -200px is perfect */
    .about-cell-img-1 { 
        justify-content: flex-end !important; 
    }
    .about-cell-img-1 img { 
        margin-right: -200px !important; 
    }
    
    /* 2. Meat: remove negative margins, align to the inner edge (flex-end) */
    .about-cell-img-2 { 
        justify-content: flex-end !important; 
    }
    .about-cell-img-2 img { 
        margin-left: 0 !important; 
        margin-right: 0 !important; 
    }
    
    /* 3. Veggies: remove negative margins, align to the inner edge (flex-start) */
    .about-cell-img-3 { 
        justify-content: flex-start !important; 
    }
    .about-cell-img-3 img { 
        margin-left: 0 !important; 
        margin-right: 0 !important;
        margin-bottom: -40px !important; /* Keep it slightly lower to match list height */
    }
}
/* ============================================
   ABOUT INGREDIENTS — SIMPLIFIED ALIGNMENT
   ============================================ */
@media (min-width: 992px) {
    /* Everything should just naturally align to the LEFT (flex-start) of its grid column! */
    
    /* 1. Spoon (Right column) -> align left */
    .about-cell-img-1 { 
        justify-content: flex-start !important; 
    }
    .about-cell-img-1 img { 
        margin-right: 0 !important; 
        margin-left: 0 !important;
        margin-top: -30px !important;
        max-width: 500px !important;
    }
    
    /* 2. Meat (Left column) -> align left (under the first paragraph) */
    .about-cell-img-2 { 
        justify-content: flex-start !important; 
    }
    .about-cell-img-2 img { 
        margin-left: 0 !important; 
        margin-right: 0 !important;
        max-width: 450px !important; 
    }
    
    /* 3. Veggies (Right column) -> align left (under the second paragraph) */
    .about-cell-img-3 { 
        justify-content: flex-start !important; 
    }
    .about-cell-img-3 img { 
        margin-left: 0 !important; 
        margin-right: 0 !important;
        margin-bottom: -40px !important;
        max-width: 550px !important;
    }
}
/* ============================================
   HEADER ICONS FIX
   ============================================ */
.burger-btn {
    background: transparent !important;
    border: none !important;
    color: var(--color-white) !important;
    padding: 0 !important;
    cursor: pointer;
}
.header-action-btn svg {
    display: inline-block;
    vertical-align: middle;
}
/* ============================================
   MOBILE HEADER REORDERING
   ============================================ */
@media (max-width: 991px) {
    .header-actions {
        display: contents !important; /* Ungroup the items for flex reordering */
    }
    
    .header-inner {
        position: relative; /* For absolute logo centering */
    }
    
    /* Reorder items */
    .burger-btn { order: 1; }
    
    .header-actions > *:nth-child(1) { 
        order: 2; 
        margin-right: auto !important; /* Pushes the rest to the right */
        margin-left: 16px;
    }
    
    .logo {
        position: absolute !important;
        left: 50%;
        transform: translateX(-50%);
        order: 3; /* Fallback */
    }
    
    .header-actions > *:nth-child(2) { 
        order: 4; 
        margin-right: 16px;
    }
    
    .cart-btn { 
        order: 5; 
    }
}
/* ============================================
   FEATURES PATTERN FIX
   ============================================ */
.feature-card {
    background-image: url('../img/figma/pattern.png') !important;
    background-repeat: repeat;
    background-size: 200px; /* Adjust scale of pattern if needed */
    background-blend-mode: overlay; /* Or normal, depending on how transparent the figma file is */
}
/* ============================================
   CUSTOM VARIATION DROPDOWN
   ============================================ */
.custom-dropdown {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

/* Closed state */
.custom-dropdown__selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #EAEAEA; /* light gray border */
    border-radius: 8px; /* pill shape */
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    transition: all 0.2s ease;
}

.custom-dropdown__selected:hover {
    border-color: var(--color-primary);
}

.custom-dropdown__selected svg {
    transition: transform 0.2s ease;
}

.custom-dropdown.is-open .custom-dropdown__selected svg {
    transform: rotate(180deg);
}

/* Open state list */
.custom-dropdown__list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.custom-dropdown.is-open .custom-dropdown__list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* List items */
.custom-dropdown__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    transition: background 0.2s;
}

.custom-dropdown__item:not(:last-child) {
    border-bottom: 1px solid #F5F5F5;
}

.custom-dropdown__item:hover {
    background: #F8F9FA;
}

/* Custom Radio Button inside dropdown */
.custom-dropdown__radio {
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.custom-dropdown__item.active .custom-dropdown__radio {
    border-color: var(--color-primary);
}

.custom-dropdown__item.active .custom-dropdown__radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border-radius: 50%;
}
/* ============================================
   CUSTOM DROPDOWN SIZE FIX
   ============================================ */
.custom-dropdown {
    width: auto !important;
    flex: 0 0 95px !important; /* Make it exactly the size needed */
    margin-bottom: 0 !important;
}

.custom-dropdown__selected {
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

.custom-dropdown__list {
    border-radius: 6px !important;
}

.custom-dropdown__item {
    padding: 8px 10px !important;
    font-size: 12px !important;
}

.custom-dropdown__radio {
    width: 14px !important;
    height: 14px !important;
}

.custom-dropdown__item.active .custom-dropdown__radio::after {
    width: 8px !important;
    height: 8px !important;
}

/* Ensure price is big like mockup */
.product-card__price {
    font-size: 16px !important; /* or 18px */
    font-weight: 700 !important;
    color: var(--color-text) !important;
}
/* ============================================
   CUSTOM DROPDOWN Z-INDEX FIX
   ============================================ */
.custom-dropdown {
    z-index: 99 !important; /* Force this wrapper above the button */
}

.custom-dropdown__list {
    background-color: #ffffff !important; /* Ensure solid white background */
    z-index: 100 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; /* A bit stronger shadow to stand out */
}

.custom-dropdown__item {
    background-color: #ffffff !important;
}

.custom-dropdown__item:hover {
    background-color: #F8F9FA !important;
}
/* ============================================
   MOBILE DROPDOWN FIX
   ============================================ */
.custom-dropdown {
    height: max-content !important; /* Prevent it from stretching vertically in flex container */
    max-height: 35px !important;
}

@media (max-width: 767px) {
    .custom-dropdown {
        flex: 0 0 auto !important; /* don't hardcode width on mobile if it wraps */
        width: 100% !important;
        max-width: 120px !important; /* give it a bit more room so it doesn't wrap */
    }
    
    .custom-dropdown__item {
        white-space: nowrap !important;
    }
}
/* ============================================
   EXTRA MOBILE DROPDOWN FIXES
   ============================================ */
.custom-dropdown__selected span {
    white-space: nowrap !important;
}

@media (max-width: 991px) {
    .custom-dropdown {
        min-width: 100px !important;
        flex: 0 0 100px !important;
    }
    
    .custom-dropdown__list {
        top: 35px !important; /* Force exact positioning */
    }
}
/* ============================================
   Z-INDEX FIX FOR PRODUCT CARDS
   ============================================ */
.product-card__price-row {
    position: relative !important;
    z-index: 999 !important; /* Force the entire row to sit above the button */
}

.custom-dropdown {
    position: relative !important;
    z-index: 1000 !important;
}

.product-card__add {
    position: relative !important;
    z-index: 1 !important; /* Force button to sit below */
}

/* ============================================
   FORCE REMOVE OVERFLOW HIDDEN FROM CARDS
   ============================================ */
ul.products li.product,
.product-card,
.product-card__content {
    overflow: visible !important;
}

/* Ensure the image still has rounded corners at the top since overflow is visible now */
.product-card__image-link img {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}
/* ============================================
   FORCE DROPDOWN LIST VISIBILITY
   ============================================ */
.custom-dropdown__list {
    max-height: none !important;
    overflow: visible !important;
}

.custom-dropdown__item {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
}

/* ============================================
   FIX CLIPPED DROPDOWN IN MOBILE SCROLL CONTAINER
   ============================================ */
@media (max-width: 991px) {
    /* The horizontal scroll container clips the dropdown because you can't mix overflow-x: auto and overflow-y: visible */
    /* Solution: Add padding to the bottom so the dropdown has room to render INSIDE the scroll container! */
    .products-section .products-wrapper,
    .woocommerce ul.products,
    .products-grid {
        padding-bottom: 150px !important;
        margin-bottom: -150px !important; /* pull next section back up if possible, or just leave space */
    }
}
/* ============================================
   FIX HERO IMAGES (BOWL ON TOP & CENTERED)
   ============================================ */


@media (max-width: 768px) {
    .hero-img--cat {
        right: 47% !important; /* Move left */
    }
    .hero-img--dog {
        right: 7% !important; /* Move left */
    }
    .hero-img--bowl {
        right: 25% !important; /* Move left */
        bottom: 0 !important; /* Touch the wave */
    }
}
@media (max-width: 480px) {
    .hero-img--cat {
        right: 45% !important;
    }
    .hero-img--dog {
        right: 2% !important;
    }
    .hero-img--bowl {
        right: 20% !important;
    }
}

/* ============================================
   RESTORE HERO SECTION OVERFLOW (FIX BOWL SPILL)
   ============================================ */
.hero-section {
    overflow: hidden !important;
}

/* Also ensure the wave is properly positioned at the very bottom */
.custom-shape-divider-bottom-1681234567 {
    bottom: -1px !important; /* Slight negative to avoid 1px gaps */
}
/* ============================================
   SHOP CATALOG LAYOUT (SIDEBAR + PRODUCTS)
   ============================================ */
.shop-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.shop-sidebar {
    flex: 0 0 260px;
    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}

/* Base styling for any widget in the sidebar (like Premmerce Filter) */
.shop-sidebar .widget {
    margin-bottom: 30px;
}
.shop-sidebar .widget-title,
.shop-sidebar h2.widgettitle,
.shop-sidebar h3.widgettitle {
    font-size: 20px;
    font-weight: 700;
    color: #282828;
    margin-bottom: 24px;
}

/* Filter items (Premmerce usually uses lists) */
.shop-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.shop-sidebar li {
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--color-text);
}

/* Accordion headers (if Premmerce outputs them) */
.premmerce-filter-widget .widget-title,
.premmerce-filter-widget h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    padding-bottom: 12px;
    border-bottom: 1px solid #EAEAEA;
    margin-bottom: 16px;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.premmerce-filter-widget .widget-title::after,
.premmerce-filter-widget h4::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(45deg); /* Point straight down */
    transition: transform 0.3s;
}

/* Checkboxes inside the filter */
.premmerce-filter-widget input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #C0C0C0;
    border-radius: 4px;
    margin-right: 12px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
}
.premmerce-filter-widget input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.premmerce-filter-widget input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.premmerce-filter-widget label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}
.shop-products {
    flex: 1;
}

@media (max-width: 768px) {
    .shop-layout {
        flex-direction: column;
    }
    .shop-sidebar {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ============================================
   BREADCRUMBS & SIDEBAR TITLE
   ============================================ */
.shop-breadcrumbs {
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 24px;
}
.shop-breadcrumbs a {
    color: #999;
    text-decoration: none;
}
.shop-breadcrumbs .delim {
    color: #999;
    margin: 0 8px;
}
.shop-sidebar-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 32px;
}
/* ============================================
   SORTING DROPDOWN
   ============================================ */
.woocommerce-result-count {
    display: none !important;
}
.woocommerce-ordering {
    float: right;
    margin-bottom: 24px;
}
.woocommerce-ordering select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #EAEAEA;
    background: #fff;
    padding: 10px 40px 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    color: var(--color-primary);
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23054330" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
}
.woocommerce-ordering::after {
    clear: both;
    display: table;
    content: '';
}.shop-products {
    display: flex;
    flex-direction: column;
}
.woocommerce-ordering {
    align-self: flex-end;
    float: none;
}

/* ============================================
   SINGLE PRODUCT CUSTOM TABS
   ============================================ */
.woocommerce-tabs {
    margin-top: 60px;
    padding: 0 15px;
    clear: both;
}
.woocommerce-tabs ul.tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    display: flex;
    gap: 40px;
    border-bottom: 1px solid #EAEAEA;
    overflow-x: auto;
}
.woocommerce-tabs ul.tabs li {
    padding: 0;
    margin: 0;
    white-space: nowrap;
}
.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    position: relative;
    transition: color 0.3s;
}
.woocommerce-tabs ul.tabs li.active a {
    color: var(--color-accent);
}
.woocommerce-tabs ul.tabs li.active a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
}

.woocommerce-Tabs-panel {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
    max-width: 900px;
}
.woocommerce-Tabs-panel h4 {
    font-size: 16px;
    color: var(--color-primary);
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 8px;
}

/* Specific styling for composition list to look like dotted leaders */
#tab-pupito_composition ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 400px;
}
#tab-pupito_composition li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    position: relative;
}
#tab-pupito_composition li::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    border-bottom: 1px dotted #ccc;
    z-index: 1;
}
#tab-pupito_composition li span {
    background: #fff;
    z-index: 2;
    padding: 0 5px;
}
#tab-pupito_composition li span:first-child {
    padding-left: 0;
}
#tab-pupito_composition li span:last-child {
    padding-right: 0;
}
/* Fix lists inside product tabs */
.woocommerce-Tabs-panel ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 20px;
}
.woocommerce-Tabs-panel ul li {
    margin-bottom: 6px;
}
/* Ensure composition list doesn't get standard bullets */
#tab-pupito_composition ul {
    list-style-type: none;
    margin-left: 0;
}
/* ============================================
   SALE BADGE & SALE PRICE
   ============================================ */
.product-card__image img.product-card__badge {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    z-index: 10 !important;
    width: 48px !important;
    height: auto !important;
    padding: 0 !important;
    object-fit: contain !important;
}

.product-card__price {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    line-height: 1.1 !important;
}

.product-card__price del {
    font-size: 14px !important;
    color: #999 !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
    margin-bottom: 2px !important;
}

.product-card__price ins {
    font-size: 24px !important;
    color: #DF3815 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    background: transparent !important;
}


/* ============================================
   SINGLE PRODUCT EXTENDED SECTIONS (Zalety, Porcja, Zmiana)
   ============================================ */
.pupito-product-extended {
    margin-top: 60px;
    padding-bottom: 80px;
    clear: both;
}

.pupito-section {
    text-align: center;
    margin-bottom: 80px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.pupito-section__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* SECTION 1: ZALETY PRODUKTU */
.pupito-benefits__subtitle {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 10px;
}
.pupito-benefits__intro {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}
.pupito-benefits__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}
@media (max-width: 600px) {
    .pupito-benefits__grid {
        grid-template-columns: 1fr;
    }
}
.pupito-benefit-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border: 1px solid #C4D6CC;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    background: #fff;
    text-align: left;
}
.pupito-benefit-icon {
    font-size: 20px;
    margin-right: 12px;
}
.pupito-benefits__script {
    font-family: 'Caveat', cursive, sans-serif; /* fallback */
    font-style: italic;
    font-size: 22px;
    color: var(--color-accent);
}

/* SECTION 2: ZALECANA DZIENNA PORCJA */
.pupito-portion__subtitle {
    font-size: 15px;
    color: var(--color-text);
    margin-bottom: 30px;
}
.pupito-portion__table-wrap {
    overflow-x: auto;
}
.pupito-portion__table {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-accent);
    border-radius: 12px;
    overflow-x: auto; overflow-y: hidden;
    background: #fff;
}
.pupito-portion__table th {
    background: #FFEEEB;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 12px;
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid var(--color-accent);
}
.pupito-portion__table th:not(:last-child) {
    border-right: 1px solid var(--color-accent);
}
.pupito-portion__table td {
    padding: 12px 15px;
    font-size: 14px;
    color: var(--color-text);
    text-align: center;
    border-bottom: 1px solid #FFE4DF;
}
.pupito-portion__table td:not(:last-child) {
    border-right: 1px solid var(--color-accent);
}
.pupito-portion__table tr:last-child td {
    border-bottom: none;
}
.pupito-portion__table tr td:nth-child(even) {
    font-weight: 700;
}

/* SECTION 3: JAK ZMIENIAĆ KARMĘ? */
.pupito-transition__subtitle {
    font-size: 15px;
    color: var(--color-text);
    margin-bottom: 40px;
}
.pupito-transition__diagrams {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}
.pupito-diagram {
    text-align: center;
    max-width: 220px;
}
.pupito-diagram__days {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 15px;
}
.pupito-diagram img {
    width: 160px;
    height: auto;
    margin-bottom: 15px;
}
.pupito-diagram__desc {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}
.pupito-diagram__desc span {
    color: var(--color-accent);
    font-weight: 700;
}


/* ============================================
   SINGLE PRODUCT EXTRA BLOCKS
   ============================================ */
.product-extra-blocks {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #EAEAEA;
    text-align: center;
}

.extra-block {
    margin-bottom: 60px;
}

.extra-block__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.extra-block__subtitle {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 20px;
    line-height: 1.5;
}
.extra-block__desc {
    font-size: 15px;
    margin-bottom: 30px;
    font-style: italic;
    color: #666;
}

/* Advantages Grid */
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-width: 800px;
    margin: 0 auto 30px;
}
@media (max-width: 768px) {
    .advantages-grid { grid-template-columns: 1fr; }
}
.advantage-badge {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #82A999;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    text-align: left;
}
.advantage-badge img {
    width: 24px;
    height: 24px;
    margin-right: 15px;
}
.extra-block__footer-text {
    font-size: 15px;
    color: var(--color-accent);
    font-style: italic;
}

/* Feeding Table */
.feeding-table-wrap {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid var(--color-accent);
    border-radius: 12px;
    overflow-x: auto; overflow-y: hidden;
}
.feeding-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 14px;
}
.feeding-table th {
    background: #FFF;
    color: var(--color-accent);
    padding: 15px 10px;
    font-weight: 700;
    border-bottom: 2px solid var(--color-accent);
    border-right: 1px solid #EAEAEA;
}
.feeding-table th:last-child { border-right: none; }
.feeding-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #EAEAEA;
    border-right: 1px solid #EAEAEA;
}
.feeding-table td:nth-child(2), .feeding-table td:nth-child(4) {
    font-weight: 700;
}
@media (max-width: 768px) {
    /* .feeding-table th.desktop-only, .feeding-table td.desktop-only { display: none; } */
}

/* Transition Grid */
.transition-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 30px;
}
.transition-item {
    text-align: center;
    max-width: 220px;
}
.transition-days {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}
.transition-item img {
    width: 100%;
    max-width: 190px;
    height: auto;
    margin: 0 auto 15px;
}
.transition-item p {
    font-size: 14px;
    line-height: 1.4;
}
.transition-item p span {
    color: var(--color-accent);
    font-weight: 700;
}



.feeding-table th, .feeding-table td {
    min-width: 140px;
}

@media (max-width: 768px) {
    .product-page {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px 0 !important;
    }
    .product-page__title {
        font-size: 24px !important;
    }
    .product-page__gallery {
        padding: 20px !important;
    }
    .product-page__gallery img {
        max-height: 300px !important;
    }
    .product-page__tabs {
        margin-top: 30px !important;
    }
}

/* ============================================
   SINGLE PRODUCT STOCK & SKU
   ============================================ */
.product-page__stock-sku {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 24px;
    font-size: 13px;
}
.stock-badge {
    display: inline-flex;
    align-items: center;
    background: #E8F2EC;
    color: var(--color-primary);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
}
.stock-badge .dot {
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    margin-right: 6px;
}
.stock-badge.out-of-stock {
    background: #FFF1EE;
    color: var(--color-accent);
}
.stock-badge.out-of-stock .dot {
    background: var(--color-accent);
}
.sku-badge {
    color: #999;
}
.sku-badge .sku {
    color: #666;
}
/* ============================================
   SINGLE PRODUCT GALLERY (LEFT THUMBNAILS)
   ============================================ */
.product-page__gallery-wrapper .woocommerce-product-gallery {
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;
    align-items: flex-start;
}
.product-page__gallery-wrapper .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.product-page__gallery-wrapper .woocommerce-product-gallery .flex-viewport {
    flex: 1;
    background: #fff;
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.product-page__gallery-wrapper .woocommerce-product-gallery figure.woocommerce-product-gallery__wrapper {
    margin: 0;
}
.product-page__gallery-wrapper .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.product-page__gallery-wrapper .woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
    flex-direction: column;
    width: 80px;
    margin: 0;
    padding: 0;
    gap: 12px;
}
.product-page__gallery-wrapper .woocommerce-product-gallery .flex-control-thumbs li {
    list-style: none;
    width: 100%;
    float: none !important;
}
.product-page__gallery-wrapper .woocommerce-product-gallery .flex-control-thumbs li img {
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.5;
    transition: all 0.3s;
}
.product-page__gallery-wrapper .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.product-page__gallery-wrapper .woocommerce-product-gallery .flex-control-thumbs li img:hover {
    border-color: var(--color-accent);
    opacity: 1;
}

@media (max-width: 768px) {
    .product-page__gallery-wrapper .woocommerce-product-gallery {
        flex-direction: column; /* Thumbs below image on mobile */
    }
    .product-page__gallery-wrapper .woocommerce-product-gallery .flex-control-thumbs {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
    }
    .product-page__gallery-wrapper .woocommerce-product-gallery .flex-control-thumbs li {
        width: 80px;
        flex-shrink: 0;
    }
}
/* ============================================
   RELATED PRODUCTS TITLE
   ============================================ */
.related.products > h2,
.upsells.products > h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
}

.product-page__gallery-wrapper .woocommerce-product-gallery {
    position: relative;
}
.product-page__gallery-wrapper .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 99;
}
/* Ensure inactive images are hidden if flexslider fails to load */
.product-page__gallery-wrapper .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) {
    display: none;
}
/* When flexslider is active, it overrides this */
.product-page__gallery-wrapper .woocommerce-product-gallery.flexslider-enabled .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    display: block;
}


/* ============================================
   NEW SUBHEADER MENU (DESKTOP)
   ============================================ */
.site-subheader {
    background: #fff; border-bottom: 1px solid #eee; position: relative; z-index: 50;
}
@media (min-width: 992px) {
    .site-subheader { display: block; }
    .main-nav .nav-list { display: flex; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; }
    .main-nav .nav-list > li { position: relative; }
    .main-nav .nav-list > li > a {
        display: flex; flex-direction: row; align-items: center; justify-content: center;
        height: 70px; padding: 0 20px; color: #333 !important; font-weight: 800 !important; font-size: 16px !important;
        text-transform: uppercase; text-decoration: none; transition: all 0.2s; opacity: 1;
    }
    .main-nav .nav-list > li.menu-item-has-children:hover > a, .main-nav .nav-list > li.menu-item-has-children.current-menu-item > a, .main-nav .nav-list > li.menu-item-has-children.current-menu-ancestor > a {
        background-color: var(--color-accent); color: #fff !important;
    }
/* old paw removed */
    
        /* Left-aligned Paw using ::before */
    .main-nav .nav-list > li > a::before {
        content: ''; display: block; width: 15px; height: 15px; background-color: #fff;
        -webkit-mask-image: url('../img/figma/paw.svg'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
        mask-image: url('../img/figma/paw.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center;
        opacity: 0; transition: opacity 0.2s; position: absolute; bottom: 8px; left: 20px;
    }
    .main-nav .nav-list > li.menu-item-has-children:hover > a::before, .main-nav .nav-list > li.menu-item-has-children.current-menu-item > a::before, .main-nav .nav-list > li.menu-item-has-children.current-menu-ancestor > a::before { opacity: 1; }
    .main-nav .nav-list > li:not(.menu-item-has-children):hover > a { background-color: #FFD6C9; color: #333 !important; }
    
    /* Chevron using ::after */
    .main-nav .nav-list > li.menu-item-has-children > a::after {
        content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px;
        border-right: 2px solid #333; border-bottom: 2px solid #333; transform: rotate(-45deg); transition: all 0.2s; vertical-align: middle;
    }
    .main-nav .nav-list > li.menu-item-has-children:hover > a::after,
    .main-nav .nav-list > li.menu-item-has-children.current-menu-item > a::after,
    .main-nav .nav-list > li.menu-item-has-children.current-menu-ancestor > a::after {
        border-color: #fff; transform: rotate(45deg); margin-top: -3px;
    }
    .main-nav .nav-list .sub-menu {
        position: absolute; top: 100%; left: 0; background: #f8f8f8; min-width: 240px; box-shadow: 0 8px 24px rgba(0,0,0,0.1);
        padding: 0; margin: 0; list-style: none; visibility: hidden; opacity: 0; transform: translateY(10px); transition: all 0.2s; z-index: 100; border-radius: 0 0 8px 8px;
    }
    .main-nav .nav-list > li:hover .sub-menu { visibility: visible; opacity: 1; transform: translateY(0); }
    .main-nav .nav-list .sub-menu li { position: relative; }
    .main-nav .nav-list .sub-menu li a {
        display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; color: #333; font-weight: 500; font-size: 16px; background-color: #f2f2f2;
        text-transform: none; text-decoration: none; white-space: nowrap; transition: all 0.2s; opacity: 1;
    }
    .main-nav .nav-list .sub-menu li:hover > a, .main-nav .nav-list .sub-menu li.current-menu-item > a { background-color: var(--color-accent); color: #fff !important; }
    .main-nav .nav-list .sub-menu li a::after {
        content: ''; display: block; width: 14px; height: 14px; background-color: #fff;
        -webkit-mask-image: url('../img/figma/paw.svg'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
        mask-image: url('../img/figma/paw.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; opacity: 0; transition: opacity 0.2s;
    }
    .main-nav .nav-list .sub-menu li:hover > a::after, .main-nav .nav-list .sub-menu li.current-menu-item > a::after { opacity: 1; }
}
@media (max-width: 991px) { .site-subheader { display: none; } }

/* ============================================
   HEADER KONTO DROPDOWN
   ============================================ */
.header-action-dropdown-wrap { position: relative; display: inline-flex; align-items: center; height: 100%; }
.header-action-dropdown {
    position: absolute; top: 100%; right: -20px; background: #fff; min-width: 250px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: 12px;
    padding: 20px; visibility: hidden; opacity: 0; transform: translateY(10px); transition: all 0.2s ease; z-index: 1000; overflow: hidden;
}
.header-action-dropdown-wrap:hover .header-action-dropdown { visibility: visible; opacity: 1; transform: translateY(0); }
.header-action-dropdown::before { content: ''; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; }
.header-account-menu { list-style: none; margin: -20px; padding: 10px 0; }
.header-account-menu li a { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; color: #4a4a4a; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.header-account-menu li a.logout-link { color: #e53935; }
.header-account-menu li:hover > a { background-color: var(--color-accent); color: #fff !important; }
.header-account-menu li:hover > a.logout-link { color: #fff; }
.header-account-menu li a::after {
    content: ''; display: block; width: 14px; height: 14px; background-color: #fff;
    -webkit-mask-image: url('../img/figma/paw.svg'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
    mask-image: url('../img/figma/paw.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; opacity: 0; transition: opacity 0.2s;
}
.header-account-menu li:hover > a::after { opacity: 1; }
.header-auth-buttons { display: flex; flex-direction: column; gap: 12px; }
.header-auth-buttons .btn {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border-radius: 40px; font-size: 15px; font-weight: 600; text-decoration: none;
    transition: all 0.3s ease; margin: 0 !important; padding: 0 20px !important; box-sizing: border-box;
}
.header-auth-buttons .btn-primary { background-color: var(--color-accent); color: #fff !important; border: 1px solid var(--color-accent); }
.header-auth-buttons .btn-primary:hover { background-color: #d8401a; border-color: #d8401a; }
.header-auth-buttons .btn-outline { background-color: #fff; color: var(--color-accent); border: 1px solid var(--color-accent); }
.header-auth-buttons .btn-outline:hover { background-color: var(--color-accent); color: #fff !important; }

/* ============================================
   MOBILE MENU STYLES (MATCHING MOCKUP)
   ============================================ */
@media (max-width: 991px) {
.mobile-menu {
    display: block !important; position: fixed; top: 68px; left: 0; width: 100%; height: calc(100vh - 68px);
    background: #fff; z-index: 999; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease;
}
.mobile-menu.active { visibility: visible; opacity: 1; transform: translateY(0); }
.mobile-menu-inner { padding: 10px 0 40px; }
.mobile-nav-list { list-style: none; margin: 0; padding: 0; }
.mobile-nav-list > li { margin: 0; padding: 0; }
.mobile-nav-list > li > a { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; font-size: 15px; font-weight: 800; color: #333; text-transform: uppercase; text-decoration: none; }
.mobile-toggle-btn { font-size: 20px; font-weight: 400; color: #666; margin-left: 10px; pointer-events: none; }
.mobile-nav-list .sub-menu { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.mobile-nav-list li.open > .sub-menu { border-bottom: 1px solid #ddd; }
.mobile-nav-list .sub-menu li a { display: block; padding: 12px 24px 12px 40px; font-size: 14px; font-weight: 500; color: #555; text-transform: none; text-decoration: none; }
.mobile-menu-actions { display: none; }
}



/* ============================================
   WSPÓŁPRACA PAGE
   ============================================ */
.coop-hero {
    background: #ffedc8; /* var(--biege-3) */
    position: relative;
    padding: 100px 0 120px;
    overflow: hidden;
}
/* Wavy top/bottom decorations can be added via pseudo-elements or SVGs later */

.coop-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
}
.coop-desc {
    font-size: 20px;
    color: #282828;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
    line-height: 1.6;
}

.coop-content {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    justify-content: center;
    align-items: flex-start;
}

/* Form Block */
.coop-form-block {
    background: #fff;
    border-radius: 20px;
    padding: 50px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 4px 10px rgba(202,202,202,0.25);
}
.custom-coop-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.custom-coop-form input,
.custom-coop-form textarea {
    background: #f4f3f1;
    border: 1px solid #e8e8e8;
    border-radius: 26px;
    padding: 15px 24px;
    font-size: 18px;
    color: #333;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.custom-coop-form textarea {
    border-radius: 20px;
    resize: vertical;
}
.custom-coop-form input::placeholder,
.custom-coop-form textarea::placeholder {
    color: #949494;
}
.coop-btn {
    border-radius: 30px !important;
    padding: 18px 30px !important;
    font-size: 18px !important;
    margin-top: 10px;
}

/* Info Block */
.coop-info-block {
    max-width: 400px;
    padding-top: 20px;
}
.coop-subtitle {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 20px;
}
.coop-slogan {
    font-family: 'Caveat', cursive; /* Assuming Figma_Hand:Bold matches Caveat */
    font-size: 26px;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 30px;
}
.coop-contact-details p {
    font-size: 20px;
    color: #282828;
    margin-bottom: 12px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .coop-title, .coop-subtitle { font-size: 26px; }
    .coop-desc { font-size: 16px; }
    .coop-content { gap: 40px; }
    .coop-form-block { padding: 30px 20px; }
}/* ============================================
   PREMMERCE FILTER OVERRIDES (FIGMA)
   ============================================ */
.filter__title, 
.filter--style-premmerce .filter__title, 
.filter--style-custom .filter__title {
    color: #114F3C !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    font-family: var(--font-primary) !important;
}

/* CUSTOM TOGGLE LOGIC SINCE PLUGIN DROPDOWN IS OFF */
.filter__title {
    position: relative;
    cursor: pointer;
    display: block !important; /* to take full width */
    width: 100%;
}
.filter__title::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #114F3C;
    border-bottom: 2px solid #114F3C;
    transform: rotate(45deg); /* Chevron down (collapsed) */
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: 5px;
    transition: transform 0.2s ease;
}
.filter__title.is-open::after {
    transform: rotate(-135deg); /* Chevron up */
    margin-top: -2px;
}

/* ============================================
   HOMEPAGE SPECIFIC GRID (4 COLUMNS)
   ============================================ */
body.home .woocommerce ul.products,
body.home .products-grid,
body.page-template-page-home .woocommerce ul.products,
body.page-template-page-home .products-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}
/* ============================================
   BULLETPROOF HOMEPAGE GRID (4 COLUMNS)
   ============================================ */
body.home .products-section ul.products,
body.home .products-wrapper ul.products,
body.home .woocommerce ul.products,
body.home ul.products.columns-4,
.products-section ul.products.columns-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (min-width: 992px) {
    body.home .products-section ul.products li.product,
    body.home .woocommerce ul.products li.product {
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        flex: 1 1 auto !important;
    }
}

/* ============================================
   SINGLE PRODUCT PAGE RELATED PRODUCTS (4 COLUMNS)
   ============================================ */
body.single-product .related.products ul.products,
body.single-product .upsells.products ul.products,
.related.products ul.products,
.upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (min-width: 992px) {
    body.single-product .related.products ul.products li.product,
    body.single-product .upsells.products ul.products li.product,
    .related.products ul.products li.product,
    .upsells.products ul.products li.product {
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        flex: 1 1 auto !important;
    }
}
.cross-sells ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}
@media (min-width: 992px) {
    .cross-sells ul.products li.product {
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
}

/* ============================================
   AUTH PAGES (LOGIN / REGISTRATION)
   ============================================ */
.pupito-auth-page {
    max-width: 1100px;
    margin: 40px auto;
}
.pupito-auth-page h2 {
    font-size: 18px;
    color: #114F3C;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    margin-bottom: 32px;
}

/* LOGIN LAYOUT */
.pupito-login-page {
    display: flex;
    flex-wrap: wrap;
    background: #F9F8F6;
    border-radius: 12px;
    overflow: hidden;
}
.pupito-login-col {
    flex: 1 1 50%;
    padding: 64px;
    box-sizing: border-box;
}
.pupito-login-form-col {
    background: #ffffff;
}
.pupito-login-teaser-col {
    background: #F9F8F6;
}

/* FORM ELEMENTS */
.pupito-auth-page .woocommerce-form-row {
    margin-bottom: 20px;
}
.pupito-auth-page input.input-text {
    width: 100% !important;
    background: #F5F5F5 !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 16px 24px !important;
    font-size: 15px !important;
    color: #333 !important;
    box-shadow: none !important;
}
.pupito-auth-page input.input-text::placeholder {
    color: #999 !important;
}
.pupito-auth-page label {
    display: none !important; /* We use placeholders as per Figma */
}

/* BUTTONS */
.pupito-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}
.pupito-btn-orange {
    background: #E85D1A !important;
    color: #fff !important;
    border: none !important;
}
.pupito-btn-orange:hover {
    background: #D14D12 !important;
    color: #fff !important;
}
.pupito-btn-outline {
    background: transparent !important;
    color: #E85D1A !important;
    border: 1px solid #E85D1A !important;
}
.pupito-btn-outline:hover {
    background: #E85D1A !important;
    color: #fff !important;
}
.pupito-auth-submit {
    width: 100%;
    max-width: 300px;
    margin-top: 10px;
}

/* LOGIN SPECIFIC */
.pupito-login-actions {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 20px;
}
.pupito-login-actions .lost_password a {
    color: #666;
    text-decoration: underline;
    font-size: 13px;
}

/* TEASER LIST */
.teaser-benefits {
    list-style: none;
    padding: 0;
    margin: 32px 0 0 0;
}
.teaser-benefits li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}
.teaser-benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #E85D1A;
    font-size: 18px;
    font-weight: bold;
}

/* REGISTRATION LAYOUT */
.pupito-registration-page {
    background: #F9F8F6;
    padding: 64px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.pupito-registration-container {
    width: 100%;
    max-width: 400px;
}
.pupito-registration-container h2 {
    text-align: center;
}
.privacy-consent {
    font-size: 12px;
    color: #666;
    margin-top: 24px;
    line-height: 1.5;
}
.privacy-consent a {
    color: #114F3C;
    text-decoration: underline;
}
.pupito-login-teaser-bottom {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #E0E0E0;
    width: 100%;
    max-width: 400px;
}
.pupito-login-teaser-bottom p {
    color: #114F3C;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 24px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .pupito-login-col {
        flex: 1 1 100%;
        padding: 32px 24px;
    }
    .pupito-registration-page {
        padding: 32px 24px;
    }
}

/* ============================================
   MY ACCOUNT - PET PROFILE
   ============================================ */
.woocommerce-MyAccount-content .pupito-pet-profile-wrapper {
    background: #ffffff;
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.pupito-custom-input {
    width: 100% !important;
    background: #F9F8F6 !important;
    border: 1px solid #EBEBEB !important;
    border-radius: 30px !important;
    padding: 16px 24px !important;
    font-size: 15px !important;
    color: #333 !important;
    box-shadow: none !important;
}
.woocommerce-MyAccount-content label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    font-weight: 600;
}

/* ============================================
   MY ACCOUNT - NAVIGATION STYLES (FIGMA)
   ============================================ */

/* Container Layout */
.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 40px auto;
}

/* Sidebar Navigation */
.woocommerce-MyAccount-navigation {
    flex: 0 0 280px;
    width: 280px;
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.woocommerce-MyAccount-navigation ul li {
    margin-bottom: 16px;
}
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 18px 24px;
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: left;
}
.woocommerce-MyAccount-navigation ul li a:hover {
    border-color: #E85D1A;
    background: #FDFDFD;
}

/* Active State */
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: #FFEDDF;
    border: 1px solid #E85D1A;
    color: #333;
}

/* Logout Item */
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 32px;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    background: transparent !important;
    border: none !important;
    color: #C62828 !important;
    text-align: center;
    padding: 12px 24px;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    text-decoration: underline;
}

/* Content Area */
.woocommerce-MyAccount-content {
    flex: 1;
    min-width: 0; /* prevents flex blowout */
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        flex-direction: column;
    }
    .woocommerce-MyAccount-navigation {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* ============================================
   CART & CHECKOUT - EMPTY CART
   ============================================ */
.pupito-empty-cart-container {
    text-align: center;
    max-width: 600px;
    margin: 60px auto;
    padding: 40px;
    background: #F9F8F6;
    border-radius: 12px;
}
.pupito-empty-cart-container h2 {
    font-size: 16px;
    color: #114F3C;
    font-weight: 700;
    margin-bottom: 24px;
    text-transform: uppercase;
}
.pupito-empty-cart-text {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 32px;
}
.pupito-empty-cart-img {
    margin-bottom: 32px;
}
.pupito-empty-cart-img img {
    max-width: 200px;
    height: auto;
}
.pupito-empty-cart-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
.pupito-empty-cart-actions .button {
    width: 100%;
    max-width: 320px;
}

/* ============================================
   CART PAGE (FULL)
   ============================================ */
.woocommerce-cart .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 40px auto;
}
.woocommerce-cart-form {
    flex: 1 1 60%;
}
.cart-collaterals {
    flex: 1 1 35%;
}

/* Transform Table to Cards */
.woocommerce-cart-form table.shop_table {
    border: none !important;
    border-radius: 0;
    margin-bottom: 0;
}
.woocommerce-cart-form table.shop_table thead {
    display: none;
}
.woocommerce-cart-form table.shop_table tbody tr.cart_item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    grid-template-rows: auto auto;
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid #EBEBEB;
    background: transparent;
}
.woocommerce-cart-form table.shop_table td {
    padding: 0;
    border: none;
    background: transparent;
}
/* Product Image */
.woocommerce-cart-form table.shop_table td.product-thumbnail {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.woocommerce-cart-form table.shop_table td.product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #F0F0F0;
    background: #fff;
}
/* Product Name */
.woocommerce-cart-form table.shop_table td.product-name {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}
.woocommerce-cart-form table.shop_table td.product-name a {
    color: #333;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.4;
}
.woocommerce-cart-form table.shop_table td.product-name dl.variation {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    margin-bottom: 0;
}
/* Quantity & Remove Container */
.woocommerce-cart-form table.shop_table td.product-quantity {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 16px;
}
/* Price */
.woocommerce-cart-form table.shop_table td.product-subtotal {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    font-weight: 700;
    font-size: 16px;
    color: #333;
}
.woocommerce-cart-form table.shop_table td.product-price { 
    display: none; 
}
/* Remove button */
.woocommerce-cart-form table.shop_table td.product-remove {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
    align-self: center;
}
.woocommerce-cart-form table.shop_table td.product-remove a.remove {
    color: #999 !important;
    font-size: 20px;
    font-weight: normal;
    background: transparent !important;
}
.woocommerce-cart-form table.shop_table td.product-remove a.remove:hover {
    color: #E85D1A !important;
}

/* Coupon & Update Cart Row */
.woocommerce-cart-form td.actions {
    padding: 24px 0;
    text-align: right;
}
.woocommerce-cart-form td.actions .button {
    background: transparent;
    color: #114F3C;
    border: 1px solid #114F3C;
    border-radius: 30px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
}
.woocommerce-cart-form td.actions .button:hover {
    background: #114F3C;
    color: #fff;
}

/* Cart Totals Summary Box */
.cart-collaterals .cart_totals {
    background: #F9F8F6;
    border-radius: 12px;
    padding: 32px;
    width: 100%;
}
.cart-collaterals .cart_totals h2 {
    display: none;
}
.cart-collaterals .cart_totals table {
    width: 100%;
    border: none;
    margin-bottom: 24px;
}
.cart-collaterals .cart_totals table th,
.cart-collaterals .cart_totals table td {
    border: none;
    padding: 12px 0;
    background: transparent;
}
.cart-collaterals .cart_totals table th {
    font-weight: normal;
    color: #666;
    font-size: 14px;
}
.cart-collaterals .cart_totals table td {
    text-align: right;
    font-weight: 700;
    color: #333;
}
.cart-collaterals .cart_totals table tr.order-total th,
.cart-collaterals .cart_totals table tr.order-total td {
    border-top: 1px solid #E0E0E0;
    font-size: 16px;
    color: #114F3C;
    padding-top: 24px;
}
.cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
    background: #E85D1A;
    color: #fff;
    border-radius: 30px;
    padding: 16px;
    text-align: center;
    width: 100%;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 16px;
}
.cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
    background: #D14D12;
}

/* Custom Coupon in Sidebar */
.pupito-cart-coupon {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}
.pupito-cart-coupon input {
    flex: 1;
    border-radius: 30px;
    border: 1px solid #EBEBEB;
    padding: 12px 20px;
    font-size: 14px;
}
.pupito-cart-coupon button {
    border-radius: 30px;
    padding: 12px 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .woocommerce-cart .woocommerce {
        flex-direction: column;
    }
    .woocommerce-cart-form,
    .cart-collaterals {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* ============================================
   MINI CART (DROPDOWN)
   ============================================ */
.widget_shopping_cart_content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 24px;
    width: 320px;
}
.widget_shopping_cart_content ul.cart_list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}
.widget_shopping_cart_content ul.cart_list li {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #F0F0F0;
}
.widget_shopping_cart_content ul.cart_list li img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #F0F0F0;
    grid-column: 1;
    grid-row: 1 / span 2;
}
.widget_shopping_cart_content ul.cart_list li > a {
    color: #333;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    grid-column: 2;
    grid-row: 1;
    line-height: 1.3;
}
.widget_shopping_cart_content ul.cart_list li .quantity {
    grid-column: 2;
    grid-row: 2;
    font-size: 12px;
    color: #888;
}
.widget_shopping_cart_content ul.cart_list li a.remove {
    grid-column: 3;
    grid-row: 1;
    color: #999;
}
.widget_shopping_cart_content ul.cart_list li a.remove:hover {
    color: #E85D1A;
}
.widget_shopping_cart_content p.total {
    border-top: 1px solid #EBEBEB;
    padding-top: 16px;
    margin-top: 16px;
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: space-between;
}
.widget_shopping_cart_content p.total .amount {
    font-weight: 700;
    color: #333;
    font-size: 16px;
}
.widget_shopping_cart_content p.buttons {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.widget_shopping_cart_content p.buttons a.button {
    text-align: center;
    border-radius: 30px;
    padding: 12px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
}
.widget_shopping_cart_content p.buttons a.checkout {
    background: #E85D1A;
    color: #fff;
}

/* ============================================
   MINI CART DROPDOWN (HEADER)
   ============================================ */
.pupito-cart-wrapper {
    position: relative;
    display: inline-block;
}
.pupito-mini-cart-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 9999;
    padding-top: 16px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}
/* Show on hover */
.pupito-cart-wrapper:hover .pupito-mini-cart-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Ensure the dropdown itself has correct styling */
.widget_shopping_cart_content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 24px;
    width: 320px;
}

/* Let's refine the mini-cart internal styles if needed */
.widget_shopping_cart_content p.buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.widget_shopping_cart_content p.buttons .button {
    text-align: center;
    border-radius: 30px;
    padding: 12px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    display: block;
    width: 100%;
    text-decoration: none;
    box-sizing: border-box;
}
.widget_shopping_cart_content p.buttons a.checkout {
    background: #E85D1A;
    color: #fff;
    border: none;
}
.widget_shopping_cart_content p.buttons a.checkout:hover {
    background: #D14D12;
}
/* Custom total lines in minicart */
.widget_shopping_cart_content .total {
    border-top: 1px solid #EBEBEB;
    padding-top: 16px;
    margin-top: 16px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #333;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
}
.widget_shopping_cart_content .total .amount {
    color: #333;
}
/* Subtext */
.widget_shopping_cart_content .woocommerce-mini-cart__total strong {
    font-weight: normal;
    color: #666;
}

/* ============================================
   HEADER CART BADGE
   ============================================ */
.header-action-btn.cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.header-action-btn.cart-btn svg {
    position: relative;
}
.cart-count {
    position: absolute;
    top: -8px;
    left: 12px; /* Position it over the top-right of the bag icon */
    background: #fff;
    color: #E85D1A;
    font-size: 10px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ============================================
   MINI CART DROPDOWN REFINED (FIGMA)
   ============================================ */
.widget_shopping_cart_content ul.cart_list li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid #F0F0F0;
}
.pupito-mc-img {
    flex: 0 0 50px;
}
.pupito-mc-img img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #F0F0F0;
}
.pupito-mc-info {
    flex: 1;
}
.pupito-mc-info a.pupito-mc-title {
    color: #333;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    display: block;
    margin-bottom: 8px;
}
.pupito-mc-price {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}
.pupito-mc-remove {
    flex: 0 0 20px;
    text-align: right;
}
.pupito-mc-remove a.remove {
    color: #999 !important;
    font-size: 20px;
    font-weight: normal;
    background: transparent !important;
}
.pupito-mc-remove a.remove:hover {
    color: #E85D1A !important;
}

/* Modify the buttons to only show KOSZYK as per Figma */
.widget_shopping_cart_content p.buttons a.checkout {
    display: none; /* Hide standard checkout if we only want cart button */
}
.widget_shopping_cart_content p.buttons a.wc-forward:not(.checkout) {
    background: #E85D1A;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 12px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    display: block;
    width: 100%;
    text-align: center;
}
.widget_shopping_cart_content p.buttons a.wc-forward:not(.checkout):hover {
    background: #D14D12;
}

/* Custom Total Text */
.widget_shopping_cart_content .total {
    border-top: 1px solid #EBEBEB;
    padding-top: 16px;
    margin-top: 16px;
    margin-bottom: 24px;
    font-size: 13px;
    color: #333;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
}
.widget_shopping_cart_content .total strong {
    font-weight: 700;
    color: #333;
    font-size: 13px;
}
.widget_shopping_cart_content .total {
    display: block !important;
}

/* ============================================
   CHECKOUT PAGE (FIGMA LAYOUT)
   ============================================ */
form.checkout.pupito-grid-checkout {
    display: grid !important;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
    max-width: 1200px;
    margin: 40px auto;
}

/* Force #order_review to just pass its children to the grid */
#order_review {
    display: contents;
}

/* Left Column Elements */
.pupito-checkout-step {
    grid-column: 1;
    background: #fff;
    border: 1px solid #EBEBEB;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
}
.pupito-step-title {
    font-size: 18px;
    font-weight: 700;
    color: #114F3C;
    margin-top: 0;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #EBEBEB;
    padding-bottom: 16px;
}
.pupito-step-title .step-num {
    background: #114F3C;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

/* Right Column Elements (Summary Box) */
.pupito-checkout-summary-box {
    grid-column: 2;
    grid-row: 1 / span 10;
    background: #F9F8F6;
    border-radius: 12px;
    padding: 32px;
}

/* Summary Table Styling */
.pupito-checkout-summary-box table {
    width: 100%;
    border: none;
    margin: 0;
}
.pupito-checkout-summary-box table th,
.pupito-checkout-summary-box table td {
    border: none;
    padding: 12px 0;
    background: transparent;
}
.pupito-checkout-summary-box table th {
    font-weight: normal;
    color: #666;
    font-size: 14px;
}
.pupito-checkout-summary-box table td {
    text-align: right;
    font-weight: 700;
    color: #333;
}
.pupito-checkout-summary-box table tr.order-total th,
.pupito-checkout-summary-box table tr.order-total td {
    border-top: 1px solid #E0E0E0;
    font-size: 16px;
    color: #114F3C;
    padding-top: 24px;
}
/* Hide the products in the summary as per Figma */
.pupito-checkout-summary-box table tbody {
    display: none;
}

/* Payment Methods & Place Order Button */
#step-3-payment {
    grid-column: 1;
}
/* Move the Place Order button to the Summary Box using CSS absolute positioning trick? 
   No, WooCommerce requires the button to be inside the form. It's currently in Step 3. 
   Figma shows PRZEJDŹ DO PŁATNOŚCI in the Right Summary Block! 
   Wait, if we move it via CSS it's hard. Let's just make the button span the right column! */

@media (max-width: 992px) {
    form.checkout.pupito-grid-checkout {
        grid-template-columns: 1fr;
    }
    .pupito-checkout-summary-box {
        grid-column: 1;
        grid-row: auto;
    }
}
/* Fix WooCommerce loader for display:contents */
form.checkout .blockUI.blockOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
}

/* Make standard WC inputs look better for steps */
.pupito-checkout-step input.input-text,
.pupito-checkout-step select {
    border-radius: 30px;
    border: 1px solid #EBEBEB;
    padding: 12px 20px;
    background: #F9F8F6;
    width: 100%;
}
.pupito-checkout-step label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
    display: block;
}
@media (max-width: 991px) {
    /* Explicitly order elements in the mobile header */
    .header-actions {
        display: contents !important;
    }
    
    .header-inner {
        position: relative;
    }
    
    /* 1. Burger Menu on the far left */
    .burger-btn { 
        order: 1 !important; 
        margin-right: auto !important; /* This pushes everything else to the right */
    }
    
    /* Center Logo (Absolute) */
    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        order: 2; /* Doesn't matter because it's absolute, but just in case */
    }
    
    /* 3. User Account */
    .header-action-dropdown-wrap { 
        order: 3 !important; 
        margin-right: 16px;
    }
    
    /* 4. Cart Wrapper */
    .pupito-cart-wrapper {
        order: 4 !important;
        margin-right: 16px;
    }
    
    /* 5. Favorites */
    .header-actions > a[href*="ulubione"] {
        order: 5 !important;
    }
}
@media (max-width: 991px) {
    /* Reset old fragile rules */
    .header-actions > *:nth-child(1),
    .header-actions > *:nth-child(2),
    .header-actions > *:nth-child(3),
    .header-actions > *:nth-child(4) {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    .header-actions {
        display: flex !important;
        flex-direction: row;
        width: 100%;
        justify-content: flex-end;
        align-items: center;
        gap: 16px !important;
    }
    
    .header-inner {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Move burger to extreme left by pulling it out of the flex flow, or making .header-actions span 100% */
    .burger-btn {
        margin-right: auto !important;
        order: -1;
    }

    /* Hide text */
    .header-action-text { display: none !important; }

    /* Fix logo positioning */
    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
        z-index: 10;
    }
    
    /* Reset order for right icons */
    .header-action-dropdown-wrap { order: 2; }
    .pupito-cart-wrapper { order: 3; }
    .header-actions > a[href*="ulubione"] { order: 4; }
}
@media (max-width: 991px) {
    .burger-btn {
        display: flex !important;
        margin-right: auto !important;
        order: -1 !important;
    }
}
@media (max-width: 991px) {
    .burger-btn,
    button.burger-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 30px !important;
        height: 30px !important;
        z-index: 9999 !important;
        color: #fff !important;
        stroke: #fff !important;
    }
    
    .burger-btn svg {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        stroke: #fff !important;
    }
}
@media (max-width: 991px) {
    .burger-btn {
        background: blue !important;
    }
}
@media (max-width: 991px) {
    /* Put the burger menu next to the cart icon like it was originally, but ordered correctly */
    .header-actions {
        display: flex !important;
        flex-direction: row;
        width: 100%;
        justify-content: flex-end; /* All icons on the right */
        align-items: center;
        gap: 16px !important;
    }
    
    .burger-btn {
        margin-right: 0 !important;
        order: 5 !important; /* Put it at the very end (right side) so they can definitely see it! */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #fff !important;
    }
    
    .logo {
        position: static !important; /* Let's stop centering it absolutely, maybe it's hiding things */
        transform: none !important;
        margin-right: auto !important;
    }
}
@media (max-width: 991px) {
    .cart-count {
        top: -4px !important;
        left: 10px !important;
    }
}
@media (max-width: 991px) {
    /* CLEAN SLATE FOR MOBILE HEADER */
    .header-inner {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative !important;
    }
    
    .logo {
        position: static !important;
        transform: none !important;
        order: 1 !important;
        margin: 0 auto 0 0 !important; /* Push everything else to the right */
    }
    
    .header-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        order: 2 !important;
        width: auto !important;
    }
    
    /* Reset all children orders to natural DOM order, except what we want to move */
    .header-actions > * {
        margin: 0 !important;
        order: 0 !important;
    }
    
    .burger-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 24px !important;
        height: 24px !important;
        background: transparent !important; /* REMOVE BLUE DEBUG BACKGROUND */
        color: #fff !important;
        stroke: #fff !important;
        order: 10 !important; /* Force to the very end of .header-actions */
        padding: 0 !important;
    }
    
    .header-action-text {
        display: none !important;
    }
}
/* Cart Alignment Fixes */
.pupito-cart-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 991px) {
    .pupito-mini-cart-dropdown {
        right: -40px !important; /* Adjust if it's too close to the edge on mobile */
    }
    
    /* Make sure the hover effect holds on touch */
    .pupito-cart-wrapper:focus-within .pupito-mini-cart-dropdown,
    .pupito-cart-wrapper:active .pupito-mini-cart-dropdown {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 991px) {
    .pupito-mini-cart-dropdown {
        right: 0 !important;
        width: 300px !important;
        max-width: 90vw !important;
    }
}
@media (max-width: 991px) {
    /* EXACT FIGMA LAYOUT */
    .header-inner {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
    }
    
    .header-actions {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 16px !important;
    }
    
    /* 1. Burger (Left) */
    .burger-btn {
        order: 1 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        color: #fff !important;
        stroke: #fff !important;
        background: transparent !important;
    }
    
    /* 2. User (Left, pushes the rest to the right) */
    .header-action-dropdown-wrap {
        order: 2 !important;
        margin-right: auto !important; /* Magic trick to split the flexbox! */
    }
    
    /* 3. Heart (Right) */
    .header-actions > a[href*="ulubione"] {
        order: 3 !important;
        margin-right: 0 !important;
    }
    
    /* 4. Cart (Right) */
    .pupito-cart-wrapper {
        order: 4 !important;
    }
}
@media (max-width: 991px) {
    .header-inner {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
    }
    
    .header-actions {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        flex: 1 1 100% !important; /* Force to take full width */
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 16px !important;
    }
    
    /* 1. Burger (Left) */
    .burger-btn {
        order: 1 !important;
    }
    
    /* 2. User (Left) */
    .header-action-dropdown-wrap {
        order: 2 !important;
        margin-right: 0 !important; /* Reset old trick */
    }
    
    /* 3. Heart (Right) */
    .header-actions > a.header-action-btn {
        order: 3 !important;
        margin-left: auto !important; /* THIS splits the layout and pushes Heart and Cart to the far right! */
    }
    
    /* 4. Cart (Right) */
    .pupito-cart-wrapper {
        order: 4 !important;
    }
}
/* --- PUPITO CHECKOUT SHIPPING CARDS --- */
#shipping_method {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#shipping_method li {
    margin-bottom: 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

#shipping_method li:hover {
    border-color: #f97316 !important; /* Orange branding */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Hide default radio visually, but keep it clickable */
#shipping_method input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 10;
    margin: 0;
    top: 0;
    left: 0;
}

#shipping_method label {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Custom Radio Circle */
#shipping_method label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    margin-right: 16px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* Checked state */
#shipping_method input[type="radio"]:checked + label::before {
    border-color: #f97316;
    border-width: 6px; /* Creates the filled inner circle effect */
}
#shipping_method input[type="radio"]:checked + label {
    background: #fffaf5; /* Very subtle orange tint for active card */
    border-radius: 8px;
}
#shipping_method input[type="radio"]:checked ~ .pupito-shipping-label-inner {
    /* Target inner if needed */
}

/* Logos (Placeholders until client uploads real ones, using SVG data URIs) */
.pupito-shipping-logo {
    display: inline-block;
    width: 60px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* DPD Logo approximation */
.pupito-shipping-logo.dpd-logo {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30"><rect width="100" height="30" fill="%23dc0032" rx="4"/><text x="50" y="20" fill="white" font-family="Arial" font-size="16" font-weight="bold" text-anchor="middle">DPD</text></svg>');
}

/* InPost Logo approximation */
.pupito-shipping-logo.inpost-logo {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30"><rect width="100" height="30" fill="%23facc15" rx="4"/><text x="50" y="20" fill="black" font-family="Arial" font-size="14" font-weight="bold" text-anchor="middle">InPost</text></svg>');
}

@media (max-width: 768px) {
    .pupito-shipping-duration {
        display: none !important; /* Hide duration on mobile if too cramped */
    }
}
/* Hide the redundant "Przesylka" table header in our custom shipping table */
.pupito-shipping-table th {
    display: none !important;
}
.pupito-shipping-table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}
/* --- FIX CHECKOUT GRID --- */
.pupito-checkout-summary-box-row {
    grid-column: 2 !important;
    grid-row: 1 / span 10 !important;
}
@media (max-width: 992px) {
    .pupito-checkout-summary-box-row {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}
/* Ensure step-2-shipping goes to column 1 */
#step-2-shipping {
    grid-column: 1 !important;
}
/* Hide table headers that are unneeded */
.pupito-shipping-table th { display: none !important; }
.pupito-shipping-table td { display: block !important; width: 100% !important; padding: 0 !important; }

/* FIX CART LAYOUT SQUISHING */
.woocommerce-cart .woocommerce-shipping-totals {
    display: flex;
    flex-direction: column;
}
.woocommerce-cart #shipping_method li {
    margin-bottom: 12px !important;
}
/* Fix empty right box - browser auto-wrapped totals in tbody which got hidden! */
.pupito-checkout-summary-box table tbody {
    display: table-row-group !important; /* Restore visibility */
}
/* Fix payment section background overriding */
#payment.pupito-checkout-step {
    background: #fff !important;
    padding: 32px !important;
}
/* Accordion Checkout Styles */
.pupito-checkout-step {
    transition: all 0.3s ease;
    overflow: hidden;
}
.pupito-checkout-step:not(.pupito-step-active) {
    cursor: pointer;
    opacity: 0.7;
}
.pupito-checkout-step:not(.pupito-step-active) .pupito-step-title {
    color: #999;
}
.pupito-checkout-step:not(.pupito-step-active) .step-num {
    background: transparent;
    color: #999;
    border: 1px solid #999;
}
.pupito-step-title {
    font-size: 16px;
    font-weight: 700;
    color: #114F3C;
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #114F3C;
    color: #fff;
    font-size: 12px;
}
/* Summary Button */
#pupito-continue-btn {
    transition: opacity 0.3s ease;
}
#pupito-continue-btn:hover {
    opacity: 0.8;
}