/*
 * TippyTaps v2 — the Claude Design redesign (handoff in design_handoff_tippytaps/,
 * 2026-10-06). Loaded only where tt_v2() is on: staging for now (inc/redesign.php).
 *
 * ⚠️ EVERY RULE STARTS WITH `body.tt-v2`. The old rules are `.tt-site …` (0,2,0);
 * `body.tt-v2 …` outweighs them by specificity, not by load order — LiteSpeed
 * combines and reorders CSS for guests only, so an order-based win is a win for
 * staff and a loss for visitors (decisions.md, 2026-10-06).
 *
 * The handoff's tokens are written into the EXISTING variable names (--bg, --ink,
 * --green …), not a parallel --tt-* set, so pages without a design file (salons,
 * hotels, cabinet, booking) take the new palette and type at once. Only colours
 * the old palette did not have get new names.
 *
 * Hover only inside @media (hover:hover) — touch screens keep hover state after a
 * tap. Motion off under prefers-reduced-motion (end of file).
 */

/* ---------- tokens ---------- */
body.tt-v2{
  --bg:#f2eee4; --paper:#f2eee4; --surface:#fbf9f3;
  --ink:#18271f; --ink-2:#4a5a50; --muted:#5b6b61;
  --forest:#153427; --green:#2f9e70; --green-ink:#1f7d57; --accent:#2f9e70; --accent-ink:#1f7d57;
  --lime:#cfe05a; --pop:#e0603a;
  --line:rgba(24,39,31,.14);
  --tt-pink:#f7c9cf; --tt-pink-500:#f7a1ae; --tt-yellow:#f3c343; --tt-hero:#33719b;
  /* Two radii, site-wide (Roman's design review, 2026-10-07): every block —
     card, panel, hero, footer — takes --tt-r; every button and form control
     takes --tt-r-btn. Labels and tags stay pills, circles stay circles, and the
     arched photos keep their arch tops. The old --radius / --radius-sm follow,
     so pages with no v2 file line up too. */
  --tt-r:20px; --tt-r-btn:12px; --radius:var(--tt-r); --radius-sm:var(--tt-r-btn);
  --tt-nav-h:84px;
  --tt-ease:cubic-bezier(.2,.75,.2,1); --tt-spring:cubic-bezier(.3,1.6,.5,1);
  --tt-shadow:0 34px 60px -34px rgba(21,52,39,.5);
  --disp:"Urbanist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Urbanist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
body.tt-v2 ::selection{ background:var(--lime); color:var(--ink); }
body.tt-v2 :focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

/* ---------- header ----------
   A floating pill on --surface; the bar itself is transparent. Shadow appears
   once the page scrolls (.is-scrolled, set by tt-ui.js). */
body.tt-v2 .nav{ background:transparent; border-bottom:0; backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:12px clamp(12px,2vw,24px) 0; }
body.tt-v2 .nav .row{ max-width:1360px; width:auto; margin:0 auto; height:auto; gap:16px;
  padding:10px 10px 10px 22px; border-radius:var(--tt-r);
  background:rgba(251,249,243,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(24,39,31,.08); transition:box-shadow .3s; }
body.tt-v2 .nav.is-scrolled .row{ box-shadow:0 14px 34px -20px rgba(21,52,39,.45); }
body.tt-v2 .nav .brand-logo{ height:34px; transition:rotate .4s var(--tt-spring); }
body.tt-v2 .nav .links{ gap:4px; margin-left:12px; }
body.tt-v2 .nav .links a{ padding:10px 16px; border-radius:var(--tt-r-btn); color:var(--ink); font-weight:500; font-size:15px;
  transition:background .2s, color .2s; }
body.tt-v2 .nav .links a.active{ background:var(--ink); color:var(--bg); font-weight:600; }
body.tt-v2 .nav .sos{ background:var(--pop); color:var(--surface); padding:13px 20px; font-size:15px; gap:10px; border-radius:var(--tt-r-btn);
  transition:background .2s, scale .2s; }
/* The dot: cream, with a ring that pulses out of it (the handoff's data-pulse,
   done in CSS so the shared header markup needs no change). */
body.tt-v2 .nav .sos .d{ position:relative; width:8px; height:8px; background:var(--surface); animation:none; }
body.tt-v2 .nav .sos .d::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--surface);
  animation:tt-v2-pulse 1.8s ease-out infinite; }
@keyframes tt-v2-pulse{ from{ scale:1; opacity:.7; } to{ scale:2.8; opacity:0; } }
body.tt-v2 .nav-account{ border-radius:var(--tt-r-btn); }
@media (hover:hover){
  body.tt-v2 .nav .brand:hover .brand-logo{ rotate:-4deg; }
  body.tt-v2 .nav .links a:not(.active):hover{ background:var(--bg); color:var(--green-ink); }
  body.tt-v2 .nav .sos:hover{ background:#c94e2a; color:var(--surface); scale:1.03; }
}

/* Phones and tablets: round dark burger; the menu opens as a full-screen
   forest panel with big links and a dog peeking from the corner. */
@media (max-width:980px){
  body.tt-v2{ --tt-nav-h:76px; }
  body.tt-v2 .nav .row{ padding:8px 8px 8px 16px; gap:10px; }
  body.tt-v2 .nav-burger{ width:46px; height:46px; border-radius:var(--tt-r-btn); background:var(--ink); gap:4px;
    position:relative; z-index:2; align-items:flex-start; padding:0 13px; }
  body.tt-v2 .nav-burger span{ width:20px; height:1.6px; margin:0; background:var(--bg); }
  body.tt-v2 .nav-burger span:nth-child(3){ width:12px; }
  body.tt-v2 .nav .sos{ padding:11px 14px; font-size:14px; gap:8px; }

  /* ⚠️ backdrop-filter makes the pill the containing block of position:fixed
     children — the "full-screen" panel would be the size of the pill. Off while
     the menu is open. */
  body.tt-v2 .nav.open .row{ backdrop-filter:none; -webkit-backdrop-filter:none; background:transparent; border-color:transparent; box-shadow:none; }
  body.tt-v2 .nav.open .brand,
  body.tt-v2 .nav.open .sos{ position:relative; z-index:2; }
  body.tt-v2 .nav.open .nav-burger{ background:var(--lime); }
  body.tt-v2 .nav.open .nav-burger span{ background:var(--forest); width:20px; }
  body.tt-v2 .nav.open .nav-burger span:nth-child(1){ transform:translateY(5.6px) rotate(45deg); }
  body.tt-v2 .nav.open .nav-burger span:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg); }
  body.tt-v2 .nav .links{ position:fixed; inset:0; z-index:1; margin:0; padding:96px 24px 24px; gap:4px;
    background:var(--forest); border:0; box-shadow:none; overflow:hidden auto; }
  body.tt-v2 .nav .links a{ position:relative; z-index:1; font-size:44px; font-weight:600; letter-spacing:-.04em; line-height:1.1;
    color:var(--bg); padding:4px 0; border-radius:0; background:none; border-bottom:1px solid rgba(242,238,228,.12); }
  body.tt-v2 .nav .links a.active{ background:none; color:var(--lime); }
  body.tt-v2 .nav .links a.nav-account--menu{ font-size:20px; font-weight:600; color:var(--lime); border-top:0;
    margin-top:20px; padding:4px 0; border-bottom:0; letter-spacing:0; }
  body.tt-v2 .nav .links::after{ content:""; position:absolute; right:-20px; bottom:-30px; width:210px; height:250px;
    border-radius:120px 120px 0 0; rotate:-6deg; background:url(../img/v2/menu-dog.webp) center/cover; z-index:0; pointer-events:none; }
  body.tt-v2:has(.nav.open){ overflow:hidden; }
}
@media (min-width:561px) and (max-width:980px){
  /* The light wordmark is dark ink — on the forest panel it would vanish. */
  body.tt-v2 .nav.open .brand-logo{ content:url(../brand/tippytaps-logo-dark-540.png); }
}

/* ---------- footer ----------
   A forest slab with a big radius, inset from the page edge, and a clean top
   edge: a cat in an arch, round faces and polaroids over it were each tried and
   dropped (Roman, Stas, 2026-10-08). Markup for the outline "Tippy Taps" and
   the back-to-top button is printed only under tt_v2() in footer.php. */
body.tt-v2 .site-footer{ position:relative; background:transparent; color:rgba(242,238,228,.72);
  margin-top:clamp(56px,7vw,96px); padding:0 clamp(10px,1.6vw,20px) clamp(10px,1.6vw,20px); }
/* `body.tt-v2.tt-site`, not `body.tt-v2`: site.css caps the footer wrap at 1680px on
   catalog pages (`.tt-site.tt-catalog-view .site-footer .wrap`, 0-4-0), which beat the
   0-3-1 rule here — so on /kliniky/ the slab stopped short and sat left with a gap on
   the right (sQuem, 2026-10-19: "поплыл футер на десктопе"). */
body.tt-v2.tt-site .site-footer > .wrap{ position:relative; z-index:1; max-width:none; width:auto; margin:0;
  background:var(--forest); border-radius:var(--tt-r); overflow:hidden;
  padding:clamp(40px,6vw,80px) clamp(22px,5vw,72px) 28px; }
body.tt-v2 .site-footer .cols{ padding:0; gap:48px 64px; }
body.tt-v2 .site-footer .about{ font-size:16px; line-height:1.55; color:rgba(242,238,228,.72); max-width:36ch; margin-top:20px; }
body.tt-v2 .site-footer h4{ font-family:var(--sans); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--lime); font-weight:600; margin:0 0 18px; }
body.tt-v2 .site-footer ul{ gap:12px; }
body.tt-v2 .site-footer ul a{ font-size:17px; color:var(--bg); font-weight:400; }
body.tt-v2 .site-footer .bottom{ position:relative; z-index:1; display:flex; justify-content:flex-start; flex-wrap:wrap; align-items:center; gap:14px 28px;
  border-top:1px solid rgba(242,238,228,.14); padding-top:22px; margin-top:24px; font-size:14px; color:rgba(242,238,228,.65); }
body.tt-v2 .site-footer .bottom__id{ display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; }
body.tt-v2 .site-footer .tt-v2-link{ color:rgba(242,238,228,.8); }
/* Fryzur.com: one small letter, quiet but clickable (footer.php). */
body.tt-v2 .site-footer .tt-v2-fz{ font-size:11px; font-weight:600; color:rgba(242,238,228,.35); text-decoration:none; padding:4px; }
body.tt-v2 .site-footer .tt-v2-fill{ flex:1; }
/* "Návrat hore" — fixed bottom-right, printed after the footer (footer.php), shown
   once the page has scrolled a screen (.is-on, tt-ui.js). Phones: the arrow alone,
   lifted above the booking bar on venue pages; hidden while the cookie banner is
   up so the two do not overlap. */
body.tt-v2 .tt-v2-top{ position:fixed; right:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px); z-index:55;
  display:flex; align-items:center; gap:10px; border:1px solid rgba(242,238,228,.25);
  background:var(--forest); color:var(--bg); padding:12px 18px; border-radius:var(--tt-r-btn); cursor:pointer; font:inherit; font-size:14px; font-weight:600;
  box-shadow:0 14px 30px -16px rgba(21,52,39,.6);
  opacity:0; visibility:hidden; translate:0 12px; transition:opacity .25s, visibility .25s, translate .25s, background .2s, color .2s; }
body.tt-v2 .tt-v2-top.is-on{ opacity:1; visibility:visible; translate:0 0; }
body.tt-v2 .tt-v2-top svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body.tt-v2:has(#tt-cc-banner.is-open) .tt-v2-top{ display:none; }
@media (max-width:900px){
  body.tt-v2 .tt-v2-top{ width:46px; height:46px; padding:0; justify-content:center; }
  body.tt-v2 .tt-v2-top .tt-v2-top__l{ display:none; }
  body.tt-v2.tt-site:has(.tt-book__bar:not([hidden])) .tt-v2-top{ bottom:88px; }
}
/* The brand name, outlined, as wide as the slab (Roman, 2026-10-07: it was "ťap ťap"
   and overflowed phones). "Tippy Taps" is ~4.4× its font-size wide; the slab's
   content box is ~84vw on a phone and wider above, so 18.5vw fits from 360px up —
   the old 90px floor is what pushed it past the edge (395px into 326px at 390). */
body.tt-v2 .site-footer .tt-v2-tap{ font-family:var(--disp); font-weight:650; font-size:clamp(40px,18.5vw,300px); line-height:.8;
  letter-spacing:-.06em; white-space:nowrap; color:transparent;
  /* margin-bottom .24em: at line-height .8 the descenders of p, y and p hang ~.2em
     below the box, and they were drawn across the copyright / TopLekári row under it
     (2026-10-19). An em margin scales with the clamp, so it clears at every width. */
  margin:56px 0 .24em -6px;
  -webkit-text-stroke:1.5px rgba(207,224,90,.35); user-select:none; pointer-events:none; }
/* "Spýtajte sa AI" in the footer: a compact card beside the outlined wordmark
   (sQuem, 2026-10-29: the full-width plate above the columns was "очень огромный").
   footer.php wraps the wordmark and the card in .tt-v2-tapline. */
body.tt-v2 .site-footer .tt-v2-tapline{ display:flex; flex-direction:column; align-items:flex-start; gap:0 40px; margin-top:56px; }
body.tt-v2 .site-footer .tt-v2-tapline .tt-v2-tap{ margin-top:0; }
body.tt-v2 .site-footer .tt-ai--footer{ box-sizing:border-box; width:100%; max-width:400px; margin:0 0 28px; padding:20px 22px;
  gap:12px; border-radius:16px; align-items:flex-start; text-align:left; }
body.tt-v2 .site-footer .tt-ai--footer .tt-ai__kick{ font-size:11.5px; gap:6px; }
body.tt-v2 .site-footer .tt-ai--footer .tt-ai__kick svg{ width:12px; height:12px; }
body.tt-v2 .site-footer .tt-ai--footer .tt-ai__q{ max-width:none; font-size:18px; line-height:1.3; letter-spacing:-.01em; text-wrap:pretty; }
body.tt-v2 .site-footer .tt-ai--footer .tt-ai__links{ justify-content:center; align-self:stretch; gap:8px; margin-top:2px; } /* centred row (sQuem, 2026-10-29) */
body.tt-v2 .site-footer .tt-ai--footer .tt-ai__btn{ width:44px; height:44px; border-radius:12px; }
body.tt-v2 .site-footer .tt-ai--footer .tt-ai__btn > svg{ width:20px; height:20px; }
body.tt-v2 .site-footer .tt-ai--footer .tt-ai__spark{ top:6px; right:6px; width:8px; height:8px; }
body.tt-v2 .site-footer .tt-ai--footer .tt-ai__hint{ font-size:12.5px; }
/* Desktop: wordmark left, card right, bottoms aligned. The wordmark shrinks only by
   what the card needs: ~4.5em wide, so (viewport − slab paddings − 380px card − gap) / 4.5;
   280px at 1920, 138px at 1280 (checked in the browser). */
@media (min-width:1200px){
  body.tt-v2 .site-footer .tt-v2-tapline{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
  body.tt-v2 .site-footer .tt-v2-tapline:has(.tt-ai) .tt-v2-tap{ font-size:clamp(40px,calc((100vw - 660px) / 4.5),300px); }
  body.tt-v2 .site-footer .tt-ai--footer{ flex:0 0 auto; width:380px; margin:0 0 8px; }
}
/* "Nové" next to a footer link that is worth a look (Roman, 2026-10-09). */
body.tt-v2 .site-footer a:has(> .tt-v2-new){ white-space:nowrap; }
body.tt-v2 .site-footer .tt-v2-new{ display:inline-block; margin-left:6px; padding:2px 9px; border-radius:999px;
  background:var(--lime); color:var(--forest); font-size:12px; font-weight:700; line-height:1.4; vertical-align:1px; }
@media (hover:hover){
  body.tt-v2 .site-footer ul a:hover,
  body.tt-v2 .site-footer .tt-v2-link:hover,
  body.tt-v2 .site-footer .tt-v2-fz:hover{ color:var(--lime); }
  body.tt-v2 .tt-v2-top:hover{ background:var(--lime); color:var(--forest); }
}
@media (max-width:820px){
  body.tt-v2 .site-footer .cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  body.tt-v2 .site-footer .cols{ grid-template-columns:1fr; gap:32px; }
}

/* ---------- place card (template-parts/clinic-card.php) ----------
   The handoff's PlaceCard: a row — 96px logo tile, the facts, the two buttons
   on the right. One card serves the catalog (one wide column) and "Podobné"
   (three narrow ones), so the layout follows the CARD's width through a
   container query, not the screen's.

   The background is on ::before (z -1) so the hover photo (.tt-v2-peek, z -2)
   can sit behind the card and jump out over its top edge; the card isolates
   its own stacking context so neither escapes behind the page. */
body.tt-v2 .tt-card{ container-type:inline-size; isolation:isolate; overflow:visible;
  background:transparent; border:0; border-radius:var(--tt-r); padding:18px; gap:18px 22px;
  flex-direction:row; flex-wrap:wrap; align-items:center; transition:translate .3s var(--tt-ease); }
body.tt-v2 .tt-card::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--surface); border:1.5px solid rgba(24,39,31,.07);
  transition:border-color .3s, box-shadow .3s; }
body.tt-v2 .tt-card.is-partner::before{ border-color:rgba(47,158,112,.35); }
body.tt-v2 .tt-card-hit{ border-radius:var(--tt-r); }
body.tt-v2 .tt-card .tt-v2-peek{ position:absolute; right:56px; top:14px; width:84px; height:84px; z-index:-2;
  border-radius:50%; object-fit:cover; border:4px solid var(--surface); rotate:6deg;
  transition:translate .55s var(--tt-spring), rotate .55s; pointer-events:none; }
body.tt-v2 .tt-thumb{ --thumb-h:96px; width:96px; height:96px; border-radius:var(--tt-r); align-self:flex-start; }
body.tt-v2 .tt-thumb img{ padding:8px; transition:scale .5s; }
body.tt-v2 .tt-thumb .tt-ini{ font-family:var(--disp); font-weight:500; font-size:30px; letter-spacing:-.04em; color:var(--green); }
/* The facts are one column, the buttons a second one beside them; row-gap 0
   and margins, because the buttons span rows that may be empty. */
/* flex-basis 300px: on a narrow card the facts wrap under the logo instead of
   squeezing beside it — the handoff's flex-wrap, and no query needed for it
   (a container cannot restyle its own flex direction). */
body.tt-v2 .tt-body{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:0; column-gap:22px; min-width:0; flex:1 1 300px; align-items:center; }
body.tt-v2 .tt-body > * + *{ margin-top:8px; }
body.tt-v2 .tt-chead{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 12px; }
body.tt-v2 .tt-name{ font-family:var(--disp); font-weight:500; font-size:22px; letter-spacing:-.03em; line-height:1.1; transition:color .2s; }
body.tt-v2 .tt-card .tt-rating{ gap:4px; font-size:15px; font-weight:700; }
body.tt-v2 .tt-card .tt-stars svg{ width:15px; height:15px; fill:var(--pop); }
body.tt-v2 .tt-card .tt-stars svg:not(:first-child){ display:none; }
body.tt-v2 .tt-card .tt-rating b{ font-weight:700; }
body.tt-v2 .tt-card .tt-rating .tt-rc{ color:#7a877f; font-weight:500; }
body.tt-v2 .tt-addr{ font-size:15px; font-weight:400; color:var(--ink-2); }
body.tt-v2 .tt-addr svg{ color:currentColor; }
/* Status: coloured text with a pulsing dot, no pill. */
body.tt-v2 .tt-card .tt-status{ background:none; padding:0; font-size:15px; font-weight:600; gap:8px; }
body.tt-v2 .tt-card .tt-status.is-open{ color:var(--green-ink); }
body.tt-v2 .tt-card .tt-status.is-closed{ color:#7a877f; }
body.tt-v2 .tt-card .tt-status .dot{ position:relative; }
body.tt-v2 .tt-card .tt-status.is-open .dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:currentColor;
  animation:tt-v2-pulse 1.8s ease-out infinite; }
body.tt-v2 .tt-price .v{ font-family:var(--sans); font-size:15px; font-weight:700; }
body.tt-v2 .tt-price .u{ font-size:15px; font-weight:400; color:var(--muted); }
body.tt-v2 .tt-badges{ gap:6px; }
body.tt-v2 .tt-badge{ font-size:13px; font-weight:700; padding:5px 11px; background:#e3f1ea; color:var(--green-ink); }
body.tt-v2 .tt-badge.sos{ background:#fbe3da; color:#b5431f; }
body.tt-v2 .tt-badge.home{ background:#eef4c4; color:#3d4a10; }
body.tt-v2 .tt-chips{ gap:6px; }
body.tt-v2 .tt-chip{ font-size:13px; font-weight:500; padding:5px 11px; background:transparent; color:#3a4a40; border:1px solid rgba(24,39,31,.14); }
body.tt-v2 .tt-chip.is-more{ background:var(--bg); border-color:transparent; font-weight:600; border-style:solid; }
body.tt-v2 .tt-actions{ margin-top:14px; padding-top:0; gap:8px; flex-wrap:wrap; }
body.tt-v2 .tt-btn{ padding:13px 20px; font-size:15px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .2s, color .2s; }
body.tt-v2 .tt-btn.call{ background:var(--green); color:var(--surface); }
body.tt-v2 .tt-btn.ghost{ border:1.5px solid var(--ink); color:var(--ink); }
body.tt-v2 .tt-btn.book{ background:var(--lime); color:var(--ink); }
body.tt-v2 .tt-btn.ghost::after{ content:""; width:16px; height:16px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Wide card: buttons move to their own column on the right. */
@container (min-width:620px){
  body.tt-v2 .tt-body{ grid-template-columns:minmax(0,1fr) auto; }
  body.tt-v2 .tt-body > *{ grid-column:1; }
  body.tt-v2 .tt-body > .tt-actions{ grid-column:2; grid-row:1 / span 8; margin-top:0; align-self:center; flex-wrap:nowrap; }
}
/* Narrow card: smaller tile, buttons share the full width. */
@container (max-width:420px){
  body.tt-v2 .tt-thumb{ --thumb-h:64px; width:64px; height:64px; border-radius:var(--tt-r); }
  body.tt-v2 .tt-thumb .tt-ini{ font-size:22px; }
  body.tt-v2 .tt-name{ font-size:19px; }
  body.tt-v2 .tt-actions{ flex-wrap:wrap; }
  body.tt-v2 .tt-btn.call,
  body.tt-v2 .tt-btn.book{ flex:1 1 auto; }
  body.tt-v2 .tt-btn{ padding:13px 16px; }
}
@media (hover:hover){
  body.tt-v2 .tt-card:hover{ transform:none; box-shadow:none; translate:0 -3px; }
  body.tt-v2 .tt-card:hover::before{ border-color:var(--green); box-shadow:0 30px 50px -34px rgba(21,52,39,.55); }
  body.tt-v2 .tt-card.is-sos:hover::before{ border-color:var(--pop); }
  body.tt-v2 .tt-card:hover .tt-v2-peek{ translate:0 -58px; rotate:-10deg; }
  body.tt-v2 .tt-card:hover .tt-thumb img{ scale:1.08; }
  body.tt-v2 .tt-card:hover .tt-name{ color:var(--green-ink); }
  body.tt-v2 .tt-btn.call:hover{ background:var(--green-ink); color:var(--surface); transform:none; }
  body.tt-v2 .tt-btn.ghost:hover{ background:var(--ink); color:var(--bg); transform:none; }
  body.tt-v2 .tt-btn.book:hover{ background:#bccc4a; color:var(--ink); }
}
@media (hover:none){ body.tt-v2 .tt-card .tt-v2-peek{ display:none; } }

/* ---------- one radius for buttons and controls, on the old markup too ----------
   Buttons and form controls that no v2 file restyles still carry their old
   radii from site.css, tippytaps.css, landing.css, booking.css and account.css
   (999px pills, 10–14px fields). `body.tt-v2.tt-site` + one class is (0,3,1):
   heavier than the old `.tt-site .tt-book .tt-book__chip` (0,3,0), so this wins
   by weight, not by load order (LiteSpeed reorders CSS for guests). Labels and
   tags (.tt-badge, .chip-svc, .srcbadge, .tt-book__pill …) are left as pills. */
body.tt-v2.tt-site :is(.tt-btn, .btn, .acc-btn, .acc-g, .acc-inp, .tt-achip, .tt-book__chip, .tt-book__slot,
  .tt-book__ghost, .tt-book__go, .tt-book__inp, .tt-select, .tt-geo-btn, .tt-check, .topic, .chip-more, .rev-toggle,
  .tt-cc-btn){
  border-radius:var(--tt-r-btn); }
body.tt-v2.tt-site .quicknav a,
body.tt-v2.tt-site .field :is(input, select, textarea){ border-radius:var(--tt-r-btn); }
/* The orange "Pohotovosť" slab on the old landing/content pages (32px). */
body.tt-v2.tt-site .emg{ border-radius:var(--tt-r); }

/* Astra's round "back to top" sat on the footer's corner; v2 has its own
   "Návrat hore" in the footer bar. */
html body.tt-v2 #ast-scroll-top{ display:none !important; }

/* ---------- motion off ---------- */
@media (prefers-reduced-motion:reduce){
  /* Reveal and the loops are switched off in tt.js itself (Web Animations). */
  body.tt-v2 .nav .sos .d::after,
  body.tt-v2 .tt-card .tt-status .dot::after{ animation:none; }
}

/* A species as a small round photo (tt_v2_species_thumb) — the catalog filter and
   the vet chips; replaces the drawn 15px icon. */
body.tt-v2 .tt-spi-img{ display:block; border-radius:50%; object-fit:cover; flex:none; }
body.tt-v2 .tt-spi:has(.tt-spi-img){ margin-right:2px; }

/* QA 2026-10-22 ─────────────────────────────────────────────────────────────
   Three buttons (a venue that takes bookings) in the right-hand column squeezed the
   name onto two lines on medium cards — there they go under the text, as on narrow ones. */
@container (min-width:620px) and (max-width:860px){
  body.tt-v2 .tt-body:has(.tt-btn.book){ grid-template-columns:minmax(0,1fr); }
  body.tt-v2 .tt-body:has(.tt-btn.book) > .tt-actions{ grid-column:1; grid-row:auto; margin-top:14px; flex-wrap:wrap; }
}
/* "Návrat hore" sat on the edge of "Požiadať o termín" on venue pages — lifted clear of it
   (and of the mobile booking bar). */
body.tt-v2:has(.tt-book__go) .tt-v2-top{ bottom:clamp(88px,10vh,112px); }

/* QA 2026-10-23: on desktop the floating "Návrat hore" sat over the booking card's hint text —
   hidden where the card is (the card is sticky, so there is nothing to scroll back to). */
@media (min-width:901px){ body.tt-v2:has(.tt-book) .tt-v2-top{ display:none; } }