/* style.css
 *
 * The only stylesheet for the whole site. Plain CSS, no framework.
 *
 * 0. Fonts: Barlow and Barlow Condensed, served from static/fonts/.
 * 1. Design tokens: every colour, font, size and radius as a variable.
 *    Change a value here and it changes everywhere.
 * 2. Base styles for plain HTML elements.
 * 3. Layout: page width, header, footer, two-column kit builder.
 * 4. Components: one class each (.section, .product-card, .swatch, ...).
 *
 * Used by: templates/base.html (every page). See /ukazka for a sample
 * of every component.
 */


/* ===== 0. Fonts ========================================================== */

/* The font files are stored on our own server (static/fonts/) instead of
 * loading them from Google Fonts. Loading from Google sends every visitor's
 * IP address to Google, which German courts have ruled breaches GDPR.
 *
 * Each weight comes in two files: "latin" (basic letters) and "latin-ext"
 * (Czech letters such as č, ř, ů). The browser only downloads the file it
 * needs, based on unicode-range. Licence: static/fonts/OFL.txt (free to use).
 */

@font-face {
  font-family: "Barlow";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow Condensed";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow Condensed";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===== 1. Design tokens ================================================== */

:root {
  --ground: #F3F4F0;       /* page background, warm off-white */
  --surface: #FFFFFF;      /* cards and sections */
  --surface-soft: #EEF0EA; /* image backgrounds, table header */
  --ink: #14181F;          /* main text, header bar, summary panel */
  --muted: #4E5663;        /* secondary text */
  --border: #D9DCD3;       /* card and section borders */
  --input-border: #C9CDC4;
  --accent: #17703A;       /* pitch green: links, selected states, checkboxes */
  --accent-dark: #0F4F28;  /* text on light green, link hover */
  --accent-soft: #E3F1E7;  /* selected tile background, "always available" badge */
  --accent-bright: #4CC07A;/* on dark backgrounds: total price, main button */
  --warn-bg: #FFF3E0;  --warn-text: #7A4300;  /* "available until", reminders */
  --error-bg: #FDECEC; --error-text: #8F1D1D; --error-border: #B42318;

  --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", Arial, sans-serif;

  --page-width: 1280px;
  --page-padding: 24px;
  --gap: 24px;

  --radius-section: 12px;
  --radius-card: 10px;
  --radius-button: 8px;
  --radius-input: 6px;

  --input-height: 44px;
  --button-height: 52px;
  --touch-target: 44px;
}

@media (max-width: 640px) {
  :root {
    --page-padding: 16px;
  }
}


/* ===== 2. Base =========================================================== */

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-dark);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 12px;
}

h1 {
  font-size: 52px;
  line-height: 1;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 22px;
  font-weight: 600;
}

@media (max-width: 640px) {
  h1 {
    font-size: 36px;
  }
}

p {
  margin: 0 0 12px;
}

/* Secondary text */
.muted {
  color: var(--muted);
  font-size: 15px;
}

/* The small green uppercase line above a page title */
.overline {
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Big numbers and prices */
.price {
  font-family: var(--font-heading);
  font-weight: 600;
  white-space: nowrap;
}

/* Visible only to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ===== 3. Layout ========================================================= */

.container {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

main {
  padding: 40px 0 64px;
}

.page-intro {
  margin-bottom: var(--gap);
}

.page-intro .lead {
  max-width: 720px;
  font-size: 18px;
  color: var(--muted);
}

/* --- Header --- */

.site-header {
  background: var(--ink);
  color: #FFFFFF;
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  min-height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.brand {
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.brand:hover {
  color: #FFFFFF;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  flex: 1;
}

.main-nav a,
.language-switch a {
  color: #FFFFFF;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  border-bottom: 3px solid transparent;
}

.main-nav a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.main-nav a.active {
  border-bottom-color: var(--accent-bright);
}

.language-switch {
  display: flex;
  gap: 4px;
}

.language-switch a {
  padding: 0 8px;
  font-weight: 600;
  opacity: 0.7;
}

.language-switch a.active {
  opacity: 1;
  border-bottom-color: var(--accent-bright);
}

/* --- Footer --- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
  color: var(--muted);
  font-size: 14px;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 40px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Two columns: steps on the left, summary panel on the right --- */

.builder-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap);
}

.builder-steps {
  flex: 1 1 600px;
  min-width: 0;          /* lets wide tables scroll instead of stretching */
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.builder-summary {
  flex: 0 1 360px;
  position: sticky;
  top: 16px;
}

/* On phones the summary goes below the steps and stops sticking. */
@media (max-width: 1000px) {
  .builder-summary {
    flex-basis: 100%;
    position: static;
  }
}

/* --- Grids that drop to one column on phones --- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px 20px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

/* Standard space below a block */
.block-gap {
  margin-bottom: var(--gap);
}

.footer-note {
  margin-top: 12px;
}


/* ===== 4. Components ===================================================== */

/* --- Section card --- */

.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-section);
  padding: 28px;
}

@media (max-width: 640px) {
  .section {
    padding: 20px 16px;
  }
}

/* --- Step links: pills under the page intro --- */

.step-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 var(--gap);
  padding: 0;
}

.step-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.step-links a:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* --- Product card --- */

.product-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
}

.product-card:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.product-card-image {
  position: relative;      /* lets the availability badge sit on the photo */
  height: 240px;
  background: var(--surface-soft);
  padding: 12px;
}

.product-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Supplier photos have a white background; "multiply" lets the soft
     grey box show through it instead of a white rectangle. */
  mix-blend-mode: multiply;
}

.product-card-body {
  padding: 14px 16px 16px;
}

.product-card-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-weight: 600;
}

.product-card-title .price {
  font-size: 20px;
}

.product-card-meta {
  color: var(--muted);
  font-size: 14px;
  margin-top: 2px;
}

/* --- Colour swatch --- */

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.swatch {
  display: inline-block;   /* also used on links (<a class="swatch">) */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--input-border);
  padding: 0;
  cursor: pointer;
  /* Background is set in the HTML. A two-colour swatch uses
     linear-gradient(135deg, A 50%, B 50%): a hard diagonal split,
     not a soft gradient. */
}

.swatch.selected,
.swatch[aria-pressed="true"] {
  border: 2px solid var(--ink);
  /* White ring, then green ring: the only shadow on the site. */
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--accent);
}

.swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

/* --- Availability badges --- */

.badge-limited,
.badge-always {
  display: inline-block;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 600;
}

.badge-limited {
  background: var(--warn-bg);
  color: var(--warn-text);
}

.badge-always {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* The spare-shirts tip inside a limited badge */
.badge-limited .tip {
  display: block;
  font-weight: 400;
  margin-top: 2px;
}

/* --- Option row: a whole clickable row with a checkbox --- */

.option-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  cursor: pointer;
}

.option-row:hover {
  border-color: var(--accent);
}

.option-row:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.option-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.option-row .option-text {
  flex: 1;
}

.option-row .option-text small {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.option-row .price {
  font-size: 20px;
}

/* --- Sponsor discount tile --- */

.discount-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.discount-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 110px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  text-align: center;
  cursor: pointer;
}

.discount-tile .amount {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.discount-tile:hover {
  border-color: var(--accent);
}

.discount-tile.selected,
.discount-tile[aria-pressed="true"] {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* --- Notice: reminders and warnings --- */

.notice {
  border-radius: var(--radius-card);
  padding: 12px 16px;
  font-size: 15px;
}

.notice-warn {
  background: var(--warn-bg);
  color: var(--warn-text);
}

.notice-error {
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-border);
}

/* --- Roster table --- */

.table-scroll {
  overflow-x: auto;          /* the table scrolls sideways on phones */
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.roster-table th {
  background: var(--surface-soft);
  text-align: left;
  font-weight: 600;
  padding: 10px 8px;
  white-space: nowrap;
}

.roster-table td {
  padding: 6px 8px;
  border-top: 1px solid var(--border);
}

.roster-table input,
.roster-table select {
  height: 40px;
  border-radius: 6px;
  min-width: 70px;
}

/* Player names need more room than sizes and numbers. */
.roster-table input[type="text"] {
  min-width: 160px;
}

.roster-table input.duplicate {
  border-color: var(--error-border);
  background: var(--error-bg);
}

/* --- Upload area --- */

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 16px;
  border: 2px dashed var(--input-border);
  border-radius: var(--radius-card);
  background: var(--surface-soft);
  text-align: center;
  cursor: pointer;
}

.upload-area:hover {
  border-color: var(--accent);
}

.upload-area svg {
  width: 32px;
  height: 32px;
  color: var(--accent);
}

/* --- Buttons --- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--button-height);
  padding: 0 24px;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button-primary {
  background: var(--accent-bright);
  color: var(--accent-dark);
  border: 1px solid var(--accent-bright);
}

.button-primary:hover {
  background: #5ACC86;
  color: var(--accent-dark);
}

.button-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.button-secondary:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

/* Secondary buttons on the dark summary panel */
.summary-panel .button-secondary {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.6);
}

.summary-panel .button-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.button-dashed {
  background: transparent;
  color: var(--accent);
  border: 2px dashed var(--accent);
}

.button-dashed:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.button-full {
  width: 100%;
}

/* --- Form fields --- */

.field label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
}

.field .hint {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  width: 100%;
  height: var(--input-height);
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;   /* 16px stops iPhones zooming in on focus */
}

textarea {
  height: auto;
  min-height: 110px;
  padding: 10px 12px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* --- Summary panel (dark, right column of the kit builder) --- */

.summary-panel {
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--radius-section);
  padding: 28px;
}

.summary-panel h2 {
  font-size: 28px;
}

.summary-lines {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.summary-lines li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 15px;
}

.summary-lines .discount {
  color: var(--accent-bright);
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 8px 0 12px;
}

.summary-total .price {
  color: var(--accent-bright);
  font-size: 44px;
  font-weight: 700;
}

.summary-note {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  margin-bottom: 20px;
}

/* --- Shirt diagram for print placement --- */

.shirt-diagram {
  max-width: 260px;
}

.shirt-diagram .shirt {
  fill: var(--surface-soft);
  stroke: var(--input-border);
  stroke-width: 2;
}

.shirt-diagram .print-area {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

.shirt-diagram text {
  font-family: var(--font-body);
  font-size: 12px;
  fill: var(--accent-dark);
}

/* --- Numbered "how it works" steps on the home page --- */

.how-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.how-steps .number {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

/* Small square button for icons, e.g. "remove player" in the roster */
.button-icon {
  min-height: 40px;
  min-width: var(--touch-target);
  padding: 0 12px;
}

/* Print options on the left, shirt diagram on the right */
.diagram-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap);
}

.diagram-options {
  flex: 1 1 320px;
}

/* ===== Phone adjustments ================================================== */

@media (max-width: 640px) {
  /* Brand and CZ/EN on the first line, the menu on its own line below. */
  .main-nav {
    order: 3;
    flex-basis: 100%;
  }

  .language-switch {
    margin-left: auto;
  }
}


/* ===== Catalogue ========================================================= */

/* Category pills above the filters */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.filter-pills a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--touch-target);
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.filter-pills a:hover {
  border-color: var(--accent);
}

.filter-pills a.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.filter-pills .count {
  color: var(--muted);
  font-size: 14px;
}

/* One compact bar with search and the other filters */
.filter-bar {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-section);
}

.filter-bar .button {
  min-height: var(--input-height);
}

@media (max-width: 1000px) {
  .filter-bar {
    grid-template-columns: 1fr 1fr;
  }

  .filter-search,
  .filter-actions {
    grid-column: 1 / -1;
  }

  .filter-actions .button {
    width: 100%;
  }
}

.results-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  color: var(--muted);
}

.price-footnote {
  margin-top: var(--gap);
}

/* Small colour dots on product cards */
.swatch-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}

.swatch-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--input-border);
}

.swatch-more {
  color: var(--muted);
  font-size: 13px;
  margin-left: 2px;
}

/* "1 059 Kč bez DPH" under a price, when VAT_PAYER is on */
.price-vat-note {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}


/* ===== Product page ====================================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 15px;
  color: var(--muted);
}

.product-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 40px;
}

.product-gallery {
  flex: 1 1 480px;
  min-width: 0;
}

.product-info {
  flex: 1 1 380px;
  min-width: 0;
}

.product-photo {
  aspect-ratio: 1 / 1;
  background: var(--surface-soft);
  border-radius: var(--radius-section);
  padding: 24px;
}

.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.product-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.product-thumbs a {
  display: block;
  width: 76px;
  height: 76px;
  padding: 6px;
  background: var(--surface-soft);
  border: 2px solid transparent;
  border-radius: var(--radius-card);
}

.product-thumbs a.selected {
  border-color: var(--accent);
}

.product-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.product-price .price {
  font-size: 40px;
}

.small-heading {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.small-heading .chosen {
  font-weight: 400;
  color: var(--muted);
}

/* Sizes shown as small boxes */
.size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.size-chips li {
  min-width: 48px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--surface);
  text-align: center;
  font-size: 15px;
}

.product-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap);
}

.detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 20px;
  margin: 0 0 12px;
}

.detail-list dt {
  font-weight: 600;
}

.detail-list dd {
  margin: 0;
}

.size-guide-image {
  margin-bottom: 16px;
  border-radius: var(--radius-input);
}

@media (max-width: 640px) {
  .product-details {
    grid-template-columns: 1fr;
  }
}

/* Shown instead of a photo when the supplier has none for a colour */
.no-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  color: var(--muted);
}


/* ===== Kit builder ======================================================= */

.subsection-title {
  margin-top: 28px;
}

/* One product slot: photo, name and colour, price, buttons */
.item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.item-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--surface-soft);
  border-radius: var(--radius-input);
  padding: 4px;
}

.item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.item-text {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.item-choice {
  color: var(--muted);
  font-size: 15px;
}

.item-badge:empty {
  display: none;
}

.item-badge .badge-limited {
  margin-top: 4px;
  font-size: 13px;
}

.item-price {
  font-size: 18px;
}

.item-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.item-buttons .button {
  min-height: var(--touch-target);
}

/* When the shirt is a shirt + shorts set, the shorts row only shows a note. */
.item-included-text {
  display: none;
  color: var(--muted);
}

.item-row.is-included .item-included-text {
  display: block;
}

.item-row.is-included .item-thumb,
.item-row.is-included .item-choice,
.item-row.is-included .item-badge,
.item-row.is-included .item-price,
.item-row.is-included .item-buttons {
  display: none;
}

/* A button that looks like a link, e.g. "Odebrat" */
.button-link {
  min-height: var(--touch-target);
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
}

/* Optional slots: everything except the on/off checkbox row (.slot-toggle)
   only shows when that checkbox is ticked. */
.optional-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.optional-slot:not(:has(> .slot-toggle input:checked)) > :not(.slot-toggle) {
  display: none;
}

.optional-slot > .field {
  max-width: 200px;
}

.spares-reminder {
  margin-top: 12px;
}

/* Sponsor discount tiles are checkboxes; the tile shows the ticked state. */
.discount-tile:has(input:checked) {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.discount-tile:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Shirt diagram: print areas only show when their option is ticked. */
/* Three drawings side by side, so the diagram gets its own line below
   the print options. */
.shirt-diagram {
  flex: 1 1 100%;
  max-width: 640px;
}

.shirt-diagram text.small {
  font-size: 10px;
}

.shirt-diagram .print-area-group {
  display: none;
}

.shirt-diagram .print-area-group.active {
  display: inline;
}

.shirt-diagram .big-number {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
}

.shirt-diagram .diagram-caption {
  fill: var(--muted);
  font-size: 13px;
}

/* --- Summary panel lines --- */

.summary-lines small {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
}

.summary-empty {
  color: rgba(255, 255, 255, 0.65);
}

.summary-vat {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
}

.summary-panel .button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Picker windows --- */

.picker {
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 24px;
  border: 0;
  border-radius: var(--radius-section);
  background: var(--ground);
  color: var(--ink);
}

.picker::backdrop {
  background: rgba(20, 24, 31, 0.6);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.picker-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.picker-photo {
  height: 180px;
  padding: 10px;
  background: var(--surface-soft);
}

.picker-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.picker-card-body {
  padding: 12px 14px 14px;
}

.picker-swatches {
  margin-top: 12px;
}

.match-label {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 600;
}

.match-label[hidden] {
  display: none;
}

/* A colour that matches the shirt gets a dashed green ring. */
.swatch.matches {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}

/* On phones the picker fills the screen. */
@media (max-width: 640px) {
  .picker {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 16px;
    border-radius: 0;
  }

  .picker-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Roster --- */

.size-guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 15px;
}

.roster-gk-cell {
  text-align: center;
}

.roster-gk-cell input {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

.roster-table select:disabled {
  background: var(--surface-soft);
  color: var(--muted);
}

/* "input.roster-number" (not just ".roster-number") so this wins over the
   wider player-name rule above. */
.roster-table input.roster-number {
  width: 80px;
  min-width: 80px;
}

.roster-table select {
  min-width: 100px;
}

.roster-empty {
  margin: 0;
  padding: 16px;
}

/* Count fields filled in from the roster */
input[readonly] {
  background: var(--surface-soft);
  color: var(--muted);
}

.counts-from-roster {
  margin-top: 8px;
}

.paste-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 12px 16px;
}

.paste-box summary {
  min-height: 32px;
  font-weight: 600;
  cursor: pointer;
}

.paste-box textarea {
  margin-bottom: 12px;
  font-family: ui-monospace, monospace;
  font-size: 14px;
}

/* --- Logo files --- */

.file-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
}

.file-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.upload-area:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Draft notice --- */

.draft-notice {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.draft-notice[hidden] {
  display: none;
}

.summary-clear {
  color: rgba(255, 255, 255, 0.75);
  justify-self: center;
}

/* "Soupisku doplníme později" ticked: hide the roster table and tools. */
#soupiska:has(.roster-later input:checked) .roster-content {
  display: none;
}

/* The spam trap field: moved off screen, so people never see it. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.error-list {
  margin: 6px 0;
  padding-left: 20px;
}

.confirmation-total {
  font-size: 32px;
  color: var(--accent);
}

/* A warning at the top of the summary panel, e.g. no goalkeeper kit chosen */
.summary-warning {
  background: var(--warn-bg);
  color: var(--warn-text);
  border-radius: var(--radius-input);
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
}

/* "= 13 hráčů v poli + 2 brankáři" under the team counts */
.team-split {
  margin: 8px 0 0;
  font-weight: 600;
  color: var(--accent-dark);
}


/* ===== Text pages (templates/pages/) ===================================== */

.prose {
  max-width: 820px;
}

.prose h2 {
  font-size: 26px;
  margin-top: 28px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.prose li {
  margin-bottom: 4px;
}

/* Text still to be filled in: [doplňte: ...] */
mark {
  background: var(--warn-bg);
  color: var(--warn-text);
  padding: 0 4px;
  border-radius: 4px;
}


/* ===== Announcement bar (top of every page) ============================== */

.announcement-bar {
  background: var(--accent-dark);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
}

.announcement-bar .container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 32px;
  padding-top: 7px;
  padding-bottom: 7px;
}

@media (max-width: 640px) {
  .announcement-bar span:not(:first-child) {
    display: none;
  }
}


/* ===== Home page ========================================================= */

.home-block {
  margin-bottom: 48px;
}

.block-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.block-heading h2 {
  margin: 0;
}

/* Small line icons (templates/_icons.html) */
.icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--accent);
}

/* --- Hero: text on the left, photo grid on the right --- */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  margin-bottom: 32px;
}

.hero-text {
  flex: 1 1 440px;
}

.hero-text .lead {
  font-size: 18px;
  color: var(--muted);
  max-width: 560px;
}

.check-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 500;
}

.check-list .icon {
  width: 20px;
  height: 20px;
}

.hero-grid {
  flex: 1 1 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hero-grid-item {
  aspect-ratio: 1 / 1;
  background: var(--surface-soft);
  border-radius: var(--radius-section);
  padding: 16px;
}

/* On phones, two hero photos are enough. */
@media (max-width: 640px) {
  .hero-grid-item:nth-child(n+3) {
    display: none;
  }
}

.hero-grid-item img,
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* --- Selling points strip --- */

.usp-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0 0 48px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-section);
}

.usp-strip li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.usp-strip strong {
  display: block;
}

.usp-strip span {
  color: var(--muted);
  font-size: 15px;
}

.usp-strip strong {
  color: var(--ink);
  font-size: 16px;
}

/* --- Category tiles --- */

.category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));   /* 2 per row on phones */
  gap: 16px;
}

.category-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--ink);
  text-decoration: none;
}

.category-tile:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.category-tile-photo {
  aspect-ratio: 1 / 1;
  margin-bottom: 8px;
  padding: 10px;
  background: var(--surface-soft);
  border-radius: var(--radius-input);
}

.category-tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.category-tile-name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
}

/* --- Sponsor discount banner (dark) --- */

.sponsor-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  padding: 36px;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--radius-section);
}

.sponsor-banner-amount {
  font-family: var(--font-heading);
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-bright);
}

.sponsor-banner-text {
  flex: 1 1 360px;
}

.sponsor-banner .overline {
  color: var(--accent-bright);
}

.sponsor-banner p {
  color: rgba(255, 255, 255, 0.8);
  max-width: 620px;
}

@media (max-width: 640px) {
  .sponsor-banner {
    padding: 24px 20px;
  }

  .sponsor-banner-amount {
    font-size: 64px;
  }
}

/* --- Two blocks side by side: another quote? + fan wear --- */

.home-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
}

/* --- FAQ --- */

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: 8px;
  padding: 0 18px;
}

.faq summary {
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}

.faq details p {
  color: var(--muted);
  margin: 0 0 14px;
}

/* "Dámské" / "Pánské" / "Unisex" in the top-right corner of product photos
   (catalogue cards and kit builder pickers). */
.picker-photo {
  position: relative;
}

.fit-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
}

/* "Nastavení cookies" in the footer: a button that looks like the other links */
.footer-cookie-link {
  min-height: 0;
  padding: 0;
  font-size: 14px;
}