:root {
    --primary-color: #008744;
    --secondary-color: #f7941d;
    --text-dark: #2b2b2b;
    --text-medium: #555555;
    --text-light: #7a7a7a;
    --background-light: #f9f9f9;
    --background-medium: #eef2f5;
    --border-color: #e0e0e0;
    --header-top-bg: #34495e;
    --header-nav-bg: #da291c;
    --button-success: #28a745;
    --button-danger: #dc3545;
    --shadow-light: rgba(0, 0, 0, 0.08);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --transition-speed: 0.3s;
    --border-radius: 8px;
    --spacing-xs: clamp(8px, 1.5vw, 15px);
    --spacing-sm: clamp(15px, 2.5vw, 25px);
    --spacing-md: clamp(20px, 3.5vw, 30px);
    --spacing-lg: clamp(30px, 5vw, 50px);
    --font-size-base: 1rem;
    --font-size-sm: clamp(0.813rem, 1.5vw, 0.938rem);
    --font-size-md: clamp(0.9rem, 1.5vw, 1.0rem);
    --font-size-lg: clamp(1.125rem, 2.2vw, 1.375rem);
    --font-size-xl: clamp(1.375rem, 2.8vw, 1.75rem);
    --font-size-xxl: clamp(1.55rem, 4vw, 2.0rem);
    --font-size-xxxl: clamp(1.55rem, 5vw, 2.0rem);
}

/* Base Styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--background-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--font-size-base);
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.container {
    max-width: 1740px;
    margin: 0 auto;
    padding: 0 min(10%, var(--spacing-lg));
}

.flex { display: flex; }
.ac { align-items: center; }
.jsb { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.column { flex-direction: column; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.wrap1 { flex-wrap: wrap; }

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color var(--transition-speed);
}
a:hover {
    color: var(--secondary-color);
}

button, .btn_basket, .btn_submit, .btn_basket_product {
    padding: clamp(10px, 2.5vw, 15px) clamp(20px, 5vw, 30px);
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-md);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition-speed), transform 0.1s ease, box-shadow var(--transition-speed);
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

button:hover:not(:disabled),
.btn_basket:hover:not(:disabled),
.btn_submit:hover:not(:disabled),
.btn_basket_product:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--shadow-medium);
}

button:active,
.btn_basket:active,
.btn_submit:active,
.btn_basket_product:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

button:disabled,
.btn_basket:disabled,
.btn_submit:disabled,
.btn_basket_product:disabled {
    background-color: #cccccc !important;
    color: var(--text-light) !important;
    cursor: not-allowed;
    opacity: 0.8;
    box-shadow: none;
}

/* Header Styles */
.header {
    background-color: #fff;
    box-shadow: 0 4px 12px var(--shadow-light);
    margin-bottom: var(--spacing-lg);
    border-bottom: 4px solid var(--primary-color);
}

.header_title {
    display: flex;
    flex-direction: column;
}

.header_titel1 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--header-top-bg);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    color: #e0e0e0;
}

.languages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
    margin-right: auto;
    list-style: none;
}

.languages li a {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius);
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: var(--font-size-sm);
    transition: all var(--transition-speed);
    display: block;
    text-align: center;
}

.languages li a:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.header_titel_li {
    display: none; /* This was causing an empty space, hiding it */
}

.header_titel1 ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.header_titel1 ul li {
    list-style: none;
    margin: 0;
}

.header_titel1 ul li a {
    text-decoration: none;
    color: #e0e0e0;
    font-size: var(--font-size-sm);
    padding: 5px 0;
    transition: color var(--transition-speed);
    white-space: nowrap;
}

.header_titel1 ul li a:hover {
    color: var(--secondary-color);
}

.header_telephone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) 0;
    flex-wrap: wrap; /* Allows items to wrap to next line */
    gap: var(--spacing-md);
    min-height: 80px;
}

.header__logo {
    flex-shrink: 0;
    margin-right: var(--spacing-md);
    max-width: clamp(120px, 20vw, 180px);
}

.header__logo img {
    width: 100%;
    height: auto;
    display: block;
}

.header_telephone > p {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
    /* Added for mobile stacking */
    flex-basis: auto;
    text-align: left;
}

.phone button {
    background-color: var(--secondary-color);
    color: white;
    font-size: var(--font-size-md);
    padding: 10px 20px;
}

.phone button:hover {
    background-color: #e68300;
}

/* Modal Overlay & Styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black overlay */
    display: flex; /* Use flex to center the modal */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

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

.callback-form {
    position: relative; /* For positioning the close button */
    background: white;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    width: clamp(300px, 90vw, 450px); /* Responsive width */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    transform: scale(0.95); /* Start slightly smaller for animation */
    transition: transform 0.3s ease-out;
}

.modal-overlay.active .callback-form {
    transform: scale(1); /* Scale up when active */
}

.modal-close-button {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    width: clamp(30px, 6vw, 40px);
    height: clamp(30px, 6vw, 40px);
    background-color: var(--background-medium);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--transition-speed), transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    border: none; /* Ensure no default button border */
}

.modal-close-button::before,
.modal-close-button::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 2px;
    background-color: var(--text-medium);
    top: 50%;
    left: 50%;
    transform-origin: center;
    transition: background-color var(--transition-speed);
}

.modal-close-button::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close-button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-close-button:hover {
    background-color: var(--button-danger);
    transform: scale(1.05);
}

.modal-close-button:hover::before,
.modal-close-button:hover::after {
    background-color: white;
}

.callback-form .callback-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    text-align: center;
    color: var(--text-dark);
}

.phone-input-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    margin-bottom: var(--spacing-md);
    align-items: center;
    width: 100%;
}

.phone-input-container .country-code {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-right: none;
    background-color: var(--background-medium);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    color: var(--text-medium);
    font-weight: 500;
    flex-shrink: 0;
    width: 50px;
    text-align: center;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-input-container .phone-number {
    padding: 12px;
    border: 1px solid var(--border-color);
    flex-grow: 1;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-size: var(--font-size-md);
    color: var(--text-dark);
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    height: 48px;
    min-width: 150px; /* Ensure input doesn't get too small */
}
.phone-input-container .phone-number:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 135, 68, 0.2);
}

.phone-input-container .call-button {
    background-color: var(--primary-color);
    color: white;
    margin-left: var(--spacing-xs);
    padding: 12px 25px;
    font-size: var(--font-size-md);
    flex-shrink: 0;
    height: 48px;
}

.phone-input-container .call-button:hover {
    background-color: #006b36;
}

.working-hours {
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-sm);
    text-align: center;
    border-top: 1px dashed var(--border-color);
    padding-top: var(--spacing-md);
    color: var(--text-light);
}

.working-hours-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-dark);
}

/* Corrected icon styling for working hours */
.working-hours-title i.fas.fa-clock {
    color: var(--primary-color);
    font-size: clamp(1em, 2.5vw, 1.2em);
    margin-right: var(--spacing-xs);
}

.working-hours p {
    margin: 6px 0;
    color: var(--text-medium);
}

.header_telephone .work_schedule {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--text-medium);
    line-height: 1.4;
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
}

.header__basket {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}

.header__basket a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-dark);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed), transform 0.1s ease;
    background-color: #fff;
    min-width: clamp(120px, 20vw, 150px);
}

.header__basket a:hover {
    background-color: var(--background-medium);
    box-shadow: 0 4px 10px var(--shadow-light);
    transform: translateY(-2px);
}

.header__basket i.fas.fa-shopping-basket {
    font-size: clamp(1.8em, 4vw, 2em);
    color: var(--primary-color);
    margin-right: var(--spacing-xs);
}

.header__basket_summ {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.summ_price {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--primary-color);
    white-space: nowrap;
}
.summ_price sup {
    font-size: 0.7em;
    vertical-align: super;
}

.summ_number p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-light);
}

.summ_number span {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-dark);
}

.header__navigation {
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px var(--shadow-light);
    flex-wrap: wrap;
    justify-content: space-between;
}

.header__navigation ul.main-navigation {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.header__navigation li {
    position: relative;
}

.header__navigation li a {
    display: block;
    color: #fff;
    padding: 16px var(--spacing-md);
    white-space: nowrap;
    font-size: var(--font-size-md);
    font-weight: 400;
    text-decoration: none;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.header__navigation li a:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.header__navigation li.dropdown > a {
    background-color: #006b36;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    padding-right: var(--spacing-lg);
    position: relative;
}

.header__navigation li.dropdown > a::after {
    content: '\25BC';
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: #fff;
    transition: transform var(--transition-speed);
}

.header__navigation li.dropdown:hover > a::after {
    transform: translateY(-50%) rotate(180deg);
}

.header__navigation li.dropdown:hover > ul.dropdown_item {
    display: flex;
}

.header__navigation ul.dropdown_item {
    display: none;
    flex-direction: column;
    width: clamp(200px, 25vw, 350px);
    position: absolute;
    top: 100%;
    left: 0;
    padding: var(--spacing-lg) 0;
    box-shadow: 0 6px 15px var(--shadow-medium);
    background-color: #fff;
    z-index: 20;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    border-top: 3px solid var(--primary-color);
}

.header__navigation ul.dropdown_item li a {
    background-color: transparent;
    color: var(--text-dark);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-md);
    font-weight: 400;
    border-bottom: 1px solid var(--border-color);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    transition: background-color var(--transition-speed), color var(--transition-speed), padding-left var(--transition-speed);
    position: relative;
}

.header__navigation ul.dropdown_item li:last-child a {
    border-bottom: none;
}

.header__navigation ul.dropdown_item li a:hover {
    background-color: var(--background-light);
    color: var(--primary-color);
    padding-left: calc(var(--spacing-md) + 10px);
}

.header__navigation li.dropdown_list:hover > ul {
    display: block;
}

.header__navigation li.dropdown_list > a::after {
    content: '\25B8';
    position: absolute;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: var(--text-light);
}

.header__navigation ul.dropdown_item li ul {
    display: none;
    width: clamp(200px, 25vw, 350px);
    position: absolute;
    left: 100%;
    top: 0;
    padding: var(--spacing-xs) 0;
    box-shadow: 0 4px 10px var(--shadow-light);
    background-color: #fff;
    z-index: 21;
    border-radius: var(--border-radius);
    border-left: 3px solid var(--primary-color);
}

.header_name,
.header_search_inpu {
    flex-grow: 1;
    padding: 10px 0;
    box-sizing: border-box;
}

.header_name {
    margin-right: var(--spacing-md);
}

.header_name form,
.header_search_inpu form {
    display: flex;
    width: 100%;
    max-width: clamp(300px, 40vw, 400px);
    margin: 0 auto;
}

.header_name input[type="text"],
.header_search_inpu input[type="text"] {
    flex-grow: 1;
    padding: 12px var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    font-size: var(--font-size-md);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.header_name input[type="text"]:focus,
.header_search_inpu input[type="text"]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 135, 68, 0.2);
}

.header_name button.search_btn,
.header_search_inpu button.search_btn {
    background-color: var(--primary-color);
    color: white;
    border: 1px solid var(--primary-color);
    border-left: none;
    padding: 10px 18px;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-size: var(--font-size-md);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
}

.header_name button.search_btn:hover,
.header_search_inpu button.search_btn:hover {
    background-color: #006b36;
    border-color: #006b36;
}

/* Specific search button icons */
#searchInputwincode + .search_btn::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M15 15H9c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h6c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1zm-1-6h-4v4h4V9zm-2-7C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm6.5-1.5c-.28 0-.5.22-.5.5v2c0 .28.22.5.5.5s.5-.22.5-.5v-2c0-.28-.22-.5-.5-.5zM12 4c-.28 0-.5.22-.5.5v2c0 .28.22.5.5.5s.5-.22.5-.5v-2c0-.28-.22-.5-.5-.5zM5.5 17.5c-.28 0-.5.22-.5.5v2c0 .28.22.5.5.5s.5-.22.5-.5v-2c0-.28-.22-.5-.5-.5zM12 21c-.28 0-.5.22-.5.5v2c0 .28.22.5.5.5s.5-.22.5-.5v-2c0-.28-.22-.5-.5-.5zM19.5 17.5c-.28 0-.5.22-.5.5v2c0 .28.22.5.5.5s.5-.22.5-.5v-2c0-.28-.22-.5-.5-.5zM21 12c0-.28-.22-.5-.5-.5h-2c-.28 0-.5.22-.5.5s.22.5.5.5h2c.28 0 .5-.22.5-.5zM2.5 12c0-.28-.22-.5-.5-.5h-2c-.28 0-.5.22-.5.5s.22.5.5.5h2c.28 0 .5-.22.5-.5zM17.5 5.5c-.28 0-.5.22-.5.5v2c0 .28.22.5.5.5s.5-.22.5-.5v-2c0-.28-.22-.5-.5-.5zM4.5 5.5c-.28 0-.5.22-.5.5v2c0 .28.22.5.5.5s.5-.22.5-.5v-2c0-.28-.22-.5-.5-.5z"/></svg>');
    display: block;
    width: clamp(16px, 4vw, 20px);
    height: clamp(16px, 4vw, 20px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    filter: invert(1);
}

#searchInput + .search_btn::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
    display: block;
    width: clamp(16px, 4vw, 20px);
    height: clamp(16px, 4vw, 20px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    filter: invert(1);
}

/* Fallback for search buttons if ID-specific styles aren't applied */
.header_name button.search_btn:not(#searchInputwincode + .search_btn)::before,
.header_search_inpu button.search_btn:not(#searchInput + .search_btn)::before {
    content: ''; /* Remove any previous content */
    display: block;
    width: clamp(16px, 4vw, 20px);
    height: clamp(16px, 4vw, 20px);
    background-size: contain;
    filter: invert(1);
    /* Add a generic search icon if needed, or remove if specific icons are always used */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
}


/* Footer Styles */
.footer {
    background-color: var(--header-top-bg);
    color: #e0e0e0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: var(--spacing-lg) min(10%, var(--spacing-lg));
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-md);
    border-top: 4px solid var(--primary-color);
}

.footer_info,
.footer_phone,
.footer_work_schedule,
.footer_text {
    margin: var(--spacing-md);
    text-align: left;
    flex: 1;
    min-width: 250px;
    box-sizing: border-box;
}

.footer_info p {
    margin: 0;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.footer_phone h2 {
    font-size: var(--font-size-lg);
    margin: var(--spacing-xs) 0 8px 0;
    color: #f0f0f0;
}

.footer_phone p {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.footer_work_schedule li,
.footer_text li {
    list-style: none;
    padding: 0;
    margin: 8px 0;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.footer_work_schedule li:first-child,
.footer_text ul.main-fogot li:first-child {
    font-weight: 600;
    color: #fff;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-lg);
}

.footer_text a {
    color: #e0e0e0;
    text-decoration: none;
    transition: color var(--transition-speed);
}

.footer_text a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* Main Content Area */
.main-content-area {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    align-items: start;
}

.category__navbar {
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
    padding: var(--spacing-md);
    max-width: 400px;
    width: 100%;
}

.category__navbar_wrapper {
    position: relative;
}

.category__navbar_title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.category__navbar_nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category__navbar_nav li {
    margin-bottom: 5px;
    position: relative;
}

.category__navbar_nav li a {
    display: block;
    padding: 10px var(--spacing-xs);
    color: var(--text-dark);
    font-size: var(--font-size-md);
    transition: background-color var(--transition-speed), color var(--transition-speed);
    border-radius: 5px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.category__navbar_nav li a:hover {
    background-color: var(--background-medium);
    color: var(--primary-color);
}

.category__navbar_nav li.hidden-item {
    display: none;
}

.category__navbar_show {
    display: none;
    background-color: var(--primary-color);
    color: white;
    font-size: var(--font-size-md);
    font-weight: 500;
    text-align: center;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color var(--transition-speed);
    margin-top: var(--spacing-md);
}

.category__navbar_show:hover {
    background-color: #006b36;
}

.category__navbar_nav ul {
    list-style: none;
    padding-left: var(--spacing-md);
    margin-top: 5px;
    margin-bottom: 5px;
    border-left: 2px solid var(--border-color);
}

.category__navbar_nav ul li a {
    font-size: var(--font-size-sm);
    color: var(--text-medium);
    padding: 8px var(--spacing-xs);
}

.category__navbar_nav ul li a:hover {
    background-color: var(--background-light);
    color: var(--secondary-color);
}

.banner-section {
    background-color: var(--background-medium);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
    height: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.adaptive-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--border-radius);
}

.adaptive-banner-image[src*="/public/img/banners/no_image.jpg"],
.adaptive-banner-image:not([src]) {
    content: '';
    background-color: var(--background-medium);
    width: 100%;
    height: 100%;
    object-fit: unset;
}

.page_title, .titel_name, .company-contact h2, .company-info-container h1,
.product-categories__title, .company-info__title, .cooperation-scheme__title,
.block__title, .best-products__title, .user_comments_section h1,
.payment-methods-title, .delivery-methods-title, .payment-options-title,
.neve h1 {
    font-size: var(--font-size-xxxl);
    color: var(--primary-color);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
.titel_name h1 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.company-info p, .block__text, .best-products__text {
    margin-bottom: 1em;
    color: var(--text-medium);
    text-align: justify;
    font-size: var(--font-size-md);
    line-height: 1.7;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.product-categories {
    background-color: #fff;
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
    margin-bottom: var(--spacing-lg);
}

.product-categories__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 20vw, 200px), 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.product-category__card {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), border-color var(--transition-speed);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    padding: var(--spacing-md);
    min-height: 250px;
    justify-content: center;
}

.product-category__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px var(--shadow-medium);
    border-color: var(--primary-color);
}

.product-category__image {
    width: 100%;
    height: clamp(100px, 15vw, 150px);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-light);
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.product-category__image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform var(--transition-speed);
    display: block;
}
.product-category__card:hover .product-category__image img {
    transform: scale(1.05);
}

.product-category__description {
    font-weight: 600;
    text-align: center;
    font-size: var(--font-size-md);
    color: var(--text-dark);
    line-height: 1.4;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.company-info.index {
    background-color: #fff;
    padding: var(--spacing-lg);
    text-align: center;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
    margin-bottom: var(--spacing-lg);
}

.company-info__title.index__title {
    font-size: var(--font-size-xxxl);
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
    font-weight: 700;
}

.company-info__description.index__description,
.company-info__details.index__details {
    margin: 0 auto var(--spacing-md) auto;
    line-height: 1.8;
    max-width: 900px;
    color: var(--text-medium);
    font-size: var(--font-size-md);
    text-align: justify;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.company-info__description.index__description p:first-child,
.company-info__details.index__details p:first-child {
    margin-top: 0;
}

.company-achievements.achievements {
    background-color: var(--background-medium);
    padding: var(--spacing-lg);
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
    margin-bottom: var(--spacing-lg);
}

.achievement {
    flex: 1;
    min-width: clamp(200px, 30vw, 250px);
    max-width: 300px;
    padding: var(--spacing-md);
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.achievement:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px var(--shadow-medium);
}

.achievement i {
    font-size: clamp(3em, 6vw, 4em);
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.achievement__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* MODIFIED: Cooperation Scheme Section */
.cooperation-scheme.scheme_cooperation {
    background-color: #fff;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
    margin-bottom: var(--spacing-lg);
}

.cooperation-scheme__title.scheme_cooperation__title {
    font-size: var(--font-size-xxxl);
    text-align: center;
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
    font-weight: 700;
}

.cooperation-scheme__list.scheme_cooperation__list {
    list-style-type: none;
    padding: 0;
    counter-reset: step-counter;
    max-width: 900px;
    margin: 0 auto;
    /* Ensure it remains a column layout */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md); /* Add gap between list items */
}

.cooperation-scheme__item.scheme_cooperation__item {
    line-height: 1.8;
    position: relative;
    padding-left: var(--spacing-lg);
    font-size: var(--font-size-md);
    color: var(--text-medium);
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Added styles for each item to make them look distinct */
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) calc(var(--spacing-lg) + 15px); /* Adjusted padding for number */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: left; /* Ensure text is left-aligned within the item */
}

.cooperation-scheme__item.scheme_cooperation__item::before {
    content: counter(step-counter);
    counter-increment: step-counter;
    position: absolute;
    left: var(--spacing-md); /* Align number to the left of the item */
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--secondary-color);
    color: white;
    border-radius: 50%;
    width: clamp(30px, 6vw, 38px);
    height: clamp(30px, 6vw, 38px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: var(--font-size-md);
    box-shadow: 0 2px 8px rgba(247, 148, 29, 0.4);
}
/* END MODIFIED: Cooperation Scheme Section */


.block {
    background-color: var(--background-medium);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
    text-align: center;
}

.block__title {
    font-size: var(--font-size-xxxl);
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
    font-weight: 700;
}

.block__text {
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
    color: var(--text-medium);
    font-size: var(--font-size-md);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.best-products.better_products {
    background-color: var(--primary-color);
    color: white;
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 8px 25px rgba(0, 135, 68, 0.4);
}

.best-products__title.better_products__title {
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    margin-bottom: var(--spacing-md);
    color: #fff;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    font-weight: 800;
}

.best-products__text.better_products__text {
    line-height: 1.8;
    margin: 0 auto var(--spacing-md) auto;
    max-width: 1000px;
    font-size: var(--font-size-lg);
    color: #e0ffee;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.company-contact, .company-info-container, .payment-methods-container {
    background-color: #fff;
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
    margin-bottom: var(--spacing-lg);
}

.contact-contact h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
    color: var(--text-dark);
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-xs);
}

.contact-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.contact-contact li {
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-md);
    color: var(--text-medium);
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.contact-contact li strong {
    color: var(--text-dark);
    display: inline-block;
    min-width: clamp(100px, 15vw, 120px);
}
.contact-contact li a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed);
}
.contact-contact li a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

.company-info-container .index_titel,
.company-info-container .index_subtitle {
    margin: 0 auto var(--spacing-md) auto;
    line-height: 1.8;
    max-width: 900px;
    color: var(--text-medium);
    font-size: var(--font-size-md);
    text-align: justify;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.company-info-container .index_titel p:first-child,
.company-info-container .index_subtitle p:first-child {
    margin-top: 0;
}

.payment-methods-container {
    background-color: #fff;
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
    margin-bottom: var(--spacing-lg);
}

.delivery-methods, .payment-options {
    margin-bottom: var(--spacing-lg);
}

.delivery-methods-list, .payment-options-list {
    list-style: none;
    padding: 0;
}

.delivery-methods-item, .payment-options-item {
    background-color: var(--background-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xs);
    border: 1px solid var(--border-color);
    font-size: var(--font-size-md);
    color: var(--text-dark);
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.payment-options-item strong {
    color: var(--primary-color);
    font-size: var(--font-size-md);
}
.payment-options-item span {
    display: block;
    margin-top: 5px;
    color: var(--text-medium);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.payment-options-item .card-number {
    font-weight: 600;
    font-size: var(--font-size-md);
    color: var(--text-dark);
}

.neve {
    background-color: #fff;
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
    margin-bottom: var(--spacing-lg);
}

.news-item {
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.neve-titel p {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.news-item p {
    font-size: var(--font-size-md);
    color: var(--text-dark);
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.news-item p strong {
    color: var(--text-medium);
    font-weight: 400;
    margin-right: 8px;
}

.sorting-controls-container,
.sort-controls-row .sort-controls {
    margin: var(--spacing-md) 0;
    text-align: right;
    background-color: #fff;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.sorting-controls-container label,
.sort-controls-row .sort-controls label {
    margin-right: 0;
    font-weight: 500;
    color: var(--text-dark);
    font-size: var(--font-size-md);
    white-space: nowrap;
}

.sorting-controls-container select,
.sort-controls-row .sort-controls select {
    padding: 10px 15px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background-color: #fff;
    cursor: pointer;
    font-size: var(--font-size-md);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23008744%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13%205.7L146.2%20200.6%2018.3%2075.1c-6.7-6.7-17.6-6.7-24.3%200-6.7%206.7-6.7%2017.6%200%2024.3l137%20137.2c6.7%206.7%2017.6%206.7%2024.3%200l137-137.2c6.8-6.7%206.8-17.6%20.1-24.3z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right var(--spacing-xs) center;
    background-size: 14px;
    padding-right: calc(var(--spacing-xs) + 20px);
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.sorting-controls-container select:focus,
.sort-controls-row .sort-controls select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(0, 135, 68, 0.1);
}

.products-grid, #product-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 20vw, 240px), 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding-bottom: var(--spacing-lg);
}

.product-column {
    box-sizing: border-box;
}
.product-column.product-wrapper {
    display: block;
}

.product-item {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    box-shadow: 0 4ika 12px var(--shadow-light);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.product-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px var(--shadow-medium);
}

.product-item .card__image {
    display: block;
    margin-bottom: var(--spacing-md);
    height: clamp(150px, 20vw, 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--background-light);
    border-radius: var(--border-radius);
}
.product-item img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform var(--transition-speed);
    display: block;
}
.product-item .card__image:hover img {
    transform: scale(1.05);
}

.product-item h3 {
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-md);
    color: var(--text-dark);
    line-height: 1.3;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.card__price p {
    font-weight: 700;
    color: var(--primary-color);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
}

.product-code {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    margin-bottom: var(--spacing-xs);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.product__content_title strong {
    color: var(--button-success);
    font-size: var(--font-size-md);
}

.btn_basket {
    background-color: var(--primary-color);
    color: white;
    font-size: var(--font-size-md);
    padding: clamp(10px, 2.5vw, 12px) clamp(15px, 4vw, 20px);
}
.btn_basket:hover:not(:disabled) {
    background-color: #006b36;
}

.btn_basket[disabled][style*="background-color: red;"] {
    background-color: var(--button-danger) !important;
}
.btn_basket.out-of-stock {
    background-color: var(--button-danger);
    color: #fff;
    cursor: not-allowed;
    opacity: 0.9;
}
.btn_basket.out-of-stock:hover {
    background-color: #c82333;
}

.pagination-controls, #pagination-controls {
    text-align: center;
    margin-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
}

.pagination-controls button,
.pagination-controls span,
#pagination-controls button,
#pagination-controls span {
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    background-color: #fff;
    color: var(--primary-color);
    cursor: pointer;
    border-radius: var(--border-radius);
    font-size: var(--font-size-md);
    min-width: clamp(40px, 6vw, 45px);
    font-weight: 500;
    transition: all var(--transition-speed);
}

.pagination-controls button:hover:not(:disabled),
#pagination-controls button:hover:not(:disabled) {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.pagination-controls button:disabled,
#pagination-controls button:disabled {
    color: var(--text-light);
    cursor: not-allowed;
    opacity: 0.6;
    background-color: var(--background-medium);
}

.pagination-controls .active-page,
#pagination-controls button.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    cursor: default;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 135, 68, 0.2);
}

.pagination-controls span,
#pagination-controls span {
    border: none;
    background-color: transparent;
    padding: 10px 0;
    color: var(--text-dark);
    font-weight: 600;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    list-style: none;
    padding: 0;
    gap: var(--spacing-xs);
}
/* --- Banner or Info Area --- */
.main-content-area .banner-or-info-area {
    /* This ensures it occupies the same grid space or flex order as the original banner */
    flex-grow: 1; /* Allows it to take up available space */
    padding: 20px; /* Adjust padding as needed */
    background-color: #f9f9f9; /* Light background for the info sections */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between the two new sections */
    max-width: 100%; /* Ensures it doesn't overflow */
}

/* --- Company Achievements Section --- */
.company-achievements {
    text-align: center;
}

.company-achievements__title {
    font-size: 2.2em; /* Slightly larger title */
    color: #333;
    margin-bottom: 30px;
    font-weight: 700;
}

.company-achievements .achievement {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px; /* Space between achievements */
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: transform 0.2s ease-in-out;
}

.company-achievements .achievement:hover {
    transform: translateY(-5px);
}

.company-achievements .achievement i {
    font-size: 3em;
    color: #007bff; /* Primary color for icons */
    margin-bottom: 15px;
}

.company-achievements .achievement__title {
    font-size: 1.4em;
    color: #555;
    line-height: 1.4;
    font-weight: 600;
}

/* Flexbox for achievements on larger screens */
@media (min-width: 768px) {
    .company-achievements {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 20px;
    }

    .company-achievements .achievement {
        flex: 1 1 calc(33% - 40px); /* Three items per row with gaps */
        max-width: calc(33% - 40px);
    }
}

/* --- Cooperation Scheme Section --- */
.cooperation-scheme {
    margin-top: 40px;
    text-align: center;
}

.cooperation-scheme__title {
    font-size: 2.2em;
    color: #333;
    margin-bottom: 30px;
    font-weight: 700;
}

/* MODIFIED: Ensure list remains in column layout */
.cooperation-scheme__list {
    list-style: none; /* Remove default list styling */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Forces column layout */
    gap: 15px; /* Space between list items */
    counter-reset: scheme-counter; /* Initialize counter for custom numbering */
    max-width: 700px; /* Optional: Constrain width for better readability */
    margin: 0 auto; /* Center the list */
}

.cooperation-scheme__item {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    text-align: left;
    position: relative;
    padding-left: 60px; /* Space for the custom number */
    font-size: 1.1em;
    color: #444;
    line-height: 1.6;
}

.cooperation-scheme__item::before {
    counter-increment: scheme-counter; /* Increment counter */
    content: counter(scheme-counter);
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--primary-color); /* Primary color for the number */
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Removed the horizontal layout for cooperation scheme on larger screens to keep it in one column */
/* @media (min-width: 992px) {
    .cooperation-scheme__list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .cooperation-scheme__item {
        flex: 1 1 calc(25% - 20px);
        max-width: calc(25% - 20px);
    }
} */
.pagination .page-item .page-link {
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    background-color: #fff;
    color: var(--primary-color);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
    font-size: var(--font-size-md);
    min-width: clamp(40px, 6vw, 45px);
    text-align: center;
    display: block;
}
.pagination .page-item .page-link:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    font-weight: bold;
}
.pagination .page-item.disabled .page-link {
    color: var(--text-light);
    cursor: not-allowed;
    opacity: 0.6;
    background-color: var(--background-medium);
}

.proces {
    background-color: var(--background-light);
    padding: var(--spacing-md) 0;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.product-detail {
    padding: var(--spacing-md) 0;
}

.product__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    justify-content: center;
    padding: var(--spacing-md);
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
}

.product__gallery {
    display: flex;
    gap: var(--spacing-xs);
    flex-basis: clamp(300px, 45vw, 600px);
    flex-shrink: 1;
    flex-grow: 1;
}

.product__slider {
    width: clamp(80px, 8vw, 100px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.nav_slide {
    width: 100%;
    height: clamp(70px, 8vw, 90px);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-light);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.nav_slide:hover, .nav_slide.slick-current {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(0, 135, 68, 0.3);
}
.nav_slide img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    display: block;
}

.product__slider_for {
    flex-grow: 1;
    max-width: 500px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-light);
    box-shadow: 0 5px 15px var(--shadow-light);
    height: clamp(300px, 40vw, 400px);
    min-height: 250px;
}
.product__slider_for img {
    max-width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.lightbox.active {
    opacity: 1;
    pointer-events: all;
    display: flex;
}

.lightbox img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    border: 5px solid #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    border-radius: var(--border-radius);
}

.product__content {
    flex: 1;
    min-width: clamp(300px, 40vw, 450px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 var(--spacing-md);
}

.product__title h1 {
    font-size: var(--font-size-xl);
    color: var(--text-dark);
    margin-bottom: var(--spacing-md);
    text-align: left;
    line-height: 1.3;
    font-weight: 700;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.product__info-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xs);
    gap: var(--spacing-xs);
}

.product__catalog_code, .product__code {
    font-size: var(--font-size-md);
    color: var(--text-medium);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.product__catalog_code strong, .product__code strong {
    font-weight: 600;
    color: var(--text-dark);
}

.product__content_title {
    font-size: var(--font-size-md);
    color: var(--text-medium);
    margin-bottom: var(--spacing-xs);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.product__content_title strong {
    font-weight: 600;
    color: var(--text-dark);
}
.product__content_title strong.availability {
    color: var(--button-success);
}

.product__active {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-md);
    gap: var(--spacing-md);
}

.product__active_price {
    flex-grow: 1;
    margin-right: var(--spacing-md);
    flex-basis: 150px;
}

.product__active_price .card__price p {
    font-size: clamp(1.8rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.btn_basket_product {
    background-color: var(--primary-color);
    color: white;
    font-size: var(--font-size-lg);
    padding: clamp(12px, 3vw, 15px) clamp(25px, 6vw, 30px);
    flex-shrink: 0;
}

.btn_basket_product:hover:not(:disabled) {
    background-color: #006b36;
}

.btn_basket_product.disabled {
    background-color: var(--button-danger);
    color: #fff;
    cursor: not-allowed;
    opacity: 0.9;
}

.product__active_qty.qty {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.qty_wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.qty_wrapper button {
    background-color: var(--background-medium);
    border: none;
    padding: 10px clamp(12px, 2vw, 15px);
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: background-color var(--transition-speed);
    min-width: 44px;
    min-height: 44px;
}

.qty_wrapper button:hover {
    background-color: #d8d8d8;
}

.qty_wrapper input[type="number"],
.qty_wrapper input[type="number1"] {
    width: clamp(50px, 8vw, 70px);
    text-align: center;
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    font-size: var(--font-size-md);
    -moz-appearance: textfield;
    padding: 10px 0;
    outline: none;
    color: var(--text-dark);
    font-weight: 500;
    min-height: 44px;
}

.qty_wrapper input[type="number"]::-webkit-outer-spin-button,
.qty_wrapper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product-reviews {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
}

.product-reviews h2 {
    font-size: var(--font-size-xl);
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-xs);
}

.product-reviews form {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--background-light);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.product-reviews form input[type="text"],
.product-reviews form textarea {
    width: 100%;
    padding: 12px var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-md);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.product-reviews form input[type="text"]:focus,
.product-reviews form textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 135, 68, 0.2);
}

.product-reviews form textarea {
    resize: vertical;
    min-height: 100px;
}

.product-reviews form .rating {
    display: flex;
    justify-content: center;
    direction: rtl;
    unicode-bidi: bidi-override;
    margin-bottom: var(--spacing-md);
}

.product-reviews form .rating input {
    display: none;
}

.product-reviews form .rating label {
    font-size: clamp(2em, 4vw, 2.5em);
    color: #ccc;
    cursor: pointer;
    padding: 0 6px;
    transition: color var(--transition-speed);
}

.product-reviews form .rating label:hover,
.product-reviews form .rating label:hover ~ label,
.product-reviews form .rating input:checked ~ label {
    color: var(--secondary-color);
}

.product-reviews form .btn_submit12 {
    background-color: var(--primary-color);
    color: white;
    font-size: var(--font-size-lg);
    padding: clamp(12px, 3vw, 15px) clamp(25px, 6vw, 30px);
    align-self: center;
    max-width: 300px;
}

.product-reviews form .btn_submit12:hover {
    background-color: #006b36;
}
.existing-comments {
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-md);
}
.existing-comments h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    color: var(--text-dark);
}
.comment-item {
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.comment-item p {
    margin-bottom: var(--spacing-xs);
    line-height: 1.5;
}
.comment-item strong {
    color: var(--text-dark);
}
.comment-date {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    margin-top: var(--spacing-xs);
}

.cart {
    padding: var(--spacing-md) 0;
}

#cart-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    justify-content: center;
    align-items: flex-start;
}

#cart-container .left {
    flex: 2;
    min-width: clamp(300px, 50vw, 380px);
    padding: var(--spacing-md);
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
    box-sizing: border-box;
}

#cart-container .left h1, .delivery_method h1, .play_metod h1 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
    color: var(--text-dark);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-xs);
    font-weight: 600;
}

.user_mani {
    margin-bottom: var(--spacing-md);
}

.user_mani .user_name, .user_mani .user_phone {
    margin-bottom: var(--spacing-md);
}

#cart-container .user_mani input[type="text"] {
    width: 100%;
    padding: 12px var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-md);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#cart-container .user_mani input[type="text"]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 135, 68, 0.2);
}

.delivery_method {
    margin-top: var(--spacing-lg);
}

.delivery_method .delivery__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color var(--transition-speed);
    min-height: 44px;
}

.delivery_method .delivery__item:hover {
    background-color: var(--background-light);
}

.delivery_method .delivery__item:last-child {
    border-bottom: none;
}

.delivery__item_title {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-dark);
    flex-grow: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.delivery_method .delivery__item {
    position: relative;
    cursor: pointer;
}
.delivery_method .delivery__item input[type="radio"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.delivery_method .delivery__item .radio_label {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    transition: all var(--transition-speed);
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}

.delivery_method .delivery__item input[type="radio"]:checked ~ .radio_label {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

.delivery_method .delivery__item input[type="radio"]:checked ~ .radio_label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
}

.delivery-fields {
    margin-top: var(--spacing-md);
    padding: var(--spacing-xs) 0;
    border-top: 1px dashed var(--border-color);
    display: none;
    animation: fadeIn 0.5s ease;
}
.delivery-fields .content__form_blocks.content__form_full {
    display: flex;
    flex-direction: column;
}

.delivery-fields input[type="text"], .delivery-fields select {
    width: 100%;
    padding: 12px var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-md);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.delivery-fields input[type="text"]:focus, .delivery-fields select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 135, 68, 0.2);
}

.departament select#delivery_division_list {
    width: 100%;
    margin-top: var(--spacing-xs);
    display: block !important;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #fff;
    padding: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}
.departament select#delivery_division_list option {
    padding: 8px 12px;
}
.departament select#delivery_division_list option:hover {
    background-color: var(--background-light);
}

.play_metod {
    margin-top: var(--spacing-lg);
}

.play_metod select {
    width: 100%;
    padding: 12px var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-md);
    background-color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23008744%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13%205.7L146.2%20200.6%2018.3%2075.1c-6.7-6.7-17.6-6.7-24.3%200-6.7%206.7-6.7%2017.6%200%2024.3l137%20137.2c6.7%206.7%2017.6%206.7%2024.3%200l137-137.2c6.8-6.7%206.8-17.6%20.1-24.3z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right var(--spacing-xs) center;
    background-size: 16px;
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.play_metod select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 135, 68, 0.2);
}

.content__form {
    margin-top: var(--spacing-lg);
}
.content__form .content__info_title {
    margin-bottom: var(--spacing-xs);
}

.content__form_textarea textarea {
    width: 100%;
    padding: 12px var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-md);
    min-height: 120px;
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    resize: vertical;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.content__form_textarea textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 135, 68, 0.2);
}

.order.button1 {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.formalization__final1 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cart__info_block {
    background-color: var(--background-medium);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    text-align: right;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.cart__info_block .title {
    font-size: var(--font-size-lg);
    color: var(--text-dark);
    margin-bottom: var(--spacing-xs);
}

.cart__info_block .price {
    font-size: clamp(1.8rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: var(--primary-color);
}
.cart__info_block .price span#total-cart-price {
    display: inline;
}

.btn_submit {
    background-color: var(--primary-color);
    color: white;
    font-size: var(--font-size-xl);
    font-weight: 700;
    padding: clamp(15px, 4vw, 18px) clamp(30px, 8vw, 35px);
    width: 100%;
    max-width: 350px;
}

.btn_submit:hover {
    background-color: #006b36;
}

.cart__products {
    flex: 1;
    min-width: clamp(300px, 50vw, 380px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
    box-sizing: border-box;
}

.cart__product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.cart__product:last-child {
    border-bottom: none;
}

.cart__product_info {
    display: flex;
    align-items: center;
    flex-grow: 1;
    flex-basis: clamp(180px, 30vw, 200px);
}

.cart__product_image {
    width: clamp(80px, 12vw, 100px);
    height: clamp(80px, 12vw, 100px);
    margin-right: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--background-light);
}
.cart__product_image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    display: block;
}

.cart__product_title {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.cart__product_qty.qty {
    display: flex;
    align-items: center;
    margin: 0;
    flex-basis: clamp(100px, 15vw, 120px);
    flex-shrink: 0;
}

.cart__product .qty_wrapper input[type="number"] {
    width: clamp(50px, 8vw, 60px);
    padding: 8px 0;
}

.cart__product .card__price p {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
    flex-basis: clamp(80px, 12vw, 100px);
    flex-shrink: 0;
    text-align: right;
}

.cart__product_close .close_btn {
    width: clamp(24px, 4vw, 28px);
    height: clamp(24px, 4vw, 28px);
    background-color: var(--button-danger);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--transition-speed), transform 0.1s ease;
}

.cart__product_close .close_btn::before,
.cart__product_close .close_btn::after {
    content: '';
    position: absolute;
    width: 65%;
    height: 2px;
    background-color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.cart__product_close .close_btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.cart__product_close .close_btn:hover {
    background-color: #c82333;
    transform: scale(1.1);
}
.empty-cart-message {
    font-size: var(--font-size-lg);
    color: var(--text-medium);
    margin-top: var(--spacing-lg);
}

.user_comments_section {
    padding: var(--spacing-md) 0;
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
}

.comment_form {
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--background-light);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 800px;
    margin: 0 auto var(--spacing-lg) auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.comment_form textarea,
.comment_form input[type="text"] {
    width: 100%;
    padding: 12px var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-md);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.comment_form textarea:focus,
.comment_form input[type="text"]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 135, 68, 0.2);
}

.comment_form textarea {
    min-height: 120px;
    resize: vertical;
}

.comment_form p {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-dark);
    margin-top: 10px;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.rating_input {
    display: flex;
    justify-content: center;
    direction: rtl;
    unicode-bidi: bidi-override;
    margin-bottom: var(--spacing-md);
}

.rating_input input {
    display: none;
}

.rating_input label {
    font-size: clamp(2.2rem, 4.5vw, 2.8rem);
    color: #ccc;
    cursor: pointer;
    padding: 0 7px;
    transition: color var(--transition-speed);
}

.rating_input label:hover,
.rating_input label:hover ~ label,
.rating_input input:checked ~ label {
    color: var(--secondary-color);
}

.feedback-options-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.feedback-option-tag {
    display: flex;
    align-items: center;
    background-color: var(--background-medium);
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color var(--transition-speed), transform 0.1s ease, border-color var(--transition-speed);
    font-size: var(--font-size-md);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    min-height: 44px;
    justify-content: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.feedback-option-tag input[type="checkbox"] {
    display: none;
}

.feedback-option-tag:hover {
    background-color: #dbe7f0;
    transform: translateY(-2px);
    border-color: var(--primary-color);
}

.feedback-option-tag.selected {
    background-color: var(--primary-color);
    color: white;
    border-color: #006b36;
}

.feedback-option-tag img {
    width: clamp(16px, 3vw, 20px);
    height: clamp(16px, 3vw, 20px);
    margin-right: var(--spacing-xs);
    object-fit: contain;
}

.comment_form .btn_submit {
    align-self: center;
    max-width: 300px;
    padding: clamp(12px, 3vw, 15px) clamp(25px, 6vw, 30px);
    font-size: var(--font-size-lg);
    background-color: var(--primary-color);
}
.comment_form .btn_submit:hover {
    background-color: #006b36;
}

.comment_item {
    background-color: #fff;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: var(--spacing-md);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--border-color);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.comment_item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.comment_item p {
    margin-bottom: var(--spacing-xs);
    line-height: 1.6;
    color: var(--text-medium);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.comment_item strong {
    color: var(--text-dark);
}

.rating_user {
    display: flex;
    direction: rtl;
    unicode-bidi: bidi-bidi-override;
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    justify-content: flex-end;
}
.rating_user label {
    font-size: clamp(1.5rem, 3vw, 1.8rem);
    color: #ccc;
    padding: 0 4px;
}
.rating_user label.active {
    color: var(--secondary-color);
}

.comment-feedback-display {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    border-top: 1px dashed var(--border-color);
    padding-top: var(--spacing-xs);
}

.comment-feedback-item {
    display: flex;
    align-items: center;
    background-color: var(--background-medium);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: var(--font-size-sm);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.comment-feedback-item img {
    width: clamp(12px, 2vw, 16px);
    height: clamp(12px, 2vw, 16px);
    margin-right: 6px;
    object-fit: contain;
}

.product-section {
    padding: var(--spacing-lg) 0;
    background-color: var(--background-light);
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.product-section .container {
    max-width: 2400px;
    margin: 0 auto;
    padding: 0 min(10%, var(--spacing-lg));
}

.section-header {
    margin-bottom: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.section-header__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-dark);
    text-align: left;
    margin-bottom: 0;
}

.progress-bar {
    width: clamp(100px, 15vw, 150px);
    height: 8px;
    background-color: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.product-progress::before {
    content: '';
    display: block;
    height: 100%;
    width: var(--progress-width, 0%);
    background-color: var(--primary-color);
    border-radius: 4px;
    transition: width 0.3s ease-in-out;
}

.product-slider.slider {
    margin: 0 calc(-1 * var(--spacing-xs));
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--spacing-xs);
    list-style: none;
    padding: 0;
}

.slick-list {
    padding: 0 !important;
    display: flex !important;
}
.slick-track {
    display: flex !important;
    align-items: stretch;
}
.slick-slide {
    margin: 0 var(--spacing-xs);
    height: auto;
    display: flex !important;
    align-items: stretch;
    scroll-snap-align: start;
    flex-shrink: 0;
    width: calc(25% - (2 * var(--spacing-xs)));
    max-width: 300px;
    min-width: 200px;
}

.product-card1 {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-xs);
    text-align: center;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    box-shadow: 0 4px 12px var(--shadow-light);
}

.product-card1:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--shadow-medium);
}

.product-card--out-of-stock {
    opacity: 0.7;
    filter: grayscale(80%);
}

.product-card__status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.product-card__availability {
    color: var(--button-success);
    font-weight: 600;
    font-size: var(--font-size-md);
}

.product-card--out-of-stock .product-card__availability {
    color: var(--button-danger);
}

.product-card__wishlist {
    width: clamp(20px, 3vw, 24px);
    height: clamp(20px, 3vw, 24px);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ccc"><path d="M12 21.35l-1.84-1.87C4.1 14.26 1 11.1 1 7.5 1 4.42 3.42 2 6.5 2c1.74 0 3.41.81 4.5 2.09C12.09 2.81 13.76 2 15.5 2 18.58 2 21 4.42 21 7.5c0 3.6-3.1 6.76-9.16 11.98L12 21.35z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all var(--transition-speed);
    cursor: pointer;
}
.product-card__wishlist:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f7941d"><path d="M12 21.35l-1.84-1.87C4.1 14.26 1 11.1 1 7.5 1 4.42 3.42 2 6.5 2c1.74 0 3.41.81 4.5 2.09C12.09 2.81 13.76 2 15.5 2 18.58 2 21 4.42 21 7.5c0 3.6-3.1 6.76-9.16 11.98L12 21.35z"/></svg>');
    transform: scale(1.1);
}

.product-card__image-link {
    display: block;
    margin-bottom: var(--spacing-xs);
    height: clamp(100px, 15vw, 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: var(--background-light);
    width: 100%;
}

.product-card__image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform var(--transition-speed);
    display: block;
}
.product-card__image-link:hover .product-card__image {
    transform: scale(1.05);
}

.product-card__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.product-card__title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    margin-bottom: 5px;
    min-height: 2.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.product-card__title:hover {
    color: var(--primary-color);
}

.product-card__code {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    margin-bottom: var(--spacing-xs);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.product-card__bottom {
    margin-top: auto;
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.product-card__price strong {
    font-size: var(--font-size-lg);
    color: var(--primary-color);
    font-weight: 700;
}

.product-card__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.card__basket_btn,
.add-to-cart-btn {
    background-color: var(--primary-color);
    color: #fff;
    padding: 8px 15px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: background-color var(--transition-speed), transform 0.1s ease, box-shadow var(--transition-speed);
}

.card__basket_btn:hover,
.add-to-cart-btn:hover:not(.add-to-cart-btn--disabled) {
    background-color: #006b36;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.add-to-cart-btn--disabled {
    background-color: #cccccc !important;
    cursor: not-allowed;
    opacity: 0.8;
    transform: none;
    box-shadow: none;
}

.product-card__cart-icon {
    width: clamp(24px, 4vw, 30px);
    height: clamp(24px, 4vw, 30px);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-8.9-15H3.21c-.45 0-.84.29-1 .73L.26 9.49c-.27.65.01 1.39.67 1.66.65.27 1.39-.01 1.66-.67l1.1-2.61h13.27c.43 0 .8.27.97.66l3.35 7.15c.34.72.03 1.58-.69 1.92-.72.34-1.58.03-1.92-.69L17.7 9H6.01L5.64 6.74c-.05-.12-.17-.24-.31-.24H4.01V4h1.99c.75 0 1.4-.41 1.73-1.02C8.1 2.39 7.6 2 7 2z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.1s ease, opacity 0.1s ease;
}
.product-card__cart-icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.product-slider::-webkit-scrollbar {
    height: 8px;
}

.product-slider::-webkit-scrollbar-track {
    background: var(--background-medium);
    border-radius: 4px;
}

.product-slider::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

.product-slider::-webkit-scrollbar-thumb:hover {
    background: #006b36;
}

.form-container-most_used{
    display: none;
}
.form-container-most_used {
    width: 100%;
    max-width: 600px;
    margin: var(--spacing-lg) auto;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px var(--shadow-light);
    background-color: #ffffff;
    color: var(--text-dark);
}

.form-container-most_used table {
    width: 100%;
    border-collapse: collapse;
}

.form-container-most_used tr {
    margin-bottom: var(--spacing-md);
    display: block;
}

.form-container-most_used td {
    padding: var(--spacing-xs) 0;
    display: block;
}

.form-container-most_used label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-dark);
    font-size: var(--font-size-md);
}

.form-container-most_used input[type="text"],
.form-container-most_used textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-md);
    box-sizing: border-box;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    outline: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.form-container-most_used input[type="text"]:focus,
.form-container-most_used textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 135, 68, 0.2);
}

.form-container-most_used input::placeholder,
.form-container-most_used textarea::placeholder {
    color: var(--text-light);
    font-style: italic;
}

.form-container-most_used button[type="submit"] {
    background-color: var(--primary-color);
    color: white;
    font-size: var(--font-size-md);
    padding: 12px 25px;
    margin-top: var(--spacing-md);
}

.form-container-most_used button[type="submit"]:hover {
    background-color: #006b36;
}

.subgroup-container {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-xs);
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #fcfcfc;
}

.subgroup-grid {
    display: grid; /* Changed to grid */
    grid-template-columns: repeat(5, 1fr); /* 5 columns, each taking equal fraction of space */
    gap: var(--spacing-md);
    justify-content: center; /* Center grid items horizontally */
}

.category__list_item1 {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xs);
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%; /* Ensure item takes full width of its grid column */
}

.category__list_item1:hover {
    background-color: #e9e9e9;
    transform: translateY(-3px);
}

.item_image1 {
    width: clamp(60px, 10vw, 80px);
    height: clamp(60px, 10vw, 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 5px;
    background-color: var(--background-light);
}
.item_image1 img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    display: block;
}

.item_title1 {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: bold;
    color: #555;
    line-height: 1.3;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.category-short-description {
    text-align: center;
    margin-bottom: var(--spacing-md);
    color: var(--text-medium);
    font-size: var(--font-size-md);
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.category-description {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.category-description h2 {
    font-size: var(--font-size-xl);
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-xs);
}
.category-description p {
    font-size: var(--font-size-md);
    color: var(--text-dark);
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 1em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.category-description p:last-child {
    margin-bottom: 0;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: var(--spacing-sm) min(10%, var(--spacing-sm));
    list-style: none;
    background-color: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '›';
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: var(--text-light);
}

.breadcrumb-item a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--text-dark);
    font-weight: 500;
}

/* --- Media Queries for Responsiveness --- */

/* Medium devices (tablets, 992px and below) */
@media (max-width: 992px) {
    .container {
        padding: 0 min(5%, var(--spacing-md));
    }

    .main-content-area {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .banner-section {
        display: none; /* Hide banner on smaller screens if not essential */
    }

    .header_telephone {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md) 0;
        gap: var(--spacing-md);
    }
    .header__logo {
        margin-right: 0;
        order: 1; /* Keep logo first */
    }
    .header_telephone > p {
        /* Phone numbers will stack vertically if space runs out, or stay side-by-side if enough room */
        font-size: var(--font-size-md);
        flex-basis: 45%; /* Allow two numbers to sit side-by-side or stack */
        white-space: nowrap;
        text-align: center; /* Center phone numbers */
        order: 2; /* After logo */
    }
    /* Explicitly make phone numbers stack on smaller mobile widths, adjusted in @media (max-width: 480px) */

    .phone {
        display: none; /* Hide callback button on smaller screens, rely on floating one */
    }
    .header_telephone .work_schedule {
        display: none; /* Hide work schedule on smaller screens */
    }
    .header__basket {
        margin-left: auto;
        order: 3; /* After phone numbers */
    }

    .floating-callback-button {
        display: flex; /* Show floating callback button on medium and small screens */
    }

    .header__navigation {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }
    .header__navigation ul.main-navigation {
        flex-direction: column;
        width: 100%;
    }
    .header__navigation li.dropdown {
        width: 100%;
    }
    .header__navigation li a {
        padding: 14px 20px;
        text-align: center;
    }
    .header__navigation li.dropdown > a {
        border-radius: 0;
    }
    .header__navigation li.dropdown > a::after {
        display: none; /* Hide dropdown arrow for mobile menu */
    }
    .header__navigation li.dropdown_list > a::after {
        right: 15px;
        display: block; /* Keep arrow for nested dropdowns */
    }
    .header__navigation ul.dropdown_item {
        position: static; /* Make dropdown items flow normally */
        border-radius: 0;
        border-top: none;
        box-shadow: none;
        padding: 0;
        width: 100%;
        max-height: unset;
    }
    .header__navigation ul.dropdown_item li ul {
        position: static;
        border-left: none;
        box-shadow: none;
        padding-left: var(--spacing-md);
    }
    .header_name,
    .header_search_inpu {
        width: 100%;
        margin: 0;
        padding: 10px var(--spacing-sm);
    }
    .header_name form,
    .header_search_inpu form {
        max-width: 100%;
    }

    .product-categories__list {
        grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 25vw, 180px), 1fr));
        gap: var(--spacing-sm);
    }
    .product-category__image {
        height: clamp(90px, 15vw, 120px);
    }
    .product-category__description {
        font-size: var(--font-size-md);
    }

    .company-achievements {
        flex-direction: column;
    }
    .achievement {
        min-width: unset;
        width: 100%;
        max-width: 400px;
    }

    /* MODIFIED: Ensure cooperation scheme items stack on tablets */
    .cooperation-scheme__list {
        flex-direction: column; /* Force column layout on tablets too */
    }
    .cooperation-scheme__item {
        padding-left: var(--spacing-lg);
        font-size: var(--font-size-md);
    }
    .cooperation-scheme__item::before {
        width: 35px;
        height: 35px;
        font-size: var(--font-size-md);
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 30vw, 200px), 1fr));
        gap: var(--spacing-md);
    }
    .product-item .card__image {
        height: clamp(150px, 25vw, 180px);
    }

    .product__wrapper {
        flex-direction: column;
        align-items: center;
    }
    .product__gallery {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .product__slider {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: var(--spacing-xs);
        flex-wrap: wrap; /* Allow thumbnails to wrap */
        overflow-x: auto;
        padding-bottom: var(--spacing-xs);
    }
    .nav_slide {
        width: clamp(70px, 10vw, 80px);
        height: clamp(70px, 10vw, 80px);
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .product__slider_for {
        max-width: 100%;
        margin-bottom: var(--spacing-md);
        height: clamp(300px, 45vw, 350px);
    }
    .product__content {
        min-width: unset;
        width: 100%;
        text-align: center;
        padding: 0;
    }
    .product__title h1 {
        text-align: center;
        font-size: var(--font-size-xl);
    }
    .product__info-group {
        justify-content: center;
    }
    .product__active {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    .product__active_price {
        margin-right: 0;
        width: 100%;
    }
    .btn_basket_product {
        width: 100%;
        max-width: 350px;
    }
    .product__active_price .card__price p {
        font-size: clamp(1.6rem, 3vw, 2rem);
    }

    .pagination-controls button,
    .pagination-controls span {
        padding: 8px 12px;
        font-size: var(--font-size-sm);
    }

    #cart-container {
        flex-direction: column;
    }
    #cart-container .left,
    .cart__products {
        min-width: unset;
        width: 100%;
    }
    #cart-container .left h1,
    .play_metod h1 {
        text-align: center;
    }
    .formalization__final1 {
        align-items: center;
    }
    .cart__product {
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex-basis: auto;
    }
    .cart__product_info {
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex-basis: auto;
    }
    .cart__product_image {
        margin-right: 0;
        margin-bottom: var(--spacing-xs);
        width: clamp(70px, 10vw, 80px);
        height: clamp(70px, 10vw, 80px);
    }
    .cart__product_qty.qty {
        margin: var(--spacing-xs) 0;
        flex-basis: auto;
    }
    .cart__product .card__price p {
        font-size: var(--font-size-md);
        flex-basis: auto;
    }
    .cart__product_close .close_btn {
        width: 24px;
        height: 24px;
        position: static;
        margin-top: var(--spacing-xs);
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .slick-slide {
        width: calc(33.333% - (2 * var(--spacing-xs)));
    }
    .product-slider.slider {
        margin: 0 calc(-1 * var(--spacing-xs));
    }

    .subgroup-grid {
        grid-template-columns: repeat(3, 1fr); /* Adjusted for tablets */
    }

    /* Hide the second menu list on smaller screens */
    .header_titel1 ul:last-of-type {
        display: none;
    }
}

/* Small devices (phones, 480px and below) */
@media (max-width: 480px) {
    .container {
        padding: 0 min(5%, var(--spacing-xs));
    }

    .header_titel1 {
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }
    .languages {
        margin-right: 0;
        width: 100%;
        justify-content: center;
        margin-bottom: var(--spacing-xs);
    }
    .languages li a {
        padding: 5px 8px;
        font-size: 0.8em;
    }
    .header_titel1 li {
        width: 100%;
        text-align: center;
    }
    .header_titel1 ul:last-of-type {
        display: none; /* Ensure this menu is hidden on small screens */
    }
    .header_titel1 ul li a {
        font-size: var(--font-size-sm);
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* --- MODIFICATIONS FOR .header_telephone ON MOBILE --- */
    .header_telephone {
        flex-direction: row; /* Keep elements in a row */
        flex-wrap: wrap; /* Allow wrapping */
        justify-content: space-between; /* Distribute items with space between them */
        align-items: center;
        padding: var(--spacing-xs) 0; /* Adjust padding for mobile */
        gap: var(--spacing-xs); /* Smaller gap */
    }

    .header__logo {
        margin-right: 0; /* Remove right margin */
        flex-basis: 48%; /* Take roughly half the width */
        max-width: 48%; /* Ensure it doesn't exceed half */
        order: 1; /* First item */
    }

    .header__basket {
        margin-left: 0; /* Remove auto-margin */
        flex-basis: 48%; /* Take roughly half the width */
        max-width: 48%; /* Ensure it doesn't exceed half */
        order: 2; /* Second item */
        display: flex; /* Ensure its internal content is flexible */
        justify-content: flex-end; /* Push content to the right within its flex item */
    }

    .header__basket a {
        min-width: unset; /* Remove min-width constraint */
        padding: 6px 10px; /* Adjust padding */
    }
    .header__basket i.fas.fa-shopping-basket {
        font-size: 1.6em;
    }
    .summ_price {
        font-size: var(--font-size-md);
    }
    .summ_number p {
        font-size: 0.7em;
    }

    /* Search input - now full width below logo/basket */
    .header_search_inpu.header_search_inpu--desktop {
        display: block; /* Make sure it's visible on mobile */
        order: 3; /* Position it below logo and basket */
        width: 100%; /* Full width */
        padding: var(--spacing-xs) 0; /* Adjust padding */
        margin: var(--spacing-xs) auto; /* Center it with top/bottom margin */
        max-width: 95%; /* Limit width slightly for padding */
    }
    .header_search_inpu form {
        width: 100%; /* Ensure form inside spans full width */
    }

    .header_telephone > p,
    .header_telephone .work_schedule,
    .header_telephone .form__feed {
        display: none; /* Hide phone numbers, work schedule, and inline callback form on mobile */
    }

    /* --- END MODIFICATIONS FOR .header_telephone ON MOBILE --- */


    .floating-callback-button {
        bottom: 15px;
        left: 15px;
        padding: 10px 18px;
        font-size: var(--font-size-sm);
    }

    .header_name input[type="text"],
    .header_search_inpu input[type="text"] {
        padding: 10px 10px;
        font-size: var(--font-size-sm);
    }
    .header_name button.search_btn,
    .header_search_inpu button.search_btn {
        padding: 8px 12px;
    }
    .header_name button.search_btn::before,
    .header_search_inpu button.search_btn::before {
        width: 16px;
        height: 16px;
    }

    .footer_info,
    .footer_phone,
    .footer_work_schedule,
    .footer_text {
        margin: var(--spacing-xs) 0;
        text-align: center;
        min-width: 100%;
    }
    .footer_phone h2 {
        font-size: var(--font-size-md);
    }
    .footer_phone p {
        font-size: var(--font-size-lg);
    }

    .page_title, .titel_name, .company-contact h2, .company-info-container h1,
    .product-categories__title, .company-info__title, .cooperation-scheme__title,
    .block__title, .best-products__title, .user_comments_section h1,
    .payment-methods-title, .delivery-methods-title, .payment-options-title,
    .neve h1 {
        font-size: var(--font-size-xxl);
        margin-bottom: var(--spacing-md);
    }

    .product-categories__list {
        grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 35vw, 140px), 1fr));
        gap: var(--spacing-xs);
    }
    .product-category__image {
        height: clamp(80px, 15vw, 90px);
    }
    .product-category__description {
        font-size: var(--font-size-sm);
    }

    .achievement {
        padding: var(--spacing-xs);
    }
    .achievement i {
        font-size: clamp(2.5em, 5vw, 3em);
    }
    .achievement__title {
        font-size: var(--font-size-md);
    }

    .cooperation-scheme__item {
        font-size: var(--font-size-sm);
        padding-left: var(--spacing-lg);
    }
    .cooperation-scheme__item::before {
        width: 30px;
        height: 30px;
        font-size: 0.9em;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    .product-item {
        padding: var(--spacing-sm);
    }
    .product-item .card__image {
        height: clamp(120px, 25vw, 150px);
    }
    .product-item h3 {
        font-size: var(--font-size-md);
    }
    .card__price p {
        font-size: var(--font-size-md);
    }
    .btn_basket {
        padding: 10px 15px;
        font-size: var(--font-size-md);
    }

    .pagination-controls button,
    .pagination-controls span {
        padding: 6px 10px;
        font-size: 0.8em;
    }
    .pagination .page-item .page-link {
        padding: 8px 12px;
    }

    .product__slider {
        flex-wrap: nowrap;
    }
    .nav_slide {
        width: clamp(50px, 10vw, 60px);
        height: clamp(50px, 10vw, 60px);
    }
    .product__slider_for {
        height: clamp(250px, 50vw, 280px);
    }
    .product__title h1 {
        font-size: var(--font-size-xl);
    }
    .product__info-group {
        gap: var(--spacing-xs);
    }
    .product__catalog_code, .product__code, .product__content_title {
        font-size: var(--font-size-md);
    }
    .product__active_price .card__price p {
        font-size: var(--font-size-xl);
    }
    .btn_basket_product {
        padding: 10px 20px;
        font-size: var(--font-size-md);
    }
    .qty_wrapper button {
        padding: 6px 10px;
        font-size: var(--font-size-md);
    }
    .qty_wrapper input[type="number"], .qty_wrapper input[type="number1"] {
        width: 40px;
        font-size: var(--font-size-sm);
    }
    .product-reviews form {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }
    .product-reviews form input[type="text"], .product-reviews form textarea {
        padding: 10px 12px;
        font-size: var(--font-size-md);
    }
    .product-reviews form .rating label {
        font-size: clamp(2em, 4vw, 2.2em);
        padding: 0 5px;
    }
    .product-reviews form .btn_submit12 {
        padding: 12px 25px;
        font-size: var(--font-size-lg);
    }

    #cart-container .left,
    .cart__products {
        padding: var(--spacing-md);
    }
    #cart-container .left h1, .delivery_method h1, .play_metod h1 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-xs);
    }
    #cart-container .user_mani input[type="text"],
    .delivery-fields input[type="text"], .delivery-fields select,
    .play_metod select,
    .content__form_textarea textarea {
        padding: 10px 12px;
        font-size: var(--font-size-md);
    }
    .delivery_method .delivery__item {
        padding: var(--spacing-xs) 0;
    }
    .delivery__item_title {
        font-size: var(--font-size-md);
    }
    .cart__info_block {
        padding: var(--spacing-sm);
    }
    .cart__info_block .title {
        font-size: var(--font-size-md);
    }
    .cart__info_block .price {
        font-size: var(--font-size-xl);
    }
    .btn_submit {
        padding: 12px 25px;
        font-size: var(--font-size-lg);
    }
    .cart__product {
        gap: var(--spacing-xs);
        padding-bottom: var(--spacing-sm);
    }
    .cart__product_image {
        width: clamp(60px, 10vw, 70px);
        height: clamp(60px, 10vw, 70px);
        margin-right: var(--spacing-xs);
    }
    .cart__product_title {
        font-size: var(--font-size-md);
    }
    .cart__product .card__price p {
        font-size: var(--font-size-md);
    }
    .cart__product_close .close_btn {
        width: 22px;
        height: 22px;
    }

    .comment_item {
        padding: var(--spacing-sm);
    }
    .comment_item p {
        font-size: var(--font-size-md);
    }
    .rating_user label {
        font-size: clamp(1.2em, 2.5vw, 1.5em);
    }
    .comment-feedback-item {
        font-size: 0.7em;
        padding: 4px 8px;
    }
    .comment-feedback-item img {
        width: 12px;
        height: 12px;
    }

    .slick-slide {
        width: calc(50% - (2 * var(--spacing-xs)));
    }
    .product-slider.slider {
        margin: 0 calc(-1 * var(--spacing-xs));
    }
    .slick-slide {
        margin: 0 var(--spacing-xs);
    }

    @media (max-width: 375px) {
        .slick-slide {
            width: calc(100% - (2 * var(--spacing-xs)));
            margin: 0 var(--spacing-xs);
        }
        .product-slider.slider {
            margin: 0 calc(-1 * var(--spacing-xs));
        }
        .header__logo img {
            max-width: 90px;
        }
        .subgroup-grid {
            grid-template-columns: 1fr;
        }
        .item_image1 img {
            width: clamp(50px, 10vw, 60px);
            height: clamp(50px, 10vw, 60px);
        }
        .item_title1 {
            font-size: var(--font-size-sm);
        }
    }
}
.header_telephone .phone {
    display: none;
}

.floating-callback-button {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    background-color: var(--secondary-color);
    color: white;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all var(--transition-speed);
    text-align: center;
    white-space: nowrap;
}

.floating-callback-button:hover {
    background-color: #e68300;
    transform: translateY(-50%) translateX(5px);
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3);
}

.floating-callback-button button {
    background: none;
    border: none;
    color: inherit;
    font-size: var(--font-size-md);
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

@media (max-width: 992px) {
    .floating-callback-button {
        top: auto;
        bottom: 20px;
        left: 20px;
        right: auto;
        transform: none;
        border-radius: var(--border-radius);
        padding: 12px 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

}

@media (max-width: 480px) {
    .floating-callback-button {
        bottom: 15px;
        left: 15px;
        padding: 10px 18px;
        font-size: var(--font-size-sm);
    }
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Use a high value to ensure it's on top */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.callback-form {
    background-color: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    position: relative;
    max-width: 90%;
    width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.active .callback-form {
    transform: scale(1);
}

.pagination-controls {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
}

.pagination li {
    margin: 0 4px;
}

.pagination li a,
.pagination li span {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    line-height: 1.25;
    color: #007bff; /* Колір посилань */
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.pagination li a:hover {
    color: #0056b3;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.pagination li.active span {
    z-index: 1;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    cursor: default;
}

.pagination li.disabled span {
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
    cursor: not-allowed;
}

.pagination li:first-child a,
.pagination li:first-child span {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.pagination li:last-child a,
.pagination li:last-child span {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.pagination li:not(:first-child) a,
.pagination li:not(:first-child) span {
    margin-left: -1px;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Гарантує, що модалка буде поверх іншого контенту */

    /* Сховати модальне вікно за замовчуванням */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Показати модальне вікно */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Контент форми/повідомлення */
.callback-form {
    background: white;
    padding: 30px;
    border-radius: 10px;
    position: relative;
    max-width: 400px; /* Приклад */
    width: 90%;
    /* Додайте інші стилі для вашого контенту */
}

/* Спеціальні стилі для повідомлення про успіх */
.success-message-content {
    text-align: center;
    padding: 40px 20px;
}

.success-text {
    font-size: 24px;
    font-weight: bold;
    color: #4CAF50; /* Зелений колір */
    margin-bottom: 10px;
}

.success-subtext {
    color: #666;
    font-size: 16px;
}