/* ----------------------------------- */
/* GLOBAL STYLES */
/* ----------------------------------- */
:root {
    --color-primary: #ff5148;
    --white: #ffffff;
    --black: #1d201f;
    --bg-color: #F6F4F1;
    --color-gray: #f0f0f0;
}

body {
    color: var(--black);
    font-family: "Manrope", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

h1 {
    font-size: 4.5rem;
}

h2 {
    font-size: 2rem;
}

p {
    margin-bottom: 0 !important;
}

.bg-light {
    background-color: var(--bg-color) !important;
}

.primary-text {
    color: var(--color-primary);
}

/* Custom Alert */
.alert-custom-primary {
    background-color: #fff5f4;
    border: 1px solid var(--color-primary);
    color: var(--black);
    border-radius: 0.5rem;
    padding: 1rem;
}

/* ----------------------------------- */
/* BUTTONS */
/* ----------------------------------- */

/* Base button styles */
.btn {
    width: fit-content;
    font-weight: 600;
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.btn span {
    font-size: 0.875rem;
}

.btn.small {
    padding: 0.5rem 1rem;
}

.btn-auth {
    padding: 0.5rem 1rem !important;
}

/* Dark button */
.btn-dark {
    background-color: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
}

.btn-dark:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--white);
}

/* Dark outline button */
.btn-outline-dark {
    background-color: transparent;
    color: var(--black);
    border: 1px solid var(--black);
}

.btn-outline-dark:hover {
    background-color: var(--black);
    color: var(--white);
}

/* Primary button */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--white);
    border: 1px solid var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--black);
    border-color: var(--black);
    color: var(--white);
}

/* Primary outline button */
.btn-outline-primary {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-outline-primary:hover {
    background-color: var(--color-primary);
    color: var(--white);
}

/* ----------------------------------- */
/* WISHLIST & CART ELEMENTS */
/* ----------------------------------- */

/* Wishlist button */
.wishlist-btn {
    padding: 0.5rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
}


/* Stock Badge */
.stock-badge {
    border-radius: 2rem;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.stock-badge-absolute {
    position: absolute;
    top: -0.5rem;
    right: 0;
}

.wishlist-btn:hover {
    transform: translateY(-3px);
    background-color: var(--color-primary);
    color: var(--white);
    border-color: var(--color-primary) !important;
}

.wishlist-btn.is-active {
    animation: pop 0.25s ease;
}

.wishlist-btn.is-active:hover {
    transform: none;
    background-color: inherit;
    /* alebo transparent */
    color: inherit;

}

@keyframes pop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

/* Štandardný stav */
.wishlist-btn svg path:last-child {
    transition: fill 0.25s ease, stroke 0.25s ease;
}

/* Aktívne srdiečko */
.wishlist-btn.is-active svg path:last-child {
    fill: var(--color-primary);
    stroke: var(--color-primary);
}

.btn-remove:hover svg {
    stroke: var(--color-primary);
}

/* Wishlist items styling */
.wishlist-items .btn-delete {
    cursor: pointer;
    transition: color 0.2s ease;
}

.wishlist-items .btn-delete:hover {
    color: var(--color-primary) !important;
}

.wishlist-items .border-bottom:last-child {
    border-bottom: 0 !important;
}

/* Product Codes Table */
.product-codes-table {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.product-codes-table .code-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-codes-table .code-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
}

.product-codes-table .code-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--black);
}

/* Sections */
.sections {
    padding: 1.5rem 0;
}

/* Product Stock Banner */
.product-stock-banner {
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    border: 2px solid;
    width: fit-content;
}

.product-stock-banner.stock-available {
    background-color: #e8f5e9;
    border-color: #a5d6a7;
}

.product-stock-banner.stock-unavailable {
    background-color: #ffebee;
    border-color: #ef9a9a;
}

.stock-banner-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stock-banner-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

.stock-available .stock-banner-icon {
    background: #2e7d32;
}

.stock-unavailable .stock-banner-icon {
    background: #c62828;
}

.stock-banner-icon svg {
    color: white;
}

.stock-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.product-stock-banner .stock-main {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.stock-available .stock-main {
    color: #2e7d32;
}

.stock-unavailable .stock-main {
    color: #c62828;
}

.product-stock-banner .stock-info {
    font-size: 0.875rem;
    color: var(--black);
    opacity: 0.8;
    line-height: 1.5;
}

.product-stock-banner .stock-link {
    color: var(--black);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    opacity: 1;
}

/* Bulk Discount Banner */
.bulk-discount-banner {
    background: var(--bg-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.bulk-discount-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 1rem;
}

.bulk-discount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
}

.bulk-discount-row:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bulk-discount-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.bulk-discount-condition {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--black);
}

.bulk-discount-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
}

.bulk-discount-price-vat {
    font-size: 0.875rem;
    font-weight: 400;
    color: #666;
}

.bulk-discount-form {
    flex-shrink: 0;
}

.btn-bulk-cta {
    background: var(--black);
    color: white;
    border: none;
    border-radius: 2rem;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-bulk-cta:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ----------------------------------- */
/* DROPDOWNS */
/* ----------------------------------- */
/* Cart*/
.cart-badge {
    position: absolute;
    top: -11px;
    left: 14px;
    background-color: #f33f0d;
    color: #fff;
    font-size: 0.75rem;
    border-radius: 50%;
    width: 1.3125rem;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.cart-hover-wrapper {
    position: relative;
}

.cart-trigger-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.cart-trigger-btn:hover {
    opacity: 0.7;
}

/* Wishlist Dropdown */
.wishlist-badge {
    position: absolute;
    top: -11px;
    left: 14px;
    background-color: #f33f0d;
    color: #fff;
    font-size: 0.75rem;
    border-radius: 50%;
    width: 1.3125rem;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.wishlist-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    width: 320px;
    border-radius: 10px;
    padding: 30px 20px 27px;
    z-index: 100;
}

.wishlist-hover-wrapper:hover .wishlist-dropdown {
    display: block !important;
}

/* Search Dropdown */
.custom-search-dropdown {
    padding: 10px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    min-width: 220px;
    margin-top: 10px !important;
}

.custom-search-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 600;
    color: var(--black);
    transition: all 0.2s ease;
    background: transparent;
    cursor: pointer;
}

.custom-search-dropdown .dropdown-item:hover,
.custom-search-dropdown .dropdown-item.active {
    background-color: transparent;
    color: var(--color-primary);
}

.custom-search-dropdown .category-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.wishlist-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}

.wishlist-dropdown li+li {
    border-top: 1px solid #eee;
    padding-top: 5px;
    margin-top: 5px;
}

.wishlist-dropdown ul li:last-child {
    margin-bottom: 1.5rem;
}

.wishlist-dropdown p {
    color: var(--color-black);
    font-weight: 600;
    margin: 0;
    transition: all 0.3s ease-in-out;
}

.wishlist-dropdown p:hover {
    color: var(--color-primary);
}

.wishlist-total {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    margin: 1.5rem 0 !important;
}

.wishlist-total strong {
    color: var(--color-primary) !important;
    font-size: 1.125rem;
}

.wishlist-dropdown .btn-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1rem;
}

.wishlist-dropdown .btn-wrapper a {
    width: 100%;
    text-align: center;
}

.wishlist-dropdown button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    transition: color 0.2s ease;
}

.wishlist-dropdown button:hover {
    color: var(--color-primary);
}

.wishlist-dropdown img {
    border-radius: 8px;
    object-fit: cover;
    width: 80px;
    height: 80px;
}

.wishlist-link {
    padding-top: 1rem;
}

/* ----------------------------------- */
/* HEADER */
/* ----------------------------------- */
.topbar {
    font-size: 0.813rem;
    padding: 10px 0;
}

form.d-flex.flex-grow-1.mx-3 {
    max-width: 637px;
    width: 100%;
}

form.d-flex.flex-grow-1.mx-3 {
    border: 1px solid var(--color-primary);
    border-radius: 0.25rem;
    padding: 0.5rem 0;
}

.header input.form-control {
    border: none !important;
}

.header button.btn.btn-outline-secondary.dropdown-toggle {
    border: none;
}

.search-icon {
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.search-wrapper {
    border: 1px solid var(--black);
    max-width: 800px;
}

#categoryBtn {
    border-radius: 0 !important;
    padding: 0.5rem 0.5rem !important;
}

#categoryBtn:hover {
    background-color: inherit !important;
}

.btn-wrapper {
    display: flex;
    justify-content: space-between;
}

.main-header {
    padding: 30px 0;


}

.nav-wrapper-full {
    width: 100%;
    background: var(--black);
}

.header .nav-link {
    color: var(--white);
    font-weight: 700;
    transition: all 0.3s ease;
}

.header .nav-link:hover {
    color: var(--color-primary);
}

.support-center {
    color: var(--white);
}

.support-center p {
    font-size: 0.875rem;
}

.support-center .span {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0 !important;
}

.nav-wrapper-full {
    margin-bottom: 1rem;
}

/* ----------------------------------- */
/* HOME */
/* ----------------------------------- */
/* Hero Section */
/* ----------------------------------- */



.hero-card {
    background: var(--white);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    padding: 40px;
    min-height: 300px;
    transition: transform 0.3s ease;
}

.hero-card-large {
    min-height: 500px;
}

.hero-card-small {
    min-height: 240px;
}

.hero-card-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -250px;
    z-index: 1;
    overflow: hidden;
}

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

.hero-card-content {
    position: relative;
    z-index: 2;
    color: var(--black);
}

.hero-card {
    position: relative;
    min-height: 420px;
    /* uprav podľa dizajnu */
    overflow: hidden;
    border-radius: 20px;
    /* ak máš zaoblenie */
}

.hero-card-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

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

.hero-card-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    padding: 3rem;
    color: var(--white);
}


.hero-kicker {
    font-size: 0.875rem;
    color: var(--black);
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-title {
    font-size: 3rem !important;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 16px;
}

.hero-description {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0;
    max-width: 426px;
}

.hero-card-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.2;
}

.hero-card-subtitle {
    font-size: 1rem;
    margin-bottom: 0;
    color: #666;
}

.hero-main-slider .splide__pagination {
    bottom: 20px;
}

.hero-main-slider .splide__pagination__page {
    background: rgba(255, 255, 255, 0.5);
    border: none;
    width: 8px;
    height: 8px;
}

.hero-main-slider .splide__pagination__page.is-active {
    background: #ffffff;
    transform: scale(1.2);
}

/* ----------------------------------- */
/* PRODUCT */
/* ----------------------------------- */

/* Product Miniature Card */
.product-miniature-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
}

.product-miniature-image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #f5f5f7;
    margin-bottom: 16px;
}

.product-miniature-image-wrapper img {
    width: 100%;
    height: 266px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
    background-color: white;
}

.product-miniature-card:hover .product-miniature-image-wrapper img {
    transform: scale(1.05);
}

.product-miniature-stock-badge {
    position: absolute;
    top: -1px;
    right: -5px;
    left: auto;
    z-index: 5;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: .75rem;
    color: #fff;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

.product-miniature-stock-badge.in-stock {
    background-color: #34c759;
}

.product-miniature-stock-badge.out-of-stock {
    background-color: #ff3b30;
}

.product-miniature-discount-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 6;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 1rem;
    color: #fff;
    padding: 8px 16px;
    font-weight: 700;
    background-color: #ff3b30;
}

.product-miniature-action-buttons {

    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;

    transition: all 0.3s ease;
    z-index: 10;
}



.product-miniature-action-buttons form {
    margin: 0;
}

.product-miniature-action-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.product-miniature-action-btn:hover {
    transform: scale(1.1);
    background: #f5f5f7;
}

.product-miniature-action-btn.is-active svg {
    fill: #ff3b30;
    stroke: #ff3b30;
}

.product-miniature-action-btn svg {
    stroke: var(--black);
    fill: none;
    transition: all 0.2s ease;
    width: 20px;
    height: 20px;
    min-width: 20px;
}

.product-miniature-content {
    text-align: left;
}

.product-miniature-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.product-miniature-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-miniature-title a:hover {
    color: var(--color-primary);
}

.product-miniature-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 4px 0;
}

.product-miniature-old-price {
    text-decoration: line-through;
    color: #adadad;
    font-size: 0.875rem;
    margin-left: 8px;
    font-weight: 400;
}

.product-miniature-price-without-vat {
    font-size: 13px;
    color: #86868b;
    margin: 0 0 12px 0;
}

.product-miniature-stock {
    display: none;
}

.product-miniature-add-to-cart-wrapper {
    margin-top: 16px;
    display: flex;
}

.add-to-cart-form-miniature {
    align-items: stretch;
}

.product-miniature-add-to-cart-wrapper .add-to-cart {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    background: var(--black);
    font-size: 14px;
    font-weight: 600;
    color: var(--white) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    letter-spacing: 0.5px;
}

.quantity-input-miniature {
    width: 4rem;
    flex-shrink: 0;
    text-align: center;
    border-radius: 2rem;
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    font-size: 14px;
    font-weight: 600;
}

.modal-body .quantity-input-miniature {
    width: 6rem;
    margin: 0 auto;
    display: block;
}

.quantity-input-miniature:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
    outline: none;
}

.product-miniature-add-to-cart-wrapper .add-to-cart:hover {
    background-color: var(--color-primary);
}

/* ----------------------------------- */
/* CART SIDEBAR */
/* ----------------------------------- */

/* Cart Sidebar Offcanvas */
#cartSidebar {
    display: flex;
    flex-direction: column;
}

#cartSidebarInner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cart-sidebar-content {
    flex: 1;
    overflow-y: auto;
}

.cart-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

.cart-sidebar {
    position: fixed;
    top: 0;
    right: -31.25rem;
    width: 31.25rem;
    height: 100vh;
    background: #ffffff;
    z-index: 9999;
    transform: translateX(0);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.cart-sidebar.active {
    right: 0px;
}

.cart-sidebar-inner-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.cart-sidebar-header {
    padding: 24px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-sidebar-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--black);
}

.cart-sidebar-close {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.cart-sidebar-close:hover {
    background: #f5f5f7;
}

.cart-sidebar-content {
    flex: 1;
    overflow-y: auto;
}

.cart-sidebar-items {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cart-sidebar-item {
    display: flex;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e5e5;
}

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

.cart-item-image {
    width: 5rem;
    height: 5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f5f5f7;
    flex-shrink: 0;
}

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

.cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cart-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.cart-item-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--black);
    margin: 0;
    line-height: 1.3;
    flex: 1;
}

.btn-remove-text {
    background: none;
    border: none;
    color: #ff3b30;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.btn-remove-text:hover {
    opacity: 0.7;
}

.cart-item-quantity {
    display: flex;
    justify-content: flex-end;
}

.quantity-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.quantity-btn:hover:not(:disabled) {
    background: #e5e5e5;
}

.quantity-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.quantity-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    min-width: 20px;
    text-align: center;
}

.cart-sidebar-empty {
    text-align: center;
    padding: 40px 20px;
    color: #86868b;
}

.cart-sidebar-footer {
    border-top: 1px solid #e5e5e5;
    padding: 1.5rem;
    margin-top: auto;
    background: #ffffff;
}

.cart-sidebar-totals {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin-bottom: 20px;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    color: var(--black);
}

.cart-total-final {
    font-size: 1.5rem;
    font-weight: 700;
}

.cart-sidebar-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.btn-cart-action {
    flex: 1;
    padding: 12px 16px;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    display: block;
}

/* Quantity controls vertical - pre cart-sidebar */
.qty-controls-vertical {
    gap: 6px;
}

.qty-btn-up,
.qty-btn-down {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qty-btn-up:hover:not(:disabled),
.qty-btn-down:hover:not(:disabled) {
    background: #f5f5f7;
    border-color: #d2d2d7;
}

.qty-btn-up:disabled,
.qty-btn-down:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.qty-btn-up svg,
.qty-btn-down svg {
    width: 16px;
    height: 16px;
    color: var(--black);
}

.btn-view-cart {
    background: #ffffff;
    border: 1.5px solid #d2d2d7;
    color: var(--black);
}

.btn-view-cart:hover {
    background: #f5f5f7;
    border-color: var(--black);
}

.btn-checkout {
    background: var(--black);
    border: 1.5px solid var(--black);
    color: #ffffff;
}

.btn-checkout:hover {
    background: #000000;
    color: var(--white) !important;
}

.cart-item-row-checkout {
    display: flex;
}

/* ----------------------------------- */
/* OLD PRODUCT STYLES (Legacy) */
/* ----------------------------------- */
.category-filter a {

    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.category-filter a.active,
.category-filter a:hover {
    color: var(--color-black);
    border-bottom: 2px solid var(--color-black);
}

.product {
    display: flex;
    flex-direction: column;
    width: fit-content;
    padding: 1.563rem;
    border-radius: 1.25rem;
    position: relative;
}

.product-img-wrapper {
    width: 240px;
    max-height: 320px;
    overflow: hidden;
}

.product-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-category {
    font-size: 12px;
}

.product-name {
    font-weight: 700;
    max-width: 235px;
    widows: 100%;
}

.product-action {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 3.9rem;
}

.product-action .price {
    font-size: 1.125rem;
    font-weight: 700;
    text-wrap: nowrap;
}

.product-action .price .final-price {
    color: var(--color-primary);
}

.product-action .price .original-price {
    font-size: 0.875rem;
    text-decoration: line-through;
}

.product {
    position: relative;
    overflow: hidden;
}

.product-img-wrapper {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.product .wishlist-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.product .wishlist-btn {
    background-color: white;
}

.product .wishlist-btn:hover {
    background-color: var(--color-primary);
}

.product:hover .wishlist-overlay {
    opacity: 1;
    visibility: visible;
}

.product-action {
    width: 100% !important;
    max-width: none !important;
}

.product-action .add-to-cart-form {
    width: 100% !important;
    flex-wrap: nowrap !important;
}

.product-action .add-to-cart {
    flex: 1;
    min-width: 0;
}

/* Product Page */
.main-image-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 15px;
}

.zoom-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-image {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.2s ease-out;
    cursor: crosshair;
}

.zoom-container .splide__arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex !important;
    justify-content: space-between;
    padding: 0 15px;
    pointer-events: auto;
    z-index: 10;
}

.zoom-container .splide__arrow {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0.7;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: var(--white);
}

.zoom-container .splide__arrow svg {
    width: 24px;
    height: 24px;
}

.zoom-container .splide__arrow:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.8);
}

.thumb-slider-container {
    width: 100%;
    flex: 0 0 auto;
    width: 120px;
}

.thumb-images {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.thumb-img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.thumb-img:hover {
    opacity: 0.8;
}

.thumb-img.is-active {
    border-color: var(--color-primary);
}

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

.quantity-input-vertical {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    overflow: hidden;
    max-width: 90px;
    width: 100%;
    position: relative;
    height: 44px;
}

.qty-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.qty-field {
    width: 100%;
    border: none;
    outline: none;
    text-align: center;
    font-size: 16px;
}

.qty-field::-webkit-inner-spin-button,
.qty-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-controls {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1px 0;
}

.qty-controls>* {
    color: var(--color-primary);
}

.qty-btn {
    flex: 1;
    background: #fff;
    border: none;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}

.product-page .product-action {
    align-items: flex-end;
    gap: 8px;
    justify-content: normal;
}

.product-page .final-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
}

.product-page .original-price {
    font-size: 1.75rem;
    text-decoration: line-through;
}

/* =============================== */
/* BREADCRUMB                      */
/* =============================== */

.breadcrumb-wrapper {
    padding: 1rem 0;
    margin-bottom: 1rem;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    background-color: transparent;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #666;
}

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

.breadcrumb-item a:hover {
    color: var(--color-primary);
}

.breadcrumb-item svg {
    width: 1rem;
    height: 1rem;
    stroke: var(--black);
}

.breadcrumb-item.active {
    color: #666;
    font-weight: 500;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    padding-right: 0.5rem;
    color: #ccc;
}

/* =============================== */
/* PRODUCT PAGE                    */
/* =============================== */

.product-page {
    margin-bottom: 50px;
}



.product-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding-top: 20px;
}

.product-gallery {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: flex-start;
}

.product-gallery .main-image-wrapper {
    flex: 1;
    min-width: 0;
}

.product-gallery .thumb-slider-container {
    flex: 0 0 auto;
    width: 120px;
    height: auto;
    max-height: 100%;
}

.thumb-slider-container.splide {
    height: auto;
}

.thumb-slider-container .splide__track {
    height: auto;
    max-height: calc((100px + 10px) * 4 - 10px);
    overflow-y: auto;
}

.thumb-slider-container .splide__list {
    flex-direction: column;
    display: flex;
}

.product-details {
    display: flex;
    flex-direction: column;
}

/* Product Title */
.product-page .product-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--black);
}


/* Price */
.price-section {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}



.product-page .original-price {
    font-size: 1rem;
    text-decoration: line-through;
}

/* Description */
.product-page .product-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--black);
}

/* Product Options */
.product-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}

.option-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.option-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--black);
    text-transform: capitalize;
}




/* Quantity Section */
.quantity-section {
    margin-bottom: 2rem;
}

/* Product Actions */
.product-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 2rem;
}

.product-page .product-action {
    align-items: center;
    gap: 12px;
    justify-content: normal;
    display: flex;
    width: 100%;
}

/* Product Info Links */
.product-info-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}

.info-link {
    color: var(--black);
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.info-link:hover {
    color: var(--color-primary);
}



/* Payment Methods */
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-badge {
    font-size: 0.9rem;
    color: #27ae60;
    font-weight: 600;
}

.payment-icons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.payment-icons img {
    height: 30px;
    width: auto;
    object-fit: contain;
}

.payment-badge-text {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px 8px;
    background-color: #f9f9f9;
}

/* Product Specification */
.product-specs-section {
    margin-top: 60px;
    padding-bottom: 40px;
}

.product-specifications {
    margin-top: 0;
}

.prod-nav {
    display: flex;
    gap: 30px;
    padding-left: 0;
    margin-bottom: 0;
    justify-content: center;
}

.prod-nav li {
    list-style: none;
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    font-size: 1.5rem;
    text-transform: capitalize;
}

.prod-nav li:hover {
    color: var(--black);
}

.prod-nav li.active {
    color: var(--black);
    border-bottom: 2px solid var(--black);
}

.prod-tab {
    display: none;
}

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

.prod-tab-wrapper {
    line-height: 1.8;
    color: var(--black);
}

.prod-tab-wrapper p {
    margin-bottom: 1rem;
    padding: 2.5rem;
    border-radius: 1.25rem;
    text-align: center;
}

/* Related Products */
.related-products {
    margin-top: 60px;
    margin-bottom: 50px;

}

.related-products h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--black);
    text-align: center;
}

/* ----------------------------------- */
/* RELATED PRODUCTS */
/* ----------------------------------- */
.search-wrapper {
    position: relative;
    flex-grow: 1;
    border-radius: 0.25rem;
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    margin-top: 4px;
    padding: 8px 0;
    z-index: 1000;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    max-height: 350px;
    overflow-y: auto;
}

.search-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-dropdown li {
    padding: 8px 14px;
}

.search-dropdown li:hover {
    background: #f8f9fa;
}

.search-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #222;
}

.search-dropdown img {
    width: 45px;
    height: 45px;
    border-radius: 6px;
    object-fit: cover;
}

.search-dropdown-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #aaa;
    padding: 0.5rem 0.875rem 0.25rem;
    pointer-events: none;
}

.search-dropdown-label:hover {
    background: none;
}

.input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    background: transparent;
    box-shadow: none;
}

/* ----------------------------------- */
/* CART PAGE */
/* ----------------------------------- */
#cart-count-wrapper span {
    color: var(--color-primary);
    font-weight: bold;
}


.cart-page tr td {
    padding: 15px 0;
}

.price-cart {
    font-size: 1.25rem;
}

.price-cart.price-cart-final {
    color: var(--color-primary);
    font-weight: bold;
}


.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.cart-table th:first-child,
#cart-items td:first-child {
    padding-left: 20px;
    /* uprav si hodnotu */
}

/* ----------------------------------- */
/* ADVANTAGES */
/* ----------------------------------- */
.advantages-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    border-radius: 1.25rem;
}

.advantagaes-img-wrapper {
    width: 64px;
    height: 64px;
}

.advantagaes-img-wrapper img {
    width: 100%;
    height: 100%;
}

/* ----------------------------------- */
/* ADD TO CART MODAL */
/* ----------------------------------- */
.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: none;
}

.modal-header .btn-close:focus {
    box-shadow: none;
}

/* ----------------------------------- */
/* NEWSLETTER */
/* ----------------------------------- */
.newsletter .container {
    padding: 84px 78px;
    border-radius: 1.25rem;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    max-width: 520px;
    background: white;
    border-radius: 50px;
    padding: 5px;
    position: relative;
}

.newsletter-form::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10 14l11 -11'/%3E%3Cpath d='M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5'/%3E%3C/svg%3E");
    font-size: 18px;
    color: #777;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.newsletter-form input[type="email"] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 12px 20px 12px 48px;
    border-radius: 50px;
}

.newsletter-form button {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}



.newsletter .content {
    max-width: 550px;
    width: 100%;
}

.newsletter .content p {
    margin-bottom: 45px !important;
}

/* ----------------------------------- */
/* Register */
/* ----------------------------------- */
.form-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.input-error {
    color: #820933;
    font-size: 14px;
    margin-top: 3px;
}

.form-row {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.registration .form-group:not(:last-child) {
    margin-bottom: 0.75rem;
}

.account-type-row {
    display: flex;
    gap: 15px;
}

/* 🔥 ZÁKLAD INPUTOV */
.registration .form-group input,
.cart-page .form-group input {
    padding: 14px 20px;
    font-size: 16px;

    border: 1px solid #e5e5e5;
    border-radius: 14px;
    background: #ffffff;

    outline: none;
    transition: all 0.2s ease;
    color: #333;
}

/* 🔥 Placeholder štýl */
.registration .form-group input::placeholder,
.cart-page .form-group input::placeholder {
    color: #8a8a8a;
    opacity: 1;
    font-weight: 500;
}

/* 🔥 Hover */
.registration .form-group input:hover,
.cart-page .form-group input:hover {
    border-color: #d0d0d0;
}

/* 🔥 Focus efekt */
.registration .form-group input:focus,
.cart-page .form-group input:focus {
    border-color: var(--color-primary);
}

/* Login & Registration Styles */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    background-color: #fff;
}

.login-card {
    width: 100%;
    max-width: 450px;
    padding: 2rem;
    background: #fff;
}

.login-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: #000;
    text-align: left;
}

.login-form .form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.login-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
    background-color: #fff;
    transition: border-color 0.3s;
}

.login-input:focus {
    border-color: #000;
    outline: none;
}

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle svg {
    width: 20px;
    height: 20px;
    fill: #333;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #333;
}

.remember-me input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.forgot-password {
    color: #000;
    text-decoration: underline;
    font-weight: 600;
    font-size: 0.95rem;
}

.login-btn {
    width: auto;
    background-color: #111;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 35px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-btn:hover {
    background-color: #333;
}

.input-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Registration specific overrides */
.login-card.registration-card {
    max-width: 600px;
}

.account-type-label {
    font-weight: 600;
}

.account-type-row {
    display: flex;
    gap: 20px;
}

.registration-section-title {
    font-size: 1.2rem;
    font-weight: 600;
}

/* Login recovery overrides */
.recovery-title {
    font-size: 2rem;
}

.recovery-actions {
    justify-content: flex-start;
}

.checkbox input {
    height: 16px;
    width: 16px;
    margin-top: 0.5rem;
    border: 1px solid #e5e5e5;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.custom-checkbox input {
    display: none;
    /* skryjeme pôvodný checkbox */
}

.custom-checkbox .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #e5e5e5;
    background: white;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    transition: all 0.25s ease;
}

/* Tu nastavíš farbu “vnútra” checkboxu */
.custom-checkbox input:checked+.checkmark {
    background-color: var(--color-primary);
    /* 🔥 sem daj farbu */
    border-color: var(--color-primary);
}

/* checkmark ikonka */
.custom-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 4px;
    top: 0px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked+.checkmark::after {
    display: block;
}

/* ----------------------------------- */
/* User */
/* ----------------------------------- */
.account-hover-wrapper {
    position: relative;
}

/* Skrytý dropdown */
.account-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    width: 220px;
    border-radius: 10px;
    padding: 15px 0;
    z-index: 10000;
}

/* 🔥 Otvorenie na hover – ROVNAKÉ AKO KOŠÍK */
.account-hover-wrapper:hover .account-dropdown {
    display: block !important;
}

/* Položky */
.account-dropdown a,
.account-dropdown button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 15px;
    transition: all 0.3s ease-in-out;
}

.account-dropdown a:hover,
.account-dropdown button:hover {
    color: var(--color-primary);
}

/* ----------------------------------- */
/* Checkout */
/* ----------------------------------- */
.checkout-items {
    padding: 1rem;
    border-radius: 1.25rem;
}

.checkout-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    align-items: center;
}

.checkout-title h3 {
    margin-bottom: 0 !important;
}



.checkout-title p {
    color: var(--color-primary);
    font-weight: 700;
}

.checkout-item {
    padding: 1rem;
    border-radius: 1.25rem;
}

.col-5 .checkout-item strong {
    flex-grow: 1;
    margin-right: 15px;
    font-size: 16px;
    font-weight: 600;
    padding-left: 1rem;
    max-width: 170px;
}

.col-5 .checkout-item p:nth-child(3) {
    width: 40px;
    text-align: center;
    margin-right: 20px;
    margin-left: 20px;

}

.col-5 .checkout-item p:last-child {
    width: 113px;
    text-align: right;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-primary);
}

.custom-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    padding-left: 28px;
    line-height: 1.4;
}

.custom-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.custom-radio .radio-mark {
    position: absolute;
    left: 0;
    top: 3px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: 2px solid #d1d1d1;
    transition: all 0.2s ease;
}

.custom-radio input:checked~.radio-mark {
    border-color: #e23232;
    /* hlavná farba */
}

.custom-radio .radio-mark::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background: #e23232;
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.2s ease;
}

.custom-radio input:checked~.radio-mark::after {
    transform: scale(1);
}

.form-row {
    display: flex;
    gap: 30px;
}

.col-half {
    width: 50%;
}

/* Search Name */
.psc-suggestions {
    position: absolute;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    width: 100%;
    margin-top: 4px;
    padding: 6px 0;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    top: 5rem;
    z-index: 1;
}

.psc-item {
    padding: 10px 14px;
    cursor: pointer;
}

.psc-item:hover {
    background: #f5f5f5;
}

.psc-city {
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

.psc-zip {
    font-size: 13px;
    color: #777;
}

/* --- MEGAMENU STYLES --- */
.categories-nav-wrapper {
    position: relative;
}

.nav-item.has-megamenu {
    position: relative;
}



.nav-item.has-megamenu:hover .category-megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.category-megamenu-content {
    padding: 24px;
}

/* Megamenu List Styles */
.megamenu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 32px;
}

.megamenu-list-item {
    margin-bottom: 0;
}

.megamenu-category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    color: var(--black);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.megamenu-category-link:hover {
    background-color: #f5f5f7;
    color: var(--black);
}

.megamenu-category-link .toggle-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

.megamenu-category-link.active .toggle-icon {
    transform: rotate(180deg);
}

/* Sublists */
.megamenu-sublist,
.megamenu-subsublist {
    list-style: none;
    padding-left: 16px;
    margin: 8px 0 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.megamenu-sublist.open {
    max-height: 1000px;
}

.megamenu-subsublist.open {
    max-height: 500px;
}

.megamenu-sublist-item,
.megamenu-subsublist-item {
    margin-bottom: 0;
}

.megamenu-subcategory-link,
.megamenu-subsubcategory-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    color: #424245;
    text-decoration: none;
    font-size: 14px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.megamenu-subcategory-link:hover,
.megamenu-subsubcategory-link:hover {
    background-color: #f5f5f7;
    color: #424245;
}

.megamenu-subcategory-link .toggle-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

.megamenu-subcategory-link.active .toggle-icon {
    transform: rotate(180deg);
}

.megamenu-subsubcategory-link {
    font-size: 13px;
    color: #6e6e73;
    padding-left: 20px;
}

.megamenu-subsubcategory-link:hover {
    color: var(--black);
}

.category-megamenu-content {
    padding: 32px 24px;
}

.category-icons-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 32px 24px;
}

.category-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--black);
    transition: transform 0.2s ease;
}

.category-icon-item:hover {
    transform: translateY(-4px);
}

.category-icon {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.category-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.category-icon-placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.category-icon-placeholder svg {
    stroke: #ffffff;
}

.category-icon-label {
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

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

    .megamenu-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .category-megamenu {
        min-width: 500px;
        max-width: calc(100vw - 40px);
    }

    .megamenu-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 20px;
    }
}

@media (max-width: 768px) {
    .category-megamenu {
        min-width: 100vw;
        max-width: 100vw;
        left: -9999px;
        width: 100vw;
    }

    .megamenu-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .category-icon {
        width: 50px;
        height: 50px;
    }

    .category-icon-label {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .megamenu-list {
        grid-template-columns: 1fr;
    }
}

/* Ensure header has stacking context */
.header {
    position: relative !important;
    z-index: 1000 !important;
}

/* Megamenu Toggle Icon Rotation */
.megamenu-link[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

/* ----------------------------------- */
/* FEATURED COLLECTIONS SECTION */
/* ----------------------------------- */
.featured-collections {
    background-color: #ffffff;
}

.collection-card {
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.collection-card--upper .collection-image {
    order: 2;
}

.collection-card--upper .collection-content {
    order: 1;
}

.collection-card:hover {
    transform: translateY(-4px);
}

.collection-content {
    flex-shrink: 0;
}

.collection-content h3 {
    font-size: 2.5rem;
    color: var(--black);
}

.collection-content p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 1rem !important;
}

.collection-images {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collection-images img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.collection-images img:hover {
    transform: scale(1.05);
}

.collection-image {
    flex: 1;
    min-height: 300px;
}

.collection-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;

    transition: all 0.3s ease;
}

.collection-image img:hover {
    transform: scale(1.08);
}

/* ----------------------------------- */
/* FOOTER STYLES */
/* ----------------------------------- */
.footer {
    background-color: var(--black);
    color: #e0e0e0;
    font-size: 0.95rem;
    overflow: hidden;
}

.footer-logo {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 2px;
    margin-bottom: 2rem !important;
}

.footer-address {
    margin-bottom: 1.5rem;
}

.footer-address p {
    color: #b0b0b0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-direction-link {
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity 0.3s ease;
}

.footer-direction-link:hover {
    opacity: 0.7;
}

.footer-contact p {
    margin-bottom: 1rem !important;
    color: #b0b0b0;
    font-size: 0.9rem;
}

.footer-contact a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact a:hover {
    color: #ffffff;
}

.footer-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: capitalize;
    margin-bottom: 1.5rem !important;
    letter-spacing: 0.5px;
}

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

.footer-links li {
    margin-bottom: 0.875rem;
}

.footer-links a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

.footer-newsletter-text {
    color: #b0b0b0;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.5rem !important;
}

.footer-newsletter-form {
    width: 100%;
}

.footer-newsletter-input {
    background-color: #ffffff !important;
    border: none !important;
    color: #1a1a1a !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 40px 0 0 40px !important;
    font-size: 0.95rem;
    height: 50px;
}

.footer-newsletter-input::placeholder {
    color: #999;
}

.footer-newsletter-input:focus {
    outline: none;
    box-shadow: none;
}

.footer-newsletter-btn {
    background-color: #ffffff !important;
    border: none !important;
    color: #1a1a1a !important;
    padding: 0 1.5rem !important;
    border-radius: 0 40px 40px 0 !important;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.footer-newsletter-btn:hover {
    background-color: #f0f0f0 !important;
}

.footer-newsletter-btn svg {
    width: 20px;
    height: 20px;
}

.footer-bottom {
    padding: 1.5rem 0;
    border-top: 1px solid #333;
}

.footer-bottom a {
    color: var(--white);
    font-weight: bold;
}

.footer-copyright {
    color: #808080;
    font-size: 0.875rem;
}

.footer-payments {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.footer-payment-label {
    color: #808080;
    font-size: 0.85rem;
    font-weight: 600;
}

.payment-icon {
    height: 24px;
    width: auto;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.payment-icon:hover {
    opacity: 1;
}




/* ----------------------------------- */
/* BENEFITS SECTION */
/* ----------------------------------- */
.benefits-section {
    background-color: #ffffff;
    padding: 5rem 0;
}

.benefit-card {
    padding: 2rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-8px);
}

.benefit-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d201f;
    transition: all 0.3s ease;
}

.benefit-card:hover .benefit-icon {
    border-color: #1d201f;
    background-color: var(--bg-color);
}

.benefit-title {
    font-size: 1rem;
    color: var(--black);
    margin-bottom: 0.75rem !important;
    letter-spacing: 0.5px;
}

.benefit-text {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0 !important;
}


/* ================================ */
/* CART PAGE - NEW DESIGN */
/* ================================ */

.cart-page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 16px;
    margin-top: 0;
}

.cart-count-section {
    margin-bottom: 32px;
    font-size: 14px;
    color: #666;
}

/* 2-Column Layout */
.cart-page-container {
    display: grid;
    grid-template-columns: 1fr 345px;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.cart-items-section {
    display: flex;
    flex-direction: column;
}

.cart-summary-section {
    display: flex;
    flex-direction: column;
}

/* Cart Items List */
.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cart-items-header {
    display: grid;
    grid-template-columns: 1fr 100px 150px 121px 107px 60px;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
    font-weight: 600;
    color: var(--black);
    font-size: 1.25rem;
    text-transform: capitalize;
}

.cart-header-product {
    text-align: left;
}



.cart-header-delete {
    text-align: center;
}

/* Cart Item Row */
#cart-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cart-item-row {
    display: grid;
    grid-template-columns: 1fr 100px 150px 88px 120px 60px;
    gap: 20px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid #e5e5e5;
}

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

.checkout-item-row {
    grid-template-columns: 1fr 100px 150px 121px 107px 60px;
}

/* Product Column */
.cart-item-product {
    display: flex;
    gap: 16px;
    align-items: center;
}



.cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cart-item-name a {
    color: var(--black);
    text-decoration: none;
    transition: color 0.3s ease;
}

.cart-item-name a:hover {
    color: var(--color-primary);
}

.cart-item-product a {
    display: block;
    transition: opacity 0.2s ease;
}

.cart-item-product a:hover {
    opacity: 0.8;
}

/* Price Column */


.price-value {
    font-size: 1rem;
    color: var(--black);
    font-weight: 600;
}

/* Quantity Column */
.cart-item-quantity {
    display: flex;
    justify-content: center;
}

.quantity-selector {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: #ffffff;
    border: 1px solid #d2d2d7;
    border-radius: 40px;
    padding: 6px 8px;
}

.qty-btn-minus,
.qty-btn-plus {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--black);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.qty-btn-minus:hover:not(:disabled),
.qty-btn-plus:hover:not(:disabled) {
    background: #f5f5f7;
    border-radius: 50%;
}

.qty-btn-minus:disabled,
.qty-btn-plus:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.qty-field {
    width: 40px;
    height: 28px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    padding: 0;
}

.qty-field:focus {
    outline: none;
}

/* Subtotal Column */


.subtotal-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--black);
}

/* Delete Column */
.cart-item-remove {
    text-align: center;
    display: flex;
    justify-content: center;
}

.btn-delete {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #d2d2d7;
    background: transparent;
    color: #d2d2d7;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.btn-delete:hover {
    border-color: #ff3b30;
    background: #ff3b30;
    color: #ffffff;
}

/* Order Summary Box */
.order-summary-box {
    background: #F7F7F7;
    border-radius: .5rem;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 20px;
}

.summary-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 12px 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: var(--black);
}

.summary-label {
    font-weight: 600;
}

.summary-value {
    font-weight: 600;
}

.summary-divider {
    height: 1px;
    background: #e5e5e5;
    margin: 4px 0;
}

.summary-shipping {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.summary-shipping-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--black);
    letter-spacing: 0.5px;
}

.summary-shipping-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--black);

}



.summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
}

.summary-total-label {
    font-weight: 700;
}

.summary-total-value {
    font-weight: 700;
}

.btn-proceed-checkout {
    display: block;
    width: 100%;
    padding: 16px 20px;
    margin-top: 12px;
    background: var(--black);
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-proceed-checkout:hover {
    background: #000000;
}

/* ================================ */
/* SIDEBAR - Modern Cart Items */
/* ================================ */

.cart-item-quantity {
    display: flex;
    justify-content: flex-end;
}

.cart-item-footer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cart-item-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.cart-item-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.9375rem;
    line-height: 1.2;
}

.cart-item-price-without-vat {
    font-size: 0.75rem;
    color: #666;
}

/* ================================ */
/* PRODUCTS CONTROLS - Filter & Sort */
/* ================================ */

.products-controls {
    padding: 15px 0;
}

.controls-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.controls-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    user-select: none;
}

.control-checkbox input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}





.sort-by label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-right: 8px;
}

.sort-select {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.sort-select:hover,
.sort-select:focus {
    border-color: #d9534f;
    outline: none;
    box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.1);
}

/* Choices.js Custom Styling */
.choices {
    margin-bottom: 0;
    min-width: 12rem;
}

.choices__inner {
    padding: 0.625rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 2rem;
    background-color: #fff;
    font-size: 0.875rem;
    min-height: auto;
    transition: border-color 0.2s ease;
    white-space: nowrap;
}

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

.choices[data-type*="select-one"] .choices__inner {
    padding-bottom: 0.625rem;
}

.choices__list--single {
    padding: 0;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    min-width: 100%;
    width: max-content;
    z-index: 6;
}

.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--bg-color);
    color: var(--black);
}

.choices[data-type*="select-one"]:after {
    border-color: var(--black) transparent transparent transparent;
    margin-top: -0.25rem;
}

@media (max-width: 768px) {
    .controls-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .controls-item {
        width: 100%;
    }

    .sort-by {
        margin-left: 0;
    }

    .sort-select {
        width: 100%;
    }
}

/* ================================ */
/* CATEGORY SIDEBAR - Product Categories */
/* ================================ */

.category-sidebar {
    padding: 0;
    position: sticky;
    top: 20px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}

.sidebar-header {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 1rem 0;
    cursor: pointer;
}

.sidebar-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1d201f;
    margin: 0;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.categories-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: transform 0.3s ease, color 0.2s ease;
    width: 24px;
    height: 24px;
}

.categories-toggle:hover {
    color: #1d201f;
}

.categories-toggle.active {
    transform: rotate(180deg);
    color: #1d201f;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

.category-list:not(.open) {
    max-height: 0;
    opacity: 0;
}

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

.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.category-header.level-0 {
    padding: .375rem 0;
}

.category-header.level-1 {
    padding: 0.375rem 0 0.375rem 1rem;
}

.category-header.level-1 a {
    font-size: .875rem;
}

.category-header.level-2 {
    padding: 0.25rem 0 0.25rem 2rem;
}

.category-header.level-2 a {
    font-size: 0.8125rem;
    /* 13px */
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.2;
}

.category-link {
    flex: 1;
    text-decoration: none;
    color: #555;
    font-size: 1rem;
    font-weight: 500;
    padding: 8px 0;
    display: block;
    transition: all 0.2s ease;
}

.category-link.active {
    color: var(--color-primary) !important;
}

.category-link.level-0 {
    font-size: 1rem;
    font-weight: 600;
    color: #222;
}




.category-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    transition: transform 0.2s ease, color 0.2s ease;
}

.category-toggle:hover {
    color: #d9534f;
}

.category-toggle.active {
    transform: rotate(180deg);
    color: #d9534f;
}

.category-children {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.category-children.open {
    max-height: 2000px;
    opacity: 1;
}

.category-name {
    word-break: break-word;
}

/* Category Card Hover Effect */
.category-card {
    transition: transform 0.3s ease;
    display: block;
}

.category-card:hover {
    transform: translateY(-5px);
}

/* ----------------------------------- */
/* CHECKOUT STYLES */
/* ----------------------------------- */

.checkout-page {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.checkout-page h3 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.checkout-page .form-label,
.contact-page .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--black);
}

.checkout-page .form-control,
.checkout-page .form-select,
.contact-page .form-control {
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    box-shadow: none;
    transition: border-color 0.2s;
}

.checkout-page .form-control:focus,
.checkout-page .form-select:focus,
.contact-page .form-control:focus {
    border-color: var(--black);
}

.checkout-page .form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.15em;
    border: 1px solid #ccc;
}

.checkout-page .form-check-input:checked {
    background-color: var(--black);
    border-color: var(--black);
}

/* Checkout Steps Progress */
.checkout-steps-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 2rem 0;
    margin-bottom: 2rem;
}

.checkout-steps-progress::before {
    content: '';
    position: absolute;
    top: 4rem;
    left: 10%;
    right: 10%;
    height: 0.125rem;
    background: #e5e5e5;
    z-index: 0;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
    flex: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.step-number {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #f5f5f7;
    border: 2px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #999;
    transition: all 0.3s ease;

}

.step-number i {
    transition: all 0.3s ease;
}

.step-item.active .step-number {
    background: var(--black);
    border-color: var(--black);
    color: white;
    transform: scale(1.05);
}

.step-item.completed .step-number {
    background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
    color: white;

}

.step-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #999;
    text-align: center;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.step-item.active .step-label {
    color: var(--black);
    font-weight: 700;
}

.step-item.completed .step-label {
    color: #2e7d32;
}

/* Shipping & Payment Options */
.shipping-option,
.payment-option {
    border: 2px solid #e5e5e5;
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;

}

.shipping-option .form-check-input,
.payment-option .form-check-input {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

.shipping-option .form-check-label,
.payment-option .form-check-label {
    padding-left: 1.75rem;
}

.shipping-option:hover,
.payment-option:hover {
    border-color: var(--black);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shipping-option input[type="radio"]:checked~label,
.payment-option input[type="radio"]:checked~label {
    font-weight: 600;
}

.shipping-option:has(input:checked),
.payment-option:has(input:checked) {
    border-color: var(--black);
    background: #f8f9fa;
}

/* Summary Boxes */
.summary-box {
    background: var(--bg-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.summary-content p {
    line-height: 1.6;
}

/* Summary Section Cards */
.summary-section .card {
    border: none;
    box-shadow: none;
    margin-bottom: 1.5rem;
}

.summary-section .card-header {
    background: transparent;
    border: none;
    border-bottom: 2px solid #f0f0f0;
    padding: 0 0 0.75rem 0;
    margin-bottom: 1rem;
}

.summary-section .card-header h5 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--black);
}

.summary-section .card-body {
    padding: 0;
}

.summary-section .card-body i {
    color: #666;
}

/* Shopping Cart Box */
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    padding: 0.625rem;
    background-color: var(--color-gray);
    border-radius: 50%;
    color: var(--color-primary);
}

.contact-info-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-info-content span {
    font-weight: 600;
}

.contact-map iframe {
    width: 100%;
    height: 16rem;
    border: none;
    border-radius: 0.5rem;
    display: block;
}

.shopping-cart-box {
    background-color: #fff;
    padding: 0;
    position: sticky;
    top: 20px;
}

.shopping-cart-title {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.cart-items-container {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}


.cart-item-left {
    display: flex;
    gap: 1rem;
    flex: 1;
}

.cart-item-image {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}





.cart-item-price {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}

.cart-item-no-vat {
    font-size: 0.875rem;
    color: #86868b;
    white-space: nowrap;
}

.cart-divider {
    margin: 1.5rem 0;
    border: none;
}

.cart-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.shipping-cost {
    color: #666;
}

.cart-total {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
}

.total-amount {
    font-size: 1.25rem;
}

.privacy-notice {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.privacy-notice a {
    color: #666;
    text-decoration: underline;
}

.place-order-btn {
    padding: 1rem;
    background-color: #1d201f;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.place-order-btn:hover:not(:disabled) {
    background-color: #333;
}

.place-order-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* PSC Suggestions */
.psc-suggestions {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 1000;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.psc-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.psc-item:hover {
    background-color: #f9f9f9;
}

.psc-city {
    font-weight: bold;
}

.psc-zip {
    font-size: 0.85em;
    color: #666;
}


.qty-btn-plus.qty-limit-reached {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.qty-btn-plus.qty-limit-reached:hover {
    background: transparent !important;
}

/* Toastify Overrides */
.toastify {
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
    padding: 12px 20px;
}

.cart-item-product {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Checkout Address Cards */
.address-card {
    cursor: pointer;
    border: 2px solid #eee;
    transition: all 0.2s;
    min-height: 100px;
    padding: 0.5rem !important;
}

.address-card:hover {
    border-color: #ccc;
}

.address-card.selected {
    border-color: #000;
    background-color: #f9f9f9;
}

.new-address-card {
    border-style: dashed;
}

.form-check-input:focus {
    box-shadow: none;
}

.category-sidebar .category-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-sidebar .category-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.pagination .page-link {
    border: 1px solid var(--border-color, #ececec);
    color: var(--black, #1d201f);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 4px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pagination .page-link:hover,
.pagination .page-link:focus {
    border-color: var(--black, #1d201f);
    color: var(--black, #1d201f);
    background-color: transparent;
    box-shadow: none;
}

.pagination .page-item.active .page-link {
    background-color: var(--black, #1d201f);
    border-color: var(--black, #1d201f);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: var(--color-gray, #adadad);
    border-color: var(--border-color, #ececec);
    opacity: 0.5;
    background-color: transparent;
}

.mobile-menu-toggle {
    display: none !important;
    padding: 0 !important;
    color: var(--black);
}

.search-icon-toggle {
    padding: 0 !important;
    color: var(--black);
}

#categoryBtnModal:focus,
#categoryBtnModal:active {
    border: none;
}

/* ----------------------------------- */
/* CATEGORIES SLIDER */
/* ----------------------------------- */
.categories-slider {
    clip-path: inset(-100vw -100vw -100vw 0);
}

.categories-slider .splide__track {
    overflow: visible;
}

.categories-slider .splide__slide {
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.categories-slider .splide__slide.is-visible {
    opacity: 1;
}

.categories-section {
    overflow: hidden;
}


/* Mobile Search Results Styling */
#searchOffcanvas .search-wrapper {
    border: none !important;
}

#searchOffcanvas .input-group {
    border: 1px solid var(--black);
    border-radius: 0.25rem;
}

#search-results-modal .search-dropdown {
    box-shadow: none !important;
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    margin-top: 1rem;
    padding: 0;
}

#search-results-modal .search-dropdown ul {
    padding: 0;
}

#search-results-modal .search-dropdown li {
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

#search-results-modal .search-dropdown li:last-child {
    border-bottom: none;
}

#search-results-modal .search-dropdown a {
    font-size: 16px;
}

#search-results-modal .search-dropdown img {
    width: 70px !important;
    height: 70px !important;
}


.mobile-menu-container {
    transition: height 0.3s ease;
}

.mobile-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    min-height: 100%;
    background: #fff;
    transition: transform 0.3s ease;
    z-index: 10;
    visibility: hidden;
}

.mobile-submenu.show {
    transform: translateX(-100%);
    visibility: visible;
}

.offcanvas-body {
    overflow-x: hidden;
    position: relative;
}

.btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Categories Menu Sidebar in Hero */
.categories-menu-sidebar {
    background: transparent;
    border-radius: 0;

    box-shadow: none;
    height: 100%;
}

.categories-menu-sidebar .categories-menu-header {
    background: var(--color-primary);
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
    color: var(--white);
    width: 100%;
}

.categories-menu-sidebar .categories-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.categories-menu-sidebar .categories-menu-item {
    border-bottom: none;
}



.categories-menu-sidebar .categories-menu-item:last-child {
    border-bottom: none;
}

.categories-menu-sidebar .categories-menu-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    color: var(--black);
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s ease;
    background: transparent;
    background-color: transparent;
}


.categories-menu-sidebar .categories-menu-link svg:first-child {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.categories-menu-sidebar .categories-menu-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0.375rem;
    overflow: hidden;
    color: var(--color-primary);
}

.categories-menu-sidebar .categories-menu-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.categories-menu-sidebar .categories-menu-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.categories-menu-sidebar .categories-menu-link span {
    flex: 1;
}

.categories-menu-sidebar .categories-menu-arrow {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Category Megamenu */
.categories-menu-item {
    position: relative;
}

.category-megamenu {
    display: none;
    position: fixed;
    left: 28%;
    top: 0;
    width: 65%;
    max-height: calc(100vh - 8rem);
    background: white;
    padding: 1.5rem;
    z-index: 10000;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    border-radius: 1rem;
}

.category-megamenu.active {
    display: block !important;
}

.megamenu-subcategory-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.625rem;
    color: var(--black);
}

.megamenu-subcategory-title a {
    color: var(--black);
    text-decoration: none;
    transition: color 0.2s ease;
}

.megamenu-subcategory-title a:hover {
    color: var(--color-primary);
}

.megamenu-subsubcategory-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 0.5rem;
}

.megamenu-subsubcategory-list li {
    margin-bottom: 0.375rem;
}

.megamenu-hidden-item {
    display: none;
}

.megamenu-hidden-item.show {
    display: list-item;
    animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-0.3rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.megamenu-show-more {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.875rem;
    padding: 0;
    margin-top: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: block;
}

.megamenu-show-more:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.megamenu-subsubcategory-list a {
    color: #666;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
    display: block;
}

.megamenu-subsubcategory-list a:hover {
    color: var(--color-primary);
}

/* Categories Menu Button */
.categories-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.categories-menu-btn:hover {
    background: #e6483f;
}

.categories-menu-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Categories Menu Offcanvas */
.categories-menu-header {
    background: var(--color-primary);
    border-bottom: none;
}

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

.categories-menu-item {
    border-bottom: 1px solid #e5e5e5;
}

.categories-menu-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    color: var(--black);
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s ease;
}

.categories-menu-link:hover {
    background: #f5f5f7;
}

.categories-menu-link svg:first-child {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.categories-menu-link span {
    flex: 1;
}

.categories-menu-arrow {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-left: auto;
}

.categories-menu-item:hover .categories-menu-link {
    transform: translateY(-5px);
    background: transparent !important;
}

.categories-menu-item .categories-menu-link {
    transition: all 0.3s ease;
}

.top-nav {
    background-color: var(--bg-color);
}

.splide__arrow svg {
    fill: none !important;
}

/* ----------------------------------- */
/* FAQ PAGE */
/* ----------------------------------- */

/* FAQ Page Headings */
.faq-page h1 {
    font-size: 2rem;
}

.faq-page h2 {
    font-size: 1.5rem;
}

.faq-page h3 {
    font-size: 1.125rem;
}

/* Partner Shop Page Headings */
.partner-shop-page h1 {
    font-size: 2rem;
}

/* FAQ Categories */
.faq-categories-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq-category-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--bg-color);
    border-radius: 0.5rem;
    color: var(--black);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

.faq-category-link:hover {
    background-color: var(--black);
    color: var(--white);
}

.faq-category-link svg {
    flex-shrink: 0;
}

.faq-category-link:hover svg {
    stroke: var(--white);
}

/* FAQ Accordion */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-accordion-item {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.faq-accordion-button {
    background-color: var(--white);
    color: var(--black);
    font-weight: 600;
    font-size: 1rem;
    padding: 1.25rem 1.5rem;
    border: none;
    transition: all 0.3s ease;
}

.faq-accordion-button:not(.collapsed) {
    background-color: var(--black);
    color: var(--white);
    box-shadow: none;
}

.faq-accordion-button:focus {
    box-shadow: none;
    border: none;
}

.faq-accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: transform 0.3s ease;
}

.faq-accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.faq-accordion-body {
    padding: 1.5rem;
    background-color: var(--bg-color);
    color: var(--black);
    line-height: 1.75;
}

.faq-category-section {
    scroll-margin-top: 2rem;
}

/* ----------------------------------- */
/* 404 ERROR PAGE */
/* ----------------------------------- */

/* Error Code */
.error-code {
    font-size: 8rem;
    font-weight: 900;
    color: var(--black);
    line-height: 1;
    opacity: 0.1;
}

.error-page h1 {
    font-size: 2rem;
}

/* Error Links List */
.error-links-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.error-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--bg-color);
    border-radius: 0.5rem;
    color: var(--black);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

.error-link:hover {
    background-color: var(--black);
    color: var(--white);
}

.error-link svg {
    flex-shrink: 0;
}

.error-link:hover svg {
    stroke: var(--white);
}

/* ----------------------------------- */
/* PRODUCT ROW (Partner Shop) */
/* ----------------------------------- */

.product-row-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-row-card {
    display: flex;
    gap: 1.5rem;
    background-color: var(--white);
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding-right: 1rem;
    transition: all 0.3s ease;
}

.product-row-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-row-image {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: var(--bg-color);
}

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

.product-row-content {
    display: flex;
    flex: 1;
    gap: 1.5rem;
    align-items: center;
}

.product-row-info {
    flex: 1;
    min-width: 0;
}

.product-row-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.product-row-title a {
    color: var(--black);
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-row-title a:hover {
    color: var(--color-primary);
}

.product-row-sku {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.product-row-stock {
    font-size: 0.875rem;
    font-weight: 600;
}

.product-row-stock.in-stock {
    color: #22c55e;
}

.product-row-stock.out-of-stock {
    color: #ef4444;
}

.product-row-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    min-width: 180px;
}

.product-row-price-group {
    text-align: right;
}

.product-row-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
    white-space: nowrap;
}

.product-row-old-price {
    font-size: 1rem;
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
    margin-left: 0.5rem;
}

.product-row-price-without-vat {
    font-size: 0.875rem;
    color: #666;
}

.product-row-discount-badge {
    background-color: var(--color-primary);
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.product-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.add-to-cart-form-row {
    align-items: center;
    max-width: 280px;
}

.quantity-input-row {
    width: 80px;
    text-align: center;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.add-to-cart-form-row .btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

/* =============================== */
/* CATEGORY HEADER & SUBCATEGORIES */
/* =============================== */

.category-header-section {
    margin-bottom: 2rem;
}

.category-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--black);
}

.subcategories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.subcategory-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--bg-color);
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--black);
    transition: all 0.3s ease;
    cursor: pointer;
}

.subcategory-card:hover {
    background-color: var(--black);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.subcategory-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subcategory-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.subcategory-icon svg {
    width: 2rem;
    height: 2rem;
    stroke: var(--black);
    transition: stroke 0.3s ease;
}

.subcategory-card:hover .subcategory-icon svg {
    stroke: var(--white);
}

.subcategory-name {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

/* =============================== */
/* MOBILE MENU STYLES             */
/* =============================== */

.mobile-menu-offcanvas {
    background-color: var(--bg-color);
}

.mobile-menu-header {
    background-color: var(--white);
    border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.08);
}

.mobile-menu-logo {
    width: 5rem;
    height: 2.3125rem;
}

.mobile-menu-body {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mobile-menu-container {
    width: 100%;
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: 6.25rem;
}

.mobile-menu-static-nav {
    border-top: 0.0625rem solid rgba(0, 0, 0, 0.08);
}

.mobile-menu-static-nav .nav-link {
    color: var(--black);
    transition: all 0.2s ease;
}

.mobile-menu-actions {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--white);
    border-top: 0.0625rem solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -0.125rem 0.625rem rgba(0, 0, 0, 0.05);
    padding: 1rem;
}

.mobile-menu-actions .btn-auth {
    transition: all 0.2s ease;
}

.mobile-menu-btn-primary {
    background-color: var(--black);
    color: var(--white);
    border: none;
}

.mobile-menu-btn-secondary {
    background-color: transparent;
    color: var(--black);
    border: 0.0625rem solid var(--black);
}

.mobile-menu-btn-primary:hover,
.mobile-menu-btn-primary:focus {
    background-color: var(--black);
    opacity: 0.9;
}

.mobile-menu-btn-secondary:hover,
.mobile-menu-btn-secondary:focus {
    background-color: var(--black);
    color: var(--white);
}

.shopping-cart-box .cart-item-price {
    display: flex;
    justify-content: end;
}

.form-control:focus {
    box-shadow: none !important;
    border-color: var(--color-primary) !important;
}

.cart-header-quantity {
    margin-left: 2.5rem;
}

.oc-flash-messages {
    display: none !important;
}

.hero-subpage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-subpage h1 {
    font-size: 3.5rem;
}

.cart-hover-wrapper svg {
    color: var(--black);
}

.splide__arrow--prev svg {
    transform: scaleX(1) !important;
}

.button:focus:not(:focus-visible) {
    box-shadow: none !important;
}

.cart-page {
    padding: 2rem;
}

/* ----------------------------------- */
/* KATALOGY */
/* ----------------------------------- */

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

.katalog-card {
    background: var(--white);
    border-radius: 2rem;
    overflow: hidden;

    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}



.katalog-card-cover {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--bg-color);
    position: relative;
    border-radius: 2rem;
}

.katalog-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.katalog-card:hover .katalog-card-cover img {
    transform: scale(1.03);
}

.katalog-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    transition: opacity 0.3s ease;
}

.js-pdf-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.js-pdf-thumb.is-loaded {
    opacity: 1;
}

.js-pdf-thumb.is-loaded~.katalog-card-placeholder {
    opacity: 0;
    pointer-events: none;
}

.katalog-card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    align-items: center;
}

.katalog-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0;
}

.katalog-card-desc {
    font-size: 0.875rem;
    color: #666;
    flex: 1;
}

/* PDF VIEWER */
/* ----------------------------------- */

.js-pdf-thumb {
    cursor: pointer;
    position: relative;
}

.pdf-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.katalog-card-cover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}

.katalog-card-cover-overlay .katalog-card-cover-icon {
    color: #fff;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.25s ease, transform 0.25s ease;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* PDF Modal */

.pdf-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.88);
}

.pdf-modal.is-open {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.pdf-modal-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.pdf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: #111;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.pdf-modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.pdf-modal-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.pdf-modal-close:hover {
    opacity: 1;
}

.pdf-modal-viewer {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.pdf-page-spread {
    display: flex;
    gap: 0.375rem;
    max-width: 100%;
    justify-content: center;
}

.pdf-page-spread canvas {
    display: block;
    max-width: 50%;
    height: auto;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.pdf-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #aaa;
    font-size: 0.9rem;
    height: 100%;
}

.pdf-modal-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pdf-spin 0.75s linear infinite;
}

@keyframes pdf-spin {
    to {
        transform: rotate(360deg);
    }
}