/* Custom B2B Styles for GOV Template - Veterinary Theme */

/* Breadcrumb section - add top margin for spacing from menu */
.breadcrumb-section {
    margin-top: 3px;
}

/* ============================================
   GLOBAL: Disable automatic capitalization
   ============================================ */

body,
body * {
    text-transform: none !important;
}

/* Preserve explicit transform utility classes */
.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

/* Fix search input and button alignment */
.middle-box .search-box .input-group {
    display: flex;
    align-items: stretch;
}

.middle-box .search-box .input-group .typeahead__container {
    flex: 1;
    display: flex;
}

.middle-box .search-box .input-group .form-control,
.middle-box .search-box .input-group input[type="search"] {
    height: 50px !important;
    border-radius: 8px 0 0 8px !important;
}

.middle-box .search-box .input-group .btn {
    height: 50px !important;
    min-height: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px !important;
    border-radius: 0 8px 8px 0 !important;
}

.middle-box .search-box .input-group .typeahead__field,
.middle-box .search-box .input-group .typeahead__query {
    display: flex;
    height: 100%;
}

/* Fix breadcrumb separator display issue */
.breadcrumb-item + .breadcrumb-item::before {
    font-family: var(--bs-font-sans-serif, sans-serif) !important;
    content: "/" !important;
    color: #6c757d;
}

/* ============================================
   FIX: Accordion Filter Icons - Chevron Arrows
   ============================================ */

/* Custom accordion in shop sidebar - Fix icon display */
.shop-section .left-box .shop-left-sidebar .custom-accordion .accordion-item .accordion-header .accordion-button::before,
.shop-left-sidebar .custom-accordion .accordion-item .accordion-header .accordion-button::before {
    content: "\f078" !important; /* fa-chevron-down */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    position: absolute;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 5px;
    background-color: #f7f6f4;
    font-size: 12px;
    border-radius: 100%;
    transition: transform 0.3s ease-in-out;
    transform: rotate(0deg);
}

/* Collapsed state - rotate chevron */
.shop-section .left-box .shop-left-sidebar .custom-accordion .accordion-item .accordion-header .accordion-button.collapsed::before,
.shop-left-sidebar .custom-accordion .accordion-item .accordion-header .accordion-button.collapsed::before {
    transform: rotate(-90deg);
}

/* Hide default Bootstrap accordion icon */
.shop-section .left-box .shop-left-sidebar .custom-accordion .accordion-item .accordion-header .accordion-button::after,
.shop-left-sidebar .custom-accordion .accordion-item .accordion-header .accordion-button::after {
    content: none !important;
    display: none !important;
}

/* Ensure accordion button has proper styling */
.shop-left-sidebar .custom-accordion .accordion-item .accordion-header .accordion-button {
    position: relative;
    padding-right: 40px;
}

/* ============================================
   FIX: Search Box Icon in Filter Sidebar
   ============================================ */

/* Fix search icon (magnifying glass) in filter search boxes */
.shop-section .left-box .shop-left-sidebar .search-box::after,
.shop-left-sidebar .search-box::after,
.shop-left-sidebar .accordion-body .search-box::after,
.shop-left-sidebar .theme-form-floating-2.search-box::after {
    content: "\f002" !important; /* fa-magnifying-glass / fa-search */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* ============================================
   Active Filter Tags - Clean Style
   ============================================ */

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

.filter-tag {
    display: inline-flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}

.filter-tag-text {
    padding: 6px 0 6px 12px;
    color: #666;
    font-size: 13px;
}

.filter-tag-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    margin-left: 8px;
    background: none;
    border: none;
    border-left: 1px solid #e5e5e5;
    color: #999;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tag-close:hover {
    background-color: #f5f5f5;
    color: #333;
}

.filter-tag-clear {
    background: transparent;
    border: none;
}

.filter-tag-clear a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background-color: transparent;
    border: none;
    color: #999;
    font-size: 13px;
    text-decoration: underline;
}

.filter-tag-clear a:hover {
    color: #dc3545;
}

/* ============================================
   FIX: Dropdown Menu Hover - Keep text dark with underline
   ============================================ */

.navbar-nav .dropdown-menu .dropdown-item {
    transition: all 0.15s ease-in-out !important;
    color: #212529 !important;
    background-color: transparent !important;
    position: relative;
}

.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus {
    color: #212529 !important;
    background-color: transparent !important;
    text-decoration: none;
}

/* Underline effect on hover */
.navbar-nav .dropdown-menu .dropdown-item::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 15px;
    right: 15px;
    height: 2px;
    background-color: var(--theme-color, #0da487);
    transform: scaleX(0);
    transition: transform 0.2s ease-in-out;
}

.navbar-nav .dropdown-menu .dropdown-item:hover::after {
    transform: scaleX(1);
}

/* ============================================
   FIX: User Account Dropdown Menu - Wider Width
   ============================================ */

/* Poszerzone menu użytkownika (rozwijane na hover) */
.onhover-dropdown .onhover-div-login {
    min-width: 200px !important;
    right: 0 !important;
    left: auto !important;
}

/* Zapobiegaj zawijaniu tekstu w menu */
.onhover-div-login .user-box-name li,
.onhover-div-login .user-box-name a,
.onhover-div-login .product-box-contain a {
    white-space: nowrap !important;
}

/* Lepszy odstęp dla elementów menu */
.onhover-div-login .user-box-name {
    padding: 10px 5px !important;
}

.onhover-div-login .user-box-name li {
    padding: 5px 10px !important;
}

/* ============================================
   FIX: Orders Table - Prevent Button Cutoff
   ============================================ */

/* Tabela zamówień w panelu klienta */
.dashboard-bg-box .table-responsive {
    overflow-x: visible !important;
}

.dashboard-bg-box {
    overflow: visible !important;
}

.dashboard-bg-box .order-table {
    min-width: 100%;
    table-layout: auto;
}

/* Kolumna akcji - nie może być obcięta */
.order-table th:last-child,
.order-table td:last-child {
    min-width: 110px;
    white-space: nowrap;
    text-align: center;
}

/* Zmniejsz padding i font w tabeli na mniejszych ekranach */
@media (max-width: 1400px) {
    .dashboard-bg-box .order-table th,
    .dashboard-bg-box .order-table td {
        padding: 0.5rem 0.35rem !important;
        font-size: 0.82rem;
    }
    
    /* Ukryj ikonę w przyciskach na mniejszych ekranach */
    .dashboard-bg-box .order-table .btn-sm i,
    .dashboard-bg-box .order-table .btn-animation i {
        display: none !important;
    }
    
    .dashboard-bg-box .order-table .btn-sm,
    .dashboard-bg-box .order-table .btn-animation {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.75rem;
    }
}

@media (max-width: 1200px) {
    .dashboard-bg-box .order-table th,
    .dashboard-bg-box .order-table td {
        padding: 0.4rem 0.25rem !important;
        font-size: 0.78rem;
    }
    
    /* Zmniejsz szerokość kolumn z datą i wartościami */
    .order-table th:nth-child(4),
    .order-table td:nth-child(4),
    .order-table th:nth-child(5),
    .order-table td:nth-child(5),
    .order-table th:nth-child(6),
    .order-table td:nth-child(6) {
        white-space: nowrap;
    }
}

/* Upewnij się że przyciski nie są obcięte */
.dashboard-bg-box .order-table .btn-animation {
    white-space: nowrap;
}

/* ============================================
   FIX: Profile Box - Better Text Visibility
   ============================================ */

/* Zapewnij lepszą czytelność nazwy firmy w sidebar */
.dashboard-left-sidebar .profile-box .profile-name {
    background: rgba(255, 255, 255, 0.95);
    padding: 15px 10px;
    margin: 0 10px 10px 10px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.dashboard-left-sidebar .profile-box .profile-name h3 {
    color: #212529 !important;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
    word-break: break-word;
}

.dashboard-left-sidebar .profile-box .profile-name h6 {
    color: #6c757d !important;
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* Avatar placeholder - upewnij się że jest wycentrowany i widoczny */
.dashboard-left-sidebar .profile-box .profile-contain {
    position: relative;
    margin-top: -40px;
    z-index: 2;
}

.dashboard-left-sidebar .profile-box .profile-image {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.dashboard-left-sidebar .profile-box .avatar-placeholder {
    width: 80px;
    height: 80px;
    background: var(--theme-color, #0da487);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.dashboard-left-sidebar .profile-box .avatar-placeholder .avatar-icon {
    width: 40px;
    height: 40px;
    color: #fff;
}


/* ============================================
   KATEGORIE MENU PROTOTYPE
   ============================================ */
.kategorie-menu-container {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif; /* Or inherit */
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Top Animal Navigation */
.kategorie-menu-container .animal-nav {
    display: flex;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 20px;
    justify-content: space-between;
}

.kategorie-menu-container .animal-nav .animal-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #e67e22; /* Orange color from screenshot */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    padding: 5px 10px;
    transition: all 0.2s;
}

.kategorie-menu-container .animal-nav .animal-item:hover {
    opacity: 0.8;
}

.kategorie-menu-container .animal-nav .animal-item .icon {
    margin-right: 8px;
    font-size: 18px;
}

.kategorie-menu-container .animal-nav .animal-item .label {
    line-height: 1;
}

/* Filter Tabs (Gatunek, Substancja, etc.) */
.kategorie-menu-container .filter-tabs {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.kategorie-menu-container .filter-tabs .filter-tab {
    margin-right: 30px;
    font-weight: 700;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.kategorie-menu-container .filter-tabs .filter-tab i {
    margin-left: 5px;
    font-size: 12px;
    color: #777;
}

.kategorie-menu-container .filter-tabs .filter-tab.active {
    color: #000;
}

.kategorie-menu-container .filter-tabs .filter-actions {
    margin-left: auto;
}

.kategorie-menu-container .filter-tabs .btn-filter {
    background-color: #444;
    color: #fff;
    border: none;
    padding: 8px 20px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.kategorie-menu-container .filter-tabs .btn-filter i {
    margin-right: 8px;
}

/* Filter Panels */
.kategorie-menu-container .filter-panels {
    padding: 20px;
    min-height: 200px;
}

.kategorie-menu-container .filter-panel {
    display: none;
}

.kategorie-menu-container .filter-panel.active {
    display: block;
}

.kategorie-menu-container .checkbox-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 20px;
}

.kategorie-menu-container .checkbox-item {
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.4;
}

.kategorie-menu-container .checkbox-item input[type="checkbox"] {
    margin-right: 8px;
    margin-top: 2px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

/* Search Bar */
.kategorie-menu-container .menu-search-bar {
    padding: 0 20px 20px 20px;
    display: flex;
}

.kategorie-menu-container .menu-search-bar .menu-search-input {
    flex: 1;
    border: 1px solid #ddd;
    border-right: none;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px 0 0 4px;
    background: #fcfcfc;
}

.kategorie-menu-container .menu-search-bar .menu-search-btn {
    background-color: #e67e22;
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 16px;
}

.kategorie-menu-container .menu-search-bar .menu-search-btn:hover {
    background-color: #d35400;
}

/* ========================================
   KATEGORIE MENU - Dopasowane do strony
   ======================================== */

.kategorie-menu-section {
    background: #fff;
    padding: 30px 0;
    margin-bottom: 30px;
}

/* Nawigacja zwierzÄ…t */
.animal-navigation {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.animal-nav-item {
    flex: 1;
    min-width: 150px;
    padding: 15px 20px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    color: #495057;
}

.animal-nav-item:hover {
    background: #e9ecef;
    border-color: #0da487;
    transform: translateY(-2px);
}

.animal-nav-item.active {
    background: #0da487;
    border-color: #0da487;
    color: #fff;
}

.animal-nav-item .arrow {
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.animal-nav-item.active .arrow {
    transform: rotate(180deg);
}

/* Zawartość filtrów */
.filter-content {
    display: none;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
}

.filter-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Zakładki filtrów */
.filter-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 12px 20px;
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-tab:hover {
    border-color: #0da487;
    color: #0da487;
}

.filter-tab.active {
    background: #0da487;
    border-color: #0da487;
    color: #fff;
}

.filter-button {
    padding: 12px 25px;
    background: linear-gradient(135deg, #0da487 0%, #0b8a6f 100%);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-button:hover {
    background: linear-gradient(135deg, #0b8a6f 0%, #096b58 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13,164,135,0.3);
}

/* Panele z checkboxami */
.tab-panels {
    margin-bottom: 20px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 10px;
}

/* Ładny scrollbar dla checkbox-grid */
.checkbox-grid::-webkit-scrollbar {
    width: 8px;
}

.checkbox-grid::-webkit-scrollbar-track {
    background-color: #f0f0f0;
    border-radius: 10px;
}

.checkbox-grid::-webkit-scrollbar-thumb {
    background-color: #0da487;
    border-radius: 10px;
}

.checkbox-grid::-webkit-scrollbar-thumb:hover {
    background-color: #0b8a6f;
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #495057;
}

.checkbox-grid label:hover {
    border-color: #0da487;
    background: #f0fdf9;
}

.checkbox-grid input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #0da487;
}

.checkbox-grid input[type="checkbox"]:checked + span {
    color: #0da487;
    font-weight: 600;
}

/* Pasek wyszukiwania */
.menu-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    border: 2px solid #dee2e6;
}

.menu-search-bar i {
    color: #6c757d;
    font-size: 18px;
}

.menu-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #495057;
}

.menu-search-bar input::placeholder {
    color: #adb5bd;
}

/* Responsywność */
@media (max-width: 768px) {
    .animal-navigation {
        flex-direction: column;
    }
    
    .animal-nav-item {
        min-width: 100%;
    }
    
    .filter-tabs {
        flex-direction: column;
    }
    
    .filter-button {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Wielopoziomowe Menu Kategorii (SI_PRO_MENU)
   ============================================ */

/* Główna lista kategorii - bez kropek */
.category-dropdown .category-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0;
}

.category-dropdown .category-list li {
    list-style: none !important;
}

/* Styl linków kategorii w dropdown */
.category-dropdown .category-list li .category-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    color: #222;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

.category-dropdown .category-list li .category-name:hover {
    background-color: #f8f8f8;
    border-left: 3px solid #0da487;
    padding-left: 12px;
}

/* Podświetlenie rozwiniętej kategorii (gdy pokazuje submenu) - delikatne szare tło + zielona linia */
.category-dropdown .category-list li.onhover-category-list:hover > .category-name {
    background-color: #f8f8f8;
    border-left: 3px solid #0da487;
    padding-left: 12px;
}

.category-dropdown .category-list li .category-name h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

/* Elementy listy w dropdown kategorii */
.onhover-category-box .list-1,
.onhover-category-box .list-2 {
    flex: 1;
    min-width: 200px;
}

.onhover-category-box .list-1 ul,
.onhover-category-box .list-2 ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
    display: block !important;
    flex-wrap: nowrap !important;
}

.onhover-category-box .list-1 ul li,
.onhover-category-box .list-2 ul li {
    display: block;
    margin-bottom: 8px;
    position: relative;
}

.onhover-category-box .list-1 ul li::after,
.onhover-category-box .list-2 ul li::after {
    display: none !important;
}

.onhover-category-box .list-1 ul li > a,
.onhover-category-box .list-2 ul li > a {
    display: block;
    padding: 5px 10px;
    color: #222;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-left: 0 !important;
    position: relative;
}

/* Zielona kreska pod tekstem - animowana */
.onhover-category-box .list-1 ul li > a::after,
.onhover-category-box .list-2 ul li > a::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 10px;
    width: 0;
    height: 2px;
    background-color: #0da487;
    transition: width 0.3s ease-in-out;
}

.onhover-category-box .list-1 ul li > a:hover,
.onhover-category-box .list-2 ul li > a:hover {
    background-color: #f8f8f8;
    color: #0da487;
}

.onhover-category-box .list-1 ul li > a:hover::after,
.onhover-category-box .list-2 ul li > a:hover::after {
    width: calc(100% - 20px);
}

/* Submenu - drugi poziom podkategorii */
.submenu-list {
    list-style: none !important;
    padding: 5px 0 5px 15px !important;
    margin: 0 !important;
    border-left: 2px solid #e8e8e8;
    margin-left: 10px !important;
}

.submenu-list li {
    margin-bottom: 4px;
}

.submenu-list li::after {
    display: none !important;
}

.submenu-list li a {
    display: block;
    padding: 4px 10px;
    color: #666;
    font-size: 13px;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.2s ease;
    position: relative;
}

/* Zielona kreska pod tekstem - animowana */
.submenu-list li a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 10px;
    width: 0;
    height: 2px;
    background-color: #0da487;
    transition: width 0.3s ease-in-out;
}

.submenu-list li a:hover {
    background-color: #f8f8f8;
    color: #0da487;
}

.submenu-list li a:hover::after {
    width: calc(100% - 20px);
}

/* Trzeci poziom podkategorii (jeśli potrzebny) */
.submenu-list .submenu-list {
    padding-left: 12px !important;
    margin-top: 4px;
    border-left: 1px solid #f0f0f0;
}

.submenu-list .submenu-list li a {
    font-size: 12px;
    color: #888;
}

/* Responsive dla kategorii */
@media (max-width: 991px) {
    .onhover-category-box {
        display: block !important;
        grid-template-columns: unset !important;
    }
    
    .onhover-category-box .list-2 {
        margin-top: 20px;
    }
}

@media (max-width: 767px) {
    .onhover-category-box .list-1 ul li > a,
    .onhover-category-box .list-2 ul li > a {
        padding: 8px 12px;
        font-size: 15px;
    }
    
    .submenu-list {
        padding-left: 10px !important;
    }
    
    .submenu-list li a {
        padding: 6px 10px;
        font-size: 14px;
    }
}

/* ============================================
   Hover Effects for Product Tags/Badges
   (Tagi, Gatunki, Wskazania, Substancje czynne)
   ============================================ */

/* ============================================
    Produkt: mniejsze etykiety zakladek (Opis, Dawkowanie)
    ============================================ */

.product-section-box .custom-nav .nav-item .nav-link .tab-label--small {
     font-size: 0.85em;
}

/* Odstep nad stopka na karcie produktu */
.site__body--product {
    padding-bottom: 40px;
}

/* Hover effect for select-package links (tags, species, indications, etc.) */
.product-section .right-box-contain .product-package .select-package li a:hover {
    border-color: var(--theme-color);
    background-color: var(--theme-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Smooth transition for all states */
.product-section .right-box-contain .product-package .select-package li a {
    transition: all 0.3s ease-in-out;
}

/* Add cursor pointer to make it clear items are clickable */
.product-section .right-box-contain .product-package .select-package li {
    cursor: pointer;
}

/* ============================================
   "In Cart" Badge Styles
   ============================================ */

/* Badge pokazujący że produkt jest w koszyku */
.in-cart-badge .badge {
    font-size: 0.85rem;
    font-weight: 500;
    animation: fadeInUp 0.4s ease-out;
}

.in-cart-badge .badge.bg-success {
    background-color: #0da487 !important;
}

/* Dynamiczny badge po dodaniu do koszyka */
.info_kosz .badge {
    font-size: 0.85rem;
    font-weight: 500;
    animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Animacja pojawiania się badge */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Ribbon/wstążka na kafelku produktu w liście */
.product-box .in-cart-ribbon {
    position: absolute;
    top: 10px;
    right: -5px;
    background: linear-gradient(135deg, #0da487 0%, #099b7a 100%);
    color: #fff;
    padding: 5px 12px 5px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 10;
    border-radius: 3px 0 0 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.product-box .in-cart-ribbon::after,
.product-box-3 .in-cart-ribbon::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid #077a61;
    border-bottom: 5px solid transparent;
}

.product-box .in-cart-ribbon svg,
.product-box-3 .in-cart-ribbon svg {
    width: 12px;
    height: 12px;
}

/* Hover effect na produkcie w koszyku */
.product-box.is-in-cart,
.product-box-3.is-in-cart {
    border: 2px solid #0da487;
    border-radius: 8px;
}

.product-box.is-in-cart .product-image,
.product-box-3.is-in-cart .product-image {
    position: relative;
}

/* Ribbon dla product-box-3 (kafelki) */
.product-box-3 .in-cart-ribbon {
    position: absolute;
    top: 10px;
    right: -5px;
    background: linear-gradient(135deg, #0da487 0%, #099b7a 100%);
    color: #fff;
    padding: 5px 12px 5px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 10;
    border-radius: 3px 0 0 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Pulse animation dla nowo dodanego produktu */
@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 164, 135, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(13, 164, 135, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13, 164, 135, 0);
    }
}

.product-box.is-in-cart.just-added,
.product-box-3.is-in-cart.just-added {
    animation: pulse-border 1s ease-out;
}

/* ============================================
   Product Card Grid Layout - Wyrównanie elementów
   ============================================ */

/* Nazwa produktu - stała wysokość 2 linii */
.product-box-3 .product-detail .name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

/* Opis krótki - ukryj na widoku grid dla spójności */
.product-box-3 .product-detail .product-content {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em;
    line-height: 1.3;
}

/* Producent - stała wysokość 1 linii */
.product-box-3 .product-detail .unit {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.25rem;
}

/* Cena - zawsze na tej samej pozycji */
.product-box-3 .product-detail .price {
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Kontener na przycisk koszyka - zawsze na dole */
.product-box-3 .product-detail .note-box {
    margin-top: 0.5rem;
}

/* Upewnij się że product-footer zajmuje całą dostępną przestrzeń */
.product-box-3 .product-footer {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-box-3 .product-detail {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Badge "W koszyku" - wyśrodkowany w widoku grid */
.product-box-3 .in-cart-badge,
.product-box-3 .info_kosz {
    text-align: center;
}

/* Widok grid - ukryj corner-badge, pokaż inline badge */
.product-box-3 .in-cart-corner-badge {
    display: none;
}

/* Widok listy - pokaż corner-badge w prawym górnym rogu, ukryj inline badge */
.list-style .product-box-3 .in-cart-corner-badge {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.list-style .product-box-3 .in-cart-corner-badge .badge {
    font-size: 0.85rem;
    font-weight: 500;
    animation: fadeInUp 0.4s ease-out;
    background-color: #0da487 !important;
}

/* W widoku listy ukryj inline badge (pod przyciskiem) */
.list-style .product-box-3 .in-cart-badge {
    display: none;
}