/* === HEADER STYLES === */

/* Top Bar - tylko desktop */
.universal-topbar {
	display: none;
	background: #010b13;
	color: white;
	padding: 8px 0;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

@media (min-width: 1024px) {
	.universal-topbar {
		display: block;
	}
}

.topbar-content {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8rem;
	font-size: 14px;
	font-weight: 300;
	padding-inline: clamp(16px, 3vw, 40px);
}

.topbar-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Search field specific fixes */
input[type='search']:focus {
	background-color: white !important;
	color: #333;
}

.universal-search-form .search-submit {
	background-color: #333 !important;
}

.universal-header-layout {
	padding: 1rem 0;
	overflow: visible !important;
}

/* Bardzo specyficzne selektory żeby nadpisać wszystko */
.site-header .universal-header-layout,
.storefront-primary-navigation .universal-header-layout,
header .universal-header-layout,
.universal-header-layout.universal-header-layout {
	overflow: visible !important;
}

/* Zapewnij że header parent nie ogranicza dropdown */
.site-header,
.storefront-primary-navigation,
header {
	overflow: visible !important;
}

/* Mega agresywny fix dla overflow */
:where(.universal-header-layout),
:where(.site-header) .universal-header-layout,
:where(header) .universal-header-layout,
:where(.storefront-primary-navigation) .universal-header-layout {
	overflow: visible !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
}

.universal-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	flex-wrap: wrap;
}

/* Desktop layout (1024px+): Menu (left) | Logo (center) | Icons (right) */
@media (min-width: 1024px) {
	.universal-header-row {
		justify-content: space-between;
	}

	.universal-header-navigation {
		order: 1;
		flex: 1;
		display: flex;
		justify-content: flex-start;
		margin-left: 0 !important;
	}

	.universal-header-logo {
		order: 2;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
	}

	.universal-header-search {
		order: 3;
	}

	.universal-header-account {
		order: 4;
	}

	.universal-header-wishlist {
		order: 5;
	}

	.universal-header-cart {
		order: 6;
	}

	.universal-header-mobile-toggle {
		display: none !important;
	}
}

/* === LOGO & BRANDING === */

.universal-header-logo {
	flex: 0 0 auto;
}

/* Nadpisanie Storefront defaults dla logo img */
.site-header .site-logo-anchor img,
.site-header .site-logo-link img,
.site-header .custom-logo-link img {
	width: auto;
	max-width: 100%;
}

li.menu-item {
	padding: 6px 6px !important;
}

li.menu-item A {
	padding: 6px 6px !important;
}

li.menu-item-has-children::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	background-image: url('../../images/chevron-down.svg');
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: 5px;
	vertical-align: middle;
}

/* Logo base styles */
.custom-logo {
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Logo responsive behavior */
.custom-logo-desktop {
	display: block;
}

.custom-logo-mobile {
	display: none;
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Site branding layout */
.site-branding {
	float: none !important;
	text-align: left;
}

.site-branding .custom-logo-link {
	display: block;
	line-height: 1;
	width: fit-content;
	height: fit-content;
}

.site-header .custom-logo-link {
	margin-right: 0;
}

.site-header .site-branding {
	margin-bottom: 0;
}

/* Ukryj site title gdy logo jest aktywne */
.site-branding .site-title,
.site-branding .site-description {
	display: none;
}

/* Site title styling (fallback gdy nie ma logo) */
.site-title {
	color: white;
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0;
}

.site-title a {
	color: white;
	text-decoration: none;
}

/* Legacy logo link classes (kompatybilność) */
.mobile-logo {
	display: none;
}

/* Na mobile - pokaż mobile logo i ukryj desktop */
@media (max-width: 768px) {
	.site-header .custom-logo-link .custom-logo-desktop {
		display: none;
	}

	.site-header .custom-logo-link .custom-logo-mobile {
		display: block;
		width: auto;
		max-width: none;
		object-fit: contain;
		max-height: 50px;
	}

	.desktop-logo {
		display: none;
	}

	.mobile-logo {
		display: inline-block;
	}

	.site-title {
		font-size: 1.2rem;
	}
}

.universal-header-navigation {
	flex: 1 1 auto;
}

.universal-primary-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2rem;
}

.universal-primary-menu a {
	color: black;
	text-decoration: none;
	font-weight: 400;
}

.universal-primary-menu a:hover {
	text-decoration: underline;
}

.universal-header-search {
	flex: 0 0 auto;
	position: relative;
}

.search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: black;
	padding: 0.5rem;
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 0.3s ease;
}

.search-toggle:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.search-toggle svg {
	width: 20px;
	height: 20px;
}

.universal-search-form {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	visibility: hidden;
	width: 0;
}

.universal-search-form.active {
	opacity: 1;
	visibility: visible;
	width: 250px;
}

.universal-search-form .search-field {
	border: none;
	color: black;
	padding: 2px 1rem;
	width: 100%;
	outline: none;
	border-radius: 4px;
}

.universal-search-form .search-field::placeholder {
	color: black;
}

button.universal-mobile-menu-toggle:hover {
	background-color: transparent !important;
}
.universal-header-mobile-toggle {
	margin-left: 20px !important;
}
.universal-search-form .search-submit {
	border: none;
	background: transparent;
	color: white;
	padding: 0.5rem;
	cursor: pointer;
	flex-shrink: 0;
}

.universal-header-navigation.active {
	padding: 10px;
	background-color: #efeded;
	border: 1px solid #777777;
}

.universal-header-account {
	flex: 0 0 auto;
}

.universal-account-link {
	display: flex;
	align-items: center;
	color: black;
	text-decoration: none;
	padding: 0.5rem;
	border-radius: 4px;
	transition: background-color 0.3s ease;
}

.universal-account-link:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.universal-account-link svg {
	width: 24px;
	height: 24px;
}

/* ===== Wishlist Icon ===== */
.universal-header-wishlist {
	flex: 0 0 auto;
}

.universal-wishlist-link {
	display: flex;
	align-items: center;
	color: black;
	text-decoration: none;
	padding: 0.5rem;
	border-radius: 4px;
	transition: background-color 0.3s ease;
}

.universal-wishlist-link:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.universal-wishlist-link svg {
	width: 24px;
	height: 24px;
}

.universal-header-cart {
	flex: 0 0 auto;
	position: relative;
}

.universal-cart-dropdown {
	position: relative;
	overflow: visible !important;
}

.universal-cart-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: black;
	text-decoration: none;
	font-weight: 300;
	padding: 0.5rem;
}

.universal-cart-link:hover {
	color: #6a263a;
}

.universal-header-row button,
.universal-header-row a {
	padding: 6px !important;
	padding-left: 0 !important;
	height: 100%;
}

.cart-item a.remove-item {
	padding-left: 6px !important;
}

button.search-submit {
	padding-left: 6px !important;
}

input.search-field {
	background-color: white !important;
}

/* Cart Dropdown Styles */
.universal-cart-dropdown-content {
	position: fixed;
	top: 70px;
	right: 16px;
	width: 350px;
	background: white;
	border-radius: 8px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s ease;
	max-height: 400px;
	overflow-y: auto;
}

.universal-cart-dropdown:hover .universal-cart-dropdown-content {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Responsive positioning dla cart dropdown */
@media (min-width: 640px) and (max-width: 1023px) {
	.universal-cart-dropdown-content {
		right: 24px;
	}
}

@media (min-width: 1024px) and (max-width: 1535px) {
	.universal-cart-dropdown-content {
		right: 32px;
	}
}

@media (min-width: 1536px) {
	.universal-cart-dropdown-content {
		right: calc((100vw - 1536px) / 2);
	}
}

.cart-items {
	padding: 1rem;
	border-bottom: 1px solid #eee;
}

.cart-item {
	display: flex;
	justify-content: flex-start;
	gap: 25px;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid #f5f5f5;
	position: relative;
}

.cart-item:last-child {
	border-bottom: none;
}

.cart-item-image {
	width: 50px;
}

.cart-item-image img {
	width: 50px;
	height: 50px;
	object-fit: cover;
}

.cart-item-details {
	min-width: 0;
}

.cart-item-title {
	margin: 0 0 0.25rem 0;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cart-item-title a {
	color: #333;
	text-decoration: none;
}

.cart-item-title a:hover {
	color: var(--accent-color, #ff6b35);
}

.cart-item-quantity {
	font-size: 12px;
	color: #666;
}

.cart-item-remove {
	width: 30px;
	height: 30px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cart-item-remove .remove-item,
.universal-cart-dropdown-content .remove-item {
	color: #666 !important;
	text-decoration: none !important;
	font-size: 18px !important;
	line-height: 18px !important;
	font-weight: 300 !important;
	width: 28px !important;
	height: 28px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
	background: #f0f0f0 !important;
	line-height: 1 !important;
	visibility: visible !important;
	opacity: 1 !important;
	z-index: 10 !important;
}

.cart-item-remove .remove-item:hover,
.universal-cart-dropdown-content .remove-item:hover {
	background: #ff4444 !important;
	color: white !important;
	text-decoration: none !important;
	transform: scale(1.1) !important;
}

.cart-dropdown-footer {
	padding: 1rem;
}

/* Gift product styling in cart dropdown */
.universal-cart-dropdown-content .gift-badge {
	display: block;
	background: linear-gradient(135deg, #c9a96e, #b8944f);
	color: #fff;
	font-size: 8px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 3px;
	margin-right: 3px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	vertical-align: middle;
}

.universal-cart-dropdown-content .gift-original-price {
	color: #999;
	font-size: 0.85em;
	text-decoration: line-through;
	margin-right: 2px;
}

.universal-cart-dropdown-content .gift-price {
	color: #c9a96e;
	font-weight: 700;
	text-decoration: none;
}

.cart-total-amount {
	margin-bottom: 1rem;
	text-align: center;
	font-size: 16px;
	color: #333;
}

.cart-actions {
	display: flex;
	gap: 0.5rem;
}

.btn-checkout-single {
	width: 100%;
	padding: 0.75rem;
	text-align: center;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 500;
	transition: all 0.3s ease;
	background: var(--theme-primary);
	color: white;
	font-size: 16px;
}

.btn-checkout-single:hover {
	background: var(--theme-primary);
	opacity: 0.8;
	transform: translateY(-1px);
}

/* Legacy styles dla kompatybilności */
.btn-view-cart,
.btn-checkout {
	flex: 1;
	padding: 0.75rem;
	text-align: center;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 500;
	transition: all 0.3s ease;
}

.btn-view-cart {
	background: #f5f5f5;
	color: #333;
}

.btn-view-cart:hover {
	background: #eee;
}

.btn-checkout {
	background: var(--accent-color, #ff6b35);
	color: white;
}

.btn-checkout:hover {
	background: var(--accent-color-dark, #e55a2b);
}

.cart-empty {
	padding: 2rem 1rem;
	text-align: center;
}

.cart-empty p {
	margin: 0 0 1rem 0;
	color: #666;
}

header .cart-empty .btn-continue-shopping {
	background: #6a263a;
	color: white;
	padding: 10px 20px !important;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.3s ease;
}

/* Ukryj oryginalne pole wyszukiwania Storefront */
.site-search,
.storefront-product-search,
.widget_product_search {
	display: none !important;
}

/* Upewnij się że nasze pole search jest widoczne */
.universal-header-search {
	display: flex !important;
}

/* Mobile toggle - ukryty na desktop, widoczny na mobile */
.universal-header-mobile-toggle {
	display: none;
	flex: 0 0 auto;
}

/* Ukryj stary/duplikat universal-mobile-toggle */
.universal-mobile-toggle {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

.universal-mobile-menu-toggle {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 5px;
	position: relative;
	width: 35px;
	height: 35px;
	justify-content: center;
}

.universal-mobile-menu-toggle span {
	width: 25px;
	height: 3px;
	background: black;
	transition: all 0.3s ease;
	display: block;
}

/* Animacja do X gdy aktywny */
.universal-mobile-menu-toggle.active span:nth-child(1) {
	transform: rotate(45deg) translateY(9px);
}

.universal-mobile-menu-toggle.active span:nth-child(2) {
	opacity: 0;
}

.universal-mobile-menu-toggle.active span:nth-child(3) {
	transform: rotate(-45deg) translateY(-9px);
}

.cart-count {
	background: #6a263a;
	color: white;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: bold;
}

/* Responsive */
@media (max-width: 767px) {
	.universal-header-row {
		flex-wrap: wrap;
		gap: 0;
	}

	.universal-header-logo {
		order: 1;
		flex: 0 0 auto;
		margin-right: auto;
	}

	.universal-header-account {
		order: 2;
		flex: 0 0 auto;
		margin-left: auto;
	}

	.universal-header-wishlist {
		order: 3;
		flex: 0 0 auto;
	}

	.universal-header-cart {
		order: 4;
		flex: 0 0 auto;
	}

	.universal-header-search {
		order: 5;
		flex: 0 0 auto;
	}

	.universal-header-mobile-toggle {
		order: 6;
		flex: 0 0 auto;
		display: block !important;
	}

	.universal-header-navigation {
		order: 7;
		flex-basis: 100%;
		margin-left: 0;
		margin-top: 1rem;
		display: none;
	}

	.universal-header-navigation.active {
		display: block;
	}

	.universal-primary-menu {
		flex-direction: column;
		gap: 1rem;
	}
}

form.universal-search-form.active {
	z-index: 100;
	border: 1px solid black;
}

@media (max-width: 480px) {
	#site-header .universal-header-search {
		display: none;
	}
}

/* === RESPONSIVE CONTAINER SYSTEM === */

/* Globalny box-sizing dla wszystkich elementów */
*,
*:before,
*:after {
	box-sizing: border-box;
}

/* Mobile First - 0 to 639px = 16px padding */
.col-full {
	/* padding-left: 16px !important;
	padding-right: 16px !important; */
	box-sizing: border-box !important;
	width: 100% !important;
}

/* Header też dostaje responsive padding */
.universal-header-layout {
	padding-left: 16px !important;
	padding-right: 16px !important;
	box-sizing: border-box !important;
	max-width: 1536px !important;
	margin: 0 auto !important;
	width: 100% !important;
	overflow: visible !important;
}

/* Small tablets - 640px to 1023px = 24px padding */
@media (min-width: 640px) and (max-width: 1023px) {
	/* .col-full {
		padding-left: 24px !important;
		padding-right: 24px !important;
	} */

	.universal-header-layout {
		padding-left: 24px !important;
		padding-right: 24px !important;
		max-width: 1536px !important;
		margin: 0 auto !important;
		overflow: visible !important;
	}
}

/* Large tablets/Desktop - 1024px to 1535px = 32px padding */
@media (min-width: 1024px) and (max-width: 1535px) {
	/* .col-full {
		padding-left: 32px !important;
		padding-right: 32px !important;
	} */

	.universal-header-layout {
		padding-left: 32px !important;
		padding-right: 32px !important;
		max-width: 1536px !important;
		margin: 0 auto !important;
		overflow: visible !important;
	}
}

/* Large screens - 1536px+ = no extra padding */
@media (min-width: 1536px) {
	/* .col-full {
		padding-left: 0 !important;
		padding-right: 0 !important;
	} */

	.universal-header-layout {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 1536px !important;
		margin: 0 auto !important;
		overflow: visible !important;
	}
}

/* Checkout strona specjalne ustawienia */
.woocommerce-checkout .col-full,
.woocommerce-page .col-full {
	max-width: 100% !important;
	overflow-x: hidden;
}

/* Ukryj przycisk Return to Cart na checkout */
.wc-block-components-checkout-return-to-cart-button,
.wc-block-checkout-return-to-cart-button,
.return-to-cart,
.back-to-cart,
a[href*='cart']:not(.btn-checkout):not(.universal-cart-link) {
	display: none !important;
}

/* Ukryj także breadcrumbs z cart step jeśli istnieją */
.woocommerce-breadcrumb a[href*='cart'],
.checkout-breadcrumb .cart-step {
	display: none !important;
}

/* Formularze checkout - nie mogą być szersze niż container */
.woocommerce-checkout .checkout,
.woocommerce-checkout .woocommerce,
.checkout-form,
#customer_details,
#order_review {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Kolumny checkout responsive */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	max-width: 100% !important;
	box-sizing: border-box !important;
}
/* Specjalne kontenery które nie powinny mieć dodatkowego paddingu */
.woocommerce .product,
.woocommerce-page .product,
.product-summary,
.woocommerce-tabs {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.site-header {
	background-color: white;
	color: black !important;
	box-shadow: none !important;
	border-bottom-color: transparent !important;
	max-width: none !important;
	margin: 0 !important;
	width: 100% !important;
}

header .col-full,
header .col-full .coll-full {
	padding: 0 !important;
}

@media (max-width: 639px) {
	.universal-cart-dropdown .cart-count,
	.universal-cart-dropdown .cart-total {
		display: none;
	}

	.site-header {
		padding: 5px 0 !important;
	}

	#site-header .universal-header-row .universal-mobile-menu-toggle {
		padding: 0 !important;
	}

	.universal-header-search {
		justify-content: flex-end;
		margin: 0;
	}
}

@media (max-width: 640px) {
	#site-header {
		display: none !important;
	}

	.mobile-bottom-bar .universal-header-search,
	.mobile-bottom-bar .universal-header-mobile-toggle {
		display: flex !important;
		margin: 0 !important;
	}
}

/* Ukryj submenu na desktopie i pokaż przy hover */
@media (min-width: 768px) and (max-width: 1023px) {
	.universal-primary-menu li {
		position: relative;
	}

	.universal-primary-menu li > .sub-menu {
		display: none !important;
		visibility: hidden;
		opacity: 0;
	}

	/* Force close sticky states added by touch/menu scripts on tablets */
	.universal-primary-menu li.focus > .sub-menu,
	.universal-primary-menu li.sfHover > .sub-menu,
	.universal-primary-menu li:focus-within > .sub-menu {
		display: none !important;
		visibility: hidden;
		opacity: 0;
	}

	.universal-primary-menu li:hover > .sub-menu {
		display: block !important;
		visibility: visible;
		opacity: 1;
	}
}

@media (min-width: 1024px) {
	.universal-primary-menu li {
		position: relative;
	}
	/* Upewnij się, że menu nie rozciąga strony gdy dropdown jest otwarte */
	.universal-primary-menu,
	.universal-header-navigation,
	.universal-header-row,
	#site-header,
	.wrapper,
	body,
	html {
		overflow: visible !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
	}

	.universal-primary-menu li > .sub-menu {
		display: none !important;
		position: fixed !important;
		top: auto !important;
		left: auto !important;
		background: white;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
		border-radius: 6px;
		min-width: 180px;
		z-index: 9999999 !important;
		white-space: nowrap;
		box-sizing: border-box !important;
		max-height: calc(100vh - 140px) !important;
		overflow: auto !important;
		-webkit-overflow-scrolling: touch !important;
		margin-left: 0 !important;
		transform: translateZ(0) !important;
		will-change: transform !important;
		pointer-events: auto !important;
	}

	.universal-primary-menu li:hover > .sub-menu {
		display: block !important;
	}

	/* Wygląd linków w submenu */
	.universal-primary-menu .sub-menu a {
		display: block;
		padding: 0.5rem 1rem;
		color: inherit;
		text-decoration: none;
	}

	.universal-primary-menu .sub-menu a:hover {
		background: rgba(0, 0, 0, 0.03);
	}
}

li.menu-item,
li.menu-item a {
	padding-left: 0;
}

ul.sub-menu > li.menu-item {
	padding-left: 10px !important;
	padding-right: 0 !important;
}

@media (min-width: 768px) {
	.site-header {
		padding-top: 0 !important;
	}
}