/* =====================================================================================================
   Tailo v3.0 · light home, following the customer's mockup: a warm cream top with leaves in the corners,
   pill-shaped section tabs, pastel offer cards with a picture and a round icon, photo cards for shops
   with the rating on the photo and an emerald price pill. Fonts and colours come from tailo-palette.css.
   Load after tailo-palette.css.
   ===================================================================================================== */
:root {
    --lt-cream: #fbf3e6;
    --lt-chip: #f3eadb;
    --lt-mint: #dcf2e7;
    --lt-mint-ink: #0b5a41;
    --lt-leaves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140'%3E%3Cpath d='M8 8c40 4 62 30 56 70C26 72 6 44 8 8Z' fill='%235aa77c' fill-opacity='.85'/%3E%3Cpath d='M10 10c18 22 34 40 50 64' fill='none' stroke='%233d7d58' stroke-width='2'/%3E%3Cpath d='M0 92c26-14 52-8 66 14-26 12-52 8-66-14Z' fill='%23f2c79a' fill-opacity='.8'/%3E%3C/svg%3E");
    --lt-leaves-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'%3E%3Cpath d='M112 6C78 16 60 46 70 86c34-10 50-42 42-80Z' fill='%23f2c79a' fill-opacity='.75'/%3E%3Cpath d='M118 96c-36 4-58 30-54 66 36-2 58-30 54-66Z' fill='%235aa77c' fill-opacity='.8'/%3E%3Cpath d='M116 100c-18 20-32 38-46 58' fill='none' stroke='%233d7d58' stroke-width='2'/%3E%3C/svg%3E");
}
body.hv3 { background: var(--tl-cotton) !important; }

/* ---------------------------------------------------------------- the top: cream instead of dark green */
.hv-hero { background: var(--lt-cream) !important; color: var(--tl-ink) !important; overflow: hidden; }
.hv-hero::before, .hv-hero::after {
    content: '' !important; display: block !important; position: absolute; pointer-events: none; z-index: 0;
    animation: none !important; filter: none !important; border-radius: 0 !important;
}
.hv-hero::before { left: -18px; top: 18px; width: 74px; height: 92px; right: auto; background: var(--lt-leaves) no-repeat left top / contain !important; }
.hv-hero::after { right: -10px; top: 0; width: 64px; height: 150px; background: var(--lt-leaves-r) no-repeat right top / contain !important; }
.hv-hero > .container, .hv-panel { position: relative; z-index: 1; }

.hv-loc, .hv-loc:hover { color: var(--tl-forest) !important; }
.hv-loc small { color: var(--tl-ink-2) !important; }
.hv-round { background: var(--lt-chip) !important; border: 0 !important; color: var(--tl-forest) !important; }
.hv-round:hover { background: #ecdfca !important; color: var(--tl-forest) !important; }

/* section tabs: separate pills */
.hv-sections { gap: 10px !important; max-width: none !important; padding-bottom: 4px; }
.hv-sections a, .hv-sections a:not(.on) {
    flex-direction: row !important; justify-content: center; gap: 8px !important;
    padding: 12px 8px !important; border-radius: 14px !important; border: 0 !important;
    background: var(--lt-chip) !important; color: var(--tl-ink) !important; font-weight: 700 !important;
}
.hv-sections a::before, .hv-sections a::after { display: none !important; }
.hv-sections a:hover { background: #ecdfca !important; }
.hv-sections a.on { background: var(--tl-leaf) !important; color: #fff !important; box-shadow: 0 6px 14px -8px var(--tl-leaf); }
.hv-sections a .hv-ico { opacity: 1 !important; color: var(--tl-ink); }
.hv-sections a.on .hv-ico { color: #fff; }
.hv-sections a:not(.on) .hv-ico svg [fill="var(--hv-gold)"] { fill: var(--tl-haldi); }
.hv-sections a.on .hv-ico svg [fill="var(--hv-gold)"] { fill: rgba(255,255,255,.35); }

/* panel: no dark slab, no hem */
.hv-panel { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding-top: 14px !important; padding-bottom: 6px !important; }
.hv-panel::after, .hv-panel::before { display: none !important; }
.hv-search { background: #fff !important; box-shadow: 0 4px 14px -6px rgba(60, 45, 20, .22) !important; border: 1px solid #efe5d4 !important; border-radius: 999px !important; }
.hv-for { background: var(--lt-mint) !important; box-shadow: none !important; border: 0 !important; border-radius: 999px !important; position: relative; padding-right: 14px; }
.hv-for small { color: var(--lt-mint-ink) !important; }
.hv-for b { color: var(--lt-mint-ink) !important; }
.hv-for::after { content: ''; position: absolute; right: 9px; top: 50%; width: 6px; height: 6px; border-right: 2px solid var(--lt-mint-ink); border-bottom: 2px solid var(--lt-mint-ink); transform: translateY(-70%) rotate(45deg); }

/* filter row: separators, emerald icons, emerald underline */
.hv-filters { border-bottom: 1px solid #ece2d2 !important; }
.hv-filters button { color: var(--tl-ink-2) !important; font-weight: 600 !important; }
.hv-filters button + button { box-shadow: inset 1px 0 0 0 transparent; }
.hv-filters button + button::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 34%; width: 1px; background: #e2d6c2; }
.hv-filters button .hv-fi { color: var(--tl-leaf) !important; filter: none !important; }
.hv-filters button[data-f="rated"] .hv-fi { color: var(--tl-fresh) !important; }
.hv-filters button.on { color: var(--tl-forest) !important; font-weight: 800 !important; }
.hv-filters button.on .hv-fi { color: var(--tl-leaf) !important; }
.hv-filters button.on::after { background: var(--tl-leaf) !important; box-shadow: none !important; height: 3px; left: 8px; right: 8px; }

/* offer cards: pastel, picture bottom-right, round icon top-right */
.hv-picks { gap: 12px !important; }
.hv-pick {
    position: relative; overflow: hidden; border: 0 !important; border-radius: 20px !important; box-shadow: none !important;
    padding: 14px 54px 14px 14px !important; min-height: 150px !important;
}
.hv-picks .hv-pick.hv-pick-1 { background: linear-gradient(160deg, #e6f4ea, #d4ecdc) !important; }
.hv-picks .hv-pick.hv-pick-2 { background: linear-gradient(160deg, #fde9e6, #fbd9d6) !important; }
.hv-picks .hv-pick.hv-pick-3 { background: linear-gradient(160deg, #e4f1fb, #d3e7f6) !important; }
.hv-picks .hv-pick.hv-pick-4 { background: linear-gradient(160deg, #fdeedd, #fbe0c4) !important; }
.hv-pick::after { content: ''; position: absolute; left: -30px; bottom: -50px; width: 150px; height: 100px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.hv-pick b { position: relative; z-index: 1; color: var(--tl-forest) !important; font-size: 1.02rem !important; max-width: 8.5em !important; }
.hv-picks .hv-pick.hv-pick-2 b { color: #8c2340 !important; }
.hv-picks .hv-pick.hv-pick-3 b { color: #1d4a6e !important; }
.hv-picks .hv-pick.hv-pick-4 b { color: #8a4a12 !important; }
.hv-pick span { display: block !important; position: relative; z-index: 1; color: var(--tl-ink-2) !important; font-size: .8rem !important; max-width: 8em !important; }
.hv-pick-art { display: none !important; }
.hv-badge { position: absolute; z-index: 1; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.hv-badge svg { width: 20px; height: 20px; }
.hv-pick-1 .hv-badge { background: #1f8f55; }
.hv-pick-2 .hv-badge { background: #ef6a4c; }
.hv-pick-3 .hv-badge { background: #2a9aa8; }
.hv-pick-4 .hv-badge { background: #e0861f; }
.hv-ill { position: absolute; z-index: 1; right: -6px; bottom: -4px; width: 112px; height: 94px; }

/* ---------------------------------------------------------------- shop cards: photo on top, info below */
.hv-tiles { gap: 14px !important; }
.hv-tile {
    width: min(72vw, 290px) !important; background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(60, 45, 20, .06), 0 8px 20px -12px rgba(60, 45, 20, .28); border: 1px solid #f0e7d8;
}
.hv-tile-img { border-radius: 0 !important; aspect-ratio: 16 / 10 !important; }
.hv-tile-over { display: none !important; }
.hv-rate {
    position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--tl-ink); font-size: .84rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.hv-rate svg { width: 15px; height: 15px; fill: #f5a524; }
.hv-tile-body { padding: 12px 14px 14px; }
.hv-tile h3 { margin: 0 0 3px !important; font-size: 1.05rem !important; }
.hv-tile-sub { font-size: .86rem; }
.hv-tile-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: .84rem; color: var(--tl-ink-2); }
.hv-tf { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.hv-tf svg { width: 15px; height: 15px; color: var(--tl-ink-3); }
.hv-tf.is-off { color: var(--tl-madder); }
.hv-pp { margin-left: auto; padding: 4px 10px; border-radius: 10px; background: var(--lt-mint); color: var(--lt-mint-ink); font-weight: 800; font-size: .92rem; white-space: nowrap; }

/* segmented control as in the mockup */
.hv-seg { background: var(--lt-chip) !important; border: 0 !important; }
.hv-seg button[aria-selected="true"] { color: var(--tl-forest) !important; }

/* category circles: bigger pastel circles */
.hv-cat-c { width: 80px !important; height: 80px !important; }

/* help button: warm yellow */
.tsup-fab { background: #f6b52e !important; color: #2b1d05 !important; border: 0 !important; box-shadow: 0 6px 14px -6px rgba(140, 90, 0, .5) !important; }

/* bottom tabs: white floating bar, emerald underline under the active label */
@media (max-width: 760px) {
    .tabbar { background: #fff !important; border: 1px solid #efe5d4 !important; border-radius: 22px !important; }
    .tabbar a.active { color: var(--tl-leaf) !important; }
    .tabbar a.active::before { top: auto !important; bottom: 6px; width: 26px !important; height: 3px !important; border-radius: 3px !important; background: var(--tl-leaf) !important; }

    .hv-sections { gap: 7px !important; }
    .hv-sections a, .hv-sections a:not(.on) { padding: 10px 4px !important; font-size: .78rem !important; gap: 5px !important; }
    .hv-ico, .hv-ico svg { width: 22px !important; height: 22px !important; }
    .hv-pick { width: 150px !important; min-height: 132px !important; padding: 12px 46px 12px 12px !important; }
    .hv-pick b { font-size: .92rem !important; }
    .hv-ill { width: 92px; height: 78px; }
    .hv-badge { width: 32px; height: 32px; top: 10px; right: 10px; }
    .hv-badge svg { width: 18px; height: 18px; }
    .hv-tile { width: 76vw !important; }
}
@media (min-width: 761px) {
    .hv-hero { padding-bottom: 10px; }
    .hv-sections { max-width: 720px !important; }
}
.hv-picks .hv-pick:hover { filter: brightness(.98); }
/* "1 day" sits after the word on the pill tabs */
.hv-flag { position: static !important; order: 3; margin-left: 2px; padding: 1px 6px !important; font-size: .66rem !important; background: var(--tl-haldi) !important; color: var(--tl-haldi-ink) !important; box-shadow: none !important; }
@media (max-width: 760px) { .hv-flag { display: none !important; } }

/* offer slider: one big card with the next one peeking in, dots that fill up while you wait */
.hv-picks { scroll-snap-type: x mandatory !important; scroll-padding-inline: 16px; }
.hv-pick { scroll-snap-align: start; scroll-snap-stop: always; }
.hv-dots { display: flex; justify-content: center; gap: 6px; margin: 12px 0 2px; }
.hv-dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #e0d3bf; cursor: pointer; overflow: hidden; transition: width .3s ease; }
.hv-dots button i { position: absolute; inset: 0; width: 0; background: var(--tl-leaf); border-radius: inherit; }
.hv-dots button.on { width: 28px; }
.hv-dots button.on i { animation: hvFill var(--every, 3000ms) linear forwards; }
.hv-dots.paused button.on i { animation-play-state: paused; }
.hv-dots button:focus-visible { outline: 2px solid var(--tl-leaf); outline-offset: 2px; }
@keyframes hvFill { from { width: 0; } to { width: 100%; } }
@media (max-width: 760px) {
    .hv-pick { width: 78vw !important; max-width: 330px; flex: none; min-height: 140px !important; }
    .hv-pick b { font-size: 1.05rem !important; max-width: 10em !important; }
    .hv-pick span { font-size: .86rem !important; max-width: 11em !important; }
    .hv-ill { width: 116px !important; height: 96px !important; }
}
@media (min-width: 761px) {
    .hv-dots { display: none; }
    .hv-pick-copy { display: none !important; }      /* all four fit on a computer: no slider */
}
@media (prefers-reduced-motion: reduce) {
    .hv-dots button { transition: none; }
    .hv-dots button.on i { animation: none; width: 100%; }
}