/* ==========================================================================
   The Clean Spot 2026 — base, layout and components
   Depends on tokens.css. No ID- or page-keyed rules. The only !important
   declarations are in the prefers-reduced-motion block at the end.
   ========================================================================== */

/* --- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--tc-font);
  font-size: var(--tc-fs-base);
  line-height: var(--tc-lh-body);
  color: var(--tc-ink);
  background: var(--tc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--tc-3); line-height: var(--tc-lh-tight); font-weight: 800; letter-spacing: var(--tc-tracking-tight); }
h1 { font-size: var(--tc-fs-3xl); letter-spacing: var(--tc-tracking-display); }
h2 { font-size: var(--tc-fs-2xl); }
h3 { font-size: var(--tc-fs-xl); }
h4 { font-size: var(--tc-fs-lg); }
p  { margin: 0 0 var(--tc-4); }
a  { color: var(--tc-navy-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tc-teal-dark); }
ul, ol { margin: 0 0 var(--tc-4); padding-left: var(--tc-5); }
:where(button, [type=submit]) { font-family: inherit; }

/* visible focus everywhere — the old site had none */
:focus-visible { outline: 2px solid var(--tc-teal); outline-offset: 2px; border-radius: 3px; }

/* .screen-reader-text is aliased because WooCommerce and WordPress core emit
   it from their own templates, whatever the theme prefers to write. */
.tc-sr,
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tc-skip {
  position: absolute; top: -100px; left: var(--tc-4); z-index: 200;
  background: var(--tc-navy-700); color: #fff; padding: var(--tc-3) var(--tc-5);
  border-radius: 0 0 var(--tc-r-sm) var(--tc-r-sm); font-weight: 700; text-decoration: none;
}
.tc-skip:focus { top: 0; color: #fff; }

/* --- layout ------------------------------------------------------------ */
.tc-wrap { max-width: var(--tc-container); margin-inline: auto; padding-inline: var(--tc-gutter); }
.tc-wrap--narrow { max-width: 760px; }
.tc-section { padding-block: var(--tc-16); }
.tc-section--tint { background: var(--tc-navy-50); }
.tc-section--navy { background: var(--tc-navy-700); color: #fff; }
.tc-section__head { max-width: 620px; margin: 0 auto var(--tc-10); text-align: center; }
.tc-section__head p { color: var(--tc-muted); font-size: var(--tc-fs-md); margin: 0; }
.tc-section--navy .tc-section__head p { color: var(--tc-navy-200); }
.tc-kicker {
  font-size: var(--tc-fs-sm); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tc-teal-dark); margin-bottom: var(--tc-3);
}
.tc-grid { display: grid; gap: var(--tc-5); }
.tc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tc-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .tc-grid--3, .tc-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tc-grid--2, .tc-grid--3, .tc-grid--4 { grid-template-columns: 1fr; } }

/* --- buttons ----------------------------------------------------------- */
.tc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tc-2);
  border: 0; border-radius: var(--tc-r); font-weight: 700; font-size: 0.9375rem;
  padding: 0.8125rem 1.375rem; cursor: pointer; text-decoration: none;
  transition: background-color .15s, color .15s, box-shadow .15s;
  line-height: 1.2; text-align: center;
}
.tc-btn--primary { background: var(--tc-teal-btn); color: #fff; }
.tc-btn--primary:hover { background: var(--tc-teal-btn-h); color: #fff; }
.tc-btn--navy { background: var(--tc-navy-700); color: #fff; }
.tc-btn--navy:hover { background: var(--tc-navy-800); color: #fff; }
.tc-btn--ghost { background: transparent; color: var(--tc-navy-700); box-shadow: inset 0 0 0 1.5px var(--tc-navy-200); }
.tc-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--tc-navy-400); color: var(--tc-navy-700); }
.tc-btn--sm { padding: 0.5625rem 1rem; font-size: 0.875rem; border-radius: var(--tc-r-sm); }
.tc-btn--lg { padding: 1rem 1.875rem; font-size: 1.03rem; }
.tc-btn--block { width: 100%; }

/* The HTML `hidden` attribute is only a UA rule (display:none) and any class
   with its own display wins. Two components had already hit this — the address
   verdict box and the header cart both rendered while hidden. Make it explicit
   once, with !important, so the next component cannot repeat it. */
[hidden] { display: none !important; }

/* --- header ------------------------------------------------------------ */
.tc-header { background: var(--tc-white); border-bottom: 1px solid var(--tc-line); position: sticky; top: 0; z-index: 90; }
.tc-header__in { display: flex; align-items: center; gap: var(--tc-8); min-height: var(--tc-header-h); }
.tc-logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; flex-shrink: 0; }
.tc-logo b { font-size: 1.1875rem; font-weight: 800; color: var(--tc-navy-700); letter-spacing: -.03em; }
.tc-logo span { font-size: .5625rem; letter-spacing: .16em; color: var(--tc-muted); text-transform: uppercase; margin-top: 3px; font-weight: 600; }
.tc-logo img { max-height: 46px; width: auto; }
/* Footer sits on --tc-navy-900; the navy wordmark is invisible on it. */
.tc-logo--light b { color: #fff; }


.tc-nav { flex: 1; }
.tc-nav ul { display: flex; gap: var(--tc-6); list-style: none; margin: 0; padding: 0; }
.tc-nav a {
  font-size: 0.9063rem; font-weight: 600; color: var(--tc-navy-700); text-decoration: none;
  padding: var(--tc-2) 0; border-bottom: 2px solid transparent; display: block;
}
.tc-nav a:hover { border-color: var(--tc-wave); }
.tc-nav .current-menu-item > a,
.tc-nav .current_page_item > a { border-color: var(--tc-teal); }
.tc-header__actions { display: flex; align-items: center; gap: var(--tc-3); }

/* points pill — persistent loyalty balance, logged-in only */
.tc-points {
  display: inline-flex; align-items: center; gap: var(--tc-2);
  background: var(--tc-navy-50); border: 1px solid var(--tc-navy-100);
  border-radius: var(--tc-r-pill); padding: 0.4375rem 0.875rem;
  font-size: var(--tc-fs-sm); font-weight: 700; color: var(--tc-navy-700); text-decoration: none;
}
.tc-points:hover { border-color: var(--tc-amber); color: var(--tc-navy-700); }
.tc-points__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tc-amber); flex-shrink: 0; }
.tc-points__n { font-variant-numeric: tabular-nums; }

/* Same pill as the points badge so the header keeps one shape in both states —
   a logged-out visitor sees an account icon where a logged-in one sees points. */
.tc-account { padding: 0.375rem 0.5rem; }
.tc-account .tc-icon { width: 20px; height: 20px; }
.tc-account:hover { border-color: var(--tc-teal); }

/* burger + mobile drawer */
.tc-burger {
  display: none; background: none; border: 0; padding: var(--tc-2);
  cursor: pointer; color: var(--tc-navy-700);
}
.tc-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(88vw, 340px);
  background: #fff; z-index: 120; padding: var(--tc-6);
  transform: translateX(100%); transition: transform .22s ease;
  overflow-y: auto; box-shadow: var(--tc-shadow-lg);
}
.tc-drawer[data-open="true"] { transform: translateX(0); }
.tc-drawer ul { list-style: none; margin: var(--tc-6) 0 0; padding: 0; }
.tc-drawer li { border-bottom: 1px solid var(--tc-line); }
/* :not(.tc-btn) matters — without it this repaints the drawer's primary CTA
   navy-on-teal, which is why that button looked different from its desktop
   twin. */
.tc-drawer a:not(.tc-btn) { display: block; padding: var(--tc-4) 0; font-weight: 700; color: var(--tc-navy-700); text-decoration: none; }
.tc-backdrop {
  position: fixed; inset: 0; background: rgba(11,21,40,.42); z-index: 110;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.tc-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

@media (max-width: 960px) {
  .tc-nav { display: none; }
  .tc-burger { display: inline-flex; order: 99; }
  .tc-header__in { gap: var(--tc-3); }
  /* .tc-nav carried flex:1 and is hidden here, so without this the actions
     bunch up against the logo instead of sitting at the right edge. */
  .tc-header__actions { margin-left: auto; }
  .tc-header__actions .tc-btn--sm:not(.tc-cart) { display: none; }
  .tc-points { padding: 0.375rem 0.625rem; }
}

/* --- hero -------------------------------------------------------------- */
.tc-hero {
  background: linear-gradient(165deg, var(--tc-navy-700) 0%, var(--tc-navy-800) 62%, var(--tc-navy-900) 100%);
  color: #fff; position: relative; overflow: hidden; padding-top: var(--tc-16);
}
/* the logo's wave, carried into the page */
.tc-hero__wave, .tc-hero__wave--back { position: absolute; left: 0; right: 0; bottom: -1px; height: 96px; pointer-events: none; }
.tc-hero__wave--back { bottom: 22px; background: var(--tc-wave); opacity: .30;
  clip-path: polygon(0 58%,16% 44%,34% 34%,54% 33%,74% 42%,90% 55%,100% 62%,100% 100%,0 100%); }
.tc-hero__wave { background: var(--tc-bg);
  clip-path: polygon(0 62%,14% 50%,32% 40%,52% 38%,72% 46%,88% 58%,100% 64%,100% 100%,0 100%); }
.tc-hero__in {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--tc-12);
  align-items: start; position: relative; z-index: 2; padding-bottom: 6.5rem;
}
.tc-hero h1 { margin-bottom: var(--tc-5); }
.tc-hero h1 em { font-style: normal; color: var(--tc-wave); }
.tc-hero__sub { color: var(--tc-navy-200); font-size: 1.0938rem; max-width: 27rem; margin-bottom: var(--tc-6); }
.tc-eyebrow {
  display: inline-flex; align-items: center; gap: var(--tc-2);
  background: rgba(203,219,232,.14); border: 1px solid rgba(203,219,232,.26);
  color: var(--tc-wave); font-size: var(--tc-fs-sm); font-weight: 700;
  padding: 0.4375rem 0.875rem; border-radius: var(--tc-r-pill); margin-bottom: var(--tc-5);
}
.tc-stats { display: flex; gap: var(--tc-6); flex-wrap: wrap; margin-top: var(--tc-8); }
.tc-stats div { font-size: var(--tc-fs-sm); color: var(--tc-navy-200); }
.tc-stats b { display: block; color: #fff; font-size: 1.3125rem; font-weight: 800; letter-spacing: var(--tc-tracking-tight); }
@media (max-width: 940px) { .tc-hero__in { grid-template-columns: 1fr; gap: var(--tc-8); } }

/* --- booking entry card (the hero's only interactive element) ---------- */
.tc-book {
  background: var(--tc-white); border-radius: var(--tc-r-xl); padding: var(--tc-6);
  box-shadow: 0 24px 60px rgba(0,0,0,.28); color: var(--tc-ink);
}
.tc-book h2 { font-size: var(--tc-fs-lg); margin-bottom: var(--tc-1); }
.tc-book__lede { font-size: var(--tc-fs-sm); color: var(--tc-muted); margin-bottom: var(--tc-5); }
.tc-book__micro { text-align: center; font-size: var(--tc-fs-xs); color: var(--tc-muted); margin: var(--tc-3) 0 0; }

/* --- forms ------------------------------------------------------------- */
.tc-field { margin-bottom: var(--tc-3); }
.tc-field label, .tc-label {
  display: block; font-size: var(--tc-fs-xs); font-weight: 700; color: var(--tc-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--tc-2);
}
.tc-input, .tc-select, .tc-textarea,
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=search], textarea, select {
  width: 100%; border: 1.5px solid var(--tc-line); border-radius: var(--tc-r);
  padding: 0.8125rem 0.875rem; font-family: inherit; font-size: 0.9375rem;
  color: var(--tc-ink); background: var(--tc-white); transition: border-color .15s;
}
.tc-input:focus, textarea:focus, select:focus,
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus {
  outline: 0; border-color: var(--tc-teal);
}
.tc-hint { display: flex; align-items: center; gap: var(--tc-2); font-size: var(--tc-fs-xs); font-weight: 700; margin-top: var(--tc-2); }
.tc-hint--ok { color: var(--tc-teal-dark); }
.tc-hint--err { color: var(--tc-error); }

/* --- cards ------------------------------------------------------------- */
.tc-card {
  background: var(--tc-white); border: 1px solid var(--tc-line);
  border-radius: var(--tc-r-lg); padding: var(--tc-6); position: relative;
  transition: box-shadow .18s, border-color .18s;
}
.tc-card:hover { box-shadow: var(--tc-shadow); border-color: var(--tc-navy-200); }
.tc-card h3 { font-size: var(--tc-fs-md); margin-bottom: var(--tc-2); }
.tc-card p { font-size: 0.875rem; color: var(--tc-muted); margin-bottom: var(--tc-4); }
.tc-card__icon {
  width: 44px; height: 44px; border-radius: var(--tc-r); background: var(--tc-navy-50);
  display: grid; place-items: center; margin-bottom: var(--tc-4); font-size: 1.3125rem;
}
.tc-card__tag {
  position: absolute; top: var(--tc-4); right: var(--tc-4);
  background: var(--tc-amber); color: #3D2B00; font-size: 0.6875rem; font-weight: 800;
  padding: 4px 9px; border-radius: 6px; letter-spacing: .03em;
}
.tc-from { display: flex; align-items: baseline; gap: var(--tc-2); padding-top: var(--tc-4); border-top: 1px solid var(--tc-line); }
.tc-from__label { font-size: var(--tc-fs-xs); color: var(--tc-muted); font-weight: 600; }
.tc-from__eur { font-size: var(--tc-fs-lg); font-weight: 800; color: var(--tc-navy-700); letter-spacing: var(--tc-tracking-tight); }
.tc-from__bgn { font-size: var(--tc-fs-xs); color: var(--tc-muted); font-weight: 600; }

/* --- numbered steps --------------------------------------------------- */
.tc-step { background: var(--tc-white); border: 1px solid var(--tc-line); border-radius: var(--tc-r-lg); padding: var(--tc-6) var(--tc-5); }
.tc-step h3 { font-size: var(--tc-fs-base); margin-bottom: var(--tc-2); }
.tc-step h3 { font-variant-numeric: tabular-nums; }
.tc-step p { font-size: 0.875rem; color: var(--tc-muted); margin: 0; }

/* The address field can grow a verdict panel beneath it, so the next field
   needs its own breathing room rather than relying on the panel's margin. */
.tc-field--spaced { margin-top: var(--tc-5); }

/* --- mini-cart panel ---------------------------------------------------- */
.tc-minicart {
  position: fixed; inset: 0 0 0 auto; width: min(92vw, 400px); z-index: 130;
  background: var(--tc-white); box-shadow: var(--tc-shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.tc-minicart__backdrop { position: fixed; inset: 0; z-index: 125; background: rgb(11 21 40 / 0.42); border: 0; }

.tc-minicart__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tc-3);
  padding: var(--tc-5); border-bottom: 1px solid var(--tc-line);
}
.tc-minicart__title { margin: 0; font-size: var(--tc-fs-md); }
.tc-minicart__close {
  background: none; border: 0; font-size: 1.75rem; line-height: 1; cursor: pointer;
  color: var(--tc-muted); padding: 0 var(--tc-2); min-height: 44px; min-width: 44px;
}
.tc-minicart__body { flex: 1 1 auto; overflow-y: auto; padding: var(--tc-5); }
.tc-minicart__list { list-style: none; margin: 0; padding: 0; }
.tc-minicart__row {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--tc-2) var(--tc-3);
  align-items: center; padding: var(--tc-3) 0; border-bottom: 1px solid var(--tc-line);
}
/* A grid item with auto width stretches to its column by default, which made
   the stepper span the whole 1fr track — buttons pushed to the edges with a
   gap on the right that looked like stray padding. */
.tc-minicart__row .tc-stepper { justify-self: start; }
.tc-minicart__row .tc-stepper__qty--static { width: 2.25rem; height: 2rem; }
.tc-minicart__line { justify-self: end; }
.tc-minicart__name { grid-column: 1 / -1; font-weight: 700; font-size: var(--tc-fs-sm); }
.tc-minicart__line { font-weight: 800; white-space: nowrap; }
.tc-minicart__remove {
  background: none; border: 0; cursor: pointer; color: var(--tc-muted);
  font-size: 1.375rem; line-height: 1; min-height: 44px; min-width: 44px;
}
.tc-minicart__remove:hover { color: var(--tc-error); }
.tc-stepper__qty--static {
  display: inline-grid; place-items: center; min-width: 2.25rem;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.tc-minicart__foot { border-top: 1px solid var(--tc-line); padding: var(--tc-5); }
.tc-minicart__sum { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--tc-4); font-size: var(--tc-fs-md); }
.tc-minicart[aria-busy="true"] { opacity: .6; pointer-events: none; }
body.has-minicart { overflow: hidden; }

/* --- cart / booking handover prompt ------------------------------------- */
.tc-cartprompt {
  border: 1px solid var(--tc-amber-line); background: var(--tc-amber-tint); border-radius: var(--tc-r);
  padding: var(--tc-4) var(--tc-5); margin-bottom: var(--tc-5);
}
.tc-cartprompt__lead { font-weight: 800; margin: 0 0 var(--tc-1); }
.tc-cartprompt__acts { display: flex; gap: var(--tc-2); flex-wrap: wrap; margin-top: var(--tc-4); }
.tc-cartprompt--done { border-color: var(--tc-teal); background: var(--tc-teal-tint); }

/* --- booking item picker: category groups ------------------------------ */
.tc-picker__group + .tc-picker__group { margin-top: var(--tc-5); }
.tc-picker__grouphead {
  position: sticky; top: 0; z-index: 2;
  margin: 0 0 var(--tc-2); padding: var(--tc-2) 0;
  background: var(--tc-white);
  font-size: var(--tc-fs-sm); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tc-muted);
  border-bottom: 1px solid var(--tc-line);
}

/* --- icons and service imagery ----------------------------------------- */
/* Merged from the asset bundle's integration.css rather than loaded after it:
   a second stylesheet is an extra request and invites specificity fights with
   the rules above. The icons ship with stroke="currentColor" and no inline
   colour, so colour is set here by context. */
.tc-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }

.tc-card--service { overflow: hidden; padding: 0; }
.tc-card--service .tc-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--tc-navy-50); }
.tc-card--service .tc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.tc-card--service:hover .tc-card__media img { transform: scale(1.035); }
.tc-card--service .tc-card__body { padding: var(--tc-5); }
.tc-card--service .tc-card__head { display: flex; align-items: center; gap: var(--tc-3); margin-bottom: var(--tc-2); }
.tc-card__head { display: flex; align-items: center; gap: var(--tc-3); margin-bottom: var(--tc-2); }
.tc-card__media { display: block; }

/* Price and CTA sit on one line, pinned to the bottom so cards of differing
   copy length still line their buttons up. */
.tc-card--service { display: flex; flex-direction: column; }
.tc-card--service .tc-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.tc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--tc-3); flex-wrap: wrap; margin-top: auto; padding-top: var(--tc-4); }
.tc-card--service .tc-card__head .tc-icon { color: var(--tc-teal); }

/* Step and ordering-method badges. */
.tc-step__icon, .tc-way__icon {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--tc-r); background: var(--tc-navy-50);
  color: var(--tc-navy-700); margin-bottom: var(--tc-4);
}
.tc-step__icon .tc-icon, .tc-way__icon .tc-icon { width: 23px; height: 23px; }

/* The two shop photos are 1200x750 and 450x400. Rather than re-cut the files,
   one ratio with object-fit keeps them consistent and the originals intact. */
.tc-loc__photo { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--tc-r); background: var(--tc-navy-50); margin-bottom: var(--tc-4); }
.tc-loc__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Anchored jumps must clear the header. */
[data-tcs-group] { scroll-margin-top: calc(var(--tc-header-h, 64px) + var(--tc-4)); }

.tc-loc__icon { display: inline-flex; vertical-align: text-bottom; color: var(--tc-teal); margin-right: .35rem; }
.tc-loc__icon .tc-icon { width: 18px; height: 18px; }

/* Amber is reserved for loyalty; nothing else should use it. */
.tc-loyalty__icon { color: var(--tc-amber); display: inline-flex; vertical-align: text-bottom; margin-right: .35rem; }
.tc-loyalty__icon .tc-icon { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .tc-card--service .tc-card__media img { transition: none; }
  .tc-card--service:hover .tc-card__media img { transform: none; }
}

/* --- ordering methods (how it works) ----------------------------------- */
.tc-section--alt { background: var(--tc-wave-soft); }

.tc-ways { margin-top: var(--tc-8); }
.tc-ways__head { font-size: var(--tc-fs-md); margin-bottom: var(--tc-5); }

.tc-ways__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--tc-4);
  grid-template-columns: repeat(4, 1fr);
}
/* Four methods: auto-fit wrapped them 3 + 1 on tablets, leaving one card
   alone on the last row. Fixed counts keep the rows even: 4, then 2 × 2,
   then a single column. */
@media (max-width: 1024px) { .tc-ways__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tc-ways__list { grid-template-columns: 1fr; } }

.tc-way {
  background: var(--tc-white); border: 1px solid var(--tc-line);
  border-radius: var(--tc-r-lg); padding: var(--tc-5);
  display: flex; flex-direction: column; gap: var(--tc-3);
}
.tc-way strong { font-size: var(--tc-fs-base); }
.tc-way p { font-size: 0.875rem; color: var(--tc-muted); margin: 0; flex: 1 1 auto; }
.tc-way .tc-btn { align-self: flex-start; }

/* Two store buttons stack on narrow cards rather than overflowing. */
.tc-way__stores { display: block; max-width: 240px; }
.tc-way__stores img { width: 100%; height: auto; display: block; }
.tc-way__stores:focus-visible { outline: 2px solid var(--tc-teal-btn); outline-offset: 3px; border-radius: var(--tc-r-sm); }

/* --- loyalty ----------------------------------------------------------- */
.tc-loyalty {
  background: linear-gradient(150deg, var(--tc-navy-700), var(--tc-navy-900));
  color: #fff; border-radius: var(--tc-r-xl); padding: var(--tc-8); position: relative; overflow: hidden;
}
.tc-loyalty::after {
  content: ""; position: absolute; right: -70px; bottom: -70px; width: 210px; height: 210px;
  border-radius: 50%; background: rgba(203,219,232,.07);
}
.tc-loyalty__label { font-size: var(--tc-fs-sm); color: var(--tc-wave); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tc-loyalty__bal { font-size: 3.25rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: var(--tc-2) 0 var(--tc-1); }
.tc-loyalty__bal small { font-size: 1.375rem; font-weight: 700; }
/* The signed-out pitch is a heading, not a balance. It used to sit inside
   .tc-loyalty__bal as <small>, inheriting the 52px number's line-height of 1
   (a 52px strut between wrapped lines) and its -.04em tracking resolved
   against 52px, which crushed the smaller letters together. */
.tc-loyalty__pitch { font-size: 1.5rem; font-weight: 800; line-height: var(--tc-lh-tight); letter-spacing: var(--tc-tracking-tight); color: #fff; margin: var(--tc-3) 0 var(--tc-2); }
.tc-loyalty__eq { color: var(--tc-wave); font-size: 0.9375rem; margin-bottom: var(--tc-6); }
.tc-barcode { background: #fff; border-radius: var(--tc-r-sm); padding: var(--tc-3); text-align: center; margin-top: var(--tc-5); }
.tc-barcode img { margin-inline: auto; }
.tc-barcode__num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; color: #555; margin-top: 5px; letter-spacing: .1em; }

/* points earned note, used in cart/checkout/confirmation */
.tc-earn {
  background: var(--tc-amber-tint); border-radius: var(--tc-r-sm); padding: 0.625rem 0.75rem;
  font-size: var(--tc-fs-sm); color: var(--tc-amber-dark); font-weight: 700;
}

/* --- price table ------------------------------------------------------- */
/* Three turnaround columns rather than a price column and a separate "срок"
   column. The catalogue prices every garment at 3 дни / 1 ден / 4 часа, so the
   grid is the natural shape of the data — and each cell is purchasable, which
   a "3 дни · 1 ден · 4 часа" text column never could be. */
.tc-prices { background: var(--tc-white); border: 1px solid var(--tc-line); border-radius: var(--tc-r-lg); overflow: hidden; }
.tc-prices table { width: 100%; border-collapse: collapse; }
.tc-prices thead th {
  text-align: left; font-size: 0.7188rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tc-muted); padding: var(--tc-4) var(--tc-5); background: var(--tc-navy-50);
  border-bottom: 1px solid var(--tc-line); font-weight: 800;
}
.tc-prices thead .tc-prices__turn { text-align: center; width: 1%; white-space: nowrap; }
.tc-prices tbody th {
  text-align: left; font-weight: 700; color: var(--tc-ink); font-size: 0.9375rem;
  padding: var(--tc-3) var(--tc-5); border-bottom: 1px solid var(--tc-line); vertical-align: middle;
}
.tc-prices tbody th small { display: block; font-weight: 600; font-size: var(--tc-fs-xs); }
.tc-prices td { padding: var(--tc-2) var(--tc-3); border-bottom: 1px solid var(--tc-line); font-size: 0.9375rem; }
.tc-prices tbody tr:last-child td,
.tc-prices tbody tr:last-child th { border-bottom: 0; }
.tc-prices tbody tr:hover th,
.tc-prices tbody tr:hover td { background: var(--tc-navy-50); }
.tc-prices__cell { text-align: center; vertical-align: middle; }
.tc-prices__cell--span { text-align: left; padding-left: var(--tc-5); }

/* --- a price that is also a button ------------------------------------- */
.tc-buy { margin: 0; }
.tc-buy__btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  position: relative; width: 100%; min-width: 5.5rem;
  padding: 0.5rem 1.75rem 0.5rem 0.625rem;
  background: transparent; border: 1.5px solid transparent; border-radius: var(--tc-r-sm);
  font: inherit; color: inherit; cursor: pointer; text-align: center;
  transition: background-color .12s ease, border-color .12s ease;
}
.tc-buy__btn:hover:not(:disabled) { background: var(--tc-teal-tint); border-color: var(--tc-teal); }
.tc-buy__btn:focus-visible { outline: 3px solid var(--tc-teal); outline-offset: 2px; }
.tc-buy__btn:disabled { cursor: progress; opacity: .6; }
.tc-buy__price { font-weight: 800; color: var(--tc-navy-700); white-space: nowrap; }
.tc-buy__pts { color: var(--tc-amber-dark); font-weight: 700; font-size: var(--tc-fs-xs); }

/* The "+" affordance: always present so the cell reads as actionable, but
   quiet until the row is hovered or the control is focused. */
.tc-buy__add {
  position: absolute; right: 0.375rem; top: 50%; transform: translateY(-50%);
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: grid; place-items: center; line-height: 1;
  background: var(--tc-navy-50); color: var(--tc-navy-500);
  font-weight: 800; font-size: 0.875rem;
  transition: background-color .12s ease, color .12s ease, transform .12s ease;
}
.tc-prices tr:hover .tc-buy__add,
.tc-buy__btn:focus-visible .tc-buy__add { background: var(--tc-teal); color: #fff; }
.tc-buy__btn.is-added { background: var(--tc-teal-tint); border-color: var(--tc-teal); }
.tc-buy__btn.is-added .tc-buy__add { background: var(--tc-teal); color: #fff; transform: translateY(-50%) scale(1.15); }

.tc-price__bgn { color: var(--tc-muted); font-size: .78em; font-weight: 600; white-space: nowrap; }
.tc-buy__btn .tc-price__bgn { display: block; }

.tc-price-intro { max-width: 52ch; margin-bottom: var(--tc-6); }
.tc-price-tools { margin-bottom: var(--tc-5); max-width: 26rem; }
.tc-price-tools__none { margin-top: var(--tc-3); color: var(--tc-muted); font-size: var(--tc-fs-sm); }
.tc-price-foot {
  margin-top: var(--tc-12); padding: var(--tc-8); text-align: center;
  background: var(--tc-navy-50); border-radius: var(--tc-r-lg);
}
.tc-price-foot h2 { font-size: var(--tc-fs-lg); }
.tc-price-foot p { max-width: 48ch; margin-inline: auto; color: var(--tc-muted); }

/* Category navigation on the price list.
   Desktop: a rail that sticks beside the tables. Mobile: the same list inside
   a sheet opened from a floating button, because a 5-category rail eats a
   third of a phone screen. */
.tc-catnav__toggle { display: none; }

@media (min-width: 1040px) {
  .tc-ceni { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--tc-8); align-items: start; }
  .tc-catnav { position: sticky; top: calc(var(--tc-header-h, 64px) + var(--tc-4)); max-height: calc(100vh - var(--tc-header-h, 64px) - var(--tc-8)); overflow-y: auto; }
  .tc-chips { flex-direction: column; align-items: stretch; gap: var(--tc-1, .25rem); margin-bottom: 0; }
  .tc-chip { justify-content: space-between; display: flex; }
}

@media (max-width: 1039.98px) {
  .tc-catnav {
    position: fixed; inset: auto 0 0 0; z-index: 60;
    background: var(--tc-white); border-top: 1px solid var(--tc-line);
    border-radius: var(--tc-r-lg) var(--tc-r-lg) 0 0;
    padding: var(--tc-5); box-shadow: 0 -8px 30px rgb(0 0 0 / 0.16);
    transform: translateY(100%); transition: transform .22s ease;
    max-height: 70vh; overflow-y: auto;
  }
  .tc-catnav[data-open="true"] { transform: translateY(0); }
  .tc-catnav__toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    position: fixed; z-index: 61; right: var(--tc-4);
    /* Clears .tc-mobilebar; --tc-mobilebar-h already includes the safe area. */
    bottom: calc(var(--tc-mobilebar-h) + var(--tc-3));
    border: 0; border-radius: 999px; padding: .7rem 1rem;
    background: var(--tc-navy-700); color: #fff; font: inherit; font-weight: 600;
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.24); cursor: pointer;
  }
  .tc-catnav__toggle .tc-icon { width: 20px; height: 20px; }
  .tc-catnav__backdrop { position: fixed; inset: 0; z-index: 59; background: rgb(0 0 0 / 0.4); border: 0; }
  /* The cart bar is fixed to the bottom too; sit above it when it is visible. */
  body.has-cartbar .tc-catnav__toggle { bottom: calc(var(--tc-mobilebar-h) + var(--tc-cartbar-h) + var(--tc-3)); }
  body.has-cartbar .tc-catnav { bottom: calc(var(--tc-mobilebar-h) + var(--tc-cartbar-h)); }
  /* Search first in the sheet — it beats scrolling a category list. */
  .tc-catnav .tc-price-tools { margin-bottom: var(--tc-4); }
  .tc-catnav__backdrop[hidden] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-catnav { transition: none; }
}

.tc-chips { display: flex; gap: var(--tc-2); flex-wrap: wrap; margin-bottom: var(--tc-5); }
.tc-chip {
  background: var(--tc-white); border: 1.5px solid var(--tc-line); border-radius: var(--tc-r-pill);
  padding: var(--tc-2) var(--tc-4); font-size: var(--tc-fs-sm); font-weight: 700;
  color: var(--tc-navy-700); cursor: pointer; text-decoration: none;
}
.tc-chip[aria-pressed="true"], .tc-chip.is-active { background: var(--tc-navy-700); border-color: var(--tc-navy-700); color: #fff; }

/* --- basket bar -------------------------------------------------------- */
/* Sits above the mobile action bar, which is why the bottom offset differs
   by breakpoint: two stacked fixed bars would otherwise overlap. */
.tc-cartbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--tc-navy-800); color: #fff;
  box-shadow: 0 -8px 24px rgba(11,21,40,.18);
}
.tc-cartbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--tc-4); padding: var(--tc-3) var(--tc-gutter); }
.tc-cartbar__info { display: flex; align-items: center; gap: var(--tc-3); font-size: var(--tc-fs-sm); }
.tc-cartbar__info b {
  display: grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .4rem;
  border-radius: var(--tc-r-pill); background: var(--tc-teal); font-size: var(--tc-fs-base); font-weight: 800;
}
.tc-cartbar__info small { display: block; color: var(--tc-navy-200); }
.tc-cartbar__info small .woocommerce-Price-amount { color: #fff; font-weight: 700; }
.tc-cartbar__toast:empty { display: none; }
.tc-cartbar__toast {
  margin: 0; padding: var(--tc-2) var(--tc-gutter); font-size: var(--tc-fs-sm); font-weight: 700;
  background: var(--tc-navy-900);
}
.tc-cartbar__toast.is-ok { color: #6EE7DC; }
.tc-cartbar__toast.is-error { color: #FFB4AE; }

/* Sits directly on top of the mobile action bar. --tc-mobilebar-h is 0
   above 960px, where the bar is hidden. */
.tc-cartbar { bottom: var(--tc-mobilebar-h); }

/* A fixed bar hides whatever is underneath it, so the page needs room to
   scroll past. Set from PHP on load and by ceni.js after the first add. */
body.has-cartbar { padding-bottom: calc(var(--tc-mobilebar-h) + var(--tc-cartbar-h)); }

@media (max-width: 640px) {
  /* One card per item: the header row cannot carry three columns at this
     width, so each price is labelled inline instead. */
  .tc-prices thead { display: none; }
  /* The item name spans the row, then every turnaround sits side by side on a
     single line with its label above its button. Stacking them cost four
     screens of scrolling for one category. */
  /* auto-fit with a min width let the columns collapse to their content and
     huddle on the left. Equal explicit fractions make the three options share
     the row edge to edge. */
  .tc-prices tbody tr {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--tc-2); padding: var(--tc-4); border-bottom: 1px solid var(--tc-line);
  }
  .tc-prices { width: 100%; }
  .tc-prices table { width: 100%; table-layout: fixed; }
  .tc-prices tbody th {
    grid-column: 1 / -1; display: block; border: 0;
    padding: 0 0 var(--tc-2); font-size: var(--tc-fs-base);
  }
  .tc-prices tbody tr:hover th, .tc-prices tbody tr:hover td { background: transparent; }

  .tc-prices tbody td {
    display: flex; flex-direction: column; gap: 4px; align-items: stretch;
    width: auto; border: 0; padding: 0; text-align: center;
  }

  /* Label above, button below. */
  .tc-prices__cell::before {
    content: attr(data-label); display: block; font-size: var(--tc-fs-xs);
    text-transform: uppercase; letter-spacing: .04em; color: var(--tc-muted);
    font-weight: 800; white-space: nowrap;
  }

  /* Rows that carry a single price rather than a turnaround grid. */
  .tc-prices__cell--span { grid-column: 1 / -1; padding-left: 0; text-align: left; }
  .tc-prices__cell--span::before { content: none; }

  /* 44px keeps the tap target usable even three-across. */
  .tc-buy__btn {
    min-width: 0; width: 100%; min-height: 44px; align-items: center;
    padding: .5rem .375rem; border: 1.5px solid var(--tc-line);
  }
  .tc-buy__add { background: var(--tc-teal-btn); color: #fff; }
}

/* --- footer ------------------------------------------------------------ */
/* NOTE: unlike the old site, the footer is visible on every breakpoint.
   The previous theme hid it entirely below 1366px, which removed all
   legal links on mobile. */
.tc-footer { background: var(--tc-navy-900); color: var(--tc-navy-200); padding: var(--tc-16) 0 var(--tc-6); }
.tc-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--tc-8); margin-bottom: var(--tc-10); }
.tc-footer h2 { color: #fff; font-size: var(--tc-fs-sm); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--tc-4); font-weight: 800; }
.tc-footer ul { list-style: none; margin: 0; padding: 0; }
.tc-footer a { color: var(--tc-navy-200); text-decoration: none; font-size: 0.875rem; display: block; margin-bottom: var(--tc-2); }
.tc-footer a:hover { color: #fff; }
.tc-footer__consent {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-size: 0.875rem; color: var(--tc-navy-200); text-align: left;
}
.tc-footer__consent:hover { color: #fff; }
.tc-footer__consent:focus-visible { outline: 2px solid var(--tc-teal); outline-offset: 2px; }
.tc-footer p { font-size: 0.875rem; }
.tc-footer__phone { color: #fff; font-weight: 700; font-size: var(--tc-fs-base); }
.tc-loc { background: var(--tc-navy-800); border-radius: var(--tc-r); padding: var(--tc-3) var(--tc-4); margin-bottom: var(--tc-3); }
.tc-loc b { color: #fff; display: block; font-size: 0.875rem; }
.tc-loc span { font-size: 0.8125rem; }
.tc-footer__bottom {
  border-top: 1px solid var(--tc-navy-800); padding-top: var(--tc-5);
  display: flex; justify-content: space-between; gap: var(--tc-3); flex-wrap: wrap; font-size: var(--tc-fs-xs);
}
@media (max-width: 900px) { .tc-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tc-footer__grid { grid-template-columns: 1fr; } }

/* --- sticky mobile action bar ------------------------------------------ */
.tc-mobilebar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
  background: var(--tc-white); border-top: 1px solid var(--tc-line);
  display: none; padding: 0.4375rem 0 max(0.4375rem, env(safe-area-inset-bottom));
}
.tc-mobilebar a {
  flex: 1; text-align: center; font-size: 0.6563rem; font-weight: 700;
  color: var(--tc-muted); text-decoration: none; padding: var(--tc-1) 0;
}
.tc-mobilebar a[aria-current="page"] { color: var(--tc-teal-dark); }
.tc-mobilebar .i { display: block; width: 22px; height: 22px; margin: 0 auto 3px; }
/* Height of the fixed bottom bars, for everything that has to clear them.
   The mobile bar was assumed to be 62px, but it renders at about 71px and
   grows by the home-indicator inset on iPhones and iPads, so the bottom of
   the footer sat underneath it. theme.js sets the measured height; the
   fallback here already includes the safe area. */
:root { --tc-mobilebar-h: 0px; --tc-cartbar-h: 84px; }
@media (max-width: 960px) {
  :root { --tc-mobilebar-h: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .tc-mobilebar { display: flex; }
  body { padding-bottom: var(--tc-mobilebar-h); }
}

/* --- content / prose -------------------------------------------------- */
.tc-prose { max-width: 720px; }
/* Legacy page bodies that sit below a full-width layout look broken when
   capped at reading width — they read as a bug, not a choice. */
.tc-prose--full { max-width: none; }
.tc-prose--full > * + * { margin-top: var(--tc-4); }
.tc-prose > * + * { margin-top: var(--tc-4); }
.tc-prose h2 { margin-top: var(--tc-10); }
.tc-prose h3 { margin-top: var(--tc-8); }
.tc-prose img { border-radius: var(--tc-r-lg); }
.tc-prose blockquote {
  margin: var(--tc-6) 0; padding: var(--tc-4) var(--tc-5);
  background: var(--tc-navy-50); border-radius: var(--tc-r);
}
.tc-prose .tc-lead { font-size: var(--tc-fs-md); color: var(--tc-muted); }
.tc-prose ul, .tc-prose ol { padding-left: 1.25rem; display: grid; gap: var(--tc-2); }
.tc-prose li::marker { color: var(--tc-teal-dark); font-weight: 800; }

/* Tables written in page content. Wide ones scroll inside their own box
   rather than pushing the page sideways. */
.tc-table-wrap { overflow-x: auto; border: 1px solid var(--tc-line); border-radius: var(--tc-r-lg); background: var(--tc-white); }
.tc-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tc-table th, .tc-table td { text-align: left; vertical-align: top; padding: var(--tc-3) var(--tc-4); border-bottom: 1px solid var(--tc-line); }
.tc-table thead th { font-size: var(--tc-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tc-muted); background: var(--tc-navy-50); }
.tc-table tbody th { color: var(--tc-navy-700); font-weight: 800; white-space: nowrap; }
.tc-table tbody tr:last-child > * { border-bottom: 0; }
/* Subscription packages: one tbody per item type, headed by a group row. */
.tc-subs .tc-subs__group th { background: var(--tc-navy-50); color: var(--tc-navy-700); font-size: var(--tc-fs-sm); text-transform: uppercase; letter-spacing: .06em; }
.tc-subs td, .tc-subs tbody th { vertical-align: middle; }
.tc-subs__grouphead { display: flex; align-items: center; gap: var(--tc-3); }
.tc-subs__img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--tc-r-sm); background: var(--tc-white); flex: none; }
.tc-subs s { color: var(--tc-muted); }
.tc-subs__off { display: inline-block; font-weight: 800; font-size: var(--tc-fs-sm); color: var(--tc-teal-dark); background: var(--tc-teal-tint); border-radius: var(--tc-r-pill); padding: 2px 8px; }
.tc-subs__price { color: var(--tc-navy-700); font-size: var(--tc-fs-md); white-space: nowrap; }
.tc-subs__buy { text-align: right; }
@media (max-width: 640px) {
  .tc-subs .tc-subs__group { border: 0; background: none; padding: var(--tc-4) 0 0; }
  .tc-subs .tc-subs__group th { background: none; padding: 0 var(--tc-1); }
  /* Two columns per card: validity beside discount, regular price beside
     the subscription price. Stacked one per line, 12 packages ran to
     fourteen screens. */
  .tc-subs tbody tr:not(.tc-subs__group) { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--tc-3); }
  .tc-subs tbody tr:not(.tc-subs__group) > th,
  .tc-subs .tc-subs__buy { grid-column: 1 / -1; }
  .tc-subs__buy { text-align: left; padding-top: var(--tc-2) !important; }
  .tc-subs__buy .tc-btn { width: 100%; justify-content: center; }
}
/* --stack: on phones each row becomes a card, every cell labelled from its
   data-label, because four columns cannot fit side by side. */
@media (max-width: 640px) {
  .tc-table-wrap:has(.tc-table--stack) { border: 0; background: none; overflow: visible; }
  .tc-table--stack thead { display: none; }
  .tc-table--stack, .tc-table--stack tbody, .tc-table--stack tr, .tc-table--stack th, .tc-table--stack td { display: block; }
  .tc-table--stack tbody { display: grid; gap: var(--tc-3); }
  .tc-table--stack tr { border: 1px solid var(--tc-line); border-radius: var(--tc-r-lg); background: var(--tc-white); padding: var(--tc-2) 0; }
  .tc-table--stack tbody th { font-size: var(--tc-fs-md); border-bottom: 0; padding-bottom: 0; }
  .tc-table--stack td { border-bottom: 0; padding-block: var(--tc-2); }
  .tc-table--stack td::before { content: attr(data-label); display: block; font-size: var(--tc-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tc-muted); margin-bottom: 2px; }
}
.tc-page-head { background: var(--tc-white); border-bottom: 1px solid var(--tc-line); padding-block: var(--tc-12); }
.tc-breadcrumb { font-size: var(--tc-fs-sm); color: var(--tc-muted); margin-bottom: var(--tc-3); }
.tc-breadcrumb a { color: var(--tc-muted); text-decoration: none; }
.tc-breadcrumb a:hover { color: var(--tc-navy-700); }

/* --- utilities --------------------------------------------------------- */
.tc-center { text-align: center; }
.tc-mt-6 { margin-top: var(--tc-6); }
.tc-mb-0 { margin-bottom: 0; }
.tc-muted { color: var(--tc-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --- booking flow ------------------------------------------------------ */
.tc-booking .tc-step-panel { border: 0; padding: 0; margin: 0 0 var(--tc-8); }
.tc-booking.is-wizard .tc-step-panel { margin-bottom: 0; }
.tc-booking legend {
  font-size: var(--tc-fs-lg); font-weight: 800; letter-spacing: var(--tc-tracking-tight);
  padding: 0; margin-bottom: var(--tc-5);
}
/* booking.js moves focus here on each step change; it is not a control. */
.tc-booking legend:focus { outline: none; }
.tc-steps {
  display: flex; gap: var(--tc-2); list-style: none; margin: 0 0 var(--tc-6); padding: 0; counter-reset: s;
}
.tc-steps li {
  flex: 1; font-size: var(--tc-fs-xs); font-weight: 700; color: var(--tc-muted);
  padding-top: var(--tc-3); border-top: 3px solid var(--tc-line); text-align: center;
}
.tc-steps li[data-state="current"] { color: var(--tc-navy-700); border-top-color: var(--tc-teal); }
.tc-steps li[data-state="done"] { color: var(--tc-teal-dark); border-top-color: var(--tc-teal); }

.tc-opt {
  display: flex; gap: var(--tc-3); align-items: flex-start;
  border: 1.5px solid var(--tc-line); border-radius: var(--tc-r);
  padding: var(--tc-4); margin-bottom: var(--tc-2); cursor: pointer; transition: border-color .15s, background-color .15s;
}
.tc-opt:hover { border-color: var(--tc-navy-200); }
.tc-opt:has(input:checked) { border-color: var(--tc-teal); background: var(--tc-teal-tint); }
.tc-opt input { margin-top: 3px; accent-color: var(--tc-teal); width: 18px; height: 18px; flex-shrink: 0; }
.tc-opt strong { display: block; font-size: 0.9375rem; }
.tc-opt small { display: block; color: var(--tc-muted); font-size: var(--tc-fs-xs); margin-top: 2px; }

.tc-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tc-2); margin-bottom: var(--tc-4); }
@media (max-width: 560px) { .tc-slots { grid-template-columns: repeat(2, 1fr); } }
.tc-slot { position: relative; }
.tc-slot input { position: absolute; opacity: 0; pointer-events: none; }
.tc-slot span {
  display: block; text-align: center; border: 1.5px solid var(--tc-line);
  border-radius: var(--tc-r-sm); padding: var(--tc-3) var(--tc-2);
  font-size: var(--tc-fs-sm); font-weight: 700; cursor: pointer; transition: .15s;
}
.tc-slot input:checked + span { border-color: var(--tc-teal); background: var(--tc-teal-tint); color: var(--tc-teal-dark); }
.tc-slot input:focus-visible + span { outline: 2px solid var(--tc-teal); outline-offset: 2px; }

.tc-sum { background: var(--tc-navy-50); border-radius: var(--tc-r); padding: var(--tc-4); margin: var(--tc-5) 0; }
.tc-sum__line { display: flex; justify-content: space-between; font-size: 1.0625rem; margin-bottom: var(--tc-2); }
.tc-nav-btns { display: flex; gap: var(--tc-3); margin-top: var(--tc-6); }
.tc-nav-btns .tc-btn { flex: 1; }

/* The header has no room for the word "Количка" once a count is beside it.
   The [hidden] guard is required: a class-level display beats the user-agent's
   [hidden]{display:none}, so without it the empty cart shows anyway. */
.tc-cart[hidden] { display: none; }
.tc-cart { display: inline-flex; align-items: center; gap: .4rem; padding-inline: var(--tc-3); }
.tc-cart .tc-icon { width: 20px; height: 20px; }
.tc-cart__count {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem;
  padding: 0 .3rem; border-radius: 999px; background: var(--tc-teal-btn);
  color: #fff; font-size: .75rem; font-weight: 700; line-height: 1;
}

/* --- my account -------------------------------------------------------- */
.tc-account { display: grid; gap: var(--tc-6); }
.tc-account__card { max-width: 420px; }
.tc-loyalty__head { display: flex; justify-content: space-between; align-items: flex-start; }
.tc-loyalty__hint { font-size: var(--tc-fs-xs); color: var(--tc-navy-200); text-align: center; margin: var(--tc-2) 0 0; }
.tc-barcode img { width: 100%; height: auto; max-width: 402px; margin-inline: auto; image-rendering: pixelated; }

.tc-account__order-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tc-4); }
.tc-account__order-head h3 { margin: 0; }
.tc-pill {
  background: var(--tc-teal-tint); color: var(--tc-teal-dark);
  font-size: var(--tc-fs-xs); font-weight: 800;
  padding: 0.375rem 0.75rem; border-radius: var(--tc-r-pill); white-space: nowrap;
}

/* order progress */
.tc-track { display: flex; list-style: none; margin: var(--tc-5) 0; padding: 0; gap: 0; }
.tc-track li { flex: 1; padding-top: var(--tc-3); border-top: 4px solid var(--tc-navy-100); }
.tc-track li[data-done="true"] { border-top-color: var(--tc-teal); }
.tc-track li span { font-size: var(--tc-fs-xs); font-weight: 700; color: var(--tc-muted); }
.tc-track li[data-done="true"] span { color: var(--tc-teal-dark); }

.tc-reorder {
  border: 1.5px solid var(--tc-line); border-radius: var(--tc-r);
  padding: var(--tc-4); display: flex; flex-direction: column; gap: var(--tc-2);
}
.tc-reorder span { font-size: var(--tc-fs-xs); font-weight: 600; }
.tc-reorder strong { font-size: 0.875rem; line-height: 1.4; flex: 1; }

/* --- serviceability verdict -------------------------------------------- */
/* display:flex on a class beats the UA's [hidden]{display:none}, so the empty
   verdict box rendered as a grey slab before anyone typed anything. */
.tc-area[hidden] { display: none; }
.tc-area {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: var(--tc-3); padding: var(--tc-3) var(--tc-4);
  border-radius: var(--tc-r); border: 1px solid var(--tc-navy-line);
  background: var(--tc-navy-50); font-size: var(--tc-fs-sm);
}
.tc-area strong { font-size: var(--tc-fs-base); }
.tc-area span { color: var(--tc-muted); }
.tc-area--ok    { background: var(--tc-teal-tint);  border-color: var(--tc-teal-line); }
.tc-area--ok strong    { color: var(--tc-teal-dark); }
.tc-area--maybe { background: var(--tc-amber-tint); border-color: var(--tc-amber-line); }
.tc-area--maybe strong { color: var(--tc-amber-dark); }
.tc-area--no    { background: var(--tc-error-tint); border-color: var(--tc-error-line); }
.tc-area--no strong    { color: var(--tc-error); }

/* Google's suggestion dropdown is appended to <body>, so it needs to clear
   the sticky header and the basket bar. */
.pac-container {
  z-index: 100; border-radius: var(--tc-r-sm); border: 1px solid var(--tc-line);
  box-shadow: var(--tc-shadow-lg); font-family: var(--tc-font); margin-top: 4px;
}
.pac-item { padding: .5rem .75rem; font-size: var(--tc-fs-sm); cursor: pointer; border-top: 0; }
.pac-item:hover, .pac-item-selected { background: var(--tc-navy-50); }
.pac-item-query { font-size: var(--tc-fs-base); color: var(--tc-ink); }

/* --- step 3: two journeys ---------------------------------------------- */
.tc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tc-3); margin-bottom: var(--tc-6); }
.tc-mode { position: relative; display: block; cursor: pointer; }
.tc-mode input { position: absolute; opacity: 0; width: 0; height: 0; }
.tc-mode span {
  display: block; padding: var(--tc-4); border: 2px solid var(--tc-line);
  border-radius: var(--tc-r); background: var(--tc-white); height: 100%;
}
.tc-mode strong { display: block; font-size: var(--tc-fs-md); }
.tc-mode small { display: block; color: var(--tc-muted); font-size: var(--tc-fs-sm); margin-top: 2px; }
.tc-mode input:checked + span { border-color: var(--tc-teal); background: var(--tc-teal-tint); }
.tc-mode input:focus-visible + span { outline: 3px solid var(--tc-teal); outline-offset: 2px; }
@media (max-width: 560px) { .tc-modes { grid-template-columns: 1fr; } }

/* --- item picker -------------------------------------------------------- */
.tc-picker__turn { margin-bottom: var(--tc-5); }
.tc-picker__list {
  list-style: none; margin: var(--tc-4) 0 0; padding: 0;
  max-height: 26rem; overflow-y: auto;
  border: 1px solid var(--tc-line); border-radius: var(--tc-r);
  background: var(--tc-white);
}
/* On touch screens each category list scrolling inside a page that also
   scrolls made the two fight over the same swipe: the list swallowed it
   until it hit its end, then the page lurched. The lists flow with the page
   there instead; search covers the long ones. */
@media (max-width: 1024px), (pointer: coarse) {
  .tc-picker__list { max-height: none; overflow: visible; }
}
.tc-picker__row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--tc-3);
  padding: var(--tc-2) var(--tc-4); border-bottom: 1px solid var(--tc-line);
}
.tc-picker__row:last-child { border-bottom: 0; }
.tc-picker__name { font-weight: 600; font-size: 0.9375rem; }
.tc-picker__name small { display: block; color: var(--tc-muted); font-weight: 500; font-size: var(--tc-fs-xs); }
.tc-picker__price { font-weight: 800; color: var(--tc-navy-700); white-space: nowrap; font-size: 0.9375rem; }
.tc-picker__none { margin-top: var(--tc-3); color: var(--tc-muted); font-size: var(--tc-fs-sm); }
.tc-picker__sum { margin-top: var(--tc-5); padding: var(--tc-4); background: var(--tc-navy-50); border-radius: var(--tc-r); }
.tc-picker.has-items .tc-picker__sum { background: var(--tc-teal-tint); }
.tc-picker__sum b { font-size: var(--tc-fs-lg); color: var(--tc-navy-700); }

.tc-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--tc-line); border-radius: var(--tc-r-pill); overflow: hidden; }
.tc-stepper__btn {
  width: 2rem; height: 2rem; border: 0; background: var(--tc-white); cursor: pointer;
  font-size: 1.125rem; font-weight: 700; color: var(--tc-navy-700); line-height: 1;
}
.tc-stepper__btn:hover { background: var(--tc-navy-50); }
.tc-stepper__btn:focus-visible { outline: 2px solid var(--tc-teal); outline-offset: -2px; }
.tc-stepper__qty {
  width: 2.25rem; height: 2rem; border: 0; text-align: center; font: inherit; font-weight: 700;
  -moz-appearance: textfield; appearance: textfield; background: var(--tc-white); color: var(--tc-ink);
}
.tc-stepper__qty::-webkit-outer-spin-button,
.tc-stepper__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tc-stepper__qty:focus-visible { outline: 2px solid var(--tc-teal); outline-offset: -2px; }

@media (max-width: 480px) {
  .tc-picker__row { grid-template-columns: 1fr auto; row-gap: var(--tc-1); }
  .tc-picker__price { grid-column: 1; font-size: var(--tc-fs-sm); }
  .tc-stepper { grid-row: 1 / span 2; grid-column: 2; }
}

/* --- contact ------------------------------------------------------------ */
.tc-contact-lead { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tc-4); }
.tc-contact-card {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  padding: var(--tc-5); background: var(--tc-white); border: 1px solid var(--tc-line);
  border-radius: var(--tc-r-lg); box-shadow: var(--tc-shadow);
}
.tc-contact-card:hover { border-color: var(--tc-teal); }
.tc-contact-card__k {
  font-size: var(--tc-fs-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--tc-muted); font-weight: 800;
}
.tc-contact-card b { font-size: var(--tc-fs-lg); color: var(--tc-navy-700); }
.tc-contact-card .tc-muted { font-size: var(--tc-fs-sm); }
@media (max-width: 720px) { .tc-contact-lead { grid-template-columns: 1fr; } }

.tc-shop__addr { font-weight: 600; }
.tc-shop__hours { margin: var(--tc-4) 0; }
.tc-shop__hours div { display: flex; justify-content: space-between; gap: var(--tc-4); padding: 3px 0; font-size: 0.9375rem; }
.tc-shop__hours dt { color: var(--tc-muted); margin: 0; }
.tc-shop__hours dd { margin: 0; font-weight: 700; }
.tc-shop__links { display: flex; gap: var(--tc-2); flex-wrap: wrap; }

/* Honeypot: off-screen rather than display:none, because some bots skip
   fields that are display:none but happily fill a positioned one. */
.tc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tc-mt-12 { margin-top: var(--tc-12); }

/* WooCommerce notices, rendered outside the shop templates. */
.tc-notices:empty { display: none; }
.tc-notices { margin-bottom: var(--tc-6); }
.tc-notices .woocommerce-message,
.tc-notices .woocommerce-error,
.tc-notices .woocommerce-info {
  margin: 0 0 var(--tc-3); padding: var(--tc-3) var(--tc-4);
  border-radius: var(--tc-r); border: 1px solid var(--tc-teal-line);
  background: var(--tc-teal-tint); font-weight: 600; list-style: none;
}
.tc-notices .woocommerce-error { border-color: var(--tc-error-line); background: var(--tc-error-tint); }
.tc-notices .woocommerce-info  { border-color: var(--tc-navy-line); background: var(--tc-navy-50); }

/* Header cart link. Appears only once the cart has contents. */
.tc-cart { display: inline-flex; align-items: center; gap: var(--tc-2); }
.tc-cart__count {
  display: grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .35rem;
  border-radius: var(--tc-r-pill); background: var(--tc-teal); color: #fff;
  font-size: var(--tc-fs-xs); font-weight: 800; line-height: 1;
}