/*
Theme Name: teapalace.gr
Theme URI: https://understrap.com
Author: Developer - Nikos_Kantach
Description: Το παλάτι του τσαγιού βρίσκεται στο Ηράκλειο Κρήτης Χάνδακος 25.
Version: 1.2.4
Requires at least: 5.0
Tested up to: 6.1
Requires PHP: 5.2
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: understrap
*/


/* =========================================================
   01. TEA PALACE — GLOBAL VARIABLES
========================================================= */

:root {
    --tea-black: #080808;
    --tea-gold: #D4AF37;
    --tea-white: #FFFFFF;
}


/* =========================================================
   02. BODY / GLOBAL BACKGROUND
========================================================= */

body {
    min-height: 100vh;
background-image: url(http://localhost/teapalace/wp-content/uploads/2026/10/bgCus.png);
 
    background:
        radial-gradient(
            ellipse 700px 450px at 50% -5%,
            rgba(212,175,55,.12) 0%,
            rgba(212,175,55,.055) 35%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 500px 400px at 0% 35%,
            rgba(212,175,55,.07) 0%,
            rgba(212,175,55,.025) 45%,
            transparent 75%
        ),
        radial-gradient(
            ellipse 600px 450px at 100% 65%,
            rgba(212,175,55,.065) 0%,
            rgba(212,175,55,.02) 45%,
            transparent 75%
        ),
        radial-gradient(
            ellipse 900px 500px at 50% 100%,
            rgba(212,175,55,.035) 0%,
            transparent 70%
        ),
        #080808;

    background-attachment: fixed;

    color: #fff;
}


/* =========================================================
   03. GLOBAL LINKS
========================================================= */

a {
    color: #fff;
    text-decoration: none;
    transition: color .3s ease;
}

a:hover {
    color: var(--tea-gold) !important;
}


/* =========================================================
   04. GLOBAL BUTTONS
========================================================= */

.tea-palace-btn,
button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {

    background:
        linear-gradient(
            90deg,
            #B88A1A 0%,
            #D4AF37 25%,
            #E2C45A 50%,
            #D4AF37 75%,
            #B88A1A 100%
        ) !important;

    color: #080808 !important;

    border: 1px solid #D4AF37 !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;
}

.tea-palace-btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {

    filter: brightness(1.08);

    box-shadow:
        0 6px 20px rgba(212,175,55,.20),
        0 0 12px rgba(212,175,55,.10);

    transform: translateY(-2px);
}


/* =========================================================
   05. GOLD NAVIGATION LINE
========================================================= */

.tea-palace-nav-gold-line {

    width: 100%;
    height: 1px;
    margin-top: 4px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(212,175,55,.15) 5%,
            #D4AF37 20%,
            #D4AF37 80%,
            rgba(212,175,55,.15) 95%,
            transparent 100%
        );

    box-shadow:
        0 0 8px rgba(212,175,55,.25),
        0 0 18px rgba(212,175,55,.08);
}


/* =========================================================
   06. SITE INFO
========================================================= */

.site-info {
    text-align: center;
}

.site-info a {
    color: #fff;
    text-decoration: none;
}


/* =========================================================
   07. MAIN NAVIGATION
========================================================= */

#main-nav {
    position: relative;
    z-index: 100;
    background: var(--tea-black) !important;
}


/* =========================================================
   08. WOOCOMMERCE — VARIATION SELECT
========================================================= */

.woocommerce div.product form.cart .variations select {

    border-color: rgba(212,175,55,.55) !important;

    background:
        linear-gradient(
            90deg,
            #B88A1A 0%,
            #D4AF37 25%,
            #E2C45A 50%,
            #D4AF37 75%,
            #B88A1A 100%
        ) !important;

    text-align: center;
}

#pa_varos:hover {

    filter: brightness(1.08);

    box-shadow:
        0 6px 20px rgba(212,175,55,.20),
        0 0 12px rgba(212,175,55,.10);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;

    transform: translateY(-2px);
}

.variations option {
    background-color: #B48C1E;
}

.variations option:hover {
    background-color: #D4AF37 !important;
    color: #080808 !important;
}


/* =========================================================
   09. PRODUCT CATEGORY SIDEBAR
========================================================= */


/* ---------- Main Category Dot ---------- */

.tea-palace-category-list
> .wc-block-product-categories-list
> .wc-block-product-categories-list-item
> a::before {

    content: "";

    width: 4px;
    height: 4px;

    margin-right: 12px;

    flex-shrink: 0;

    background: #D4AF37;

    border-radius: 50%;

    opacity: .7;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


/* ---------- Main Category Hover ---------- */

.tea-palace-category-list
> .wc-block-product-categories-list
> .wc-block-product-categories-list-item
> a:hover {

    color: #D4AF37 !important;

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.09),
            transparent
        );

    padding-left: 21px;
}

.tea-palace-category-list
> .wc-block-product-categories-list
> .wc-block-product-categories-list-item
> a:hover::before {

    opacity: 1;
    transform: scale(1.7);
}


/* ---------- First Subcategory Level ---------- */

.tea-palace-category-list
.wc-block-product-categories-list--depth-1 {

    position: relative;

    margin: 0 0 6px 0 !important;

    padding: 4px 0 8px 31px !important;

    border-left:
        1px solid rgba(212,175,55,.20);
}


/* ---------- Subcategory Item ---------- */

.tea-palace-category-list
.wc-block-product-categories-list--depth-1
.wc-block-product-categories-list-item {

    position: relative;
}


/* ---------- Subcategory Connector ---------- */

.tea-palace-category-list
.wc-block-product-categories-list--depth-1
.wc-block-product-categories-list-item::before {

    content: "";

    position: absolute;

    left: -31px;
    top: 50%;

    width: 22px;
    height: 1px;

    background: rgba(212,175,55,.20);
}


/* ---------- Subcategory Link ---------- */

.tea-palace-category-list
.wc-block-product-categories-list--depth-1
.wc-block-product-categories-list-item > a {

    display: flex !important;
    align-items: center;

    min-height: 38px;

    padding: 8px 12px;

    color: rgba(255,255,255,.62) !important;

    font-size: 12px;
    font-weight: 400;
    letter-spacing: .3px;

    text-decoration: none !important;

    border-bottom:
        1px solid rgba(255,255,255,.035);

    transition:
        color .3s ease,
        background .3s ease,
        padding-left .3s ease;
}


/* ---------- Subcategory Dot ---------- */

.tea-palace-category-list
.wc-block-product-categories-list--depth-1
.wc-block-product-categories-list-item > a::before {

    content: "";

    width: 4px;
    height: 4px;

    margin-right: 9px;

    flex-shrink: 0;

    background: rgba(212,175,55,.45);

    border-radius: 50%;

    transition: all .3s ease;
}


/* ---------- Subcategory Hover ---------- */

.tea-palace-category-list
.wc-block-product-categories-list--depth-1
.wc-block-product-categories-list-item > a:hover {

    color: #D4AF37 !important;

    background: rgba(212,175,55,.045);

    padding-left: 17px;
}

.tea-palace-category-list
.wc-block-product-categories-list--depth-1
.wc-block-product-categories-list-item > a:hover::before {

    background: #D4AF37;

    transform: scale(1.5);
}


/* ---------- Second Subcategory Level ---------- */

.tea-palace-category-list
.wc-block-product-categories-list--depth-2 {

    position: relative;

    margin: 0 !important;

    padding: 2px 0 5px 27px !important;

    border-left:
        1px solid rgba(212,175,55,.12);
}


/* ---------- Second Level Connector ---------- */

.tea-palace-category-list
.wc-block-product-categories-list--depth-2
.wc-block-product-categories-list-item::before {

    content: "";

    position: absolute;

    left: -27px;
    top: 50%;

    width: 18px;
    height: 1px;

    background: rgba(212,175,55,.14);
}


/* ---------- Second Level Link ---------- */

.tea-palace-category-list
.wc-block-product-categories-list--depth-2
.wc-block-product-categories-list-item > a {

    display: flex !important;
    align-items: center;

    min-height: 32px;

    padding: 6px 10px;

    color: rgba(255,255,255,.45) !important;

    font-size: 11px;

    text-decoration: none !important;

    transition:
        color .3s ease,
        background .3s ease;
}

.tea-palace-category-list
.wc-block-product-categories-list--depth-2
.wc-block-product-categories-list-item > a:hover {

    color: #D4AF37 !important;

    background: rgba(212,175,55,.03);
}


/* ---------- Product Count ---------- */

.tea-palace-category-list
.wc-block-product-categories-list-item-count {

    margin-left: auto;

    color: rgba(212,175,55,.55);

    font-size: 10px;
}


/* =========================================================
   10. MAIN CUSTOM MENU
========================================================= */
.tea-palace-mini-cart{
    z-index: 150;
}
.tea-palace-navbar-menu {

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

    gap: 40px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.tea-palace-navbar-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tea-palace-navbar-menu > li {
    position: relative;
}

.tea-palace-navbar-menu > li > a {

    display: flex;
    align-items: center;

    height: 80px;
    padding: 0;

    color: var(--tea-white);

    font-size: 14px;
    font-weight: 500;

    letter-spacing: 1.7px;

    text-decoration: none;
    white-space: nowrap;

    transition: color .3s ease;
}

.tea-palace-navbar-menu > li > a:hover {
    color: var(--tea-gold);
}


/* =========================================================
   11. TEA MENU TRIGGER
========================================================= */

.tea-palace-tea-trigger {
    position: static !important;
}

.tea-palace-tea-trigger > a {
    position: relative;
}


/* Hover bridge */

.tea-palace-tea-trigger > a::before {

    content: "";

    position: absolute;

    left: -20px;
    right: -20px;
    bottom: -40px;

    height: 40px;

    pointer-events: auto;

    z-index: 999999;
}


/* Arrow */

.tea-palace-tea-trigger > a::after {

    content: "⌄";

    margin-left: 9px;

    color: var(--tea-gold);

    font-size: 16px;
    line-height: 1;

    transition: transform .3s ease;
}

.tea-palace-tea-trigger:hover > a::after {
    transform: rotate(180deg);
}


/* =========================================================
   12. MEGA MENU
========================================================= */

.tea-palace-tea-dropdown {

    position: absolute;

    top: 100%;
    left: 0;

    width: 100vw;
    max-width: 100vw;

    margin: 0;
    padding: 0;

    background: var(--tea-black);

    border-top:
        1px solid rgba(212,175,55,.8);

    box-shadow:
        0 30px 80px rgba(0,0,0,.75);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 999999;

    clip-path: inset(0 0 100% 0);

    transition:
        clip-path .65s cubic-bezier(.22,1,.36,1),
        opacity .35s ease,
        visibility 0s linear .65s;
}


/* ---------- Mega Menu Open ---------- */

.tea-palace-tea-trigger:hover
> .tea-palace-tea-dropdown,

.tea-palace-tea-dropdown:hover {

    clip-path: inset(0);

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        clip-path .65s cubic-bezier(.22,1,.36,1),
        opacity .35s ease,
        visibility 0s;
}


/* =========================================================
   13. MEGA MENU GOLD EFFECT
========================================================= */

.tea-palace-tea-dropdown::after {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 0;
    height: 1px;

    background: var(--tea-gold);

    box-shadow:
        0 0 15px rgba(212,175,55,.65),
        0 0 35px rgba(212,175,55,.25);

    transform: translateX(-50%);

    transition:
        width .8s cubic-bezier(.22,1,.36,1);
}

.tea-palace-tea-trigger:hover
.tea-palace-tea-dropdown::after {

    width: 70%;
}


/* =========================================================
   14. MEGA MENU INNER
========================================================= */

.tea-palace-tea-dropdown-inner {

    position: relative;

    width: 100%;
    max-width: 1450px;

    margin: auto;

    padding: 42px 45px 30px;

    overflow: hidden;
}


/* ---------- Gold Glow ---------- */

.tea-palace-tea-dropdown-inner::before {

    content: "";

    position: absolute;

    top: -180px;
    left: 50%;

    width: 700px;
    height: 400px;

    background:
        radial-gradient(
            ellipse,
            rgba(212,175,55,.16),
            rgba(212,175,55,.07) 35%,
            transparent 72%
        );

    transform:
        translateX(-50%)
        scale(.35);

    opacity: 0;

    pointer-events: none;

    transition:
        transform 1.2s cubic-bezier(.22,1,.36,1),
        opacity .8s ease;
}

.tea-palace-tea-trigger:hover
.tea-palace-tea-dropdown-inner::before {

    transform:
        translateX(-50%)
        scale(1);

    opacity: 1;
}


/* =========================================================
   15. MEGA MENU HEADER
========================================================= */

.tea-palace-tea-dropdown-header {

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 35px;

    margin-bottom: 27px;

    opacity: 0;

    transform: translateY(-22px);

    transition:
        opacity .5s ease .15s,
        transform .75s cubic-bezier(.22,1,.36,1) .15s;
}

.tea-palace-tea-trigger:hover
.tea-palace-tea-dropdown-header {

    opacity: 1;
    transform: none;
}


/* ---------- Header Text ---------- */

.tea-palace-eyebrow,
.tea-palace-dropdown-title,
.tea-palace-all-teas {
    opacity: 0;
}

.tea-palace-eyebrow {

    display: block;

    margin-bottom: 9px;

    color: var(--tea-gold);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 4px;

    transform: translateY(-8px);

    transition:
        opacity .4s ease .22s,
        transform .55s ease .22s;
}

.tea-palace-dropdown-title {

    margin: 0;

    color: var(--tea-white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 38px;
    font-weight: 400;

    line-height: 1.1;

    transform: translateY(12px);

    transition:
        opacity .6s ease .28s,
        transform .7s cubic-bezier(.22,1,.36,1) .28s;
}

.tea-palace-all-teas {

    color: var(--tea-gold);

    font-size: 10px;

    letter-spacing: 2.2px;

    text-decoration: none;

    white-space: nowrap;

    transform: translateX(15px);

    transition:
        opacity .5s ease .35s,
        transform .6s cubic-bezier(.22,1,.36,1) .35s,
        color .3s ease;
}


/* ---------- Header Animation ---------- */

.tea-palace-tea-trigger:hover
.tea-palace-eyebrow,

.tea-palace-tea-trigger:hover
.tea-palace-dropdown-title,

.tea-palace-tea-trigger:hover
.tea-palace-all-teas {

    opacity: 1;
    transform: none;
}

.tea-palace-all-teas:hover {
    color: var(--tea-white);
}

.tea-palace-all-teas span {
    margin-left: 8px;
    font-size: 17px;
}


/* =========================================================
   16. MEGA MENU GOLD LINE
========================================================= */

.tea-palace-gold-line {

    width: 100%;
    height: 1px;

    margin-bottom: 30px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--tea-gold) 12%,
            var(--tea-gold) 88%,
            transparent
        );

    opacity: 0;

    transform: scaleX(0);

    transition:
        transform .9s cubic-bezier(.22,1,.36,1) .35s,
        opacity .4s ease .35s;
}

.tea-palace-tea-trigger:hover
.tea-palace-gold-line {

    opacity: 1;
    transform: scaleX(1);
}


/* =========================================================
   17. MEGA MENU PRODUCT GRID
========================================================= */

.tea-palace-tea-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 15px;
}


/* =========================================================
   18. MEGA MENU PRODUCT CARDS
========================================================= */

.tea-palace-tea-item {

    --delay: 0s;

    position: relative;

    display: block;

    min-height: 250px;

    padding: 17px;

    overflow: hidden;

    color: var(--tea-white);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.012)
        );

    border:
        1px solid rgba(212,175,55,.22);

    opacity: 0;

    transform:
        translateY(28px)
        scale(.94);

    transition:
        opacity .55s ease,
        transform .7s cubic-bezier(.22,1,.36,1),
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


/* ---------- Stagger ---------- */

.tea-palace-tea-item:nth-child(2) {
    --delay: .06s;
}

.tea-palace-tea-item:nth-child(3) {
    --delay: .12s;
}

.tea-palace-tea-item:nth-child(4) {
    --delay: .18s;
}

.tea-palace-tea-item:nth-child(5) {
    --delay: .24s;
}

.tea-palace-tea-item:nth-child(6) {
    --delay: .30s;
}

.tea-palace-tea-item:nth-child(7) {
    --delay: .36s;
}

.tea-palace-tea-item:nth-child(8) {
    --delay: .42s;
}

.tea-palace-tea-item:nth-child(9) {
    --delay: .48s;
}

.tea-palace-tea-item:nth-child(10) {
    --delay: .54s;
}

.tea-palace-tea-item:nth-child(11) {
    --delay: .60s;
}

.tea-palace-tea-item:nth-child(12) {
    --delay: .66s;
}


/* ---------- Cards Open Animation ---------- */

.tea-palace-tea-trigger:hover
.tea-palace-tea-item {

    opacity: 1;

    transform: none;

    transition-delay:
        calc(.38s + var(--delay));
}


/* ---------- Card Hover ---------- */

.tea-palace-tea-item:hover {

    transform:
        translateY(-5px)
        scale(1.015) !important;

    border-color: var(--tea-gold);

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.12),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 14px 40px rgba(0,0,0,.55),
        0 0 28px rgba(212,175,55,.06);
}


/* ---------- Light Sweep ---------- */

.tea-palace-tea-item::after {

    content: "";

    position: absolute;

    top: 0;
    left: -130%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.12),
            transparent
        );

    transform: skewX(-20deg);

    pointer-events: none;
}

.tea-palace-tea-item:hover::after {

    left: 150%;

    transition:
        left .85s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   19. MEGA MENU PRODUCT NUMBER
========================================================= */

.tea-number {

    position: absolute;

    top: 13px;
    right: 15px;

    color: rgba(212,175,55,.8);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: 2px;

    z-index: 2;
}


/* =========================================================
   20. MEGA MENU PRODUCT IMAGE
========================================================= */

.tea-image {

    position: relative;
    z-index: 1;

    display: flex;

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

    height: 155px;
}

.tea-image img {

    display: block;

    width: auto;
    height: auto;

    max-width: 150px;
    max-height: 150px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 10px 18px rgba(0,0,0,.35)
        );

    opacity: 0;

    transform:
        translateY(14px)
        scale(.88);

    transition:
        opacity .55s ease .45s,
        transform .8s cubic-bezier(.22,1,.36,1) .45s,
        filter .4s ease;
}

.tea-palace-tea-trigger:hover
.tea-image img {

    opacity: 1;

    transform: none;

    transition-delay:
        calc(.45s + var(--delay));

    animation:
        teaPalaceFloat
        4s
        ease-in-out
        1.15s
        infinite;
}

.tea-palace-tea-item:hover
.tea-image img {

    animation-play-state: paused;

    transform:
        scale(1.08)
        translateY(-4px) !important;

    filter:
        drop-shadow(
            0 14px 25px
            rgba(212,175,55,.22)
        );
}


/* ---------- Floating Image ---------- */

@keyframes teaPalaceFloat {

    50% {

        transform:
            translateY(-5px)
            scale(1.015);
    }
}


/* =========================================================
   21. MEGA MENU PRODUCT TEXT
========================================================= */

.tea-info {
    position: relative;
    z-index: 2;
}

.tea-info h3 {

    margin: 3px 0 8px;

    color: var(--tea-white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 19px;

    font-weight: 400;

    line-height: 1.2;
}

.tea-info span {

    color: var(--tea-gold);

    font-size: 9px;

    letter-spacing: 2.2px;

    transition:
        letter-spacing .3s ease,
        color .3s ease;
}

.tea-palace-tea-item:hover
.tea-info span {

    color: #E6C766;

    letter-spacing: 3px;
}

.tea-info a {
    color: var(--tea-white);
    text-decoration: none;
}


/* =========================================================
   22. MEGA MENU SUBCATEGORIES
========================================================= */

.tea-palace-subcategories {

    display: flex;

    flex-wrap: wrap;

    gap: 6px 14px;

    margin-top: 14px;

    padding-top: 11px;

    border-top:
        1px solid rgba(212,175,55,.18);

    position: relative;
    z-index: 2;
}

.tea-palace-subcategories a {

    color: rgba(255,255,255,.65);

    font-size: 10px;

    letter-spacing: 1px;

    text-decoration: none;

    transition:
        color .25s ease;
}

.tea-palace-subcategories a:hover {
    color: var(--tea-gold);
}


/* =========================================================
   23. MEGA MENU BOTTOM
========================================================= */

.tea-palace-menu-bottom {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 25px;

    color: rgba(212,175,55,.65);

    font-size: 8px;

    letter-spacing: 3px;

    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity .5s ease 1.15s,
        transform .6s cubic-bezier(.22,1,.36,1) 1.15s;
}

.tea-palace-tea-trigger:hover
.tea-palace-menu-bottom {

    opacity: 1;
    transform: none;
}

.tea-palace-menu-bottom div {

    flex: 1;

    height: 1px;

    background:
        rgba(212,175,55,.25);
}
/* =========================================================
   24. SECTION ANIMATION — MAIN CONTENT
========================================================= */
/* =========================================================
TEA PALACE — PREMIUM SCROLL REVEAL
========================================================= */

/* Αρχική κατάσταση */
.tea-scroll-reveal {
opacity: 0;
transform: translateY(45px);
transition:
opacity .9s cubic-bezier(.22,1,.36,1),
transform 1s cubic-bezier(.22,1,.36,1);
will-change: opacity, transform;
}

/* Όταν εμφανιστεί στο viewport */
.tea-scroll-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}

/* =========================================================
PREMIUM VARIATIONS
========================================================= */

/* Από αριστερά */
.tea-reveal-left {
opacity: 0;
transform: translateX(-60px);
transition:
opacity 1s cubic-bezier(.22,1,.36,1),
transform 1.1s cubic-bezier(.22,1,.36,1);
}

.tea-reveal-left.is-visible {
opacity: 1;
transform: translateX(0);
}

/* Από δεξιά */
.tea-reveal-right {
opacity: 0;
transform: translateX(60px);
transition:
opacity 1s cubic-bezier(.22,1,.36,1),
transform 1.1s cubic-bezier(.22,1,.36,1);
}

.tea-reveal-right.is-visible {
opacity: 1;
transform: translateX(0);
}

/* Luxury scale */
.tea-reveal-scale {
opacity: 0;
transform: scale(.94);
transition:
opacity 1s ease,
transform 1.2s cubic-bezier(.22,1,.36,1);
}

.tea-reveal-scale.is-visible {
opacity: 1;
transform: scale(1);
}

/* =========================================================
STAGGER — ΠΕΡΙΕΧΟΜΕΝΟ ΜΕ ΜΙΚΡΗ ΚΑΘΥΣΤΕΡΗΣΗ
========================================================= */

.tea-stagger > * {
opacity: 0;
transform: translateY(25px);
transition:
opacity .7s cubic-bezier(.22,1,.36,1),
transform .8s cubic-bezier(.22,1,.36,1);
}

.tea-stagger.is-visible > * {
opacity: 1;
transform: translateY(0);
}

.tea-stagger.is-visible > *:nth-child(1) {
transition-delay: .05s;
}

.tea-stagger.is-visible > *:nth-child(2) {
transition-delay: .15s;
}

.tea-stagger.is-visible > *:nth-child(3) {
transition-delay: .25s;
}

.tea-stagger.is-visible > *:nth-child(4) {
transition-delay: .35s;
}

.tea-stagger.is-visible > *:nth-child(5) {
transition-delay: .45s;
}

.tea-stagger.is-visible > *:nth-child(6) {
transition-delay: .55s;
}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

 
.tea-scroll-reveal,
.tea-reveal-left,
.tea-reveal-right,
.tea-reveal-scale,
.tea-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
}
 

}

/* =========================================================
   24. HOME — MAIN CONTENT
========================================================= */
 
.mainContent {
    padding-top: 52px;
}

.mainContent button {
    padding: 15px 70px;
    border-radius: 40px;
}

.main-image {
    margin-top: 32px;

    transition:
        transform 1s cubic-bezier(.22,1,.36,1);
}

.main-image:hover {
    animation:
        mainImageFloat
        3s
        ease-in-out
        infinite;
}

@keyframes mainImageFloat {

    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(15px);
    }

    100% {
        transform: translateX(0);
    }
}

.mainSecond {
    padding-bottom: 60px;
}


/* =========================================================
   25. HOME — INFORMATION CARDS
========================================================= */

.cards img {
    margin-top: -80px;
    margin-bottom: 20px;
}

.cards p {
    margin-bottom: 32px;
}

.card1,
.card2,
.card3 {

    padding: 25px;

    background: #5b523621;

    box-shadow:
        0 0 8px rgba(212,175,55,.25),
        0 0 18px rgba(212,175,55,.08);
}


/* =========================================================
   26. HOME — TEA CUP SECTION
========================================================= */

.teaCup {

    position: relative;

    min-height: 600px;

    display: flex;

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

    overflow: hidden;
}


/* ---------- Tea Cup Image ---------- */

.teaCupBg {

    position: relative;
    z-index: 2;

    width: 320px;
    height: 320px;

    background-image:
        url("http://localhost/teapalace/wp-content/uploads/2026/10/tea-hover-e1791341309544.png");

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .8s ease;
}

.teaCup:hover .teaCupBg {

    transform: scale(1.05);

    filter:
        drop-shadow(0 20px 35px rgba(0,0,0,.5))
        drop-shadow(0 0 20px rgba(212,175,55,.18));
}


/* ---------- Tea Cup Information ---------- */

.topLeft,
.topRight,
.BottomLeft,
.BottomRight {

    position: absolute;

    width: 240px;

    padding: 15px 18px;

    opacity: 0;

    transition:
        opacity .6s ease,
        transform .8s cubic-bezier(.22,1,.36,1);

    z-index: 3;
}


/* ---------- Positions ---------- */

.topLeft {

    top: 70px;
    left: 40px;

    transform:
        translate(-30px,-30px);
}

.topRight {

    top: 70px;
    right: 40px;

    transform:
        translate(30px,-30px);
}

.BottomLeft {

    bottom: 70px;
    left: 40px;

    transform:
        translate(-30px,30px);
}

.BottomRight {

    bottom: 70px;
    right: 40px;

    transform:
        translate(30px,30px);
}


/* ---------- Tea Cup Titles ---------- */

.topLeft h4,
.topRight h4,
.BottomLeft h4,
.BottomRight h4 {

    margin: 0 0 8px;

    color: #D4AF37;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    font-weight: 400;

    letter-spacing: 1px;
}


/* ---------- Tea Cup Text ---------- */

.topLeft p,
.topRight p,
.BottomLeft p,
.BottomRight p {

    margin: 0;

    color: rgba(255,255,255,.7);

    font-size: 12px;

    line-height: 1.7;
}


/* ---------- Connection Lines ---------- */

.topLeft::after,
.topRight::after,
.BottomLeft::after,
.BottomRight::after {

    content: "";

    position: absolute;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #D4AF37
        );

    opacity: 0;

    transition:
        width .7s ease .25s,
        opacity .4s ease .25s;
}

.topLeft::after {

    right: -120px;
    top: 50%;
}

.topRight::after {

    left: -120px;
    top: 50%;

    transform: rotate(180deg);
}

.BottomLeft::after {

    right: -120px;
    top: 50%;
}

.BottomRight::after {

    left: -120px;
    top: 50%;

    transform: rotate(180deg);
}


/* ---------- Tea Cup Hover ---------- */

.teaCup:hover .topLeft,
.teaCup:hover .topRight,
.teaCup:hover .BottomLeft,
.teaCup:hover .BottomRight {

    opacity: 1;

    transform: translate(0,0);
}

.teaCup:hover .topLeft::after,
.teaCup:hover .topRight::after,
.teaCup:hover .BottomLeft::after,
.teaCup:hover .BottomRight::after {

    width: 120px;
    opacity: 1;
}


/* ---------- Stagger ---------- */

.teaCup:hover .topLeft {
    transition-delay: .05s;
}

.teaCup:hover .topRight {
    transition-delay: .15s;
}

.teaCup:hover .BottomLeft {
    transition-delay: .25s;
}

.teaCup:hover .BottomRight {
    transition-delay: .35s;
}


/* =========================================================
   27. HOME — SIGNATURE SECTION
========================================================= */

.signature-section {
    background: #080808;
}


/* ---------- Signature Image ---------- */

.signature-image {

    position: relative;

    width: 100%;

    text-align: center;
}

.signature-image::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-50%);

    background:
        rgba(212,175,55,.08);

    filter: blur(80px);

    z-index: 0;
}

.signature-image img {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 500px;

    height: auto;

    object-fit: contain;

    transition:
        transform .6s ease;
}

.signature-image:hover img {
    transform: scale(1.03);
}


/* ---------- Signature Content ---------- */

.signature-content {
    padding: 30px 50px;
}

.signature-small-title {

    display: block;

    color: #D4AF37;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 13px;

    letter-spacing: 5px;

    margin-bottom: 15px;
}

.signature-symbol {

    color: #D4AF37;

    font-size: 22px;

    margin-bottom: 12px;
}

.signature-content h2 {

    margin: 0;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 46px;

    font-weight: 400;

    letter-spacing: 2px;
}

.signature-line {

    width: 100px;

    height: 1px;

    margin: 25px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #D4AF37,
            transparent
        );
}

.signature-content p {

    max-width: 480px;

    color: rgba(255,255,255,.65);

    font-size: 14px;

    line-height: 1.9;

    margin-bottom: 35px;
}


/* ---------- Signature Button ---------- */

.signature-btn {

    display: inline-block;

    padding: 13px 30px;

    color: #080808 !important;

    background:
        linear-gradient(
            90deg,
            #B88A1A 0%,
            #D4AF37 50%,
            #B88A1A 100%
        );

    border: 1px solid #D4AF37;

    border-radius: 40px;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;

    text-decoration: none;

    transition:
        transform .3s ease,
        filter .3s ease,
        box-shadow .3s ease;
}

.signature-btn:hover {

    color: #080808 !important;

    filter: brightness(1.08);

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(212,175,55,.18);
}

/* =========================================================
ALADDIN — BACK TO TOP
========================================================= */

.tea-aladdin-top {
position: fixed;
right: 28px;
bottom: 28px;
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;

opacity: 0;
visibility: hidden;
pointer-events: none;

transform: translateY(25px) scale(.85);

transition:
    opacity .4s ease,
    visibility .4s ease,
    transform .5s cubic-bezier(.22,1,.36,1);

}

.tea-aladdin-top img {
display: block;
height: auto;
filter:
    drop-shadow(0 8px 15px rgba(0,0,0,.45))
    drop-shadow(0 0 12px rgba(212,175,55,.12));
transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    filter .4s ease;

}

/* Εμφάνιση μετά το scroll */
.tea-aladdin-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}

/* Hover */
@media (hover: hover) and (pointer: fine) {

.tea-aladdin-top:hover img {
    transform: translateY(-6px) scale(1.08);

    filter:
        drop-shadow(0 12px 22px rgba(0,0,0,.55))
        drop-shadow(0 0 18px rgba(212,175,55,.25));
}

}
/* =========================================================
   28. FOOTER — LUXURY FOOTER
========================================================= */

.tea-luxury-footer {

    position: relative;

    width: 100%;

    background:
        radial-gradient(
            ellipse 700px 450px at 50% 0%,
            rgba(212,175,55,.055),
            transparent 70%
        ),
        #080808;

    color: #fff;

    padding: 100px 0 25px;

    overflow: hidden;

    border-top:
        1px solid rgba(212,175,55,.18);
}


/* ---------- Footer Container ---------- */

.tea-luxury-container {

    width: min(1450px, 90%);

    margin: 0 auto;

    position: relative;

    z-index: 2;
}


/* ---------- Footer Intro ---------- */

.tea-footer-intro {

    text-align: center;

    max-width: 750px;

    margin: 0 auto 90px;
}

.tea-footer-symbol {

    color: #D4AF37;

    font-size: 20px;

    margin-bottom: 25px;
}

.tea-footer-brand {

    display: block;

    color: #D4AF37;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: 8px;

    margin-bottom: 20px;
}

.tea-footer-intro h2 {

    margin: 0;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(32px,4vw,52px);

    font-weight: 400;

    letter-spacing: 3px;

    line-height: 1.2;
}

.tea-footer-line {

    width: 100px;

    height: 1px;

    margin: 28px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #D4AF37,
            transparent
        );
}

.tea-footer-intro p {

    margin: 0;

    color: rgba(255,255,255,.50);

    font-size: 13px;

    line-height: 2;

    letter-spacing: .5px;
}


/* ---------- Footer Columns ---------- */

.tea-footer-columns {

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap: 70px;

    padding: 55px 0;

    border-top:
        1px solid rgba(212,175,55,.13);

    border-bottom:
        1px solid rgba(212,175,55,.13);
}

.tea-footer-column {

    position: relative;

    min-height: 145px;

    padding-left: 25px;

    border-left:
        1px solid rgba(212,175,55,.18);
}


/* ---------- Footer Number ---------- */

.tea-column-number {

    display: block;

    color: #D4AF37;

    font-size: 8px;

    letter-spacing: 3px;

    margin-bottom: 20px;

    opacity: .7;
}


/* ---------- Footer Title ---------- */

.tea-footer-column h3 {

    margin: 0 0 18px;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 13px;

    font-weight: 400;

    letter-spacing: 3px;
}


/* ---------- Footer Text ---------- */

.tea-footer-column p {

    max-width: 280px;

    margin: 0;

    color: rgba(255,255,255,.45);

    font-size: 12px;

    line-height: 1.9;
}


/* ---------- Footer Links ---------- */

.tea-footer-column a {

    position: relative;

    display: block;

    width: fit-content;

    margin-bottom: 12px;

    padding-bottom: 3px;

    color: rgba(255,255,255,.48) !important;

    font-size: 11px;

    text-decoration: none;

    transition:
        color .3s ease,
        transform .3s ease;
}

.tea-footer-column a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: #D4AF37;

    transition:
        width .3s ease;
}

.tea-footer-column a:hover {

    color: #D4AF37 !important;

    transform: translateX(4px);
}

.tea-footer-column a:hover::after {
    width: 100%;
}


/* ---------- Footer Bottom ---------- */

.tea-footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 25px;

    color: rgba(255,255,255,.25);

    font-size: 8px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* ---------- Footer Glow ---------- */

.tea-luxury-footer::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 300px;

    left: 50%;
    top: -180px;

    transform:
        translateX(-50%);

    background:
        rgba(212,175,55,.06);

    filter: blur(100px);

    pointer-events: none;
}


/* =========================================================
   29. RESPONSIVE — 1200px
========================================================= */

@media (max-width: 1200px) {

    /* ---------- Main Menu ---------- */

    .tea-palace-navbar-menu {
        gap: 28px;
    }

    .tea-palace-navbar-menu > li > a {
        font-size: 12px;
        letter-spacing: 1.2px;
    }


    /* ---------- Mega Menu ---------- */

    .tea-palace-tea-dropdown-inner {

        max-width: 1150px;

        padding-left: 30px;
        padding-right: 30px;
    }

    .tea-palace-tea-grid {
        gap: 12px;
    }

    .tea-palace-tea-item {

        min-height: 225px;

        padding: 14px;
    }

    .tea-image {
        height: 140px;
    }

    .tea-image img {

        max-width: 130px;
        max-height: 130px;
    }

    .tea-info h3 {
        font-size: 17px;
    }
}


/* =========================================================
   30. RESPONSIVE — 991px
========================================================= */

@media (max-width: 991px) {

    /* ---------- Main Menu ---------- */

    .tea-palace-navbar-menu {
        gap: 20px;
    }

    .tea-palace-navbar-menu > li > a {

        font-size: 11px;

        letter-spacing: 1px;
    }


    /* ---------- Mega Menu ---------- */

    .tea-palace-tea-dropdown-inner {

        max-width: 100%;

        padding:
            32px
            25px
            27px;
    }

    .tea-palace-dropdown-title {
        font-size: 34px;
    }

    .tea-palace-tea-grid {

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap: 11px;
    }

    .tea-palace-tea-item {
        min-height: 220px;
    }

    .tea-image {
        height: 130px;
    }

    .tea-image img {

        max-width: 120px;
        max-height: 120px;
    }

    .tea-info h3 {
        font-size: 16px;
    }


    /* ---------- Signature ---------- */

    .signature-section {

        margin: 70px 0;

        padding: 60px 0;
    }

    .signature-content {
        padding: 20px 25px;
    }

    .signature-content h2 {
        font-size: 38px;
    }


    /* ---------- Footer ---------- */

    .tea-luxury-footer {
        padding-top: 80px;
    }

    .tea-footer-columns {

        grid-template-columns:
            1fr 1fr;

        gap: 45px;
    }
}


/* =========================================================
   31. RESPONSIVE — 767px
========================================================= */

@media (max-width: 767px) {


    /* =====================================================
       MOBILE — CATEGORY SIDEBAR
    ===================================================== */

    .tea-palace-category-list
    > .wc-block-product-categories-list
    > .wc-block-product-categories-list-item
    > a {

        min-height: 44px;

        padding: 11px 12px;

        font-size: 12px;
    }

    .tea-palace-category-list
    .wc-block-product-categories-list--depth-1 {

        padding-left: 25px !important;
    }

    .tea-palace-category-list
    .wc-block-product-categories-list--depth-1
    .wc-block-product-categories-list-item::before {

        left: -25px;

        width: 18px;
    }

    .tea-palace-category-list
    .wc-block-product-categories-list--depth-1
    .wc-block-product-categories-list-item > a {

        min-height: 36px;

        font-size: 11px;
    }


    /* =====================================================
       MOBILE — CART
    ===================================================== */

    .tea-palace-cart-link {

        height: auto;

        min-height: 48px;

        padding: 13px 0;

        font-size: 12px;
    }


    /* =====================================================
       MOBILE — CUSTOM MENU
    ===================================================== */

    #tea-palace-custom-menu {

        width: 100%;

        margin-left: 0 !important;
    }

    .tea-palace-navbar-menu {

        flex-direction: column;

        align-items: stretch;

        width: 100%;

        gap: 0;

        padding-top: 15px;
    }

    .tea-palace-navbar-menu > li,
    .tea-palace-navbar-menu > li > a {

        width: 100%;
    }

    .tea-palace-navbar-menu > li > a {

        height: auto;

        min-height: 48px;

        padding: 13px 0;

        font-size: 12px;

        letter-spacing: 1.5px;
    }


    /* =====================================================
       MOBILE — TEA MENU
    ===================================================== */

    .tea-palace-tea-trigger > a::before {
        display: none;
    }

    .tea-palace-tea-dropdown {

        position: static;

        width: 100%;
        max-width: 100%;

        margin-top: 5px;

        display: none;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        clip-path: none;

        background: var(--tea-black);

        border-top:
            1px solid rgba(212,175,55,.4);

        box-shadow: none;
    }

    .tea-palace-tea-trigger:hover
    .tea-palace-tea-dropdown {

        display: block;
    }

    .tea-palace-tea-dropdown::after,
    .tea-palace-tea-dropdown-inner::before {

        display: none;
    }


    /* ---------- Disable Desktop Animations ---------- */

    .tea-palace-tea-dropdown-header,
    .tea-palace-eyebrow,
    .tea-palace-dropdown-title,
    .tea-palace-all-teas,
    .tea-palace-menu-bottom,
    .tea-palace-tea-item,
    .tea-image img {

        opacity: 1;

        transform: none;

        animation: none;
    }

    .tea-palace-gold-line {

        opacity: 1;

        transform: scaleX(1);
    }


    /* ---------- Mobile Mega Menu ---------- */

    .tea-palace-tea-dropdown-inner {

        max-width: 100%;

        padding:
            27px
            15px
            22px;
    }

    .tea-palace-tea-dropdown-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

        margin-bottom: 20px;
    }

    .tea-palace-eyebrow {

        font-size: 8px;

        letter-spacing: 3px;
    }

    .tea-palace-dropdown-title {
        font-size: 29px;
    }

    .tea-palace-all-teas {
        font-size: 8px;
    }

    .tea-palace-tea-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 9px;
    }

    .tea-palace-tea-item {

        min-height: 205px;

        padding: 11px;
    }

    .tea-number {

        top: 9px;
        right: 10px;

        font-size: 8px;
    }

    .tea-image {
        height: 115px;
    }

    .tea-image img {

        max-width: 100px;
        max-height: 100px;
    }

    .tea-info h3 {

        margin: 2px 0 6px;

        font-size: 15px;
    }

    .tea-info span {

        font-size: 7px;

        letter-spacing: 1.5px;
    }

    .tea-palace-menu-bottom {

        margin-top: 19px;

        font-size: 6px;

        letter-spacing: 2px;
    }


    /* =====================================================
       MOBILE — TEA CUP
    ===================================================== */

    .teaCup {

        position: relative;

        display: block;

        min-height: auto;

        padding: 40px 15px;
    }

    .teaCupBg {

        position: relative;

        width: 260px;
        height: 260px;

        margin: 0 auto;

        cursor: pointer;

        background-size: contain;

        background-position: center;

        background-repeat: no-repeat;

        transition:
            transform .6s cubic-bezier(.22,1,.36,1),
            filter .6s ease;
    }


    /* ---------- Closed Information ---------- */

    .topLeft,
    .topRight,
    .BottomLeft,
    .BottomRight {

        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;

        margin: 0;

        padding: 0;

        max-height: 0;

        overflow: hidden;

        opacity: 0;

        transform:
            translateY(-15px);

        transition:
            max-height .7s ease,
            opacity .5s ease,
            transform .6s ease,
            padding .5s ease,
            margin .5s ease;
    }


    /* ---------- Open Information ---------- */

    .teaCup.mobile-open .topLeft,
    .teaCup.mobile-open .topRight,
    .teaCup.mobile-open .BottomLeft,
    .teaCup.mobile-open .BottomRight {

        max-height: 200px;

        margin-top: 20px;

        padding: 15px 18px;

        opacity: 1;

        transform:
            translateY(0);

        text-align: center;
    }


    /* ---------- Mobile Text ---------- */

    .topLeft h4,
    .topRight h4,
    .BottomLeft h4,
    .BottomRight h4 {

        margin: 0 0 8px;

        color: #D4AF37;

        font-size: 17px;
    }

    .topLeft p,
    .topRight p,
    .BottomLeft p,
    .BottomRight p {

        margin: 0;

        color: rgba(255,255,255,.7);

        font-size: 12px;

        line-height: 1.7;
    }


    /* ---------- Remove Desktop Lines ---------- */

    .topLeft::after,
    .topRight::after,
    .BottomLeft::after,
    .BottomRight::after {

        display: none;
    }


    /* ---------- Open Cup ---------- */

    .teaCup.mobile-open .teaCupBg {

        transform: scale(1.04);

        filter:
            drop-shadow(
                0 15px 30px rgba(0,0,0,.45)
            )
            drop-shadow(
                0 0 18px rgba(212,175,55,.15)
            );
    }


    /* =====================================================
       MOBILE — SIGNATURE
    ===================================================== */

    .signature-section {

        margin: 50px 0;

        padding: 40px 0;
    }

    .signature-image {

        margin-bottom: 25px;
    }

    .signature-image img {

        max-width: 330px;
    }

    .signature-content {

        padding: 20px 15px;

        text-align: center;
    }

    .signature-small-title {

        font-size: 11px;

        letter-spacing: 4px;
    }

    .signature-symbol {
        font-size: 20px;
    }

    .signature-content h2 {
        font-size: 32px;
    }

    .signature-line {
        margin: 20px auto;
    }

    .signature-content p {

        max-width: 100%;

        font-size: 13px;

        line-height: 1.8;
    }

    .signature-btn {

        padding: 12px 24px;

        font-size: 11px;
    }
    /* =====================================================
       alladin — arrowup
    ===================================================== */
.tea-aladdin-top {
    right: -85px;
    width: 250px;
    }
    /* =====================================================
       MOBILE — FOOTER
    ===================================================== */

    .tea-luxury-footer {

        padding: 65px 0 20px;
    }

    .tea-luxury-container {

        width: 88%;
    }

    .tea-footer-intro {

        margin-bottom: 60px;
    }

    .tea-footer-brand {

        font-size: 9px;

        letter-spacing: 5px;
    }

    .tea-footer-intro h2 {

        font-size: 28px;

        letter-spacing: 1px;
    }

    .tea-footer-intro p {
        font-size: 12px;
    }

    .tea-footer-columns {

        grid-template-columns: 1fr;

        gap: 35px;

        padding: 40px 0;
    }

    .tea-footer-column {

        min-height: auto;

        padding-left: 20px;
    }

    .tea-footer-bottom {

        flex-direction: column;

        gap: 10px;

        text-align: center;

        line-height: 1.6;
    }
}


/* =========================================================
   32. RESPONSIVE — 575px
========================================================= */

@media (max-width: 575px) {

    .tea-palace-tea-dropdown-inner {

        padding:
            23px
            12px
            19px;
    }

    .tea-palace-dropdown-title {
        font-size: 26px;
    }

    .tea-palace-tea-grid {
        gap: 8px;
    }

    .tea-palace-tea-item {

        min-height: 190px;

        padding: 9px;
    }

    .tea-image {
        height: 105px;
    }

    .tea-image img {

        max-width: 90px;

        max-height: 90px;
    }

    .tea-info h3 {
        font-size: 14px;
    }

    .tea-info span {

        font-size: 6px;

        letter-spacing: 1.2px;
    }
}


/* =========================================================
   33. RESPONSIVE — 400px
========================================================= */

@media (max-width: 400px) {

    .tea-palace-tea-dropdown-inner {

        padding:
            21px
            10px
            16px;
    }

    .tea-palace-dropdown-title {
        font-size: 24px;
    }

    .tea-palace-tea-grid {
        gap: 7px;
    }

    .tea-palace-tea-item {

        min-height: 175px;

        padding: 8px;
    }

    .tea-image {
        height: 95px;
    }

    .tea-image img {

        max-width: 82px;

        max-height: 82px;
    }

    .tea-info h3 {
        font-size: 13px;
    }
}


/* =========================================================
   34. ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .tea-palace-tea-dropdown,
    .tea-palace-tea-dropdown *,
    .tea-palace-tea-dropdown::after,
    .tea-palace-tea-dropdown-inner::before {

        animation: none !important;

        transition-duration: .01ms !important;
    }
}