/*
Theme Name: Vela Beauty
Theme URI: https://example.com/vela-theme/
Author: Your Name or Company
Author URI: https://example.com/
Description: A modern and elegant beauty and cosmetics WordPress theme inspired by the Vela design. This theme is fully responsive and built with a strong design system for easy customization.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: e-commerce, beauty, cosmetics, responsive-layout, custom-colors, one-column, two-columns, accessibility-ready
Text Domain: thoitrang
*/

/*
==========================================================================
LƯU Ý QUAN TRỌNG: FONT CHỮ TÙY CHỈNH (IMPORTANT NOTE: CUSTOM FONTS)
==========================================================================
Các font chữ như 'Title' và 'Title-Small' cần được định nghĩa trong file CSS
của bạn bằng cách sử dụng @font-face để chúng có thể hiển thị chính xác.

The fonts 'Title' and 'Title-Small' need to be defined in your CSS file
using @font-face for them to display correctly.

Ví dụ (Example):
@font-face {
    font-family: 'Title';
    src: url('path/to/your/title-font.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
==========================================================================
*/


/*
==============================================
11.0 - Component: Top Announcement Bar
Thành phần: Thanh thông báo trên cùng
==============================================
*/
.top-announcement-bar {
    background-color: var(--color-surface-primary);
    color: var(--color-text-inverse);
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-xs);
    font-family: var(--font-family-title);
}

.top-announcement-bar h3 {
    font-size: 20px;
}

.top-bar-content {
    text-align: center;
    text-transform: uppercase;
}

.top-bar-message {
    flex-grow: 1;
    text-align: left;
}

.top-bar-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--spacing-lg);
}

.top-bar-contact a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: color var(--transition-fast);
}

.top-bar-contact a:hover {
    color: var(--color-surface-secondary);
}

.top-bar-contact .material-icons {
    font-size: 20px;
}

.top-bar-social {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: var(--spacing-lg);
}

.top-bar-social a img {
    width: 18px;
    height: 18px;
    display: block;
    transition: opacity var(--transition-fast);
}

.top-bar-social a:hover img {
    opacity: 0.8;
}

/* =================================================
   Category Grid Section Styling
   ================================================= */

/* Chung cho Section */
.category-grid-section.section {
    padding: 60px 0;
    background-color: #f9f9f9;
    /* Màu nền nhẹ nếu cần */
}

/* Wrapper chính sử dụng CSS Grid */
.category-grid-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* Tỉ lệ cột: banner trái lớn hơn */
    gap: 20px;
    /* Khoảng cách giữa các khối */
    align-items: stretch;
}

/* Grid cho 4 khối bên phải */
.category-grid-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Hai cột bằng nhau */
    grid-template-rows: 1fr 1fr;
    /* Hai hàng bằng nhau */
    gap: 20px;
}

/* Styling cho từng khối danh mục */
.category-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    /* Bo góc mềm mại */
    background-color: #f0f0f0;
    /* Màu nền chờ tải ảnh */
}

.category-grid-item .category-item-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #111;
}

/* Hình ảnh bên trong */
.category-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Đảm bảo ảnh lấp đầy khung */
    transition: transform 0.4s ease-in-out;
}

.category-grid-item:hover img {
    transform: scale(1.05);
    /* Hiệu ứng zoom khi hover */
}

/* Ná»™i dung text */
.category-item-content {
    position: absolute;
    left: 40px;
    bottom: 40px;
    z-index: 2;
}

.category-item-content .subtitle {
    font-size: 16px;
    margin: 0 0 5px;
    font-weight: 500;
}

.category-item-content .title {
    font-size: 48px;
    font-weight: 600;
    margin: 0;
    line-height: 1.1;
}

/* Nút "View Collection" */
.btn-collection {
    display: inline-block;
    background-color: #222;
    color: #fff;
    padding: 12px 28px;
    border-radius: 50px;
    margin-top: 25px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-collection:hover {
    background-color: #444;
}

/* Dấu chấm phân trang (giả lập) */
.pagination-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.pagination-dots span {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.large-banner .pagination-dots {
    bottom: 60px;
    /* Điều chỉnh lại vị trí cho banner lớn */
    left: 40px;
    transform: none;
}

.large-banner .pagination-dots span {
    background-color: #ccc;
}

.large-banner .pagination-dots span.active {
    width: 24px;
    border-radius: 4px;
    background-color: #333;
}


/* Styling cho các khối nhỏ bên phải */
.small-banner .category-item-content {
    left: 25px;
    bottom: 25px;
}

.small-banner .title {
    font-size: 24px;
    color: var(--color-white);
}

.discover-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
    padding-bottom: 2px;
    border-bottom: 2px solid #111;
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 992px) {
    .category-grid-wrapper {
        grid-template-columns: 1fr;
        /* Chuyển thành 1 cột */
    }
}

@media (max-width: 576px) {
    .category-grid-right {
        grid-template-columns: 1fr;
        /* Chuyển thành 1 cột */
    }

    .category-item-content {
        left: 20px;
        bottom: 20px;
    }

    .category-item-content .title {
        font-size: 32px;
    }

    .small-banner .title {
        font-size: 20px;
    }
}

/* =================================================
   Styling for Slider inside Category Grid
   ================================================= */

/* Đảm bảo khối banner trái không có padding làm ảnh hưởng slider */
.category-grid-item.large-banner {
    padding: 0;
    /* Giữ lại position: relative và overflow: hidden từ code cũ */
    position: relative;
    overflow: hidden;
}

/* Bắt buộc slider phải chiếm 100% chiều cao của container cha */
.large-banner .hero-slider.swiper {
    width: 100%;
    height: 100%;
}

/* Đảm bảo các slide cũng chiếm toàn bộ không gian */
.large-banner .swiper-slide {
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

/* Điều chỉnh vị trí của nội dung và các nút điều khiển slider */
.large-banner .slide-content-wrapper {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 10;
    color: #fff;
}

/* Tùy chỉnh màu sắc cho các nút prev/next và pagination nếu cần */
.large-banner .swiper-button-next,
.large-banner .swiper-button-prev {
    color: #ffffff;
    /* Màu trắng cho mũi tên */
}

.large-banner .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.7);
}

.large-banner .swiper-pagination-bullet-active {
    background: #ffffff;
}


/* =================================================
   Minimal Product Slider Styles
   ================================================= */

/* --- Swiper Container --- */
.product-swiper {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 40px;
    /* Thêm khoảng trống cho pagination nếu có */
}

/* --- Swiper Slide --- */
.swiper-slide {
    display: flex;
    justify-content: center;
    /* Đảm bảo card sản phẩm luôn ở giữa slide */
    box-sizing: border-box;
}

/* --- Swiper Navigation Arrows --- */
.product-swiper .swiper-button-next,
.product-swiper .swiper-button-prev {
    color: #333;
    /* Màu mũi tên */
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    top: 45%;
    /* Căn giữa chiều cao của ảnh */
}

.product-swiper .swiper-button-next:after,
.product-swiper .swiper-button-prev:after {
    font-size: 20px;
    /* Kích thước icon mũi tên */
    font-weight: bold;
}


/* --- Main Product Card --- */
.product-card-minimal {
    position: relative;
    background-color: #f7f7f7;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.product-card-minimal:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.product-card-minimal__link-wrapper {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* --- Product Image --- */
.product-card-minimal__image-container {
    width: 100%;
    height: 320px;
}

.product-card-minimal__image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Main Action Button (Title & Price) --- */
.product-card-minimal__action-button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    padding: 10px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    width: 85%;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.product-card-minimal:hover .product-card-minimal__action-button {
    bottom: -60px;
    opacity: 0;
}

.product-card-minimal .product-title {
    font-weight: 500;
    font-size: 14px;
    color: #333;
    margin-bottom: 2px;
    white-space: normal;
}

.product-card-minimal .product-price {
    font-size: 14px;
    color: #555;
    font-weight: bold;
}

.product-card-minimal .product-price ins {
    text-decoration: none;
    background: none;
}

.product-card-minimal .product-price del {
    font-weight: normal;
    margin-right: 5px;
}


/* --- Overlay & Hover Buttons --- */
.product-card-minimal__overlay {
    position: absolute;
    top: 0;
    /* Đổi thành top */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    /* Căn giữa các nút */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card-minimal:hover .product-card-minimal__overlay {
    opacity: 1;
}

.product-card-minimal__overlay .overlay-buttons {
    display: flex;
    gap: 10px;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.product-card-minimal:hover .product-card-minimal__overlay .overlay-buttons {
    transform: translateY(0);
}

.product-card-minimal__overlay .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- Wishlist Button --- */
.btn--wishlist-wrapper {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    /* Đảm bảo nó nằm trên overlay */
}

.wishlist-toggle {
    font-size: 22px;
    color: #333;
}

.wishlist-toggle.active {
    color: red;
}

.product-section .section-title {
    margin-bottom: 1rem;
    text-align: center;
    font-family: var(--font-family-title);
    font-size: 32px;
    font-weight: 600;
    color: var(--color-surface-secondary);
}

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


/* =================================================
   CSS cho Section "Bundle & Save"
   ================================================= */
.bundle-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
    padding: 60px 20px;
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 1320px;
    margin: auto;
}

.bundle-section__left,
.bundle-section__right {
    flex: 1;
    min-width: 350px;
}

.bundle-section__right {
    flex: 1.2;
}

.bundle-section__header {
    margin-bottom: 30px;
    text-align: center;
}

.bundle-section__subtitle {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

.bundle-section__title {
    font-size: 42px;
    font-weight: 600;
    color: #212529;
    margin: 5px 0 0 0;
}

.vertical-swiper {
    width: 100%;
    height: 330px;
    margin-bottom: 30px;
}

/* Bắt buộc có chiều cao */
.vertical-swiper .swiper-slide {
    height: 100px !important;
}

.bundle-product {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.bundle-product__image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    background-color: #f8f9fa;
}

.bundle-product__details {
    flex-grow: 1;
}

.bundle-product__title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 0 0 8px 0;
}

.bundle-product__variant-select {
    border: none;
    background-color: transparent;
    font-size: 14px;
    color: #6c757d;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236c757d'%3E%3Cpath d='M6 9l-4-4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 15px;
    cursor: pointer;
}

.bundle-product__pricing {
    text-align: right;
}

.bundle-product__price {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #212529;
}

.bundle-product__price ins {
    text-decoration: none;
    background: none;
}

.bundle-product__save {
    display: block;
    font-size: 13px;
    color: #dc3545;
    margin-top: 4px;
}

.bundle-section__cta-button {
    display: block;
    width: 100%;
    background-color: #212529;
    color: #fff;
    text-align: center;
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.bundle-section__cta-button:hover {
    background-color: #495057;
}

.bundle-banner {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
}

.bundle-banner img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* =================================================
   CSS cho Slider "You Might Like" (Giao diện mới)
   ================================================= */
.simple-slider-section {
    padding: 60px 0;
    position: relative;
    /* Để định vị các nút điều hướng */
    font-family: system-ui, -apple-system, sans-serif;
}

.simple-slider-header {
    text-align: center;
    margin-bottom: 40px;
}

.simple-slider-subtitle {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

.simple-slider-title {
    font-size: 42px;
    font-weight: 600;
    color: #212529;
    margin: 5px 0 0 0;
}

/* Container của Swiper */
.simple-product-slider {
    padding: 0 50px;
    /* Tạo khoảng trống 2 bên cho nút */
}

/* Thẻ sản phẩm */
.simple-product-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    position: relative;
    background-color: #fff;
}

.simple-product-card__image-link {
    display: block;
    margin-bottom: 15px;
}

.simple-product-card__image-link img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

/* Nút Wishlist */
.simple-product-card__wishlist-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.simple-product-card__wishlist-btn .material-icons {
    color: #6c757d;
}

.simple-product-card__wishlist-btn .material-icons.active {
    color: red;
    font-variation-settings: 'FILL' 1;
    /* Tô đầy icon trái tim */
}


.simple-product-card__info {
    min-height: 100px;
    /* Giữ chiều cao các thẻ đều nhau */
}

.simple-product-card__title {
    font-size: 16px;
    font-weight: 400;
    color: #212529;
    margin: 0 0 10px 0;
}

.simple-product-card__title a {
    text-decoration: none;
    color: inherit;
}

.simple-product-card__price {
    font-size: 16px;
    font-weight: 500;
    color: #212529;
}

.simple-product-card__price ins {
    text-decoration: none;
    background: none;
}

/* Nút điều hướng */
.swiper-navigation-wrapper {
    position: static;
}

.simple-slider-section .swiper-button-prev,
.simple-slider-section .swiper-button-next {
    position: absolute;
    top: 55%;
    /* Căn giữa theo chiều dọc */
    transform: translateY(-50%);
    color: #333;
}

.simple-slider-section .swiper-button-prev {
    left: 10px;
}

.simple-slider-section .swiper-button-next {
    right: 10px;
}

/* =========================================
   CSS CHO BLOG SLIDER SECTION (Giao diện mới)
   ========================================= */

/* --- Section Header --- */
.new-blog-header {
    text-align: center;
    margin-bottom: 50px;
}

.new-blog-title {
    font-size: 42px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 10px 0;
}

.new-blog-subtitle {
    font-size: 16px;
    color: #6c757d;
    margin: 0;
}

/* --- Swiper Container --- */
.blog-post-slider.swiper {
    padding-bottom: 50px;
    /* Tạo khoảng trống cho pagination */
}

/* --- Single Blog Card (bên trong slide) --- */
.new-blog-card {
    background-color: #fff;
    text-align: left;
}

.new-blog-card__image-container {
    margin-bottom: 25px;
    border-radius: 12px;
    overflow: hidden;
}

.new-blog-card__image-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.new-blog-card__image-container a:hover img {
    transform: scale(1.05);
}

/* --- Content Area --- */
.new-blog-card__category {
    font-size: 12px;
    font-weight: 600;
    color: #8899a8;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.new-blog-card__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 20px 0;
    min-height: 56px;
    /* Giúp các tiêu đề có chiều cao tương đương */
}

.new-blog-card__title a {
    color: #212529;
    text-decoration: none;
    transition: color 0.3s ease;
}

.new-blog-card__title a:hover {
    color: #007bff;
}

/* --- Meta Info (Date, Author) --- */
.new-blog-card__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    color: #6c757d;
}

.new-blog-card__meta .meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.new-blog-card__meta svg {
    margin-top: -2px;
}

/* --- Swiper Pagination (dấu chấm) --- */
.blog-post-slider .swiper-pagination-bullet {
    background-color: #007bff;
    width: 10px;
    height: 10px;
}

.blog-post-slider .swiper-pagination-bullet-active {
    background-color: #212529;
}

/*
==============================================
12.0 - Footer Styles
==============================================
*/

/* --- Main Footer Wrapper --- */
.main-footer {
    padding: var(--spacing-xxl) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border);
    padding-bottom: 1rem;
    margin-top: var(--spacing-xl);
}

.footer-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-x);
    display: grid;
    /* Split layout into 4 columns based on HTML */
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: var(--spacing-xl);
}

/* --- General Column Styles --- */
.footer-column h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    margin-bottom: var(--spacing-lg);
}

/* --- Column 1: Company Info --- */
.company-info img {
    max-width: 150px;
    /* Adjust logo size if needed */
    margin-bottom: var(--spacing-lg);
    max-height: 120px;
}
.post-featured-image img {
    width: 100%;
    object-fit: cover;
    max-height: 600px;
}

.company-info .contact-block,
.company-info .address-block {
    margin-bottom: var(--spacing-md);
}

.company-info h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent);
    margin: 0;
    white-space: nowrap;
    font-family: 'Title';
}

.company-info span,
.company-info span a {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-primary);
}

.company-info span a:hover {
    color: var(--color-accent);
}

/* --- Column 2 & 3: Menu Links --- */
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: var(--spacing-xs);
    font-family: 'Title';
}

.footer-column ul li a {
    color: var(--color-black);
    transition: color var(--transition-fast);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-primary);
}

.footer-column ul li a:hover {
    color: var(--color-accent-hover);
}

/* --- Column 4: Newsletter & Social --- */
.newsletter-description {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    margin: var(--spacing-md) 0;
    color: var(--color-text-secondary);
    font-family: var(--font-family-primary);
}

.newsletter-form .input-group {
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-md);
}

.newsletter-form .input-group .material-icons {
    font-size: 22px;
    color: var(--color-text-secondary);
    margin-right: var(--spacing-sm);

}

.newsletter-form input[type="email"] {
    flex-grow: 1;
    border: none;
    background: transparent;
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    outline: none;
    width: 175px;
    font-family: var(--font-family-primary);
    padding-left: 5px;
}

.newsletter-form input[type="email"]::placeholder {
    color: var(--color-text-secondary);
}

.newsletter-form button[type="submit"] {
    background: transparent;
    border: none;
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: var(--spacing-sm);
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.newsletter-form button[type="submit"]:hover {
    color: var(--color-accent-hover);
}

.social-follow {
    margin-top: var(--spacing-xl);
}

.social-icons {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.social-icons a img {
    width: 30px;
    height: 30px;
    opacity: .8;
    transition: opacity var(--transition-fast);
}

.social-icons a:hover img {
    opacity: 1;
}

.footer-bottom {
    border-top: 1px solid var(--color-white);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-md);
    /* Create space with the columns above */
    text-align: center;
}

.footer-wrraper {
    padding: var(--spacing-xl) 0;
    border-top: 1px solid var(--color-accent-hover);
}

.footer-bottom .container {
    /* Ensure content in the container is centered */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    font-size: 2.5rem;
    /* Font size for the logo */
    font-weight: var(--font-weight-bold);
    letter-spacing: 2px;
    line-height: 1;
    color: var(--color-text-primary);
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.footer-logo .logo-v {
    color: var(--color-accent);
    /* Accent color for the letter 'V' */
}

.copyright-text {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-xs) 0;
    /* Remove default top/bottom margin of the p tag */
}

.payment-methods {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    /* Space between icons */
}

.footer-logo {
    height: 60px;
    width: 60px;
}

.payment-methods img {
    height: 24px;
    /* Fixed height for icons */
    width: auto;
}

/* 
----------------------------------------------
Responsive for Footer
----------------------------------------------
*/

@media (max-width: 992px) {
    .footer-container {
        /* Switch to 2 columns on tablet */
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .footer-container {
        /* Switch to 1 column on mobile */
        grid-template-columns: 1fr;
    }

    .company-info h4 {
        white-space: normal;
    }
}

.site-footer {
    padding-bottom: 0;
}