/* =====================================================================================================
   Tailo v2.5 · glass layer.
   Frosted, see-through surfaces over a soft peacock + zari colour wash, built only from the theme tokens
   (--hv-mid / --hv-deep / --hv-gold / --hv-leaf from tailo-home.css), so other themes still recolour it.
   Load AFTER tailo-home.css. Without backdrop-filter support the surfaces simply turn more solid.
   ===================================================================================================== */
:root {
    --gl-blur: 18px;
    --gl-sat: 170%;
    --gl-white: color-mix(in srgb, #fff 62%, transparent);
    --gl-white-strong: color-mix(in srgb, #fff 80%, transparent);
    --gl-edge: color-mix(in srgb, #fff 70%, transparent);
    --gl-edge-dark: color-mix(in srgb, #fff 22%, transparent);
    --gl-tint: color-mix(in srgb, var(--hv-mid) 8%, transparent);
    --gl-shadow: 0 12px 34px -14px color-mix(in srgb, var(--hv-deep) 45%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--hv-deep) 14%, transparent);
    --gl-shine: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
    /* a little richer than the flat theme colours */
    --gl-gold-hi: color-mix(in srgb, var(--hv-gold) 78%, #ffe7a3);
    --gl-gold-grad: linear-gradient(135deg, var(--gl-gold-hi), var(--hv-gold) 55%, color-mix(in srgb, var(--hv-gold) 80%, #5a3f0a));
    --gl-teal-grad: linear-gradient(160deg, color-mix(in srgb, var(--hv-mid) 85%, #2f8f84), var(--hv-mid) 45%, var(--hv-deep));
}

/* ---------------------------------------------------------------- the colour wash the glass sits on */
body.hv3, body.hv-page, body:has(.tabbar) {
    background:
        radial-gradient(60vmax 40vmax at 100% 0%, color-mix(in srgb, var(--hv-gold) 16%, transparent), transparent 70%),
        radial-gradient(55vmax 45vmax at 0% 55%, color-mix(in srgb, var(--hv-mid) 13%, transparent), transparent 70%),
        radial-gradient(50vmax 40vmax at 90% 100%, color-mix(in srgb, var(--hv-leaf) 12%, transparent), transparent 70%),
        #f7f8f5;
    background-attachment: fixed;
}

/* shared frosted surface */
.hv-shop, .ts-card, .ts-tag, .hv-seg, .hv-railnote, .hv-active, .ts-menuhead, .tabbar, .hv-morebtn {
    -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat));
    backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat));
}

/* ---------------------------------------------------------------- site header: tinted glass while scrolling */
.site-header {
    background: color-mix(in srgb, var(--hv-mid) 84%, transparent) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid var(--gl-edge-dark) !important;
}

/* ---------------------------------------------------------------- dark top block */
.hv-hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(70% 90% at 92% -10%, color-mix(in srgb, var(--hv-gold) 42%, transparent), transparent 62%),
        radial-gradient(60% 80% at -5% 110%, color-mix(in srgb, var(--hv-leaf) 55%, transparent), transparent 60%),
        var(--hv-deep);
}
.hv-hero::before {   /* a slow zari glow behind the glass */
    content: ''; position: absolute; width: 340px; height: 340px; right: -90px; top: 120px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--hv-gold) 45%, transparent), transparent 68%);
    filter: blur(20px); pointer-events: none; animation: glFloat 14s ease-in-out infinite alternate;
}
.hv-hero > .container, .hv-panel { position: relative; }
.hv-panel { background: var(--gl-teal-grad); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--hv-deep) 80%, transparent); }
.hv-panel::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(80% 60% at 85% 100%, color-mix(in srgb, var(--hv-gold) 22%, transparent), transparent 70%);
}
.hv-panel::after { border-color: color-mix(in srgb, var(--hv-gold) 55%, transparent); }
.hv-sections a.on, .hv-sections a.on::before, .hv-sections a.on::after { --hv-mid: color-mix(in srgb, var(--hv-mid) 85%, #2f8f84); }
.hv-sections a:not(.on) {
    background: color-mix(in srgb, #fff 8%, transparent);
    border: 1px solid var(--gl-edge-dark); border-bottom: 0;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hv-flag { background: var(--gl-gold-grad); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--hv-gold) 80%, transparent); }
.hv-round {
    background: color-mix(in srgb, #fff 10%, transparent); border-color: var(--gl-edge-dark);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--gl-shine);
}
.hv-ava { background: var(--gl-gold-grad); }

.hv-search, .hv-for {
    background: color-mix(in srgb, #fff 94%, transparent);
    border: 1px solid var(--gl-edge);
    -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
    box-shadow: var(--gl-shine), 0 10px 26px -12px rgba(0, 0, 0, .55);
}
.hv-for b { background: var(--gl-teal-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hv-filters { border-bottom-color: var(--gl-edge-dark); }
.hv-filters button.on::after { background: var(--gl-gold-grad); box-shadow: 0 -3px 16px var(--gl-gold-hi); }
.hv-filters button.on .hv-fi { color: var(--gl-gold-hi); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hv-gold) 70%, transparent)); }

.hv-pick {
    background: linear-gradient(140deg, color-mix(in srgb, #fff 20%, transparent), color-mix(in srgb, #fff 5%, transparent));
    border: 1px solid var(--gl-edge-dark);
    -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
    box-shadow: var(--gl-shine), 0 14px 30px -16px rgba(0, 0, 0, .7);
    transition: transform .18s ease, background .18s ease;
}
.hv-pick::before {   /* the light sweep across the glass */
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, #fff 18%, transparent) 50%, transparent 65%);
    transform: translateX(-120%); transition: transform .7s ease;
}
.hv-pick:hover::before { transform: translateX(120%); }
.hv-pick:hover { transform: translateY(-2px); background: linear-gradient(140deg, color-mix(in srgb, #fff 26%, transparent), color-mix(in srgb, #fff 8%, transparent)); }
.hv-pick-art { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }

/* ---------------------------------------------------------------- white area */
.hv-sec-line > .container { border-top-color: color-mix(in srgb, var(--hv-mid) 12%, transparent); }
.hv-h { background: linear-gradient(90deg, var(--hv-ink), var(--hv-mid)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hv-seg { background: var(--gl-tint); border: 1px solid var(--gl-edge); box-shadow: var(--gl-shine); }
.hv-seg button[aria-selected="true"] { background: var(--gl-white-strong); box-shadow: var(--gl-shine), 0 6px 16px -8px color-mix(in srgb, var(--hv-deep) 40%, transparent); }

/* shop tiles: frosted price label over the photo */
.hv-tile-img { box-shadow: var(--gl-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.hv-tile:hover .hv-tile-img { transform: translateY(-3px); box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--hv-deep) 55%, transparent); }
.hv-tile-over {
    left: 8px; right: 8px; bottom: 8px; padding: 8px 12px; border-radius: 14px;
    background: color-mix(in srgb, var(--hv-deep) 42%, transparent);
    border: 1px solid color-mix(in srgb, #fff 26%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
}
.hv-tile-over b { font-size: 1.05rem; }

/* category circles: glass rings, the chosen one glows gold */
.hv-cat-c {
    background: linear-gradient(150deg, var(--gl-white-strong), color-mix(in srgb, var(--hv-mid) 10%, transparent));
    border: 1px solid var(--gl-edge);
    box-shadow: var(--gl-shine), 0 8px 18px -10px color-mix(in srgb, var(--hv-deep) 45%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hv-cat:hover .hv-cat-c { transform: translateY(-2px); transition: transform .18s ease; }
.hv-cat.on .hv-cat-c {
    background: var(--gl-teal-grad); border-color: color-mix(in srgb, var(--hv-gold) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hv-gold) 22%, transparent), 0 10px 22px -10px var(--hv-deep);
}

/* each shop is a frosted card */
.hv-shop {
    padding: 16px 16px 22px; margin-bottom: 18px; border-radius: 26px;
    background: var(--gl-white); border: 1px solid var(--gl-edge);
    box-shadow: var(--gl-shine), var(--gl-shadow);
    animation: glIn .45s ease both;
}
.hv-shop:last-child { border: 1px solid var(--gl-edge); }
.hv-shop.hv-sk { background: var(--gl-white); }
.hv-shop .hv-rail { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
.hv-shop .hv-arrow.prev { left: -26px; } .hv-shop .hv-arrow.next { right: -26px; }
.hv-logo { box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--hv-deep) 60%, transparent); }
.hv-logo:not(.has-logo) { background: var(--gl-teal-grad); color: var(--gl-gold-hi); }

.hv-item-pic > a { box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--hv-deep) 70%, transparent); transition: transform .2s ease; }
.hv-item:hover .hv-item-pic > a { transform: translateY(-2px); }
.hv-g {
    background: color-mix(in srgb, #fff 70%, transparent); border: 1px solid var(--gl-edge);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hv-plus, .hv-step {
    background: color-mix(in srgb, #fff 78%, transparent); border: 1px solid var(--gl-edge);
    -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
    box-shadow: var(--gl-shine), 0 8px 18px -8px color-mix(in srgb, var(--hv-deep) 50%, transparent);
}
.hv-plus:hover { background: var(--hv-leaf); color: #fff; }
.hv-step { border-color: color-mix(in srgb, var(--hv-leaf) 55%, transparent); }
.hv-star svg { background: linear-gradient(135deg, color-mix(in srgb, var(--hv-leaf) 75%, #7cc59a), var(--hv-leaf)); }
.hv-seeall { background: var(--gl-white); border-color: color-mix(in srgb, var(--hv-mid) 25%, transparent); }
.hv-railnote { background: var(--gl-tint); border: 1px solid var(--gl-edge); }
.hv-active { background: color-mix(in srgb, var(--hv-gold) 16%, transparent); border: 1px solid color-mix(in srgb, var(--hv-gold) 30%, transparent); }
.hv-morebtn { background: var(--gl-white-strong); box-shadow: var(--gl-shine), var(--gl-shadow); }
.hv-morebtn:hover { background: var(--gl-teal-grad); }

/* skeletons: glass shimmer */
.hv-sk-tile, .hv-sk-item, .hv-sk-cat, .hv-sk-head { background: color-mix(in srgb, var(--hv-mid) 8%, transparent); }

/* ---------------------------------------------------------------- tailor shop page */
.ts-card { background: var(--gl-white); border: 1px solid var(--gl-edge); box-shadow: var(--gl-shine), var(--gl-shadow); }
.ts-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--hv-gold) 14%, transparent), transparent 60%);
}
.ts-card > * { position: relative; }
.ts-tag { background: var(--gl-white); border-color: var(--gl-edge); box-shadow: var(--gl-shine); }
.ts-tag i { background: var(--gl-gold-grad); color: #fff; }
.ts-menuhead { background: color-mix(in srgb, #f7f8f5 72%, transparent); border-bottom-color: var(--gl-edge); }
.ts-chip { background: var(--gl-white); border-color: var(--gl-edge); box-shadow: var(--gl-shine); }
.ts-chip.on { background: var(--gl-teal-grad); border-color: transparent; box-shadow: 0 6px 16px -8px var(--hv-deep); }
.ts-search { background: var(--gl-white); border: 1px solid var(--gl-edge); }
.ts-dish { border-bottom-color: color-mix(in srgb, var(--hv-mid) 14%, transparent); }

/* ---------------------------------------------------------------- floating glass tab bar, cart bar, toast (phones) */
@media (max-width: 760px) {
    .tabbar {
        left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); padding-bottom: 0;
        border-radius: 24px; border: 1px solid var(--gl-edge) !important;
        background: color-mix(in srgb, #fff 82%, transparent) !important;
        box-shadow: var(--gl-shine), 0 16px 34px -12px color-mix(in srgb, var(--hv-deep) 50%, transparent);
        overflow: hidden;
    }
    .tabbar a.active { color: var(--hv-mid); }
    .tabbar a.active::before { top: 0; border-radius: 0 0 4px 4px; background: var(--gl-gold-grad); width: 30px; }
    .tabbar a.active svg { filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--hv-mid) 40%, transparent)); }
    .cart-bar {
        bottom: calc(84px + env(safe-area-inset-bottom)) !important;
        background: color-mix(in srgb, var(--hv-leaf) 86%, transparent) !important;
        border: 1px solid color-mix(in srgb, #fff 30%, transparent);
        -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
        box-shadow: var(--gl-shine), 0 14px 30px -12px color-mix(in srgb, var(--hv-leaf) 80%, transparent);
    }
    .tsup-fab { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }
    body:has(.cart-bar.show) .tsup-fab { bottom: calc(148px + env(safe-area-inset-bottom)) !important; }
    body { padding-bottom: 96px; }
    body:has(.cart-bar.show) { padding-bottom: 156px; }
    .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
    body:has(.cart-bar.show) .toast { bottom: calc(152px + env(safe-area-inset-bottom)); }
}
.toast {
    background: color-mix(in srgb, var(--hv-deep) 82%, transparent) !important;
    border: 1px solid color-mix(in srgb, #fff 20%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
.tsup-fab {
    background: var(--gl-gold-grad) !important; color: var(--hv-deep) !important;
    border: 1px solid color-mix(in srgb, #fff 40%, transparent) !important;
    box-shadow: var(--gl-shine), 0 10px 24px -10px color-mix(in srgb, var(--hv-gold) 90%, transparent) !important;
}

/* ---------------------------------------------------------------- touch feedback + motion */
.hv-tile:active .hv-tile-img, .hv-item-pic > a:active, .hv-pick:active, .hv-cat:active .hv-cat-c, .hv-plus:active, .ts-chip:active { transform: scale(.97); }
@keyframes glIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes glFloat { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 40px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
    .hv-shop, .hv-hero::before { animation: none; }
    .hv-pick::before { display: none; }
    .hv-tile-img, .hv-pick, .hv-item-pic > a { transition: none; }
}

/* ---------------------------------------------------------------- no blur support: make glass solid enough to read */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hv-shop, .ts-card, .ts-tag, .ts-chip, .hv-seg button[aria-selected="true"], .hv-plus, .hv-step, .hv-search, .hv-for { background: #fff; }
    .site-header { background: var(--hv-mid) !important; }
    .tabbar { background: #fff !important; }
    .ts-menuhead { background: #f7f8f5; }
    .hv-tile-over { background: color-mix(in srgb, var(--hv-deep) 78%, transparent); }
}