/*
Theme Name: Osnovy Theme
Theme URI: https://yascheerka.com
Author: Yascheerka
Author URI: https://yascheerka.com
Description: Спеціально для Основ, з любов'ю
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.0
Version: 0.1.0
Text Domain: osnovy
Tags: крута тема, дуже крута тема, думаю найкрутіша тема
*/


:root {
	/* OP white */
	--osnovy-white: #FFFFFF;

	/* OP 30% gray */
	--osnovy-gray-30: #8599A1;

	/* OP 50% gray */
	--osnovy-gray-50: #65787F;

	/* OP black */
	--osnovy-black: #1A1A1A;

	/* OP blue */
	--osnovy-blue: #00B0EE;

	/* 5% gray */
	--osnovy-gray-5: #E6EEF1;

	/* OP gray-1 */

	--osnovy-gray-1: #F8F9FA;

	--osnovy-red: #CE0034;

	/* Notices */
	--osnovy-warning-bg: #FFF4CC; /* soft yellow */
	--osnovy-error-bg: #FFE2E0;   /* soft red */

	/* Borders */
	--osnovy-border-width: 1px;
	--osnovy-border-color: var(--osnovy-gray-30);
	--osnovy-border: var(--osnovy-border-width) solid var(--osnovy-border-color);
}

*{
	box-sizing: border-box;
}

body{
    color: var(--osnovy-black);
    font-size: 14px;
}

/* Global underline styling */
a {
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	color: var(--osnovy-black);
}

/* Header */
header { 
	border-bottom: var(--osnovy-border); 
	position: sticky;
	top: 0;
	z-index: 1001;
	background-color: var(--osnovy-white);
}

.w-full {
	width: 100%;
}

.header-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 20px; }
.header-left { flex: 0 0 auto; }
.header-right { flex: 1 1 auto; display: flex; align-items: flex-start; column-gap: 48px; flex-wrap: wrap; justify-content: flex-end; }
.header-right a { text-decoration: none; color: var(--osnovy-black); cursor: pointer; }
.header-right a:hover { text-decoration: underline; }

@media (max-width: 1344px) {
	.header-right {
		column-gap: 30px;
	}
}

@media (max-width: 1024px) {
	.header-inner{
		padding: 14px;
	}

	.mobile-logo .site-logo{
		height: 20px;
	}
	
	/* Ensure sticky header works on mobile */
	header {
		position: sticky;
		-webkit-position: sticky;
	}
}

.logo-wrapper {
	display: flex;
	align-items: center;
	gap: 24px;
}

.header-left .site-logo{
    display: block;
    max-width: 254px;
}

.header-left .site-logo img{
    display: block;
    width: 100%;
    height: auto;
}

.logo-hover-text {
	opacity: 0;
	font-size: 13px;
    max-width: 200px;
}

@media (max-width: 1400px) {
	.logo-hover-text {
		display: none;
	}
}

/* Mobile Menu Styles */
@media (max-width: 1200px) {

	/* Hide desktop header */
	.header-left,
	.header-right {
		display: none;
	}
	
	/* Show mobile header */
	.mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	
	.mobile-menu-toggle {
		background: none;
		border: none;
		color: var(--osnovy-black);
		font-size: 14px;
		cursor: pointer;
		text-decoration: none;
		padding: 0;
		font-family: 'IBM Plex Serif', serif;
	}
	
	.mobile-menu-toggle:hover {
		text-decoration: underline;
	}
	
	.mobile-logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.mobile-logo .site-logo {
		height: 20px;
	}

	.mobile-logo img{
		height: 20px;
	}
	
	.mobile-cart-toggle {
		color: var(--osnovy-black);
		text-decoration: none;
		font-size: 14px;
	}
	
	.mobile-cart-toggle:hover {
		text-decoration: underline;
	}
	
	/* Mobile Menu Modal - Now uses unified overlay system */
	.mobile-menu-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10000;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		pointer-events: none; /* Allow clicks to pass through to overlay */
	}
	
	.mobile-menu-modal.active {
		visibility: visible;
		opacity: 1;
	}
	
	.mobile-menu-modal.active .mobile-menu-content {
		pointer-events: auto; /* Allow clicks on the content itself */
	}
	
	/* Overlay - Now uses unified modal overlay system */
	.mobile-menu-overlay {
		/* This will be replaced by the unified overlay system */
		display: none;
	}
	
	/* Panel - slides from left like cart slides from right */
	.mobile-menu-content {
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		max-width: 400px;
		height: 100%;
		background: var(--osnovy-white);
		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		padding: 20px;
		overflow-y: auto;
	}
	
	.mobile-menu-modal.active .mobile-menu-content {
		left: 0;
	}
	
	.mobile-menu-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		padding: 12px 0;
	}
	
	
	.mobile-menu-lang-currency {
		display: flex;
		gap: 20px;
	}
	
	/* Mobile menu dropdowns - always visible */
	.mobile-menu-lang-currency .dropdown ul {
		position: static !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		box-shadow: none !important;
		background: transparent !important;
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
		height: auto !important;
		overflow: visible !important;
	}
	
	.mobile-menu-lang-currency .dropdown ul li {
		display: flex !important;
		column-gap: 10px !important;
		margin: 0 !important;
		padding: 0 !important;
		position: static !important;
	}
	
	.mobile-menu-lang-currency .dropdown ul li ul {
		position: static !important;
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		box-shadow: none !important;
		background: transparent !important;
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
		height: auto !important;
		overflow: visible !important;
		gap: 10px !important;
		flex-direction: row !important;
	}
	
	.mobile-menu-lang-currency .dropdown ul li ul li {
		display: inline-block !important;
		margin: 0 !important;
		padding: 0 !important;
		position: static !important;
	}
	
	.mobile-menu-lang-currency .dropdown ul li a {
		color: var(--osnovy-black) !important;
		text-decoration: none !important;
		font-size: 14px !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		border: none !important;
		font-weight: 400 !important;
	}
	
	
	.mobile-menu-lang-currency .dropdown ul li ul li a {
		color: var(--osnovy-gray-50) !important;
		font-weight: normal !important;
	}
	
	.mobile-menu-lang-currency .dropdown ul li ul li a:hover {
		text-decoration: underline !important;
	}

	.mobile-menu-search {
		margin-bottom: 36px;
	}
	
	/* Apply Ajax Search Lite styling to mobile menu */
	.mobile-menu-search .asl_w_container {
		width: 100% !important;
		max-width: 420px !important;
	}

	.mobile-menu-search .asl_m .probox {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		gap: 10px !important;
		padding: 0 20px !important;
		border: 1.4px solid var(--osnovy-gray-5) !important;
		height: 44px !important;
		border-radius: 100px !important;
		background: var(--osnovy-white) !important;
		box-sizing: border-box !important;
		box-shadow: none !important;
		overflow: hidden !important;
	}

	.mobile-menu-search .asl_m .probox * {
		border-color: var(--osnovy-gray-5) !important;
		background-color: transparent !important;
	}

	.mobile-menu-search .asl_m .probox:focus-within {
		border-color: var(--osnovy-gray-30) !important;
	}

	/* Hide settings button */
	.mobile-menu-search .asl_m .prosettings {
		display: none !important;
	}

	/* Input container */
	.mobile-menu-search .asl_m .proinput {
		flex: 1 !important;
		height: 100% !important;
	}

	.mobile-menu-search .asl_m .proinput form {
		height: 100% !important;
		margin: 0 !important;
	}

	.mobile-menu-search .asl_m .proinput input.orig {
		width: 100% !important;
		height: 100% !important;
		border: none !important;
		background: transparent !important;
		font-family: 'IBM Plex Serif', serif !important;
		font-size: 13px !important;
		line-height: 17px !important;
		color: var(--osnovy-black) !important;
		padding: 0 !important;
		margin: 0 !important;
		box-shadow: none !important;
		outline: none !important;
		border-radius: 0 !important;
	}

	.mobile-menu-search .asl_m .proinput input.orig::placeholder {
		color: var(--osnovy-gray-30) !important;
		font-size: 13px !important;
		line-height: 17px !important;
		font-family: 'IBM Plex Serif', serif !important;
	}

	/* Hide autocomplete input */
	.mobile-menu-search .asl_m .proinput input.autocomplete {
		display: none !important;
	}

	/* Search button */
	.mobile-menu-search .asl_m .promagnifier {
		flex-shrink: 0 !important;
		border: none !important;
		background: transparent !important;
		padding: 0 !important;
		margin: 0 !important;
		cursor: pointer !important;
		font-family: 'IBM Plex Serif', serif !important;
		font-size: 13px !important;
		line-height: 17px !important;
		font-weight: 400 !important;
		color: var(--osnovy-black) !important;
		text-transform: capitalize !important;
		width: auto !important;
		height: auto !important;
		box-shadow: none !important;
	}

	.mobile-menu-search .asl_m .promagnifier:hover {
		text-decoration: underline !important;
		background: transparent !important;
	}

	.mobile-menu-search .asl_m .promagnifier .innericon {
		display: none !important;
	}
	
	/* Default UA label; overridden per-html lang below */
	.mobile-menu-search .asl_m .promagnifier::after {
		content: 'Шукати' !important;
	}
	
	html[lang|="en"] .mobile-menu-search .asl_m .promagnifier::after {
		content: 'Search' !important;
	}

	/* Hide loading and close */
	.mobile-menu-search .asl_m .proloading,
	.mobile-menu-search .asl_m .proclose {
		display: none !important;
	}
	
	.mobile-menu-navigation {
		margin-bottom: 20px;
	}
	
	.mobile-menu-navigation .menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.mobile-menu-navigation .menu li {
		margin-bottom: 0;
	}
	
	.mobile-menu-navigation .menu a {
		color: var(--osnovy-black);
		text-decoration: none;
		font-size: 14px;
		display: block;
	}

	nav.menu > ul, .menu > ul{
		flex-direction: column;
		gap: 10px;
	}
	
	.mobile-menu-navigation .menu a:hover {
		text-decoration: underline;
	}
	
	.mobile-menu-footer-links {
		margin-bottom: 20px;
	}
	
	.mobile-menu-footer-links .menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.mobile-menu-footer-links .menu li {
		margin-bottom: 12px;
	}
	
	.mobile-menu-footer-links .menu a {
		color: var(--osnovy-gray-50);
		text-decoration: none;
		font-size: 14px;
		display: block;
	}
	
	.mobile-menu-footer-links .menu a:hover {
		text-decoration: underline;
	}
	
	.mobile-menu-socials {
		margin-bottom: 20px;
	}
	
	.mobile-menu-socials .menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.mobile-menu-socials .menu li {
		margin-bottom: 12px;
	}
	
	.mobile-menu-socials .menu a {
		color: var(--osnovy-gray-50);
		text-decoration: none;
		font-size: 14px;
		display: block;
	}
	
	.mobile-menu-socials .menu a:hover {
		text-decoration: underline;
	}
	
	.mobile-menu-footer {
		margin-top: auto;
		padding-top: 20px;
	}
	
	.mobile-menu-footer p {
		color: var(--osnovy-black);
		font-size: 14px;
		margin: 0;
	}
}

@media (max-width: 1024px) {
	.mobile-menu-content{
		padding: 12px 12px 20px;
	}
	.mobile-menu-header{
		padding: 3px 0;
	}
}

@media (max-width: 768px) {
	.mobile-menu-content{
		max-width: 430px;
	}
}

/* Mobile Category Modal - Reuse mobile menu styles with minimal overrides */
@media (max-width: 767px) {
	/* Mobile category columns - single column layout */
	.mobile-category-columns {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
		padding-bottom: 20px;
	}
	
	.mobile-category-column {
		display: flex;
		flex-direction: column;
		gap: 10px;
		flex: 1;
		width: 100%;
	}
	
}

/* Hide mobile header on desktop */
@media (min-width: 1201px) {
	.mobile-header {
		display: none;
	}
	
	.mobile-menu-modal {
		display: none !important;
	}
}

/* Ensure desktop category navigation still works normally */
@media (min-width: 768px) {
	
	/* Keep desktop category navigation behavior */
	.osnovy-category-nav .category-nav-content {
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		padding: 0 20px;
		visibility: hidden;
		transition: max-height .3s ease, opacity .2s ease, visibility 0s .2s;
		width: 100%;
	}

	.osnovy-category-nav.active .category-nav-content {
		max-height: 600px;
		opacity: 1;
		visibility: visible;
		transition: max-height .3s ease, opacity .2s ease, visibility 0s;
		box-sizing: border-box;
	}
}

/* Author Page Styles */
.author-info-section {
	display: flex;
	border-bottom: 1px solid var(--osnovy-border-color);
	padding: 48px 20px 48px;
	justify-content: center;
}

.author-info-section-inner{
	display: flex;
	flex-direction: row;
	gap: 20px;
	max-width: 600px;
	width: 100%;
}

.author-info-section .author-name{
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 32px;
	line-height: 42px;
	letter-spacing: -0.01em;
	margin-bottom: 20px;
}

.author-info-section .author-photo {
	flex-shrink: 0;
}

.author-info-section .author-image {
	width: 120px;
	height: 120px;
	object-fit: cover;
}

.author-info-section .author-placeholder {
	width: 200px;
	height: 200px;
	background: var(--osnovy-gray-5);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.author-info-section .author-initials {
	font-family: 'IBM Plex Serif';
	font-size: 48px;
	font-weight: 600;
	color: var(--osnovy-gray-50);
}

.author-info-section .author-details {
	flex: 1;
}

.author-info-section .author-name {
	font-family: 'IBM Plex Serif';
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--osnovy-black);
	margin: 0 0 20px 0;
}

.author-info-section .author-biography {
	font-family: 'IBM Plex Serif';
	font-size: 16px;
	line-height: 1.6;
	color: var(--osnovy-black);
}

.author-info-section .author-biography p {
	margin: 0 0 16px 0;
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.author-info-section .author-biography p:last-child {
	margin-bottom: 0;
}



.no-products-message {
	text-align: center;
	padding: 60px 20px;
	color: var(--osnovy-gray-50);
	font-size: 16px;
	min-height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {

	.author-info-section-inner{
		flex-direction: column;
		gap: 14px;
	}

	.author-info-section {
		padding: 32px 12px 32px;
	}
	
	.author-info-section .author-image,
	.author-info-section .author-placeholder {
		width: 150px;
		height: 150px;
		margin: 0 auto;
	}
	
	.author-info-section .author-initials {
		font-size: 36px;
	}
	
	.author-info-section .author-name {
		font-size: 24px;
		margin-bottom: 10px;
	}
	
	.author-info-section .author-biography p{
		font-size: 12px;
	}
	
}

.logo-wrapper:hover .logo-hover-text {
	opacity: 1;
}

/* Footer */
.osnovy-footer .alignfull { padding: 96px 20px 20px 20px; 
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;}
.osnovy-footer-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 80px; width: 100%; }
.osnovy-footer-grid .footer-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.osnovy-footer-grid .footer-right .menu-socials,
.osnovy-footer-grid .footer-right .menu-links { justify-content: flex-end; }

.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-brand .footer-logo { height: 32px; width: auto; display: block; }
.footer-brand-text { color: var(--osnovy-black); font-size: 11px; line-height: 14px; }
.footer-contacts { display: flex; flex-direction: column; gap: 4px; }
.footer-contacts a { display: block; color: var(--osnovy-black); text-decoration: none; font-size: 13px; line-height: 17px; }
.footer-contacts a:hover { text-decoration: underline; }

.footer-newsletter { 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
 }
.footer-newsletter-title { font-weight: 400; font-size: 16px; margin: 0; text-align: center; }
.footer-newsletter-form { max-width: 420px; margin: 0 auto; }
.wpcf7-not-valid-tip{
    display: none;
}

.wpcf7-spinner{
    display: none;
}

.footer-socials .menu-socials,
.footer-links .menu-links { list-style: none; margin: 0; padding: 0; display: flex; column-gap: 10px; row-gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.footer-socials .menu-socials a,
.footer-links .menu-links a { color: var(--osnovy-gray-50); text-decoration: none; font-size: 13px; line-height: 17px; }
.footer-socials .menu-socials a:hover,
.footer-links .menu-links a:hover { text-decoration: underline; }

/* Footer newsletter (CF7) styling via dedicated wrapper */
.footer-newsletter-form .footer-subscribe-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--osnovy-gray-5);
    border-radius: 100px;
    padding: 0 12px;
    height: 44px;
    background: #fff;
    max-width: 420px;
    margin: 0 auto;
    box-sizing: border-box;
}
.footer-newsletter-form .footer-subscribe-wrapper > p { margin: 0 !important; display: flex; align-items: center; gap: 12px; width: 100%; }
.footer-newsletter-form .footer-subscribe-wrapper .wpcf7-form-control-wrap { flex: 1 1 auto; }
.footer-newsletter-form .footer-subscribe-wrapper input[type="email"] {
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    padding: 0 8px 0 8px;
    font-family: 'IBM Plex Serif', serif;
    font-size: 13px;
    line-height: 17px;
    color: var(--osnovy-black);
    background: transparent;
}
.footer-newsletter-form .footer-subscribe-wrapper input[type="email"]::placeholder { color: var(--osnovy-gray-30); }
.footer-newsletter-form .footer-subscribe-wrapper input[type="submit"] {
    border: none;
    background: transparent;
    color: var(--osnovy-black);
    font-family: 'IBM Plex Serif', serif;
    font-size: 13px;
    line-height: 17px;
    padding: 0 8px;
    cursor: pointer;
    white-space: nowrap;
}
.footer-newsletter-form .footer-subscribe-wrapper input[type="submit"]:hover { text-decoration: underline; }

/* CF7 response output styled notice with slide-from-top */
.footer-newsletter .wpcf7-response-output {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    gap: 10px;
    max-width: 100%;
    border-radius: 20px;
    text-align: center;
    font-family: 'IBM Plex Serif', serif;
    font-size: 13px;
    line-height: 20px;
    color: var(--osnovy-black);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease;
    margin: 0 auto;
}
.footer-newsletter .wpcf7-response-output.is-visible { opacity: 1 !important; transform: translateY(0) !important; }
/* Animate when CF7 toggles aria-hidden or we add .is-visible */
.footer-newsletter .wpcf7-form.invalid .wpcf7-response-output,
.footer-newsletter .wpcf7-form.failed .wpcf7-response-output,
.footer-newsletter .wpcf7-form.sent .wpcf7-response-output,
.footer-newsletter .wpcf7-response-output.is-visible {
    animation: newsletterNoticeIn .25s ease both;
}

@keyframes newsletterNoticeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.footer-newsletter .wpcf7-response-output.animate-in { animation: newsletterNoticeIn .25s ease forwards; }

.wpcf7 form .wpcf7-response-output{
    margin: 12px 0 0;
    padding: 16px 20px;
}

.wpcf7 .wpcf7-response-output{
    border: none !important;
}

/* Colors per state */
.footer-newsletter .wpcf7-form.invalid .wpcf7-response-output,
.footer-newsletter .wpcf7-form.failed .wpcf7-response-output,
.footer-newsletter .wpcf7-form .wpcf7-response-output.is-error {
    background: var(--osnovy-error-bg);
}
.footer-newsletter .wpcf7-form .wpcf7-response-output.is-warning {
    background: var(--osnovy-warning-bg);
}
.footer-newsletter .wpcf7-form.sent .wpcf7-response-output{
    background-color: var(--osnovy-gray-5);
}

/* Footer responsive */

@media (max-width: 900px){
	.osnovy-footer-grid { flex-direction: column; gap: 40px; }
	.footer-socials .menu-socials,
	.footer-links .menu-links { justify-content: flex-start; }
	.osnovy-footer-grid .footer-right .menu-socials, .osnovy-footer-grid .footer-right .menu-links{
		justify-content: flex-start;
	}
	.osnovy-footer-grid .footer-right{
		gap: 16px;
	}
	.osnovy-footer .alignfull{
		padding-top: 128px;
	}

	.load-more-section{
		margin-bottom: 0 !important;
	}
}


.header-right-wrapper{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
}

/* Dropdown (lang/currency) */
.dropdown { position: relative; }
.dropdown > ul { list-style: none; margin: 0; padding: 0; }
.dropdown > ul > li { position: relative; }
.dropdown > ul > li > a { text-decoration: none; color: var(--osnovy-black); cursor: pointer; }
.dropdown > ul > li > a:hover { text-decoration: underline; }
.dropdown > ul > li > ul { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
	display: flex;
	flex-direction: column; 
	gap: 10px;
	overflow-y: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transition: max-height .3s ease, opacity .2s ease, margin .2s ease;
}
.dropdown > ul > li:hover > ul { 
	max-height: 600px; 
	opacity: 1; 
	visibility: visible; 
	margin-top: 10px;
}
.dropdown > ul > li > ul > li { white-space: nowrap; padding: 0; }
.dropdown > ul > li > ul > li > a { text-decoration: none; color: var(--osnovy-black); }
.dropdown > ul > li > ul > li > a:hover { text-decoration: underline; }

/* Primary nav menu (wherever it's placed) */
nav.menu > ul,
.menu > ul { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
	display: flex;
	gap: 14px;
	align-items: start;
}
nav.menu ul li,
.menu ul li { 
	display: inline-block;
	vertical-align: top;
}

nav.menu ul li > a,
.menu ul li > a { 
	text-decoration: none; 
	color: var(--osnovy-black); 
	white-space: nowrap; 
	display: block;
    font-size: 14px;
}
nav.menu ul li > a:hover,
.menu ul li > a:hover { text-decoration: underline; }

/* Container needs positioning context */
nav.menu > ul > li:has(> ul),
.menu > ul > li:has(> ul) {
	position: relative;
}

/* Link positioned absolutely to stay at top */
nav.menu > ul > li:has(> ul) > a,
.menu > ul > li:has(> ul) > a {
	position: relative;
	z-index: 10;
}

/* Spacer pushes header down, comes after link */
nav.menu > ul > li:has(> ul)::after,
.menu > ul > li:has(> ul)::after {
	content: '';
	display: block;
	height: 0;
	transition: height 0.3s ease, margin 0.3s ease;
	margin-top: 0;
}

nav.menu > ul > li:has(> ul):hover::after,
.menu > ul > li:has(> ul):hover::after {
	height: var(--submenu-height, 200px);
	margin-top: 10px;
}

/* Submenu at fixed position based on link height */
nav.menu > ul > li > ul,
.menu > ul > li > ul { 
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.2s ease;
	position: absolute;
	top: calc(var(--link-height, 20px) + 12px);
	left: 0;
	z-index: 100;
}

nav.menu > ul > li:hover > ul,
.menu > ul > li:hover > ul { 
	max-height: 600px;
	opacity: 1;
	visibility: visible;
	margin-left: 16px;
}

@keyframes slideDown {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}
nav.menu ul li ul li,
.menu ul li ul li { padding: 0; }
nav.menu ul li ul li a,
.menu ul li ul li a { text-decoration: none; color: var(--osnovy-black); white-space: nowrap; }

/* Reusable Components */

/* Field */
.field {
	width: 100%;
	height: 44px;
	padding: 10px 20px;
	font-size: 13px;
	line-height: 17px;
	color: var(--osnovy-black);
	background: #fff;
	border: 1.4px solid var(--osnovy-gray-5);
	border-radius: 100px;
	font-family: 'IBM Plex Serif', serif;
	font-weight: 400;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.field:focus {
	outline: none;
	border-color: var(--osnovy-gray-30);
	border-width: 1.4px;
}

.field::placeholder {
	color: var(--osnovy-gray-30);
	font-size: 13px;
	line-height: 17px;
	font-weight: 400;
}

/* Field with Button */
.field-with-button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 0 20px;
	border: 1.4px solid var(--osnovy-gray-5);
	height: 44px;
	border-radius: 100px;
	background: #fff;
	box-sizing: border-box;
}

.field-with-button:focus-within {
	border-color: var(--osnovy-gray-30);
}

.field-with-button .field {
	border: none;
	flex: 1;
	height: 100%;
	padding: 0;
	background: transparent;
	line-height: 17px;
    border-radius: 0;
}

.field-with-button .button {
	border: none;
	flex-shrink: 0;
	height: auto;
	padding: 0;
	background: transparent;
	color: var(--osnovy-black);
	font-size: 13px;
	line-height: 17px;
	font-family: 'IBM Plex Serif', serif;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	text-transform: capitalize;
}

.field-with-button .button:hover {
	text-decoration: underline;
}

/* Input Default */
.input-default {
	padding: 10px 16px;
	background: var(--osnovy-white);
	border: 1.4px solid var(--osnovy-gray-5);
	border-radius: 100px;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
	font-family: 'IBM Plex Serif', serif;
	font-size: 13px;
	line-height: 17px;
	font-weight: 400;
}

textarea.input-default{
	height: 64px !important;
	border-radius: 20px;
}

textarea.input-default::placeholder{
	font-family: 'IBM Plex Serif', serif;
	color: var(--osnovy-gray-30);
	font-size: 13px;
	line-height: 17px;
	font-weight: 400;
}

.input-default:focus {
	outline: none;
	border-color: var(--osnovy-gray-30);
}

/* Select styled like input-default (country, street type, etc.) */
select.input-default{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--osnovy-white);
	/* Use same arrow as .sort-arrow for consistency */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L6 6M10.2929 1L5.29289 6' stroke='%2365787F'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
	cursor: pointer;
}

/* Ensure NP address street-type select fills its column */
.np-accordion select.input-default{
	width: 100%;
}

/* Arrow inside NP dropdowns (city/warehouse/street-type) */
.np-dd{
	position: relative;
}
.np-dd .np-input{
	padding-right: 40px;
}
.np-dd .sort-arrow{
	position: absolute;
	width: 10px;
	height: 5px;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L6 6M10.2929 1L5.29289 6' stroke='%2365787F'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
}

/* Select2: use same arrow as custom dropdowns and reserve space on the right */
.select2-container .select2-selection--single .select2-selection__rendered{
	padding-right: 40px !important;
}
.select2-container .select2-selection--single .select2-selection__arrow{
	right: 14px;
	height: 100%;
}
.select2-container .select2-selection--single .select2-selection__arrow b{
	border: none !important;
	width: 10px;
	height: 5px;
	margin: 0 !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L6 6M10.2929 1L5.29289 6' stroke='%2365787F'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
/* Close Button */
.close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--osnovy-black);
    font-family: 'IBM Plex Serif', serif;
    font-size: 14px;
    line-height: 17px;
	padding: 0;
}

.close-button:hover {
	text-decoration: underline;
}

/* Variant for back-link appearance when used in headers */
.checkout-back-link{
    font-size: 14px;
    line-height: 17px;
}

/* Search Modal */
.search-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: #fff;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 10px 20px;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

@media (max-width: 1024px) {
	.search-modal{
		display: none;
	}
}

.search-modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

.search-modal-inner {
	width: 100%;
	max-width: 1512px;
}

.search-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
    padding: 10px 0;
}

.search-modal-title {
	font-size: 24px;
	font-weight: 400;
	margin: 0;
}

.search-modal-content {
	width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#search-results-container {
	margin-top: 24px;
}

/* Ajax Search Lite Styling */
.search-modal .asl_w_container {
	width: 100% !important;
    max-width: 420px !important;
}

.search-modal .asl_m .probox {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 20px !important;
	border: 1.4px solid var(--osnovy-gray-5) !important;
	height: 44px !important;
	border-radius: 100px !important;
	background: var(--osnovy-white) !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
	overflow: hidden !important;
}

.search-modal .asl_m .probox * {
	border-color: var(--osnovy-gray-5) !important;
	background-color: transparent !important;
}

.search-modal .asl_m .probox:focus-within {
	border-color: var(--osnovy-gray-30) !important;
}

.woocommerce ul.products::before, .woocommerce ul.products::after{
	content: none;
}

/* Hide settings button */
.search-modal .asl_m .prosettings {
	display: none !important;
}

/* Input container */
.search-modal .asl_m .proinput {
	flex: 1 !important;
	height: 100% !important;
}

.search-modal .asl_m .proinput form {
	height: 100% !important;
	margin: 0 !important;
}

.search-modal .asl_m .proinput input.orig {
	width: 100% !important;
	height: 100% !important;
	border: none !important;
	background: transparent !important;
	font-family: 'IBM Plex Serif', serif !important;
	font-size: 13px !important;
	line-height: 17px !important;
	color: var(--osnovy-black) !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	border-radius: 0 !important;
    
}

div.asl_m .probox .proinput{
    padding: 0 !important;
    margin: 0 !important;
}

div#ajaxsearchlite1 .probox .proinput input, div.asl_w .probox .proinput input{
    color: var(--osnovy-black) !important;
    font-family: 'IBM Plex Serif', serif !important;
}

div.asl_w{
    background: none !important;
}

.search-modal .asl_m .proinput input.orig::placeholder {
	color: var(--osnovy-gray-30) !important;
	font-size: 13px !important;
	line-height: 17px !important;
	font-family: 'IBM Plex Serif', serif !important;
}

/* Additional placeholder selectors for Ajax Search Lite */
#ajaxsearchlite1 .probox .proinput input::placeholder,
div.asl_w .probox .proinput input::placeholder {
	color: var(--osnovy-gray-30) !important;
	font-size: 13px !important;
	line-height: 17px !important;
	font-family: 'IBM Plex Serif', serif !important;
}

/* Hide autocomplete input */
.search-modal .asl_m .proinput input.autocomplete {
	display: none !important;
}

/* Search button */
.search-modal .asl_m .promagnifier {
	flex-shrink: 0 !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	font-family: 'IBM Plex Serif', serif !important;
	font-size: 13px !important;
	line-height: 17px !important;
	font-weight: 400 !important;
	color: var(--osnovy-black) !important;
	text-transform: capitalize !important;
	width: auto !important;
	height: auto !important;
	box-shadow: none !important;
}

.search-modal .asl_m .promagnifier:hover {
	text-decoration: underline !important;
	background: transparent !important;
}

.search-modal .asl_m .promagnifier .innericon {
	display: none !important;
}

.search-modal .asl_m .promagnifier::after {
	content: 'Шукати' !important;
}

html[lang|="en"] .search-modal .asl_m .promagnifier::after {
	content: 'Search' !important;
}

/* Hide loading and close */
.search-modal .asl_m .proloading,
.search-modal .asl_m .proclose {
	display: none !important;
}

/* Results */
.search-modal .asl_r {
	margin-top: 24px !important;
}

/* Search results empty state */
.osnovy-search-empty {
	text-align: center;
	padding: 128px 16px 96px;
	max-width: 400px;
	margin: 0 auto;
}

.osnovy-search-empty .search-empty-title {
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 20px;
}

.osnovy-search-empty .search-empty-description {
	margin: 0 0 24px;
	color: var(--osnovy-gray-3);
}

.osnovy-search-empty .search-empty-actions {
	margin-bottom: 32px;
}

.osnovy-search-empty .search-empty-form .probox,
.osnovy-search-empty .search-empty-form .search-form-with-button {
	max-width: 640px;
	margin: 0 auto;
}

/* Results panel - global (modal and inline) */

/* Ensure instance-scoped selectors hit (front-end inline usage) */
div[id^="ajaxsearchlite"] .results {
	background: var(--osnovy-white) !important;
	border: 1.4px solid var(--osnovy-gray-5) !important;
	border-radius: 22px !important;
	box-shadow: none !important;
	width: 100% !important;
	overflow-y: auto !important;
	padding: 0 !important;
}

/* Result row */
.asl_w .asl_r .item,
.search-modal .asl_r .item {
	border-bottom: 1.4px solid var(--osnovy-gray-5) !important;
	padding: 12px 16px !important; /* Figma spacing */
	background: transparent !important;
}

/* Instance-scoped row overrides */
div[id^="ajaxsearchlite"] .results .item {
	padding: 12px 16px !important;
	background: transparent !important;
}
div[id^="ajaxsearchlite"] .results .item:last-child { border-bottom: none !important; }
div[id^="ajaxsearchlite"] .results .item:hover { background: var(--osnovy-gray-5) !important; }

div.asl_r .results .item .asl_content{
    padding: 0 !important;
}

div.asl_r .results .item{
    border: 0 !important;
}

div.asl_r .results .asl_nores{
    color: var(--osnovy-gray-50) !important;
    padding: 40px 0 !important;
}

div[id*='ajaxsearchlite'].asl_r .results{
    height: 100% !important;
	max-height: 300px !important;
}

div.asl_r{
    margin-top: 10px !important;
}


.asl_w .asl_r .item:last-child,
.search-modal .asl_r .item:last-child { border-bottom: none !important; }

.asl_w .asl_r .item:hover,
.search-modal .asl_r .item:hover { background: var(--osnovy-gray-5) !important; }

/* Title */
.asl_w .asl_r h3,
.search-modal .asl_r h3 {
	color: var(--osnovy-black) !important;
	font-family: 'IBM Plex Serif', serif !important;
	font-size: 13px !important; /* Figma */
	line-height: 17px !important;
	font-weight: 400 !important;
	margin: 0 !important;
}

.asl_w .asl_r h3 a,
.search-modal .asl_r h3 a { text-decoration: none !important; color: var(--osnovy-black) !important; }

/* Instance-scoped title */
div[id^="ajaxsearchlite"] .results h3 { 
	margin: 0 !important; 
	font-size: 13px !important; 
	line-height: 17px !important; 
	font-family: 'IBM Plex Serif', serif !important; 
	font-weight: 400 !important; 
}
div[id^="ajaxsearchlite"] .results h3 a { color: var(--osnovy-black) !important; text-decoration: none !important; }

/* Row layout: image + text */
.asl_w .asl_r .item .asl_content,
.search-modal .asl_r .item .asl_content {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

/* Instance-scoped row layout */
div[id^="ajaxsearchlite"] .results .item .asl_content {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.asl_w .asl_r .item .asl_image,
.search-modal .asl_r .item .asl_image {
	width: 40px !important;
	height: 40px !important;
	object-fit: cover !important;
	flex: none !important;
	border-radius: 4px !important;
}

/* Instance-scoped image sizing */
div[id^="ajaxsearchlite"] .results .asl_image {
	width: 40px !important;
	height: 40px !important;
	object-fit: cover !important;
	flex: none !important;
    margin: 0 !important;
}

div.asl_r .results .item .asl_content h3, div.asl_r .results .item .asl_content h3 a{
    font-family: 'IBM Plex Serif', serif !important;
}

/* Hide extra details block to match Figma list */
div[id^="ajaxsearchlite"] .results .item .etc { display: none !important; }

.search-modal .asl_r .desc {
	color: var(--osnovy-gray-50) !important;
	font-family: 'IBM Plex Serif', serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
}

div.asl_r.asl_w.vertical .results .item::after{
    content: none !important;
}

/* ===================================
   Single Product Page Custom Fields
   =================================== */

/* Product Main Layout */
.osnovy-single-product {
	margin: 0 auto;
}

.product-main-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 80px;
	border-bottom: 1px solid var(--osnovy-border-color);
}

@media (max-width: 768px) {
	.product-main-content {
		grid-template-columns: 1fr;
	}
}

.woocommerce-notices-wrapper{
	position: fixed;
    bottom: 20px;
    z-index: 1001;
    transform: translateX(-50%);
    left: 50%;
	max-width: 500px;
	width: calc(100% - 24px);
}

body.woocommerce-checkout .woocommerce > .woocommerce-message {
	display: none;

}

.woocommerce-error{
	border: none !important;
	border-radius: 20px !important;
	max-width: 600px !important;
	width: 100%;
	background-color: var(--osnovy-error-bg);
	margin: 0;
	color: var(--osnovy-black);
	padding: 16px 20px;
}

.woocommerce-error::after, .woocommerce-info::after, .woocommerce-message::after{
	content: none;
}


/* Dismiss button for WooCommerce error notices */

.woocommerce-notices-wrapper .wc-notice-close{
	border: none;
	background: transparent;
	color: inherit;
	font-size: 13px;
	line-height: 1.3;
	cursor: pointer;
}
.woocommerce-notices-wrapper .wc-notice-close:hover{
	text-decoration: underline;
}

.woocommerce-error::before{
	display: none !important;
}

/* Product Badges */
.product-badges {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 15px;
}

.product-badge {
	display: inline-block;
	padding: 5px 15px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 3px;
	background: var(--osnovy-black);
	color: #fff;
}

.badge-new {
	background: #4CAF50;
}

.badge-preorder {
	background: #FF9800;
}

.badge-sale {
	background: #F44336;
}

/* Product Authors */
.product-authors {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid #e0e0e0;
}

.product-authors .authors-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 15px;
	color: var(--osnovy-black);
}

.authors-list {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.author-item {
	display: flex;
	align-items: center;
}

.author-link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.author-link:hover {
	opacity: 0.7;
}

.author-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}

.author-name {
	font-size: 16px;
	font-weight: 500;
	color: var(--osnovy-black);
}

/* Download Snippet Button */
.product-download-snippet {
	margin-top: 20px;
}

.button-download {
	display: inline-block;
	padding: 12px 30px;
	background: var(--osnovy-black);
	color: #fff;
	text-decoration: none;
	border-radius: 3px;
	font-weight: 500;
	transition: background 0.3s ease;
}

.button-download:hover {
	background: #555;
	color: #fff;
}

/* Product Details Section */
.product-details-section {
	margin: 60px 0;
}

.product-details-section .section-title {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 30px;
	color: var(--osnovy-black);
}



/* Responsive adjustments */
@media (max-width: 768px) {
	.product-details-section {
		margin: 40px 0;
	}
}

/* ===================================
   Reusable Modal Header Component
   =================================== */

/* Reusable Modal Header */
.modal-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0px;
	flex: none;
	order: 0;
	align-self: stretch;
	flex-grow: 0;
	flex-shrink: 0;
	margin-bottom: 12px;
}

.modal-header-title {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: -0.02em;
	color: var(--osnovy-black);
	flex: none;
	order: 0;
	margin: 0;
	flex-grow: 0;
}


/* ===================================
   Cart Modal
   =================================== */

/* Prevent body scroll when modal open */
body.cart-modal-open {
	overflow: hidden;
}

/* Modal Container - Now uses unified overlay system */
.osnovy-cart-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	pointer-events: none; /* Allow clicks to pass through to overlay */
}

.osnovy-cart-modal.active {
	visibility: visible;
	opacity: 1;
}

.osnovy-cart-modal.active .osnovy-cart-panel {
	pointer-events: auto; /* Allow clicks on the panel itself */
}

/* Overlay - Now uses unified modal overlay system */
.osnovy-cart-overlay {
	/* This will be replaced by the unified overlay system */
	display: none;
}

/* Panel */
.osnovy-cart-panel {
	position: absolute;
	top: 0;
	right: -100%;
	width: 100%;
	max-width: 400px;
	height: 100%;
	background: #fff;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 12px 20px 36px;
}

.osnovy-cart-modal.active .osnovy-cart-panel {
	right: 0;
}

/* Header - Uses reusable modal header component classes directly in HTML */

/* Content */
.osnovy-cart-content {
	flex: 1;
	overflow-y: auto;
	padding: 0;
	background: #fff;
}

.osnovy-cart-loading {
	padding: 40px;
	text-align: center;
}

/* Add to cart success/error messages */
.osnovy-add-to-cart-message {
	position: fixed;
	top: 20px;
	right: 20px;
	padding: 15px 20px;
	border-radius: 4px;
	z-index: 10000;
	opacity: 0;
	transition: opacity 0.3s ease;
	font-family: 'IBM Plex Serif', serif;
	font-weight: 500;
}

.osnovy-add-to-cart-message.success {
	background: #4CAF50;
	color: white;
}

.osnovy-add-to-cart-message.error {
	background: #f44336;
	color: white;
}

/* Empty Cart State */
.osnovy-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 30px;
	text-align: center;
	min-height: 400px;
	width: 100%;
	background: #fff;
}

.empty-cart-title {
	font-family: 'IBM Plex Serif', serif;
	font-weight: 500;
	font-size: 24px;
	color: var(--osnovy-black);
	margin: 0 0 12px 0;
	line-height: 1.4;
}

.empty-cart-description {
	font-family: 'IBM Plex Serif', serif;
	font-weight: 400;
	font-size: 14px;
	color: var(--osnovy-gray-50);
	margin: 0 0 32px 0;
	line-height: 1.4;
	max-width: 280px;
}

/* Default Button Styles */
.button-default {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 12px 30px;
	gap: 10px;
	background: var(--osnovy-black);
	border-radius: 100px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.3s ease;
	
	/* Typography */
	font-family: 'IBM Plex Serif', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.01em;
	color: #fff;
	
	/* Layout */
	flex: none;
	order: 0;
	flex-grow: 0;
}

.button-default:hover {
	background: var(--osnovy-gray-30);
	color: #fff;
	text-decoration: none;
}

/* Secondary Button Styles */
.button-secondary {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 12px 30px;
	gap: 10px;
	background: #fff;
	border-radius: 100px;
	border: 1px solid var(--osnovy-black);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.3s ease;
	
	/* Typography */
	font-family: 'IBM Plex Serif', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.01em;
	color: var(--osnovy-black);
	
	/* Layout */
	flex: none;
	order: 0;
	flex-grow: 0;
}

.button-secondary:hover {
	background: var(--osnovy-gray-5);
	color: var(--osnovy-black);
	text-decoration: none;
}

/* Disabled states for both button types */
.button-default:disabled,
.button-secondary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.button-default:disabled:hover,
.button-secondary:disabled:hover {
	background: var(--osnovy-black);
	color: #fff;
	text-decoration: none;
}

.button-secondary:disabled:hover {
	background: #fff;
	color: var(--osnovy-black);
}

/* Small button variant */
.button-small {
	height: 28px;
	padding: 6px 16px;
	font-size: 12px;
	line-height: 16px;
}

/* Empty Cart Button - uses default button styles */
.empty-cart-button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 12px 30px;
	gap: 10px;
	background: var(--osnovy-black);
	border-radius: 100px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.3s ease;
	
	/* Typography */
	font-family: 'IBM Plex Serif', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.01em;
	color: #fff;
	
	/* Layout */
	flex: none;
	order: 0;
	flex-grow: 0;
}

.empty-cart-button:hover {
	background: var(--osnovy-gray-30);
	color: #fff;
	text-decoration: none;
}

/* No Products Found State */
.no-products-found {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 30px;
	text-align: center;
	min-height: 400px;
	width: 100%;
	background: #fff;
	height: 100%;
}

.no-products-icon {
	margin-bottom: 24px;
	color: var(--osnovy-gray-30);
	opacity: 0.6;
}

.no-products-icon svg {
	width: 64px;
	height: 64px;
	stroke: currentColor;
}

.no-products-title {
	font-family: 'IBM Plex Serif', serif;
	font-weight: 600;
	font-size: 24px;
	color: var(--osnovy-black);
	margin: 0 0 12px 0;
	line-height: 1.2;
}

.no-products-description {
	font-family: 'IBM Plex Serif', serif;
	font-weight: 400;
	font-size: 16px;
	color: var(--osnovy-gray-50);
	margin: 0 0 32px 0;
	line-height: 1.4;
	max-width: 400px;
}

.no-products-button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 12px 30px;
	gap: 10px;
	background: var(--osnovy-black);
	border-radius: 100px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.3s ease;
	
	/* Typography */
	font-family: 'IBM Plex Serif', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.01em;
	color: #fff;
	
	/* Layout */
	flex: none;
	order: 0;
	flex-grow: 0;
}

.no-products-button:hover {
	background: var(--osnovy-gray-30);
	color: #fff;
	text-decoration: none;
}

.osnovy-cart-loading .spinner {
	width: 40px;
	height: 40px;
	margin: 0 auto;
	border: 3px solid #f3f3f3;
	border-top: 3px solid var(--osnovy-black);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

/* Small loading spinner in header */
.osnovy-cart-loading-small {
	display: inline-block;
	margin-left: 8px;
	vertical-align: middle;
}

.spinner-small {
	width: 20px;
	height: 20px;
	border: 2px solid #f3f3f3;
	border-top: 2px solid var(--osnovy-black);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Cart Empty */
.osnovy-cart-empty {
	padding: 60px 30px;
	text-align: center;
	color: var(--osnovy-gray-30);
}

/* Cart Section */

.osnovy-cart-items-wrapper{
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: space-between;
	height: 100%;
}

.osnovy-cart-items-content{
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;
	position: relative;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.osnovy-cart-items-content::-webkit-scrollbar {
	display: none;
}

.osnovy-cart-items-content .scroll-gradient {
	position: sticky;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 30px;
	background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 100%);
	pointer-events: none;
	z-index: 1;
	opacity: 1;
	transition: opacity 0.3s ease;
	display: block;
	margin-top: -30px;
}

.osnovy-cart-items-content.scrolled-to-bottom .scroll-gradient {
	opacity: 0;
}

.osnovy-cart-section:not(:last-child):first-child{
	margin-bottom: 20px;
}

div.osnovy-cart-section h3.section-title {
	font-size: 14px;
	margin: 0 0 0 0;
	font-weight: 400;
	color: var(--osnovy-black);
}

.osnovy-cart-items-content .section-title-wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: relative;
	margin-bottom: 16px;
}

.osnovy-cart-items-content .section-title{
	margin: auto;
	text-align: center;
	padding: 0px 10px;
	background: #FFFFFF;
	font-weight: 400;
	font-size: 14px;
	color: var(--osnovy-black);
	display: inline;
	position: relative;
}

.osnovy-cart-items-content .section-title-wrapper::before{
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--osnovy-gray-5);
}

/* Cart Items */
.cart-items {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cart-item {
	display: flex;
	gap: 15px;
	position: relative;
}

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

.cart-item .item-image {
	width: 80px;
	flex-shrink: 0;
}

.cart-item .item-image img {
	aspect-ratio: 4/5;
	width: 83px;
	height: 100px;
	border: 1px solid var(--osnovy-gray-5);
}

.cart-item .item-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: space-between;
	padding-bottom: 6px;
	line-height: 1.3;
}

.item-details-wrapper{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	align-items: flex-start;
}

div.cart-item h4.item-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	color: var(--osnovy-black);
	line-height: 1.3;
}

div.cart-item h4.item-title a {
	color: var(--osnovy-black);
	text-decoration: none;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	font-size: 13px;
	line-height: 17px;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	max-width: 190px;
}

div.cart-item h4.item-title a:hover {
	text-decoration: underline;
}

.cart-item .item-author {
	font-size: 11px;
	color: var(--osnovy-black);
}

.cart-item .item-details-wrapper-inner{
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.cart-item .item-release-date {
	font-size: 11px;
	color: var(--osnovy-gray-30);
}

.cart-item .item-price-qty {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}

.cart-item .item-price .price-amount, .osnovy-cart-content .recommended-item-content .price-amount {
	font-family: 'IBM Plex Serif';
	font-weight: 400;
	font-size: 13px;
	color: var(--osnovy-black);
}

.cart-item .item-price .price-currency, .osnovy-cart-content .recommended-item-content .price-currency {
	font-family: 'IBM Plex Serif';
	font-weight: 400;
	font-size: 12px;
	color: var(--osnovy-black);
	margin-left: 2px;
}

/* Quantity Controls */
.quantity-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--osnovy-gray-5);
	border-radius: 20px;
	padding: 4px 8px;
}

.quantity-controls .qty-btn {
	background: none;
	border: none;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
	padding: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--osnovy-gray-50);
	transition: color 0.2s;
	margin-bottom: -1px;
}

.quantity-controls .qty-btn:hover {
	color: var(--osnovy-black);
}

.quantity-controls .qty-number {
	font-size: 14px;
	font-weight: 500;
	min-width: 20px;
	text-align: center;
}

/* Remove Button */
.cart-item .item-remove {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-size: 11px;
	line-height: 14px;
	color: var(--osnovy-gray-50);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	text-align: left;
}

.cart-item .item-remove:hover {
	text-decoration: underline;
}

/* Recommended Section */

.recommended-items {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--osnovy-gray-5);
	overflow: hidden;
	border-radius: 16px;
}

.recommended-item {
	display: flex;
	align-items: center;
}

.recommended-item:not(:last-child) {
	border-bottom: 1px solid var(--osnovy-gray-5);
}

.recommended-item-content{
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: space-between;
	height: 100%;
	width: 100%;
	padding: 10px;
}

.recommended-item .recommended-image {
	max-width: 65px;
	aspect-ratio: 4/5;
}

.recommended-item .recommended-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.recommended-item .recommended-info {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.recommended-item .recommended-title {
	font-size: 14px;
	font-weight: 400;
	color: var(--osnovy-black);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
}

.recommended-item .recommended-title-link {
	color: var(--osnovy-black);
	text-decoration: none;
	display: block;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.recommended-item .recommended-title-link:hover {
	text-decoration: underline;
}



/* Footer */
.osnovy-cart-footer {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: space-between;
	margin-top: 20px;
}

.osnovy-cart-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0px;
	font-size: 15px;
	padding: 0 5px;
}

.osnovy-cart-total .total-amount {
	font-weight: 500;
}

.osnovy-cart-total .total-amount .price-currency{
	font-size: 13px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.osnovy-cart-panel {
		max-width: 430px;
		padding: 12px 12px 20px;
	}

	.modal-header{
		padding: 0;
		margin-bottom: 32px;
	}
	
	.osnovy-cart-title {
		font-size: 20px;
	}

}

div.recommended-section h3.section-title{
	margin-bottom: 10px;
}

/* Hide stubborn WooCommerce headings on homepage */
.home .woocommerce-page-title,
.home .page-title,
.home .entry-title,
.home h1.page-title,
.home h1.entry-title,
.home .woocommerce-products-header__title {
	display: none !important;
}

/* Category Navigation Styles - Updated for permanent grid layout */
/* Logo Animation Styles */
.site-logo[data-logo-animation] {
	position: relative;
	display: inline-block;
}

.site-logo[data-logo-animation] .logo-alternative {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	z-index: 2;
}


/* 404 Error Page Styles */
.error-404-page {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 60vh;
	padding: 40px 20px;
}

.error-404-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
}

.error-404-number {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 500;
	font-size: 96px;
	line-height: 125px;
	text-align: center;
	letter-spacing: -0.02em;
	color: var(--osnovy-black);
	flex: none;
	flex-grow: 0;
}

.error-message-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0px;
	gap: 10px;
	flex: none;
	flex-grow: 0;
}

.error-title {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 500;
	font-size: 32px;
	line-height: 42px;
	text-align: center;
	letter-spacing: -0.02em;
	color: var(--osnovy-black);
	margin: 0;
	flex: none;
	order: 0;
	flex-grow: 0;
}

.error-description {
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	text-align: center;
	letter-spacing: 0.02em;
	color: var(--osnovy-black);
	margin: 0;
	flex: none;
	order: 1;
	align-self: stretch;
	flex-grow: 0;
}

.error-actions {
	margin-top: 20px;
}

/* Category Info Container */
.osnovy-category-info, .osnovy-search-info {
	border-bottom: 1px solid var(--osnovy-border-color);
	padding: 20px 20px 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

@media (max-width: 768px) {
	.osnovy-category-info, .osnovy-search-info {
		padding: 20px 12px 20px;
	}
}

/* Breadcrumbs Styles */
.osnovy-breadcrumbs{
	font-size: 14px;
	line-height: 1.4;
	color: var(--osnovy-gray-50);
}

.single-product .osnovy-breadcrumbs{
	margin-bottom: 24px;
}

.osnovy-search-info .search-title {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--osnovy-black);
	font-weight: 400;
	max-width: 600px;
	width: 100%;
}

.osnovy-breadcrumbs .breadcrumb-link {
	color: var(--osnovy-gray-50);
	text-decoration: none;
}

.osnovy-breadcrumbs .breadcrumb-link:hover {
	text-decoration: underline;
}

.osnovy-breadcrumbs .breadcrumb-current {
	color: var(--osnovy-black);
	font-weight: 400;
	text-decoration: none;
}

.osnovy-breadcrumbs .breadcrumb-current:hover {
	text-decoration: underline;
}

.osnovy-breadcrumbs .breadcrumb-separator {
	margin: 0 6px;
	color: var(--osnovy-gray-30);
}

.osnovy-category-description {
	margin-bottom: 0px;
	font-size: 14px;
	line-height: 1.6;
	width: 100%;
	max-width: 756px;
	color: var(--osnovy-black);
	margin-bottom: 16px;
}

.osnovy-category-nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	background: #fff;
	border-bottom: 1px solid var(--osnovy-border-color);
}

.category-nav-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 8px 20px;
	box-sizing: border-box;
	gap: 20px;
}

@media (max-width: 1024px) {
	.category-nav-header{
		padding: 8px 12px;
	}
}

.category-nav-title {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	max-width: calc((100% - (40px * 4)) / 5);
	width: 100%;
}

.category-nav-sort {
	display: flex;
	align-items: center;
	position: relative;
	max-width: 300px;
	width: 100%;
}

@media (max-width: 1024px) {
	.category-nav-sort, .sort-dropdown-modal{
		max-width: calc((100vw - (20px * 1)) / 2);
		width: 100% !important;
	}
}

/* Custom Dropdown Trigger */
.sort-dropdown-trigger {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10px 16px;
	gap: 10px;
	height: 44px;
	background: #fff;
	border-radius: 100px;
	cursor: pointer;
	position: relative;
	justify-content: space-between;
	width: 100%;
	border: 1px solid var(--osnovy-white);
	transition: all 0.2s ease;
}

.sort-dropdown-trigger:hover {
	border: 1px solid var(--osnovy-gray-30);
}

.sort-text {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	line-height: 17px;
	color: var(--osnovy-black);
	flex: none;
	order: 0;
	flex-grow: 0;
	z-index: 0;
}

.sort-arrow {
	position: absolute;
	width: 10px;
	height: 5px;
	right: 20px;
	top: 19.5px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L6 6M10.2929 1L5.29289 6' stroke='%2365787F'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.2s ease;
}

/* Reusable dropdown arrow for all dropdowns */
.dropdown-arrow {
	width: 8px;
	height: 5px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L6 6M10.2929 1L5.29289 6' stroke='%2365787F'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.2s ease;
}

/* Custom Dropdown Modal */
.sort-dropdown-modal {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1000;
	background: #fff;
	border: 1.4px solid var(--osnovy-gray-5);
	box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
	border-radius: 22px;
	width: 300px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.category-nav-sort.active .sort-dropdown-modal {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.category-nav-sort.active .sort-arrow {
	transform: rotate(180deg);
}

/* Sort Options */
.sort-option {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	width: 100%;
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	line-height: 17px;
	color: var(--osnovy-black);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sort-option:hover {
	background-color: var(--osnovy-gray-1);
}

.sort-option:first-child {
	padding-top: 14px;
}

.sort-option:last-child {
	padding-bottom: 12px;
}

/* Separator */
.sort-separator {
	width: 100%;
	height: 1px;
	background-color: var(--osnovy-gray-5);
	margin: 0;
}

/* Filter Section */
.sort-filter {
	display: flex;
	align-items: center;
	padding: 12px 16px 14px;
	width: 100%;
	background: #fff;
}

.sort-filter:hover {
	background: var(--osnovy-gray-1);
}

/* Custom Toggle Component */
.custom-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	width: 100%;
	justify-content: flex-start;
	position: relative;
}

.toggle-track {
	position: relative;
	width: 36px;
	height: 20px;
	background: #fff;
	border: 2px solid var(--osnovy-gray-30);
	border-radius: 12px;
	transition: all 0.3s ease;
}

.toggle-thumb {
	position: absolute;
	width: 20px;
	height: 20px;
	background: var(--osnovy-gray-30);
	border-radius: 50%;
	transition: all 0.3s ease;
	z-index: 1;
}

.toggle-label {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: var(--osnovy-black);
}

/* Toggle Active State */

.category-nav-title h2 {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: -0.01em;
	color: var(--osnovy-black);
	margin: 0;
}

.category-nav-title .category-count {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: -0.01em;
	color: var(--osnovy-black);
}


.category-nav-content {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	padding: 0 20px;
	visibility: hidden;
	transition: max-height .3s ease, opacity .2s ease, visibility 0s .2s;
	width: 100%;
}

.osnovy-category-nav.active .category-nav-content {
	max-height: 600px;
	opacity: 1;
	visibility: visible;
	transition: max-height .3s ease, opacity .2s ease, visibility 0s;
	box-sizing: border-box;
}


.category-nav-columns {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 40px;
	width: 100%;
	padding-bottom: 20px;
}

@media (max-width: 1299px) {
	.category-nav-columns {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
	.category-nav-title{
		max-width: calc((100% - (20px * 2)) / 3);
	}
}

@media (max-width: 799px) {
	.category-nav-columns {
		grid-template-columns: repeat(2, 1fr);
	}
	.category-nav-title{
		max-width: calc((100% - (20px * 1)) / 2);
	}
}

.category-column {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	min-width: 200px;
}

.category-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.category-item.main-category {
	margin-bottom: 0;
}

.category-item.subcategory {
	margin-left: 24px;
}

.category-link {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--osnovy-black);
	transition: color 0.2s ease;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.category-link:hover .category-name {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.category-name {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: -0.01em;
	color: var(--osnovy-black);
	position: relative;
	z-index: 1;
	background: #fff;
	padding-right: 3px;
}

.category-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--osnovy-gray-50);
	font-size: 12px;
	letter-spacing: 3px;
	z-index: 0;
	background: #fff;
}

.category-count {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: -0.01em;
	color: var(--osnovy-black);
	position: relative;
	z-index: 2;
	background: #fff;
	padding-left: 3px;
}

/* Active state for "Усі видання" */
.category-item.all-editions.active .category-name {
	font-weight: 600;
}

.category-item.all-editions.active .category-count {
	font-weight: 600;
}

.subcategories {
	margin-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.subcategories .category-item {
	margin-left: 0;
	margin-bottom: 0;
}

.subcategories .category-link {
	font-size: 13px;
	color: var(--osnovy-gray-50);
}

.subcategories .category-link:hover .category-name {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

/* Main category styling */
.category-item.main-category .category-link {
	font-weight: 400;
	color: var(--osnovy-black);
}

.category-item.main-category .category-link:hover .category-name {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

/* Responsive Design for Category Navigation */
@media (max-width: 1400px) {
	.osnovy-category-nav {
		width: 100%;
	}
	
	.category-column {
		min-width: 180px;
	}
}

@media (max-width: 1200px) {
	.category-column {
		min-width: 160px;
	}
}


/* Product Layout Styles */
.product-layout-container {
	width: 100%;
	margin: 40px 0;
}

.product-layout-pattern {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 40px;
}

/* Pattern 1: Big card + 4 regulars (2x2) */
.pattern-big-left {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.pattern-big-left .big-card {
	flex: 0 0 40%;
}

.pattern-big-left .regular-cards-grid {
	flex: 0 0 60%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 20px;
}

/* Pattern 2: Row of regular cards */
.pattern-regular-row {
	width: 100%;
}

.regular-cards-row {
	display: flex;
	gap: 20px;
	overflow-x: auto;
}

.regular-cards-row .regular-card {
	flex: 0 0 200px;
}

/* Pattern 3: 4 regulars + big card */
.pattern-big-right {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.pattern-big-right .regular-cards-grid {
	flex: 0 0 60%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 20px;
}

.pattern-big-right .big-card {
	flex: 0 0 40%;
}

/* Product Cards - Moved to product-layout.css for better organization */

/* Products Grid - Fixed 4 columns as per design */
.products-grid,
.woocommerce .products-grid,
.woocommerce-page .products-grid,
.site-main .products-grid,
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	margin: 0 !important;
	padding: 0 !important;
	margin: 0 auto !important;
	list-style: none !important;
}


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

/* Product Items in Grid */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.product-item {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}


/* Add to Cart Button */
.card-actions {
	width: 100%;
}

.add-to-cart-btn,
.add_to_cart_button {
	width: 100%;
	padding: 12px 16px;
	background: var(--osnovy-black);
	color: #FFFFFF;
	border: none;
	font-family: 'IBM Plex Serif';
	font-weight: 400;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
}

.add-to-cart-btn:hover,
.add_to_cart_button:hover {
	background: var(--osnovy-gray-50);
}

.add-to-cart-btn:active,
.add_to_cart_button:active {
	transform: translateY(0);
}

.add-to-cart-btn:disabled,
.add_to_cart_button:disabled {
	background: #CCCCCC;
	cursor: not-allowed;
	transform: none;
}

/* Active states for sorting and filtering */
.sort-option.active {
	background: var(--osnovy-gray-5);
	font-weight: 500;
}

.custom-toggle.active .toggle-thumb {
	transform: translateX(16px);
	background: var(--osnovy-black);
}

.custom-toggle.active .toggle-track {
	background: var(--osnovy-gray-5);
	border-color: var(--osnovy-black);
}

/* Load More Section */
.load-more-section {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 32px 0 60px 0;
}


/* Category Card */
.category-card-item {
	grid-column: span 1;
}

.category-card {
	background: var(--osnovy-gray-50);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.category-card:hover {
	background: var(--osnovy-gray-30);
}

.category-card-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.category-card-content {
	text-align: center;
	padding: 24px 20px 20px;
	color: var(--osnovy-white);
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.category-card-title {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 47px;
	margin: 0;
	text-align: left;
}

@media (max-width: 1024px) {
	.category-card-title{
		font-size: 18px;
		line-height: 24px;
	}
}

.category-card-link-text {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	position: relative;
    overflow: hidden;
}

.category-card-link-text span.category-name, 
.category-card-link-text span.category-count {
	background: var(--osnovy-gray-50);
	transition: all 0.3s ease;
}
 
.category-card:hover .category-card-link-text span.category-name, 
.category-card:hover .category-card-link-text span.category-count {
	background: var(--osnovy-gray-30);
}

.category-card:hover .category-card-link-text span.category-name{
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.category-card-link-text span{
	background: unset;
	color: var(--osnovy-white);
	font-size: 14px;
}

/* All Items Loaded */
.all-items-loaded {
	text-align: center;
}

.all-items-loaded-text {
	color: var(--osnovy-gray-50);
	font-size: 14px;
	margin-bottom: 8px;
	font-weight: 300;
}

.scroll-to-top {
	margin-top: 8px;
}

.scroll-to-top-link {
	color: var(--osnovy-black);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s ease;
}

.scroll-to-top-link:hover {
	color: var(--osnovy-black);
	text-decoration: underline;
}

.card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-info-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	padding: 16px;
	border-radius: 0 0 8px 8px;
}

.card-title {
	font-family: 'IBM Plex Serif';
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	color: var(--osnovy-black);
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-author {
	font-family: 'IBM Plex Serif';
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: var(--osnovy-gray-50);
	margin-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-price {
	font-family: 'IBM Plex Serif';
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	color: var(--osnovy-black);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.product-layout-pattern {
		flex-direction: column;
		gap: 20px;
	}
	
	.pattern-big-left .big-card,
	.pattern-big-right .big-card {
		flex: none;
		width: 100%;
	}
	
	.pattern-big-left .regular-cards-grid,
	.pattern-big-right .regular-cards-grid {
		flex: none;
		width: 100%;
		grid-template-columns: 1fr 1fr;
	}
	
	.regular-cards-row {
		flex-direction: column;
		gap: 20px;
	}
	
	.regular-cards-row .regular-card {
		flex: none;
		width: 100%;
	}
}

/* Big Cards - Same as regular but wider and taller */
.big-card-item {
	grid-column: span 2; /* Span 2 columns */
	grid-row: span 2; /* Span 2 rows */
	margin: 0;
}

.big-card-product {
	/* Same as regular product cards, just bigger */
	grid-column: span 2; /* Span 2 columns */
	grid-row: span 2; /* Span 2 rows */
	height: 100%;
}

/* No Products Found - Full Height */
.no-products-found {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px; /* Full height minus header/footer space */
	padding: 40px 20px;
	text-align: center;
}

.no-products-content {
	max-width: 500px;
}

.no-products-description {
	font-size: 18px;
	color: #666;
	margin-bottom: 30px;
	line-height: 1.6;
}

/* .no-products-button uses existing button styles - no overrides needed */

/* Responsive adjustments for big cards */
@media (max-width: 768px) {
	/* Big card mobile styles can be added here if needed */

	.page-wrapper{
		min-height: calc(100vh - 400px) !important;
	}
	
	.no-products-found {
		min-height: 400px;
		padding: 20px 15px;
	}
	
	.no-products-description {
		font-size: 16px;
	}
}

/* Cookie Consent Modal Styles */
.cookie-consent-modal {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(100%);
	width: 100%;
	max-width: 600px;
	background-color: var(--osnovy-gray-1);
	z-index: 9999;
	padding: 20px;
	transition: transform 0.2s ease-in-out;
	border-radius: 20px;
}

.cookie-consent-modal.show {
	transform: translateX(-50%) translateY(0);
}

.cookie-consent-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.cookie-consent-text {
	font-family: 'IBM Plex Serif', serif;
	font-size: 13px;
	line-height: 17px;
	color: var(--osnovy-black);
	flex: 1;
}

.cookie-details-link {
	color: var(--osnovy-primary);
	text-decoration: underline;
}

.cookie-details-link:hover {
	text-decoration: none;
}

/* Mobile styles for cookie modal */
@media (max-width: 768px) {
	.cookie-consent-modal {
		max-width: calc(100% - 24px);
	}
}

/* Generic Dropdown Selector Styles */
.dropdown-selector {
	display: flex;
	align-items: center;
	position: relative;
	max-width: 300px;
	width: 100%;
}

.dropdown-trigger {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10px 16px;
	gap: 10px;
	height: 44px;
	background: #fff;
	border-radius: 100px;
	cursor: pointer;
	position: relative;
	justify-content: space-between;
	width: 100%;
	border: 1px solid var(--osnovy-gray-5);
	transition: all 0.2s ease;
}

.dropdown-trigger:hover {
	border: 1px solid var(--osnovy-gray-30);
}

.dropdown-text {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	line-height: 17px;
	color: var(--osnovy-black);
	flex: none;
	order: 0;
	flex-grow: 0;
	z-index: 0;
}

.dropdown-arrow {
	position: absolute;
	width: 10px;
	height: 5px;
	right: 20px;
	top: 19.5px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L6 6M10.2929 1L5.29289 6' stroke='%2365787F'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.2s ease;
}

.dropdown-modal {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1000;
	background: #fff;
	border: 1.4px solid var(--osnovy-gray-5);
	box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
	border-radius: 22px;
	width: 300px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.dropdown-selector.active .dropdown-modal {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown-selector.active .dropdown-arrow {
	transform: rotate(180deg);
}

.dropdown-option {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	width: 100%;
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	line-height: 17px;
	color: var(--osnovy-black);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.dropdown-option:hover {
	background-color: var(--osnovy-gray-1);
}

.dropdown-option:first-child {
	padding-top: 14px;
}

.dropdown-option:last-child {
	padding-bottom: 14px;
}

.dropdown-option.active {
	background: var(--osnovy-gray-5);
	font-weight: 500;
}

/* Unified Modal Overlay System */
.osnovy-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--osnovy-gray-50);
	z-index: 9998;
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.osnovy-modal-overlay.overlay-show {
	opacity: .3;
}

/* Language/Currency Selection Modal Styles */
.lang-currency-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.lang-currency-modal.modal-show {
	opacity: 1;
	transform: translateY(0);
}

.lang-currency-modal {
	padding: 20px;
}

.lang-currency-content {
	background: var(--osnovy-white);
	border-radius: 20px;
	padding: 18px 12px 16px;
	max-width: 320px;
	width: 100%;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	position: relative;
}

.lang-currency-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

.lang-currency-icon {
	width: 19px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.default-icon {
	width: 24px;
	height: 24px;
	background: var(--osnovy-primary);
	color: white;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 14px;
}

.lang-currency-title {
	font-family: 'IBM Plex Serif', serif;
	font-size: 18px;
	font-weight: 500;
	color: var(--osnovy-black);
	margin: 0;
}

.lang-currency-section {
	margin-bottom: 10px;
}

.lang-currency-section .section-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 5px;
	margin-bottom: 10px;
}

.lang-currency-content .lang-currency-actions {
	margin-top: 16px;
}

.lang-currency-section .section-title{
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	line-height: 17px;
	margin: 0;
}

.lang-currency-actions {
	display: flex;
	justify-content: flex-end;
}

.lang-currency-save {
	width: 100%;
}

/* Mobile styles */
@media (max-width: 768px) {
	.lang-currency-modal {
		padding: 15px;
	}
	
	.lang-currency-content {
		padding: 24px;
	}
	
	.lang-currency-title {
		font-size: 16px;
	}
	
	.section-title {
		font-size: 14px;
	}
}

/* ========================================
   INFO PAGE TEMPLATE STYLES
   ======================================== */

/* Main site container for info pages */
.page-template-default:not(.woocommerce-page) .site-main {
	padding: 64px 0px 0px 240px;
	flex-grow: 0;
	z-index: 0;
	min-height: 400px;
}

@media (max-width: 768px) {
	.page-template-default:not(.woocommerce-page) .site-main {
		padding: 40px 10px 0px;
	}
}

/* Article container */
.page-template-default:not(.woocommerce-page) .site-main article {
	padding: 0px 0px 64px;
	width: 100%;
	max-width: 500px;
	flex: none;
	order: 0;
	flex-grow: 0;
}

@media (max-width: 768px) {
	.page-template-default:not(.woocommerce-page) .site-main article {
		padding: 0px 0px 32px;
	}
}

/* Page Title */
.page-template-default .entry-title {
	font-family: 'IBM Plex Serif', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 32px;
	line-height: 42px;
	letter-spacing: -0.02em;
	color: var(--osnovy-black);
	margin: 0;
	width: 100%;
}

div.checkout-layout h3.checkout-section-title.payment-heading{
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	margin-bottom: 8px;
	letter-spacing: -0.02em;
}

/* Featured Image */
.page-template-default .entry-content img {
	max-width: 500px;
	width: 100%;
	object-fit: cover;
	flex: none;
	flex-grow: 0;
}

/* Main Content Text */
.page-template-default .entry-content {
	max-width: 100%;
	width: 100%;
	font-family: 'IBM Plex Serif', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	letter-spacing: 0.02em;
	color: var(--osnovy-black);
	flex: none;
	align-self: stretch;
	flex-grow: 0;
}

/* Contact Section Title */
.page-template-default .entry-content h2 {
	font-family: 'IBM Plex Serif', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: -0.02em;
	color: var(--osnovy-black);
	flex: none;
	flex-grow: 0;
	margin: 18px 0;
}

/* H1 Style for Info Pages */
.page-template-default:not(.woocommerce-page) .entry-content h1 {
	font-family: 'IBM Plex Serif', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: -0.02em;
	color: var(--osnovy-black);
	flex: none;
	flex-grow: 0;
	margin: 20px 0;
}

/* H3 Style for Info Pages */
.page-template-default .entry-content h3 {
	font-family: 'IBM Plex Serif', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: -0.02em;
	color: var(--osnovy-black);
	flex: none;
	flex-grow: 0;
	margin: 16px 0;
}

/* H4 Style for Info Pages */
.page-template-default .entry-content h4 {
	font-family: 'IBM Plex Serif', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -0.02em;
	color: var(--osnovy-black);
	flex: none;
	flex-grow: 0;
	margin: 14px 0;
}

/* H5 Style for Info Pages */
.page-template-default .entry-content h5 {
	font-family: 'IBM Plex Serif', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	line-height: 20px;
	letter-spacing: -0.02em;
	color: var(--osnovy-black);
	flex: none;
	flex-grow: 0;
	margin: 12px 0;
}

/* H6 Style for Info Pages */
.page-template-default .entry-content h6 {
	font-family: 'IBM Plex Serif', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: -0.02em;
	color: var(--osnovy-black);
	flex: none;
	flex-grow: 0;
	margin: 10px 0;
}

.woocommerce-error, .woocommerce-info, .woocommerce-message{
	border-radius: 20px;
	padding: 16px 20px;
	color: var(--osnovy-black);
	font-size: 13px;
	line-height: 17px;
	font-weight: 400;
	font-family: 'IBM Plex Serif';
	font-style: normal;
	margin: 0;
	border: none;
	position: relative;
    display: flex;
    column-gap: 20px;
	row-gap: 10px;
	justify-content: space-between;
}

.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout .woocommerce-error, .woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout .woocommerce-info, .woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout .woocommerce-message{
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.woocommerce-error li, .woocommerce-info li, .woocommerce-message li{
	width: 100%;
}

.woocommerce-error li strong, .woocommerce-info li strong, .woocommerce-message li strong{
	font-weight: 400;
}

.woocommerce-info, .woocommerce-message{
	background-color: var(--osnovy-gray-5);
}

.woocommerce-message::before{
	display: none;
}


/* Contact Information Text */
.page-template-default:not(.woocommerce-page) .entry-content p {
	max-width: 500px;
	width: 100%;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	letter-spacing: 0.02em;
	color: var(--osnovy-black);
	flex: none;
	align-self: stretch;
	flex-grow: 0;
}

/* Add margin-bottom to p or img if it's immediately followed by a heading */
.page-template-default .entry-content p:has(+ h1),
.page-template-default .entry-content p:has(+ h2),
.page-template-default .entry-content p:has(+ h3),
.page-template-default .entry-content p:has(+ h4),
.page-template-default .entry-content p:has(+ h5),
.page-template-default .entry-content p:has(+ h6),
.page-template-default .entry-content img:has(+ h1),
.page-template-default .entry-content img:has(+ h2),
.page-template-default .entry-content img:has(+ h3),
.page-template-default .entry-content img:has(+ h4),
.page-template-default .entry-content img:has(+ h5),
.page-template-default .entry-content img:has(+ h6) {
	margin-bottom: 40px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
	.page-template-default .site-main {
		padding: 36px 12px 0px;
		width: 100%;
		max-width: 100%;
		height: auto;
		flex-direction: column;
		align-items: flex-start;
	}


}

/* Global Accordion (shared by product and checkout) */
.os-accordion,
.product-accordion {
	margin: 48px 0 12px;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--osnovy-gray-5);
	border-radius: 20px;
}

#intl-accordion{
	margin-top: 16px;
}

#shipping_address_1_field{
	margin-bottom: 8px;
}

.woocommerce-shipping-fields__field-wrapper .form-row{
	margin-bottom: 10px !important;
}

.woocommerce-info, .woocommerce-message{
	background-color: var(--osnovy-gray-5) !important;
}

.woocommerce-info::before{
	display: none;
}

.accordion-item:not(.active){
	overflow: hidden;
}

.accordion-item:not(:last-child) {
	border-bottom: 1px solid var(--osnovy-gray-5);
}

.accordion-header {
	width: 100%;
	padding: 12px 24px 12px 20px;
	border: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	transition: background-color 0.3s ease;
	background-color: unset;
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: -0.01em;
	color: var(--osnovy-black);
}

.accordion-header span{
	color: var(--osnovy-black);
}

.accordion-item:first-child .accordion-header { padding-top: 14px; }
.accordion-item:last-child .accordion-header { padding-bottom: 14px; }
.accordion-item:last-child { border-bottom: none; }

.accordion-icon{ position: relative; transition: transform 0.3s ease; margin-left: -7px; display: block; }
.accordion-icon::after{ position: absolute; top:0; left:0; transform: translateY(-50%) translateX(-50%); content:''; width:14px; height:1px; background-color: var(--osnovy-black); display:block; }
.accordion-icon::before{ position: absolute; top:0; left:0; content:''; width:14px; height:1px; background-color: var(--osnovy-black); transition: transform 0.3s ease; transform: translateY(-50%) translateX(-50%) rotate(90deg); display:block; }
.accordion-item.active .accordion-icon{ transform: rotate(45deg); }

.accordion-content{
	max-height: 0;
	transition: max-height 0.4s ease, padding 0.4s ease;
	padding: 0 20px;
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	letter-spacing: 0.02em;
}

.accordion-content p:first-child{
	margin-top: 0;
}

.accordion-content p:last-child{
	margin-bottom: 0;
}

.accordion-item.active .accordion-content{ max-height: 2000px; padding: 12px 20px 24px; }

/* Checkout NP dropdown container */
.np-dd{ position: relative; }
.np-modal{ position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; background: #fff; border: 1.4px solid var(--osnovy-gray-5); box-shadow: 0px 6px 10px rgba(0,0,0,0.15); border-radius: 22px; width: 100%; max-width: 600px; padding: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .2s ease, visibility .2s ease, transform .2s ease; }
.np-modal .np-options{ max-height: 180px; overflow: auto; width: 100%;}
.np-dd .sort-option{ padding: 12px 16px; cursor: pointer; }
.np-dd .sort-option:hover{ background: var(--osnovy-gray-5); }
/* show when np-dd has data-open attribute */
.np-dd[data-open="1"] .np-modal{ opacity: 1; visibility: visible; transform: translateY(0); }

/* NP dropdown states */
.np-modal .np-empty{ font-size: 13px; line-height: 17px; padding: 12px 16px; color: var(--osnovy-gray-50); font-style: normal; }
.np-modal .np-loading{ font-size: 13px; line-height: 17px; padding: 12px 16px; color: var(--osnovy-gray-50); font-style: normal; }