:root {
            --black: #0F0F10;
            --white: #FFFFFF;
            --gray-bg: #f5f5f5;
            --text-muted: #888888;
            --text-gray: #4a4a4a;
            --border-color: #eee;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            border-radius: 0.2px;
        }
        /* START: DISABLE TEXT SELECTION */
        body {
            font-family: 'BPG Nino Mtavruli', sans-serif;
            background-color: var(--white);
            color: var(--text-gray);
            -webkit-user-select: none; /* Safari */
            -ms-user-select: none; /* IE 10+ and Edge */
            user-select: none; /* Standard syntax */
        }

/* --- CSS ცვლადების განსაზღვრა (აუცილებელია!) --- */
:root {
    --white: #ffffff;
    --black: #000000;
    /* ნაცრისფერი ფონი ინფუთებისთვის - ვიზუალური მაგალითის მიხედვით */
    --gray-bg: #f4f4f4; 
    /* საზღვრის ფერი ფოტო-სლოტებისთვის */
    --border-color: #cccccc; 
    /* ტექსტის ფერი დადუმებული (muted) ელემენტებისთვის, მაგ. ფოტო სლოტში */
    --text-muted: #777777; 
}

/*
 * გაყიდვის გვერდის განახლებული სტილები
 * სელექტორებში .sell-content შეიცვალა .welcome-content-ით
 */
#sell-page {
    padding-bottom: 100px;
    padding-top: 0;
    /* ფონი - რადგან welcome-container-ის სიგანე შეზღუდულია */
    background-color: var(--white); 
}

#sell-page .welcome-main-content {
    padding: 0; 
}

#sell-page .welcome-container {
    width: 100%;
    max-width: 390px;
    background-color: var(--white);
    overflow: hidden;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#sell-page .welcome-content {
    padding: 24px 20px;
    text-align: center;
}

/* უკან ღილაკი */
#sell-back-btn {
    position: absolute;
    top: 15px; /* ვიზუალური მაგალითის მიხედვით */
    left: 10px; /* ვიზუალური მაგალითის მიხედვით */
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
}
#sell-back-btn svg {
    width: 24px;
    height: 24px;
    color: var(--black);
}


#sell-page .page-header-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 24px;
    text-transform: uppercase;
    text-align: center;
}

#sell-form {
    margin-bottom: 0;
    text-align: left;
}

/* --- ფორმის ელემენტების ზოგადი სტილები --- */

.welcome-content .form-group {
    margin-bottom: 24px;
}

.welcome-content label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--black);
    font-size: 14px;
    text-transform: uppercase;
    text-align: left;
}

.welcome-content input[type="text"],
.welcome-content input[type="number"],
.welcome-content input[type="tel"] {
    width: 100%;
    padding: 16px;
    border: none;
    /* ფონის ფერი, რომ ინფუთი გამოჩნდეს */
    background-color: var(--gray-bg); 
    font-family: 'BPG Nino Mtavruli', sans-serif;
    font-size: 16px;
    text-align: center; 
}

/* ტელეფონის ველი ფორმატის გამო საჭიროებს განსხვავებულ text-align-ს */
#sell-page .phone-input-group input[type="tel"] {
    text-align: left;
}

.welcome-content input:focus {
    outline: none;
    background-color: #f0f0f0;
}

/* --- ფოტოების ატვირთვის სტილები --- */

.photo-upload-container {
    margin-top: 8px;
}

.photo-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 8px;
}

.photo-upload-slot {
    position: relative;
    aspect-ratio: 1 / 1;
    /* საზღვრის ფერი, რომ გამოჩნდეს */
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.3s;
    /* ფონის ფერი */
    background-color: var(--gray-bg);
}

.photo-upload-slot:hover {
    border-color: var(--black);
}

.photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* ტექსტის ფერი */
    color: var(--text-muted);
    text-align: center;
    padding: 10px;
}

.photo-placeholder svg {
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
    fill: currentColor; /* SVG ფერი უნდა შეესაბამებოდეს მშობლის ტექსტის ფერს */
}

.photo-placeholder span {
    font-size: 11px;
    line-height: 1.3;
    text-transform: uppercase;
    font-family: 'BPG Nino Mtavruli', sans-serif;
}

.photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.remove-photo-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--white);
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    z-index: 2;
}

/* --- ტელეფონის ველის სტილი --- */

#sell-page .phone-input-group {
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--gray-bg);
}

#sell-page .phone-input-group .prefix {
    padding: 0 16px; 
    background-color: var(--gray-bg);
    height: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    min-height: 52px; 
}

#sell-page .phone-input-group input {
    border: none;
    padding: 16px;
    background-color: var(--gray-bg);
    flex-grow: 1;
    font-family: 'BPG Nino Mtavruli', sans-serif;
    font-size: 16px;
    text-align: left;
    min-height: 52px;
}

#sell-page .phone-input-group input:focus {
    outline: none;
    background-color: #f0f0f0;
}


/* --- გაყიდვის ფორმის ღილაკის სტილი --- */

#sell-form .checkout-btn { 
    background-color: var(--black);
    width: 100%;
    padding: 16px;
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 32px; 
    font-family: 'BPG Nino Mtavruli', sans-serif; 
}

/* --- ზედმეტი სექციების დამალვა --- */

#sell-page .promo-banner,
#sell-page .sell-faq {
    display: none;
}


/* --- დესკტოპის სტილები გაყიდვის გვერდისთვის --- */

@media screen and (min-width: 768px) {
    #sell-page .welcome-container {
        max-width: 450px;
    }
    
    #sell-page .photo-upload-grid {
        grid-template-columns: repeat(5, 1fr); 
        gap: 10px;
    }
    
    #sell-page .welcome-content {
        padding: 32px 24px;
    }
}



/* Hide promo banner by default */
.promo-banner {
    display: none;
}

/* Show promo banner only when inside active welcome page */
#welcome-page.active .promo-banner {
    background: #FFFFFF;
    color: white;
    padding: 24px;
    display: flex;
    align-items: center;
    border-radius: 0px;
    border: none;
    position: fixed;
    overflow: hidden;
    width: 100%;
    max-width: 420px;
    z-index: 10000;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 480px) {
    #welcome-page.active .promo-banner {
        flex-direction: row;
        text-align: left;
        padding: 20px;
    }
}

        .app-logo {
            width: 60px;
            height: 60px;
            border-radius: 0px;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            flex-shrink: 0;
            font-weight: bold;
            color: white;
            font-size: 20px;
            border: none;
        }

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

        .app-info {
            flex: 1;
            text-align: left;
        }

        .app-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
            color: black;
        }

        .app-description {
            font-size: 15px;
            color: black;
            margin-bottom: 0;
            line-height: 1.4;
        }

        .get-button {
            background: #000;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 0px;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            transition: background-color 0.2s;
            flex-shrink: 0;
            text-transform: uppercase;
            margin-left: auto;
        }

        .get-button:hover {
            background: #222;
        }

        @media (max-width: 480px) {
           .app-info {
                margin-bottom: 0;
            }
        }
        /* END: DISABLE TEXT SELECTION */

        h1, h2, h3, h4, .btn, .filter-btn.active, .current-price, .page-header-title, .footer-accordion-toggle, .terms-accordion-toggle, .footer-contact-link, .product-item .title, .cart-total, .checkout-total, .checkout-item .item-price, #delivery-form label {
            color: var(--black);
        }

        .page { display: none; background-color: var(--white); }
        .page.active { display: block; }

        #welcome-page, #order-tracking-page, #admin-page { display: none; flex-direction: column; min-height: 100vh; padding: 0; }
        #welcome-page.active, #order-tracking-page.active, #admin-page.active { display: flex; }
        .welcome-main-content { flex-grow: 1; display: flex; justify-content: center; align-items: center; padding: 20px; }
        .welcome-container { width: 100%; max-width: 390px; background-color: var(--white); overflow: hidden; position: relative; }
        .welcome-content { padding: 24px 20px; text-align: center; }
        #welcome-page .welcome-content h1 {
            font-size: 16px;
            margin-bottom: 24px;
        }
        .btn { display: block; width: 100%; padding: 16px; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; border: none; transition: all 0.3s; }
        .gender-selection-buttons { display: flex; gap: 12px; margin-bottom: 16px; }
        .btn-gender { flex: 1; background-color: var(--black); color: var(--white); text-transform: uppercase; }
        .btn-gender-outline { background-color: var(--gray-bg); color: var(--black); }
        .login-link { font-size: 14px; color: var(--text-muted); }
        .login-link strong { color: var(--black); cursor: pointer; font-weight: 900; }

        .admin-controls {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            gap: 8px;
            z-index: 10;
        }
        .admin-entry-btn {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            padding: 6px 12px;
            font-size: 10px;
            cursor: pointer;
            font-weight: 700;
            text-transform: uppercase;
            transition: all 0.2s;
        }
        .admin-entry-btn:hover {
            background: var(--gray-bg);
            color: var(--black);
        }

        #tracking-back-btn { position: absolute; top: 16px; left: 16px; background: none; border: none; cursor: pointer; }
        .tracking-form-group { margin: 24px 0; }
        .tracking-form-group input { width: 100%; border: none; background-color: var(--gray-bg); padding: 16px; font-size: 16px; text-align: center; }
        #order-status-display {
            min-height: 48px;
            margin-bottom: 16px;
            font-weight: 700;
            font-size: 16px;
            color: var(--black);
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .shop-container { display: none; max-width: 420px; margin: 0 auto; background-color: var(--white); min-height: 100vh; position: relative; }
        .shop-container.active { display: block; }

        #home-page, #checkout-page, #product-detail-page, #terms-page { padding-bottom: 100px; }
        .main-header, .page-header, .detail-header { position: -webkit-sticky; position: sticky; top: 27px; background-color: var(--white); z-index: 1001; border-bottom: 1px solid var(--border-color); }
        .main-header { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; padding: 16px; text-align: center; }
        .header-icons { display: flex; align-items: center; gap: 8px; justify-self: flex-end; }
        .header-logo img { height: 40px; }
        .icon-btn { position: relative; background: none; border: none; cursor: pointer; padding: 4px; }
        .icon-btn svg { width: 28px; height: 28px; fill: var(--black); }
        .cart-counter { position: absolute; top: -4px; right: -4px; background-color: var(--black); color: var(--white); width: 18px; height: 18px; font-size: 11px; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 0.2s ease; }
        .cart-counter.visible { transform: scale(1); }

        .hero-section { display: none; }

        .category-filters { padding: 20px 0 20px 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
        .category-filters::-webkit-scrollbar { display: none; }
        .category-filters .filter-btn { flex-shrink: 0; padding: 10px 24px; background-color: var(--gray-bg); color: var(--black); font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.3s; border: none; text-transform: uppercase; }
        .category-filters .filter-btn.active { background-color: var(--black); color: var(--white); }
        
        /* --- [MODIFIED] SORTING STYLES --- */
        .grid-header-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            margin-bottom: 24px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 16px;
        }
        .sorting-controls {
            padding: 0;
        }
        .sorting-controls select {
            -webkit-appearance: none;
            appearance: none;
            border: none;
            background-color: transparent; /* ტრანსპარენტი ბექგრაუნდი */
            padding: 8px 30px 8px 12px;
            font-family: inherit;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            text-transform: uppercase;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
            color: var(--black);
        }

        .product-grid-section { padding: 0 16px 24px; }
        .product-grid-section h2 {
            padding-bottom: 0;
            border-bottom: none;
            margin-bottom: 0;
            text-align: left;
            font-size: 16px;
        }
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
        .no-products-found { text-align: center; padding: 40px; color: var(--text-muted); grid-column: 1 / -1; }
        .product-item { background-color: var(--white); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08);}
        .product-image-wrapper { position: relative; cursor: pointer; }
        .product-item img {
            width: 100%;
            aspect-ratio: 1 / 1.2;
            object-fit: cover;
            background-color: #ffffff;
            display: block;
        }

        .grid-actions { position: absolute; bottom: 8px; right: 8px; display: flex; align-items: center; gap: 8px; z-index: 5; }
        .size-selector { display: flex; gap: 4px; transform: translateX(10px); opacity: 0; visibility: hidden; transition: all 0.3s ease; }
        .product-item.sizes-visible .size-selector { transform: translateX(0); opacity: 1; visibility: visible; }
        .size-btn { width: 36px; height: 36px; border: 1px solid var(--black); background-color: var(--white); color: var(--black); font-weight: 700; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; font-size: 12px; }
        .size-btn:hover { background-color: var(--black); color: var(--white); }
        .grid-add-btn { position: relative; width: 36px; height: 36px; background-color: var(--black); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; flex-shrink: 0; }
        .grid-add-btn .plus-icon { width: 16px; height: 16px; }
        .grid-add-btn .plus-icon::before, .grid-add-btn .plus-icon::after { background-color: var(--white); }
        .grid-add-btn.added { background-color: var(--white); border: 1px solid var(--black); }
        .grid-add-btn.added .plus-icon { display: none; }
        .grid-add-btn .icon-check { display: none; fill: none; stroke-width: 3; width: 20px; height: 20px; }
        .grid-add-btn.added .icon-check { display: block; stroke: var(--black); }

        .product-item .info { padding: 12px; flex-grow: 1; cursor: pointer; }
        .price-container { display: flex; align-items: baseline; gap: 8px; }
        .current-price { font-weight: 700; }
        #product-detail-price .current-price { font-size: 24px; }
        .old-price { text-decoration: line-through; color: var(--text-muted); font-size: 14px; font-weight: 400; }
        .page-header { display: flex; align-items: center; padding: 16px; }
        .page-header-title { font-weight: 700; font-size: 16px; margin: 0 auto; }

        .cart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1999; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
        .cart-overlay.open { opacity: 1; visibility: visible; }
        .cart-panel { position: fixed; top: 0; right: 0; width: 100%; max-width: 380px; height: 100%; background-color: var(--white); z-index: 2000; transform: translateX(100%); transition: transform 0.3s ease-in-out; display: flex; flex-direction: column; }
        .cart-panel.open { transform: translateX(0); }
        .cart-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--border-color); }
        .cart-header .page-header-title { font-size: 16px; }
        .cart-items { flex-grow: 1; overflow-y: auto; padding: 16px; }
        .cart-item { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; }
        .cart-item:last-child { border-bottom: none; margin-bottom: 0; }
        .cart-item .item-details { flex-grow: 1; }
        .cart-item img { width: 60px; height: 80px; object-fit: cover; background-color: #ffffff; }
        .cart-item .item-info p { margin-bottom: 4px; }
        .cart-item-remove-btn { background: none; border: none; cursor: pointer; padding: 5px; margin-left: auto; flex-shrink: 0; }
        .cart-item-remove-btn svg { width: 18px; height: 18px; fill: var(--text-muted); transition: fill 0.2s; }
        .cart-item-remove-btn:hover svg { fill: var(--black); }

        .cart-footer { padding: 16px; border-top: 1px solid var(--border-color); }
        .cart-total { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
        .checkout-btn { background-color: var(--black); width: 100%; padding: 16px; color: var(--white); font-size: 16px; font-weight: 700; border: none; cursor: pointer; text-transform: uppercase; }

        .checkout-section { padding: 24px 16px; }
        #checkout-summary { margin-bottom: 24px; border-bottom: 1px solid var(--border-color); padding-bottom: 24px; }
        .checkout-item { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; font-size: 14px; }
        .checkout-item img { width: 50px; height: 65px; object-fit: cover; background-color: #ffffff; }
        .checkout-item .item-info { flex-grow: 1; }
        #delivery-form .form-group { margin-bottom: 20px; }
        #delivery-form label { display: block; margin-bottom: 8px; }
        #delivery-form textarea, #delivery-form input { width: 100%; padding: 12px; border: none; background-color: var(--gray-bg); font-family: 'BPG Nino Mtavruli', sans-serif; font-size: 16px; }
        .phone-input-group { display: flex; align-items: center; overflow: hidden; background-color: var(--gray-bg); }
        .phone-input-group .prefix { padding: 0 12px; }
        .phone-input-group input { border: none; }
        .phone-input-group input:focus { outline: none; }

        .detail-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 16px; }
        .product-image-container { position: relative; min-height: 400px; background-color: #ffffff; }
        .detail-image-slider { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; scrollbar-width: none; }
        .detail-image-slider::-webkit-scrollbar { display: none; }
        .detail-image-slider img { width: 100%; height: auto; flex-shrink: 0; scroll-snap-align: center; cursor: pointer; }

        .slider-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--white);
            color: var(--black);
            border: 1px solid var(--border-color);
            width: 40px;
            height: 40px;
            cursor: pointer;
            z-index: 10;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .slider-btn:hover {
            background-color: var(--gray-bg);
        }
        .slider-btn.prev { left: 10px; }
        .slider-btn.next { right: 10px; }
        .slider-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10;}
        .dot {
            width: 8px;
            height: 8px;
            background-color: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(0, 0, 0, 0.2);
            cursor: pointer;
            border-radius: 0px;
        }
        .dot.active { background-color: var(--black); }

        .product-info-container { padding: 24px; background-color: var(--white); margin-top: 0; }
        .product-info-container > * { margin-bottom: 20px; }
        .product-info-container > *:last-child { margin-bottom: 0; }
        .option-group select { -webkit-appearance: none; appearance: none; background-color: var(--gray-bg); color: var(--black); border: none; padding: 12px; width: 150px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; font-family: 'BPG Nino Mtavruli', sans-serif; font-weight: 700; }
        .product-description p { color: var(--text-muted); line-height: 1.6; }
        .detail-footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 420px; padding: 16px; background-color: var(--white); display: flex; box-shadow: 0 -2px 8px rgba(0,0,0,0.05); }
        #detail-add-to-cart-btn {
            flex-grow: 1;
            padding: 16px;
            background-color: var(--black);
            color: var(--white);
            font-size: 16px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            text-transform: uppercase;
        }

        .customer-reviews { padding: 24px 16px; border-top: 1px solid var(--border-color); }
        .customer-reviews h3 { margin-bottom: 16px; }
        .review-photos-container { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
        .review-photos-container::-webkit-scrollbar { display: none; }
        .review-photos-container img { height: 120px; width: 120px; object-fit: cover; flex-shrink: 0; cursor: pointer; }

        .chat-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }
        .chat-overlay.open { opacity: 1; visibility: visible; }
        .live-chat-icon {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background-color: var(--black);
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 1000;
            transition: transform 0.2s, opacity 0.3s;
            cursor: pointer;
            border: none;
            border-radius: 0;
        }
        .live-chat-icon:hover { transform: scale(1.05); }
        .live-chat-icon svg { width: 32px; height: 32px; transition: transform 0.3s, opacity 0.3s; }
        .chat-widget-container {
            position: fixed;
            bottom: 90px;
            right: 20px;
            width: calc(100% - 40px);
            max-width: 370px;
            height: min(65vh, 600px);
            background-color: var(--white);
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            z-index: 2001;
            border-radius: 0px;
            transform: translateY(20px) scale(0.95);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease-in-out;
        }
        .chat-widget-container.open {
            transform: translateY(0) scale(1);
            opacity: 1;
            visibility: visible;
        }

        .live-chat-icon.chat-open .icon-chat { transform: rotate(180deg) scale(0.5); opacity: 0; }
        .live-chat-icon.chat-open .icon-close { transform: rotate(0); opacity: 1; }
        .live-chat-icon .icon-close { position: absolute; transform: rotate(-180deg) scale(0.5); opacity: 0; }
        .chat-header {
            background-color: var(--black);
            color: var(--white);
            padding: 16px;
            font-weight: 700;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .chat-messages { flex-grow: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
        .message { padding: 10px 15px; max-width: 80%; line-height: 1.4; border-radius: 0px;}
        .operator-message { background-color: #f1f1f1; color: var(--black); align-self: flex-start; border-bottom-left-radius: 0px;}
        .user-message { background-color: var(--black); color: var(--white); align-self: flex-end; border-bottom-right-radius: 0px;}
        .chat-input-form { display: flex; padding: 10px; border-top: 1px solid var(--border-color);}
        .chat-input-form input { flex-grow: 1; border: none; padding: 10px; font-size: 16px; background: transparent; font-family: 'BPG Nino Mtavruli', sans-serif; }
        .chat-input-form input:focus { outline: none; }
        .chat-input-form button { background: none; border: none; padding: 10px; cursor: pointer; color: var(--black); }
        .chat-input-form button svg { width: 24px; height: 24px; }

        #pre-chat-form { padding: 20px; display: flex; flex-direction: column; height: 100%; }
        #pre-chat-form h4 { margin-bottom: 20px; text-align: center; font-size: 16px; }
        #pre-chat-form .form-group { margin-bottom: 15px; }
        #pre-chat-form label { font-size: 14px; margin-bottom: 5px; display: block; }
        #pre-chat-form input { width: 100%; padding: 10px; border: none; background-color: var(--gray-bg); font-size: 15px; }
        #pre-chat-form button { margin-top: auto; background-color: var(--black); color: var(--white); padding: 12px; border: none; font-size: 16px; font-weight: 700; cursor: pointer; text-transform: uppercase; }

        .search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px); z-index: 3000; opacity: 0; visibility: hidden; transition: opacity 0.3s; display: flex; justify-content: center; }
        .search-overlay.open { opacity: 1; visibility: visible; }
        .search-container { width: 100%; max-width: 420px; padding: 16px; display: flex; flex-direction: column; }
        .search-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
        #search-input { flex-grow: 1; border: none; padding: 12px; font-size: 18px; background: var(--gray-bg); font-family: 'BPG Nino Mtavruli', sans-serif; font-weight: 700; }
        #search-input:focus { outline: none; }
        .btn-close-panel { background: var(--black); color: var(--white); border: none; font-size: 20px; cursor: pointer; padding: 0; line-height: 1; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
        #search-results { flex-grow: 1; overflow-y: auto; }
        .search-result-item { display: flex; align-items: center; gap: 16px; padding: 12px; cursor: pointer; }
        .search-result-item:hover { background-color: #f5f5f5; }
        .search-result-item img { width: 50px; height: 65px; object-fit: cover; background-color: #ffffff; }
        .no-results { text-align: center; padding: 40px; color: var(--text-muted); }

        .main-footer { padding: 40px 20px; text-align: center; background-color: #fdfdfd; }
        .footer-nav { border-bottom: 1px solid var(--border-color); margin-bottom: 30px; text-align: left;}
        .footer-nav > * { border-top: 1px solid var(--border-color); padding: 16px 0; }
        .footer-nav a { color: var(--black); text-decoration: none; font-size: 15px; display: block; }
        .footer-accordion-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; font-family: 'BPG Nino Mtavruli', sans-serif; cursor: pointer; padding: 0; text-align: left; font-size: 15px; text-transform: uppercase; }
        .plus-icon { position: relative; width: 12px; height: 12px; flex-shrink: 0;}
        .plus-icon::before, .plus-icon::after { content: ''; position: absolute; background-color: var(--black); transition: transform 0.3s ease; }
        .plus-icon::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
        .plus-icon::after { top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px; }
        .footer-accordion.active .plus-icon::after, .terms-accordion.active .plus-icon::after { transform: rotate(90deg); }
        .footer-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; font-size: 15px; color: var(--text-muted); padding: 0 10px; line-height: 1.6; }
        .footer-accordion.active .footer-accordion-content { max-height: 200px; padding-top: 10px; }
        .footer-contact-link { color: var(--black); font-weight: 700; text-decoration: underline; }
        .footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 20px; }
        .footer-logo { height: 40px; }

        .scrolling-banner { background-color: var(--black); color: var(--white); padding: 8px 0; overflow: hidden; white-space: nowrap; font-size: 11px; position: -webkit-sticky; position: sticky; top: 0; z-index: 1002; }
        .scrolling-banner-content { display: inline-block; padding-left: 100%; animation: marquee 25s linear infinite; }

        .logo-marquee { padding: 20px 0; background-color: #fdfdfd; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); overflow: hidden; white-space: nowrap; }
        .logo-marquee-content { display: inline-block; padding-left: 100%; animation: marquee 30s linear infinite; }
        .logo-marquee-content img { height: 25px; margin: 0 30px; filter: grayscale(100%); opacity: 0.5; vertical-align: middle; }

        @keyframes marquee {
            from { transform: translateX(0%); }
            to { transform: translateX(-100%); }
        }

        .terms-content { padding: 0 16px; }
        .terms-accordion { border-top: 1px solid var(--border-color); padding: 16px 0; }
        .terms-content .terms-accordion:first-child { border-top: none; }
        .terms-accordion-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; font-family: inherit; font-weight: 700; cursor: pointer; text-align: left; padding: 0; text-transform: uppercase; font-size: 16px; }
        .terms-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; font-size: 14px; color: var(--text-muted); line-height: 1.7; }
        .terms-accordion-content p { padding-top: 15px; }
        .terms-accordion.active .terms-accordion-content { max-height: 400px; }

        html.lang-en, html.lang-ge { text-transform: uppercase; }
        html.lang-en ::placeholder,
        html.lang-ge ::placeholder { text-transform: uppercase; }
        html.lang-en input, html.lang-ge textarea,
        html.lang-ge input, html.lang-ge textarea { text-transform: none; }

        #loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); z-index: 9999; display: flex; justify-content: center; align-items: center; visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s; }
        #loading-overlay.visible { visibility: visible; opacity: 1; }
        .loader-dots > div { width: 12px; height: 12px; background-color: var(--black); border-radius: 0; display: inline-block; animation: square-fade 1.2s infinite ease-in-out; margin: 0 4px; }
        .loader-dots > div:nth-child(1) { animation-delay: -0.24s; }
        .loader-dots > div:nth-child(2) { animation-delay: -0.12s; }
        @keyframes square-fade {
            0%, 100% { opacity: 0.3; transform: translateY(0); }
            50% { opacity: 1; transform: translateY(-5px); }
        }

        #admin-page { text-transform: uppercase; }
        #admin-page .admin-container { padding: 20px; max-width: 800px; margin: 0 auto; width: 100%; }
        .admin-header-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .admin-header-controls .icon-btn { order: -1; }
        .admin-filters { display: flex; justify-content: flex-end; gap: 8px; }
        .admin-filters button { background: var(--gray-bg); color: var(--black); border: none; padding: 8px 12px; font-size: 12px; cursor: pointer; font-weight: 700; transition: all 0.3s; text-transform: uppercase; }
        .admin-filters button.active { background: var(--black); color: var(--white); }
        .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; text-align: center; }
        .stat-card { background: #fdfdfd; padding: 20px; border: 1px solid var(--border-color); }
        .stat-card h3 { font-size: 14px; color: var(--text-muted); margin-bottom: 10px; }
        .stat-card p { font-size: 24px; font-weight: 700; color: var(--black); text-transform: none; }
        .sales-list h2 { font-size: 20px; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
        .sales-list-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border-color); text-align: left; }
        .sales-list-item:last-child { border-bottom: none; }
        .sales-list-item .product-name { font-weight: 700; }
        .sales-list-item .customer-info { font-size: 13px; color: var(--text-muted); text-transform: none; margin: 4px 0; line-height: 1.5; }
        .sales-list-item .sale-price { font-weight: 700; text-transform: none; text-align: right; flex-shrink: 0; margin-left: 10px; }
        .sales-list-item .order-id { font-size: 12px; font-weight: 700; color: var(--black.sales-list-item .order-id { font-size: 12px; font-weight: 700; color: var(--black); margin-top: 5px; text-transform: none; }

        #image-lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 10000;
            display: none;
            justify-content: center;
            align-items: center;
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
        }
        #image-lightbox.active {
            display: flex;
        }
        #image-lightbox .lightbox-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #image-lightbox .lightbox-content img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 0.3s ease;
            transform-origin: center center;
        }
        #image-lightbox .lightbox-close {
            position: absolute;
            top: -40px;
            right: 0;
            width: 32px;
            height: 32px;
            font-size: 30px;
            font-weight: 700;
            color: var(--black);
            background-color: var(--white);
            border: none;
            cursor: pointer;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        #image-lightbox .lightbox-controls {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 1px;
        }
        #image-lightbox .lightbox-controls button {
            width: 40px;
            height: 32px;
            font-size: 24px;
            font-weight: 700;
            color: #0F0F10;
            background-color: #FFFFFF;
            border: none;
            cursor: pointer;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #welcome-page .welcome-container,
        #order-tracking-page .welcome-container,
        #terms-page main {
            animation: welcomeFadeIn 0.8s ease-out 0.2s forwards;
        }
        .main-header {
            opacity: 0;
            animation: slideDownHeader 0.7s ease-out 0.2s forwards;
        }

        @keyframes welcomeFadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideDownHeader {
            from { transform: translateY(-100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .product-item {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }
        .product-item.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .animate-on-scroll {
            opacity: 0;
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .category-filters.animate-on-scroll {
            transform: translateX(-40px);
        }
        .logo-marquee.animate-on-scroll, .main-footer.animate-on-scroll {
            transform: translateY(30px);
        }
        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0) translateX(0);
        }

        /* ==========================================================================
           [AXALI] DESKTOP STYLES - დაემატა დესკტოპისთვის (768px და მეტი)
           ========================================================================== */
        @media screen and (min-width: 768px) {
            
            /* --- ზოგადი კონტეინერების გაფართოება --- */
            .shop-container {
                max-width: 1200px; /* გავზარდოთ მაღაზიის მთავარი კონტეინერი */
            }
            .welcome-container {
                max-width: 450px; /* მისასალმებელი გვერდის ფორმა ცოტათი გავზარდოთ */
            }
            #admin-page .admin-container {
                max-width: 1100px; /* ადმინ პანელიც გავზარდოთ */
            }

            /* --- მთავარი გვერდი --- */
            #home-page .product-grid {
                grid-template-columns: repeat(4, 1fr); /* 2-ის ნაცვლად 4 პროდუქტი ერთ რიგში */
                gap: 24px;
            }
            .category-filters {
                justify-content: center; /* კატეგორიების გასწორება ცენტრში */
                overflow-x: visible; /* მოვხსნათ სქროლი */
                flex-wrap: wrap; /* თუ ბევრი კატეგორიაა, ახალ ხაზზე გადაიტანოს */
                padding-left: 0;
            }

            /* --- პროდუქტის დეტალური გვერდი --- */
            #product-detail-page > main {
                display: grid;
                grid-template-columns: 1fr 1fr; /* გავყოთ გვერდი 2 ნაწილად: სურათი და ინფორმაცია */
                gap: 40px;
                padding: 32px;
                align-items: start;
            }
            .product-info-container {
                padding: 0;
            }
            .detail-footer {
                position: relative; /* მოვხსნათ ეკრანზე მიწებება */
                transform: none;
                max-width: none;
                box-shadow: none;
                padding: 24px 0 0 0;
                left: auto;
            }
            .slider-btn { /* სლაიდერის ღილაკები გავადიდოთ */
                width: 48px;
                height: 48px;
            }

            /* --- შეკვეთის გაფორმების გვერდი --- */
            #checkout-page > main.checkout-section {
                display: grid;
                grid-template-columns: 1fr 1.2fr; /* გავყოთ 2 ნაწილად: შეჯამება და ფორმა */
                gap: 40px;
                align-items: flex-start;
                padding-top: 32px;
            }
            #checkout-summary {
                border-bottom: none;
                margin-bottom: 0;
                padding-bottom: 0;
            }

            /* --- ადმინ პანელი --- */
            .stats-grid {
                grid-template-columns: repeat(4, 1fr); /* სტატისტიკის ბარათები 4 ერთ რიგში */
            }

            /* --- ზოგადი ჰედერები --- */
            .main-header, .page-header, .detail-header {
                top: 0; /* ზედა ბანერის არ არსებობის შემთხვევაში, ჰედერი ზემოთ ავწიოთ */
            }
            .scrolling-banner {
                position: static; /* მოვხსნათ ბანერის მიწებება, დესკტოპზე არ არის საჭირო */
            }
            .main-header, .detail-header, .page-header {
                padding-left: 24px;
                padding-right: 24px;
            }
        }

        /* უფრო დიდი ეკრანებისთვის (1200px და მეტი) */
        @media screen and (min-width: 1200px) {
            #home-page .product-grid {
                grid-template-columns: repeat(5, 1fr); /* 5 პროდუქტი ერთ რიგში */
            }
        }