/* ==========================================================================
   TENNIS-SERVIS s.r.o., Karel Bednář
   Design system. Plain CSS, no build step, ready to lift into a WP theme.

   Section map
   01 Tokens
   02 Reset & base
   03 Typography
   04 Layout primitives
   05 Buttons & links
   06 Brand devices (skew tab, string bed, arc)
   07 Header & navigation
   08 Hero
   09 Cards & services
   10 Feature bands
   11 Steps & specs
   12 Products & shop
   13 Cart drawer
   14 Accordion & tension tool
   15 Forms
   16 Footer
   17 Motion
   18 WooCommerce bridge
   19 Responsive
   20 Reduced motion & print
   ========================================================================== */

/* 01 Tokens ============================================================== */

:root {
  /* Brand. Red and black sampled directly from the supplied logo file. */
  --red: #e2071a;
  --red-ink: #b80514;
  --red-wash: rgba(226, 7, 26, 0.08);
  --red-line: rgba(226, 7, 26, 0.28);

  --black: #0a0a0a;
  --ink: #141414;
  --graphite: #222222;

  --gray-700: #4a4a4a;
  --gray-600: #6b6b6b;
  --gray-500: #8c8c8c;
  --gray-300: #d6d6d6;
  --gray-200: #e6e6e6;
  --light: #f5f5f5;
  --paper: #fafafa;
  --white: #ffffff;

  /* Surfaces */
  --bg: var(--white);
  --bg-alt: var(--light);
  --bg-dark: var(--black);
  --line: #e6e6e6;
  --line-dark: rgba(255, 255, 255, 0.13);

  /* Type */
  --font-display: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-md: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  --t-lg: clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
  --h4: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --h3: clamp(1.5rem, 1.6vw + 1.1rem, 2rem);
  --h2: clamp(2rem, 3.4vw + 1.1rem, 3.5rem);
  --h1: clamp(2.5rem, 6vw + 0.6rem, 5.75rem);

  /* Space */
  --gutter: clamp(20px, 5vw, 64px);
  --wrap: 1280px;
  --wrap-narrow: 860px;
  --section-y: clamp(72px, 9vw, 132px);

  /* Shape */
  --r-sm: 2px;
  --r: 3px;
  --skew: -12deg; /* echoes the italic slant of the wordmark */

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 0.9, 0.28, 1);
  --dur: 0.62s;

  --header-h: 84px;
}

/* 02 Reset & base ======================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* `clip`, not `hidden`. On body, overflow-x:hidden computes overflow-y:auto
     and makes body the scroll container, which strands window.scrollY at 0
     and breaks sticky and scroll-triggered reveals. `clip` never does that.
     The `hidden` line ahead of it is the fallback for older browsers. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img,
picture,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

::selection {
  background: var(--red);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--black);
  color: var(--white);
  padding: 12px 20px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.skip-link:focus { left: 8px; top: 8px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* 03 Typography ========================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  color: var(--black);
  text-wrap: balance;
}

h1 { font-size: var(--h1); line-height: 0.95; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); font-weight: 700; }

/* Sub-head that carries h4 sizing at h3 level, so the document outline stays
   in order (h1 > h2 > h3) without the type scale jumping. */
.head-sm { font-size: var(--h4); font-weight: 700; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--gray-700);
  font-weight: 400;
}

.muted { color: var(--gray-600); }
.small { font-size: var(--t-sm); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--red);
  transform: skewX(var(--skew));
}

.section-head { max-width: 720px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* Dark context */
.on-dark { background: var(--bg-dark); color: rgba(255, 255, 255, 0.76); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark .lead { color: rgba(255, 255, 255, 0.72); }
.on-dark .muted { color: rgba(255, 255, 255, 0.55); }
.on-dark hr { border-color: var(--line-dark); }

/* 04 Layout primitives =================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

/* Sections clip their own decoration. The skewed string bed is wider than
   its box by design, and without this it pushes the page's scroll width out. */
.section { padding-block: var(--section-y); position: relative; overflow: hidden; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }
.section--alt { background: var(--bg-alt); }
.section--paper { background: var(--paper); }

.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split--media-first .split__media { order: -1; }

.stack > * + * { margin-top: 1.1em; }

/* 05 Buttons & links ===================================================== */

.btn {
  --btn-bg: var(--red);
  --btn-fg: var(--white);
  --btn-bd: var(--red);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 30px;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-sm);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
/* Diagonal wipe. The panel is deliberately taller than the button so the
   skew can never tilt a corner back inside the clipped box at rest. */
.btn::after {
  content: "";
  position: absolute;
  inset: -30% -1px;
  z-index: -1;
  background: var(--black);
  transform: translateY(130%) skewY(3deg);
  transition: transform 0.42s var(--ease);
}
.btn:hover::after,
.btn:focus-visible::after { transform: translateY(0) skewY(0); }
.btn:hover { color: var(--white); border-color: var(--black); }
.btn:active { transform: translateY(1px); }

.btn__arrow {
  width: 16px;
  height: 10px;
  flex: none;
  transition: transform 0.36s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--black);
  --btn-bd: var(--gray-300);
}
.btn--ghost:hover { border-color: var(--black); }

.btn--onDark {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.34);
}
.btn--onDark::after { background: var(--white); }
.btn--onDark:hover { color: var(--black); border-color: var(--white); }

.btn--sm { padding: 12px 20px; font-size: 0.82rem; }
.btn--block { width: 100%; }

/* Quiet arrow link */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  padding-bottom: 4px;
  background-image: linear-gradient(var(--red), var(--red));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s var(--ease), color 0.3s var(--ease);
}
.arrow-link:hover { background-size: 100% 2px; color: var(--red); }
.arrow-link svg { width: 16px; height: 10px; transition: transform 0.36s var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }
.on-dark .arrow-link { color: var(--white); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* 05b Media box contract =================================================
   One rule for every component that shows a photo in a fixed shape.

   The container owns the shape (an aspect-ratio, or an absolute fill) and
   the image covers it. The <picture> wrapper has to be told to fill too:
   left alone it is shrink-to-fit with `height: auto`, so `height: 100%` on
   the image inside resolves against the wrapper, collapses to `auto`, and
   the image silently falls back to its own aspect ratio. object-fit then
   has nothing to crop. That is what left short images and grey gaps in any
   card whose source photo was not already the shape of its slot.

   Add `media-fill` to any new media container and it inherits the contract.
   ======================================================================== */

/* Positioning and overflow stay with each component: .card__media and friends
   are already `relative`, while the two heroes are `absolute`. Setting
   `position` here as well would only work by source order, so it is left out
   on purpose. This block does one job: make the wrapper pass its height down. */

.media-fill > picture,
.card__media > picture,
.band__media > picture,
.product-card__media > picture,
.hero__media > picture,
.page-hero__media > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.media-fill > picture > img,
.card__media > picture > img,
.band__media > picture > img,
.product-card__media > picture > img,
.hero__media > picture > img,
.page-hero__media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 06 Brand devices ======================================================= */

/* Skewed tab. Repeats the italic slant of the wordmark. */
.tab {
  display: inline-block;
  padding: 7px 14px 6px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: skewX(var(--skew));
}
.tab > span { display: block; transform: skewX(calc(-1 * var(--skew))); }
.tab--dark { background: var(--black); }
.tab--outline {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--gray-300);
}

/* String bed. The signature texture, drawn not photographed.
   Pure CSS so currentColor always resolves against the host element. */
.bed {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  background-image:
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 15px),
    repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 15px);
}
.bed--tight {
  background-image:
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 9px),
    repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 9px);
}
.bed--wide {
  background-image:
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 26px);
}
/* Angled bed, echoing the slant of the wordmark. */
.bed--skew { transform: skewX(var(--skew)) scale(1.3); }

.bed-divider {
  display: block;
  width: 100%;
  height: 44px;
  color: var(--gray-300);
  overflow: visible;
}
.bed-divider line { stroke: currentColor; stroke-width: 1; }
.js .bed-divider line {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 1s var(--ease);
}
.bed-divider.is-in line { stroke-dashoffset: 0; }

/* Red arc. The ball trail from the mark, as a page accent. */
.arc {
  position: absolute;
  pointer-events: none;
  color: var(--red);
}
.arc path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.js .arc path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.5s var(--ease);
}
.arc.is-in path { stroke-dashoffset: 0; }

/* Numbered marker */
.marker {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--red);
}

/* 07 Header & navigation ================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.35s var(--ease), transform 0.4s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 24px rgba(10, 10, 10, 0.07); }

.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  min-height: var(--header-h);
  padding-block: 12px;
}

.brand {
  display: block;
  flex: none;
  line-height: 0;
  margin-right: auto;
}
.brand img {
  width: clamp(178px, 17vw, 232px);
  height: auto;
}

/* Logo on dark ground sits on a white plate, so the supplied file is never altered. */
.brand--plate img {
  background: var(--white);
  padding: 12px 16px;
  border-radius: var(--r);
}

.nav { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 20px); }

.nav__link {
  position: relative;
  padding: 10px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.28s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__link:hover { color: var(--red); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--red); }

.header__tools { display: flex; align-items: center; gap: 8px; flex: none; }

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--r-sm);
  color: var(--black);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.icon-btn:hover { border-color: var(--black); color: var(--red); }
.icon-btn svg { width: 21px; height: 21px; }

.cart-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: var(--white);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1;
  transform: scale(0);
  transition: transform 0.36s var(--ease);
}
.cart-count.is-on { transform: scale(1); }

.nav-toggle { display: none; }

/* Mobile panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--black);
  color: var(--white);
  padding: 24px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.55s var(--ease), visibility 0s linear 0.55s;
  overflow-y: auto;
}
.mobile-nav.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.55s var(--ease), visibility 0s;
}
.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  margin-bottom: 24px;
}
.mobile-nav__top .icon-btn {
  background: transparent;
  border-color: var(--line-dark);
  color: var(--white);
}
.mobile-nav__top .icon-btn:hover { border-color: var(--white); }

.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-dark);
}
.mobile-nav__list li { border-bottom: 1px solid var(--line-dark); }
.mobile-nav__list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  padding-top: 20px;
}
.mobile-nav.is-open .mobile-nav__list a {
  animation: mnav 0.5s var(--ease) forwards;
  animation-delay: calc(var(--i) * 55ms + 120ms);
}
@keyframes mnav { to { opacity: 1; transform: none; } }
.mobile-nav__list a[aria-current="page"] { color: var(--red); }
.mobile-nav__list .marker { font-size: 0.8rem; }

.mobile-nav__foot { margin-top: auto; padding-top: 32px; }

/* 08 Hero ================================================================ */

.hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.js .hero__media img {
  transform: scale(1.07);
  transition: transform 1.6s var(--ease-soft);
}
.hero.is-ready .hero__media img { transform: scale(1); }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(104deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.72) 34%,
                    rgba(10, 10, 10, 0.28) 60%, rgba(10, 10, 10, 0.44) 100%),
    linear-gradient(to top, rgba(10, 10, 10, 0.72) 0%, transparent 42%);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(88vh, 860px);
  padding-block: clamp(80px, 12vh, 150px);
  max-width: var(--wrap);
}

.hero__title {
  font-size: var(--h1);
  color: var(--white);
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  max-width: 15ch;
}
/* Czech diacritics (É Á Í Š Ř Ž) sit above the compressed line box, so the
   clipping window gets extra headroom that negative margin takes back out. */
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-top: 0.16em;
  margin-top: -0.16em;
}
.hero__title .line > span { display: block; }
.js .hero__title .line > span {
  transform: translateY(125%);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--i) * 90ms + 140ms);
}
.hero.is-ready .hero__title .line > span { transform: none; }
.hero__title em { font-style: normal; color: var(--red); }

.hero__lead {
  max-width: 46ch;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: clamp(28px, 3.4vw, 40px);
}

.hero__eyebrow { color: var(--white); }
.hero__eyebrow::before { background: var(--red); }

.js .hero__fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0.5s);
}
.hero.is-ready .hero__fade { opacity: 1; transform: none; }

.hero__arc {
  position: absolute;
  right: -4%;
  bottom: -12%;
  width: min(46vw, 560px);
  z-index: -1;
  opacity: 0.85;
}

/* Facts strip under the hero */
.hero__facts {
  position: relative;
  border-top: 1px solid var(--line-dark);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(2px);
}
.hero__facts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero__facts li {
  padding: 22px 26px 22px 0;
  border-right: 1px solid var(--line-dark);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
}
.hero__facts li:last-child { border-right: 0; }
.hero__facts li + li { padding-left: 26px; }
.hero__facts strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 3px;
}

/* Page hero, the smaller variant used on inner pages */
.page-hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 10, 10, 0.94) 12%, rgba(10, 10, 10, 0.62) 62%, rgba(10, 10, 10, 0.5) 100%);
}
.page-hero__inner {
  position: relative;
  padding-block: clamp(64px, 10vw, 132px);
  min-height: clamp(300px, 42vw, 480px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page-hero h1 { color: var(--white); max-width: 18ch; margin-bottom: 0.35em; }
.page-hero .lead { max-width: 54ch; color: rgba(255, 255, 255, 0.78); }

.breadcrumb {
  display: flex;
  gap: 10px;
  align-items: center;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.breadcrumb a { color: rgba(255, 255, 255, 0.68); text-decoration: none; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--red); }

/* 09 Cards & services ==================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease),
              box-shadow 0.4s var(--ease);
}
.card:hover {
  border-color: var(--gray-300);
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -28px rgba(10, 10, 10, 0.5);
}

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--light);
  aspect-ratio: 16 / 9;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }
.card__media .tab { position: absolute; left: 18px; top: 18px; }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(22px, 2.4vw, 32px);
  gap: 12px;
}
.card__body h3 { margin: 0; }
.card__body p { color: var(--gray-700); margin: 0; }
.card__body .arrow-link { margin-top: auto; padding-top: 14px; align-self: flex-start; }

.card--portrait .card__media { aspect-ratio: 4 / 5; }
.card--square .card__media { aspect-ratio: 1 / 1; }

/* Service card, the three homepage pillars */
.service-card .card__media { aspect-ratio: 3 / 2; }
/* No blend mode here. `difference` inverts whatever the photo happens to be
   and can push the number into a colour the brand does not own. */
.service-card__no {
  position: absolute;
  right: 18px;
  top: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(10, 10, 10, 0.55);
}

/* Plain bordered tile, no image */
.tile {
  padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  height: 100%;
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.tile:hover { border-color: var(--gray-300); }
.tile h3, .tile h4 { margin-bottom: 0.5em; }
.tile p { color: var(--gray-700); margin: 0; }
.tile__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  color: var(--red);
}
.on-dark .tile {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-dark);
}
.on-dark .tile p { color: rgba(255, 255, 255, 0.66); }
.on-dark .tile:hover { border-color: rgba(255, 255, 255, 0.3); }

/* 10 Feature bands ======================================================= */

.band__media {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--light);
}
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__media--tall { aspect-ratio: 4 / 5; }
.band__media--wide { aspect-ratio: 16 / 10; }

.band__badge {
  position: absolute;
  left: 0;
  bottom: 28px;
  background: var(--red);
  color: var(--white);
  padding: 16px 24px 15px;
  max-width: 82%;
}
.band__badge strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.band__badge span { font-size: var(--t-sm); opacity: 0.9; }

/* Discipline row: tennis / squash / badminton */
.disciplines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  overflow: hidden;
}
.discipline {
  position: relative;
  padding: clamp(28px, 3vw, 44px);
  background: var(--black);
  transition: background-color 0.4s var(--ease);
  overflow: hidden;
}
.discipline:hover { background: #151515; }
.discipline h3 { margin-bottom: 0.4em; }
.discipline p { color: rgba(255, 255, 255, 0.74); margin: 0; font-size: var(--t-sm); }
.discipline__no {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: 0.16em;
  color: var(--red);
  display: block;
  margin-bottom: 26px;
}
.discipline__bed {
  position: absolute;
  inset: auto -30px -30px auto;
  width: 190px;
  height: 190px;
  color: var(--white);
  opacity: 0.09;
  -webkit-mask-image: radial-gradient(115% 115% at 100% 100%, #000 12%, transparent 74%);
          mask-image: radial-gradient(115% 115% at 100% 100%, #000 12%, transparent 74%);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}
.discipline:hover .discipline__bed { opacity: 0.14; transform: translate(-6px, -6px); }

/* Quote / statement */
.statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.14;
  text-transform: uppercase;
  color: var(--black);
  max-width: 20ch;
}
.on-dark .statement { color: var(--white); }
.statement em { font-style: normal; color: var(--red); }

/* 11 Steps & specs ======================================================= */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 26px;
  border-top: 2px solid var(--gray-200);
  counter-increment: step;
}
.step::before {
  content: "0" counter(step);
  position: absolute;
  top: -2px;
  left: 0;
  padding-top: 26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--red);
}
.step::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transition: width 0.9s var(--ease);
  transition-delay: calc(var(--i) * 120ms);
}
.js .step::after { width: 0; }
.js .steps.is-in .step::after { width: 100%; }
.step .head-sm { margin: 34px 0 0.4em; }
.step p { color: var(--gray-700); margin: 0; font-size: var(--t-sm); }
.on-dark .step { border-top-color: rgba(255, 255, 255, 0.2); }
.on-dark .step p { color: rgba(255, 255, 255, 0.62); }

/* Spec list, used for string types and lesson details */
.specs { list-style: none; margin: 0; padding: 0; }
.specs li {
  display: grid;
  grid-template-columns: minmax(140px, 0.32fr) 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.specs li:first-child { border-top: 1px solid var(--line); }
.specs dt, .specs__key {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
}
.specs__val { color: var(--gray-700); font-size: var(--t-sm); }
.on-dark .specs li { border-color: var(--line-dark); }
.on-dark .specs__key { color: var(--white); }
.on-dark .specs__val { color: rgba(255, 255, 255, 0.62); }

/* Fact figures */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.fact__k {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--black);
  display: block;
  margin-bottom: 8px;
}
.fact__k em { font-style: normal; color: var(--red); }
.fact__v { font-size: var(--t-sm); color: var(--gray-600); }
.on-dark .fact__k { color: var(--white); }
.on-dark .fact__v { color: rgba(255, 255, 255, 0.6); }

/* 12 Products & shop ===================================================== */

.shop-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.shop-cat {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 180px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  color: var(--black);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.shop-cat:hover { border-color: var(--black); transform: translateY(-3px); }
.shop-cat__name {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  z-index: 1;
}
.shop-cat__count {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--gray-600);
  margin-top: 2px;
}
.shop-cat__bed {
  position: absolute;
  inset: -20px -20px auto auto;
  width: 150px;
  height: 150px;
  color: var(--black);
  opacity: 0.1;
  -webkit-mask-image: radial-gradient(115% 115% at 100% 0%, #000 12%, transparent 74%);
          mask-image: radial-gradient(115% 115% at 100% 0%, #000 12%, transparent 74%);
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
}
.shop-cat:hover .shop-cat__bed { transform: translate(-8px, 8px) rotate(-6deg); opacity: 0.13; }

/* Filter bar. Presentational here, wired to WooCommerce later. */
.shop-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(28px, 3vw, 44px);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chip {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gray-700);
  transition: all 0.3s var(--ease);
}
.chip:hover { border-color: var(--black); color: var(--black); }
.chip.is-active {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.select {
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: var(--t-sm);
}

.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease),
              transform 0.35s var(--ease);
}
.product-card:hover {
  border-color: var(--gray-300);
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -30px rgba(10, 10, 10, 0.55);
}

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--light);
  overflow: hidden;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.06); }

.product-card__flags {
  position: absolute;
  left: 14px;
  top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 20px;
}
.product-card__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.product-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0;
}
.product-card__title a { color: var(--black); text-decoration: none; }
.product-card__title a:hover { color: var(--red); }

.stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-sm);
  color: var(--gray-600);
}
.stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1e9c4a;
  flex: none;
}
.stock--low { color: #a86500; }
.stock--low::before { background: #e0a000; }
.stock--out { color: var(--gray-500); }
.stock--out::before { background: var(--gray-400, #b0b0b0); }

.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--black);
  white-space: nowrap;
}
.price del { color: var(--gray-500); font-size: 0.8em; font-weight: 600; margin-right: 6px; }
.price ins { text-decoration: none; color: var(--red); }

.add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid var(--black);
  background: var(--black);
  color: var(--white);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.add-btn:hover { background: var(--red); border-color: var(--red); }
.add-btn[disabled] {
  background: var(--light);
  border-color: var(--line);
  color: var(--gray-500);
  cursor: not-allowed;
}
.add-btn.is-added { background: #1e9c4a; border-color: #1e9c4a; }
.add-btn svg { width: 15px; height: 15px; }

/* Demo-data notice, removed once WooCommerce supplies the catalogue */
.demo-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 20px;
  background: var(--red-wash);
  border-left: 3px solid var(--red);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--gray-700);
}
.demo-note strong { color: var(--black); }

/* 13 Cart drawer ========================================================= */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 96;
  background: rgba(10, 10, 10, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease), visibility 0s;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 97;
  width: min(420px, 100%);
  background: var(--white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease), visibility 0s linear 0.5s;
}
.drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.5s var(--ease), visibility 0s;
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.drawer__head h2 { margin: 0; font-size: 1.4rem; }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.drawer__foot { border-top: 1px solid var(--line); padding: 22px 24px; }

.drawer__empty {
  text-align: center;
  color: var(--gray-600);
  padding: 56px 0;
}
.drawer__empty svg { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--gray-300); }

.cart-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); }
.cart-line__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  text-transform: uppercase;
  line-height: 1.2;
}
.cart-line__meta { font-size: var(--t-sm); color: var(--gray-600); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); }
.qty button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--black);
  font-size: 1rem;
  line-height: 1;
}
.qty button:hover { color: var(--red); }
.qty span { min-width: 26px; text-align: center; font-size: var(--t-sm); }

.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cart-total .price { font-size: 1.5rem; }

/* 14 Accordion & tension tool ============================================ */

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  text-transform: uppercase;
  color: var(--black);
  transition: color 0.3s var(--ease);
}
.acc__btn:hover { color: var(--red); }
.acc__icon { position: relative; width: 16px; height: 16px; flex: none; }
.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  background: var(--red);
  transition: transform 0.4s var(--ease);
}
.acc__icon::before { left: 0; right: 0; top: 7px; height: 2px; }
.acc__icon::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: scaleY(0); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.44s var(--ease);
}
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: 24px; color: var(--gray-700); max-width: 68ch; margin: 0; }

/* Restring-frequency helper. The one interactive moment on the site. */
.tool {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(26px, 3.2vw, 44px);
}
.on-dark .tool {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-dark);
}
.tool__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.tool__range {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 3px;
  background: var(--gray-200);
  border-radius: 3px;
  margin: 12px 0 8px;
}
.on-dark .tool__range { background: rgba(255, 255, 255, 0.18); }
.tool__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--white);
  box-shadow: 0 2px 10px rgba(226, 7, 26, 0.4);
  cursor: pointer;
}
.tool__range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--red);
  cursor: pointer;
}
.tool__scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--gray-500);
  font-family: var(--font-display);
  letter-spacing: 0.1em;
}
.tool__out {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.on-dark .tool__out { border-color: var(--line-dark); }
.tool__big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--red);
  display: block;
  margin-bottom: 8px;
}
.tool__note { font-size: var(--t-sm); color: var(--gray-600); margin: 0; }
.on-dark .tool__note { color: rgba(255, 255, 255, 0.6); }

/* 15 Forms =============================================================== */

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black);
}
.field .req { color: var(--red); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--gray-300);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: var(--t-base);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-wash);
}
.field textarea { resize: vertical; min-height: 140px; }
.field__hint { font-size: var(--t-sm); color: var(--gray-600); }
.field__error {
  font-size: var(--t-sm);
  color: var(--red);
  display: none;
}
.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-color: var(--red); }
.field.has-error .field__error { display: block; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--t-sm);
  color: var(--gray-700);
}
.consent input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--red); }
.consent.has-error { color: var(--red-ink); }
.consent.has-error input { outline: 2px solid var(--red); outline-offset: 2px; }

.form-status {
  display: none;
  padding: 16px 20px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  background: var(--red-wash);
  border-left: 3px solid var(--red);
}
.form-status.is-on { display: block; }

/* Contact detail list */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.contact-list li:first-child { border-top: 1px solid var(--line); }
.contact-list svg { width: 22px; height: 22px; color: var(--red); margin-top: 3px; }
.contact-list__k {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
  display: block;
  margin-bottom: 2px;
}
.contact-list__v { font-size: var(--t-md); color: var(--black); }
.contact-list__v a { color: var(--black); text-decoration: none; }
.contact-list__v a:hover { color: var(--red); }

/* Placeholder marker so unset details are impossible to miss */
.tbd {
  display: inline-block;
  padding: 2px 9px;
  background: repeating-linear-gradient(-45deg, #ffe9ea, #ffe9ea 6px, #fff 6px, #fff 12px);
  border: 1px dashed var(--red);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-ink);
}

.map-placeholder {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--gray-300);
  border-radius: var(--r);
  background: var(--light);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  overflow: hidden;
}
.map-placeholder__inner { position: relative; z-index: 1; }
.map-placeholder .bed { opacity: 0.1; color: var(--graphite); }

/* 15b Legal documents ====================================================
   Long-form pages (obchodní podmínky, ochrana osobních údajů, cookies,
   reklamační řád). Same type scale and colours as the rest of the site,
   set at a comfortable measure for reading dense text.
   ======================================================================== */

.page-hero--plain { background: var(--black); }
.page-hero--plain .page-hero__inner { min-height: clamp(200px, 24vw, 300px); }

.prose { max-width: 74ch; }
.prose > * + * { margin-top: 1.15em; }

.prose h2 {
  font-size: clamp(1.4rem, 1.9vw + 1rem, 2rem);
  margin: 2.1em 0 0.7em;
  padding-top: 1.1em;
  border-top: 2px solid var(--gray-200);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-size: var(--h4);
  font-weight: 700;
  margin: 1.7em 0 0.5em;
}
.prose p { color: var(--gray-700); }
.prose strong { color: var(--black); font-weight: 600; }

.prose ul,
.prose ol { color: var(--gray-700); padding-left: 1.25em; margin-top: 0.7em; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--red); }

.prose a { color: var(--red-ink); }

/* Definition-style rows for identification blocks */
.legal-id {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.legal-id li {
  display: grid;
  grid-template-columns: minmax(150px, 0.34fr) 1fr;
  gap: 8px 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.legal-id dt,
.legal-id .legal-id__k {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.legal-id__v { color: var(--black); }

/* Data table used in the cookie and processing overviews */
.legal-table-wrap { overflow-x: auto; margin-top: 1em; }
.legal-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--line);
}
.legal-table th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  border-bottom: 2px solid var(--gray-200);
  white-space: nowrap;
}
.legal-table td { color: var(--gray-700); }

/* Callout for "we still need this from the client" and legal warnings */
.notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 22px;
  background: var(--red-wash);
  border-left: 3px solid var(--red);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--gray-700);
}
.notice strong { color: var(--black); }
.notice svg { width: 20px; height: 20px; flex: none; color: var(--red); margin-top: 2px; }

.legal-updated {
  font-size: var(--t-sm);
  color: var(--gray-500);
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Withdrawal form, designed to survive printing on A4 */
.withdrawal {
  border: 1px solid var(--gray-300);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 40px);
  background: var(--white);
  margin-top: 1.2em;
}
.withdrawal > * + * { margin-top: 0.9em; }
.withdrawal p { color: var(--ink); }
.withdrawal__line { letter-spacing: 0.04em; color: var(--gray-400, #b0b0b0); overflow: hidden; }

/* Cookie consent ==========================================================
   Two surfaces: a bottom banner on first visit, and a settings dialog.
   Accept and reject are the same size, same font and same padding so
   neither is easier to reach than the other. Optional categories are never
   pre-ticked. Markup is built by main.js.
   ======================================================================== */

.cc-banner {
  position: fixed;
  z-index: 99;
  left: 50%;
  bottom: clamp(12px, 2vw, 24px);
  width: min(1120px, calc(100vw - 2 * clamp(12px, 3vw, 32px)));
  transform: translate(-50%, calc(100% + 40px));
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 24px 60px -24px rgba(10, 10, 10, 0.42),
              0 2px 8px rgba(10, 10, 10, 0.06);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.55s var(--ease), opacity 0.4s var(--ease),
              visibility 0s linear 0.55s;
}
.cc-banner.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.55s var(--ease), opacity 0.4s var(--ease),
              visibility 0s;
}
/* Red hairline echoing the brand, without shouting */
.cc-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 74px;
  height: 3px;
  background: var(--red);
  border-radius: 10px 0 0 0;
}

.cc-banner__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px);
}
.cc-banner h2 {
  font-size: 1.15rem;
  margin: 0 0 7px;
  letter-spacing: 0;
}
.cc-banner p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--gray-700);
  max-width: 68ch;
}

.cc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* Equal weight: identical box, only the fill differs */
.cc-actions .btn {
  padding: 14px 24px;
  font-size: 0.86rem;
  min-width: 158px;
}
/* WCAG 1.4.11 wants 3:1 for UI component boundaries. The site's default
   ghost border is ~1.5:1 on white, which is fine beside large type but not
   as the only outline of a consent control. */
.cc-actions .btn--ghost,
.cc-modal__foot .btn--ghost { --btn-bd: var(--gray-500); }

/* While the banner is on screen, keep the page's own bottom content
   reachable instead of sitting underneath it. */
html.cc-open body { padding-bottom: var(--cc-h, 0px); }
.cc-link {
  background: none;
  border: 0;
  padding: 14px 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gray-700);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.28s var(--ease);
}
.cc-link:hover { color: var(--red); }

/* ---- Settings dialog ---- */

.cc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}
.cc-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.35s var(--ease), visibility 0s; }

.cc-modal {
  position: fixed;
  z-index: 101;
  left: 50%;
  top: 50%;
  width: min(660px, calc(100vw - 2 * clamp(12px, 4vw, 40px)));
  max-height: min(86vh, 780px);
  transform: translate(-50%, -46%);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 30px 80px -30px rgba(10, 10, 10, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.45s var(--ease), opacity 0.35s var(--ease),
              visibility 0s linear 0.45s;
}
.cc-modal.is-open {
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
  transition: transform 0.45s var(--ease), opacity 0.35s var(--ease), visibility 0s;
}

.cc-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 26px clamp(20px, 3vw, 32px) 18px;
  border-bottom: 1px solid var(--line);
}
.cc-modal__head h2 { margin: 0; font-size: var(--h4); }
.cc-modal__body { overflow-y: auto; padding: 6px clamp(20px, 3vw, 32px) 4px; }
.cc-modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px clamp(20px, 3vw, 32px) 26px;
  border-top: 1px solid var(--line);
}
.cc-modal__foot .btn { flex: 1 1 auto; padding: 14px 20px; font-size: 0.84rem; }

.cc-cat { padding: 20px 0; border-bottom: 1px solid var(--line); }
.cc-cat:last-child { border-bottom: 0; }
.cc-cat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cc-cat__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--black);
}
.cc-cat p { margin: 8px 0 0; font-size: var(--t-sm); color: var(--gray-700); max-width: 62ch; }
/* A full sentence, so it reads as body text rather than a label. */
.cc-cat__state {
  display: block;
  margin-top: 9px;
  padding-left: 12px;
  border-left: 2px solid var(--gray-200);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--gray-600);
  max-width: 62ch;
}

/* Switch. A real checkbox underneath, so keyboard and AT work normally. */
.cc-switch { position: relative; flex: none; display: inline-flex; align-items: center; }
.cc-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cc-switch input[disabled] { cursor: not-allowed; }
.cc-switch__ui {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  /* 3:1 against white so the off state is perceivable, per WCAG 1.4.11 */
  background: var(--gray-500);
  position: relative;
  transition: background-color 0.3s var(--ease);
}
.cc-switch__ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.3);
  transition: transform 0.3s var(--ease);
}
.cc-switch input:checked + .cc-switch__ui { background: var(--red); }
.cc-switch input:checked + .cc-switch__ui::after { transform: translateX(20px); }
.cc-switch input:focus-visible + .cc-switch__ui { outline: 2px solid var(--red); outline-offset: 3px; }
.cc-switch input[disabled] + .cc-switch__ui { background: var(--gray-500); opacity: 0.5; }
.cc-switch input[disabled]:checked + .cc-switch__ui { background: var(--gray-500); }

@media (max-width: 860px) {
  .cc-banner__inner { grid-template-columns: 1fr; gap: 18px; }
  .cc-actions { width: 100%; }
  .cc-actions .btn { flex: 1 1 46%; min-width: 0; }
  .cc-link { width: 100%; text-align: center; padding-block: 10px; }
}
@media (max-width: 480px) {
  .cc-banner { width: calc(100vw - 20px); bottom: 10px; }
  .cc-actions .btn { flex: 1 1 100%; }
  .cc-modal__foot { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-banner, .cc-modal, .cc-backdrop { transition: none !important; }
}

/* Table of contents on long documents */
.toc { border: 1px solid var(--line); border-radius: var(--r); padding: 22px 26px; background: var(--paper); }
.toc h2 { border: 0; padding: 0; margin: 0 0 12px; font-size: 1rem; letter-spacing: 0.1em; }
.toc ol { margin: 0; padding-left: 1.2em; font-size: var(--t-sm); }
.toc a { color: var(--gray-700); text-decoration: none; }
.toc a:hover { color: var(--red); text-decoration: underline; }

@media (max-width: 720px) {
  .legal-id li { grid-template-columns: 1fr; gap: 3px; }
}

/* Location line under the hero call to action. */
.hero__place {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.7);
}
.hero__place svg { width: 17px; height: 17px; flex: none; color: var(--red); }

/* The contact map frame once a real location is known. */
.map-placeholder--live {
  border-style: solid;
  border-color: var(--line);
  place-items: stretch;
  text-align: left;
}
.map-placeholder--live .map-placeholder__inner { width: 100%; }
.map-place__addr {
  font-style: normal;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--black);
  margin: 14px 0 20px;
}

/* 15c Instagram ==========================================================
   Grid of official Instagram embeds: three columns on desktop, two on
   tablet, one on phones.

   Instagram's embed.js swaps each blockquote for its own iframe and writes
   inline styles onto it: min-width:326px, max-width:540px and a margin.
   Left alone those fight the grid and force a horizontal scrollbar on narrow
   screens, so they are overridden here. The !important flags are answering
   inline styles written by a third-party script, which is the one case where
   they are the only way to win.
   ======================================================================== */

.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.ig-card {
  position: relative;
  overflow: hidden;
  min-width: 0;                 /* lets a grid item shrink below its content */
  /* Instagram sizes each embed to its own post, so a row of them comes out
     ragged: a 4:5 photo with a long caption is ~100px taller than a square
     one. A fixed shape makes every tile identical and clips whatever runs
     past it. At these widths that leaves the account header, the whole
     picture and the "Zobrazit víc na Instagramu" link visible, and cuts only
     the like and comment strip underneath. */
  aspect-ratio: 1 / 1.6;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.ig-card:hover {
  border-color: var(--gray-300);
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -30px rgba(10, 10, 10, 0.55);
}

/* Fades the clipped edge into the tile instead of slicing a row of icons
   in half. Sits over white where an embed is shorter than the tile, so it is
   invisible there. */
.ig-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white));
  pointer-events: none;
}
.ig-card--empty::after,
.ig-card--failed::after { display: none; }

/* Tame the markup Instagram injects so every tile stays the same width. */
.ig-card .instagram-media {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ig-card iframe { max-width: 100% !important; }

/* Placeholder tile, used until real permalinks are pasted in. */
.ig-card--empty {
  display: grid;
  place-items: center;
  background: var(--paper);
  border-style: dashed;
  border-color: var(--gray-300);
}
.ig-card--empty:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--gray-300);
}
.ig-card--empty .bed { opacity: 0.07; color: var(--graphite); }
.ig-card__label {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* Shown in place of the grid until the Meta script is allowed. */
.ig-consent {
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  text-align: center;
}
.ig-consent p {
  margin: 0 auto 18px;
  max-width: 62ch;
  font-size: var(--t-sm);
  color: var(--gray-700);
}

/* Instagram refuses to render some embeds for logged-out visitors and leaves
   a ~30px iframe behind. main.js flags those cards and this swaps in a plain
   link, so the row keeps its shape. */
.ig-card__fallback { display: none; }
/* Hidden, but still laid out: display:none would zero the iframe's height
   and the watchdog could never notice a slow embed arriving. Absolute with
   no bottom edge keeps its own height measurable and out of the flow, and
   .ig-card already clips the overflow. */
.ig-card--failed .instagram-media,
.ig-card--failed iframe {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  visibility: hidden;
  pointer-events: none;
}
.ig-card--failed {
  border-style: dashed;
  border-color: var(--gray-300);
  background: var(--paper);
}
.ig-card--failed:hover { border-color: var(--gray-500); }
.ig-card--failed .ig-card__fallback {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  padding: 24px;
  text-align: center;
  text-decoration: none;
}
.ig-card__fallback .bed { opacity: 0.07; color: var(--graphite); }
.ig-card__fallback .ig-card__label { color: var(--gray-700); transition: color 0.25s var(--ease); }
.ig-card__fallback:hover .ig-card__label { color: var(--red); }

.ig-cta { justify-content: center; margin-top: clamp(28px, 3.4vw, 44px); }

@media (max-width: 960px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .ig-grid { grid-template-columns: 1fr; }
  .ig-card { width: 100%; max-width: 420px; margin-inline: auto; }
}

/* 16 Footer ============================================================== */

.site-footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.62);
  padding-block: clamp(56px, 6vw, 88px) 0;
  position: relative;
  overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 3.4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.footer__brand p { max-width: 34ch; font-size: var(--t-sm); margin-top: 22px; }
.footer h3, .footer h4 {
  color: var(--white);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  margin-bottom: 20px;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer__list a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  font-size: var(--t-sm);
  transition: color 0.28s var(--ease);
}
.footer__list a:hover { color: var(--white); }
/* Legal row. Sits above the copyright line so the required documents are
   reachable from every page, including the cookie preferences control. */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  padding-block: 22px;
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-sm);
}
.footer__legal a,
.footer__legal button {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: color 0.28s var(--ease);
}
.footer__legal a:hover,
.footer__legal button:hover { color: var(--white); }
.footer__legal button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.footer__legal button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  padding-block: 24px;
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-sm);
}
.footer__bottom a { color: rgba(255, 255, 255, 0.62); text-decoration: none; }
.footer__bottom a:hover { color: var(--white); }
/* Developer credit. Sits on its own line under the bottom bar so the
   copyright row above keeps its existing two-column split untouched. */
.footer__credit {
  margin: -10px 0 0;
  padding-bottom: 26px;
  font-size: var(--t-xs);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.32);
  text-align: center;
}

.footer__bed {
  position: absolute;
  inset: -60px -60px auto auto;
  width: 340px;
  height: 340px;
  color: var(--white);
  opacity: 0.08;
  -webkit-mask-image: radial-gradient(115% 115% at 100% 0%, #000 10%, transparent 72%);
          mask-image: radial-gradient(115% 115% at 100% 0%, #000 10%, transparent 72%);
  pointer-events: none;
}

/* 17 Motion ============================================================== */

/* Every hidden start state is scoped to .js, which an inline script in <head>
   sets before first paint. If the script never runs, the page renders whole
   and static instead of blank. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

/* The clip goes on the CHILD, never on the observed element itself.
   Chrome computes intersectionRect after applying an element's own
   clip-path, so clipping the observed element to zero height pins its
   intersectionRatio at 0. It then never crosses the threshold, never gets
   .is-in, and hides itself permanently. Clipping a child keeps the
   observed box measurable. */
.js [data-reveal="clip"] {
  opacity: 1;
  transform: none;
}
.js [data-reveal="clip"] > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="clip"].is-in > * { clip-path: inset(0 0 0 0); }

.js [data-reveal="zoom"] img {
  transform: scale(1.09);
  transition: transform 1.3s var(--ease-soft);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="zoom"].is-in img { transform: scale(1); }

.js [data-reveal="right"] { transform: translateX(-26px); }
.js [data-reveal="right"].is-in { transform: none; }

/* 18 WooCommerce bridge ==================================================
   WooCommerce prints its own markup. These rules map its default classes
   onto the styles above so the shop inherits the identity with no rework.
   ======================================================================== */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--gray-300);
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -30px rgba(10, 10, 10, 0.55);
}
.woocommerce ul.products li.product > a { text-decoration: none; color: inherit; }
.woocommerce ul.products li.product img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 18px 20px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--black);
}
.woocommerce ul.products li.product .price {
  padding: 8px 20px 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--black);
}
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  margin: 16px 20px 20px;
  padding: 12px 18px;
  background: var(--black);
  color: var(--white);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce ul.products li.product .button:hover { background: var(--red); color: var(--white); }

.woocommerce span.onsale {
  background: var(--red);
  color: var(--white);
  border-radius: 0;
  padding: 7px 14px 6px;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: skewX(var(--skew));
  top: 14px;
  left: 14px;
  margin: 0;
}
.woocommerce .star-rating span::before { color: var(--red); }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--black); }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--red);
  background: var(--light);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--red); }

/* 19 Responsive ========================================================== */

@media (max-width: 1080px) {
  .products,
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  :root { --header-h: 72px; }

  .nav { display: none; }
  .nav-toggle { display: inline-flex; }

  .hero__inner { min-height: auto; padding-block: clamp(56px, 14vh, 96px) clamp(48px, 8vh, 72px); }
  .hero__title { max-width: 100%; }
  .hero__media img { object-position: 58% 42%; }
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(10, 10, 10, 0.95) 6%, rgba(10, 10, 10, 0.66) 46%, rgba(10, 10, 10, 0.42) 100%);
  }
  .hero__arc { display: none; }
  .hero__facts ul { grid-template-columns: repeat(2, 1fr); }
  .hero__facts li { border-bottom: 1px solid var(--line-dark); padding-right: 18px; }
  .hero__facts li:nth-child(2n) { border-right: 0; }
  .hero__facts li:nth-child(n + 3) { border-bottom: 0; }
  .hero__facts li + li { padding-left: 0; }
  .hero__facts li:nth-child(2n) { padding-left: 18px; }

  .split { grid-template-columns: 1fr; }
  .split--media-first .split__media { order: 0; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .disciplines { grid-template-columns: 1fr; }
  .shop-cats { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: 1fr; gap: 24px; }
  .page-hero__inner { min-height: 260px; }
}

@media (max-width: 720px) {
  .products,
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__facts ul { grid-template-columns: 1fr; }
  .hero__facts li,
  .hero__facts li:nth-child(2n) { border-right: 0; padding-left: 0; padding-right: 0; }
  .hero__facts li:nth-child(n + 3) { border-bottom: 1px solid var(--line-dark); }
  .hero__facts li:last-child { border-bottom: 0; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .specs li { grid-template-columns: 1fr; gap: 6px; }
  .product-card__foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .add-btn { justify-content: center; }
  .shop-bar { flex-direction: column; align-items: stretch; }
  .chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .chip { white-space: nowrap; }
}

@media (max-width: 480px) {
  .products,
  .woocommerce ul.products { grid-template-columns: 1fr; }
  .shop-cats { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}

/* 19b Mobile refinements ==================================================
   Everything below is scoped to phones and small tablets. Nothing here
   applies above 768px, so the desktop layout is untouched.

   The two exceptions are .u-sm / .u-lg, which have to exist outside the
   query so the short mobile wording stays hidden on a large screen. They
   change nothing that was on the page before.
   ======================================================================== */

/* Short copy for a phone, full copy everywhere else. */
.u-sm { display: none; }

@media (max-width: 768px) {
  .u-lg { display: none; }
  .u-sm { display: inline; }

  :root {
    --header-h: 64px;                 /* compact sticky bar */
    --gutter: 20px;                   /* one side padding on every page */
    --section-y: clamp(56px, 11vw, 72px);
    --h3: 1.375rem;                   /* widens the step down from h2 */
  }

  /* --- Header ----------------------------------------------------------
     Slides away while reading downwards and comes straight back on the
     first upward flick, so the page gets the full screen without losing
     the way out. main.js drives the class. */
  .site-header.is-hidden { transform: translateY(-100%); }
  .brand { display: flex; align-items: center; min-height: 44px; }
  .brand img { width: 166px; }

  /* --- Hero ------------------------------------------------------------
     Title, one-line promise and the red CTA have to land above the fold on
     a 375x667 screen, so the generous desktop padding comes off and the
     facts strip below turns into a swipeable row. */
  .hero__inner { padding-block: 26px 30px; }
  .hero__eyebrow { margin-bottom: 12px; font-size: var(--t-xs); }
  .hero__title { margin-bottom: 16px; }
  .hero__lead {
    font-size: 1.0625rem;
    line-height: 1.5;
    margin-bottom: 22px;
    max-width: 32ch;
  }
  .hero__place { margin-top: 16px; font-size: var(--t-sm); }

  /* --- Buttons ---------------------------------------------------------
     Full width, comfortably over the 48px floor, and 16px type so iOS
     never zooms on a tap. The red primary keeps its weight; the outlined
     secondary stays quiet underneath it. */
  .btn {
    width: 100%;
    min-height: 52px;
    padding: 15px 22px;
    font-size: 1rem;
    letter-spacing: 0.1em;
  }
  .btn--sm { min-height: 44px; font-size: 0.875rem; }
  .btn-row { flex-direction: column; align-items: stretch; gap: 12px; }

  /* --- Swipeable rows --------------------------------------------------
     A phone turns every one of these grids into a column hundreds of
     pixels tall. As a snap row each set costs one screen instead of four,
     and the next card peeking at the edge says "there is more" without
     any extra chrome.

     The negative margin lets the row bleed to the screen edge while the
     matching padding keeps the first and last card on the gutter line.
     .section already clips its overflow, so nothing escapes sideways. */
  .grid-3,
  .disciplines,
  .products,
  .shop-cats,
  .ig-grid,
  .hero__facts ul {
    display: flex;
    gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .grid-3::-webkit-scrollbar,
  .disciplines::-webkit-scrollbar,
  .products::-webkit-scrollbar,
  .shop-cats::-webkit-scrollbar,
  .ig-grid::-webkit-scrollbar,
  .hero__facts ul::-webkit-scrollbar { display: none; }

  .grid-3 > *,
  .disciplines > *,
  .products > *,
  .shop-cats > *,
  .ig-grid > * {
    flex: 0 0 min(80%, 310px);
    min-width: 0;
    scroll-snap-align: center;
  }
  /* The Instagram tiles keep their own shape and must not re-centre
     themselves inside the row. */
  .ig-card { width: auto; max-width: none; margin-inline: 0; }

  /* --- Hero facts ------------------------------------------------------
     Four stacked rows cost about a third of a screen. As short chips they
     read as the four reasons to care and cost a fifth of that. */
  .hero__facts li,
  .hero__facts li:nth-child(2n),
  .hero__facts li:nth-child(n + 3),
  .hero__facts li:last-child {
    flex: 0 0 74%;
    scroll-snap-align: center;
    padding: 16px 0;
    border: 0;
  }
  .hero__facts strong { font-size: 1.1rem; margin-bottom: 5px; }

  /* --- Cards -----------------------------------------------------------
     A soft shadow and a lighter border separate one card from the next
     far better than a hairline does on a small bright screen. */
  .card,
  .tile,
  .product-card,
  .discipline {
    box-shadow: 0 10px 26px -20px rgba(10, 10, 10, 0.55);
  }
  .on-dark .card,
  .on-dark .tile,
  .on-dark .discipline { box-shadow: none; }

  /* --- Tap targets -----------------------------------------------------
     Everything a thumb has to hit gets at least 44px of height. The footer
     lists grow a little taller as a result, which is the point. */
  .footer__list a,
  .footer__legal a,
  .footer__legal button,
  .arrow-link,
  .product-card__title a,
  .mobile-nav__foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__list li { line-height: 1.45; }
  .chip { min-height: 44px; }
  .breadcrumb a,
  .toc a,
  .legal-id__v a,
  .contact-list__v a { display: inline-flex; align-items: center; min-height: 44px; }
  .toc li { line-height: 1.3; }
  /* A list item that is nothing but a link is navigation, not prose, so it
     gets a real tap target. Links wrapped in a sentence are left alone. */
  .prose li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
  /* Links sitting inside a running sentence keep their inline size on
     purpose: stretching one would break the line it belongs to, and the
     inline-in-text exception in WCAG 2.5.8 covers them. */
  .footer__legal { gap: 4px 20px; }

  /* A 3px track is impossible to grab. Padding grows the hit area to 44px
     while background-clip keeps the track itself exactly as thin as it
     looks on a desktop. */
  .tool__range {
    height: 44px;
    padding-block: 20.5px;
    background-clip: content-box;
    margin: 4px 0;
  }

  /* --- Floating call button -------------------------------------------
     On a page this long the phone number is otherwise only reachable at
     the very top or the very bottom. main.js shows this once the hero has
     scrolled past and hides it again over the footer, where the number is
     already in view. */
  .fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 88;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--red);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 14px 30px -12px rgba(226, 7, 26, 0.75);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
                visibility 0s linear 0.3s;
  }
  .fab.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s;
  }
  .fab svg { width: 19px; height: 19px; flex: none; }
  .fab:active { transform: translateY(1px); }
}

/* A full-width button is right on a phone and absurd at the top of this
   range, where it would stretch to 728px. */
@media (max-width: 768px) and (min-width: 600px) {
  .btn { max-width: 520px; align-self: center; }
}

/* Outside the query the button must not exist at all. */
@media (min-width: 769px) {
  .fab { display: none; }
}

/* 20 Reduced motion & print ============================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-reveal="clip"],
  [data-reveal="clip"] > *,
  [data-reveal="right"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  [data-reveal="zoom"] img { transform: none !important; }
  .hero__title .line > span { transform: none !important; }
  .hero__fade { opacity: 1 !important; transform: none !important; }
  .hero__media img { transform: none !important; }
  .bed-divider line { stroke-dashoffset: 0 !important; }
  .arc path { stroke-dashoffset: 0 !important; }
  .step::after { width: 100% !important; }
  .mobile-nav__list a { opacity: 1; transform: none; }
}

@media print {
  .site-header,
  .mobile-nav,
  .drawer,
  .drawer-backdrop,
  .hero__media,
  .btn,
  .cookie-panel,
  .toc,
  .notice,
  .breadcrumb,
  .site-footer { display: none !important; }

  /* The withdrawal form has to be usable on paper */
  .page-hero--plain { background: none !important; }
  .page-hero--plain h1,
  .page-hero--plain .lead { color: #000 !important; }
  .prose { max-width: none; }
  .withdrawal { border: 1px solid #000; break-inside: avoid; }
  .legal-table { min-width: 0; font-size: 10pt; }
  .tbd { border: 1px solid #000; background: none !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  body { color: #000; }
  [data-reveal],
  [data-reveal="clip"] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  [data-reveal="zoom"] img { transform: none !important; }
}