/*
Theme Name: Tennis-Servis
Theme URI: https://example.com/tennis-servis
Author: VEXA
Author URI: https://example.com
Description: Vlastní téma pro TENNIS-SERVIS s.r.o. (Karel Bednář). Prodej tenisového vybavení, vyplétání raket a tenisová škola. Převedeno ze statického webu, připraveno pro WooCommerce.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tennis-servis
Tags: custom-menu, featured-images, translation-ready, e-commerce, two-columns, custom-logo

Písma Barlow a Saira Condensed jsou součástí tématu (assets/fonts/) a jsou
šířena pod licencí SIL Open Font License 1.1. Téma nenačítá nic z cizích
serverů.
*/

/* ==========================================================================
   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 {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--black);
}
.cc-cat__name--locked { cursor: default; }
.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 {
  /* THE BUG THIS FIXES: the track is a later sibling of the checkbox and
     both are positioned with z-index auto, so it painted on top of the
     input and swallowed every click. The input was never reached, so the
     toggle could not be switched with a pointer at all. */
  pointer-events: none;   /* the checkbox underneath takes the clicks */
  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); }

/* 18b WooCommerce pages ==================================================
   Single product, cart, checkout and account, keyed to WooCommerce's own
   class names so no template has to be overridden to get the look right.

   Everything here reuses the tokens from section 01. Where WooCommerce ships
   its own colours and rounded corners, they are replaced rather than layered
   over, which is why a few declarations repeat values you will also find in
   section 05.
   ======================================================================== */

/* --- Shop header: sorting, count, breadcrumb --------------------------- */
.woocommerce .woocommerce-breadcrumb {
  margin-bottom: clamp(20px, 2.4vw, 32px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--gray-700); text-decoration: none; }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--red); }

.woocommerce .woocommerce-result-count {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--gray-600);
}
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-ordering .orderby {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--black);
}

/* --- Single product ---------------------------------------------------- */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary { float: none; width: auto; margin: 0; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .woocommerce-notices-wrapper { grid-column: 1 / -1; }

.woocommerce div.product .woocommerce-product-gallery__image {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--light);
}
.woocommerce div.product .flex-control-thumbs { margin-top: 12px; gap: 10px; display: flex; }
.woocommerce div.product .flex-control-thumbs li { width: auto; margin: 0; float: none; }
.woocommerce div.product .flex-control-thumbs img {
  width: 76px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  opacity: 0.75;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
}
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--black); }

.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--h2);
  line-height: 0.98;
  text-transform: uppercase;
  margin: 0 0 0.35em;
}
.woocommerce div.product .summary > .price,
.woocommerce div.product p.price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--h3);
  color: var(--black);
  margin: 0 0 0.6em;
}
.woocommerce div.product p.price del { color: var(--gray-500); font-weight: 600; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--red); }
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: var(--t-md);
  color: var(--gray-700);
  margin-bottom: 1.4em;
}
.woocommerce div.product .stock { font-size: var(--t-sm); color: var(--gray-700); }
.woocommerce div.product .stock.in-stock { color: var(--black); }
.woocommerce div.product .stock.out-of-stock { color: var(--red); }

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.woocommerce div.product form.cart .variations { width: 100%; }
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { padding-block: 8px; }

.woocommerce .quantity .qty {
  width: 82px;
  height: 100%;
  min-height: 52px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: center;
  color: var(--black);
}

.woocommerce div.product .product_meta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--gray-600);
}
.woocommerce div.product .product_meta a { color: var(--gray-700); }

/* Tabs: a quiet row of labels, not WooCommerce's default folder tabs. */
.woocommerce div.product .woocommerce-tabs { margin-top: clamp(36px, 4vw, 64px); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin: 0 0 22px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--black); }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--h3);
  text-transform: uppercase;
  margin-bottom: 0.8em;
}

/* --- Tables shared by cart, checkout and account ----------------------- */
.woocommerce table.shop_table,
.woocommerce table.shop_attributes {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_attributes th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--black);
}
.woocommerce table.shop_table td,
.woocommerce table.shop_attributes td {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--gray-700);
}
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table td.product-name a { color: var(--black); text-decoration: none; font-weight: 600; }
.woocommerce table.shop_table td.product-name a:hover { color: var(--red); }
.woocommerce table.shop_table img { width: 68px; border-radius: var(--r-sm); }
.woocommerce a.remove {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--gray-600) !important;
  font-size: 18px;
  line-height: 1;
}
.woocommerce a.remove:hover { background: var(--red); color: var(--white) !important; }

/* --- Cart -------------------------------------------------------------- */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals { width: 100%; margin-top: clamp(28px, 3vw, 44px); }
.woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; max-width: 460px; margin-left: auto; }
.woocommerce .cart_totals h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--h4);
  text-transform: uppercase;
  margin-bottom: 0.7em;
}
.woocommerce .cart_totals .order-total .amount { font-family: var(--font-display); font-size: 1.35rem; color: var(--black); }
.woocommerce .coupon { display: flex; gap: 10px; flex-wrap: wrap; }
.woocommerce .coupon .input-text {
  flex: 1 1 200px;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 1rem;
}
.woocommerce .wc-proceed-to-checkout { padding-top: 18px; }

/* --- Checkout and account forms ---------------------------------------- */
.woocommerce form .form-row { padding: 0; margin: 0 0 16px; }
.woocommerce form .form-row label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-700);
}
.woocommerce form .form-row .required { color: var(--red); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-family: var(--font-body);
  /* 16px keeps iOS from zooming the page when a field is focused. */
  font-size: 1rem;
  line-height: 1.5;
  color: var(--black);
  transition: border-color 0.28s var(--ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: none; border-color: var(--black); }
.woocommerce form .form-row textarea { min-height: 140px; resize: vertical; }

.woocommerce-checkout h3,
.woocommerce-account h2,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--h4);
  text-transform: uppercase;
  margin-bottom: 0.8em;
}
.woocommerce-checkout #customer_details { margin-bottom: clamp(28px, 3vw, 44px); }
.woocommerce-checkout #payment {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.woocommerce-checkout #payment ul.payment_methods {
  padding: 18px;
  border-bottom: 1px solid var(--line);
}
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--gray-700);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--white); }
.woocommerce-checkout #payment div.form-row { padding: 18px; }

/* --- My account -------------------------------------------------------- */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-600);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--red); }
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  max-width: 460px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* --- Pagination -------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 6px; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--black);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* --- Narrow screens ---------------------------------------------------- */
@media (max-width: 960px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .woocommerce .cart-collaterals .cart_totals { max-width: none; }
  .woocommerce table.shop_table_responsive tr td { text-align: right; }
  .woocommerce table.shop_table img { width: 54px; }
  .woocommerce div.product .product_title { font-size: var(--h3); }
  /* WooCommerce buttons follow the same rule as the theme's own. */
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit { width: 100%; min-height: 52px; font-size: 1rem; }
  .woocommerce .coupon .input-text { flex: 1 1 100%; }
}

/* 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; }

  /* --- Lists ------------------------------------------------------------
     One column, never a sideways one. A carousel hides whatever is off the
     edge behind a gesture nobody announced, so these all stay stacked.

     Length is handled two other ways instead: each item below is made
     compact, and a set with more items than a screen can take is cut short
     behind a "show more" button, wired up from the data-more attribute in
     main.js.
     ------------------------------------------------------------------- */
  .grid-3,
  .disciplines,
  .products,
  .shop-cats,
  .ig-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* A product as a row: a thumbnail beside the text rather than a
     full-width square above it, which turns a ~500px tile into a ~180px
     one without dropping anything from it. */
  .product-card { display: grid; grid-template-columns: 116px 1fr; }
  .product-card__media { aspect-ratio: 1 / 1; }
  .product-card__body { gap: 6px; padding: 14px 16px; }
  .product-card__title { font-size: 1rem; line-height: 1.25; }
  .product-card__foot { padding-top: 10px; }
  .product-card__flags { transform: scale(0.85); transform-origin: left top; }

  /* Picture cards give back a little height; the words carry the meaning.
     .service-card .card__media has to be named too, or its own 3/2 rule
     outranks this one and nothing moves. */
  .card__media,
  .service-card .card__media { aspect-ratio: 2 / 1; }
  .card__body { padding: 20px; }

  /* The two link columns run to a dozen rows once every link is a 44px
     target. Two narrow columns halve that without shrinking anything a
     thumb has to hit. The contact column keeps one column: its lines are
     label plus value, not bare links. */
  .footer__grid > .footer:nth-child(2) .footer__list,
  .footer__grid > .footer:nth-child(3) .footer__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    align-items: start;
  }

  .shop-cat { min-height: 116px; padding: 18px; }
  .discipline { padding: 22px; }

  /* --- Instagram, one tile at a time ------------------------------------
     Three embeds stacked in a single grid cell and cross-faded, instead of
     three screens of them. Every tile stays in the layout the whole time at
     opacity 0, so Instagram's script keeps sizing them and switching never
     reloads an iframe or refetches a post.

     The stacking only applies once main.js has added .is-rotator. Without
     JavaScript the tiles stay in the ordinary vertical list above, rather
     than piling up on top of each other in one cell. */
  .ig-card { width: auto; max-width: none; margin-inline: 0; }

  .ig-grid.is-rotator { align-items: start; gap: 0; }
  .ig-grid.is-rotator > .ig-card {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity 0.55s var(--ease), visibility 0s linear 0.55s;
  }
  .ig-grid.is-rotator > .ig-card.is-shown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.55s var(--ease), visibility 0s;
  }

  /* 8px of dot inside a 44px target. */
  .ig-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
  }
  .ig-dots button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .ig-dots button::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-300);
    transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .ig-dots button[aria-selected="true"]::before {
    background: var(--red);
    transform: scale(1.5);
  }

  /* --- Hero facts ------------------------------------------------------
     Four short benefit lines, stacked and tight rather than four full
     paragraphs. */
  .hero__facts li,
  .hero__facts li:nth-child(2n),
  .hero__facts li:nth-child(n + 3) {
    padding: 13px 0;
    padding-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .hero__facts li:last-child { border-bottom: 0; }
  .hero__facts strong { font-size: 1.05rem; margin-bottom: 2px; }

  /* --- Show more -------------------------------------------------------
     Items past the cut are taken out of the flow entirely, so nothing is
     half visible and nothing is reachable by a screen reader while it is
     folded away. */
  .is-more-hidden { display: none !important; }
  .more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-top: 16px;
    padding: 14px 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--black);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
  }
  .more-btn:hover,
  .more-btn:focus-visible { border-color: var(--black); }
  .more-btn__icon {
    width: 14px;
    height: 9px;
    flex: none;
    transition: transform 0.3s var(--ease);
  }
  .more-btn[aria-expanded="true"] .more-btn__icon { transform: rotate(180deg); }
  .on-dark .more-btn {
    background: transparent;
    border-color: var(--line-dark);
    color: var(--white);
  }
  .on-dark .more-btn:hover { border-color: var(--white); }

  /* --- 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 neither of these may exist at all. */
@media (min-width: 769px) {
  .fab,
  .ig-dots { 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; }
}

/* ===== HLAVIČKA – stav při scrollování ===== */
.site-header {
  transition: box-shadow .35s var(--ease), transform .4s var(--ease), background-color .35s var(--ease), margin-bottom .35s var(--ease);
}
.header__inner {
  transition: min-height .35s var(--ease), padding .35s var(--ease);
}
.brand img {
  transition: width .35s var(--ease);
}

/* červená linka dole – vysune se při scrollu */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
  pointer-events: none;
}
.site-header.is-stuck::after { transform: scaleX(1); }

/* přilepená hlavička: výraznější stín + jemně průhledná */
.site-header.is-stuck {
  background: #fff;
  box-shadow: 0 10px 30px -12px rgba(10, 10, 10, .22);
  border-bottom-color: transparent;
}

/* počítač: při scrollu se zmenší */
@media (min-width: 769px) {
  /* proti třesení: o kolik se hlavička zmenší, tolik místa se nahradí pod ní,
     takže výška stránky zůstane stejná */
  .site-header.is-stuck { margin-bottom: calc(var(--header-h) - 64px); }

  .site-header.is-stuck .header__inner {
    min-height: 64px;
    padding-block: 6px;
  }
  .site-header.is-stuck .brand img { width: clamp(150px, 13vw, 186px); }
  .site-header.is-stuck .nav__link { padding-block: 6px; }
  .site-header.is-stuck .icon-btn { width: 42px; height: 42px; }
}

/* přihlášený admin: hlavička pod černou lištou WordPressu, ne pod ní schovaná */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .site-header { top: 0; } }

/* ===== MOBILNÍ MENU – bílé, v designu webu ===== */
@media (max-width: 1080px) {
  .mobile-nav { background: #fff; color: var(--black); padding-top: 0; padding-bottom: 0; }

  /* horní lišta jako hlavička + červená linka */
  .mobile-nav__top {
    position: relative;
    width: auto !important;
    max-width: none !important;
    min-height: var(--header-h);
    margin: 0 calc(-1 * var(--gutter)) 14px;
    padding-inline: var(--gutter) !important;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav__top::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 90px; height: 2px; background: var(--red);
  }
  .mobile-nav__top .brand--plate img { width: 166px !important; padding: 0; background: none; border-radius: 0; }
  .mobile-nav__top .icon-btn { background: #fff; border-color: var(--line); color: var(--black); }
  .mobile-nav__top .icon-btn:hover { border-color: var(--black); color: var(--red); }

  /* položky */
  .mobile-nav__list { border-top: 0; }
  .mobile-nav__list li { border-bottom: 1px solid var(--line); position: relative; }
  .mobile-nav__list a {
    align-items: center;
    gap: 16px;
    padding: 18px 12px 18px 0 !important;
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: .06em;
    color: var(--black);
    transition: color .28s var(--ease), padding .3s var(--ease), background-color .3s var(--ease);
  }

  /* číslo ve zkoseném štítku */
  .mobile-nav__list .marker {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 22px;
    background: var(--light);
    color: var(--gray-600);
    font-size: .72rem !important;
    letter-spacing: .06em;
    transform: skewX(var(--skew));
    flex: none;
    transition: background-color .3s var(--ease), color .3s var(--ease);
  }

  /* šipka vpravo */
  .mobile-nav__list a::after {
    content: "";
    margin-left: auto;
    width: 9px; height: 9px;
    border-top: 2px solid var(--gray-300);
    border-right: 2px solid var(--gray-300);
    transform: rotate(45deg);
    flex: none;
    transition: border-color .3s var(--ease), transform .3s var(--ease);
  }

  /* aktuální stránka + dotek */
  .mobile-nav__list a[aria-current="page"],
  .mobile-nav__list a:hover {
    color: var(--red);
    background: var(--red-wash);
    padding-left: 14px !important;
  }
  .mobile-nav__list a[aria-current="page"] .marker,
  .mobile-nav__list a:hover .marker { background: var(--red); color: #fff; }
  .mobile-nav__list a[aria-current="page"]::after,
  .mobile-nav__list a:hover::after { border-color: var(--red); transform: translateX(-2px) rotate(45deg); }
  .mobile-nav__list li:has(a[aria-current="page"])::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--red); z-index: 1;
  }

  /* spodní část: tlačítko vždy vidět + jemná mřížka výpletu */
  .mobile-nav__foot {
    position: sticky;
    bottom: 0;
    margin-inline: calc(-1 * var(--gutter));
    padding: 18px var(--gutter) 22px;
    background:
      repeating-linear-gradient(to right, rgba(10,10,10,.045) 0 1px, transparent 1px 14px),
      repeating-linear-gradient(to bottom, rgba(10,10,10,.045) 0 1px, transparent 1px 14px),
      #fff;
    border-top: 1px solid var(--line);
  }
}

/* ============================================================
   INSTAGRAM – swipe s pevným zacvaknutím (mobil)
   ============================================================ */
@media (max-width:768px){
  [data-ig-grid],
  [data-ig-grid].is-rotator{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    overflow-y:hidden;
    height:auto !important;

    gap:12px;
    padding-inline:7%;
    scroll-padding-inline:7%;

    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  [data-ig-grid]::-webkit-scrollbar{display:none}

  [data-ig-grid] .ig-card{
    position:static !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;

    flex:0 0 86%;
    max-width:86%;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }

  .ig-dots{display:none !important}
}

/* ============================================================
   FILTRY – verze 2 (větší + mobilní panel)
   Nahrazuje předchozí blok "FILTRY V LEVÉM SLOUPCI".
   ============================================================ */

.ts-filters{margin-top:34px}
.ts-filters .ts-shop-sidebar__title{margin-bottom:16px}

.ts-filter{margin:0 0 26px}
.ts-filter__title{
  margin:0 0 12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(0,0,0,.5);
}
.ts-filter__list{list-style:none;margin:0;padding:0}
.ts-filter__list li{margin:0}

.ts-filter__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  font-size:16px;
  line-height:1.25;
  color:#111;
  text-decoration:none;
  transition:color .15s ease;
}
.ts-filter__item:hover{color:var(--red,#e2071a)}

.ts-filter__box{
  flex:0 0 auto;
  width:21px;height:21px;
  border:2px solid rgba(0,0,0,.3);
  background:#fff;
  position:relative;
  transition:background .15s ease,border-color .15s ease;
}
.ts-filter__item:hover .ts-filter__box{border-color:var(--red,#e2071a)}

.ts-filter__item.is-on{font-weight:700}
.ts-filter__item.is-on .ts-filter__box{
  background:var(--red,#e2071a);
  border-color:var(--red,#e2071a);
}
.ts-filter__item.is-on .ts-filter__box::after{
  content:"";
  position:absolute;
  left:6px;top:2px;
  width:5px;height:11px;
  border:solid #fff;
  border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}

.ts-filters__clear{
  display:inline-block;
  margin-top:6px;
  font-size:14px;
  font-weight:700;
  color:var(--red,#e2071a);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- mobilní panel ---------- */
.ts-filters-m{display:none}
.ts-filters-m__btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:48px;
  padding:0 16px;
  border:1px solid rgba(0,0,0,.16);
  background:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#111;
  cursor:pointer;
  list-style:none;
}
.ts-filters-m__btn::-webkit-details-marker{display:none}
.ts-filters-m__btn svg{width:18px;height:18px;flex:0 0 auto}
.ts-filters-m__chev{
  width:13px;height:13px;
  margin-left:auto;
  transition:transform .2s ease;
}
.ts-filters-m[open] .ts-filters-m__btn{
  border-color:#111;
  border-bottom-color:rgba(0,0,0,.12);
}
.ts-filters-m[open] .ts-filters-m__chev{transform:rotate(180deg)}

.ts-filters-m__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;height:22px;
  padding:0 6px;
  border-radius:999px;
  background:var(--red,#e2071a);
  color:#fff;
  font-size:12px;
  line-height:1;
}

.ts-filters--mobile{
  margin:0;
  padding:18px 16px 6px;
  border:1px solid #111;
  border-top:0;
  background:#fff;
}

@media (max-width:1024px){
  .ts-filters-m{display:block;margin:0 0 20px}
  .ts-filters--desktop{display:none}
  .ts-filter{margin-bottom:22px}
  .ts-filter__item{padding:11px 0;font-size:16px}
}
@media (min-width:1025px){
  .ts-filters-m{display:none}
}

/* ---------- filtr jako rozbalovací seznam (velikost gripu) ---------- */

.ts-filter--select{margin-bottom:24px}

.ts-filter__select{
  width:100%;
  min-height:46px;
  padding:0 38px 0 14px;
  border:1.5px solid rgba(0,0,0,.22);
  border-radius:0;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px;
  font-size:15px;
  font-weight:700;
  color:#111;
  line-height:1.2;
  cursor:pointer;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
.ts-filter__select:hover{border-color:#111}
.ts-filter__select:focus{
  outline:none;
  border-color:var(--red,#e2071a);
}

@media (max-width:1024px){
  .ts-filter__select{min-height:48px;font-size:16px}
}

/* ============================================================
   KONTAKT – box s mapou a adresou
   Nahrazuje všechny předchozí verze tohoto bloku.
   ============================================================ */

.map-placeholder.ts-map{
  height:auto;
  min-height:0;
  aspect-ratio:auto;
  overflow:visible;
}
.map-placeholder.ts-map .map-placeholder__inner{
  position:relative;
  display:block;
  height:auto;
  min-height:0;
  overflow:visible;
  padding:clamp(22px,2.8vw,34px);
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
}

/* mapa */
.ts-map__frame{
  position:relative;
  width:100%;
  aspect-ratio:3/2;
  max-height:380px;
  margin:18px 0 22px;
  border:1px solid rgba(0,0,0,.12);
  background:#eceff1;
  overflow:hidden;
}
.ts-map__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* adresa */
.map-placeholder.ts-map .map-place__addr{
  display:block;
  font-style:normal;
  font-size:clamp(20px,2.2vw,24px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:.005em;
  color:#111;
  margin:0 0 10px;
}

.ts-map__note{
  margin:0 0 24px;
  font-size:15px;
  line-height:1.7;
  color:rgba(0,0,0,.58);
  max-width:46ch;
}

/* tlačítka */
.map-placeholder.ts-map .btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0;
}
.map-placeholder.ts-map .btn-row .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 26px;
  font-size:13px;
}
.map-placeholder.ts-map .btn-row .btn--ghost{
  border:1.5px solid rgba(0,0,0,.25);
  background:transparent;
  color:#111;
}
.map-placeholder.ts-map .btn-row .btn--ghost:hover{
  border-color:#111;
  background:#111;
  color:#fff;
}

@media (max-width:600px){
  .map-placeholder.ts-map .map-placeholder__inner{padding:18px}
  .ts-map__frame{aspect-ratio:4/3;max-height:none;margin:14px 0 18px}
  .map-placeholder.ts-map .map-place__addr{font-size:19px}
  .ts-map__note{font-size:14px;margin-bottom:18px}
  .map-placeholder.ts-map .btn-row .btn{flex:1 1 100%}
}