/*
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;
}

/* ================================================= */
/*     CSS ĐẦY ĐỦ VÀ TỐI ƯU CHO HERO SLIDER          */
/* ================================================= */

/* --- 1. ĐỊNH NGHĨA ANIMATION (TỐI ƯU HIỆU SUẤT) --- */
/* Animation cho ảnh nền chuyển động chậm (Ken Burns) */
@keyframes kenburnsEffect {
    from {
        transform: scale(1.15);
    }

    to {
        transform: scale(1);
    }
}

/* Animation cho nội dung trượt lên và hiện ra */
@keyframes contentFadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* --- 2. CẤU TRÚC SLIDER --- */
.hero-slider {
    width: 100%;
    height: 90vh;
    /* Cao 90% chiều cao màn hình, có thể tùy chỉnh */
    position: relative;
    background-color: var(--color-surface-tertiary);
    /* Màu nền fallback */
}

.hero-slider .swiper-slide {
    overflow: hidden;
    /* Bắt buộc để hiệu ứng không tràn ra ngoài */
}

/* --- 3. ẢNH NỀN VÀ HIỆU ỨNG KEN BURNS --- */
.hero-slider .slide-bg-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Kích hoạt animation CHỈ khi slide được active */
.hero-slider .swiper-slide-active .slide-bg-image {
    animation: kenburnsEffect 10s ease-out forwards;
}

/* --- 4. LỚP PHỦ VÀ NỘI DUNG --- */
.hero-slider .slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 80%);
    z-index: 1;
}

.hero-slider .slide-content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    padding: var(--spacing-lg);
}

/* --- 5. TIÊU ĐỀ, NÚT BẤM VÀ HIỆU ỨNG (TÍCH HỢP DESIGN SYSTEM) --- */
/* Mặc định ẩn các phần tử nội dung */
.hero-slider .slide-title,
.hero-slider .slide-btn-wrapper {
    opacity: 0;
}

/* Áp dụng animation khi slide active, tạo hiệu ứng xuất hiện nối tiếp */
.hero-slider .swiper-slide-active .slide-title {
    animation: contentFadeInUp 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards;
}

.hero-slider .swiper-slide-active .slide-btn-wrapper {
    animation: contentFadeInUp 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.6s forwards;
}

/* Lấy style từ Design System của bạn */
.hero-slider .slide-title {
    font-family: var(--font-family-title);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    /* Màu trắng */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    margin: 0 0 var(--spacing-xl) 0;
    max-width: 900px;
    /* Giới hạn chiều rộng tiêu đề cho dễ đọc */
}

.hero-slider .slide-btn.primary {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    background-color: var(--color-surface-primary);
    /* Màu #f5988d */
    color: var(--color-text-inverse);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--border-radius-md);
    border: 2px solid transparent;
    transition: var(--transition-smooth);
    box-shadow: var(--box-shadow-subtle);
}

.hero-slider .slide-btn.primary:hover {
    background-color: var(--color-white);
    color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* ================================================= */
/*         CSS CHO SECTION DANH MỤC SẢN PHẨM         */
/* ================================================= */

/* --- 1. GRID LAYOUT CHÍNH --- */
.categories-grid {
    display: grid;
    /* Mặc định 4 cột trên desktop */
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap, 1.5rem);
    /* Lấy khoảng cách từ design system */
}

/* --- 2. THẺ DANH MỤC (CATEGORY CARD) --- */
.category-card {
    position: relative;
    display: block;
    overflow: hidden;
    /* Quan trọng: để ảnh không tràn ra ngoài khi zoom */
    text-decoration: none;
    aspect-ratio: 3 / 4;
    /* Giữ tỷ lệ khung hình 3:4 cho tất cả các card */

    /* Bo góc nhẹ */
}

/* --- 3. ẢNH NỀN VÀ HIỆU ỨNG HOVER --- */
.category-card__image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Hiệu ứng chuyển động mượt */
}

.category-card:hover .category-card__image {
    transform: scale(1.05);
    /* Phóng to ảnh nền khi hover */
}

/* --- 4. BOX TÊN DANH MỤC --- */
.category-card__name-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Căn giữa tuyệt đối */
    background-color: var(--color-dark, #111111);
    /* Màu nền tối từ DS */
    color: var(--color-text-inverse, #FFFFFF);
    /* Màu chữ trắng từ DS */

    /* Viền trắng dày giống trong ảnh */
    border: 10px solid #F0F0F0;
    padding: var(--spacing-md) var(--spacing-xl);
    min-width: 200px;
    /* Chiều rộng tối thiểu */
    text-align: center;
    transition: all 0.3s ease;
}

.category-card:hover .category-card__name-box {
    border-color: var(--color-white);
    /* Làm viền sáng hơn khi hover */
    transform: translate(-50%, -50%) scale(1.03);
    /* Hơi phồng lên */
}

/* --- 5. TÊN DANH MỤC (TEXT) --- */
.category-card__name {
    font-family: var(--font-family-title, sans-serif);
    /* Font tiêu đề từ DS */
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-base, 1.2rem);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide, 1.5px);
}

/* --- 6. RESPONSIVE --- */
/* Cho Tablet */
@media (max-width: 992px) {
    .categories-grid {
        /* Chuyển thành 2 cột */
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .category-card__name-box {
        min-width: 180px;
        padding: var(--spacing-sm) var(--spacing-lg);
    }

    .category-card__name {
        font-size: var(--font-size-sm, 1rem);
    }
}

/* ================================================= */
/*          CSS CHO SECTION TIÊU ĐỀ "PASSION"       */
/* ================================================= */

/* --- 1. KHUNG SECTION --- */
.inspirational-title-section {

    /* Lấy màu nền từ DS */
    text-align: center;
    /* Căn giữa toàn bộ nội dung */
    /* Bạn có thể tùy chỉnh padding nếu cần, ví dụ: */
    padding-top: var(--spacing-xxl, 3.5rem);
    padding-bottom: var(--spacing-xxl, 3.5rem);
}

/* --- 2. TIÊU ĐỀ CHUNG --- */
.inspirational-title {
    margin: 0;
}

/* --- 3. DÒNG CHỮ NHỎ ("INSPIRED BY YOUR") --- */
.inspirational-title__subheading {
    display: block;
    font-family: var(--font-family-primary, 'Text', sans-serif);
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-secondary, #7D6F64);
    text-transform: uppercase;
    letter-spacing: 3px;
    /* Giãn cách chữ rộng hơn một chút */
    margin-bottom: var(--spacing-sm, 0.5rem);
}

/* --- 4. DÒNG CHỮ CHÍNH VỚI HIỆU ỨNG TEXTURE ("PASSION") --- */
.inspirational-title__main {
    display: block;
    font-family: var(--font-family-title, 'Title', sans-serif);
    /* Sử dụng clamp() để font co giãn mượt mà trên mọi thiết bị */
    font-size: clamp(3rem, 15vw, 4rem);
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    line-height: 1.1;

    /* 
     * KỸ THUẬT TEXT MASKING - ĐÂY LÀ PHẦN QUAN TRỌNG NHẤT
    */
    /* 1. Đặt ảnh nền cho chữ */
    background-image: url('./assets/images/bg_font.jpg');
    /* THAY THẾ BẰNG ẢNH TEXTURE CỦA BẠN */
    background-size: cover;
    background-position: center;

    /* 2. Cắt nền theo hình dáng của chữ */
    -webkit-background-clip: text;
    background-clip: text;

    /* 3. Làm cho màu chữ trở nên trong suốt để thấy được nền */
    color: transparent;
}

/* --- 5. RESPONSIVE --- */
/* Điều chỉnh cho màn hình nhỏ hơn một chút nếu cần */
@media (max-width: 768px) {
    .inspirational-title__subheading {
        font-size: var(--font-size-base, 1.2rem);
        letter-spacing: 2px;
    }
}

/* ================================================= */
/*     CSS CHO SECTION SẢN PHẨM (GIỮ NÚT ACTION)     */
/* ================================================= */

/* --- 1. TIÊU ĐỀ SECTION --- */
.product-section .section-header {
    margin-bottom: var(--spacing-xl, 2.5rem);
}

/* --- 2. LƯỚI SẢN PHẨM (THAY THẾ SLIDER) --- */
.product-grid-with-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap, 1.5rem);
}

/* --- 3. THẺ SẢN PHẨM --- */
.product-card-hover-actions {
    text-align: center;
}

/* --- 4. KHỐI ẢNH VÀ HIỆU ỨNG HOVER --- */
.product-card-hover-actions__image-wrapper {
    position: relative;
    /* Quan trọng để định vị overlay và wishlist */
    background-color: var(--color-surface-tertiary, #F9F5F1);
    margin-bottom: var(--spacing-lg, 1.5rem);
    overflow: hidden;
}

.product-card-hover-actions__image-wrapper img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* --- 5. LỚP OVERLAY VÀ CÁC NÚT BÊN TRONG --- */
.product-card-hover-actions__image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    /* Lớp phủ mờ */

    display: flex;
    align-items: center;
    justify-content: center;

    /* Mặc định ẩn đi */
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
}

.product-card-hover-actions__image-wrapper:hover .product-card-hover-actions__image-overlay {
    opacity: 1;
    /* Hiện ra khi hover */
    visibility: visible;
}

.product-card-hover-actions__image-wrapper:hover img {
    transform: scale(1.05);
    /* Zoom ảnh khi hover */
}

/* Style cho các nút action trong overlay */
.overlay-buttons {
    display: flex;
    gap: var(--spacing-md);
}

.overlay-buttons .btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: var(--color-white);
    color: var(--color-dark);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    box-shadow: var(--box-shadow-subtle);
}

.overlay-buttons .btn:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-white);
    transform: translateY(-3px);
}

/* --- 6. NÚT WISHLIST --- */
.btn--wishlist-wrapper {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
}

.wishlist-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--color-dark);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.wishlist-toggle:hover {
    background-color: var(--color-white);
    transform: scale(1.1);
}

.wishlist-toggle.active {
    color: var(--color-surface-secondary);
    /* Màu hồng cam khi active */
}

/* --- 7. THÔNG TIN SẢN PHẨM BÊN DƯỚI --- */
.product-card-hover-actions__title {
    font-family: var(--font-family-title);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: capitalize;
    letter-spacing: 1px;
    margin: 0 0 var(--spacing-sm) 0;
}

.product-card-hover-actions__title a:hover {
    color: var(--color-accent-hover);
}

.product-card-hover-actions__price {
    font-family: var(--font-family-title);
    font-weight: var(--font-weight-medium);
    color: var(--color-surface-secondary);
    font-size: var(--font-size-base);
}

/* --- 8. RESPONSIVE --- */
@media (max-width: 992px) {
    .product-grid-with-actions {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cột trên tablet */
    }
}

@media (max-width: 576px) {
    .product-grid-with-actions {
        gap: var(--spacing-md, 1rem);
    }
}

/* ================================================= */
/*             CSS CHO SECTION CTA DIVIDER           */
/* ================================================= */

/* --- 1. KHUNG SECTION --- */
.cta-divider-section {
    /* Thêm khoảng trống trên và dưới section */
    padding-top: var(--spacing-xl, 2.5rem);
    padding-bottom: var(--spacing-xl, 2.5rem);
}

/* --- 2. CONTAINER CHÍNH (SỬ DỤNG FLEXBOX) --- */
.cta-divider {
    display: flex;
    align-items: center;
    /* Căn giữa các item theo chiều dọc */
    justify-content: center;
    /* Căn giữa toàn bộ component */
}

/* --- 3. ĐƯỜNG KẺ --- */
.cta-divider__line {
    flex-grow: 1;
    /* Quan trọng: làm cho đường kẻ tự động lấp đầy không gian trống */
    height: 2px;
    /* Độ dày của đường kẻ */
    background-color: var(--color-dark, #111111);
    /* Màu từ Design System */
}

/* --- 4. NÚT BẤM VÀ HIỆU ỨNG --- */
.cta-divider__button {
    /* Lớp viền ngoài màu xám nhạt */
    background-color: var(--color-surface-primary);
    padding: var(--spacing-sm, 0.5rem);
    /* Khoảng cách giữa 2 lớp viền */

    /* Khoảng cách giữa nút và đường kẻ */
    flex-shrink: 0;
    /* Ngăn nút bị co lại trên màn hình hẹp */
    margin-left: var(--spacing-lg, 1.5rem);
    margin-right: var(--spacing-lg, 1.5rem);
    display: inline-block;
    text-decoration: none;
}

/* Lớp màu đen bên trong nút */
.cta-divider__button span {
    display: block;
    background-color: var(--color-dark, #111111);
    color: var(--color-text-inverse, #FFFFFF);

    padding: var(--spacing-md) var(--spacing-xl);
    /* Kích thước của khối màu đen */

    font-family: var(--font-family-title, sans-serif);
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-xs, 0.85rem);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide, 1.5px);

    transition: background-color var(--transition-smooth);
}

/* Hiệu ứng khi di chuột */
.cta-divider__button:hover span {
    background-color: var(--color-accent-hover, #9d8f21);
    /* Màu hover từ DS */
}

/* --- 5. RESPONSIVE --- */
@media (max-width: 576px) {
    .cta-divider__button {
        /* Giảm khoảng cách trên mobile */
        margin-left: var(--spacing-md, 1rem);
        margin-right: var(--spacing-md, 1rem);
    }

    .cta-divider__button span {
        /* Giảm padding cho nút nhỏ hơn */
        padding: var(--spacing-sm) var(--spacing-lg);
    }
}

/* ================================================= */
/*          CSS CHO SECTION BLOG TỐI GIẢN            */
/* ================================================= */

/* --- 1. TIÊU ĐỀ SECTION --- */
.minimal-blog-section .section-header {
    margin-bottom: var(--spacing-xl, 2.5rem);
}

/* --- 2. LƯỚI BÀI VIẾT --- */
.minimal-blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 cột trên desktop */
    gap: var(--grid-gap, 1.5rem);
    margin-bottom: 3rem;
}

/* --- 3. THẺ BÀI VIẾT (CARD) --- */
.minimal-blog-card {
    /* Không cần style đặc biệt, để các thành phần con tự định dạng */
}

/* --- 4. ẢNH ĐẠI DIỆN VÀ HIỆU ỨNG --- */
.minimal-blog-card__image-wrapper {
    margin-bottom: var(--spacing-lg, 1.5rem);
    overflow: hidden;
    /* Bắt buộc để hiệu ứng zoom hoạt động đúng */
    background-color: var(--color-surface-tertiary, #F9F5F1);
}

.minimal-blog-card__image-wrapper img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    /* Tỷ lệ ảnh cao, giống mẫu */
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.minimal-blog-card__image-wrapper:hover img {
    transform: scale(1.05);
    /* Zoom nhẹ khi hover */
    filter: brightness(1.1);
    /* Sáng hơn một chút */
}

/* --- 5. NỘI DUNG BÊN DƯỚI --- */
.minimal-blog-card__content {
    padding: 0 var(--spacing-sm);
    /* Thêm padding ngang nhỏ để không bị dính lề */
}

.minimal-blog-card__title {
    font-family: var(--font-family-title, sans-serif);
    font-size: var(--font-size-base, 1.2rem);
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--spacing-md, 1rem) 0;
    line-height: var(--line-height-heading, 1.2);
}

.minimal-blog-card__title a {
    color: var(--color-text-primary);
    transition: color var(--transition-fast);
}

.minimal-blog-card__title a:hover {
    color: var(--color-surface-primary);
}

/* --- 6. PHẦN META (COMMENT & READ MORE) --- */
.minimal-blog-card__meta {
    display: flex;
    justify-content: space-between;
    /* Đẩy 2 item ra 2 phía */
    align-items: center;
    font-size: var(--font-size-sm, 1rem);
}

.meta-comments {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    color: var(--color-text-secondary, #7D6F64);
}

.meta-comments .material-icons {
    font-size: 18px;
    /* Kích thước icon comment */
}

.meta-read-more {
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-surface-secondary, #f5988d);
    /* Màu hồng cam từ DS */
    transition: color var(--transition-fast);
}

.meta-read-more:hover {
    color: var(--color-accent, #111111);
}

.meta-read-more::after {
    content: ' >';
    /* Thêm dấu mũi tên */
    font-size: 0.9em;
}

/* --- 7. RESPONSIVE --- */
@media (max-width: 992px) {
    .minimal-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cột trên tablet */
    }
}

@media (max-width: 576px) {
    .minimal-blog-grid {
        grid-template-columns: 1fr;
        /* 1 cột trên mobile */
    }
}

/*
==============================================
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;
}

.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;
}