/* =====================================================================================================
   Tailo v2.6 · organic look. Load LAST (after tailo-glass.css).
   Colours: forest and moss greens, sage for success, ochre / turmeric instead of zari gold, oat-cream paper,
   terracotta for problems. Type: Fraunces (soft serif) for headings, Nunito (rounded) for everything else.
   Only tokens change here, so every page that uses the theme turns organic. The second half makes the
   dark top block of the home page compact: about 40% of a phone screen.
   ===================================================================================================== */
:root {
    /* ---- theme tokens (tailo-theme.css names) ---- */
    --bz-plum: #3a4d32;          /* moss: header, brand, primary buttons */
    --bz-plum-deep: #1f2b1c;     /* forest */
    --bz-plum-soft: #e8ebdc;
    --bz-marigold: #b9853f;      /* ochre / turmeric: highlights, active state */
    --bz-marigold-deep: #a6742f;
    --bz-marigold-soft: #f4e9d3;
    --bz-leaf: #5a7a46;          /* sage: ratings, add, success */
    --bz-leaf-soft: #e6eddc;
    --bz-sky: #4d6b3c;
    --bz-page: #f5f0e6;          /* oat */
    --bz-card: #fffdf8;
    --bz-ink: #2a2b22;
    --bz-ink-2: #55564a;
    --bz-ink-3: #6f7064;
    --bz-line: #e2dccd;
    --bz-line-strong: #8b8676;
    --bz-warn: #9a6418; --bz-warn-soft: #f6ead0;
    --bz-bad: #a3432f;  --bz-bad-soft: #f6e1da;   /* terracotta */
    --bz-font: 'Nunito', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    --bz-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --bz-shadow: 0 1px 2px rgba(42, 43, 34, .06), 0 2px 8px rgba(42, 43, 34, .05);
    --bz-shadow-hover: 0 10px 28px -10px rgba(31, 43, 28, .3);

    /* ---- shop.css names ---- */
    --brown-950: #1f2b1c; --brown-900: #26341f; --brown-800: #3a4d32; --brown-700: #3a4d32;
    --brown-600: #536848; --brown-500: #6f8463; --brown-400: #9fae92; --brown-300: #c7cfb9;
    --brown-200: #dde2d0; --brown-100: #eef0e4;
    --linen: var(--bz-page); --paper: #fffdf8;
    --sage-100: #eef0e4; --sage-300: #c7cfb9; --sage-700: #536848;
    --indigo: #3a4d32; --indigo-dark: #1f2b1c; --indigo-soft: #e8ebdc;
    --madder: #a3432f; --madder-soft: #f6e1da;
    --gold: #b9853f; --gold-soft: #f4e9d3;
    --ink: #2a2b22; --ink-2: #55564a; --ink-3: #6f7064;
    --line: #e2dccd; --line-strong: #8b8676;
    --ok: #5a7a46; --ok-soft: #e6eddc; --warn: #9a6418; --warn-soft: #f6ead0;
    --danger: #a3432f; --danger-soft: #f6e1da;
    --font-display: var(--bz-font-display); --font-body: var(--bz-font);
    --shadow-pop: 0 14px 34px -14px rgba(31, 43, 28, .38);
    --primary: #3a4d32; --primary-hover: #1f2b1c; --primary-soft: #e8ebdc;
    --zari: #b9853f; --zari-soft: #f4e9d3; --yellow: #b9853f; --yellow-h: #a6742f;
    --bg: var(--bz-page); --surface: #fffdf8; --info: #4d6b3c; --info-soft: #e8ebdc;
    --nav: #1f2b1c; --nav-2: #3a4d32; --nav-3: #536848; --link: #4d6b3c; --link-h: #3a4d32;
    --font: var(--bz-font); --sans: var(--bz-font);
    --mut: #6f7064; --card: #fffdf8; --brand: #3a4d32; --bad: #a3432f;
    --clay: #3a4d32; --clay-dark: #1f2b1c; --clay-soft: #e8ebdc;
    --accent: #3a4d32; --accent-d: #1f2b1c; --accent-soft: #e8ebdc;

    /* ---- home / glass names (tailo-home.css, tailo-glass.css) ---- */
    --hv-deep: #1f2b1c;
    --hv-mid: #3a4d32;
    --hv-gold: #b9853f;
    --hv-gold-soft: #f4e9d3;
    --hv-leaf: #5a7a46;
    --hv-ink: #2a2b22; --hv-ink2: #55564a; --hv-ink3: #6f7064;
    --hv-line: #e2dccd; --hv-line-strong: #c7cfb9;
    --hv-font: var(--bz-font);
    --hv-display: var(--bz-font-display);
    --gl-gold-hi: #dcae6a;
    --gl-teal-grad: linear-gradient(160deg, #4a6140, #3a4d32 45%, #26341f);
}

/* organic type: soft serif headings, rounded body */
body { font-family: var(--bz-font); }
h1, h2, .hv-h, .ts-card h1, .ts-group > h2, .hv-loc b, .hv-shop-txt h3, .hv-tile h3, .hv-pick b, .page-head h1, .section-head h2 {
    font-family: var(--hv-display) !important;
    font-optical-sizing: auto;
    letter-spacing: -.01em;
}
.hv-h { font-weight: 650; }
.hv-shop-txt h3, .hv-tile h3 { font-weight: 600; }
.hv-loc b { font-weight: 650; }
.hv-pick b { font-weight: 600; }

/* paper-like page: oat cream with a faint moss and ochre wash */
body.hv3, body.hv-page, body:has(.tabbar) {
    background:
        radial-gradient(60vmax 40vmax at 100% 0%, color-mix(in srgb, var(--hv-gold) 14%, transparent), transparent 70%),
        radial-gradient(55vmax 45vmax at 0% 55%, color-mix(in srgb, var(--hv-leaf) 12%, transparent), transparent 70%),
        var(--bz-page);
    background-attachment: fixed;
}
.ts-menuhead { background: color-mix(in srgb, var(--bz-page) 78%, transparent); }
.hv-seg { background: color-mix(in srgb, var(--hv-mid) 9%, transparent); }

/* a softer, leafier top block */
.hv-hero {
    background:
        radial-gradient(70% 90% at 95% -10%, color-mix(in srgb, var(--hv-gold) 38%, transparent), transparent 62%),
        radial-gradient(60% 80% at -5% 110%, color-mix(in srgb, var(--hv-leaf) 60%, transparent), transparent 60%),
        var(--hv-deep);
}
.hv-sections a.on, .hv-sections a.on::before, .hv-sections a.on::after { --hv-mid: #4a6140; }
.hv-panel::after { border-color: color-mix(in srgb, var(--hv-gold) 60%, transparent); }

/* rounder, pebble-like corners */
.hv-shop, .ts-card { border-radius: 28px; }
.hv-tile-img, .hv-item-pic > a { border-radius: 22px; }
.hv-pick { border-radius: 20px; }

/* =====================================================================================================
   Compact top block on phones: location, small section tabs, search, filters and short quick picks.
   On a 390 x 844 phone it ends at about 40% of the screen; everything after it is the shop list.
   ===================================================================================================== */
@media (max-width: 760px) {
    .hv-hero { padding-top: 8px; }
    .hv-top { padding: 2px 0 10px; gap: 8px; }
    .hv-loc b { font-size: 1.12rem; }
    .hv-loc b svg { width: 18px; height: 18px; }
    .hv-loc small { font-size: .78rem; }
    .hv-round { width: 38px; height: 38px; }
    .hv-round svg { width: 18px; height: 18px; }
    .hv-ava { width: 30px; height: 30px; font-size: 13px; }

    .hv-sections { gap: 5px; }
    .hv-sections a { flex-direction: row; justify-content: center; gap: 5px; padding: 8px 2px 7px; border-radius: 14px 14px 0 0; font-size: .76rem; }
    .hv-sections a.on::before, .hv-sections a.on::after { width: 10px; height: 10px; }
    .hv-sections a.on::before { left: -10px; background: radial-gradient(circle at 0 0, transparent 9.5px, var(--hv-mid) 10px); }
    .hv-sections a.on::after { right: -10px; background: radial-gradient(circle at 100% 0, transparent 9.5px, var(--hv-mid) 10px); }
    .hv-ico { width: 20px; height: 20px; }
    .hv-ico svg { width: 20px; height: 20px; }
    .hv-flag { position: static; order: 3; margin-left: 1px; padding: 0 4px; border-radius: 5px; font-size: .58rem; line-height: 1.5; }

    .hv-panel { padding: 12px 0 22px; border-radius: 0 0 24px 24px; }
    .hv-panel::after { bottom: 7px; height: 12px; left: 8px; right: 8px; border-radius: 0 0 18px 18px; }
    .hv-searchrow { gap: 8px; }
    .hv-search { height: 44px; border-radius: 14px; padding: 0 12px; gap: 8px; }
    .hv-search > svg { width: 19px; height: 19px; }
    .hv-search input { font-size: .95rem; }
    .hv-for { width: 58px; height: 44px; border-radius: 14px; }
    .hv-for small { font-size: .64rem; }
    .hv-for b { font-size: .82rem; }

    .hv-filters { margin-top: 10px; }
    .hv-filters button { flex-direction: row; gap: 5px; padding: 6px 10px 9px; font-size: .82rem; }
    .hv-fi { width: 18px; height: 18px; }
    .hv-fi svg { width: 16px; height: 16px; }

    .hv-picks { margin-top: 12px; gap: 8px; }
    .hv-pick { width: 132px; min-height: 64px; padding: 10px 44px 10px 12px; border-radius: 16px; }
    .hv-pick b { max-width: none; font-size: .86rem; line-height: 1.2; }
    .hv-pick span { display: none; }
    .hv-pick-art { width: 42px; height: 42px; right: -4px; bottom: -4px; }

    .hv-sec { padding-top: 18px; }
    .hv-seg { margin-bottom: 14px; }
    .hv-seg button { min-height: 38px; font-size: .9rem; }
}

/* placeholder fabric tiles (shops / designs without a photo) in natural dye colours */
.art.a1 { background: repeating-linear-gradient(90deg, #3a4d32 0 12px, #536848 12px 15px, #3a4d32 15px 27px, #e8ebdc 27px 29px); }
.art.a2 { background: radial-gradient(circle, #fff8 0 2.5px, transparent 3px) 0 0 / 16px 16px, #b9853f; }
.art.a3 { background: repeating-linear-gradient(0deg, rgba(255,255,255,.26) 0 7px, transparent 7px 18px), repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 7px, transparent 7px 18px), #a3432f; }
.art.a4 { background: repeating-linear-gradient(45deg, #6b5a3e 0 10px, #807052 10px 14px); }
.art.a5 { background: repeating-linear-gradient(90deg, #5a7a46 0 10px, #6f8e5a 10px 13px); }

@media (max-width: 760px) {
    .hv-flag { display: none; }              /* no room on a phone tab; the Designs page says "1 day" */
    .hv-panel { padding-bottom: 26px; }
    .hv-pick { min-height: 72px; }
}