/*
Theme Name: ToJa Theme
*/

/* Google Fonts: Cormorant Garamond (Serif, Thư pháp) & Mulish (Sans-serif, Hiện đại) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Mulish:wght@300;400;700&display=swap');

:root {
    /* Digital Zen Garden Palette */
    --bg-paper: #F8F5F2;       /* Trắng Gạo (Rice Paper) */
    --text-ink: #4A3B32;       /* Nâu Gỗ (Dark Walnut) */
    --text-secondary: #6D6D6D; /* Xám Đá (Stone Grey) */
    --accent-moss: #556B2F;     /* Xanh Rêu (Moss Green) */
    --accent-moss-dark: #445825;
    --gray-stone: #E0E0E0;     /* Xám Đá (Stone Grey) */
}

body {
    font-family: 'Mulish', sans-serif; /* Font nội dung */
    background-color: var(--bg-paper);
    color: var(--text-ink); /* Màu chữ chính */
    line-height: 1.8; /* Khoảng cách dòng "thở" */
    font-weight: 300; /* Light weight for body */
    /* Thêm texture giấy Washi tinh tế */
    background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.03"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

h1, h2, h3, .serif {
    font-family: 'Cormorant Garamond', serif; /* Font tiêu đề */
    font-weight: 500; /* Medium weight */
    color: var(--text-ink);
}

/* Loại bỏ outline khi focus để giữ clean look */
button:focus, input:focus {
    outline: none;
    border-color: var(--text-ink);
}

/* Custom Scrollbar tối giản */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* Animations */
.fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

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

.hover-lift {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hover-lift:hover {
    transform: translateY(-5px);
}

/* --- WooCommerce Product Badges & Status --- */

/* Badge Base Style */
.toja-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    border-radius: 2px;
}

/* Specific Badge Colors */
.new-badge { background-color: var(--accent-moss); } /* Xanh Rêu */
.hot-badge { background-color: #8D7B68; top: 35px; } /* Nâu Gỗ */
.sale-badge { background-color: var(--text-secondary); right: 10px; left: auto; }

/* Sold Out Styling (Core Feature) */
.sold-badge {
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--text-ink);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    padding: 10px 20px;
    border: 1px solid var(--gray-stone);
}

/* Blur effect for Sold Out products */
.product.outofstock .woocommerce-loop-product__link img {
    opacity: 0.6;
    filter: grayscale(80%) blur(1px);
    transition: all 0.3s ease;
}


/* Before/After Handle Styling */
.ba-slider { position: relative; overflow: hidden; }
.ba-handle {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
    background: rgba(255,255,255,0.8); cursor: ew-resize; z-index: 10;
}
.ba-circle {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 30px; height: 30px; border: 1px solid white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

/* Zalo Minimal */
.zalo-float {
    position: fixed; bottom: 30px; right: 30px; z-index: 999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Grid Lines Decor */
.vertical-line {
    width: 1px;
    height: 60px;
    background-color: var(--text-ink);
    margin: 0 auto 20px auto;
}

/* Map Styling - Zen Mode (Grayscale) */
.map-container iframe {
    filter: grayscale(100%) contrast(90%);
    transition: filter 0.5s ease;
}
.map-container:hover iframe {
    filter: grayscale(0%) contrast(100%);
}