@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-SemiBold.woff2') format('woff2'),
        url('../fonts/Oswald-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Medium.woff2') format('woff2'),
        url('../fonts/Oswald-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-ExtraLight.woff2') format('woff2'),
        url('../fonts/Oswald-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Light.woff2') format('woff2'),
        url('../fonts/Oswald-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.woff2') format('woff2'),
        url('../fonts/Oswald-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Bold.woff2') format('woff2'),
        url('../fonts/Oswald-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Colors */
    --teal: #80bcc0;
    --lavender: #ac95b2;
    --sky-blue: #9ebdd5;
    --coral-red: #e95c67;
    --golden-orange: #f69532;
    --light-green: #BAE369;
    --dark-blue: #374E94;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
}

/* Base Font Size - Fix Zoom Mode Appearance */
html {
    font-size: 15px;
}

body {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Header Styles */
.header {
    background-color: #f8f9fa;
}

.header__utility-bar {
    background-color: var(--coral-red);
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header__utility-contact {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.header__utility-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.25rem 0;
}

.header__utility-item:hover {
    color: #ffd700;
    text-decoration: none;
    transform: translateY(-1px);
}

.header__utility-item i {
    font-size: 0.9rem;
    opacity: 0.9;
}

.header__utility-item:hover i {
    opacity: 1;
}

.header__utility-sale {
    color: #6c757d;
    font-size: 0.875rem;
}

.header__utility-sale--highlight {
    color: var(--coral-red);
    font-weight: 600;
}

.header__utility-dropdown {
    color: #6c757d;
    font-size: 0.875rem;
    text-decoration: none;
    margin-left: 1rem;
}

.header__utility-dropdown:hover {
    color: var(--dark-blue);
    text-decoration: none;
}

.header__utility-link {
    color: #ffffff;
    font-size: 0.875rem;
    text-decoration: none;
    margin-left: 1rem;
    transition: all 0.3s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.header__utility-link:hover {
    color: #ffd700;
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transform: translateY(-1px);
}

/* Hide utility bar on mobile */
@media (max-width: 768px) {
    .header__utility-bar {
        display: none;
    }
}

.header__main {
    background-color: #2850a3;
    padding: 1rem 0;
}

.header__main-row-1 {
    margin-bottom: 0;
}

.header__main-row-2 {
    margin-top: 1rem;
    margin-bottom: 0;
}

.header__logo-wrapper {
    display: flex;
    align-items: center;
}

/* Mobile: Push logo more to right when hamburger is present */
@media (max-width: 767px) {
    .col-4 .header__logo-wrapper {
        justify-content: flex-start;
        padding-left: 0.5rem;
    }
}

.header__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.header__logo:hover {
    text-decoration: none;
}

.header__logo-image {
    max-width: 180px;
    height: auto;
    max-height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Responsive logo sizing */
@media (max-width: 768px) {
    .header__logo-image {
        max-width: 140px;
        max-height: 50px;
    }
}

@media (max-width: 576px) {
    .header__logo-image {
        max-width: 120px;
        max-height: 40px;
    }
}

/* Legacy styles (kept for backward compatibility) */
.header__logo-icon {
    width: 40px;
    height: 40px;
    margin-right: 0.5rem;
}

.header__logo-text {
    color: #495057;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.header__search {
    max-width: 500px;
    margin: 0 auto;
}

/* Reduce search bar width on medium screens (769px-992px) to fit all icons */
@media (max-width: 992px) and (min-width: 769px) {
    .header__search {
        max-width: 320px;
        margin: 0 auto;
    }

    .header__search-input {
        padding: 0.6rem 0.85rem;
        font-size: 0.9rem;
    }

    .header__actions-desktop {
        gap: 0.3rem;
        flex-wrap: nowrap;
    }

    .header__actions-desktop .header__login {
        font-size: 0.8rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .header__actions-desktop .header__divider {
        margin: 0 0.25rem;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .header__actions-desktop .header__icon {
        font-size: 1.1rem;
        padding: 0.4rem;
        flex-shrink: 0;
    }
}


.header__search-input {
    border-radius: 25px;
    border: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
    width: 100%;
}

.header__search-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 0.2rem rgba(128, 188, 192, 0.25);
}

.header__search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    z-index: 10;
}

.header__search-btn:hover {
    color: #2850a3;
}

/* Search Results Dropdown */
.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 0.5rem;
    max-height: 500px;
    overflow-y: auto;
    z-index: 1000;
}

.search-results-loading {
    padding: 1.5rem;
    text-align: center;
    color: #6c757d;
}

.search-results-list {
    max-height: 400px;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: #f8f9fa;
    text-decoration: none;
    color: inherit;
}

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

.search-result-item__image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.search-result-item__content {
    flex: 1;
    min-width: 0;
}

.search-result-item__name {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: #2c3e50;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-item__category {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.search-result-item__price {
    font-weight: 600;
    color: var(--teal);
    font-size: 0.9rem;
}

.search-result-item__price--old {
    text-decoration: line-through;
    color: #6c757d;
    margin-right: 0.5rem;
    font-size: 0.85rem;
}

.search-results-footer {
    padding: 0.75rem;
    border-top: 1px solid #f0f0f0;
    text-align: center;
}

.view-all-results-btn {
    display: block;
    padding: 0.5rem 1rem;
    background: var(--teal);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.2s;
}

.view-all-results-btn:hover {
    background: #5a9fa3;
    color: white;
    text-decoration: none;
}

/* Search Results Page */
.search-results-section {
    padding: 3rem 0;
}

.search-filters {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.search-filters__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #2c3e50;
}

.search-filter-group {
    margin-bottom: 2rem;
}

.search-filter-group:last-child {
    margin-bottom: 0;
}

.search-filter-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #495057;
    font-size: 0.95rem;
}

.search-filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.search-filter-option {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    text-decoration: none;
    color: #6c757d;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.search-filter-option:hover {
    background-color: #f8f9fa;
    color: var(--teal);
    text-decoration: none;
}

.search-filter-option.active {
    background-color: var(--teal);
    color: white;
    border-color: var(--teal);
}

.price-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-inputs input {
    flex: 1;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.search-results-count {
    font-size: 1rem;
    color: #6c757d;
}

.search-results-sort {
    width: 200px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.product-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-card__image {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background: #f8f9fa;
}

.product-card__image img,
.product-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-card__img {
    transform: scale(1.05);
}

.product-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--coral-red);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.product-card__content {
    padding: 1rem;
}

.product-card__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.product-card__title a {
    color: #2c3e50;
    text-decoration: none;
}

.product-card__title a:hover {
    color: #2850a3;
}

.product-card__category {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
}

.product-card__price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-card__price--current,
.product-card__price--new {
    font-weight: 600;
    color: #2850a3;
    font-size: 1.1rem;
}

.product-card__price--old {
    text-decoration: line-through;
    color: #6c757d;
    font-size: 0.9rem;
}

.product-card__actions {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
    z-index: 10;
}

.product-card:hover .product-card__actions {
    opacity: 1;
    transform: translateX(0);
}

.product-card__action {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: none;
    color: #2850a3;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__action:hover {
    background: #2850a3;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(40, 80, 163, 0.3);
}

/* Featured Products Section */
.featured-products-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.featured-products__header {
    margin-bottom: 3rem;
}

.featured-products__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.featured-products__subtitle {
    font-size: 1.1rem;
    color: #6c757d;
    margin: 0;
}

.header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

.header__actions-desktop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    min-width: 0; /* Allow flex items to shrink */
}

.header__actions-desktop .header__login {
    flex-shrink: 0; /* Prevent login from shrinking */
    white-space: nowrap;
}

.header__actions-mobile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Search Toggle Button (Mobile) */
.header__search-toggle {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 50%;
    position: relative;
}

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

/* User Login Toggle Button (Mobile) */
.header__user-login-toggle {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 50%;
    position: relative;
}

.header__user-login-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffd700;
}

/* Search Close Button (Mobile) */
.header__search-close {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 1.1rem;
    z-index: 11;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.header__search-close:hover {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

/* User Login Dropdown Menu (Mobile) */
.header__user-menu--login {
    min-width: 180px;
}

.header__user-menu--login .header__user-menu-items {
    padding: 0.5rem 0;
}

.header__user-menu--login .header__user-menu-link {
    padding: 0.75rem 1rem;
}

/* User Login Dropdown Container (Mobile) */
.header__user-dropdown {
    position: relative;
}

.header__user-dropdown.open .header__user-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.header__login {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.header__login:hover {
    color: #ffd700;
    text-decoration: none;
}

.header__divider {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0.5rem;
    opacity: 0.7;
}

.header__icon {
    position: relative;
    color: #ffffff;
    font-size: 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: 50%;
}

.header__icon:hover {
    color: #ffd700;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px) scale(1.1);
}

.header__icon:hover i {
    animation: bounce 0.6s ease;
}

.header__badge {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: var(--coral-red);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.3s ease;
}

.header__icon:hover .header__badge {
    transform: scale(1.2);
    background-color: var(--golden-orange);
    top: -8px;
    right: -8px;
}

.header__login--register {
    margin-right: 0.5rem;
}

/* ============================================
   User Dropdown Styles (After Login)
   ============================================ */

/* User Dropdown Container */
.header__user-dropdown {
    position: relative;
    margin-right: 1rem;
}

.header__user-dropdown.active {
    display: block;
}

/* User Dropdown Trigger */
.header__user-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #495057;
    width: 48px;
    height: 48px;
    justify-content: center;
}

.header__user-trigger:hover {
    background: #f8f9fa;
    border-color: var(--coral-red);
    box-shadow: 0 2px 8px rgba(233, 92, 103, 0.15);
    text-decoration: none;
    color: #495057;
    transform: scale(1.05);
}

/* User Avatar */
.header__user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dark-blue), var(--coral-red));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    overflow: hidden;
    margin: 0;
}

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

/* User Name - Hidden in header, shown in dropdown menu */
.header__user-name {
    display: none; /* Hide name in header trigger, only show icon */
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dropdown Arrow - Hidden when only showing icon */
.header__user-arrow {
    display: none; /* Hide arrow when only showing icon */
    color: #ffffff;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.header__user-dropdown.open .header__user-arrow {
    transform: rotate(180deg);
}

/* User Dropdown Menu */
.header__user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 8px 0;
    border: 1px solid #e9ecef;
}

.header__user-dropdown.open .header__user-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* User Menu Header (User Info) */
.header__user-menu-header {
    padding: 16px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header__user-menu-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dark-blue), var(--coral-red));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}

.header__user-menu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header__user-menu-info {
    flex: 1;
    min-width: 0;
}

.header__user-menu-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header__user-menu-email {
    font-size: 0.8125rem;
    color: #6c757d;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* User Menu Items */
.header__user-menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.header__user-menu-item {
    margin: 0;
}

.header__user-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #495057;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.header__user-menu-link:hover {
    background: #f8f9fa;
    color: var(--coral-red);
    border-left-color: var(--coral-red);
    text-decoration: none;
}

.header__user-menu-link i {
    width: 20px;
    text-align: center;
    color: #6c757d;
    transition: color 0.2s ease;
}

.header__user-menu-link:hover i {
    color: var(--coral-red);
}

/* Logout Link Special Styling */
.header__user-menu-item--logout .header__user-menu-link {
    border-top: 1px solid #e9ecef;
    margin-top: 4px;
    padding-top: 14px;
    color: #dc3545;
}

.header__user-menu-item--logout .header__user-menu-link:hover {
    background: #fff5f5;
    color: #dc3545;
    border-left-color: #dc3545;
}

.header__user-menu-item--logout .header__user-menu-link i {
    color: #dc3545;
}

/* Make button look like link */
.header__user-menu-link button,
button.header__user-menu-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-left: 3px solid transparent;
}

.header__user-menu-item--logout button.header__user-menu-link {
    border-top: 1px solid #e9ecef;
    margin-top: 4px;
    padding-top: 14px;
    color: #dc3545;
}

/* Hide LOGIN/REGISTER text below 768px (767px and below) */
@media (max-width: 767px) {
    .header__actions-desktop .header__login,
    .header__actions-desktop .header__divider {
        display: none !important;
    }
}

/* Ensure LOGIN/REGISTER is visible at 768px and above */
@media (min-width: 768px) {
    .header__actions-desktop {
        display: flex !important;
    }

    .header__actions-desktop .header__login,
    .header__actions-desktop .header__divider {
        display: inline-block !important;
    }
}

/* Responsive Styles */
@media (max-width: 810px) {
    .header__main {
        padding: 0.75rem 0;
    }

    .header__main-row-1 {
        margin-bottom: 0;
    }

    .header__main-row-2 {
        margin-top: 0.75rem;
        padding: 0.5rem 0;
    }

    /* Expandable Search Bar (Mobile) */
    .header__main-row-2 {
        animation: slideDown 0.3s ease;
    }

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

    /* Search bar full width on mobile */
    .header__search {
        max-width: 100%;
        margin: 0;
    }

    /* Actions alignment on mobile */
    .header__actions {
        justify-content: flex-end;
    }

    .header__actions-mobile {
        gap: 0.5rem;
    }

    /* User dropdown mobile styles */
    .header__user-menu {
        right: -10px;
        min-width: 200px;
    }

    .header__user-trigger {
        width: 44px;
        height: 44px;
        padding: 4px;
    }

    .header__user-trigger--mobile {
        width: 40px;
        height: 40px;
        padding: 4px;
    }

    .header__user-avatar {
        width: 32px;
        height: 32px;
    }

    /* Icon sizes on mobile */
    .header__icon {
        font-size: 1.1rem;
        padding: 0.4rem;
    }

    /* Badge positioning on mobile */
    .header__badge {
        width: 16px;
        height: 16px;
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    .header__main {
        padding: 0.5rem 0;
    }

    .header__main-row-2 {
        margin-top: 0.5rem;
    }

    .header__actions-mobile {
        gap: 0.25rem;
    }

    .header__icon {
        font-size: 1rem;
        padding: 0.35rem;
    }

}

/* Icon hover animations */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-3px);
    }
}

/* Navigation Section Styles */
.nav-section {
    background-color: white;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Mobile Hamburger Menu Button (In Header) */
.header__mobile-nav-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 4px;
    width: 44px;
    height: 44px;
}

.header__mobile-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffd700;
}

.header__mobile-nav-btn:active {
    transform: scale(0.95);
}

.header__mobile-nav-btn i {
    font-size: 1.3rem;
}

/* Mobile Slide-In Menu Overlay */
.nav__mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

/* Mobile Slide-In Menu */
.nav__mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background: white;
    z-index: 9999;
    overflow-y: auto;
    transition: left 0.3s ease;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.nav__mobile-menu.active {
    left: 0;
}

/* Mobile Menu Header */
.nav__mobile-menu-header {
    background: #2850a3;
    color: white;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav__mobile-menu-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.nav__mobile-menu-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.nav__mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

/* Mobile Menu Content */
.nav__mobile-menu-content {
    padding: 0;
}

/* Mobile Menu Navigation Links */
.nav__mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e9ecef;
}

.nav__mobile-menu-item {
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
}

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

.nav__mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    color: #495057;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.nav__mobile-menu-link:hover,
.nav__mobile-menu-link.active {
    background: #f8f9fa;
    color: #2850a3;
    border-left-color: #2850a3;
    text-decoration: none;
}

.nav__mobile-menu-link i {
    width: 24px;
    text-align: center;
    font-size: 1.1rem;
    color: #6c757d;
}

.nav__mobile-menu-link:hover i,
.nav__mobile-menu-link.active i {
    color: #2850a3;
}

/* Mobile Menu Categories Section */
.nav__mobile-menu-categories {
    padding: 1rem;
}

.nav__mobile-menu-categories-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e9ecef;
}

.nav__mobile-menu-categories-title i {
    color: #2850a3;
}

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

.nav__mobile-menu-categories-item {
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
}

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

.nav__mobile-menu-categories-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0;
    color: #495057;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.nav__mobile-menu-categories-link:hover {
    color: #2850a3;
    text-decoration: none;
    padding-left: 0.5rem;
}

.nav__mobile-menu-categories-link i {
    color: #6c757d;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.nav__mobile-menu-categories-link:hover i {
    color: #2850a3;
    transform: translateX(3px);
}

.nav__mobile-menu-empty {
    color: #6c757d;
    font-size: 0.9rem;
    text-align: center;
    padding: 1rem 0;
    margin: 0;
}

.nav__mobile-menu-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.nav__mobile-menu-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #2850a3;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.nav__mobile-menu-view-all:hover {
    background: #1e3d7a;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

.nav__categories-btn {
    background: none;
    border: none;
    color: #495057;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    width: 100%;
    justify-content: space-between;
    white-space: nowrap; /* Prevent text wrapping */
}

/* Fix text splitting on medium screens (1199px to 768px) */
@media (max-width: 1199px) and (min-width: 768px) {
    .nav__categories-btn {
        font-size: 0.9rem;
        padding: 0.7rem 0.85rem;
    }
}

.nav__categories-btn:hover {
    background-color: #2850a3;
    color: white;
    transform: translateY(-2px);
}

.nav__categories-btn i {
    font-size: 1.1rem;
}

.nav__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
}

.nav__item {
    margin: 0;
}

.nav__link {
    color: #495057;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
    padding: 0.25rem 0;
}

.nav__link:hover {
    color: #2850a3;
    text-decoration: none;
}

.nav__link i {
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

/* Navigation Dropdown Menu */
.nav__item {
    position: relative;
}

.nav__item.has-dropdown > .nav__link::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.nav__item.has-dropdown:hover > .nav__link::after {
    transform: rotate(180deg);
}

.nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 220px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 0.75rem 0;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    list-style: none;
    margin: 0;
}

.nav__item.has-dropdown:hover .nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__submenu-item {
    margin: 0;
}

.nav__submenu-link {
    display: block;
    padding: 0.75rem 1.5rem;
    color: #495057;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.nav__submenu-link:hover {
    background: rgba(40, 80, 163, 0.1);
    color: #2850a3;
    padding-left: 2rem;
}

.nav__clearance {
    color: #495057;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.nav__clearance i {
    color: var(--golden-orange);
    font-size: 1rem;
}

.nav__clearance--highlight {
    color: var(--coral-red);
    font-weight: 600;
}

/* Mega Menu Styles */
.nav__categories-dropdown {
    position: relative;
}

.mega-menu-wrapper {
    position: relative;
}


.mega-menu-arrow {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
    margin-left: 0.5rem;
}

.mega-menu-wrapper.active .mega-menu-arrow {
    transform: rotate(180deg);
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 800px;
    max-width: 1200px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    margin-top: 0;
}

.mega-menu-wrapper:hover .mega-menu,
.mega-menu-wrapper.active .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    display: block !important;
}

/* Keep menu open when hovering over it */
.mega-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    display: block !important;
}

.mega-menu__container {
    padding: 0;
}

.mega-menu__header {
    background: linear-gradient(135deg, var(--dark-blue) 0%, #2d3d75 100%);
    padding: 1.5rem 2rem;
    border-radius: 12px 12px 0 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.mega-menu__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mega-menu__title i {
    font-size: 1.1rem;
    opacity: 0.9;
}

.mega-menu__content {
    padding: 1.5rem 2rem;
}

.mega-menu__columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}

.mega-menu__column {
    min-width: 0;
}

.mega-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mega-menu__item {
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
}

.mega-menu__item:last-child {
    border-bottom: none;
}

.mega-menu__link {
    display: block;
    padding: 0.75rem 0;
    color: #495057;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
    position: relative;
}

.mega-menu__link::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--coral-red);
    transition: width 0.3s ease;
}

.mega-menu__link:hover {
    color: var(--coral-red);
    text-decoration: none;
    padding-left: 0.5rem;
}

.mega-menu__link:hover::before {
    width: 4px;
}

.mega-menu__link-name {
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.mega-menu__footer {
    padding: 1.25rem 2rem;
    background: #ffffff;
    border-top: 1px solid #e9ecef;
    border-radius: 0 0 12px 12px;
    text-align: center;
}

.mega-menu__view-all {
    display: inline-flex;
    align-items: center;
    color: var(--dark-blue);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.mega-menu__view-all:hover {
    color: var(--coral-red);
    text-decoration: none;
    background: rgba(233, 92, 103, 0.05);
}

.mega-menu__view-all i {
    transition: transform 0.2s ease;
    margin-left: 0.5rem;
}

.mega-menu__view-all:hover i {
    transform: translateX(3px);
}

.mega-menu__empty {
    padding: 3rem 2rem;
    text-align: center;
}

.mega-menu__empty-text {
    margin: 0;
    color: #6c757d;
    font-size: 0.95rem;
}

/* Responsive Mega Menu */
@media (max-width: 1200px) {
    .mega-menu {
        max-width: 100%;
        left: 0;
        right: 0;
    }

    .mega-menu__columns {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 992px) {
    .mega-menu__columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .mega-menu__content {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .mega-menu {
        position: fixed;
        left: 1rem;
        right: 1rem;
        max-width: calc(100% - 2rem);
        max-height: 80vh;
        overflow-y: auto;
    }

    .mega-menu__columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .mega-menu__header {
        padding: 1.25rem 1.5rem;
    }

    .mega-menu__content {
        padding: 1.25rem;
    }

    .mega-menu__footer {
        padding: 1.25rem 1.5rem;
    }
}

.nav__subcategory-item {
    border-bottom: 1px solid #e9ecef;
}

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

.nav__subcategory-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #6c757d;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.nav__subcategory-link:hover {
    background-color: #e9ecef;
    color: #2850a3;
    text-decoration: none;
}

.nav__subcategory-link i {
    width: 16px;
    text-align: center;
    color: #2850a3;
    font-size: 0.8rem;
}

.nav__subcategory-link span {
    flex: 1;
    font-weight: 400;
}

/* Modern Slider Section Styles */
.slider-section {
    position: relative;
    overflow: hidden;
}

.slider {
    position: relative;
}

.slider__slide {
    background: no-repeat center center;
    background-size: cover;
    background-position: center;
    min-height: 65vh;
    position: relative;
    padding: 3rem 0;
}

.slider__slide .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    min-height: calc(65vh - 6rem);
}

.slider__slide .row {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 100%;
}

/* Modern Gradient Overlay */
.slider__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

/* Modern Content Container */
.slider__content {
    position: relative;
    z-index: 2;
    color: white;
    padding: 1.5rem 0;
    animation: slideInUp 0.8s ease-out;
    max-width: 600px;
    align-self: center;
    margin: 0 auto;
}

/* Modern Badge/Tagline */
.slider__badge {
    display: inline-block;
    margin-bottom: 1rem;
    animation: fadeInDown 0.8s ease-out 0.2s both;
}

.slider__badge-text {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
}

/* Modern Heading */
.slider__heading {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* Button Actions Container */
.slider__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease-out 0.6s both;
    margin-top: 1rem;
}

/* Modern Primary Button */
.slider__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    letter-spacing: 0.3px;
}

.slider__btn span {
    position: relative;
    z-index: 2;
}

.slider__btn i {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.slider__btn--primary {
    background: var(--coral-red);
    color: white;
    box-shadow: 0 2px 8px rgba(233, 92, 103, 0.3);
}

.slider__btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #d14a54;
    transition: left 0.3s ease;
    z-index: 1;
}

.slider__btn--primary:hover {
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 92, 103, 0.5);
}

.slider__btn--primary:hover::before {
    left: 0;
}

.slider__btn--primary:hover i {
    transform: translateX(3px);
}

/* Modern Secondary Button */
.slider__btn--secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
}

.slider__btn--secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    transition: width 0.3s ease;
    z-index: 1;
}

.slider__btn--secondary:hover {
    color: white;
    text-decoration: none;
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.slider__btn--secondary:hover::before {
    width: 100%;
}

.slider__btn--secondary:hover i {
    transform: translateX(3px);
}



/* Modern Keyframe Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modern Slider Responsive Design */
@media (max-width: 1200px) {
    .slider__slide {
        min-height: 60vh;
        padding: 2.5rem 0;
    }

    .slider__slide .container {
        min-height: calc(60vh - 5rem);
    }

    .slider__heading {
        font-size: 2.5rem;
    }

    .slider__content {
        max-width: 550px;
    }
}

@media (max-width: 992px) {
    .slider__slide {
        min-height: 55vh;
        padding: 2rem 0;
    }

    .slider__slide .container {
        min-height: calc(55vh - 4rem);
    }

    .slider__heading {
        font-size: 2.25rem;
        margin-bottom: 1.25rem;
    }

    .slider__content {
        max-width: 500px;
    }

    .slider__badge-text {
        font-size: 0.7rem;
        padding: 0.35rem 0.9rem;
    }

    .slider__btn {
        padding: 0.6rem 1.25rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .slider__slide {
        min-height: 40vh;
        padding: 1.5rem 0;
    }

    .slider__slide .container {
        min-height: calc(40vh - 3rem);
    }

    .slider__content {
        padding: 1rem 0;
        max-width: 100%;
        text-align: center;
    }

    .slider__heading {
        font-size: 2rem;
        margin-bottom: 1.25rem;
        line-height: 1.3;
    }

    .slider__badge {
        margin-bottom: 0.75rem;
    }

    .slider__badge-text {
        font-size: 0.65rem;
        padding: 0.3rem 0.8rem;
    }

    .slider__actions {
        flex-direction: row;
        gap: 0.5rem;
        margin-top: 0.75rem;
        justify-content: center;
    }

    .slider__btn {
        padding: 0.6rem 1.1rem;
        font-size: 0.8rem;
        gap: 0.4rem;
        width: auto;
    }
}

@media (max-width: 576px) {
    .slider__slide {
        min-height: 35vh;
        padding: 1.25rem 0;
    }

    .slider__slide .container {
        min-height: calc(35vh - 2.5rem);
    }

    .slider__content {
        text-align: center;
    }

    .slider__heading {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .slider__actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .slider__btn {
        width: auto;
        justify-content: center;
        padding: 0.6rem 1.1rem;
        font-size: 0.8rem;
    }
}

/* Slick Slider Custom Styles */
.slick-dots {
    bottom: 30px;
    z-index: 10;
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}

.slick-dots li {
    display: inline-block;
    margin: 0 8px;
    list-style: none;
}

.slick-dots li button {
    background: transparent;
    border: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

.slick-dots li button:before {
    display: none !important;
    content: none !important;
    font-size: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Additional text hiding for Slick dots */
.slick-dots li button:after {
    display: none !important;
    content: none !important;
}

.slick-dots li {
    font-size: 0 !important;
    line-height: 0 !important;
}

.slick-dots li.slick-active button {
    background-color: var(--golden-orange);
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(245, 149, 50, 0.6);
}

.slick-dots li button:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

/* Arrow Navigation */
.slick-prev,
.slick-next {
    display: none !important;
}

.slick-prev:hover,
.slick-next:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.slick-prev:active,
.slick-next:active {
    transform: translateY(-50%) scale(0.95);
    transition: all 0.1s ease;
}



.slick-prev:hover:before,
.slick-next:hover:before {
    color: var(--golden-orange);
    transform: scale(1.1);
}

.slick-prev:before {
    content: '\f104';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 28px;
    color: white;
    opacity: 1;
    visibility: visible;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.slick-next:before {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 28px;
    color: white;
    opacity: 1;
    visibility: visible;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}



/* Additional text hiding for arrow buttons */
.slick-prev button,
.slick-next button {
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

.slick-prev span,
.slick-next span {
    display: none !important;
}

.slick-prev {
    left: 50px;
    z-index: 15;
}

.slick-next {
    right: 50px;
    z-index: 15;
}

/* Arrow Focus States */
.slick-prev:focus,
.slick-next:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 149, 50, 0.5);
}

/* Slide Transitions */
.slick-slide {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.slick-slide.slick-active {
    opacity: 1;
}

/* Responsive Arrow Adjustments */
@media (max-width: 1200px) {
    .slick-prev {
        left: 30px;
    }

    .slick-next {
        right: 30px;
    }

    .slick-prev,
    .slick-next {
        width: 60px;
        height: 60px;
    }

    .slick-prev:before,
    .slick-next:before {
        font-size: 24px;
    }
}

/* Categories Section Styles */
.categories-section {
    padding: 5rem 0;
    background-color: #ffffff;
}

.categories__header {
    margin-bottom: 3.5rem;
}

.categories__title {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1rem;
    font-family: 'Oswald', sans-serif;
}

.categories__description {
    font-size: 1.1rem;
    color: #6c757d;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.categories__description {
    font-size: 1.1rem;
    color: #6c757d;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Modern Category Card Design */
.category-card {
    margin-bottom: 2rem;
    height: 100%;
}

.category-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card__link:hover {
    text-decoration: none;
    color: inherit;
}

.category-card__image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fa;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.category-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.category-card__badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    color: var(--dark-blue);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.category-card__content {
    text-align: center;
    padding: 0 0.5rem;
}

.category-card__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin: 0;
    font-family: 'Oswald', sans-serif;
    transition: color 0.3s ease;
    line-height: 1.4;
}

/* Hover Effects */
.category-card:hover .category-card__image-wrapper {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    will-change: transform;
}

.category-card:hover .category-card__image {
    transform: scale(1.08);
    will-change: transform;
}

.category-card:hover .category-card__overlay {
    opacity: 1;
}

.category-card:hover .category-card__name {
    color: var(--teal);
}

.category-card:hover .category-card__badge {
    background: var(--teal);
    color: white;
    transform: scale(1.05);
}

/* Responsive Categories */
@media (max-width: 1200px) {
    .categories__title {
        font-size: 2.5rem;
    }

    .categories__description {
        font-size: 1.05rem;
    }
}

@media (max-width: 992px) {
    .categories-section {
        padding: 4rem 0;
    }

    .categories__header {
        margin-bottom: 3rem;
    }

    .categories__title {
        font-size: 2.25rem;
    }

    .categories__description {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .categories-section {
        padding: 3rem 0;
    }

    .categories__header {
        margin-bottom: 2.5rem;
    }

    .categories__title {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }

    .categories__description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .category-card {
        margin-bottom: 1.5rem;
    }

    .category-card__image-wrapper {
        border-radius: 10px;
    }

    .category-card__name {
        font-size: 0.95rem;
    }

    .category-card__badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.65rem;
        top: 0.5rem;
        right: 0.5rem;
    }
}

@media (max-width: 576px) {
    .categories-section {
        padding: 2.5rem 0;
    }

    .categories__header {
        margin-bottom: 2rem;
    }

    .categories__title {
        font-size: 1.75rem;
    }

    .categories__description {
        font-size: 0.9rem;
        padding: 0 0.5rem;
    }

    .category-card {
        margin-bottom: 1.25rem;
    }

    .category-card__image-wrapper {
        border-radius: 8px;
        margin-bottom: 0.75rem;
    }

    .category-card__name {
        font-size: 0.875rem;
    }

    .category-card__badge {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
    }

    .category-card__content {
        padding: 0 0.25rem;
    }
}

/* Promotional Banners Section */
.promo-banners-section {
    padding: 5rem 0;
    background-color: #f8f9fa;
}

.promo-banner {
    position: relative;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    padding: 2rem;
    transition: all 0.3s ease;
}

.promo-banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.promo-banner__content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 60%;
}

.promo-banner__badge {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.promo-banner__title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    font-family: 'Oswald', sans-serif;
    line-height: 1.1;
}

.promo-banner__title-line {
    display: block;
}

.promo-banner__price {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.promo-banner__btn {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.promo-banner__btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

.promo-banner__illustration {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Home Office Banner */
.promo-banner--home-office {
    background: linear-gradient(135deg, var(--dark-blue), #2c3e50);
}

.promo-banner__desk {
    position: absolute;
    right: 20px;
    bottom: 40px;
    width: 120px;
    height: 8px;
    background: #34495e;
    border-radius: 4px;
}

.promo-banner__chair {
    position: absolute;
    right: 30px;
    bottom: 20px;
    width: 40px;
    height: 60px;
    background: #34495e;
    border-radius: 20px 20px 0 0;
}

.promo-banner__lamp {
    position: absolute;
    right: 80px;
    bottom: 80px;
    width: 6px;
    height: 40px;
    background: #f39c12;
    border-radius: 3px;
}

.promo-banner__shelf {
    position: absolute;
    right: 40px;
    top: 60px;
    width: 80px;
    height: 6px;
    background: #34495e;
    border-radius: 3px;
}

.promo-banner__plant {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 40px;
    background: #e74c3c;
    border-radius: 15px 15px 0 0;
}

/* Tape Banner */
.promo-banner--tape {
    background: #ff69b4;
}

.promo-banner__tape-roll {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: white;
    border: 3px solid #ffd700;
}

.promo-banner__tape-roll--1 {
    right: 40px;
    top: 60px;
}

.promo-banner__tape-roll--2 {
    right: 80px;
    top: 100px;
}

/* Notebooks Banner */
.promo-banner--notebooks {
    background: linear-gradient(135deg, #e9ecef, #dee2e6);
    color: #495057;
}

.promo-banner--notebooks .promo-banner__badge,
.promo-banner--notebooks .promo-banner__price {
    color: #6c757d;
}

.promo-banner--notebooks .promo-banner__btn {
    background: var(--sky-blue);
    color: white;
    border-color: var(--sky-blue);
}

.promo-banner__notebook {
    position: absolute;
    width: 60px;
    height: 80px;
    border-radius: 8px;
}

.promo-banner__notebook--1 {
    right: 60px;
    top: 80px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    transform: rotate(-15deg);
}

.promo-banner__notebook--2 {
    right: 100px;
    top: 100px;
    background: linear-gradient(45deg, #f093fb, #f5576c);
    transform: rotate(-25deg);
}

.promo-banner__pen {
    position: absolute;
    right: 40px;
    top: 120px;
    width: 4px;
    height: 30px;
    background: #28a745;
    border-radius: 2px;
}

.promo-banner__sprig {
    position: absolute;
    right: 80px;
    top: 60px;
    width: 20px;
    height: 25px;
    background: #28a745;
    border-radius: 10px 10px 0 0;
}

/* Metal Pens Banner */
.promo-banner--metal-pens {
    background: #dda0dd;
}

.promo-banner__pen--1 {
    position: absolute;
    right: 60px;
    top: 80px;
    width: 6px;
    height: 40px;
    background: #ff6b6b;
    transform: rotate(-20deg);
}

.promo-banner__pen--2 {
    position: absolute;
    right: 80px;
    top: 100px;
    width: 6px;
    height: 40px;
    background: #4ecdc4;
    transform: rotate(-10deg);
}

.promo-banner__pen--3 {
    position: absolute;
    right: 100px;
    top: 120px;
    width: 6px;
    height: 40px;
    background: #45b7d1;
    transform: rotate(5deg);
}

.promo-banner__pen--4 {
    position: absolute;
    right: 120px;
    top: 140px;
    width: 6px;
    height: 40px;
    background: #96ceb4;
    transform: rotate(15deg);
}

/* Responsive Promo Banners */
@media (max-width: 768px) {
    .promo-banners-section {
        padding: 3rem 0;
    }

    .promo-banner {
        height: 250px;
        padding: 1.5rem;
    }

    .promo-banner__title {
        font-size: 2rem;
    }

    .promo-banner__content {
        max-width: 70%;
    }
}

@media (max-width: 576px) {
    .promo-banner {
        height: 200px;
        padding: 1rem;
    }

    .promo-banner__title {
        font-size: 1.5rem;
    }

    .promo-banner__content {
        max-width: 80%;
    }

    .promo-banner__btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .slick-prev,
    .slick-next {
        display: none !important;
    }

    .slick-dots {
        bottom: 20px;
    }

    .slick-dots li button {
        width: 10px;
        height: 10px;
    }

    /* Main Banner Slider Pagination - Mobile */
    .main-banner-slider .swiper-pagination {
        bottom: 20px;
    }

    .main-banner-slider .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 6px;
    }
}


/* Products Section with Tabs */
.products-section {
    padding: 5rem 0;
    background-color: #f8f9fa;
}

.products-section .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

.products-carousel,
.new-arrivals-carousel,
.cute-stationery-carousel,
.you-may-also-like-carousel,
.recently-viewed-carousel,
.bundles-carousel {
    padding: 0 15px;
}

.products__header {
    text-align: center;
    margin-bottom: 3rem;
}

.products__title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark-blue);
    margin-bottom: 2rem;
    font-family: 'Oswald', sans-serif;
}

.products__tabs {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.products__tab {
    background: none;
    border: none;
    font-size: 1.2rem;
    font-weight: 600;
    color: #6c757d;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.products__tab:hover {
    color: var(--dark-blue);
    background-color: rgba(55, 78, 148, 0.1);
}

.products__tab--active {
    color: var(--dark-blue);
    background-color: rgba(55, 78, 148, 0.1);
}

.products__tab--active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background-color: var(--dark-blue);
    border-radius: 2px;
}

.products__content {
    display: none;
}

.products__content--active {
    display: block;
}

/* Product Items */
.product-item {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 0 0.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 400px;
    width: 280px;
    display: flex;
    flex-direction: column;
}

.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.product__image {
    position: relative;
    background-color: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    aspect-ratio: 1;
    flex-shrink: 0;
}

.product__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-item:hover .product__img {
    transform: scale(1.05);
}

.product__actions {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

.product-item:hover .product__actions {
    opacity: 1;
    transform: translateX(0);
}

.product__action {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: white;
    border: none;
    color: var(--dark-blue);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.product__action:hover {
    background: var(--dark-blue);
    color: white;
    transform: scale(1.1);
}

.product__info {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product__name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 1rem;
    line-height: 1.3;
    font-family: 'Oswald', sans-serif;
}

.product__image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 1;
}

.product__image-link:hover {
    opacity: 0.9;
}

.product__image-link img {
    display: block;
    width: 100%;
    height: 100%;
}

.product__name-link {
    color: var(--dark-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.product__name-link:hover {
    color: var(--coral-red);
    text-decoration: none;
}

.product__price {
    margin-bottom: 1.5rem;
}

.product__price-current {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--coral-red);
    margin-right: 0.5rem;
}

.product__price-old {
    font-size: 1rem;
    color: #6c757d;
    text-decoration: line-through;
}

.product__add-cart {
    background: var(--dark-blue);
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.product-item:hover .product__add-cart {
    opacity: 1;
    transform: translateY(0);
}

.product__add-cart:hover {
    background: #2c3e50;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}



/* Wishlist Button Tooltip */
.product__action[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 8px;
}

.product__action[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    margin-bottom: 3px;
}

/* Owl Carousel Custom Styles */
.products-carousel .owl-stage {
    padding: 1rem 0;
}

.products-carousel .owl-item {
    padding: 0 0.75rem;
    display: flex;
    height: auto;
}

.products-carousel .owl-item .cute-stationery__item {
    width: 100%;
    margin: 0;
}

.products-carousel .owl-nav {
    display: block !important;
}



.products-carousel .owl-dots {
    text-align: center;
    margin-top: 2rem;
}

.products-carousel .owl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #dee2e6;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.products-carousel .owl-dot.active {
    background: var(--dark-blue);
    transform: scale(1.2);
}

/* Responsive Products */
@media (max-width: 768px) {
    .products-section {
        padding: 3rem 0;
    }

    .products__title {
        font-size: 2.2rem;
    }

    .related-products__title {
        font-size: 2.2rem;
    }

    .products__tabs {
        gap: 1rem;
        flex-wrap: wrap;
    }

    .products__tab {
        font-size: 1rem;
        padding: 0.6rem 1rem;
    }

    .product-item {
        padding: 1rem;
        margin: 0 0.25rem;
    }


}

@media (max-width: 576px) {
    .products__tabs {
        gap: 0.5rem;
    }

    .products__tab {
        font-size: 0.9rem;
        padding: 0.5rem 0.8rem;
    }

    .product__name {
        font-size: 1rem;
    }

    .product__price-current {
        font-size: 1.1rem;
    }

    .product__add-cart {
        padding: 0.7rem 1.2rem;
        font-size: 0.8rem;
    }
}

/* Experience Banner Section */
.experience-banner {
    padding: 8rem 0;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/banner-cta.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.experience-banner__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.experience-banner__text {
    position: relative;
    z-index: 3;
}

.experience-banner__badge {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sky-blue);
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.experience-banner__title {
    font-size: 4rem;
    font-weight: 800;
    color: white;
    margin-bottom: 3rem;
    font-family: 'Oswald', sans-serif;
    line-height: 1.1;
}

.experience-banner__title-line {
    display: block;
}

.experience-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: #ff69b4;
    color: white;
    text-decoration: none;
    padding: 1.2rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255, 105, 180, 0.3);
}

.experience-banner__btn:hover {
    background: #ff1493;
    color: white;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255, 105, 180, 0.4);
}



/* Responsive Experience Banner */
@media (max-width: 768px) {
    .experience-banner {
        padding: 5rem 0;
    }

    .experience-banner__title {
        font-size: 2.5rem;
    }

    .experience-banner__badge {
        font-size: 0.9rem;
    }

    .experience-banner__btn {
        padding: 1rem 2rem;
        font-size: 1rem;
    }


}

@media (max-width: 576px) {
    .experience-banner__title {
        font-size: 2rem;
    }

    .experience-banner__btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }


}

/* About Section */
.about-section {
    padding: 6rem 0;
    background-color: #f8f9fa;
}

.about__image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    height: 500px;
}

.about__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.about__image:hover .about__img {
    transform: scale(1.05);
}

.about__content {
    padding-left: 3rem;
}

.about__badge {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sky-blue);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}

.about__title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #212529;
    margin-bottom: 1.5rem;
    font-family: 'Oswald', sans-serif;
    line-height: 1.2;
}

.about__description {
    font-size: 1.1rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.about__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: transparent;
    color: var(--dark-blue);
    text-decoration: none;
    padding: 1rem 2rem;
    border: 2px solid var(--dark-blue);
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.about__btn:hover {
    background: var(--dark-blue);
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(55, 78, 148, 0.3);
}

/* Responsive About Section */
@media (max-width: 1200px) {
    .about__image {
        height: 450px;
    }

    .about__title {
        font-size: 2.4rem;
    }
}

@media (max-width: 992px) {
    .about-section {
        padding: 4rem 0;
    }

    .about__image {
        height: 400px;
        margin-bottom: 3rem;
    }

    .about__content {
        padding-left: 0;
        text-align: center;
    }

    .about__title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .about__image {
        height: 350px;
    }

    .about__title {
        font-size: 2rem;
    }

    .about__description {
        font-size: 1rem;
    }

    .about__btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .about__image {
        height: 300px;
    }

    .about__title {
        font-size: 1.8rem;
    }

    .about__btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.8rem;
    }
}

/* Cute Stationery Section */
.cute-stationery-section {
    padding: 5rem 0;
    background-color: #ffffff;
}

.cute-stationery__header {
    text-align: center;
    margin-bottom: 3rem;
}

.cute-stationery__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 2rem;
    font-family: 'Oswald', sans-serif;
}

.cute-stationery__nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.cute-stationery__nav-item {
    background: none;
    border: none;
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-blue);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    user-select: none;
}

.cute-stationery__nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--coral-red);
    transition: width 0.3s ease;
}

.cute-stationery__nav-item.active {
    color: var(--coral-red);
    background-color: rgba(233, 92, 103, 0.1);
    border-radius: 6px;
}

.cute-stationery__nav-item.active::after {
    width: 100%;
}

.cute-stationery__nav-item:hover {
    color: var(--coral-red);
}

.cute-stationery__nav-item:hover::after {
    width: 100%;
}

.cute-stationery__content {
    margin-top: 2rem;
}

/* Tab Content Styles */
.cute-stationery__tab-content {
    display: none;
}

.cute-stationery__tab-content.active {
    display: block;
}

.cute-stationery__content {
    position: relative;
    min-height: 400px;
}

.cute-stationery-carousel {
    margin: 0;
}

.cute-stationery-carousel .owl-item {
    padding: 0 0.75rem;
    display: flex;
    height: auto;
}

.cute-stationery-carousel .owl-item .cute-stationery__item {
    width: 100%;
    margin: 0;
}

.cute-stationery__item {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.25rem;
    margin: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    height: 100%;
}

.swiper-slide {
    height: auto;
    display: flex;
}

.swiper-slide .cute-stationery__item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cute-stationery__item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.1);
}

.cute-stationery__image {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 Aspect Ratio */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #f8f9fa;
    flex-shrink: 0;
}

.cute-stationery__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8f9fa;
}

.cute-stationery__item:hover .cute-stationery__img {
    transform: scale(1.08);
}

/* Desktop Action Icons (Always Visible) */
.cute-stationery__actions--desktop {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease;
    z-index: 10;
}

/* Mobile Action Buttons (Always Visible) */
.cute-stationery__actions--mobile {
    display: none;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
    gap: 0.5rem;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.cute-stationery__action-mobile {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: white;
    background: var(--dark-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 0;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cute-stationery__action-mobile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: white;
    text-decoration: none;
}

.cute-stationery__action-mobile i {
    font-size: 1rem;
    flex-shrink: 0;
}

.cute-stationery__action-mobile span {
    white-space: nowrap;
}

.cute-stationery__action-mobile.wishlist-btn {
    background: white;
    color: var(--dark-blue);
    border: 2px solid var(--dark-blue);
}

.cute-stationery__action-mobile.wishlist-btn:hover {
    background: var(--dark-blue);
    color: white;
    border-color: var(--dark-blue);
}

.cute-stationery__action-mobile.wishlist-btn.in-wishlist {
    background: rgba(233, 92, 103, 0.1);
    color: var(--coral-red);
    border-color: var(--coral-red);
}

.cute-stationery__action-mobile.wishlist-btn.in-wishlist:hover {
    background: var(--coral-red);
    color: white;
    border-color: var(--coral-red);
}

.cute-stationery__action-mobile.wishlist-btn.in-wishlist i {
    color: var(--coral-red);
}

.cute-stationery__action-mobile.wishlist-btn.in-wishlist:hover i {
    color: white;
}

.cute-stationery__add-cart-mobile {
    background: var(--coral-red);
    color: white;
}

.cute-stationery__add-cart-mobile:hover {
    background: #d14a54;
    color: white;
}

.cute-stationery__add-cart-mobile.in-cart {
    background: #28a745;
    color: white;
}

.cute-stationery__add-cart-mobile.in-cart:hover {
    background: #218838;
    color: white;
}

.cute-stationery__action {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--dark-blue);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.cute-stationery__action:hover {
    background: var(--coral-red);
    color: white;
    transform: scale(1.15);
    box-shadow: 0 5px 20px rgba(233, 92, 103, 0.5);
}

.cute-stationery__add-cart {
    background: var(--coral-red);
    color: white;
}

.cute-stationery__add-cart:hover {
    background: #d14a54;
    transform: scale(1.1);
}

.cute-stationery__info {
    flex-shrink: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: auto;
}

.cute-stationery__rating {
    min-height: 0;
    margin-bottom: 0.5rem;
    height: auto;
}

.cute-stationery__name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
    line-height: 1.4;
    font-family: 'Oswald', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8rem;
}

/* Rating Display */
.cute-stationery__rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    min-height: 0;
    height: auto;
}

.cute-stationery__stars {
    display: flex;
    gap: 2px;
    color: #ffc107;
    font-size: 0.85rem;
}

.cute-stationery__rating-text {
    font-size: 0.8rem;
    color: #6c757d;
}

.cute-stationery__image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.cute-stationery__image-link:hover {
    opacity: 0.9;
}

.cute-stationery__image-link img {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.cute-stationery__name-link {
    color: var(--dark-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.cute-stationery__name-link:hover {
    color: var(--coral-red);
    text-decoration: none;
}

.cute-stationery__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0;
    min-height: 28px;
}

.cute-stationery__price-current {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--coral-red);
    line-height: 1;
}

.cute-stationery__price-old {
    font-size: 0.9rem;
    color: #999;
    text-decoration: line-through;
    font-weight: 500;
}

/* Product Badges - Stacked on left side */
.product-badges-wrapper {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Product Badge Wrapper for Detail Page - Right Side */
.product-badges-wrapper--detail {
    top: 15px;
    right: 15px;
    left: auto;
    z-index: 10;
}

.product-badge {
    position: relative;
    top: 0;
    left: 0;
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    line-height: 1;
    display: inline-block;
}

.product-badge--sale {
    background: linear-gradient(135deg, #ff4444, #ff6666);
    color: white;
}

.product-badge--new {
    background: linear-gradient(135deg, #00cc00, #33dd33);
    color: white;
}

/* Stock Status Badges */
.product-stock-status {
    margin: 0.5rem 0;
}

.stock-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stock-badge--in {
    background: #d4edda;
    color: #155724;
}

.stock-badge--low {
    background: #fff3cd;
    color: #856404;
}

.stock-badge--out {
    background: #f8d7da;
    color: #721c24;
}

/* New Arrivals & Recently Viewed Sections */
.new-arrivals-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.recently-viewed-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.you-may-also-like-section {
    padding: 4rem 0;
    background: #ffffff;
}

.section-header {
    margin-bottom: 2rem;
    text-align: center;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1rem;
    font-family: 'Oswald', sans-serif;
}

.new-arrivals-carousel,
.recently-viewed-carousel,
.you-may-also-like-carousel {
    margin-top: 2rem;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin-top: 0.5rem;
}

/* Special Offers Banner */
.special-offers-banner-section {
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.special-offers-banner-carousel {
    position: relative;
    width: 100%;
    margin: 0;
}

.special-offers-banner {
    padding: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    margin: 0;
    overflow: hidden;
}

.special-offers-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.special-offers-banner__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.special-offers-banner__title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
    font-family: 'Oswald', sans-serif;
}

.special-offers-banner__description {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.special-offers-banner__description p {
    margin-bottom: 0.5rem;
}

.special-offers-banner__description p:last-child {
    margin-bottom: 0;
}

.special-offers-banner__btn {
    display: inline-block;
    padding: 12px 30px;
    background: var(--coral-red);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.special-offers-banner__btn:hover {
    background: #d14a54;
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

/* Special Offers Banner Responsive */
@media (max-width: 768px) {
    .special-offers-banner {
        height: 250px;
    }

    .special-offers-banner__title {
        font-size: 2rem;
    }

    .special-offers-banner__description {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .special-offers-banner {
        height: 200px;
    }

    .special-offers-banner__title {
        font-size: 1.5rem;
    }

    .special-offers-banner__description {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .special-offers-banner__btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* Floating Bubbles Effect for Special Offers Banner */
.floating-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.floating-bubbles .bubble {
    position: absolute;
    bottom: -50px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: float-up 12s infinite ease-in-out;
    backdrop-filter: blur(2px);
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.2);
}

.floating-bubbles .bubble:nth-child(1) {
    left: 10%;
    width: 30px;
    height: 30px;
    animation-delay: 0s;
    animation-duration: 10s;
}

.floating-bubbles .bubble:nth-child(2) {
    left: 20%;
    width: 50px;
    height: 50px;
    animation-delay: 0.5s;
    animation-duration: 14s;
}

.floating-bubbles .bubble:nth-child(3) {
    left: 35%;
    width: 35px;
    height: 35px;
    animation-delay: 1s;
    animation-duration: 11s;
}

.floating-bubbles .bubble:nth-child(4) {
    left: 50%;
    width: 45px;
    height: 45px;
    animation-delay: 0.3s;
    animation-duration: 13s;
}

.floating-bubbles .bubble:nth-child(5) {
    left: 65%;
    width: 32px;
    height: 32px;
    animation-delay: 0.8s;
    animation-duration: 10.5s;
}

.floating-bubbles .bubble:nth-child(6) {
    left: 75%;
    width: 48px;
    height: 48px;
    animation-delay: 1.2s;
    animation-duration: 15s;
}

.floating-bubbles .bubble:nth-child(7) {
    left: 85%;
    width: 38px;
    height: 38px;
    animation-delay: 0.6s;
    animation-duration: 12s;
}

.floating-bubbles .bubble:nth-child(8) {
    left: 95%;
    width: 42px;
    height: 42px;
    animation-delay: 1.5s;
    animation-duration: 16s;
}

@keyframes float-up {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    5% {
        opacity: 0.9;
    }
    50% {
        transform: translateX(20px) scale(1.1);
        opacity: 0.85;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-600px) translateX(-20px) scale(0.8);
        opacity: 0;
    }
}

/* Countdown Timer */
.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;
}

.countdown-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 1rem;
    border-radius: 8px;
    min-width: 80px;
    backdrop-filter: blur(10px);
}

.countdown-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: white;
    font-family: 'Oswald', sans-serif;
}

.countdown-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.5rem;
    text-transform: uppercase;
}

/* Testimonials Section */
.testimonials-section {
    padding: 5rem 0;
    background: #f8f9fa;
}

/* Swiper styles for testimonials carousel */
.testimonials-carousel {
    width: 100%;
    padding-bottom: 3rem;
    overflow: hidden;
}

.testimonials-carousel .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.testimonials-carousel .swiper-slide {
    height: auto;
    display: flex;
    box-sizing: border-box;
    flex-shrink: 0;
}

.testimonials-carousel .swiper-slide .testimonial-item {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.testimonial-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.testimonial-rating {
    margin-bottom: 1rem;
}

.testimonial-rating .fa-star {
    color: #ddd;
    font-size: 1.2rem;
    margin: 0 2px;
}

.testimonial-rating .fa-star.active {
    color: #ffc107;
}

.testimonial-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    font-style: italic;
    margin-bottom: 1.5rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: auto;
}

.testimonial-author__image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-author__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--coral-red);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.testimonial-author__name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin: 0;
}

.testimonial-author__designation {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

/* FAQ Section */
.faq-section {
    padding: 5rem 0;
    background: white;
}

.faq-accordion {
    margin-top: 2rem;
}

.faq-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active {
    border-color: var(--coral-red);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.faq-question {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: #e9ecef;
}

.faq-question h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin: 0;
    flex: 1;
}

.faq-question i {
    color: var(--coral-red);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 1.5rem;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 1.5rem;
}

.faq-answer p {
    color: #666;
    line-height: 1.8;
    margin: 0;
}

/* Trust Badges Section */
.trust-badges-section {
    padding: 3rem 0;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.trust-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    text-align: center;
}

.trust-badge-item {
    padding: 1.5rem;
}

.trust-badge-item i {
    font-size: 2.5rem;
    color: var(--coral-red);
    margin-bottom: 1rem;
}

.trust-badge-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
}

.trust-badge-item p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* Owl Carousel Custom Styles for Cute Stationery */
.cute-stationery-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.cute-stationery-carousel .owl-item {
    display: flex;
    height: auto;
}

.cute-stationery-carousel .owl-nav {
    display: block !important;
}

.cute-stationery-carousel .owl-dots {
    text-align: center;
    margin-top: 2rem;
}

.cute-stationery-carousel .owl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.cute-stationery-carousel .owl-dot.active {
    background: var(--coral-red);
    transform: scale(1.2);
}

/* Responsive Cute Stationery Section */
@media (max-width: 1200px) {
    .cute-stationery__title {
        font-size: 2.2rem;
    }

    .cute-stationery__nav {
        gap: 1.5rem;
    }
}

@media (max-width: 992px) {
    .cute-stationery-section {
        padding: 4rem 0;
    }

    .cute-stationery__title {
        font-size: 2rem;
    }

    .cute-stationery__nav {
        gap: 1rem;
    }

    .cute-stationery__nav-item {
        padding: 0.6rem 1.2rem;
        font-size: 0.8rem;
    }

    .cute-stationery__item {
        padding: 1.2rem;
    }
}

@media (max-width: 768px) {
    .cute-stationery__title {
        font-size: 1.8rem;
    }

    .cute-stationery__nav {
        gap: 0.8rem;
        justify-content: center;
    }

    .cute-stationery__nav-item {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }

    .cute-stationery__item {
        padding: 1rem;
        margin: 0;
    }

    .products-carousel .owl-item,
    .cute-stationery-carousel .owl-item {
        padding: 0 0.5rem;
    }

    .cute-stationery__image {
        padding-top: 75%;
        margin-bottom: 0.75rem;
    }

    .cute-stationery__name {
        font-size: 0.9rem;
        min-height: 2.5rem;
        margin-bottom: 0.4rem;
    }

    .cute-stationery__rating {
        margin-bottom: 0.5rem;
    }

    .cute-stationery__stars {
        font-size: 0.75rem;
    }

    .cute-stationery__rating-text {
        font-size: 0.75rem;
    }

    .cute-stationery__price-current {
        font-size: 1.1rem;
    }

    .cute-stationery__price-old {
        font-size: 0.85rem;
    }

    /* Hide desktop actions, show mobile actions */
    .cute-stationery__actions--desktop {
        display: none;
    }

    .cute-stationery__actions--mobile {
        display: flex;
    }

    /* Show icon-only on small screens */
    .cute-stationery__action-mobile {
        padding: 0.7rem;
        font-size: 0;
        gap: 0;
    }

    .cute-stationery__action-mobile i {
        font-size: 1rem;
    }

    .cute-stationery__action-mobile span {
        display: none;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .cute-stationery__action-mobile {
        padding: 0.65rem 0.75rem;
        font-size: 0.75rem;
        gap: 0.35rem;
    }

    .cute-stationery__action-mobile i {
        font-size: 0.95rem;
    }

    .cute-stationery__action-mobile span {
        display: inline;
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    .cute-stationery__title {
        font-size: 1.6rem;
    }

    .cute-stationery__nav {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .cute-stationery__nav-item {
        padding: 0.4rem 0.8rem;
        font-size: 0.7rem;
    }

    .cute-stationery__item {
        padding: 0.75rem;
        margin: 0;
    }

    .products-carousel .owl-item,
    .cute-stationery-carousel .owl-item {
        padding: 0 0.4rem;
    }

    .cute-stationery__image {
        padding-top: 75%;
        margin-bottom: 0.65rem;
        border-radius: 8px;
    }

    .cute-stationery__name {
        font-size: 0.85rem;
        min-height: 2.3rem;
        margin-bottom: 0.35rem;
    }

    .cute-stationery__rating {
        margin-bottom: 0.5rem;
    }

    .cute-stationery__stars {
        font-size: 0.7rem;
    }

    .cute-stationery__rating-text {
        font-size: 0.7rem;
    }

    .cute-stationery__price-current {
        font-size: 1rem;
    }

    .cute-stationery__price-old {
        font-size: 0.8rem;
    }

    .cute-stationery__actions--mobile {
        gap: 0.5rem;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        flex-direction: row;
        justify-content: center;
    }

    .cute-stationery__action-mobile {
        flex: 1;
        min-width: 0;
        padding: 0.65rem;
        font-size: 0;
        gap: 0;
        justify-content: center;
        min-width: 44px;
        max-width: 50%;
    }

    .cute-stationery__action-mobile i {
        font-size: 1.1rem;
        margin: 0;
    }

    .cute-stationery__action-mobile span {
        display: none;
    }

    .product-badge {
        top: 8px;
        left: 8px;
        padding: 0.3rem 0.6rem;
        font-size: 0.65rem;
    }
}

/* Subscription Banner Section */
.subscription-banner {
    padding: 5rem 0;
    background-color: var(--dark-blue);
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.subscription-banner__content {
    max-width: 600px;
    margin: 0 auto;
}

.subscription-banner__title {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    font-family: 'Oswald', sans-serif;
    line-height: 1.2;
}

.subscription-banner__title-line {
    display: block;
}

.subscription-banner__form {
    margin-top: 2rem;
}

.subscription-form__input-group {
    display: flex;
    background: #f8f9fa;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    margin: 0 auto;
}

.subscription-form__input {
    flex: 1;
    border: none;
    padding: 1.2rem 1.5rem;
    font-size: 1rem;
    background: transparent;
    color: #495057;
    outline: none;
}

.subscription-form__input::placeholder {
    color: #6c757d;
    font-weight: 400;
}

.subscription-form__btn {
    border: none;
    background: var(--coral-red);
    color: white;
    padding: 1.2rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.subscription-form__btn:hover {
    background: #d14a54;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.subscription-form__btn:active {
    transform: translateY(0);
}

.subscription-form__btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.subscription-btn-text,
.subscription-btn-loader {
    display: inline-block;
}

.subscription-btn-loader i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Instagram Section */
.instagram-section {
    padding: 5rem 0;
    background: #ffffff;
}

.instagram-section__header {
    margin-bottom: 3rem;
}

.instagram-section__icon {
    font-size: 3rem;
    color: #E4405F;
    margin-bottom: 1.5rem;
    display: inline-block;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.instagram-section__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.75rem;
    font-family: 'Oswald', sans-serif;
}

.instagram-section__subtitle {
    font-size: 1.25rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.instagram-section__follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #E4405F, #C13584);
    color: white;
    text-decoration: none;
    padding: 0.875rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(228, 64, 95, 0.3);
}

.instagram-section__follow-btn:hover {
    background: linear-gradient(135deg, #C13584, #E4405F);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(228, 64, 95, 0.4);
    color: white;
    text-decoration: none;
}

.instagram-section__follow-btn i {
    transition: transform 0.3s ease;
}

.instagram-section__follow-btn:hover i {
    transform: translateX(5px);
}

.instagram-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1;
    background: #f8f9fa;
}

.instagram-item__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
}

.instagram-item__image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.instagram-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.instagram-item__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(228, 64, 95, 0.8), rgba(193, 53, 132, 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.instagram-item__overlay i {
    font-size: 2.5rem;
    color: white;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.instagram-item:hover .instagram-item__img {
    transform: scale(1.1);
}

.instagram-item:hover .instagram-item__overlay {
    opacity: 1;
}

.instagram-item:hover .instagram-item__overlay i {
    transform: scale(1);
}

/* Responsive Instagram Section */
@media (max-width: 768px) {
    .instagram-section {
        padding: 3rem 0;
    }

    .instagram-section__title {
        font-size: 2rem;
    }

    .instagram-section__subtitle {
        font-size: 1rem;
    }

    .instagram-section__icon {
        font-size: 2.5rem;
    }
}

/* Responsive Subscription Banner */
@media (max-width: 1200px) {
    .subscription-banner__title {
        font-size: 2.2rem;
    }
}

@media (max-width: 992px) {
    .subscription-banner {
        padding: 4rem 0;
    }

    .subscription-banner__title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .subscription-form__input-group {
        max-width: 450px;
    }
}

@media (max-width: 768px) {
    .subscription-banner__title {
        font-size: 1.8rem;
        margin-bottom: 1.8rem;
    }

    .subscription-form__input-group {
        flex-direction: column;
        border-radius: 25px;
        max-width: 400px;
    }

    .subscription-form__input {
        padding: 1rem 1.5rem;
        text-align: center;
    }

    .subscription-form__btn {
        padding: 1rem 2rem;
        border-radius: 0 0 25px 25px;
    }
}

@media (max-width: 576px) {
    .subscription-banner {
        padding: 3rem 0;
    }

    .subscription-banner__title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .subscription-form__input-group {
        max-width: 350px;
    }

    .subscription-form__input {
        font-size: 0.9rem;
        padding: 0.9rem 1.2rem;
    }

    .subscription-form__btn {
        font-size: 0.9rem;
        padding: 0.9rem 1.5rem;
    }
}

/* Subscription Messages */
.subscription-message {
    margin-top: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    animation: slideInDown 0.3s ease-out;
}

.subscription-message--success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.subscription-message--error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.subscription-message span {
    flex: 1;
    margin-right: 1rem;
}

.subscription-message__close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscription-message__close:hover {
    opacity: 1;
}

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

/* Footer Section */
.footer {
    background-color: #2850a3;
    color: #ffffff;
    position: relative;
}

.footer__main {
    padding: 4rem 0 3rem;
}

.footer__column {
    margin-bottom: 2rem;
}

/* Footer Logo */
.footer__logo {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.footer__logo-icon {
    width: 40px;
    height: 40px;
    background: var(--coral-red);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-right: 12px;
}

.footer__logo-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Oswald', sans-serif;
}

.footer__logo-image {
    max-height: 50px;
    width: auto;
    object-fit: contain;
}

/* Footer Tagline */
.footer__tagline {
    color: #e9ecef;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

/* Footer Social Links */
.footer__social {
    display: flex;
    gap: 12px;
}

.footer__social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.footer__social-link:hover {
    background: var(--coral-red);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Footer Column Titles */
.footer__column-title {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Oswald', sans-serif;
}

/* Footer Links */
.footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__links li {
    margin-bottom: 0.8rem;
}

.footer__link {
    color: #e9ecef;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.95rem;
}

.footer__link:hover {
    color: var(--coral-red);
}

/* Footer Contact */
.footer__contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.footer__contact-icon {
    color: #e9ecef;
    margin-right: 12px;
    margin-top: 2px;
    width: 16px;
    text-align: center;
}

.footer__contact-text {
    color: #e9ecef;
    font-size: 0.95rem;
    line-height: 1.5;
}

.footer__contact-text--highlight {
    color: var(--coral-red);
    font-weight: 600;
    font-size: 1rem;
}

/* Footer Bottom */
.footer__bottom {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__copyright {
    color: #fff;
    font-size: 0.9rem;
	font-weight:600;
}

/* Language section removed - copyright is now centered */

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

.form-group--checkbox {
    margin-bottom: 2rem;
}

.form-group--row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group__field {
    flex: 1;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--dark-blue);
    font-size: 0.95rem;
}

.form-input {
    width: 100%;
    padding: 1rem 1.2rem;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.form-input:focus {
    outline: none;
    border-color: var(--coral-red);
    background: white;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: #6c757d;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    margin-right: 0.75rem;
    position: relative;
    transition: all 0.3s ease;
    background: white;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: var(--coral-red);
    border-color: var(--coral-red);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
}

.login-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.login-btn:hover {
    background: linear-gradient(135deg, #ff6b6b, var(--coral-red));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.login-links {
    text-align: center;
}

.forgot-password,
.signup-link {
    display: block;
    color: var(--coral-red);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.forgot-password:hover,
.signup-link:hover {
    color: var(--dark-blue);
    text-decoration: underline;
}

.signup-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.signup-btn:hover {
    background: linear-gradient(135deg, #ff6b6b, var(--coral-red));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.signup-links {
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
}

.login-link {
    color: var(--coral-red);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.login-link:hover {
    color: var(--dark-blue);
    text-decoration: underline;
}

.terms-link {
    color: var(--coral-red);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.terms-link:hover {
    color: var(--dark-blue);
    text-decoration: underline;
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--coral-red);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(233, 92, 103, 0.3);
}

.scroll-to-top:hover {
    background: #d14a54;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.4);
}

.scroll-to-top.show {
    display: flex;
}

/* Responsive Footer */
@media (max-width: 1200px) {
    .footer__main {
        padding: 3.5rem 0 2.5rem;
    }

    .footer__logo-text {
        font-size: 1.6rem;
    }
}

@media (max-width: 992px) {
    .footer__main {
        padding: 3rem 0 2rem;
    }

    .footer__column {
        text-align: center;
        margin-bottom: 2.5rem;
    }

    .footer__logo {
        justify-content: center;
    }

    .footer__social {
        justify-content: center;
    }

    .footer__contact-item {
        justify-content: center;
    }

    /* Language section removed */
}

@media (max-width: 768px) {
    .footer__main {
        padding: 2.5rem 0 1.5rem;
    }

    .footer__logo-text {
        font-size: 1.4rem;
    }

    .footer__column-title {
        font-size: 1rem;
        margin-bottom: 1.2rem;
    }

    .footer__tagline {
        font-size: 0.9rem;
    }

    .footer__link {
        font-size: 0.9rem;
    }

    .footer__contact-text {
        font-size: 0.9rem;
    }

    .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .form-input {
        padding: 0.9rem 1rem;
    }

    .signup-btn {
        padding: 0.9rem;
        font-size: 1rem;
    }

    /* Row layout responsive - stack fields vertically on mobile */
    .form-group--row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-group__field {
        flex: none;
    }
}

@media (max-width: 576px) {
    .footer__main {
        padding: 2rem 0 1rem;
    }

    .footer__logo-icon {
        width: 35px;
        height: 35px;
        font-size: 1.3rem;
    }

    .footer__logo-text {
        font-size: 1.3rem;
    }

    .footer__column-title {
        font-size: 0.95rem;
    }

    .footer__social-link {
        width: 35px;
        height: 35px;
    }

    /* Language section removed */

    .scroll-to-top {
        bottom: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* Category Products Page Styles */
/* ============================================
   Page Header Component - Modern Design (Option 2: With Background Image)
   ============================================ */
.page-header {
    background: linear-gradient(135deg, var(--coral-red) 0%, #ff6b6b 50%, #ff5252 100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 1.75rem 0 1.5rem;
    color: white;
    position: relative;
    overflow: hidden;
    min-height: 140px;
    margin-bottom: 5rem;
}

/* Background image overlay for text readability */
.page-header--with-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Texture pattern overlay (subtle) */
.page-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

/* For headers with images, reduce texture overlay */
.page-header--with-image::after {
    opacity: 0.1;
}

.page-header .container {
    position: relative;
    z-index: 1;
}

/* Breadcrumb Styles */
.page-header__breadcrumb {
    margin-bottom: 0.75rem;
}

.page-header .breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page-header .breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.5;
}

.page-header .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.25rem 0;
    display: inline-block;
}

.page-header .breadcrumb-item a:hover {
    color: white;
    text-decoration: underline;
    transform: translateY(-1px);
}

.page-header .breadcrumb-item.active {
    color: white;
    font-weight: 500;
}

.page-header .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    color: rgba(255, 255, 255, 0.5);
    padding: 0 0.5rem;
    font-weight: 300;
    font-size: 0.875rem;
}

/* Page Title */
.page-header__title {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Page Subtitle */
.page-header__subtitle {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 0.5rem;
    margin-bottom: 0;
    opacity: 0.95;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Legacy Support - Keep old class names working */
.page-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle {
    font-size: 1.125rem;
    font-weight: 400;
    margin-top: 0.75rem;
    margin-bottom: 0;
    opacity: 0.95;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
}

/* Page Content Section Styles */
.page-content-section {
    padding: 4rem 0;
    background-color: #ffffff;
}

.page-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.page-image {
    text-align: center;
    margin-bottom: 2.5rem;
}

.page-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.page-content {
    line-height: 1.8;
    color: #333;
    font-size: 1.05rem;
}

.page-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--teal);
}

.page-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.page-content h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #555;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.page-content p {
    margin-bottom: 1.25rem;
    color: #444;
    text-align: justify;
}

.page-content ul,
.page-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.page-content ul li,
.page-content ol li {
    margin-bottom: 0.75rem;
    color: #444;
    line-height: 1.7;
}

.page-content ul li {
    list-style-type: disc;
}

.page-content ol li {
    list-style-type: decimal;
}

.page-content ul li strong,
.page-content ol li strong {
    color: var(--dark-blue);
    font-weight: 600;
}

.page-content a {
    color: var(--coral-red);
    text-decoration: none;
    transition: color 0.3s ease;
}

.page-content a:hover {
    color: var(--dark-blue);
    text-decoration: underline;
}

.page-content blockquote {
    border-left: 4px solid var(--teal);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #666;
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
}

.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.page-content table th,
.page-content table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.page-content table th {
    background-color: var(--teal);
    color: white;
    font-weight: 600;
}

.page-content table tr:hover {
    background-color: #f8f9fa;
}

.page-content table tr:last-child td {
    border-bottom: none;
}

.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.page-content hr {
    border: none;
    border-top: 2px solid var(--teal);
    margin: 2rem 0;
    opacity: 0.3;
}

.category-products-section {
    padding: 0 0 4rem;
}

/* Sidebar Styles - Professional Clean Design */
.category-sidebar {
    background: #ffffff;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 2rem;
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.sidebar-widget {
    margin-bottom: 0;
    border-bottom: 1px solid #e9ecef;
}

.sidebar-widget:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.sidebar-widget__header {
    background: #ffffff;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.sidebar-widget__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.sidebar-widget__icon {
    display: none;
}

.sidebar-widget__body {
    padding: 1.25rem 1.5rem;
    background: #ffffff;
}

/* Filter Action Buttons */
.sidebar-widget__body #applyFilters,
.sidebar-widget__body #clearFilters {
    display: block;
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.sidebar-widget__body #applyFilters {
    background: var(--coral-red);
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.sidebar-widget__body #applyFilters:hover {
    background: #ff6b6b;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

.sidebar-widget__body #clearFilters {
    background: transparent;
    color: var(--dark-blue);
    text-decoration: none !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.sidebar-widget__body #clearFilters:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--coral-red);
    border-color: var(--coral-red);
}

/* Categories Filter */
.sidebar-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-category {
    margin-bottom: 0.5rem;
}

.sidebar-category:last-child {
    margin-bottom: 0;
}

.sidebar-category__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    color: #495057;
    text-decoration: none;
    border-radius: 0;
    transition: all 0.2s ease;
    font-weight: 400;
    position: relative;
    background: transparent;
    border-bottom: 1px solid #f1f3f5;
}

.sidebar-category__link:hover {
    color: var(--coral-red);
    text-decoration: none;
    background: transparent;
}

.sidebar-category__link.active {
    color: var(--coral-red);
    font-weight: 600;
    background: transparent;
}

.sidebar-category__link.active::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--coral-red);
    border-radius: 0 2px 2px 0;
}

.sidebar-category__name {
    font-size: 0.9rem;
    font-weight: inherit;
    line-height: 1.5;
    color: inherit;
    transition: color 0.2s ease;
}

.category-count {
    font-size: 0.85rem;
    opacity: 0.6;
    font-weight: 400;
    color: #6c757d;
    margin-left: 0.5rem;
    transition: opacity 0.2s ease;
}

.sidebar-category__link:hover .category-count,
.sidebar-category__link.active .category-count {
    opacity: 0.8;
    color: inherit;
}

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

.sidebar-category__empty-text {
    color: #adb5bd;
    font-size: 0.9rem;
    font-style: italic;
}

.category-toggle {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.sidebar-category.expanded .category-toggle {
    transform: rotate(180deg);
}

.sidebar-subcategories {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.sidebar-category.expanded .sidebar-subcategories {
    max-height: 300px;
}

.sidebar-subcategory__link {
    display: block;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border-left: 2px solid transparent;
}

.sidebar-subcategory__link:hover {
    color: var(--coral-red);
}

/* ============================================
   Shop Page Sidebar Filters - Search & Load More
   ============================================ */

/* Category/Tag Search Box */
.category-search-box {
    position: relative;
    margin-bottom: 1rem;
}

.category-search-input {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #f8f9fa;
    color: #495057;
    font-weight: 500;
}

.category-search-input::placeholder {
    color: #adb5bd;
    font-weight: 400;
}

.category-search-input:focus {
    outline: none;
    border-color: var(--coral-red);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(233, 92, 103, 0.1);
}

.category-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
    font-size: 14px;
}

.category-search-input:focus + .category-search-icon {
    color: var(--coral-red);
}

/* Categories/Tags List Container - Scrollable */
.categories-list-container {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: max-height 0.3s ease;
    padding-right: 0.5rem;
}

/* Custom Scrollbar */
.categories-list-container::-webkit-scrollbar {
    width: 6px;
}

.categories-list-container::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 10px;
}

.categories-list-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
    transition: background 0.3s ease;
}

.categories-list-container::-webkit-scrollbar-thumb:hover {
    background: var(--coral-red);
}

/* Hide categories/tags when searching or initially hidden */
.sidebar-category.hidden,
.sidebar-category.category-item-hidden {
    display: none !important;
}

.sidebar-category.category-item-hidden.show-item {
    display: block !important;
    animation: fadeIn 0.3s ease;
}

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

/* Checkbox Style for Category/Tag Links */
.sidebar-category__link--checkbox {
    cursor: pointer;
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.sidebar-category__link--checkbox input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--coral-red);
    flex-shrink: 0;
}

.sidebar-category__link--checkbox .sidebar-category__name {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 500;
    color: #495057;
    transition: all 0.3s ease;
}

.sidebar-category__link--checkbox .category-count {
    font-size: 0.85rem;
    opacity: 0.7;
    font-weight: 400;
    margin-left: 0.25rem;
}

.sidebar-category__link--checkbox input[type="checkbox"]:checked ~ .sidebar-category__name {
    color: var(--coral-red);
    font-weight: 600;
}

.sidebar-category__link--checkbox input[type="checkbox"]:checked ~ .sidebar-category__name .category-count {
    opacity: 0.9;
    color: var(--coral-red);
}

.sidebar-category__link--checkbox:hover {
    background-color: rgba(233, 92, 103, 0.05);
}

.sidebar-category__link--checkbox:hover .sidebar-category__name {
    color: var(--coral-red);
}

/* Load More Button */
.btn-load-more-categories {
    background: linear-gradient(135deg, var(--coral-red) 0%, #ff6b6b 100%);
    border: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 12px 24px;
    border-radius: 10px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(233, 92, 103, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-load-more-categories:hover {
    background: linear-gradient(135deg, #ff6b6b 0%, var(--coral-red) 100%);
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.35);
    transform: translateY(-2px);
}

.btn-load-more-categories:active {
    transform: translateY(0);
}

.btn-load-more-categories i {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.btn-load-more-categories.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn-load-more-categories.hide-button {
    display: none;
}

.sidebar-subcategory__link.active {
    color: var(--coral-red);
    background: rgba(255, 107, 107, 0.1);
    border-left-color: var(--coral-red);
    font-weight: 500;
}

/* Price Filter */
.price-filter {
    background: transparent;
    padding: 0;
}

.price-range-display-simple {
    text-align: center;
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.price-display-text {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
}

.price-range-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.price-range-display__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
}

.price-range-display__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-range-display__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-blue);
    line-height: 1;
}

.price-range-display__divider {
    font-size: 1.5rem;
    font-weight: 300;
    color: #adb5bd;
    margin: 0 0.5rem;
}

.price-range-slider {
    position: relative;
    margin-bottom: 1.25rem;
    padding: 0.75rem 0.5rem;
}

.price-range {
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.price-range:hover {
    background: linear-gradient(to right, #dee2e6 0%, #dee2e6 50%, #ced4da 50%, #ced4da 100%);
}

.price-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--coral-red) 0%, #ff6b6b 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(233, 92, 103, 0.4), 0 0 0 4px rgba(233, 92, 103, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 3px solid white;
}

.price-range::-webkit-slider-thumb:hover {
    background: linear-gradient(135deg, #ff6b6b 0%, var(--coral-red) 100%);
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.5), 0 0 0 6px rgba(233, 92, 103, 0.15);
}

.price-range::-webkit-slider-thumb:active {
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(233, 92, 103, 0.4), 0 0 0 3px rgba(233, 92, 103, 0.2);
}

.price-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--coral-red) 0%, #ff6b6b 100%);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(233, 92, 103, 0.4), 0 0 0 4px rgba(233, 92, 103, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.price-range::-moz-range-thumb:hover {
    background: linear-gradient(135deg, #ff6b6b 0%, var(--coral-red) 100%);
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.5), 0 0 0 6px rgba(233, 92, 103, 0.15);
}

.price-range::-moz-range-thumb:active {
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(233, 92, 103, 0.4), 0 0 0 3px rgba(233, 92, 103, 0.2);
}

.price-range::-moz-range-track {
    height: 8px;
    background: linear-gradient(to right, #e9ecef 0%, #e9ecef 50%, #dee2e6 50%, #dee2e6 100%);
    border-radius: 10px;
    border: none;
}

.price-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.price-input {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.3s ease;
}

.price-input:focus {
    outline: none;
    border-color: var(--coral-red);
}

.price-separator {
    color: #6c757d;
    font-weight: 600;
}

.price-filter-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.price-filter-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
}

.price-filter-btn--primary {
    background: var(--coral-red);
    color: white;
}

.price-filter-btn--primary:hover {
    background: #e84a5f;
    color: white;
}

.price-filter-clear-link {
    text-align: center;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.5rem 0;
    display: block;
    transition: color 0.2s ease;
}

.price-filter-clear-link:hover {
    color: var(--coral-red);
    text-decoration: none;
}



/* Brand Filter */
.brand-filter {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.brand-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: #6c757d;
    user-select: none;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.brand-checkbox:hover {
    background: #f8f9fa;
}

.brand-checkbox input[type="checkbox"] {
    display: none;
}

.brand-checkbox .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #e9ecef;
    border-radius: 4px;
    margin-right: 0.75rem;
    position: relative;
    transition: all 0.3s ease;
    background: white;
}

.brand-checkbox input[type="checkbox"]:checked + .checkmark {
    background: var(--coral-red);
    border-color: var(--coral-red);
}

.brand-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
}

.clear-filters-btn {
    width: 100%;
    padding: 0.75rem;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.clear-filters-btn:hover {
    background: #5a6268;
}

/* Products Header */
.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.products-count {
    margin: 0;
    color: #6c757d;
    font-size: 0.95rem;
}

.products-header__right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filter-toggle-btn {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--dark-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-toggle-btn:hover {
    background: #1a2a4a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filter-toggle-btn i {
    font-size: 1rem;
}

.filter-toggle-btn span {
    font-size: 0.9rem;
}

.sort-dropdown {
    position: relative;
}

.sort-select {
    padding: 0.5rem 2rem 0.5rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

.sort-select:focus {
    outline: none;
    border-color: var(--coral-red);
}

.view-toggle {
    display: flex;
    gap: 0.25rem;
}

.view-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #e9ecef;
    background: white;
    color: #6c757d;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-btn:hover,
.view-btn.active {
    border-color: var(--coral-red);
    color: var(--coral-red);
    background: rgba(255, 107, 107, 0.1);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.products-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

.empty-state__icon {
    font-size: 4rem;
    color: var(--teal);
    margin-bottom: 1.5rem;
    opacity: 0.6;
}

.empty-state__text {
    font-size: 1.2rem;
    color: #666;
    margin: 0;
}

/* Pagination */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

.pagination {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.page-item {
    margin: 0;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 1rem;
    color: var(--coral-red);
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.page-link:hover:not(.disabled) {
    background: var(--coral-red);
    color: white;
    border-color: var(--coral-red);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.2);
}

.page-item.active .page-link {
    background: var(--coral-red);
    border-color: var(--coral-red);
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}

.page-item.disabled .page-link {
    color: #adb5bd;
    background: #f8f9fa;
    border-color: #e9ecef;
    cursor: not-allowed;
    opacity: 0.6;
}

.page-item.disabled .page-link:hover {
    transform: none;
    box-shadow: none;
    background: #f8f9fa;
    color: #adb5bd;
    border-color: #e9ecef;
}

/* Search page specific pagination */
.search-results-section .pagination-wrapper {
    margin-top: 2.5rem;
    padding-top: 2rem;
}

/* Responsive pagination */
@media (max-width: 768px) {
    .pagination {
        gap: 0.25rem;
    }

    .page-link {
        min-width: 36px;
        height: 36px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 576px) {
    .pagination-wrapper {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .page-link {
        min-width: 32px;
        height: 32px;
        padding: 0.375rem 0.5rem;
        font-size: 0.8125rem;
    }
}

/* Section Divider */
.section-divider {
    padding: 2rem 0;
    background-color: #f8f9fa;
}

.divider-line {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--coral-red), transparent);
    margin: 0;
    opacity: 0.6;
}

/* Responsive Divider */
@media (max-width: 768px) {
    .section-divider {
        padding: 1.5rem 0;
    }
}

@media (max-width: 576px) {
    .section-divider {
        padding: 1rem 0;
    }
}

/* Filter Drawer Styles */
.filter-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    pointer-events: none;
}

.filter-drawer.active {
    display: block;
    pointer-events: auto;
}

.filter-drawer__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

.filter-drawer.active .filter-drawer__overlay {
    opacity: 1;
}

.filter-drawer__content {
    position: absolute;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 400px;
    height: 100%;
    background: #ffffff;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.filter-drawer.active .filter-drawer__content {
    right: 0;
}

.filter-drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.filter-drawer__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin: 0;
}

.filter-drawer__close {
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.filter-drawer__close:hover {
    color: var(--coral-red);
    background: rgba(233, 92, 103, 0.1);
}

.filter-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
}

.filter-drawer__body .category-sidebar {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
}

.filter-drawer__body .sidebar-widget {
    margin-bottom: 1.5rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.filter-drawer__body .sidebar-widget:last-child {
    margin-bottom: 0;
}

/* Category Page Responsive */
@media (max-width: 992px) {
    .category-sidebar {
        position: static;
        margin-bottom: 2rem;
    }

    .products-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .products-header__right {
        width: 100%;
        justify-content: space-between;
    }

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

@media (max-width: 768px) {
    .category-sidebar-desktop {
        display: none;
    }

    .filter-toggle-btn {
        display: flex;
    }

    .products-header__right {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .products-header {
        padding: 1rem;
    }

    .products-count {
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .filter-toggle-btn {
        padding: 0.65rem 1rem;
        font-size: 0.85rem;
    }

    .filter-toggle-btn span {
        font-size: 0.85rem;
    }

    .filter-drawer__content {
        width: 90%;
        max-width: 350px;
    }

    .filter-drawer__header {
        padding: 1.25rem;
    }

    .filter-drawer__title {
        font-size: 1.1rem;
    }

    .filter-drawer__body {
        padding: 0.75rem;
    }
}

@media (max-width: 768px) {
    .page-header {
        padding: 1.5rem 0 1.25rem;
        margin-bottom: 2rem;
        min-height: 120px;
    }

    .page-header__title,
    .page-title {
        font-size: 1.625rem;
    }

    .page-header__subtitle,
    .page-subtitle {
        font-size: 0.9375rem;
        margin-top: 0.5rem;
    }

    .page-content-section {
        padding: 3rem 0;
    }

    .page-content-wrapper {
        padding: 0 1.5rem;
    }

    .page-content h2 {
        font-size: 1.75rem;
    }

    .page-content h3 {
        font-size: 1.4rem;
    }

    .category-sidebar {
        padding: 1.5rem;
    }

    .sidebar-widget {
        margin-bottom: 2rem;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .page-header {
        padding: 1.25rem 0 1rem;
        margin-bottom: 1.5rem;
        min-height: 110px;
    }

    .page-header__title,
    .page-title {
        font-size: 1.5rem;
    }

    .page-header__subtitle,
    .page-subtitle {
        font-size: 0.875rem;
        margin-top: 0.375rem;
    }

    .page-header .breadcrumb-item {
        font-size: 0.8rem;
    }

    .page-header__breadcrumb {
        margin-bottom: 0.5rem;
    }

    .page-content-section {
        padding: 2.5rem 0;
    }

    .page-content-wrapper {
        padding: 0 1rem;
    }

    .page-content {
        font-size: 1rem;
    }

    .page-content h2 {
        font-size: 1.6rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .page-content h3 {
        font-size: 1.3rem;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .page-content h4 {
        font-size: 1.1rem;
        margin-top: 1.25rem;
    }

    .page-content ul,
    .page-content ol {
        padding-left: 1.5rem;
    }

    .page-content table {
        font-size: 0.9rem;
    }

    .page-content table th,
    .page-content table td {
        padding: 0.75rem 0.5rem;
    }

    .category-sidebar {
        padding: 1rem;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .products-header {
        padding: 1rem;
    }

    .sort-select {
        font-size: 0.85rem;
        padding: 0.4rem 1.5rem 0.4rem 0.75rem;
    }

    .view-btn {
        width: 35px;
        height: 35px;
    }
}

/* Brands Page Styles */
.brands-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.brands-category {
    margin-bottom: 4rem;
}

.brands-category__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
}

.brands-category__title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--coral-red);
    border-radius: 2px;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.brands-grid--all {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.brand-item {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-align: center;
}

.brand-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.brand-item--featured {
    grid-column: span 1;
    border: 2px solid var(--coral-red);
    position: relative;
}

.brand-item--featured::before {
    content: 'Featured';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--coral-red);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.brand__logo {
    margin-bottom: 1.5rem;
}

.brand__img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #f8f9fa;
}

.brand__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1rem;
}

.brand__description {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.brand__stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.brand__products {
    font-weight: 600;
    color: var(--dark-blue);
}

.brand__rating {
    color: #ffc107;
    font-weight: 600;
}

.brand__btn {
    display: inline-block;
    background: var(--coral-red);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.brand__btn:hover {
    background: #ff6b6b;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

.brand-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.brand-category {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.brand-category h3 {
    color: var(--dark-blue);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--coral-red);
}

.brand-category__brands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.brand-category__brands span {
    background: #f8f9fa;
    color: var(--dark-blue);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.brand-category__brands span:hover {
    background: var(--coral-red);
    color: white;
    cursor: pointer;
}

/* Responsive adjustments for brands page */
@media (max-width: 768px) {
    .brands-grid {
        grid-template-columns: 1fr;
    }

    .brands-grid--all {
        grid-template-columns: 1fr;
    }

    .brand-item--featured {
        grid-column: span 1;
    }

    .brand-categories {
        grid-template-columns: 1fr;
    }

    .brand__stats {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Product Details Page Styles */
.product-details-section {
    padding: 3rem 0 4rem;
    background: #f8f9fa;
}

.product-details-section .row {
    margin-bottom: 0;
}

.product-details-section .row + .row {
    margin-top: 3rem;
}

.product-images {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-main-image {
    position: relative;
    margin-bottom: 0;
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    max-height: 600px;
}

.product-main-image img {
    max-height: 600px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.main-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    background: #f8f9fa;
}

.main-img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.main-img.fade-in {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

.product-thumbnails {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.thumbnail-item {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.thumbnail-item.active {
    border-color: var(--coral-red);
}

.thumbnail-item:hover {
    border-color: var(--coral-red);
    transform: scale(1.05);
}

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

.product-info {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: fit-content;
}

/* Sticky Product Info (Desktop Only) */
@media (min-width: 992px) {
    .product-info {
        position: sticky;
        top: 100px;
        transition: all 0.3s ease;
    }
}

.product-info > *:first-child {
    margin-top: 0;
}

.product-info > *:last-child {
    margin-bottom: 0;
}

.product-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1.25rem;
    line-height: 1.3;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.stars {
    color: #ffc107;
    font-size: 1rem;
}

.rating-text {
    font-weight: 600;
    color: var(--dark-blue);
}

.reviews-count {
    color: #6c757d;
    font-size: 0.9rem;
}

.product-price {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.current-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--coral-red);
}

.old-price {
    font-size: 1.1rem;
    color: #6c757d;
    text-decoration: line-through;
}

.discount {
    background: var(--coral-red);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Stock Status */
.product-stock-status {
    margin-bottom: 1rem;
}

.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.stock-badge--in-stock {
    background: #d4edda;
    color: #155724;
}

.stock-badge--low {
    background: #fff3cd;
    color: #856404;
}

.stock-badge--out-of-stock {
    background: #f8d7da;
    color: #721c24;
}

.stock-badge i {
    font-size: 0.9rem;
}

.product-description {
    margin: 1.25rem 0 1.5rem;
    color: #6c757d;
    line-height: 1.7;
    padding: 1rem 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}

.product-options {
    margin: 1.5rem 0;
}

.option-group {
    margin-bottom: 1rem;
}

.option-label {
    display: block;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.quantity-hint {
    display: block;
    margin-top: 0.5rem;
    color: #6c757d;
    font-size: 0.85rem;
}

.color-options {
    display: flex;
    gap: 0.5rem;
}

.color-option {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.color-option.active {
    border-color: var(--coral-red);
    transform: scale(1.1);
}

.color-option:hover {
    border-color: var(--coral-red);
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    width: fit-content;
}

.qty-btn {
    background: #f8f9fa;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.qty-btn:hover {
    background: #e9ecef;
}

#quantity,
.qty-input {
    border: none;
    text-align: center;
    width: 60px;
    padding: 0.5rem;
    font-size: 1rem;
    outline: none;
    /* Remove number input spinners */
    -moz-appearance: textfield;
}

#quantity::-webkit-outer-spin-button,
#quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product-actions {
    display: flex;
    gap: 0.75rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.9rem;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--coral-red);
    color: white;
}

.btn-primary:hover {
    background: #ff6b6b;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

.btn-outline-primary {
    background: transparent;
    color: var(--coral-red);
    border: 2px solid var(--coral-red);
}

.btn-outline-primary:hover {
    background: var(--coral-red);
    color: white;
    transform: translateY(-2px);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.product-meta {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

.product-meta .meta-item:last-child {
    margin-bottom: 0;
}

.meta-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.meta-label {
    font-weight: 600;
    color: var(--dark-blue);
}

.meta-value {
    color: #6c757d;
}

.meta-link {
    color: var(--coral-red);
    text-decoration: none;
    transition: all 0.3s ease;
}

.meta-link:hover {
    color: var(--dark-blue);
    text-decoration: underline;
}

/* Product Tags */
.product-tags {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tag-link {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: #f8f9fa;
    color: var(--dark-blue);
    border-radius: 20px;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.tag-link:hover {
    background: var(--coral-red);
    color: white;
    border-color: var(--coral-red);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(233, 92, 103, 0.3);
}

/* Social Sharing */
.product-social-share {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.share-label {
    font-weight: 600;
    color: var(--dark-blue);
    font-size: 0.85rem;
}

.share-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.share-btn--facebook {
    background: #1877f2;
}

.share-btn--facebook:hover {
    background: #166fe5;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(24, 119, 242, 0.3);
}

.share-btn--twitter {
    background: #1da1f2;
}

.share-btn--twitter:hover {
    background: #1a91da;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(29, 161, 242, 0.3);
}

.share-btn--whatsapp {
    background: #25d366;
}

.share-btn--whatsapp:hover {
    background: #22c55e;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(37, 211, 102, 0.3);
}

.share-btn--email {
    background: #6c757d;
}

.share-btn--email:hover {
    background: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.share-btn--copy {
    background: var(--coral-red);
}

.share-btn--copy:hover {
    background: #ff6b6b;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(233, 92, 103, 0.3);
}

/* Product Tabs */
.product-tabs {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-top: 2rem;
    position: relative;
}

.nav-tabs {
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    display: flex;
    flex-wrap: nowrap;
    position: relative;
}

.nav-tabs .nav-link {
    border: none;
    color: #6c757d;
    font-weight: 600;
    padding: 0.875rem 1.5rem;
    border-radius: 0;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.nav-tabs .nav-link:hover {
    color: var(--coral-red);
    background: rgba(233, 92, 103, 0.05);
}

.nav-tabs .nav-link.active {
    background: white;
    color: var(--coral-red);
    border-bottom: 3px solid var(--coral-red);
}

/* Scroll Indicators for Tabs */
.product-tabs::before,
.product-tabs::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-tabs::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95), transparent);
}

.product-tabs::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), transparent);
}

.product-tabs.scrollable-left::before,
.product-tabs.scrollable-right::after {
    opacity: 1;
}

/* Hide indicators on desktop where tabs don't scroll */
@media (min-width: 769px) {
    .product-tabs::before,
    .product-tabs::after {
        display: none;
    }
}

.tab-content-body {
    padding: 2rem;
    min-height: 200px;
}

.tab-content-body h3 {
    color: var(--dark-blue);
    margin-bottom: 0.875rem;
    font-size: 1.5rem;
}

.tab-content-body h4 {
    color: var(--dark-blue);
    margin: 1.25rem 0 0.875rem;
    font-size: 1.25rem;
}

.tab-content-body p {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 0.875rem;
    font-size: 0.95rem;
}

.tab-content-body ul {
    color: #6c757d;
    line-height: 1.6;
}

.tab-content-body li {
    margin-bottom: 0.5rem;
}

/* Specifications Table */
.specs-table {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.spec-label {
    font-weight: 600;
    color: var(--dark-blue);
}

.spec-value {
    color: #6c757d;
}

/* Reviews */
.reviews-summary {
    margin-bottom: 1.5rem;
    text-align: center;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.overall-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.rating-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--coral-red);
}

.rating-stars {
    color: #ffc107;
    font-size: 1.25rem;
}

.total-reviews {
    color: #6c757d;
    font-size: 0.9rem;
}

.review-item {
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}

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

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.reviewer-name {
    font-weight: 600;
    color: var(--dark-blue);
    font-size: 0.95rem;
}

.review-rating {
    color: #ffc107;
    font-size: 0.9rem;
}

.review-date {
    color: #6c757d;
    font-size: 0.85rem;
}

.review-content p {
    color: #6c757d;
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

/* Related Products */
.related-products {
    margin-top: 3rem;
    padding: 2.5rem 0 0;
}

.related-products .row {
    margin-left: -15px;
    margin-right: -15px;
}

.related-products .row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
}

.related-products .cute-stationery__item {
    margin: 0;
    height: 100%;
}

/* Ensure consistent sizing in all carousels */
.owl-carousel .owl-item .cute-stationery__item {
    margin: 0;
    width: 100%;
}

.related-products__header {
    margin-bottom: 2.5rem;
}

.related-products__title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark-blue);
    margin-bottom: 0;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-blue);
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--coral-red);
    border-radius: 2px;
}

/* Responsive adjustments for product details page */
@media (max-width: 768px) {
    .product-details-section {
        padding: 2rem 0 3rem;
    }

    .product-details-section .row + .row {
        margin-top: 2rem;
    }

    .product-images {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .product-main-image {
        min-height: 350px;
        max-height: 500px;
    }

    .product-main-image img {
        max-height: 400px;
    }

    .product-info {
        padding: 1.5rem;
        position: static !important;
    }

    .product-tabs {
        margin-top: 1.5rem;
        border-radius: 12px;
        overflow: visible;
    }

    .product-tabs::before,
    .product-tabs::after {
        display: block;
    }

    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--coral-red) transparent;
        padding: 0.5rem 0;
        margin: 0;
        border-bottom: 2px solid #eee;
        scroll-behavior: smooth;
    }

    .nav-tabs::-webkit-scrollbar {
        height: 4px;
    }

    .nav-tabs::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-tabs::-webkit-scrollbar-thumb {
        background: var(--coral-red);
        border-radius: 2px;
    }

    .nav-tabs::-webkit-scrollbar-thumb:hover {
        background: #d14a54;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .nav-tabs .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        min-width: fit-content;
        min-height: 44px;
        white-space: nowrap;
        border-radius: 8px 8px 0 0;
        margin-right: 0.5rem;
        transition: all 0.3s ease;
    }

    .nav-tabs .nav-link.active {
        border-bottom: 3px solid var(--coral-red);
        background: white;
    }

    .tab-content-body {
        padding: 1.5rem;
    }

    .tab-content-body h3 {
        font-size: 1.35rem;
    }

    .tab-content-body h4 {
        font-size: 1.15rem;
    }

    .tab-content-body p,
    .tab-content-body li {
        font-size: 0.9rem;
    }

    .product-title {
        font-size: 1.5rem;
    }

    .product-rating {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .product-price {
        margin-bottom: 1.25rem;
    }

    .current-price {
        font-size: 1.75rem;
    }

    .product-stock-status {
        margin-bottom: 1.25rem;
    }

    .stock-badge {
        font-size: 0.85rem;
        padding: 0.4rem 0.75rem;
    }

    .related-products__title {
        font-size: 1.8rem;
    }

    .related-products {
        padding: 2rem 0 0;
        margin-top: 2.5rem;
    }

    .related-products__header {
        margin-bottom: 2rem;
    }

    .product-actions {
        flex-direction: column;
        margin: 1.5rem 0;
    }

    .product-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .product-thumbnails {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .thumbnail-item {
        width: 70px;
        height: 70px;
    }

    .product-social-share {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-top: 1.25rem;
        padding-top: 1.25rem;
    }

    .share-buttons {
        width: 100%;
        justify-content: flex-start;
    }

    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .review-form__row {
        flex-direction: column;
        gap: 0;
    }

    .review-form__col {
        margin-bottom: 1rem;
    }

    .review-form__col:last-child {
        margin-bottom: 0;
    }

    .spec-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .nav-tabs .nav-link {
        padding: 0.65rem 0.85rem;
        font-size: 0.8rem;
        font-weight: 500;
        min-height: 44px;
    }

    .tab-content-body {
        padding: 1.25rem;
    }

    .tab-content-body h3 {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }

    .tab-content-body h4 {
        font-size: 1.1rem;
        margin: 1rem 0 0.75rem;
    }

    .tab-content-body p,
    .tab-content-body li {
        font-size: 0.875rem;
        line-height: 1.6;
        margin-bottom: 0.75rem;
    }

    .product-tabs::before,
    .product-tabs::after {
        width: 20px;
    }
}

/* Cart Page Styles */
.cart-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.cart-table-wrapper {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    overflow-x: auto;
    display: flex;
    flex-direction: column;
}

.cart-table-container {
    overflow-y: auto;
    max-height: 600px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.cart-table-container::-webkit-scrollbar {
    width: 8px;
}

.cart-table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.cart-table-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.cart-table-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.cart-table-container .cart-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.cart-totals-wrapper {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #e9ecef;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
}

.cart-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

.cart-table th {
    padding: 1.5rem 1rem;
    font-weight: 700;
    color: var(--dark-blue);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.cart-table th:nth-child(1) {
    text-align: left;
}

.cart-table th:nth-child(2),
.cart-table th:nth-child(3),
.cart-table th:nth-child(4) {
    text-align: center;
}

.cart-table th:nth-child(5) {
    text-align: center;
    width: 80px;
}

.cart-table tbody tr {
    border-bottom: 1px solid #e9ecef;
}

.cart-table tbody tr:last-child {
    border-bottom: none;
}

.cart-item {
    transition: background-color 0.3s ease;
}

.cart-item:hover {
    background-color: #f8f9fa;
}

.cart-item__product {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1rem;
    min-width: 300px;
    vertical-align: middle;
}

.cart-item__image {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f8f9fa;
    position: relative;
}

.cart-item__image a {
    display: block;
    width: 100%;
    height: 100%;
}

.cart-item__image .image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.cart-item__info {
    flex: 1;
}

.cart-item__name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
    font-family: 'Oswald', sans-serif;
    line-height: 1.4;
}

.cart-item__name-link {
    color: var(--dark-blue);
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    max-height: 2.8em;
}

.cart-item__name-link:hover {
    color: var(--coral-red);
    text-decoration: none;
}

.cart-item__sku {
    font-size: 0.85rem;
    color: #6c757d;
    display: block;
    margin-bottom: 0.25rem;
}

.cart-item__attributes {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 0.5rem;
}

.cart-item__price {
    padding: 1.5rem 1rem;
    text-align: center;
    vertical-align: middle;
    min-width: 120px;
}

.cart-item__price .price-current {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--coral-red);
    margin-bottom: 0.25rem;
}

.cart-item__price .price-old {
    display: block;
    font-size: 0.85rem;
    color: #6c757d;
    text-decoration: line-through;
}

.cart-item__quantity {
    padding: 1.5rem 1rem;
    text-align: center;
    vertical-align: middle;
    min-width: 150px;
}

/* Desktop: Ensure table cells display correctly */
.cart-table-container .cart-table tbody td {
    display: table-cell;
}

.cart-table-container .cart-item__pricing-group {
    display: none;
}

.cart-item__subtotal {
    padding: 1.5rem 1rem;
    text-align: center;
    vertical-align: middle;
    min-width: 120px;
}

.subtotal-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-blue);
}

.cart-item__remove {
    padding: 1.5rem 1rem;
    text-align: center;
    vertical-align: middle;
    width: 80px;
}

.remove-btn {
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.remove-btn:hover {
    background: rgba(233, 92, 103, 0.1);
    color: var(--coral-red);
    transform: rotate(90deg);
}


.cart-totals-row {
    background-color: #f8f9fa;
    border-top: 2px solid #e9ecef;
}

.cart-totals-row td {
    padding: 1.5rem 1rem;
    text-align: center;
    vertical-align: middle;
}

.cart-totals-quantity {
    font-size: 1rem;
    color: var(--dark-blue);
    font-weight: 600;
    text-align: left;
}

.cart-totals-quantity strong {
    color: var(--dark-blue);
    font-weight: 700;
}

.cart-totals-total {
    font-size: 1.15rem;
    color: var(--dark-blue);
    font-weight: 600;
    text-align: right;
}

.cart-totals-total strong {
    color: var(--dark-blue);
    font-weight: 700;
}

.cart-total-price {
    color: var(--coral-red);
    font-size: 1.4rem;
    font-weight: 700;
}

.cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
    width: 100%;
}

.cart-actions .continue-shopping-btn {
    order: 1;
}

.cart-actions .checkout-btn {
    order: 2;
}

.continue-shopping-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--dark-blue);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.continue-shopping-btn:hover {
    color: var(--coral-red);
    text-decoration: none;
    transform: translateX(-5px);
}

.checkout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    color: white;
    text-decoration: none;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(233, 92, 103, 0.3);
}

.checkout-btn:hover {
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.4);
}

.checkout-btn i {
    font-size: 1rem;
}

.update-cart-btn {
    background: var(--dark-blue);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.update-cart-btn:hover {
    background: #2c3e50;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(55, 78, 148, 0.3);
}

.cart-summary {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 2rem;
}

.cart-summary__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
    font-family: 'Oswald', sans-serif;
}

.cart-summary__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
}

.cart-summary__item:last-of-type {
    border-bottom: 2px solid #e9ecef;
}

.cart-summary__item--total {
    border-bottom: none;
    margin-top: 0.5rem;
    padding-top: 1.5rem;
}

.summary-label {
    font-size: 1rem;
    color: #6c757d;
    font-weight: 500;
}

.cart-summary__item--total .summary-label {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-blue);
}

.summary-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-blue);
}

.cart-summary__item--total .summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--coral-red);
}

.cart-summary__coupon {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

.coupon-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 1rem;
}

.coupon-form {
    display: flex;
    gap: 0.5rem;
}

.coupon-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}

.coupon-input:focus {
    outline: none;
    border-color: var(--coral-red);
}

.coupon-btn {
    background: var(--dark-blue);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.coupon-btn:hover {
    background: #2c3e50;
    transform: translateY(-2px);
}

.cart-summary__checkout {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}


/* Cart Quantity Selector */
.cart-item__quantity .quantity-selector {
    display: flex;
    align-items: center;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
    margin: 0 auto;
}

.cart-item__quantity .qty-btn {
    background: #f8f9fa;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-blue);
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item__quantity .qty-btn:hover {
    background: var(--coral-red);
    color: white;
}

.cart-item__quantity .qty-input {
    border: none;
    text-align: center;
    width: 60px;
    padding: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-blue);
    background: white;
    /* Remove number input spinners */
    -moz-appearance: textfield;
}

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

.cart-item__quantity .quantity-selector.loading {
    position: relative;
    pointer-events: none;
}

.cart-item__quantity .quantity-selector.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid #e9ecef;
    border-top-color: var(--coral-red);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    z-index: 10;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.cart-item__quantity .qty-input:focus {
    outline: none;
}

/* Breadcrumb Styles for Cart Page */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: white;
    text-decoration: underline;
}

.breadcrumb span {
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive Cart Page */
@media (max-width: 992px) {
    .cart-item__product {
        min-width: 250px;
    }

    .cart-summary {
        position: static;
        margin-top: 2rem;
    }

    .cart-actions {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .cart-actions .continue-shopping-btn,
    .cart-actions .checkout-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .cart-section {
        padding: 2rem 0;
    }

    .cart-table-wrapper {
        padding: 1rem;
    }

    .cart-table {
        font-size: 0.9rem;
    }

    .cart-table th {
        font-size: 0.85rem;
        padding: 0.75rem 0.5rem;
    }

    .cart-item__product {
        flex-direction: column;
        align-items: flex-start;
        min-width: 200px;
        padding: 1rem 0.5rem;
    }

    .cart-item__image {
        width: 80px;
        height: 80px;
    }

    .cart-item__name {
        font-size: 1rem;
    }

    .cart-item__price,
    .cart-item__quantity,
    .cart-item__subtotal,
    .cart-item__remove {
        padding: 1rem 0.5rem;
    }

    .cart-item__price .price-current {
        font-size: 1.1rem;
    }

    .subtotal-price {
        font-size: 1.1rem;
    }

    .cart-summary {
        padding: 1.5rem;
    }

    .cart-summary__title {
        font-size: 1.3rem;
    }

    .summary-value {
        font-size: 1rem;
    }

    .cart-summary__item--total .summary-value {
        font-size: 1.3rem;
    }

    .coupon-form {
        flex-direction: column;
    }

    .coupon-btn {
        width: 100%;
    }
}

/* Mobile Header */
.cart-mobile-header {
    background: white;
    padding: 1rem;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 0.75rem;
    border-radius: 12px 12px 0 0;
}

.cart-mobile-header__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin: 0 0 0.25rem 0;
}

.cart-mobile-header__count {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Mobile Scrollable Container */
.cart-items-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 350px);
    min-height: 200px;
}

.cart-items-container::-webkit-scrollbar {
    width: 4px;
}

.cart-items-container::-webkit-scrollbar-track {
    background: transparent;
}

.cart-items-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.cart-items-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Mobile Totals (Sticky) */
.cart-totals-mobile {
    background: white;
    padding: 1rem;
    border-top: 2px solid #e9ecef;
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    margin-top: 0.75rem;
}

.cart-totals-mobile__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}

.cart-totals-mobile__row:first-child {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.cart-totals-mobile__row strong {
    font-weight: 700;
    color: var(--dark-blue);
}

.cart-totals-mobile__row .cart-total-price {
    font-size: 1.4rem;
    color: var(--coral-red);
}

/* Mobile Actions (Sticky) */
.cart-actions-mobile {
    background: white;
    padding: 1rem;
    border-top: 1px solid #e9ecef;
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0;
}

.cart-actions-mobile .continue-shopping-btn,
.cart-actions-mobile .checkout-btn {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
}

@media (max-width: 576px) {
    .cart-section {
        padding: 1rem 0;
    }

    .cart-table-wrapper {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        background: #f8f9fa;
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 200px);
    }

    .cart-table thead {
        display: none;
    }

    .cart-table tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 0.75rem;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        position: relative;
        overflow: hidden;
    }

    .cart-item__product {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0 0 0.5rem 0;
        margin-bottom: 0.5rem;
        position: relative;
    }

    .cart-item__product:before {
        display: none;
    }

    .cart-item__image {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        border-radius: 8px;
        overflow: hidden;
        background: #f8f9fa;
    }

    .cart-item__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .cart-item__info {
        flex: 1;
        min-width: 0;
        padding-right: 2.5rem;
    }

    .cart-item__name {
        font-size: 0.9rem;
        margin-bottom: 0.2rem;
        padding-right: 0;
        line-height: 1.3;
    }

    .cart-item__name-link {
        color: var(--dark-blue);
        text-decoration: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cart-item__sku {
        font-size: 0.75rem;
        color: #6c757d;
    }

    .cart-item__remove {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0;
        width: auto;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        z-index: 1;
    }

    .cart-item__remove:before {
        display: none;
    }

    .cart-item__remove .remove-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
        background: rgba(233, 92, 103, 0.1);
        color: var(--coral-red);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* Compact Pricing Group */
    .cart-item__pricing-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0;
        border-top: 1px solid #e9ecef;
    }

    /* Mobile: Show pricing group, hide individual columns */
    .cart-items-container .cart-item__price,
    .cart-items-container .cart-item__quantity,
    .cart-items-container .cart-item__subtotal {
        display: none;
    }

    .cart-items-container .cart-item__pricing-group {
        display: flex;
        width: 100%;
        padding: 0.5rem 0;
        border-bottom: 1px solid #e9ecef;
    }

    .cart-items-container .cart-item__pricing-group:before {
        display: none;
    }

    .cart-items-container .cart-item__pricing-group-inner {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        width: 100%;
    }

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

    .cart-items-container .cart-item__quantity {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .cart-items-container .cart-item__subtotal {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
        padding-top: 0.5rem;
        width: 100%;
        border-top: 1px solid #e9ecef;
        margin-top: 0.5rem;
    }

    /* Optimize image + product name section for smaller screens */
    @media (max-width: 420px) {
        .cart-item__product {
            gap: 0.6rem;
            padding-bottom: 0.4rem;
            margin-bottom: 0.4rem;
        }

        .cart-item__image {
            width: 55px;
            height: 55px;
        }

        .cart-item__name {
            font-size: 0.85rem;
        }
    }

    /* Mobile table structure */
    .cart-items-container .cart-table tbody tr {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .cart-items-container .cart-table tbody td {
        display: flex;
        width: 100%;
    }

    .cart-summary {
        padding: 1rem;
    }
}

/* Checkout Page Styles */
.checkout-section {
    padding: 4rem 0;
    background: #f8f9fa;
    min-height: 70vh;
}

.checkout-form {
    background: transparent;
}

.checkout-block {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.checkout-block--compact {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.checkout-block--notes {
    margin-top: 1rem;
}

.checkout-block--notes .form-group--full {
    width: 100%;
}

.checkout-block--notes textarea {
    width: 100%;
    resize: vertical;
}

.checkout-block__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
    font-family: 'Oswald', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.checkout-block__title i {
    font-size: 1.3rem;
    color: var(--coral-red);
}

.checkout-block__title-optional {
    font-size: 0.9rem;
    font-weight: 400;
    color: #6c757d;
    font-style: italic;
}

.checkout-block__header-compact {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.checkout-block__header-compact .checkout-block__title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 1.3rem;
}

.checkout-block__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.checkout-block__header .checkout-block__title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.checkout-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.checkout-form__grid--compact {
    gap: 1rem;
}

.form-group--full {
    grid-column: 1 / -1;
}

.checkbox-label--prominent {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px solid #e9ecef;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.checkbox-label--prominent:hover {
    background: #e9ecef;
    border-color: var(--coral-red);
}

.checkbox-label--prominent input[type="checkbox"]:checked + .checkmark + .checkbox-label__text {
    color: var(--coral-red);
    font-weight: 600;
}

.checkbox-label--prominent input[type="checkbox"]:checked ~ .checkmark {
    background-color: var(--coral-red);
    border-color: var(--coral-red);
}

.checkbox-label__text {
    font-weight: 500;
    color: var(--dark-blue);
    font-size: 0.95rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--dark-blue);
    font-size: 0.95rem;
}

.form-label .required {
    color: var(--coral-red);
    margin-left: 0.25rem;
}

.form-input,
select.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f8f9fa;
    font-family: inherit;
}

select.form-input,
.form-input[type="select"],
.form-input select,
select.form-input:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.75rem;
    background-color: #f8f9fa;
    cursor: pointer;
}

.form-input:focus {
    outline: none;
    border-color: var(--coral-red);
    background: white;
    box-shadow: 0 0 0 3px rgba(233, 92, 103, 0.1);
}

select.form-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    background-color: white;
}

.form-input:read-only,
.form-input[readonly] {
    background: #f8f9fa;
    cursor: not-allowed;
    opacity: 0.8;
}

.form-input:read-only:focus,
.form-input[readonly]:focus {
    border-color: #e9ecef;
    box-shadow: none;
}

.shipping-details {
    margin-top: 1.5rem;
}

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

.payment-method {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.payment-method:hover {
    border-color: var(--coral-red);
}

.payment-method input[type="radio"] {
    display: none;
}

.payment-method input[type="radio"]:checked + .payment-method__label {
    background: rgba(233, 92, 103, 0.1);
    color: var(--coral-red);
}

.payment-method input[type="radio"]:checked ~ .payment-method__content {
    display: block;
}

.payment-method__label {
    display: block;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
}

.payment-method__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    color: var(--dark-blue);
    font-size: 1.1rem;
}

.payment-method__header i {
    font-size: 1.5rem;
    color: var(--coral-red);
}

.payment-method input[type="radio"]:checked + .payment-method__label .payment-method__header {
    color: var(--coral-red);
}

.payment-method__content {
    display: none;
    padding: 1.5rem;
    background: #f8f9fa;
    border-top: 2px solid #e9ecef;
}

.payment-method:first-child .payment-method__content,
.payment-method input[type="radio"]:checked ~ .payment-method__content {
    display: block;
}

.payment-method__info {
    color: #6c757d;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}

/* Order Summary */
.order-summary {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 2rem;
    margin-bottom: 2rem;
}

.order-summary::-webkit-scrollbar {
    width: 6px;
}

.order-summary::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.order-summary::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.order-summary::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.order-summary__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e9ecef;
    font-family: 'Oswald', sans-serif;
}

/* Order Items */
.order-items {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 10px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.order-item:hover {
    background: #ffffff;
    border-color: var(--coral-red);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.order-item:last-child {
    margin-bottom: 0;
}

.order-item__image {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.order-item__image:hover {
    border-color: var(--coral-red);
    transform: scale(1.05);
}

.order-item__image a {
    display: block;
    width: 100%;
    height: 100%;
}

.order-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.order-item__info {
    flex: 1;
}

.order-item__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin: 0;
    font-family: 'Oswald', sans-serif;
    line-height: 1.4;
}

.order-item__name a {
    color: var(--dark-blue);
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.order-item__name a:hover {
    color: var(--coral-red);
    text-decoration: none;
}

.order-item__price-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.order-item__price {
    font-weight: 600;
    color: var(--dark-blue);
    font-size: 0.9rem;
}

.order-item__price-total {
    font-weight: 700;
    color: var(--coral-red);
    font-size: 1rem;
}

/* Order Totals */
.order-totals {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
}

.order-totals__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 0.95rem;
    border-bottom: 1px solid #e9ecef;
}

.order-totals__item:not(.order-totals__item--total):last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.order-totals__label {
    color: #6c757d;
    font-weight: 500;
}

.order-totals__value {
    font-weight: 600;
    color: var(--dark-blue);
}

.order-totals__item--total {
    border-top: 2px solid #dee2e6;
    border-bottom: none;
    margin-top: 1rem;
    padding-top: 1rem;
    padding-bottom: 0;
    font-size: 1.1rem;
}

.order-totals__item--total .order-totals__label {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-blue);
}

.order-totals__item--total .order-totals__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--coral-red);
}

/* Order Coupon */
.order-coupon {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
}

.order-coupon .form-label {
    margin-bottom: 0.75rem;
}

.order-coupon {
    background: #f8f9fa;
    padding: 1.25rem;
    border-radius: 12px;
    border: 2px dashed #dee2e6;
}

.order-coupon .form-label {
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.75rem;
}

.order-coupon .coupon-form-inline {
    display: block;
}

.order-coupon .coupon-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.order-coupon .coupon-input {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-right: 100px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: white;
}

.order-coupon .coupon-input--with-button {
    padding-right: 100px;
}

.order-coupon .coupon-input:focus {
    outline: none;
    border-color: var(--coral-red);
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.1);
}

.order-coupon .coupon-input[readonly] {
    background: #f8f9fa;
    cursor: not-allowed;
}

.order-coupon .coupon-btn-inline {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--dark-blue) 0%, #2d3d75 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.order-coupon .coupon-btn-inline:hover:not(:disabled) {
    background: #2c3e50;
    transform: translateY(-50%) translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.order-coupon .coupon-btn-inline:disabled {
    background: #ced4da;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.order-coupon .coupon-btn-inline[type="submit"] {
    background: var(--coral-red);
}

.order-coupon .coupon-btn-inline[type="submit"]:hover:not(:disabled) {
    background: #e63946;
}

/* Place Order Button */
.place-order-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(233, 92, 103, 0.3);
    margin-bottom: 1rem;
}

.place-order-btn:hover {
    background: linear-gradient(135deg, #ff6b6b, var(--coral-red));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.4);
}

.place-order-btn i {
    font-size: 1rem;
}

/* Order Security */
.order-security {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6c757d;
    text-align: center;
    justify-content: center;
}

.order-security i {
    color: var(--coral-red);
    font-size: 1rem;
}

/* Checkout Review Modal */
.checkout-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.checkout-modal.active {
    display: flex;
}

.checkout-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.checkout-modal__content {
    position: relative;
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.checkout-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 2px solid #e9ecef;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    border-radius: 20px 20px 0 0;
}

.checkout-modal__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin: 0;
    font-family: 'Oswald', sans-serif;
}

.checkout-modal__close {
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6c757d;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.checkout-modal__close:hover {
    background: #f8f9fa;
    color: var(--coral-red);
    transform: rotate(90deg);
}

.checkout-modal__body {
    padding: 2rem;
}

.checkout-modal__step {
    display: block;
}

.checkout-modal__section-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.checkout-modal__items {
    margin-bottom: 1.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.checkout-modal__item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.checkout-modal__item:last-child {
    border-bottom: none;
}

.checkout-modal__item-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.checkout-modal__item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.checkout-modal__item-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.checkout-modal__item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #6c757d;
}

.checkout-modal__item-total {
    font-weight: 600;
    color: var(--dark-blue);
}

.checkout-modal__totals {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.checkout-modal__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 0.95rem;
    color: #495057;
}

.checkout-modal__total-row--discount {
    color: var(--coral-red);
    font-weight: 600;
}

.checkout-modal__total-row--final {
    border-top: 2px solid #dee2e6;
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-blue);
}

.checkout-modal__final-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--dark-blue), var(--coral-red));
    color: white;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.checkout-modal__final-total-amount {
    font-size: 1.5rem;
    font-weight: 700;
}

.checkout-modal__payment-section {
    margin-bottom: 2rem;
}

.checkout-modal__security {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6c757d;
    text-align: center;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.checkout-modal__security i {
    color: var(--coral-red);
    font-size: 1rem;
}

.checkout-modal__actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e9ecef;
}

.checkout-modal__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkout-modal__btn--secondary {
    background: #f8f9fa;
    color: var(--dark-blue);
    border: 2px solid #e9ecef;
}

.checkout-modal__btn--secondary:hover {
    background: #e9ecef;
    transform: translateY(-2px);
}

.checkout-modal__btn--primary {
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    color: white;
    box-shadow: 0 4px 15px rgba(233, 92, 103, 0.3);
}

.checkout-modal__btn--primary:hover {
    background: linear-gradient(135deg, #ff6b6b, var(--coral-red));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.4);
}

.checkout-modal__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Custom Alert & Confirmation Dialog */
.custom-alert-dialog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.custom-alert-dialog.active {
    display: flex;
}

.custom-alert-dialog__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.custom-alert-dialog__content {
    position: relative;
    background: white;
    border-radius: 20px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 10003;
    animation: alertSlideIn 0.3s ease-out;
    overflow: hidden;
}

@keyframes alertSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.custom-alert-dialog__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem auto 1rem;
    font-size: 2.5rem;
    color: white;
}

.custom-alert-dialog__icon--info {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.custom-alert-dialog__icon--success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.custom-alert-dialog__icon--warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.custom-alert-dialog__icon--error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.custom-alert-dialog__icon--question {
    background: linear-gradient(135deg, var(--dark-blue), #2c3e8f);
}

.custom-alert-dialog__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin: 0 0 1rem;
    text-align: center;
    padding: 0 2rem;
    font-family: 'Oswald', sans-serif;
}

.custom-alert-dialog__message {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.6;
    margin: 0 0 2rem;
    text-align: center;
    padding: 0 2rem;
}

.custom-alert-dialog__actions {
    display: flex;
    gap: 1rem;
    padding: 0 2rem 2rem;
    justify-content: center;
}

.custom-alert-dialog__btn {
    flex: 1;
    max-width: 150px;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.custom-alert-dialog__btn--primary {
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    color: white;
    box-shadow: 0 4px 15px rgba(233, 92, 103, 0.3);
}

.custom-alert-dialog__btn--primary:hover {
    background: linear-gradient(135deg, #ff6b6b, var(--coral-red));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.4);
}

.custom-alert-dialog__btn--primary:active {
    transform: translateY(0);
}

.custom-alert-dialog__btn--secondary {
    background: #f8f9fa;
    color: var(--dark-blue);
    border: 2px solid #e9ecef;
}

.custom-alert-dialog__btn--secondary:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    transform: translateY(-2px);
}

.custom-alert-dialog__btn--secondary:active {
    transform: translateY(0);
}

.custom-alert-dialog__btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(233, 92, 103, 0.2);
}

@media (max-width: 576px) {
    .custom-alert-dialog__content {
        max-width: 90%;
        margin: 1rem;
    }

    .custom-alert-dialog__icon {
        width: 70px;
        height: 70px;
        font-size: 2rem;
        margin: 1.5rem auto 1rem;
    }

    .custom-alert-dialog__title {
        font-size: 1.25rem;
        padding: 0 1.5rem;
    }

    .custom-alert-dialog__message {
        font-size: 0.95rem;
        padding: 0 1.5rem;
        margin-bottom: 1.5rem;
    }

    .custom-alert-dialog__actions {
        flex-direction: column;
        padding: 0 1.5rem 1.5rem;
    }

    .custom-alert-dialog__btn {
        max-width: 100%;
        width: 100%;
    }
}

#modal-payment-element-container {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 12px;
}

/* Checkout Steps Indicator */
.checkout-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 2rem 0;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.checkout-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    flex: 1;
    max-width: 200px;
}

.checkout-step::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 60%;
    width: 80%;
    height: 2px;
    background: #e9ecef;
    z-index: 0;
}

.checkout-step:last-child::after {
    display: none;
}

.checkout-step__number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.checkout-step--active .checkout-step__number {
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    color: white;
    box-shadow: 0 4px 15px rgba(233, 92, 103, 0.3);
    transform: scale(1.1);
}

.checkout-step--completed .checkout-step__number {
    background: #28a745;
    color: white;
}

.checkout-step--completed::after {
    background: #28a745;
}

.checkout-step__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6c757d;
    transition: all 0.3s ease;
}

.checkout-step--active .checkout-step__label {
    color: var(--coral-red);
}

.checkout-step--completed .checkout-step__label {
    color: #28a745;
}

/* Checkout Step Content */
.checkout-step-content {
    animation: fadeIn 0.3s ease;
}

.checkout-step-content .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.checkout-step-content .row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 992px) {
    .checkout-step-content .col-lg-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    
    .checkout-step-content .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* Swiper.js Carousel Styles */
.swiper {
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

.testimonials-carousel .swiper-slide {
    width: auto;
}

.testimonials-carousel .swiper-slide {
    width: auto;
    flex-shrink: 0;
}

/* Swiper Pagination - Main Banner Slider (absolute positioned like old Slick) */
.main-banner-slider .swiper-pagination {
    position: absolute;
    bottom: 30px;
    z-index: 10;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}

.main-banner-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    opacity: 1;
    margin: 0 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.main-banner-slider .swiper-pagination-bullet-active {
    background-color: var(--golden-orange);
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(245, 149, 50, 0.6);
}

.main-banner-slider .swiper-pagination-bullet:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

/* Swiper Pagination - Product Carousels & Special Offers (relative positioned) */
.products-carousel .swiper-pagination,
.special-offers-banner-carousel .swiper-pagination,
.new-arrivals-carousel .swiper-pagination,
.bundles-carousel .swiper-pagination,
.testimonials-carousel .swiper-pagination,
.cute-stationery-carousel .swiper-pagination {
    position: relative;
    text-align: center;
    margin-top: 1.5rem;
}

.products-carousel .swiper-pagination-bullet,
.special-offers-banner-carousel .swiper-pagination-bullet,
.new-arrivals-carousel .swiper-pagination-bullet,
.bundles-carousel .swiper-pagination-bullet,
.testimonials-carousel .swiper-pagination-bullet,
.cute-stationery-carousel .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #dee2e6;
    opacity: 1;
    margin: 0 4px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.products-carousel .swiper-pagination-bullet-active,
.special-offers-banner-carousel .swiper-pagination-bullet-active,
.new-arrivals-carousel .swiper-pagination-bullet-active,
.bundles-carousel .swiper-pagination-bullet-active,
.testimonials-carousel .swiper-pagination-bullet-active,
.cute-stationery-carousel .swiper-pagination-bullet-active {
    background: var(--coral-red);
    transform: scale(1.2);
}

.products-carousel .swiper-pagination-bullet:hover,
.special-offers-banner-carousel .swiper-pagination-bullet:hover,
.new-arrivals-carousel .swiper-pagination-bullet:hover,
.bundles-carousel .swiper-pagination-bullet:hover,
.testimonials-carousel .swiper-pagination-bullet:hover,
.cute-stationery-carousel .swiper-pagination-bullet:hover {
    background: #adb5bd;
    transform: scale(1.1);
}

/* General Swiper Pagination (fallback for other sliders) */
.swiper-pagination {
    position: relative;
    text-align: center;
    margin-top: 1.5rem;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #dee2e6;
    opacity: 1;
    margin: 0 4px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: var(--coral-red);
    transform: scale(1.2);
}

/* Compatibility: Keep owl-carousel class working during migration */
.owl-carousel {
    display: flex;
    flex-wrap: wrap;
}

.owl-carousel .swiper-wrapper {
    display: flex;
}

.owl-carousel .swiper-slide {
    flex: 0 0 auto;
}

/* Address Autocomplete */
.address-autocomplete-wrapper {
    position: relative;
}

.address-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

.address-suggestion-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.address-suggestion-item:hover {
    background-color: #f8f9fa;
}

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

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

/* Review Block */
.checkout-review-block {
    background: white;
    border-radius: 15px;
    padding: 2.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.checkout-review-block__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
    font-family: 'Oswald', sans-serif;
}

.checkout-review-block__section-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 1.5rem;
}

.checkout-review-block__items {
    margin-bottom: 2rem;
}

.checkout-review-block__item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.checkout-review-block__item:last-child {
    border-bottom: none;
}

.checkout-review-block__item-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.checkout-review-block__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-review-block__item-info {
    flex: 1;
}

.checkout-review-block__item-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
}

.checkout-review-block__item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #6c757d;
}

.checkout-review-block__item-total {
    font-weight: 600;
    color: var(--dark-blue);
}

.checkout-review-block__totals {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.checkout-review-block__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 0.95rem;
    color: #495057;
}

.checkout-review-block__total-row--discount {
    color: var(--coral-red);
    font-weight: 600;
}

.checkout-review-block__total-row--final {
    border-top: 2px solid #dee2e6;
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-blue);
}

.checkout-review-block__actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e9ecef;
}

.checkout-review-block__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkout-review-block__btn--secondary {
    background: #f8f9fa;
    color: var(--dark-blue);
    border: 2px solid #e9ecef;
}

.checkout-review-block__btn--secondary:hover {
    background: #e9ecef;
    transform: translateY(-2px);
}

.checkout-review-block__btn--primary {
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    color: white;
    box-shadow: 0 4px 15px rgba(233, 92, 103, 0.3);
}

.checkout-review-block__btn--primary:hover {
    background: linear-gradient(135deg, #ff6b6b, var(--coral-red));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.4);
}

/* Review Address Cards */
.checkout-review-block__addresses {
    margin-bottom: 2rem;
}

.checkout-address-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
    border: 1px solid #e9ecef;
}

.checkout-address-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.checkout-address-card__header i {
    font-size: 1.2rem;
    color: var(--coral-red);
}

.checkout-address-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin: 0;
    font-family: 'Oswald', sans-serif;
}

.checkout-address-card__body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #495057;
}

.checkout-address-card__name {
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.checkout-address-card__email,
.checkout-address-card__phone {
    margin-bottom: 0.25rem;
    color: #6c757d;
}

.checkout-address-card__address {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e9ecef;
    color: #495057;
}

/* Review Table */
.checkout-review-table-wrapper {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    margin-bottom: 1.5rem;
}

.checkout-review-table {
    width: 100%;
    border-collapse: collapse;
}

.checkout-review-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

.checkout-review-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    color: var(--dark-blue);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.checkout-review-table th:nth-child(1) {
    text-align: left;
}

.checkout-review-table th:nth-child(2),
.checkout-review-table th:nth-child(3),
.checkout-review-table th:nth-child(4) {
    text-align: center;
}

.checkout-review-table__row {
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.3s ease;
}

.checkout-review-table__row:hover {
    background-color: #f8f9fa;
}

.checkout-review-table__row:last-child {
    border-bottom: none;
}

.checkout-review-table__product {
    padding: 1.5rem 1rem;
    vertical-align: middle;
}

.checkout-review-table__product-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.checkout-review-table__product-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f8f9fa;
}

.checkout-review-table__product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-review-table__product-info {
    flex: 1;
}

.checkout-review-table__product-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin: 0;
    line-height: 1.4;
}

.checkout-review-table__price,
.checkout-review-table__quantity {
    padding: 1.5rem 1rem;
    text-align: center;
    vertical-align: middle;
    color: #495057;
}

.checkout-review-table__subtotal {
    padding: 1.5rem 1rem;
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
    color: var(--dark-blue);
}

/* Review Totals Sidebar */
.checkout-review-totals {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 2rem;
}

.checkout-review-totals__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
    font-family: 'Oswald', sans-serif;
}

.checkout-review-totals__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkout-review-totals__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 0.95rem;
    color: #495057;
}

.checkout-review-totals__row--discount {
    color: var(--coral-red);
    font-weight: 600;
}

.checkout-review-totals__row--final {
    border-top: 2px solid #dee2e6;
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-blue);
}

/* Payment Summary Sidebar */
.checkout-payment-summary {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 2rem;
}

.checkout-payment-summary__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
    font-family: 'Oswald', sans-serif;
}

.checkout-payment-summary__items {
    margin-bottom: 1.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.checkout-payment-summary__item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
}

.checkout-payment-summary__item:last-child {
    border-bottom: none;
}

.checkout-payment-summary__item-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f8f9fa;
}

.checkout-payment-summary__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-payment-summary__item-info {
    flex: 1;
}

.checkout-payment-summary__item-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.checkout-payment-summary__item-details {
    font-size: 0.85rem;
    color: #6c757d;
}

.checkout-payment-summary__totals {
    padding-top: 1rem;
    border-top: 2px solid #e9ecef;
}

.checkout-payment-summary__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 0.95rem;
    color: #495057;
}

.checkout-payment-summary__total-row--discount {
    color: var(--coral-red);
    font-weight: 600;
}

.checkout-payment-summary__total-row--final {
    border-top: 2px solid #dee2e6;
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-blue);
}

/* Payment Block */
.checkout-payment-block {
    background: white;
    border-radius: 15px;
    padding: 2.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.checkout-payment-block__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
    font-family: 'Oswald', sans-serif;
}

.checkout-payment-block__final-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--dark-blue), var(--coral-red));
    color: white;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.checkout-payment-block__final-total-amount {
    font-size: 1.5rem;
    font-weight: 700;
}

#payment-element-container {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.checkout-payment-block__security {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6c757d;
    text-align: center;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.checkout-payment-block__security i {
    color: var(--coral-red);
    font-size: 1rem;
}

.checkout-payment-block__actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e9ecef;
}

.checkout-payment-block__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkout-payment-block__btn--secondary {
    background: #f8f9fa;
    color: var(--dark-blue);
    border: 2px solid #e9ecef;
}

.checkout-payment-block__btn--secondary:hover {
    background: #e9ecef;
    transform: translateY(-2px);
}

.checkout-payment-block__btn--primary {
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    color: white;
    box-shadow: 0 4px 15px rgba(233, 92, 103, 0.3);
}

.checkout-payment-block__btn--primary:hover {
    background: linear-gradient(135deg, #ff6b6b, var(--coral-red));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.4);
}

.checkout-payment-block__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Responsive Steps */
@media (max-width: 768px) {
    .checkout-steps {
        gap: 1rem;
        padding: 1.5rem 1rem;
    }

    .checkout-step::after {
        width: 60%;
        left: 70%;
    }

    .checkout-step__number {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .checkout-step__label {
        font-size: 0.8rem;
    }

    .checkout-review-block,
    .checkout-payment-block {
        padding: 1.5rem;
    }

    .checkout-review-block__actions,
    .checkout-payment-block__actions {
        flex-direction: column;
    }

    .checkout-review-block__btn,
    .checkout-payment-block__btn {
        width: 100%;
    }

    .checkout-review-block__addresses .row {
        flex-direction: column;
    }

    .checkout-review-block__addresses .col-md-6 {
        margin-bottom: 1rem;
    }

    .checkout-review-table-wrapper {
        overflow-x: auto;
    }

    .checkout-review-table {
        min-width: 600px;
    }

    .checkout-review-table th,
    .checkout-review-table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }

    .checkout-review-table__product-image {
        width: 60px;
        height: 60px;
    }

    .checkout-review-totals,
    .checkout-payment-summary {
        position: static;
        margin-top: 2rem;
    }
}

/* Responsive Checkout Modal */
@media (max-width: 768px) {
    .checkout-modal__content {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 15px;
    }

    .checkout-modal__header {
        padding: 1rem 1.5rem;
    }

    .checkout-modal__title {
        font-size: 1.3rem;
    }

    .checkout-modal__body {
        padding: 1.5rem;
    }

    .checkout-modal__items {
        max-height: 250px;
    }

    .checkout-modal__item {
        gap: 0.75rem;
    }

    .checkout-modal__item-image {
        width: 60px;
        height: 60px;
    }

    .checkout-modal__actions {
        flex-direction: column;
    }

    .checkout-modal__btn {
        width: 100%;
    }
}

/* Responsive Checkout Page */
@media (max-width: 991.98px) {
    .checkout-form__grid {
        grid-template-columns: 1fr;
    }

    .order-summary {
        position: static;
        top: auto;
        max-height: none;
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .checkout-section {
        padding: 1.5rem 0;
        background: #f8f9fa;
    }

    .checkout-block {
        padding: 1.25rem;
        margin-bottom: 1.25rem;
        border-radius: 12px;
    }

    .checkout-block--compact {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .checkout-block__title {
        font-size: 1.2rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .checkout-block__title i {
        font-size: 1.1rem;
    }

    .checkout-block__header-compact {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .checkout-block__header-compact .checkout-block__title {
        font-size: 1.1rem;
    }

    .checkout-block__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .checkout-form__grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .checkout-form__grid--compact {
        gap: 0.75rem;
    }

    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    .form-input,
    select.form-input {
        padding: 0.875rem 0.875rem;
        font-size: 1rem;
        min-height: 44px;
        border-width: 2px;
    }

    .form-input:focus {
        box-shadow: 0 0 0 3px rgba(233, 92, 103, 0.15);
    }

    .checkbox-label--prominent {
        padding: 1rem;
        font-size: 0.95rem;
        min-height: 48px;
        border-width: 2px;
        background: #f8f9fa;
    }

    .checkbox-label--prominent:active {
        background: #e9ecef;
        border-color: var(--coral-red);
    }

    .checkbox-label__text {
        font-size: 0.9rem;
    }

    .address-autocomplete-wrapper {
        position: relative;
    }

    .address-autocomplete-wrapper {
        z-index: 10;
    }

    .address-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1000;
        max-height: 200px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        margin-top: 4px;
    }

    .address-suggestion-item {
        padding: 1rem;
        min-height: 48px;
        display: flex;
        align-items: center;
        font-size: 0.9rem;
    }

    .address-suggestion-item:active {
        background-color: #e9ecef;
    }

    .order-summary {
        padding: 1.25rem;
        margin-top: 1.5rem;
        border-radius: 12px;
        position: relative;
    }

    .order-summary__title {
        font-size: 1.2rem;
        margin-bottom: 0.875rem;
        padding-bottom: 0.75rem;
    }

    .order-item {
        gap: 0.75rem;
        padding: 0.875rem;
        margin-bottom: 0.875rem;
    }

    .order-item__image {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
    }

    .order-item__name {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .order-item__price-row {
        font-size: 0.85rem;
        gap: 0.4rem;
    }

    .order-item__price {
        font-size: 0.85rem;
    }

    .order-item__price-total {
        font-size: 0.95rem;
    }

    .order-totals {
        margin-bottom: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .order-totals__item {
        padding: 0.625rem 0;
        font-size: 0.9rem;
    }

    .order-totals__item--total {
        font-size: 1.1rem;
        padding: 0.875rem 0;
    }

    .order-coupon {
        margin-bottom: 1.25rem;
    }

    .order-coupon .coupon-input-wrapper {
        flex-direction: column;
        gap: 0.5rem;
    }

    .order-coupon .coupon-input--with-button {
        padding-right: 1rem;
        margin-bottom: 0;
        min-height: 44px;
    }

    .order-coupon .coupon-btn-inline {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 0;
        min-height: 44px;
        padding: 0.875rem 1rem;
    }

    .order-summary__action {
        margin-top: 1.25rem;
    }

    .place-order-btn {
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 1rem;
        min-height: 50px;
        font-weight: 600;
    }

    .payment-method__header {
        font-size: 0.95rem;
    }

    .payment-method__header i {
        font-size: 1.1rem;
    }

    select.form-input {
        padding-right: 2.5rem;
        background-size: 1em 1em;
        background-position: right 0.75rem center;
    }

    /* Improve saved address dropdown on mobile */
    select.form-input option {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .checkout-section {
        padding: 1rem 0;
    }

    .checkout-block {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 10px;
    }

    .checkout-block--compact {
        padding: 0.875rem;
        margin-bottom: 0.875rem;
    }

    .checkout-block__title {
        font-size: 1.1rem;
        margin-bottom: 0.875rem;
        padding-bottom: 0.625rem;
    }

    .checkout-block__title i {
        font-size: 1rem;
    }

    .checkout-block__header-compact {
        margin-bottom: 0.875rem;
        padding-bottom: 0.625rem;
    }

    .checkout-block__header-compact .checkout-block__title {
        font-size: 1rem;
    }

    .checkout-form__grid {
        gap: 0.75rem;
    }

    .checkout-form__grid--compact {
        gap: 0.625rem;
    }

    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.35rem;
    }

    .form-input,
    select.form-input {
        padding: 0.75rem;
        font-size: 0.95rem;
        min-height: 44px;
    }

    .checkbox-label--prominent {
        padding: 0.875rem;
        font-size: 0.9rem;
        min-height: 48px;
    }

    .order-summary {
        padding: 1rem;
        margin-top: 1.25rem;
        border-radius: 10px;
    }

    .order-summary__title {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.625rem;
    }

    .order-item {
        flex-direction: row;
        gap: 0.625rem;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .order-item__image {
        width: 55px;
        height: 55px;
    }

    .order-item__name {
        font-size: 0.85rem;
    }

    .order-item__price-row {
        font-size: 0.8rem;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }

    .order-item__price {
        font-size: 0.8rem;
    }

    .order-item__price-total {
        font-size: 0.9rem;
    }

    .order-totals {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .order-totals__item {
        padding: 0.5rem 0;
        font-size: 0.85rem;
    }

    .order-totals__item--total {
        font-size: 1rem;
        padding: 0.75rem 0;
    }

    .order-coupon {
        margin-bottom: 1rem;
    }

    .place-order-btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
        min-height: 48px;
    }

    /* Improve billing checkbox visibility on mobile */
    .checkbox-label--prominent {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border: 2px solid #e9ecef;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .checkbox-label--prominent input[type="checkbox"]:checked ~ .checkbox-label__text {
        color: var(--coral-red);
        font-weight: 600;
    }
}

/* Mobile Sticky Footer for Checkout */
.checkout-mobile-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 2px solid #e9ecef;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 0.875rem 1rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.checkout-mobile-footer__summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.checkout-mobile-footer__label {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.2rem;
}

.checkout-mobile-footer__total {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--coral-red);
    font-family: 'Oswald', sans-serif;
}

.checkout-mobile-footer__btn {
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(233, 92, 103, 0.3);
}

.checkout-mobile-footer__btn:hover {
    background: linear-gradient(135deg, #ff6b6b, var(--coral-red));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 92, 103, 0.4);
}

.checkout-mobile-footer__btn:active {
    transform: translateY(0);
}

.checkout-mobile-footer__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.checkout-mobile-footer__btn i {
    font-size: 0.9rem;
}

/* Add bottom padding to checkout section on mobile to prevent content from being hidden behind sticky footer */
@media (max-width: 991.98px) {
    .checkout-section {
        padding-bottom: 5rem;
    }
}

/* Collapsible Order Summary on Mobile */
@media (max-width: 991.98px) {
    .order-summary {
        border: 1px solid #e9ecef;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .order-summary__title {
        cursor: pointer;
        user-select: none;
        position: relative;
        padding-right: 2rem;
    }

    .order-summary__title::after {
        content: '\f078';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
        color: var(--coral-red);
    }

    .order-summary.collapsed .order-summary__title::after {
        transform: translateY(-50%) rotate(-90deg);
    }

    .order-summary.collapsed .order-items,
    .order-summary.collapsed .order-totals,
    .order-summary.collapsed .order-coupon {
        display: none;
    }
}

/* Account Page Styles */
.account-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

/* Account Sidebar */
.account-sidebar {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

/* Mobile Menu Button */
.account-content__mobile-menu {
    display: none;
    margin-bottom: 1rem;
}

.account-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--dark-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.account-menu-btn:hover {
    background: #1a2a4a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.account-menu-btn i {
    font-size: 1rem;
}

/* Account Menu Drawer */
.account-menu-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    pointer-events: none;
}

.account-menu-drawer.active {
    display: block;
    pointer-events: auto;
}

.account-menu-drawer__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.4s ease-out;
    backdrop-filter: blur(2px);
}

.account-menu-drawer.active .account-menu-drawer__overlay {
    opacity: 1;
}

.account-menu-drawer__content {
    position: absolute;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 350px;
    height: 100%;
    background: #ffffff;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.account-menu-drawer.active .account-menu-drawer__content {
    left: 0;
}

.account-menu-drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    background: #ffffff;
    position: relative;
}

.account-menu-drawer__header .account-user {
    flex: 1;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.account-menu-drawer__close {
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 1rem;
}

.account-menu-drawer__close:hover {
    color: var(--coral-red);
    background: rgba(233, 92, 103, 0.1);
}

.account-menu-drawer__content .account-nav {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
}

.account-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
}

.account-user__info {
    flex: 1;
    min-width: 0; /* Allows flex item to shrink below content size */
    overflow: hidden; /* Prevents content from overflowing */
}

.account-user__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--coral-red);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.account-user__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin: 0 0 0.25rem 0;
    font-family: 'Oswald', sans-serif;
}

.account-user__email {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    line-height: 1.4;
}

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

.account-nav__item {
    margin-bottom: 0.5rem;
}

.account-nav__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #6c757d;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.account-nav__link:hover {
    background: rgba(233, 92, 103, 0.1);
    color: var(--coral-red);
    text-decoration: none;
}

.account-nav__link--active {
    background: var(--coral-red);
    color: white;
}

.account-nav__link--active:hover {
    background: var(--coral-red);
    color: white;
}

.account-nav__link i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Account Content */
.account-content {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.account-content--hidden {
    display: none;
}

.account-block {
    margin-bottom: 0;
}

.account-block__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
    font-family: 'Oswald', sans-serif;
}

.account-block__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.account-block__header .account-block__title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Profile View */
.profile-view {
    margin-top: 1rem;
}

.profile-view__header {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e9ecef;
}

.profile-view__avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--coral-red);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.profile-view__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.profile-view__avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
}

.profile-view__name {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin: 0 0 0.5rem 0;
    font-family: 'Oswald', sans-serif;
}

.profile-view__email,
.profile-view__phone {
    font-size: 1rem;
    color: #6c757d;
    margin: 0.25rem 0;
}

.profile-view__details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-detail-row {
    display: flex;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    align-items: center;
}

.profile-detail-label {
    font-weight: 600;
    color: var(--dark-blue);
    width: 200px;
    flex-shrink: 0;
}

.profile-detail-value {
    color: #6c757d;
    flex: 1;
}

.profile-detail-row--full {
    flex-direction: column;
    align-items: flex-start;
}

.profile-detail-row--full .profile-detail-label {
    width: 100%;
    margin-bottom: 0.5rem;
}

.profile-detail-row--full .profile-detail-value {
    width: 100%;
    line-height: 1.6;
}

/* Account Forms */
.account-form {
    margin-top: 1rem;
}

.account-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Profile Image Upload */
.profile-image-upload {
    margin-bottom: 1.5rem;
}

.profile-image-upload__preview {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #f8f9fa;
    border: 3px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.profile-image-upload__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.profile-image-upload__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #6c757d;
}

.profile-image-upload__actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.profile-image-upload__input {
    display: none;
}

.form-help {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #6c757d;
}

.form-help i {
    color: var(--coral-red);
}

.account-form__actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.btn-outline-secondary {
    background: transparent;
    color: #6c757d;
    border: 2px solid #e9ecef;
}

.btn-outline-secondary:hover {
    background: #f8f9fa;
    border-color: #6c757d;
    color: #6c757d;
}

/* Address Section */
.address-section {
    margin-bottom: 2.5rem;
}

.address-section:last-child {
    margin-bottom: 0;
}

.address-section__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Oswald', sans-serif;
}

.address-section__title i {
    color: var(--coral-red);
    font-size: 1.1rem;
}

.address-card {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.address-card:hover {
    border-color: var(--coral-red);
    box-shadow: 0 5px 15px rgba(233, 92, 103, 0.1);
}

.address-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.address-card__badge {
    background: var(--coral-red);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.address-card__actions {
    display: flex;
    gap: 0.5rem;
}

.address-card__action {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: white;
    border: 1px solid #e9ecef;
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.address-card__action:hover {
    background: var(--coral-red);
    border-color: var(--coral-red);
    color: white;
    transform: scale(1.1);
}

.address-card__body {
    color: #6c757d;
    line-height: 1.8;
}

.address-card__name {
    font-weight: 700;
    color: var(--dark-blue);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.address-card__address {
    margin: 0.25rem 0;
    font-size: 0.95rem;
}

.address-card__phone {
    margin-top: 0.5rem;
    font-weight: 500;
    color: var(--dark-blue);
}

.address-form-container {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #e9ecef;
}

/* Orders List / Order History */
.orders-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.order-history-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.order-history-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--coral-red);
}

.order-history-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    flex-wrap: wrap;
    gap: 1rem;
}

.order-history-item__info {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.order-history-item__number {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.order-history-item__number strong {
    color: var(--dark-blue);
    font-weight: 600;
}

.order-history-item__number span {
    color: var(--coral-red);
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.order-history-item__date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.order-history-item__date i {
    color: var(--coral-red);
}

.order-history-item__status {
    display: flex;
    align-items: center;
}

.order-history-item__total {
    font-size: 1.1rem;
    color: var(--dark-blue);
}

.order-history-item__body {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.order-history-item__products {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    flex: 1;
}

.order-product-mini {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    min-width: 180px;
}

.order-product-mini img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
}

.order-product-mini__name {
    flex: 1;
    font-size: 0.9rem;
    color: var(--dark-blue);
    font-weight: 500;
}

.order-product-mini__qty {
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 600;
}

.order-history-item__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Order Status Badges */
.order-status {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-status--pending {
    background: #fff3cd;
    color: #856404;
}

.order-status--processing {
    background: #cfe2ff;
    color: #084298;
}

.order-status--shipped {
    background: #d1e7dd;
    color: #0f5132;
}

.order-status--delivered {
    background: #d1e7dd;
    color: #0f5132;
}

.order-status--cancelled {
    background: #f8d7da;
    color: #842029;
}

/* Order Details Page */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--coral-red);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.back-link:hover {
    color: var(--dark-blue);
    gap: 0.75rem;
}

.back-link i {
    font-size: 0.9rem;
}

.order-details {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.order-details__header {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 2rem;
}

.order-details__info-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.order-details__info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.order-details__label {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.order-details__value {
    font-size: 1.1rem;
    color: var(--dark-blue);
    font-weight: 600;
}

.order-details__value--total {
    font-size: 1.5rem;
    color: var(--coral-red);
    font-weight: 700;
}

.order-details__section {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 2rem;
}

.order-details__section-title {
    font-size: 1.3rem;
    color: var(--dark-blue);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.order-details__items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.order-details-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 10px;
    align-items: center;
}

.order-details-item__image {
    flex-shrink: 0;
}

.order-details-item__image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #e9ecef;
}

.order-details-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.order-details-item__name {
    font-size: 1.1rem;
    color: var(--dark-blue);
    font-weight: 600;
    margin: 0;
}

.order-details-item__meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: #6c757d;
}

.order-details-item__price {
    font-size: 1rem;
    color: var(--coral-red);
    font-weight: 600;
}

.order-details__summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 400px;
    margin-left: auto;
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
}

.order-summary-row--total {
    border-bottom: 2px solid var(--dark-blue);
    border-top: 2px solid #e9ecef;
    margin-top: 0.5rem;
    padding-top: 1rem;
}

.order-summary-label {
    font-size: 0.95rem;
    color: #6c757d;
}

.order-summary-value {
    font-size: 1rem;
    color: var(--dark-blue);
    font-weight: 600;
}

.order-summary-row--total .order-summary-label {
    font-size: 1.2rem;
    color: var(--dark-blue);
    font-weight: 700;
}

.order-summary-row--total .order-summary-value {
    font-size: 1.5rem;
    color: var(--coral-red);
    font-weight: 700;
}

.order-details__address {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.order-details__address-name {
    font-size: 1.1rem;
    color: var(--dark-blue);
    font-weight: 600;
    margin: 0;
}

.order-details__address-line {
    font-size: 0.95rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.6;
}

.order-details__address-phone {
    font-size: 0.95rem;
    color: var(--coral-red);
    font-weight: 500;
    margin-top: 0.5rem;
}

/* Order Tracking */
.order-tracking {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    padding-left: 2rem;
}

.order-tracking::before {
    content: '';
    position: absolute;
    left: 1.35rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

.order-tracking__item {
    display: flex;
    gap: 1.5rem;
    position: relative;
    padding-left: 1rem;
}

.order-tracking__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 50%;
    color: #6c757d;
    font-size: 1rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.order-tracking__item--completed .order-tracking__icon {
    background: var(--coral-red);
    border-color: var(--coral-red);
    color: white;
}

.order-tracking__content {
    flex: 1;
    padding-top: 0.25rem;
}

.order-tracking__status {
    font-size: 1rem;
    color: var(--dark-blue);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.order-tracking__date {
    font-size: 0.9rem;
    color: #6c757d;
}

.order-tracking__tracking-number {
    font-size: 0.85rem;
    color: var(--coral-red);
    font-weight: 500;
    margin-top: 0.5rem;
    font-family: 'Courier New', monospace;
}

.order-details__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 2px solid #e9ecef;
}

/* Responsive Account Page */
@media (max-width: 992px) {
    .account-form__grid {
        grid-template-columns: 1fr;
    }

    .profile-view__header {
        flex-direction: column;
        text-align: center;
    }

    .profile-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .profile-detail-label {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .account-section {
        padding: 2rem 0;
    }

    .account-sidebar-desktop {
        display: none;
    }

    .account-content__mobile-menu {
        display: block;
    }

    .account-content {
        padding: 1.5rem;
    }

    .account-block__title {
        font-size: 1.3rem;
    }

    .account-block__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .account-form__grid {
        gap: 1rem;
    }

    .account-form__actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .account-form__actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .form-group--full {
        margin-bottom: 1.5rem;
    }

    .profile-image-upload {
        text-align: center;
    }

    .profile-image-upload__actions {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .profile-image-upload__actions .btn {
        width: 100%;
        max-width: 200px;
        min-height: 44px;
    }

    .profile-view__avatar-large {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }

    .profile-view__name {
        font-size: 1.5rem;
    }

    .address-card {
        padding: 1rem;
    }

    .order-history-item__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }

    .order-history-item__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        width: 100%;
    }

    .order-history-item__number,
    .order-history-item__date,
    .order-history-item__status {
        font-size: 0.85rem;
    }

    .order-history-item__total {
        font-size: 1rem;
        width: 100%;
        text-align: left;
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid #e9ecef;
    }

    .order-history-item__body {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        gap: 1rem;
    }

    .order-history-item__products {
        width: 100%;
    }

    .order-product-mini {
        min-width: 100%;
        padding: 0.75rem;
    }

    .order-product-mini img {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }

    .order-product-mini__name {
        font-size: 0.85rem;
    }

    .order-product-mini__qty {
        font-size: 0.85rem;
    }

    .order-history-item__actions {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .order-history-item__actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .order-details__info-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .order-details__summary {
        max-width: 100%;
    }

    .order-tracking {
        padding-left: 1.5rem;
    }
}

@media (max-width: 576px) {
    .account-sidebar {
        padding: 1.5rem;
    }

    .account-user {
        flex-direction: column;
        text-align: center;
    }

    .account-content {
        padding: 1rem;
    }

    .account-block__title {
        font-size: 1.2rem;
    }

    .profile-view__header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    .profile-view__avatar-large {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
        margin: 0 auto;
    }

    .profile-view__name {
        font-size: 1.3rem;
    }

    .profile-view__email,
    .profile-view__phone {
        font-size: 0.9rem;
    }

    .profile-detail-row {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .profile-detail-label {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    .profile-detail-value {
        font-size: 0.9rem;
    }

    .address-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .address-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .address-card__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .address-card__action {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .address-card__name {
        font-size: 1rem;
    }

    .address-card__address {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .order-history-item__header {
        padding: 1rem;
    }

    .order-history-item__body {
        padding: 1rem;
    }

    .order-product-mini {
        min-width: 100%;
    }

    .account-form__grid {
        gap: 0.75rem;
    }

    .form-label {
        font-size: 0.9rem;
    }

    .form-input {
        font-size: 0.9rem;
        padding: 0.65rem 0.85rem;
        min-height: 44px;
    }

    .account-menu-btn {
        padding: 0.65rem 1rem;
        font-size: 0.85rem;
    }

    .account-menu-drawer__content {
        width: 90%;
        max-width: 320px;
    }

    .account-menu-drawer__header {
        padding: 1.25rem;
    }

    .account-menu-drawer__content .account-nav {
        padding: 0.75rem;
    }

    .order-details__header {
        padding: 1.5rem;
    }

    .order-details__section {
        padding: 1.5rem;
    }

    .order-details-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }

    .order-details-item__image img {
        width: 60px;
        height: 60px;
    }

    .order-tracking {
        padding-left: 1rem;
    }

    .order-tracking__icon {
        width: 2rem;
        height: 2rem;
        font-size: 0.9rem;
    }

    .order-details__actions {
        flex-direction: column;
    }

    .order-details__actions .btn {
        width: 100%;
    }
}

/* Cart Sidebar */
.cart-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-out;
}

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

.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: white;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

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

.cart-sidebar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    background: var(--dark-blue);
    color: white;
}

.cart-sidebar__title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.cart-sidebar-count {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.9;
    margin-left: 0.5rem;
}

.cart-sidebar__close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.cart-sidebar__close:hover {
    transform: rotate(90deg);
}

.cart-sidebar__body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.cart-sidebar__items {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
}

.cart-sidebar-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    position: relative;
}

.cart-sidebar-item__image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.cart-sidebar-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.cart-sidebar-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cart-sidebar-item__name {
    font-size: 0.95rem;
    color: var(--dark-blue);
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.cart-sidebar-item__name-link {
    color: var(--dark-blue);
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    max-height: 2.8em;
}

.cart-sidebar-item__name-link:hover {
    color: var(--coral-red);
    text-decoration: none;
}

.cart-sidebar-item__price-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.cart-sidebar-item__price {
    color: #6c757d;
}

.cart-sidebar-item__total {
    color: var(--coral-red);
    font-weight: 600;
}

.cart-sidebar-item__remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: #6c757d;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.cart-sidebar-item__remove:hover {
    background: var(--coral-red);
    color: white;
}

.cart-sidebar__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.cart-sidebar__empty-icon {
    font-size: 4rem;
    color: #e9ecef;
    margin-bottom: 1rem;
}

.cart-sidebar__empty-text {
    font-size: 1.1rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.cart-sidebar__footer {
    border-top: 2px solid #e9ecef;
    padding: 1.5rem;
    background: white;
    position: sticky;
    bottom: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

.cart-sidebar__summary {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.cart-sidebar__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-sidebar__summary-label {
    font-size: 0.95rem;
    color: #6c757d;
}

.cart-sidebar__summary-value {
    font-size: 0.95rem;
    color: var(--dark-blue);
    font-weight: 600;
}

.cart-sidebar__summary-row--total .cart-sidebar__summary-label {
    font-size: 1.1rem;
    color: var(--dark-blue);
    font-weight: 700;
}

.cart-sidebar__summary-row--total .cart-sidebar__summary-value {
    font-size: 1.3rem;
    color: var(--coral-red);
    font-weight: 700;
}

.cart-sidebar__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cart-sidebar__actions .btn {
    width: 100%;
}

/* Responsive Cart Sidebar */
@media (max-width: 576px) {
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }

    .cart-sidebar__header {
        padding: 1rem;
    }

    .cart-sidebar__title {
        font-size: 1.1rem;
    }

    .cart-sidebar__body {
        padding: 0.5rem;
    }

    .cart-sidebar-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .cart-sidebar-item__image {
        width: 50px;
        height: 50px;
    }

    .cart-sidebar-item__name {
        font-size: 0.85rem;
    }

    .cart-sidebar-item__remove {
        width: 2rem;
        height: 2rem;
        top: 0.25rem;
        right: 0.25rem;
        font-size: 1.1rem;
    }

    .cart-sidebar__footer {
        padding: 1rem;
    }
}

/* Wishlist Sidebar */
.wishlist-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-out;
}

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

.wishlist-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: white;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.wishlist-sidebar.active {
    right: 0;
}

.wishlist-sidebar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    background: var(--coral-red);
    color: white;
}

.wishlist-sidebar__title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.wishlist-sidebar__close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.wishlist-sidebar__close:hover {
    transform: rotate(90deg);
}

.wishlist-sidebar__body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.wishlist-sidebar__items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wishlist-sidebar-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    position: relative;
    align-items: center;
}

.wishlist-sidebar-item__checkbox {
    flex-shrink: 0;
}

.wishlist-sidebar-item__image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.wishlist-sidebar-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.wishlist-sidebar-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wishlist-sidebar-item__name {
    font-size: 0.95rem;
    color: var(--dark-blue);
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.wishlist-sidebar-item__name a {
    color: var(--dark-blue);
    text-decoration: none;
    transition: color 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    max-height: 2.8em;
}

.wishlist-sidebar-item__name a:hover {
    color: var(--coral-red);
}

.wishlist-sidebar-item__price-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wishlist-sidebar-item__price {
    color: var(--coral-red);
    font-weight: 600;
    font-size: 0.95rem;
}

.wishlist-sidebar-item__remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: #6c757d;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.wishlist-sidebar-item__remove:hover {
    background: var(--coral-red);
    color: white;
}

.wishlist-sidebar__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.wishlist-sidebar__empty-icon {
    font-size: 4rem;
    color: #e9ecef;
    margin-bottom: 1rem;
}

.wishlist-sidebar__empty-text {
    font-size: 1.1rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.wishlist-sidebar__footer {
    border-top: 2px solid #e9ecef;
    padding: 1.5rem;
    background: white;
    position: sticky;
    bottom: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

.wishlist-sidebar__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wishlist-sidebar__actions .btn {
    width: 100%;
}

.wishlist-select-all-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dark-blue);
    user-select: none;
}

.wishlist-select-all-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--coral-red);
}

.wishlist-bulk-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    width: 100%;
}

.wishlist-bulk-actions .btn {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 0.5rem 0.5rem;
    overflow: hidden;
}

.wishlist-bulk-actions .btn i {
    flex-shrink: 0;
    font-size: 0.9rem;
}

.wishlist-bulk-actions .btn .btn-text {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wishlist-bulk-actions .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .wishlist-bulk-actions {
        flex-direction: column;
    }
    
    .wishlist-bulk-actions .btn {
        width: 100%;
        padding: 0.6rem 0.75rem;
    }
}

.wishlist-sidebar-item__add-cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem;
    text-align: center !important;
}

.wishlist-sidebar-item__add-cart i {
    flex-shrink: 0;
}

.wishlist-sidebar-item__add-cart span {
    flex: 1;
    text-align: center;
}

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

/* Responsive Wishlist Sidebar */
@media (max-width: 576px) {
    .wishlist-sidebar {
        width: 100%;
        right: -100%;
    }

    .wishlist-sidebar__header {
        padding: 1rem;
    }

    .wishlist-sidebar__title {
        font-size: 1.1rem;
    }

    .wishlist-sidebar__body {
        padding: 0.5rem;
    }

    .wishlist-sidebar-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .wishlist-sidebar-item__image {
        width: 50px;
        height: 50px;
    }

    .wishlist-sidebar-item__name {
        font-size: 0.85rem;
    }

    .wishlist-sidebar-item__remove {
        width: 2rem;
        height: 2rem;
        top: 0.25rem;
        right: 0.25rem;
        font-size: 1.1rem;
    }

    .wishlist-sidebar__footer {
        padding: 1rem;
    }
}

/* Wishlist Notification */
.wishlist-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    max-width: 300px;
    font-size: 14px;
    font-weight: 500;
}

.wishlist-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.wishlist-notification--success {
    background: #10b981;
    color: white;
}

.wishlist-notification--error {
    background: #ef4444;
    color: white;
}

/* Wishlist Count Badge */
.wishlist-count {
    display: inline-block;
    background: rgba(255, 255, 255, 0.3);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    margin-left: 8px;
    font-weight: 600;
}

/* Wishlist Button States */
.wishlist-btn.in-wishlist i {
    color: var(--coral-red);
}

.wishlist-btn.in-wishlist:hover i {
    color: var(--coral-red);
    transform: scale(1.1);
}

/* Cart Button States */
.add-to-cart.in-cart,
.product__add-cart.in-cart,
.cute-stationery__add-cart.in-cart,
.cute-stationery__add-cart-mobile.in-cart {
    background: #28a745 !important;
    color: white !important;
}

.add-to-cart.in-cart i,
.product__add-cart.in-cart i,
.cute-stationery__add-cart.in-cart i,
.cute-stationery__add-cart-mobile.in-cart i {
    color: white !important;
}

.add-to-cart.in-cart:hover,
.product__add-cart.in-cart:hover,
.cute-stationery__add-cart.in-cart:hover,
.cute-stationery__add-cart-mobile.in-cart:hover {
    background: #218838 !important;
    transform: scale(1.1);
}

/* Wishlist Button States - Enhanced */
.wishlist-btn.in-wishlist {
    background: rgba(233, 92, 103, 0.1) !important;
    border: 1px solid var(--coral-red) !important;
}

.wishlist-btn.in-wishlist i {
    color: var(--coral-red) !important;
}

.wishlist-btn.in-wishlist:hover {
    background: rgba(233, 92, 103, 0.2) !important;
    transform: scale(1.1);
}

.wishlist-btn.in-wishlist:hover i {
    color: var(--coral-red) !important;
    transform: scale(1.1);
}


/* ============================================
   Register Page Styles
   ============================================ */

/* Form Input Focus Effects */
.form-input:focus,
.register-form-input:focus {
    outline: none;
    border-color: var(--coral-red) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(233, 92, 103, 0.1) !important;
    transform: translateY(-2px);
}

/* Register Page Checkbox Styles */
.register-checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    margin: 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.register-checkbox-label:hover {
    border-color: var(--coral-red);
    background: #ffffff;
}

.register-checkbox-label input[type="checkbox"] {
    margin-right: 12px;
    margin-top: 4px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--coral-red);
}

.register-checkbox-label span {
    color: #495057;
    font-size: 14px;
    line-height: 1.6;
}

.register-checkbox-label a {
    color: var(--coral-red);
    text-decoration: none;
    font-weight: 600;
}

.register-checkbox-label a:hover {
    text-decoration: underline;
}

/* Checkbox Label Hover Effect */
.checkbox-label:hover {
    border-color: var(--coral-red) !important;
    background: #ffffff !important;
}

/* Register Button Hover Effects */
.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(233, 92, 103, 0.4) !important;
}

.btn-primary:active {
    transform: translateY(0) !important;
}

/* Password Strength Indicator Styles */
#passwordStrengthBar.weak {
    width: 33% !important;
    background: #dc3545 !important;
}

#passwordStrengthBar.medium {
    width: 66% !important;
    background: #ffc107 !important;
}

#passwordStrengthBar.strong {
    width: 100% !important;
    background: #28a745 !important;
}

/* Register Section */
.register-section {
    padding: 60px 0 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 400px);
}

/* Register Card */
.register-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    padding: 50px;
    position: relative;
    overflow: hidden;
}

/* Register Card Decorative Elements */
.register-card__decoration-top {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(55, 78, 148, 0.05), rgba(233, 92, 103, 0.05));
    border-radius: 50%;
    z-index: 0;
}

.register-card__decoration-bottom {
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, rgba(233, 92, 103, 0.05), rgba(55, 78, 148, 0.05));
    border-radius: 50%;
    z-index: 0;
}

.register-card__content {
    position: relative;
    z-index: 1;
}

/* Register Header */
.register-header {
    text-align: center;
    margin-bottom: 3rem;
}

.register-icon-badge {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--dark-blue), var(--coral-red));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: 0 8px 20px rgba(55, 78, 148, 0.3);
}

.register-icon-badge i {
    font-size: 2.2rem;
    color: #ffffff;
}

.register-title {
    color: var(--dark-blue);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.register-subtitle {
    color: #6c757d;
    font-size: 15px;
    margin: 0;
}

/* Register Form Labels */
.register-form-label {
    color: #374E94;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    font-size: 14px;
}

.register-form-label i {
    margin-right: 6px;
    color: var(--coral-red);
}

/* Register Form Inputs */
.register-form-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.register-form-input--password {
    padding-right: 45px;
}

.login-form-input--password {
    padding-right: 45px;
}

/* Password Input Wrapper */
.password-input-wrapper {
    position: relative;
}

/* Password Toggle Button */
.password-toggle-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    line-height: 1;
}

.password-toggle-btn:hover {
    color: var(--coral-red);
}

/* Password Strength Indicator */
.password-strength {
    margin-top: 8px;
    height: 4px;
    background: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
    display: none;
}

.password-strength-bar {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.password-hint {
    color: #6c757d;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

.password-match {
    color: #6c757d;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

/* Register Submit Button */
.register-submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 25px;
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.register-submit-btn i {
    margin-right: 8px;
}

/* Register Footer Section */
.register-footer {
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.register-footer p {
    color: #6c757d;
    font-size: 14px;
    margin: 0;
}

.register-footer a {
    color: var(--dark-blue);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s;
}

.register-footer a:hover {
    color: var(--coral-red);
    text-decoration: underline;
}

/* Resend Verification Section */
.resend-verification-section {
    margin-bottom: 2rem;
    animation: slideDown 0.5s ease-out;
}

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

.resend-verification-section .alert {
    border-left: 4px solid #0dcaf0;
    border-radius: 10px;
    padding: 20px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f0f9ff 100%);
    box-shadow: 0 4px 15px rgba(13, 202, 240, 0.15);
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.resend-verification-section .alert i {
    font-size: 24px;
    color: #0dcaf0;
    margin-top: 2px;
    flex-shrink: 0;
}

.resend-verification-content {
    flex: 1;
}

.resend-verification-message {
    font-size: 16px;
    color: #374E94;
    margin: 0;
}

.resend-verification-section .alert p {
    color: #495057;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.resend-verification-form {
    margin-top: 15px;
}

.btn-resend-verification {
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(233, 92, 103, 0.2);
}

.btn-resend-verification:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.3);
}

.btn-resend-verification i {
    margin-right: 8px;
}

/* Register Page Session Alerts */
.register-card__content .alert {
    margin-bottom: 1.5rem;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: slideDown 0.5s ease-out;
}

.register-card__content .alert i {
    font-size: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.register-card__content .alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-left: 4px solid #28a745;
    color: #155724;
}

.register-card__content .alert-success i {
    color: #28a745;
}

.register-card__content .alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-left: 4px solid #ffc107;
    color: #856404;
}

.register-card__content .alert-warning i {
    color: #ffc107;
}

.register-card__content .alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border-left: 4px solid #dc3545;
    color: #721c24;
}

.register-card__content .alert-danger i {
    color: #dc3545;
}

.register-card__content .alert .btn-close {
    margin-left: auto;
    opacity: 0.7;
    padding: 0.5rem;
}

.register-card__content .alert .btn-close:hover {
    opacity: 1;
}

/* Register Page Responsive Styles */
@media (max-width: 768px) {
    .register-card {
        padding: 35px 25px !important;
    }

    .register-title {
        font-size: 26px;
    }

    .register-icon-badge {
        width: 70px;
        height: 70px;
    }

    .register-icon-badge i {
        font-size: 1.8rem;
    }

    .resend-verification-section .alert {
        padding: 16px;
        flex-direction: column;
        gap: 12px;
    }

    .resend-verification-section .alert i {
        align-self: flex-start;
    }

    .btn-resend-verification {
        width: 100%;
        padding: 14px 20px;
    }
}

/* ============================================
   Login Page Styles
   ============================================ */

/* Login Section */
.login-section {
    padding: 60px 0 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 400px);
}

/* Login Card */
.login-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    padding: 50px;
    position: relative;
    overflow: hidden;
}

/* Login Card Decorative Elements */
.login-card__decoration-top {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(55, 78, 148, 0.05), rgba(233, 92, 103, 0.05));
    border-radius: 50%;
    z-index: 0;
}

.login-card__decoration-bottom {
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, rgba(233, 92, 103, 0.05), rgba(55, 78, 148, 0.05));
    border-radius: 50%;
    z-index: 0;
}

.login-card__content {
    position: relative;
    z-index: 1;
}

/* Login Header */
.login-header {
    text-align: center;
    margin-bottom: 3rem;
}

.login-icon-badge {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--dark-blue), var(--coral-red));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: 0 8px 20px rgba(55, 78, 148, 0.3);
}

.login-icon-badge i {
    font-size: 2.2rem;
    color: #ffffff;
}

.login-title {
    color: var(--dark-blue);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.login-subtitle {
    color: #6c757d;
    font-size: 15px;
    margin: 0;
}

/* Login Form Labels */
.login-form-label {
    color: #374E94;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    font-size: 14px;
}

.login-form-label i {
    margin-right: 6px;
    color: var(--coral-red);
}

/* Login Form Inputs */
.login-form-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

/* Login Form Options */
.login-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.login-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.login-checkbox-label input[type="checkbox"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--coral-red);
}

.login-checkbox-label span {
    color: #495057;
    font-size: 14px;
}

.login-forgot-link {
    color: var(--coral-red);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.login-forgot-link:hover {
    color: var(--dark-blue);
    text-decoration: underline;
}

/* Login Submit Button */
.login-submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 25px;
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-submit-btn:hover {
    background: linear-gradient(135deg, #ff6b6b, var(--coral-red));
    box-shadow: 0 8px 25px rgba(233, 92, 103, 0.4);
    transform: translateY(-2px);
}

.login-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(233, 92, 103, 0.3);
}

.login-submit-btn i {
    margin-right: 8px;
}

/* Login Footer Section */
.login-footer {
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.login-footer p {
    color: #6c757d;
    font-size: 14px;
    margin: 0;
}

.login-footer a {
    color: var(--dark-blue);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s;
}

.login-footer a:hover {
    color: var(--coral-red);
    text-decoration: underline;
}

/* Login Page Responsive Styles */
@media (max-width: 768px) {
    .login-card {
        padding: 35px 25px !important;
    }

    .login-title {
        font-size: 26px;
    }

    .login-icon-badge {
        width: 70px;
        height: 70px;
    }

    .login-icon-badge i {
        font-size: 1.8rem;
    }

    .login-form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ============================================
   Forgot Password Page Styles
   ============================================ */

/* Forgot Password Section */
.forgot-password-section {
    padding: 60px 0 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 400px);
}

/* Forgot Password Card */
.forgot-password-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    padding: 50px;
    position: relative;
    overflow: hidden;
}

/* Forgot Password Card Decorative Elements */
.forgot-password-card__decoration-top {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(55, 78, 148, 0.05), rgba(233, 92, 103, 0.05));
    border-radius: 50%;
    z-index: 0;
}

.forgot-password-card__decoration-bottom {
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, rgba(233, 92, 103, 0.05), rgba(55, 78, 148, 0.05));
    border-radius: 50%;
    z-index: 0;
}

.forgot-password-card__content {
    position: relative;
    z-index: 1;
}

/* Forgot Password Header */
.forgot-password-header {
    text-align: center;
    margin-bottom: 3rem;
}

.forgot-password-icon-badge {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--dark-blue), var(--coral-red));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: 0 8px 20px rgba(55, 78, 148, 0.3);
}

.forgot-password-icon-badge i {
    font-size: 2.2rem;
    color: #ffffff;
}

.forgot-password-title {
    color: var(--dark-blue);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.forgot-password-subtitle {
    color: #6c757d;
    font-size: 15px;
    margin: 0;
}

/* Forgot Password Form Labels */
.forgot-password-form-label {
    color: #374E94;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    font-size: 14px;
}

.forgot-password-form-label i {
    margin-right: 6px;
    color: var(--coral-red);
}

/* Forgot Password Form Inputs */
.forgot-password-form-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

/* Forgot Password Submit Button */
.forgot-password-submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 25px;
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.forgot-password-submit-btn:hover {
    background: linear-gradient(135deg, #ff6b6b, var(--coral-red));
    box-shadow: 0 8px 25px rgba(233, 92, 103, 0.4);
    transform: translateY(-2px);
}

.forgot-password-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(233, 92, 103, 0.3);
}

.forgot-password-submit-btn i {
    margin-right: 8px;
}

/* Forgot Password Back Link */
.forgot-password-back-link {
    text-align: center;
    margin-top: 1.5rem;
}

.forgot-password-back-link a {
    color: var(--dark-blue);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.forgot-password-back-link a:hover {
    color: var(--coral-red);
    text-decoration: underline;
}

/* Forgot Password Success Message */
.forgot-password-success {
    display: none;
    margin-top: 20px;
    padding: 15px;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 10px;
    color: #155724;
}

.forgot-password-success i {
    margin-right: 8px;
}

/* Forgot Password Page Responsive Styles */
@media (max-width: 768px) {
    .forgot-password-card {
        padding: 35px 25px !important;
    }

    .forgot-password-title {
        font-size: 26px;
    }

    .forgot-password-icon-badge {
        width: 70px;
        height: 70px;
    }

    .forgot-password-icon-badge i {
        font-size: 1.8rem;
    }
}

/* ============================================
   Reset Password Page Styles
   ============================================ */

/* Reset Password Section */
.reset-password-section {
    padding: 60px 0 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 400px);
}

/* Reset Password Card */
.reset-password-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    padding: 50px;
    position: relative;
    overflow: hidden;
}

/* Reset Password Card Decorative Elements */
.reset-password-card__decoration-top {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(55, 78, 148, 0.05), rgba(233, 92, 103, 0.05));
    border-radius: 50%;
    z-index: 0;
}

.reset-password-card__decoration-bottom {
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, rgba(233, 92, 103, 0.05), rgba(55, 78, 148, 0.05));
    border-radius: 50%;
    z-index: 0;
}

.reset-password-card__content {
    position: relative;
    z-index: 1;
}

/* Reset Password Header */
.reset-password-header {
    text-align: center;
    margin-bottom: 3rem;
}

.reset-password-icon-badge {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--dark-blue), var(--coral-red));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: 0 8px 20px rgba(55, 78, 148, 0.3);
}

.reset-password-icon-badge i {
    font-size: 2.2rem;
    color: #ffffff;
}

.reset-password-title {
    color: var(--dark-blue);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.reset-password-subtitle {
    color: #6c757d;
    font-size: 15px;
    margin: 0;
}

/* Reset Password Form Labels */
.reset-password-form-label {
    color: #374E94;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    font-size: 14px;
}

.reset-password-form-label i {
    margin-right: 6px;
    color: var(--coral-red);
}

/* Reset Password Form Inputs */
.reset-password-form-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.reset-password-form-input:focus {
    outline: none;
    border-color: var(--dark-blue);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(55, 78, 148, 0.1);
}

.reset-password-form-input--password {
    padding-right: 50px;
}

/* Reset Password Submit Button */
.reset-password-submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 25px;
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reset-password-submit-btn:hover {
    background: linear-gradient(135deg, #ff6b6b, var(--coral-red));
    box-shadow: 0 8px 25px rgba(233, 92, 103, 0.4);
    transform: translateY(-2px);
}

.reset-password-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(233, 92, 103, 0.3);
}

.reset-password-submit-btn i {
    margin-right: 8px;
}

/* Reset Password Back Link */
.reset-password-back-link {
    text-align: center;
    margin-top: 1.5rem;
}

.reset-password-back-link a {
    color: var(--dark-blue);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.reset-password-back-link a:hover {
    color: var(--coral-red);
    text-decoration: underline;
}

/* Reset Password Page Responsive Styles */
@media (max-width: 768px) {
    .reset-password-card {
        padding: 35px 25px !important;
    }

    .reset-password-title {
        font-size: 26px;
    }

    .reset-password-icon-badge {
        width: 70px;
        height: 70px;
    }

    .reset-password-icon-badge i {
        font-size: 1.8rem;
    }
}

/* ============================================
   Bootstrap Form Error Messages Styles
   ============================================ */

/* Custom styling for Bootstrap invalid-feedback */
.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 8px;
    font-size: 13px;
    color: #dc3545;
    animation: slideDown 0.3s ease-out;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
/* Support for password fields with wrapper - show error when input is invalid */
.form-group:has(.register-form-input.is-invalid) .invalid-feedback,
.form-group:has(.login-form-input.is-invalid) .invalid-feedback,
.form-group:has(.forgot-password-form-input.is-invalid) .invalid-feedback {
    display: block;
}

/* Custom styling for invalid inputs */
.form-input.is-invalid,
.login-form-input.is-invalid,
.register-form-input.is-invalid,
.forgot-password-form-input.is-invalid {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.form-input.is-invalid:focus,
.login-form-input.is-invalid:focus,
.register-form-input.is-invalid:focus,
.forgot-password-form-input.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Custom field error message */
.field-error-message {
    display: block;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    animation: slideDown 0.3s ease-out;
    font-weight: 500;
}

/* General form validation error */
.form-general-error {
    display: block;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    background-color: #f8d7da;
    color: #721c24;
    animation: slideDown 0.3s ease-out;
}

.form-general-error strong {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.form-general-error i {
    font-size: 1.1rem;
}

/* Success State (Optional) */
.form-input.is-valid,
.login-form-input.is-valid,
.register-form-input.is-valid,
.forgot-password-form-input.is-valid {
    border-color: #28a745;
    background-color: #f0fff4;
}

.form-input.is-valid:focus,
.login-form-input.is-valid:focus,
.register-form-input.is-valid:focus,
.forgot-password-form-input.is-valid:focus {
    border-color: #28a745;
}

/* Review Form Invalid Feedback */
.invalid-feedback--review {
    margin-top: 10px;
}

/* Animation for Error Message */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Error Messages */
@media (max-width: 768px) {
    .invalid-feedback {
        font-size: 12px;
    }
}

/* ============================================
   Content Page Templates Styles
   ============================================ */

/* Modern About Page Styles */
.about-page-new {
    background: #ffffff;
}

/* Hero Section */
.about-hero {
    background: linear-gradient(135deg, var(--dark-blue) 0%, var(--teal) 50%, var(--sky-blue) 100%);
    padding: 1.5rem 0;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
    opacity: 0.3;
}

.about-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.about-hero-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.about-hero-icon i {
    font-size: 1.5rem;
    color: white;
}

.about-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    font-family: 'Oswald', sans-serif;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.about-hero p {
    font-size: 1rem;
    opacity: 0.95;
    margin: 0;
    font-weight: 400;
}

/* Section Label */
.section-label {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: var(--coral-red);
    color: white;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--dark-blue);
    margin: 0.5rem 0 0;
    font-family: 'Oswald', sans-serif;
}

.section-description {
    font-size: 1.1rem;
    color: #6c757d;
    margin-top: 0.75rem;
}

/* Who We Are Section */
.about-who-section {
    padding: 5rem 0;
    background: white;
}

.about-who-section h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--dark-blue);
    margin-bottom: 1.5rem;
    font-family: 'Oswald', sans-serif;
}

.about-who-section p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #495057;
    margin-bottom: 1.25rem;
}

.stats-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 1rem;
}

.stat-card {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-left: 4px solid;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.stat-card-1 {
    border-left-color: var(--teal);
}

.stat-card-2 {
    border-left-color: var(--coral-red);
}

.stat-card-3 {
    border-left-color: var(--golden-orange);
}

.stat-card-4 {
    border-left-color: var(--lavender);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.stat-card-1 .stat-icon {
    background: var(--teal);
}

.stat-card-2 .stat-icon {
    background: var(--coral-red);
}

.stat-card-3 .stat-icon {
    background: var(--golden-orange);
}

.stat-card-4 .stat-icon {
    background: var(--lavender);
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark-blue);
    margin-bottom: 0.25rem;
    font-family: 'Oswald', sans-serif;
}

.stat-info {
    flex: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

/* Mission & Vision */
.about-mission-vision {
    padding: 5rem 0;
    background: linear-gradient(135deg, rgba(233, 92, 103, 0.12) 0%, rgba(255, 183, 77, 0.1) 100%);
    width: 100%;
}

.mission-box,
.vision-box {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    height: 100%;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-top: 4px solid;
}

.mission-box {
    border-top-color: var(--coral-red);
}

.vision-box {
    border-top-color: var(--sky-blue);
}

.mission-box:hover,
.vision-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.mission-header,
.vision-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.mission-icon,
.vision-icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
}

.mission-icon {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.mission-icon i {
    color: white;
    font-size: 1.75rem;
    display: block;
}

.vision-icon {
    background: linear-gradient(135deg, var(--sky-blue) 0%, var(--teal) 100%);
}

.vision-icon i {
    color: white;
    font-size: 1.75rem;
    display: block;
}

.mission-header h3,
.vision-header h3 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dark-blue);
    margin: 0;
    font-family: 'Oswald', sans-serif;
}

.mission-box p,
.vision-box p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #495057;
    margin: 0;
}

/* Values Section */
.about-values-new {
    padding: 5rem 0;
    background: white;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.value-card-new {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
    position: relative;
    overflow: hidden;
}

.value-card-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: all 0.3s ease;
}

.value-1::before {
    background: var(--teal);
}

.value-2::before {
    background: var(--coral-red);
}

.value-3::before {
    background: var(--golden-orange);
}

.value-4::before {
    background: var(--lavender);
}

.value-5::before {
    background: var(--sky-blue);
}

.value-6::before {
    background: var(--light-green);
}

.value-card-new:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.value-icon-new {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    transition: all 0.3s ease;
}

.value-1 .value-icon-new {
    background: linear-gradient(135deg, var(--teal) 0%, var(--sky-blue) 100%);
}

.value-2 .value-icon-new {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.value-3 .value-icon-new {
    background: linear-gradient(135deg, var(--golden-orange) 0%, var(--light-green) 100%);
}

.value-4 .value-icon-new {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--teal) 100%);
}

.value-5 .value-icon-new {
    background: linear-gradient(135deg, var(--sky-blue) 0%, var(--dark-blue) 100%);
}

.value-6 .value-icon-new {
    background: linear-gradient(135deg, var(--light-green) 0%, var(--teal) 100%);
}

.value-card-new:hover .value-icon-new {
    transform: scale(1.1) rotate(5deg);
}

.value-card-new h4 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 0.75rem;
    font-family: 'Oswald', sans-serif;
}

.value-card-new p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #6c757d;
    margin: 0;
}

/* Journey Section */
.about-journey-new {
    padding: 5rem 0;
    background: linear-gradient(135deg, rgba(52, 73, 94, 0.1) 0%, rgba(128, 188, 192, 0.12) 100%);
    width: 100%;
}

.journey-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.journey-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-top: 4px solid;
    position: relative;
}

.journey-card:nth-child(1) {
    border-top-color: var(--teal);
}

.journey-card:nth-child(2) {
    border-top-color: var(--coral-red);
}

.journey-card:nth-child(3) {
    border-top-color: var(--golden-orange);
}

.journey-card:nth-child(4) {
    border-top-color: var(--lavender);
}

.journey-card:nth-child(5) {
    border-top-color: var(--sky-blue);
}

.journey-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.journey-year {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    font-family: 'Oswald', sans-serif;
    color: white;
}

.journey-card:nth-child(1) .journey-year {
    background: var(--teal);
}

.journey-card:nth-child(2) .journey-year {
    background: var(--coral-red);
}

.journey-card:nth-child(3) .journey-year {
    background: var(--golden-orange);
}

.journey-card:nth-child(4) .journey-year {
    background: var(--lavender);
}

.journey-card:nth-child(5) .journey-year {
    background: var(--sky-blue);
}

.journey-card h4 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1rem;
    font-family: 'Oswald', sans-serif;
}

.journey-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #6c757d;
    margin: 0;
}

/* Team Section */
.about-team-new {
    padding: 5rem 0;
    background: white;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.team-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid #e9ecef;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    border-color: transparent;
}

.team-avatar-new {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
    position: relative;
}

.team-card:nth-child(1) .team-avatar-new {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.team-card:nth-child(2) .team-avatar-new {
    background: linear-gradient(135deg, var(--teal) 0%, var(--sky-blue) 100%);
}

.team-card:nth-child(3) .team-avatar-new {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--teal) 100%);
}

.team-card:nth-child(4) .team-avatar-new {
    background: linear-gradient(135deg, var(--golden-orange) 0%, var(--light-green) 100%);
}

.team-card h4 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
    font-family: 'Oswald', sans-serif;
}

.team-role-new {
    font-size: 0.95rem;
    color: var(--coral-red);
    font-weight: 600;
    margin-bottom: 1rem;
}

.team-bio-new {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #6c757d;
    margin: 0;
}

/* Why Choose Us */
.about-why-new {
    padding: 5rem 0;
    background: linear-gradient(135deg, rgba(255, 183, 77, 0.12) 0%, rgba(233, 92, 103, 0.1) 100%);
    width: 100%;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.why-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid #e9ecef;
    position: relative;
    overflow: hidden;
}

.why-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.why-1::before {
    background: var(--teal);
}

.why-2::before {
    background: var(--coral-red);
}

.why-3::before {
    background: var(--golden-orange);
}

.why-4::before {
    background: var(--lavender);
}

.why-5::before {
    background: var(--sky-blue);
}

.why-6::before {
    background: var(--light-green);
}

.why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    border-color: transparent;
}

.why-icon-new {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    transition: all 0.3s ease;
}

.why-1 .why-icon-new {
    background: linear-gradient(135deg, var(--teal) 0%, var(--sky-blue) 100%);
}

.why-2 .why-icon-new {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.why-3 .why-icon-new {
    background: linear-gradient(135deg, var(--golden-orange) 0%, var(--light-green) 100%);
}

.why-4 .why-icon-new {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--teal) 100%);
}

.why-5 .why-icon-new {
    background: linear-gradient(135deg, var(--sky-blue) 0%, var(--dark-blue) 100%);
}

.why-6 .why-icon-new {
    background: linear-gradient(135deg, var(--light-green) 0%, var(--teal) 100%);
}

.why-card:hover .why-icon-new {
    transform: scale(1.1) rotate(-5deg);
}

.why-card h4 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 0.75rem;
    font-family: 'Oswald', sans-serif;
}

.why-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #6c757d;
    margin: 0;
}

/* Breadcrumb Styles */
.breadcrumb-wrapper {
    background-color: #f8f9fa;
    padding: 0.15rem 0;
    border-bottom: 1px solid #e9ecef;
    min-height: auto;
}

.breadcrumb-custom {
    background: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    list-style: none;
    flex-wrap: wrap;
    font-size: 0.75rem;
    line-height: 1;
    min-height: auto;
}

.breadcrumb-custom li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.breadcrumb-custom li + li::before {
    content: "/";
    padding: 0 0.35rem;
    color: #6c757d;
    font-size: 0.75rem;
}

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

.breadcrumb-custom a:hover {
    color: var(--dark-blue);
}

.breadcrumb-custom .active {
    color: #6c757d;
}

/* Content Page Section */
.content-page-section {
    padding: 3rem 0;
    background-color: #ffffff;
}

.content-page-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.content-page-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
    flex-wrap: wrap;
}

.content-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.content-meta-item i {
    color: var(--teal);
}

/* Content Page Body */
.content-page-body {
    line-height: 1.8;
    color: #495057;
}

.content-page-body h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-family: 'Oswald', sans-serif;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--teal);
}

.content-page-body h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.content-page-body p {
    margin-bottom: 1.25rem;
    font-size: 1rem;
    color: #495057;
}

.content-welcome-box {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

.content-mission-modern {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    background: linear-gradient(135deg, var(--teal) 0%, var(--dark-blue) 100%);
    padding: 2rem;
    border-radius: 12px;
    margin: 2.5rem 0;
    color: white;
    box-shadow: 0 8px 25px rgba(128, 188, 192, 0.3);
}

.mission-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mission-icon i {
    font-size: 2rem;
    color: white;
}

.mission-content h3 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-family: 'Oswald', sans-serif;
}

.mission-content p {
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
}

.content-page-body ul,
.content-page-body ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.content-page-body li {
    margin-bottom: 0.75rem;
}

.content-page-body a {
    color: var(--teal);
    text-decoration: none;
    transition: color 0.3s ease;
}

.content-page-body a:hover {
    color: var(--dark-blue);
    text-decoration: underline;
}

/* Highlight Box */
.content-highlight-box {
    background: linear-gradient(135deg, rgba(128, 188, 192, 0.1) 0%, rgba(128, 188, 192, 0.05) 100%);
    border-left: 4px solid var(--teal);
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 4px;
}

.content-highlight-box p {
    margin-bottom: 0;
    font-weight: 500;
    color: var(--dark-blue);
}

/* Feature Grid */
.content-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.content-feature-card {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.content-feature-card:hover {
    border-color: var(--teal);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(128, 188, 192, 0.2);
}

.content-feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--teal) 0%, var(--dark-blue) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}

.content-feature-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 0.75rem;
    font-family: 'Oswald', sans-serif;
}

.content-feature-text {
    color: #6c757d;
    line-height: 1.6;
    margin: 0;
}

/* Step Box */
.content-step-box {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    border-left: 5px solid var(--teal);
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.content-step-box:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transform: translateX(5px);
}

.content-step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--dark-blue) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    flex-shrink: 0;
    font-family: 'Oswald', sans-serif;
}

.content-step-content h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
}

.content-step-content p {
    margin: 0;
    color: #6c757d;
    line-height: 1.7;
}

/* CTA Box */
.content-cta-box {
    background: linear-gradient(135deg, var(--teal) 0%, var(--dark-blue) 100%);
    color: white;
    padding: 3rem;
    border-radius: 16px;
    text-align: center;
    margin: 4rem 0;
}

.content-cta-box h3 {
    color: white;
    margin-bottom: 1rem;
}

.content-cta-box p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.content-cta-box .btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: white;
    color: var(--teal);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.content-cta-box .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: var(--teal);
}

.content-cta-box .btn-light {
    background: white;
    color: var(--teal);
}

.content-cta-box .btn-light:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--dark-blue);
}

/* Info Card */
.info-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--teal);
    border-radius: 6px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    height: 100%;
}

.info-card-title {
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-card-title i {
    color: var(--teal);
}

.info-card p {
    margin-bottom: 0;
    line-height: 1.7;
}

/* Table Styles */
.table-responsive {
    margin: 1.5rem 0;
    overflow-x: auto;
}

.table-custom {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.table-custom th {
    background: var(--teal);
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
}

.table-custom td {
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.table-custom tr:hover {
    background-color: #f8f9fa;
}

/* Contact Form */
.contact-form {
    margin-top: 2rem;
}

.contact-form .form-label {
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
}

.contact-form .form-input {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

.contact-form .form-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 0.2rem rgba(128, 188, 192, 0.25);
    outline: none;
}

/* FAQs Accordion */
.faqs-accordion {
    margin: 2rem 0;
}

.faqs-accordion .accordion-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.faqs-accordion .accordion-button {
    background-color: #f8f9fa;
    color: var(--dark-blue);
    font-weight: 600;
    padding: 1.25rem 1.5rem;
    border: none;
    box-shadow: none;
}

.faqs-accordion .accordion-button:not(.collapsed) {
    background-color: var(--teal);
    color: white;
}

.faqs-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.faqs-accordion .accordion-body {
    padding: 1.5rem;
    background-color: white;
    color: #495057;
    line-height: 1.7;
}

/* Testimonial Card */
.testimonial-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.testimonial-card__rating {
    color: #ffc107;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.testimonial-card__text {
    color: #495057;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    font-style: italic;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
}

.testimonial-card__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal) 0%, var(--dark-blue) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.testimonial-card__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin: 0 0 0.25rem 0;
    font-family: 'Oswald', sans-serif;
}

.testimonial-card__role {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
}

/* Modern List */
.content-list-modern {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.content-list-modern li {
    padding: 1rem 0 1rem 3rem;
    position: relative;
    margin-bottom: 0.5rem;
    color: #495057;
    line-height: 1.7;
    font-size: 1.05rem;
}

.content-list-modern li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1rem;
    color: var(--teal);
    font-size: 1.1rem;
}

/* Modern Features */
.content-features-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.content-feature-modern {
    display: flex;
    gap: 1.25rem;
    padding: 1.75rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.content-feature-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(128, 188, 192, 0.2);
    border-color: var(--teal);
}

.feature-icon-wrapper {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--dark-blue) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(128, 188, 192, 0.3);
}

.feature-icon-wrapper i {
    font-size: 1.5rem;
    color: white;
}

.feature-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
    font-family: 'Oswald', sans-serif;
}

.feature-content p {
    margin: 0;
    color: #6c757d;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Modern Values */
.content-values-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.content-value-modern {
    text-align: center;
    padding: 2.5rem 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
    position: relative;
    overflow: hidden;
}

.content-value-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--teal) 0%, var(--dark-blue) 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.content-value-modern:hover::before {
    transform: scaleX(1);
}

.content-value-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(128, 188, 192, 0.25);
    border-color: var(--teal);
}

.value-icon-circle {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--teal) 0%, var(--dark-blue) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(128, 188, 192, 0.4);
    transition: all 0.3s ease;
}

.content-value-modern:hover .value-icon-circle {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(128, 188, 192, 0.5);
}

.value-icon-circle i {
    font-size: 2rem;
    color: white;
}

.content-value-modern h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 0.75rem;
    font-family: 'Oswald', sans-serif;
}

.content-value-modern p {
    margin: 0;
    color: #6c757d;
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Modern Commitment */
.content-commitment-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}

.commitment-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border-left: 4px solid var(--teal);
}

.commitment-item:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(128, 188, 192, 0.2);
    border-left-color: var(--dark-blue);
}

.commitment-item i {
    font-size: 1.5rem;
    color: var(--teal);
    width: 40px;
    text-align: center;
    transition: all 0.3s ease;
}

.commitment-item:hover i {
    color: var(--dark-blue);
    transform: scale(1.2);
}

.commitment-item span {
    color: var(--dark-blue);
    font-weight: 500;
    font-size: 0.95rem;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .values-grid,
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .about-hero {
        padding: 1.25rem 0;
    }

    .about-hero-icon {
        width: 45px;
        height: 45px;
    }

    .about-hero-icon i {
        font-size: 1.25rem;
    }

    .about-hero h1 {
        font-size: 1.5rem;
    }

    .about-hero p {
        font-size: 0.9rem;
    }

    .about-who-section,
    .about-mission-vision,
    .about-values-new,
    .about-journey-new,
    .about-team-new,
    .about-why-new {
        padding: 3rem 0;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .about-who-section h2 {
        font-size: 1.75rem;
    }

    .stats-showcase {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-card {
        padding: 1.5rem;
    }

    .mission-box,
    .vision-box {
        padding: 2rem 1.5rem;
    }

    .mission-icon,
    .vision-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .mission-header h3,
    .vision-header h3 {
        font-size: 1.5rem;
    }

    .values-grid,
    .journey-cards,
    .team-grid,
    .why-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .value-card-new,
    .journey-card,
    .team-card,
    .why-card {
        padding: 2rem 1.5rem;
    }

    .team-avatar-new {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }
}

/* ============================================
   CONTACT PAGE STYLES
   ============================================ */

/* Contact Page Container */
.contact-page-new {
    background: #f8f9fa;
}

/* Contact Hero Section */
.contact-hero {
    background: linear-gradient(135deg, var(--dark-blue) 0%, var(--coral-red) 100%);
    padding: 1.5rem 0;
    position: relative;
    overflow: hidden;
}

.contact-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 0;
}

.contact-hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.contact-hero-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.contact-hero-icon i {
    font-size: 1.5rem;
    color: white;
}

.contact-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
    font-family: 'Oswald', sans-serif;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.contact-hero p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Contact Info Section */
.contact-info-section {
    padding: 4rem 0;
    background: white;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.contact-info-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
    position: relative;
    overflow: hidden;
}

.contact-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: all 0.3s ease;
}

.contact-info-1::before {
    background: linear-gradient(135deg, var(--teal) 0%, var(--sky-blue) 100%);
}

.contact-info-2::before {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.contact-info-3::before {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 100%);
}

.contact-info-4::before {
    background: linear-gradient(135deg, var(--golden-orange) 0%, var(--coral-red) 100%);
}

.contact-info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border-color: transparent;
}

.contact-info-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: white;
    transition: all 0.3s ease;
}

.contact-info-1 .contact-info-icon {
    background: linear-gradient(135deg, var(--teal) 0%, var(--sky-blue) 100%);
}

.contact-info-2 .contact-info-icon {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.contact-info-3 .contact-info-icon {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 100%);
}

.contact-info-4 .contact-info-icon {
    background: linear-gradient(135deg, var(--golden-orange) 0%, var(--coral-red) 100%);
}

.contact-info-card:hover .contact-info-icon {
    transform: scale(1.1) rotate(5deg);
}

.contact-info-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1rem;
    font-family: 'Oswald', sans-serif;
}

.contact-info-card p {
    font-size: 1rem;
    line-height: 1.8;
    color: #6c757d;
    margin: 0;
}

/* Contact Form Section */
.contact-form-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, rgba(233, 92, 103, 0.08) 0%, rgba(158, 189, 213, 0.08) 100%);
    width: 100%;
}

.contact-form-section .row {
    align-items: stretch;
}

.contact-form-wrapper {
    background: white;
    padding: 3.5rem;
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.contact-form-modern {
    margin-top: 2.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contact-form-modern .contact-form-submit {
    margin-top: auto;
}

.contact-form-label {
    display: block;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.contact-form-label i {
    margin-right: 0.5rem;
    color: var(--coral-red);
}

.contact-form-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f8f9fa;
    font-family: inherit;
}

.contact-form-input:focus {
    outline: none;
    border-color: var(--coral-red);
    background: white;
    box-shadow: 0 0 0 4px rgba(233, 92, 103, 0.1);
}

.contact-form-textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-form-submit {
    background: linear-gradient(135deg, var(--dark-blue) 0%, var(--coral-red) 100%);
    color: white;
    border: none;
    padding: 1.125rem 2.5rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(55, 78, 148, 0.3);
}

.contact-form-submit i {
    font-size: 1rem;
}

/* Contact Sidebar */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

.contact-sidebar-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-top: 4px solid;
}

.contact-sidebar-card:nth-child(1) {
    border-top-color: var(--coral-red);
}

.contact-sidebar-card:nth-child(2) {
    border-top-color: var(--teal);
}

.contact-sidebar-card:nth-child(3) {
    border-top-color: var(--golden-orange);
}

.contact-sidebar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.contact-sidebar-icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.75rem;
    color: white;
}

.contact-sidebar-card:nth-child(1) .contact-sidebar-icon {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.contact-sidebar-card:nth-child(2) .contact-sidebar-icon {
    background: linear-gradient(135deg, var(--teal) 0%, var(--sky-blue) 100%);
}

.contact-sidebar-card:nth-child(3) .contact-sidebar-icon {
    background: linear-gradient(135deg, var(--golden-orange) 0%, var(--coral-red) 100%);
}

.contact-sidebar-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1rem;
    font-family: 'Oswald', sans-serif;
}

.contact-sidebar-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.contact-sidebar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--coral-red);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.contact-sidebar-link:hover {
    color: var(--dark-blue);
    gap: 0.75rem;
    text-decoration: none;
}

.contact-social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.contact-social-link {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dark-blue) 0%, var(--coral-red) 100%);
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.contact-social-link:hover {
    transform: translateY(-3px) rotate(5deg);
    box-shadow: 0 6px 20px rgba(55, 78, 148, 0.3);
    color: white;
    text-decoration: none;
}

/* Contact Map Section */
.contact-map-section {
    padding: 5rem 0;
    background: white;
    width: 100%;
}

.contact-map-wrapper {
    margin-top: 2.5rem;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.contact-map-placeholder {
    background: linear-gradient(135deg, rgba(55, 78, 148, 0.05) 0%, rgba(233, 92, 103, 0.05) 100%);
    padding: 6rem 2rem;
    text-align: center;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contact-map-placeholder i {
    font-size: 5rem;
    color: var(--coral-red);
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.contact-map-placeholder p {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
    font-family: 'Oswald', sans-serif;
}

.contact-map-placeholder span {
    font-size: 1rem;
    color: #6c757d;
}

/* Responsive Design for Contact Page */
@media (max-width: 992px) {
    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-hero h1 {
        font-size: 1.75rem;
    }

    .contact-form-wrapper {
        padding: 2.5rem;
    }
}

@media (max-width: 768px) {
    .contact-hero {
        padding: 1.25rem 0;
    }

    .contact-hero-icon {
        width: 45px;
        height: 45px;
    }

    .contact-hero-icon i {
        font-size: 1.25rem;
    }

    .contact-hero h1 {
        font-size: 1.5rem;
    }

    .contact-hero p {
        font-size: 0.9rem;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-info-card {
        padding: 2rem 1.5rem;
    }

    .contact-form-section {
        padding: 3rem 0;
    }

    .contact-form-wrapper {
        padding: 2rem;
    }

    .contact-map-section {
        padding: 3rem 0;
    }

    .contact-map-placeholder {
        padding: 4rem 1.5rem;
        min-height: 300px;
    }

    .contact-map-placeholder i {
        font-size: 3.5rem;
    }
}

/* ============================================
   POLICY/DISCLAIMER PAGE STYLES
   ============================================ */

/* Policy Page Container */
.policy-page-new {
    background: #f8f9fa;
}

/* Policy Hero Section */
.policy-hero {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 50%, var(--teal) 100%);
    padding: 1.5rem 0;
    position: relative;
    overflow: hidden;
}

.policy-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 0;
}

.policy-hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.policy-hero-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.policy-hero-icon i {
    font-size: 1.5rem;
    color: white;
}

.policy-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
    font-family: 'Oswald', sans-serif;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.policy-hero p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Policy Content Section */
.policy-content-section {
    padding: 5rem 0;
    background: white;
    width: 100%;
}

.policy-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.policy-intro {
    background: linear-gradient(135deg, rgba(233, 92, 103, 0.08) 0%, rgba(158, 189, 213, 0.08) 100%);
    padding: 2.5rem;
    border-radius: 20px;
    margin-bottom: 3rem;
    border-left: 4px solid var(--coral-red);
}

.policy-intro-text {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--dark-blue);
    margin: 0;
    font-weight: 500;
}

.policy-sections {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.policy-section {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border-top: 4px solid;
}

.policy-section:nth-child(1) {
    border-top-color: var(--coral-red);
}

.policy-section:nth-child(2) {
    border-top-color: var(--teal);
}

.policy-section:nth-child(3) {
    border-top-color: var(--golden-orange);
}

.policy-section:nth-child(4) {
    border-top-color: var(--lavender);
}

.policy-section:nth-child(5) {
    border-top-color: var(--sky-blue);
}

.policy-section:nth-child(6) {
    border-top-color: var(--coral-red);
}

.policy-section:nth-child(7) {
    border-top-color: var(--teal);
}

.policy-section:nth-child(8) {
    border-top-color: var(--golden-orange);
}

.policy-section:nth-child(9) {
    border-top-color: var(--lavender);
}

.policy-section:nth-child(10) {
    border-top-color: var(--sky-blue);
}

.policy-section:nth-child(11) {
    border-top-color: var(--coral-red);
}

.policy-section:nth-child(12) {
    border-top-color: var(--teal);
}

.policy-section:nth-child(13) {
    border-top-color: var(--golden-orange);
}

.policy-section:nth-child(14) {
    border-top-color: var(--lavender);
}

.policy-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.policy-section-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.policy-section-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.policy-section-icon i {
    color: white;
    font-size: 1.5rem;
    display: block;
}

.policy-section:nth-child(1) .policy-section-icon {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.policy-section:nth-child(2) .policy-section-icon {
    background: linear-gradient(135deg, var(--teal) 0%, var(--sky-blue) 100%);
}

.policy-section:nth-child(3) .policy-section-icon {
    background: linear-gradient(135deg, var(--golden-orange) 0%, var(--coral-red) 100%);
}

.policy-section:nth-child(4) .policy-section-icon {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 100%);
}

.policy-section:nth-child(5) .policy-section-icon {
    background: linear-gradient(135deg, var(--sky-blue) 0%, var(--teal) 100%);
}

.policy-section:nth-child(6) .policy-section-icon {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.policy-section:nth-child(7) .policy-section-icon {
    background: linear-gradient(135deg, var(--teal) 0%, var(--sky-blue) 100%);
}

.policy-section:nth-child(8) .policy-section-icon {
    background: linear-gradient(135deg, var(--golden-orange) 0%, var(--coral-red) 100%);
}

.policy-section:nth-child(9) .policy-section-icon {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 100%);
}

.policy-section:nth-child(10) .policy-section-icon {
    background: linear-gradient(135deg, var(--sky-blue) 0%, var(--teal) 100%);
}

.policy-section:nth-child(11) .policy-section-icon {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.policy-section:nth-child(12) .policy-section-icon {
    background: linear-gradient(135deg, var(--teal) 0%, var(--sky-blue) 100%);
}

.policy-section:nth-child(13) .policy-section-icon {
    background: linear-gradient(135deg, var(--golden-orange) 0%, var(--coral-red) 100%);
}

.policy-section:nth-child(14) .policy-section-icon {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 100%);
}

.policy-section-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin: 0;
    font-family: 'Oswald', sans-serif;
}

.policy-section-content {
    color: #495057;
}

.policy-section-content p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #495057;
    margin-bottom: 1.25rem;
}

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

.policy-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.policy-list li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #495057;
}

.policy-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--coral-red);
    font-size: 0.9rem;
}

.policy-contact-info {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 12px;
    margin-top: 1rem;
}

.policy-contact-info p {
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.policy-contact-info p:last-child {
    margin-bottom: 0;
}

.policy-contact-info a {
    color: var(--coral-red);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.policy-contact-info a:hover {
    color: var(--dark-blue);
    text-decoration: underline;
}

.policy-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e9ecef;
    text-align: center;
}

.policy-last-updated {
    font-size: 0.95rem;
    color: #6c757d;
    margin: 0;
}

.policy-last-updated strong {
    color: var(--dark-blue);
    font-weight: 600;
}

/* Responsive Design for Policy Page */
@media (max-width: 768px) {
    .policy-hero {
        padding: 1.25rem 0;
    }

    .policy-hero h1 {
        font-size: 1.5rem;
    }

    .policy-hero p {
        font-size: 0.9rem;
    }

    .policy-hero-icon {
        width: 45px;
        height: 45px;
    }

    .policy-hero-icon i {
        font-size: 1.25rem;
    }

    .policy-content-section {
        padding: 3rem 0;
    }

    .policy-content-wrapper {
        padding: 0 1rem;
    }

    .policy-intro {
        padding: 2rem 1.5rem;
    }

    .policy-section {
        padding: 2rem 1.5rem;
    }

    .policy-section-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .policy-section-header h2 {
        font-size: 1.5rem;
    }

    .policy-section-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
}

/* ============================================
   FAQ Page Styles
   ============================================ */

.faq-page-new {
    width: 100%;
}

/* FAQ Hero Section */
.faq-hero {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 50%, var(--teal) 100%);
    padding: 1.5rem 0;
    position: relative;
    overflow: hidden;
}

.faq-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 0;
}

.faq-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 0;
}

.faq-hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.faq-hero-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.faq-hero-icon i {
    font-size: 1.5rem;
    color: white;
}

.faq-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
    font-family: 'Oswald', sans-serif;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.faq-hero p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* FAQ Content Section */
.faq-content-section {
    padding: 5rem 0;
    background: white;
    width: 100%;
}

.faq-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

/* FAQ Intro */
.faq-intro {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.05) 0%, rgba(30, 144, 255, 0.05) 100%);
    padding: 2.5rem;
    border-radius: 20px;
    margin-bottom: 3rem;
    text-align: center;
    border: 1px solid rgba(138, 43, 226, 0.1);
}

.faq-intro-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #495057;
    margin: 0;
}

.faq-intro-text a {
    color: var(--lavender);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.faq-intro-text a:hover {
    color: var(--sky-blue);
    text-decoration: underline;
}

/* FAQ Accordion Wrapper */
.faq-accordion-wrapper {
    margin-bottom: 3rem;
}

.faq-accordion-item {
    background: white;
    border-radius: 16px;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-accordion-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.faq-accordion-header {
    margin: 0;
}

.faq-accordion-button {
    width: 100%;
    padding: 1.5rem 2rem;
    background: white;
    border: none;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.faq-accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.05) 0%, rgba(30, 144, 255, 0.05) 100%);
}

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

.faq-accordion-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
    color: white;
    transition: all 0.3s ease;
}

.faq-accordion-item:nth-child(1) .faq-accordion-icon {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.faq-accordion-item:nth-child(2) .faq-accordion-icon {
    background: linear-gradient(135deg, var(--teal) 0%, var(--sky-blue) 100%);
}

.faq-accordion-item:nth-child(3) .faq-accordion-icon {
    background: linear-gradient(135deg, var(--golden-orange) 0%, var(--coral-red) 100%);
}

.faq-accordion-item:nth-child(4) .faq-accordion-icon {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 100%);
}

.faq-accordion-item:nth-child(5) .faq-accordion-icon {
    background: linear-gradient(135deg, var(--sky-blue) 0%, var(--teal) 100%);
}

.faq-accordion-item:nth-child(6) .faq-accordion-icon {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.faq-accordion-item:nth-child(7) .faq-accordion-icon {
    background: linear-gradient(135deg, var(--teal) 0%, var(--sky-blue) 100%);
}

.faq-accordion-item:nth-child(8) .faq-accordion-icon {
    background: linear-gradient(135deg, var(--golden-orange) 0%, var(--coral-red) 100%);
}

.faq-accordion-item:nth-child(9) .faq-accordion-icon {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 100%);
}

.faq-accordion-item:nth-child(10) .faq-accordion-icon {
    background: linear-gradient(135deg, var(--sky-blue) 0%, var(--teal) 100%);
}

.faq-accordion-title {
    flex: 1;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-blue);
    font-family: 'Oswald', sans-serif;
}

.faq-accordion-arrow {
    font-size: 0.9rem;
    color: var(--lavender);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-accordion-button:not(.collapsed) .faq-accordion-arrow {
    transform: rotate(180deg);
}

.faq-accordion-body {
    padding: 1rem 2rem 1.5rem 2rem;
}

.faq-accordion-body p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #495057;
    margin: 0;
}

.faq-accordion-body a {
    color: var(--lavender);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.faq-accordion-body a:hover {
    color: var(--sky-blue);
    text-decoration: underline;
}

/* FAQ CTA Box */
.faq-cta-box {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 50%, var(--teal) 100%);
    padding: 3.5rem 2.5rem;
    border-radius: 20px;
    text-align: center;
    color: white;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    position: relative;
    overflow: hidden;
}

.faq-cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 0;
}

.faq-cta-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}

.faq-cta-icon i {
    font-size: 2rem;
    color: white;
}

.faq-cta-box h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    font-family: 'Oswald', sans-serif;
    position: relative;
    z-index: 1;
}

.faq-cta-box p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

.faq-cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: white;
    color: var(--lavender);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    font-family: 'Oswald', sans-serif;
}

.faq-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: var(--sky-blue);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .faq-hero {
        padding: 1.25rem 0;
    }

    .faq-hero-icon {
        width: 45px;
        height: 45px;
    }

    .faq-hero-icon i {
        font-size: 1.25rem;
    }

    .faq-hero h1 {
        font-size: 1.5rem;
    }

    .faq-hero p {
        font-size: 0.9rem;
    }

    .faq-content-section {
        padding: 3rem 0;
    }

    .faq-content-wrapper {
        padding: 0 1rem;
    }

    .faq-intro {
        padding: 2rem 1.5rem;
    }

    .faq-intro-text {
        font-size: 1rem;
    }

    .faq-accordion-button {
        padding: 1.25rem 1.5rem;
        gap: 1rem;
    }

    .faq-accordion-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .faq-accordion-title {
        font-size: 1rem;
    }

    .faq-accordion-body {
        padding: 0 1.5rem 1.25rem 1.5rem;
    }

    .faq-accordion-body p {
        font-size: 0.95rem;
    }

    .faq-cta-box {
        padding: 2.5rem 1.5rem;
    }

    .faq-cta-icon {
        width: 70px;
        height: 70px;
    }

    .faq-cta-icon i {
        font-size: 1.75rem;
    }

    .faq-cta-box h3 {
        font-size: 1.5rem;
    }

    .faq-cta-box p {
        font-size: 1rem;
    }

    .faq-cta-button {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
}

/* ============================================
   Testimonials Page Styles
   ============================================ */

.testimonials-page-new {
    width: 100%;
}

/* Testimonials Hero Section */
.testimonials-hero {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 50%, var(--teal) 100%);
    padding: 1.5rem 0;
    position: relative;
    overflow: hidden;
}

.testimonials-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 0;
}

.testimonials-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 0;
}

.testimonials-hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.testimonials-hero-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.testimonials-hero-icon i {
    font-size: 1.5rem;
    color: white;
}

.testimonials-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
    font-family: 'Oswald', sans-serif;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.testimonials-hero p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Testimonials Content Section */
.testimonials-content-section {
    padding: 5rem 0;
    background: white;
    width: 100%;
}

.testimonials-intro {
    text-align: center;
    margin-bottom: 3.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.testimonials-intro-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #495057;
    margin: 0;
}

/* Testimonials Grid */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.testimonial-item {
    width: 100%;
}

.testimonial-card-modern {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.testimonial-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.testimonial-quote-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    opacity: 0.15;
}

.testimonial-item:nth-child(1) .testimonial-quote-icon {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.testimonial-item:nth-child(2) .testimonial-quote-icon {
    background: linear-gradient(135deg, var(--teal) 0%, var(--sky-blue) 100%);
}

.testimonial-item:nth-child(3) .testimonial-quote-icon {
    background: linear-gradient(135deg, var(--golden-orange) 0%, var(--coral-red) 100%);
}

.testimonial-item:nth-child(4) .testimonial-quote-icon {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 100%);
}

.testimonial-item:nth-child(5) .testimonial-quote-icon {
    background: linear-gradient(135deg, var(--sky-blue) 0%, var(--teal) 100%);
}

.testimonial-item:nth-child(6) .testimonial-quote-icon {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.testimonial-rating {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.testimonial-rating i {
    color: #FFD700;
    font-size: 1.1rem;
}

.testimonial-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #495057;
    margin-bottom: 2rem;
    flex: 1;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.testimonial-item:nth-child(1) .testimonial-avatar {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.testimonial-item:nth-child(2) .testimonial-avatar {
    background: linear-gradient(135deg, var(--teal) 0%, var(--sky-blue) 100%);
}

.testimonial-item:nth-child(3) .testimonial-avatar {
    background: linear-gradient(135deg, var(--golden-orange) 0%, var(--coral-red) 100%);
}

.testimonial-item:nth-child(4) .testimonial-avatar {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 100%);
}

.testimonial-item:nth-child(5) .testimonial-avatar {
    background: linear-gradient(135deg, var(--sky-blue) 0%, var(--teal) 100%);
}

.testimonial-item:nth-child(6) .testimonial-avatar {
    background: linear-gradient(135deg, var(--coral-red) 0%, var(--golden-orange) 100%);
}

.testimonial-info {
    flex: 1;
}

.testimonial-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 0.25rem;
    font-family: 'Oswald', sans-serif;
}

.testimonial-role {
    font-size: 0.95rem;
    color: #6c757d;
    margin: 0;
}

/* Testimonials CTA Box */
.testimonials-cta-box {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--sky-blue) 50%, var(--teal) 100%);
    padding: 3.5rem 2.5rem;
    border-radius: 20px;
    text-align: center;
    color: white;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    position: relative;
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
}

.testimonials-cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 0;
}

.testimonials-cta-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}

.testimonials-cta-icon i {
    font-size: 2rem;
    color: white;
}

.testimonials-cta-box h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    font-family: 'Oswald', sans-serif;
    position: relative;
    z-index: 1;
}

.testimonials-cta-box p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

.testimonials-cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: white;
    color: var(--lavender);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    font-family: 'Oswald', sans-serif;
}

.testimonials-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: var(--sky-blue);
}

/* Responsive Styles */
@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .testimonials-hero {
        padding: 1.25rem 0;
    }

    .testimonials-hero-icon {
        width: 45px;
        height: 45px;
    }

    .testimonials-hero-icon i {
        font-size: 1.25rem;
    }

    .testimonials-hero h1 {
        font-size: 1.5rem;
    }

    .testimonials-hero p {
        font-size: 0.9rem;
    }

    .testimonials-content-section {
        padding: 3rem 0;
    }

    .testimonials-intro {
        margin-bottom: 2.5rem;
        padding: 0 1rem;
    }

    .testimonials-intro-text {
        font-size: 1rem;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .testimonial-card-modern {
        padding: 2rem 1.5rem;
    }

    .testimonial-quote-icon {
        width: 45px;
        height: 45px;
        font-size: 1.25rem;
        top: 1.25rem;
        right: 1.25rem;
    }

    .testimonial-text {
        font-size: 1rem;
    }

    .testimonial-avatar {
        width: 50px;
        height: 50px;
        font-size: 1.1rem;
    }

    .testimonial-name {
        font-size: 1rem;
    }

    .testimonial-role {
        font-size: 0.9rem;
    }

    .testimonials-cta-box {
        padding: 2.5rem 1.5rem;
    }

    .testimonials-cta-icon {
        width: 70px;
        height: 70px;
    }

    .testimonials-cta-icon i {
        font-size: 1.75rem;
    }

    .testimonials-cta-box h3 {
        font-size: 1.5rem;
    }

    .testimonials-cta-box p {
        font-size: 1rem;
    }

    .testimonials-cta-button {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
}

/* Mobile Navigation Responsive */
@media (max-width: 767px) {
    .nav-section {
        padding: 0.75rem 0;
    }

    /* Hide desktop navigation on mobile */
    .nav__categories-dropdown,
    .nav__menu {
        display: none;
    }

    /* Hide nav section completely on mobile (hamburger is in header now) */
    .nav-section {
        display: none;
    }
}

/* Navigation Dropdown Responsive */
@media (max-width: 768px) {
    .nav__submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin-top: 0;
        background: rgba(138, 43, 226, 0.03);
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        display: none;
    }

    .nav__item.has-dropdown:hover .nav__submenu,
    .nav__item.has-dropdown.active .nav__submenu {
        display: block;
    }

    .nav__submenu-link {
        padding: 0.75rem 1rem 0.75rem 2rem;
        font-size: 0.9rem;
    }

    .nav__submenu-link:hover {
        padding-left: 2.5rem;
    }
}

/* 404 Error Page Styles */
/* Error Pages - General Styles */
.error-section,
.error-404-section {
    padding: 100px 0;
    background-color: #f8f9fa;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.error-content,
.error-404__content {
    text-align: center;
}

.error-icon,
.error-404__icon {
    font-size: 120px;
    color: var(--lavender);
    margin-bottom: 30px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.error-title,
.error-404__title {
    font-size: 120px;
    font-weight: bold;
    color: var(--lavender);
    margin-bottom: 20px;
    line-height: 1;
}

.error-subtitle,
.error-404__subtitle {
    font-size: 32px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 600;
}

.error-description,
.error-404__description {
    font-size: 18px;
    color: #666;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.error-actions,
.error-404__actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.error-actions .btn,
.error-404__actions .btn {
    padding: 12px 40px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.error-actions .btn:hover,
.error-404__actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.error-actions .btn-primary,
.error-404__actions .btn-primary {
    margin-right: 0;
}

.error-help {
    margin-top: 40px;
    padding: 30px;
    background: white;
    border-radius: 10px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.error-help p {
    margin-bottom: 15px;
    color: #333;
    font-weight: 600;
}

.error-help-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.error-help-list li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: #666;
}

.error-help-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--lavender);
    font-size: 20px;
    line-height: 1;
}

@media (max-width: 768px) {
    .error-section,
    .error-404-section {
        padding: 60px 0;
    }

    .error-icon,
    .error-404__icon {
        font-size: 80px;
        margin-bottom: 20px;
    }

    .error-title,
    .error-404__title {
        font-size: 80px;
        margin-bottom: 15px;
    }

    .error-subtitle,
    .error-404__subtitle {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .error-description,
    .error-404__description {
        font-size: 16px;
        margin-bottom: 30px;
        padding: 0 20px;
    }

    .error-actions,
    .error-404__actions {
        flex-direction: column;
        align-items: center;
    }

    .error-actions .btn,
    .error-404__actions .btn {
        width: 100%;
        max-width: 300px;
    }

    .error-help {
        padding: 20px;
        margin-top: 30px;
    }
}

/* Contact Page Styles */
.contact-section {
    padding: 2rem 0;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
}

.contact-info-card {
    background: white;
    padding: 1.5rem 1.25rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.contact-info-card__icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 0.875rem;
    background: linear-gradient(135deg, var(--coral-red), var(--teal));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4rem;
}

.contact-info-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.625rem;
}

.contact-info-card__text {
    color: #666;
    line-height: 1.5;
    margin: 0;
    font-size: 0.9rem;
}

.contact-info-card__text a {
    color: var(--coral-red);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-card__text a:hover {
    color: var(--dark-blue);
    text-decoration: underline;
}

.contact-info-card__social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.contact-social-link {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--teal), var(--coral-red));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 0.9rem;
}

.contact-social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: white;
}

.contact-form-wrapper {
    background: white;
    padding: 1.75rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.contact-form__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.contact-form__title i {
    color: var(--coral-red);
}

.contact-form .form-group {
    margin-bottom: 1rem;
}

.contact-form .form-label {
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.contact-form .form-label i {
    color: var(--teal);
    font-size: 0.9rem;
}

.contact-form .form-control {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form .form-control:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(128, 188, 192, 0.1);
    outline: none;
}

.contact-form .form-control.is-invalid {
    border-color: var(--coral-red);
}

.contact-form textarea.form-control {
    resize: vertical;
    min-height: 110px;
}

.btn-contact-submit {
    background: linear-gradient(135deg, var(--coral-red), #ff6b6b);
    color: white;
    border: none;
    padding: 0.75rem 1.75rem;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-contact-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 92, 103, 0.4);
    color: white;
}

/* Contact Map Section - Full Width */
.contact-map-section {
    padding: 0;
    margin-top: 2rem;
}

.contact-map-wrapper {
    background: white;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.contact-map-wrapper .container {
    padding-top: 1.25rem;
    padding-bottom: 0.75rem;
    padding-left: 15px;
    padding-right: 15px;
}

.contact-map-container {
    width: 100%;
    padding: 0;
}

.contact-map__title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-map__title i {
    color: var(--coral-red);
}

.contact-map {
    width: 100%;
    height: 450px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.contact-map-placeholder {
    height: 450px;
    background: #f8f9fa;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

.contact-map-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--teal);
    opacity: 0.5;
}

/* Responsive Contact Page */
@media (max-width: 768px) {
    .contact-section {
        padding: 2rem 0;
    }

    .contact-info-card {
        padding: 1.5rem 1.25rem;
        margin-bottom: 1.25rem;
    }

    .contact-form-wrapper {
        padding: 1.5rem 1.25rem;
    }

    .contact-form__title {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .contact-map-section {
        margin-top: 1.5rem;
    }

    .contact-map-wrapper .container {
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }

    .contact-map__title {
        font-size: 1.1rem;
        margin-bottom: 0.625rem;
    }

    .contact-map {
        height: 350px;
    }

    .contact-map-placeholder {
        height: 350px;
    }
}

@media (max-width: 576px) {
    .contact-info-card__icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }

    .contact-info-card__title {
        font-size: 1.05rem;
    }

    .contact-form-wrapper {
        padding: 1.25rem 1rem;
    }

    .contact-form__title {
        font-size: 1.15rem;
        margin-bottom: 0.875rem;
    }

    .contact-map {
        height: 300px;
    }

    .contact-map-placeholder {
        height: 300px;
    }

    .btn-contact-submit {
        width: 100%;
        justify-content: center;
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* Advanced Filters Styles */
.filters-sidebar {
    background: #ffffff;
    padding: 1.75rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    position: sticky;
    top: 20px;
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.filters-header h3 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #2c3e50;
}

.filters-header .clear-filters {
    font-size: 0.875rem;
    color: var(--coral-red);
    text-decoration: none;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.filters-header .clear-filters:hover {
    background: rgba(233, 92, 103, 0.1);
    color: var(--coral-red);
}

.filter-group {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.filter-group:last-child {
    border-bottom: none;
    margin-bottom: 1rem;
}

.filter-group h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

.filter-checkboxes .form-check {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background 0.2s;
}

.filter-checkboxes .form-check:hover {
    background: #f8f9fa;
}

.filter-checkboxes .form-check-input {
    margin-top: 0.25rem;
    cursor: pointer;
}

.filter-checkboxes .form-check-input:checked {
    background-color: var(--coral-red);
    border-color: var(--coral-red);
}

.filter-checkboxes .form-check-label {
    font-size: 0.9rem;
    cursor: pointer;
    color: #495057;
    margin-left: 0.5rem;
    font-weight: 500;
}

.filter-checkboxes .form-check-label:hover {
    color: var(--coral-red);
}

.filter-radio .form-check {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background 0.2s;
}

.filter-radio .form-check:hover {
    background: #f8f9fa;
}

.filter-radio .form-check-input {
    cursor: pointer;
}

.filter-radio .form-check-input:checked {
    background-color: var(--coral-red);
    border-color: var(--coral-red);
}

.filter-radio .form-check-label {
    font-size: 0.9rem;
    cursor: pointer;
    color: #495057;
    margin-left: 0.5rem;
    font-weight: 500;
}

.price-range {
    padding: 0.5rem 0;
}

.price-inputs {
    margin-bottom: 1rem;
    gap: 0.75rem;
}

.price-inputs .form-control {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.price-inputs .form-control:focus {
    border-color: var(--coral-red);
    box-shadow: 0 0 0 0.2rem rgba(233, 92, 103, 0.15);
}

.price-slider {
    margin: 1.25rem 0;
}

.price-slider .form-range {
    height: 6px;
    border-radius: 3px;
}

.price-slider .form-range::-webkit-slider-thumb {
    background-color: var(--coral-red);
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.price-slider .form-range::-moz-range-thumb {
    background-color: var(--coral-red);
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.price-display {
    font-weight: 700;
    color: var(--coral-red);
    font-size: 1.15rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 0.5rem;
}

.active-filters {
    padding: 1rem;
    background: #e9ecef;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.active-filters h5 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #495057;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filters-sidebar #applyFilters {
    width: 100%;
    margin-top: 0.5rem;
}

.filter-chips .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

/* Star Rating Styles */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.star-rating input[type="radio"] {
    display: none;
}

.star-rating label {
    cursor: pointer;
    color: #ddd;
    font-size: 1.25rem;
    transition: color 0.2s;
}

.star-rating input[type="radio"]:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #ffc107;
}

.stars .fas.fa-star.active,
.stars .fas.fa-star-half-alt.active {
    color: #ffc107;
}

.stars .far.fa-star {
    color: #ddd;
}

/* Review Styles */
.review-form {
    padding: 1.25rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 1.5rem;
    border-top: 2px solid #e9ecef;
    padding-top: 1.5rem;
}

.review-form__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 1rem;
}

.review-form__form {
    margin: 0;
}

.review-form__field {
    margin-bottom: 1rem;
}

.review-form__row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.review-form__col {
    flex: 1;
}

.review-form__label {
    display: block;
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.review-form__input,
.review-form__textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.review-form__input:focus,
.review-form__textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(128, 188, 192, 0.1);
    outline: none;
}

.review-form__textarea {
    resize: vertical;
    min-height: 60px;
    max-height: 120px;
    font-family: inherit;
}

.review-form__hint {
    display: block;
    margin-top: 0.375rem;
    color: #6c757d;
    font-size: 0.85rem;
}

.review-form__submit {
    margin-top: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
}

.review-item {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

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

.review-helpful {
    margin-top: 0.5rem;
    color: #6c757d;
    font-size: 0.85rem;
}

.reviews-section-title {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    color: var(--dark-blue);
}

/* Question & Answer Styles */
.question-item {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.answer-item {
    padding: 0.75rem;
    background: white;
    border-left: 3px solid var(--teal);
    border-radius: 3px;
}

.answer-form-inline {
    margin-top: 0.5rem;
}

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

/* Product Tags Styles */
.product-tags {
    margin-top: 1rem;
}

.tag-link {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    margin: 0.25rem;
    background: #e9ecef;
    color: #495057;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.875rem;
    transition: all 0.3s;
}

.tag-link:hover {
    background: var(--teal);
    color: white;
    text-decoration: none;
}

/* FAQ Accordion Styles */
#productFaqAccordion .accordion-button {
    font-weight: 500;
}

#productFaqAccordion .accordion-body {
    padding: 1rem 1.25rem;
}

/* Homepage Bundles Section */
.bundles-section {
    background: #ffffff;
}

.bundle-card-home {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bundle-card-home:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.bundle-card-home__image {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.bundle-card-home__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.bundle-card-home:hover .bundle-card-home__img {
    transform: scale(1.05);
}

.bundle-badge-home {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--coral-red);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.875rem;
}

.bundle-card-home__body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bundle-card-home__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.bundle-card-home__title a {
    color: #2c3e50;
    text-decoration: none;
}

.bundle-card-home__title a:hover {
    color: var(--coral-red);
}

.bundle-card-home__description {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1rem;
    line-height: 1.5;
    min-height: 2.7rem;
}

.bundle-card-home__price-wrapper {
    margin-bottom: 1rem;
    margin-top: auto;
}

.bundle-card-home__price {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.bundle-price-home {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--coral-red);
}

.bundle-price-home-old {
    font-size: 1rem;
    color: #999;
    text-decoration: line-through;
}

.bundle-products-count-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6c757d;
    background: #f8f9fa;
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
}

.bundle-products-count-home i {
    font-size: 0.75rem;
    color: var(--coral-red);
}

.bundle-card-home__btn {
    width: 100%;
    font-weight: 600;
    padding: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.bundle-card-home__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Bundle Detail Page - Product List in Tabs */
.bundle-products-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.bundle-product-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #eee;
}

.bundle-product-list-item:last-child {
    border-bottom: none;
}

.bundle-product-list-item__image {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    overflow: hidden;
    background: #f8f9fa;
}

.bundle-product-list-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.bundle-product-list-item:hover .bundle-product-list-item__img {
    transform: scale(1.1);
}

.bundle-product-list-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.bundle-product-list-item__name {
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.bundle-product-list-item__name a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 0.8rem;
}

.bundle-product-list-item__name a:hover {
    color: var(--coral-red);
}

.bundle-product-list-item__category {
    font-size: 0.7rem;
    color: #6c757d;
}

.bundle-product-list-item__category a {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s;
}

.bundle-product-list-item__category a:hover {
    color: var(--teal);
}

/* Filters Responsive */
@media (max-width: 768px) {
    .filters-sidebar {
        margin-bottom: 2rem;
    }

    .filters-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Social Login Styles */
.social-login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.5rem 0;
    color: #6c757d;
    font-size: 0.875rem;
}

.social-login-divider::before,
.social-login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #dee2e6;
}

.social-login-divider span {
    padding: 0 1rem;
}

.social-login-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.social-login-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.social-login-btn--google {
    background: #fff;
    color: #4285f4;
    border-color: #dadce0;
}

.social-login-btn--google:hover {
    background: #f8f9fa;
    border-color: #4285f4;
    color: #4285f4;
    text-decoration: none;
}

.social-login-btn--facebook {
    background: #1877f2;
    color: #fff;
    border-color: #1877f2;
}

.social-login-btn--facebook:hover {
    background: #166fe5;
    border-color: #166fe5;
    color: #fff;
    text-decoration: none;
}

.social-login-btn i {
    font-size: 1.1rem;
}

@media (max-width: 576px) {
    .social-login-buttons {
        flex-direction: column;
    }
}

/* Owl Carousel Navigation - Arrows Hidden, Dots Enabled */
.owl-carousel {
    position: relative;
}

/* Hide navigation arrows globally */
.owl-nav {
    display: none !important;
}

.owl-prev,
.owl-next {
    display: none !important;
}

/* General Owl Carousel Dot Navigation Styles */
.owl-dots {
    text-align: center;
    margin-top: 2rem;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

.owl-dots li {
    display: inline-block;
    margin: 0 5px;
}

.owl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #dee2e6;
    margin: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    padding: 0;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
}

.owl-dot:hover {
    background: #adb5bd;
    transform: scale(1.1);
}

.owl-dot.active {
    background: var(--coral-red);
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(233, 92, 103, 0.5);
}

/* Container adjustments - No longer needed for arrows, but keep for spacing */
.new-arrivals-section .container-fluid,
.recently-viewed-section .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

.new-arrivals-section .container-fluid,
.recently-viewed-section .container-fluid,
.products-section .container-fluid,
.cute-stationery-section .container-fluid,
.you-may-also-like-section .container-fluid,
.bundles-section .container-fluid {
    position: relative;
    /* Removed padding for arrows since arrows are hidden */
}

@media (max-width: 1200px) {
    /* Container padding removed since arrows are hidden */
    .new-arrivals-section .container-fluid,
    .recently-viewed-section .container-fluid,
    .products-section .container-fluid,
    .cute-stationery-section .container-fluid,
    .you-may-also-like-section .container-fluid,
    .bundles-section .container-fluid {
        /* No padding needed for arrows */
    }
}

/* Checkout Validation Error Notification */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.checkout-validation-error {
    animation: slideInRight 0.3s ease;
}

.checkout-validation-error input.error,
.checkout-validation-error textarea.error,
.checkout-validation-error select.error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Responsive dot navigation styles */
@media (max-width: 768px) {
    .owl-dots {
        margin-top: 1.5rem;
    }

    .owl-dot {
        width: 10px;
        height: 10px;
        margin: 0 4px;
    }
}

@media (max-width: 576px) {
    .owl-dots {
        margin-top: 1rem;
    }

    .owl-dot {
        width: 8px;
        height: 8px;
        margin: 0 3px;
    }
}

/* Cookie Consent Styles */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.cookie-consent-banner__container {
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-consent-banner__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cookie-consent-banner__text {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 300px;
}

.cookie-consent-banner__text i {
    font-size: 1.5rem;
    color: var(--coral-red, #ff6b6b);
}

.cookie-consent-banner__text p {
    margin: 0;
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.6;
}

.cookie-consent-banner__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cookie-consent-banner__link {
    color: var(--dark-blue, #1e3a8a);
    text-decoration: underline;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.cookie-consent-banner__link:hover {
    color: var(--coral-red, #ff6b6b);
}

.cookie-consent-banner__btn {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.cookie-consent-banner__btn--accept {
    background: var(--dark-blue, #1e3a8a);
    color: #fff;
}

.cookie-consent-banner__btn--accept:hover {
    background: var(--coral-red, #ff6b6b);
}

.cookie-consent-banner__btn--reject {
    background: #f3f4f6;
    color: #374151;
}

.cookie-consent-banner__btn--reject:hover {
    background: #e5e7eb;
}

.cookie-consent-banner__btn--customize {
    background: transparent;
    color: var(--dark-blue, #1e3a8a);
    border: 1px solid var(--dark-blue, #1e3a8a);
}

.cookie-consent-banner__btn--customize:hover {
    background: var(--dark-blue, #1e3a8a);
    color: #fff;
}

.cookie-preferences-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

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

@media (min-width: 769px) {
    .cookie-preferences-modal {
        align-items: center;
        padding: 1rem;
    }
}

.cookie-preferences-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.cookie-preferences-modal.active .cookie-preferences-modal__overlay {
    opacity: 1;
}

.cookie-preferences-modal__content {
    position: relative;
    background: #fff;
    border-radius: 12px 12px 0 0;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-preferences-modal.active .cookie-preferences-modal__content {
    transform: translateY(0);
}

@media (min-width: 769px) {
    .cookie-preferences-modal__content {
        border-radius: 12px;
        transform: translateY(0) scale(0.95);
    }

    .cookie-preferences-modal.active .cookie-preferences-modal__content {
        transform: translateY(0) scale(1);
    }
}

.cookie-preferences-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.cookie-preferences-modal__title {
    margin: 0;
    font-size: 1.5rem;
    color: var(--dark-blue, #1e3a8a);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cookie-preferences-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s;
}

.cookie-preferences-modal__close:hover {
    color: var(--coral-red, #ff6b6b);
}

.cookie-preferences-modal__body {
    padding: 1.5rem;
}

.cookie-preferences-modal__description {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.cookie-preferences-modal__categories {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cookie-category {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.25rem;
    background: #f9fafb;
}

.cookie-category__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-category__info {
    flex: 1;
}

.cookie-category__title {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: var(--dark-blue, #1e3a8a);
}

.cookie-category__description {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.6;
}

.cookie-category__toggle {
    flex-shrink: 0;
}

.cookie-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    cursor: pointer;
}

.cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.cookie-toggle__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.cookie-toggle__slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.cookie-toggle input:checked + .cookie-toggle__slider {
    background-color: var(--dark-blue, #1e3a8a);
}

.cookie-toggle input:checked + .cookie-toggle__slider:before {
    transform: translateX(24px);
}

.cookie-toggle input:disabled + .cookie-toggle__slider {
    background-color: #10b981;
    cursor: not-allowed;
}

.cookie-preferences-modal__footer {
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.cookie-preferences-modal__link {
    color: var(--dark-blue, #1e3a8a);
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}

.cookie-preferences-modal__link:hover {
    color: var(--coral-red, #ff6b6b);
}

.cookie-preferences-modal__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cookie-preferences-modal__btn {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.cookie-preferences-modal__btn--save {
    background: var(--dark-blue, #1e3a8a);
    color: #fff;
}

.cookie-preferences-modal__btn--save:hover {
    background: var(--coral-red, #ff6b6b);
}

.cookie-preferences-modal__btn--accept {
    background: var(--dark-blue, #1e3a8a);
    color: #fff;
}

.cookie-preferences-modal__btn--accept:hover {
    background: var(--coral-red, #ff6b6b);
}

.cookie-preferences-modal__btn--reject {
    background: #f3f4f6;
    color: #374151;
}

.cookie-preferences-modal__btn--reject:hover {
    background: #e5e7eb;
}

.cookie-preferences-section {
    padding: 3rem 0;
}

.cookie-preferences-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.cookie-preferences-card__header {
    padding: 2rem;
    background: linear-gradient(135deg, var(--dark-blue, #1e3a8a) 0%, var(--coral-red, #ff6b6b) 100%);
    color: #fff;
}

.cookie-preferences-card__title {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cookie-preferences-card__description {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
}

.cookie-preferences-card__body {
    padding: 2rem;
}

.cookie-preferences-card__footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.cookie-preferences-card__link {
    color: var(--dark-blue, #1e3a8a);
    text-decoration: none;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}

.cookie-preferences-card__link:hover {
    color: var(--coral-red, #ff6b6b);
}

.cookie-category--page {
    margin-bottom: 1.5rem;
}

.cookie-preferences-form__actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.cookie-preferences-form__btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cookie-preferences-form__btn--save {
    background: var(--dark-blue, #1e3a8a);
    color: #fff;
    flex: 1;
    justify-content: center;
}

.cookie-preferences-form__btn--save:hover {
    background: var(--coral-red, #ff6b6b);
}

.cookie-preferences-form__btn--accept {
    background: var(--dark-blue, #1e3a8a);
    color: #fff;
}

.cookie-preferences-form__btn--accept:hover {
    background: var(--coral-red, #ff6b6b);
}

.cookie-preferences-form__btn--reject {
    background: #f3f4f6;
    color: #374151;
}

.cookie-preferences-form__btn--reject:hover {
    background: #e5e7eb;
}

@media (max-width: 768px) {
    .cookie-consent-banner {
        padding: 1rem;
    }

    .cookie-consent-banner__content {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .cookie-consent-banner__text {
        min-width: auto;
        gap: 0.75rem;
    }

    .cookie-consent-banner__text i {
        font-size: 1.25rem;
    }

    .cookie-consent-banner__text p {
        font-size: 0.85rem;
    }

    .cookie-consent-banner__actions {
        justify-content: stretch;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .cookie-consent-banner__link {
        font-size: 0.8rem;
        width: 100%;
        text-align: center;
        padding: 0.5rem 0;
    }

    .cookie-consent-banner__btn {
        flex: 1;
        min-width: 0;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .cookie-preferences-modal {
        padding: 0.5rem;
    }

    .cookie-preferences-modal__content {
        max-height: 90vh;
        margin: 0;
        border-radius: 12px 12px 0 0;
        -webkit-overflow-scrolling: touch;
    }

    .cookie-preferences-modal__content::-webkit-scrollbar {
        width: 4px;
    }

    .cookie-preferences-modal__content::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .cookie-preferences-modal__content::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 2px;
    }

    .cookie-preferences-modal__content::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    .cookie-preferences-modal__header {
        padding: 1rem;
    }

    .cookie-preferences-modal__title {
        font-size: 1.25rem;
    }

    .cookie-preferences-modal__body {
        padding: 1rem;
    }

    .cookie-preferences-modal__description {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .cookie-category {
        padding: 1rem;
    }

    .cookie-category__title {
        font-size: 1rem;
    }

    .cookie-category__description {
        font-size: 0.85rem;
    }

    .cookie-preferences-modal__footer {
        flex-direction: column;
        padding: 1rem;
        gap: 0.75rem;
    }

    .cookie-preferences-modal__link {
        font-size: 0.85rem;
        width: 100%;
        justify-content: center;
        padding: 0.5rem 0;
    }

    .cookie-preferences-modal__actions {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .cookie-preferences-modal__btn {
        width: 100%;
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }

    .cookie-preferences-form__actions {
        flex-direction: column;
    }

    .cookie-preferences-form__btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .cookie-consent-banner {
        padding: 0.875rem;
    }

    .cookie-consent-banner__text p {
        font-size: 0.8rem;
    }

    .cookie-consent-banner__actions {
        gap: 0.4rem;
    }

    .cookie-consent-banner__btn {
        padding: 0.45rem 0.6rem;
        font-size: 0.75rem;
        min-width: calc(33.333% - 0.3rem);
    }

    .cookie-consent-banner__link {
        font-size: 0.75rem;
        order: -1;
        margin-bottom: 0.25rem;
    }

    .cookie-preferences-modal__header {
        padding: 0.875rem;
    }

    .cookie-preferences-modal__title {
        font-size: 1.1rem;
    }

    .cookie-preferences-modal__body {
        padding: 0.875rem;
    }

    .cookie-category {
        padding: 0.875rem;
    }

    .cookie-preferences-modal__footer {
        padding: 0.875rem;
    }

    .cookie-preferences-modal__btn {
        padding: 0.55rem 0.875rem;
        font-size: 0.8rem;
    }
}

/* ========================================
   Gallery Management Styles
   ======================================== */

/* Admin Gallery Item Grid */
.gallery-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.gallery-item-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: move;
}

.gallery-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.gallery-item-card.dragging {
    opacity: 0.5;
}

.gallery-item-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.gallery-item-card__drag {
    color: var(--text-muted, #6c757d);
    cursor: grab;
}

.gallery-item-card__drag:active {
    cursor: grabbing;
}

.gallery-item-card__actions {
    display: flex;
    gap: 0.25rem;
}

.gallery-item-card__body {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
}

.gallery-item-card__image img,
.gallery-item-card__video img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item-card__video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-muted, #6c757d);
    font-size: 2rem;
}

.gallery-item-card__video-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-item-card__footer {
    padding: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gallery-item-card__info {
    flex: 1;
    min-width: 0;
}

.gallery-item-card__title {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-item-card__type {
    font-size: 0.75rem;
}

/* Frontend Gallery Grid */
.galleries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.gallery-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    background: #fff;
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.gallery-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.gallery-card__image {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
    background: #f8f9fa;
}

.gallery-card__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-card__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    color: #6c757d;
    font-size: 3rem;
}

.gallery-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 1.5rem;
    color: white;
}

.gallery-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: white;
}

.gallery-card__count {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
    color: white;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-buttons .btn.active {
    background: var(--primary-color, #007bff);
    color: white;
    border-color: var(--primary-color, #007bff);
}

/* Gallery Component (Frontend) */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.gallery-item__image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
    cursor: pointer;
}

.gallery-item__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item__image-wrapper:hover .gallery-item__image {
    transform: scale(1.05);
}

.gallery-item__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    color: white;
    font-size: 2rem;
}

.gallery-item__image-wrapper:hover .gallery-item__overlay {
    opacity: 1;
}

.gallery-item__caption {
    padding: 1rem;
    background: #fff;
}

.gallery-item__caption h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.gallery-item__caption p {
    margin: 0;
    font-size: 0.875rem;
    color: #6c757d;
}

.gallery-item__video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
}

.gallery-item__embed,
.gallery-item__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gallery-item__embed iframe {
    width: 100%;
    height: 100%;
}

.gallery-item__video-player {
    width: 100%;
    height: 100%;
}

.gallery-item__video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

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

.gallery-item__play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: background 0.3s;
}

.gallery-item__video-thumbnail:hover .gallery-item__play-button {
    background: rgba(0,0,0,0.9);
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    padding: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
    background: rgba(255,255,255,0.3);
}

.lightbox__close {
    top: 20px;
    right: 20px;
}

.lightbox__prev {
    left: 20px;
}

.lightbox__next {
    right: 20px;
}

.lightbox__content {
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

.lightbox__content img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.lightbox__caption {
    color: white;
    padding: 1rem;
    font-size: 1.1rem;
}

/* Gallery Admin Helpers */
.gallery-card-spacing {
    margin-top: 2rem;
}

.gallery-btn-spacing {
    margin-left: 0.5rem;
}

.search-form__input-wrapper {
    gap: 0.75rem;
}

.gallery-search-select {
    width: 150px;
    flex-shrink: 0;
}

.gallery-status-select {
    width: 120px;
    flex-shrink: 0;
}

.gallery-search-input {
    flex: 1;
    min-width: 200px;
}

.gallery-slug-text {
    font-size: 0.85rem;
}


.gallery-item__embed,
.gallery-item__video {
    display: none;
}

.gallery-item__embed.gallery-video-active,
.gallery-item__video.gallery-video-active {
    display: block;
}

/* Product Image Zoom Styles */
.product-main-image img {
    cursor: zoom-in;
    transition: transform 0.3s;
    will-change: transform;
}

.product-main-image img:hover {
    transform: scale(1.05);
}

.gallery-item__video-thumbnail.gallery-video-hidden {
    display: none;
}

body.lightbox-open {
    overflow: hidden;
}

.d-none {
    display: none !important;
}

.search-form__clear.d-none {
    display: none !important;
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
    
    .gallery-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
    
    .galleries-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.5rem;
    }
}