/* Figma Prehled produktu V3 / Desktop. Navy from mockup, not stavtrans.cz. */

:root {
  --st-navy: #2a2981;
  --st-navy-2: #221f6a;
  --st-ink: #000;
  --st-muted: #687477;
  --st-line: #f0f2f3;
  --st-soft: #f0f2f3;
  --st-yellow: #ffae00;
  --st-orange: #fd7e14;
  --st-green: #11d100;
  --st-promo: #c4c4d3;
  --st-max: 1824px;
  --st-hero-h: 603px;
}

/* The stock theme's light blue, wherever a stock template still shows through:
   links, primary buttons, pagination and the plain breadcrumb. */
:root {
  --bs-primary: #2a2981;
  --bs-primary-rgb: 42, 41, 129;
  --bs-link-color: #2a2981;
  --bs-link-color-rgb: 42, 41, 129;
  --bs-link-hover-color: #221f6a;
  --bs-link-hover-color-rgb: 34, 31, 106;
}

.btn-primary {
  --bs-btn-bg: var(--st-navy);
  --bs-btn-border-color: var(--st-navy);
  --bs-btn-hover-bg: var(--st-navy-2);
  --bs-btn-hover-border-color: var(--st-navy-2);
  --bs-btn-active-bg: var(--st-navy-2);
  --bs-btn-active-border-color: var(--st-navy-2);
  --bs-btn-disabled-bg: var(--st-navy);
  --bs-btn-disabled-border-color: var(--st-navy);
  --bs-btn-focus-shadow-rgb: 42, 41, 129;
}

.pagination {
  --bs-pagination-active-bg: var(--st-navy);
  --bs-pagination-active-border-color: var(--st-navy);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(42, 41, 129, .25);
}

/* Same ink and weight as the site's own trail (.st-bc). */
.breadcrumb .breadcrumb-item a {
  color: #000;
  font-weight: 700;
  text-decoration: none;
}

.breadcrumb .breadcrumb-item:last-child a { font-weight: 400; }

html, body {
  background: #fff;
  color: var(--st-ink);
  font-family: Inter, Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { color: inherit; }

.st-buy .st-btn { min-width: 168px; height: 50px; border-radius: 0; }

#container {
  position: relative !important;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-bottom: 0 !important;
}
/* Short pages push the footer down to the bottom of the viewport. */
#container > main { flex: 1 0 auto; }
#alert {
  position: fixed !important;
  left: auto !important;
  right: 20px !important;
  top: auto !important;
  bottom: 20px !important;
  width: auto !important;
  max-width: 360px !important;
  margin: 0 !important;
  z-index: 4000;
}
#alert .alert {
  display: none !important;
}
#content, #column-left, #column-right { padding-bottom: 0 !important; }
.product-thumb { border: 0; height: auto; }

.st-wrap {
  width: min(var(--st-max), calc(100% - 96px));
  margin: 0 auto;
}

/* Announcement strips from the admin (Katalog > Horní lišta), above everything. */
.st-topbar {
  background: var(--st-navy);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

.st-topbar.is-alt { background: var(--st-navy-2); }

.st-topbar .st-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 0;
}

.st-topbar span { text-align: center; }

.st-topbar a,
.st-topbar a:hover {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

.st-topbar-close {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.st-promo {
  background: var(--st-promo);
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
}

.st-promo .st-wrap {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.st-promo a {
  color: var(--st-navy);
  text-decoration: none;
  font-weight: 400;
}

.st-promo a.is-strong {
  font-weight: 700;
  text-decoration: underline;
}

.st-header { background: #fff; }

.st-header-grid {
  display: grid;
  grid-template-columns: 366px minmax(0, 1fr) auto;
  grid-template-rows: 100px 60px;
  column-gap: 24px;
  align-items: center;
}

.st-logo {
  grid-row: 1;
  display: flex;
  align-items: center;
}

.st-logo a {
  text-decoration: none;
  line-height: 0;
}

.st-logo img {
  display: block;
  height: 100px;
  width: 366px;
  max-width: 100%;
  object-fit: contain;
}

.st-header-search-row {
  grid-column: 2 / 4;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
}

.st-header-nav-row {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  min-width: 0;
  border-top: 1px solid var(--st-line);
}

.st-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  max-width: 760px;
  margin-right: auto;
}

.st-search form {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  margin: 0;
  border: 0;
  background: #f3f4f6;
  border-radius: 262px;
  padding: 0 14px 0 20px;
}

.st-search input[name="search"] {
  flex: 1;
  height: 40px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  font-size: 14px;
  line-height: 24px;
  text-align: left;
}

.st-search button {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  padding: 0;
  flex-shrink: 0;
}

.st-search button img {
  display: block;
  width: 24px;
  height: 24px;
}

/* The browser outline is a rectangle inside the pill; show focus on the whole pill instead. */
.st-search input[name="search"]:focus {
  outline: none;
}

.st-search form:focus-within {
  box-shadow: 0 0 0 .25rem rgba(42, 41, 129, .25);
  /* Box shadows are dropped in forced-colors mode; this outline is then shown instead. */
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.st-search button:focus-visible {
  outline: 2px solid var(--st-navy);
  outline-offset: 2px;
  border-radius: 50%;
}

.st-contact,
.st-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--st-navy);
  text-decoration: none;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  white-space: nowrap;
}

.st-contact img {
  display: block;
  width: 19px;
  height: 15px;
  object-fit: contain;
}

.st-contact[href^="tel"] img {
  width: 13px;
  height: 19px;
}

.st-cart-link { color: #000; font-size: 16px; line-height: 24px; }

.st-cart-ico {
  position: relative;
  width: 24px;
  height: 24px;
  overflow: visible;
}

.st-cart-ico img {
  display: block;
  width: 24px;
  height: 24px;
}

.st-cart-badge {
  position: absolute;
  left: -4px;
  bottom: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--st-yellow);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.st-cart-box {
  position: relative;
  overflow: visible;
}
.st-header-search-row { overflow: visible; }
.st-cart-box .dropdown-toggle {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.st-cart-box .dropdown-toggle::after { display: none; }

#cart .dropdown-menu.st-mini-cart,
.st-mini-cart {
  width: 400px;
  min-width: 400px;
  max-width: calc(100vw - 24px);
  padding: 0;
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--st-line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(20, 22, 60, .16);
  overflow: hidden;
}
.st-mini-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 14px;
  background: var(--st-navy);
  color: #fff;
}
.st-mini-head strong {
  font-size: 16px;
  font-weight: 800;
}
.st-mini-head span {
  font-size: 13px;
  font-weight: 600;
  opacity: .8;
}
.st-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow: auto;
}
.st-mini-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--st-line);
}
.st-mini-thumb {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--st-soft);
}
.st-mini-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-mini-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.st-mini-main a {
  color: var(--st-navy);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  text-decoration: none;
}
.st-mini-main a:hover { text-decoration: underline; }
.st-mini-main span {
  display: block;
  color: var(--st-muted);
  font-size: 13px;
  line-height: 18px;
}
.st-mini-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.st-mini-side strong {
  color: var(--st-ink);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.st-mini-remove {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--st-muted);
  font-size: 20px;
  line-height: 1;
  padding: 0;
}
.st-mini-remove:hover { color: var(--st-navy); }
.st-mini-foot {
  padding: 14px 16px 16px;
  background: #f7f7f9;
}
.st-mini-sum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 12px;
  font-size: 14px;
}
.st-mini-sum strong {
  font-size: 18px;
  color: var(--st-navy);
}
.st-mini-foot .st-btn {
  width: 100%;
}
.st-mini-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.st-mini-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 24px 24px;
}
.st-mini-empty img {
  opacity: .35;
  margin-bottom: 4px;
}
.st-mini-empty p {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--st-navy);
}
.st-mini-empty span {
  color: var(--st-muted);
  font-size: 13px;
  line-height: 18px;
  margin-bottom: 8px;
}
.st-mini-empty .st-btn {
  min-width: 180px;
}

.st-nav { display: flex; align-items: center; width: 100%; }

.st-nav-list {
  display: flex;
  align-items: center;
  /* 11 items: 24px fits a 1280px laptop, wider screens get the old airy spacing back. */
  gap: clamp(22px, 5.2vw - 42px, 56px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-nav-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.st-nav-more { display: none; }
.st-nav-list > li > a,
.st-nav-list > li > .st-nav-item > a,
.st-nav-list > li > button.st-nav-link {
  background: none;
  border: 0;
  padding: 0;
  color: #000;
  text-decoration: none;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  white-space: nowrap;
}

.st-nav-list > li.is-current > a,
.st-nav-list > li.is-current > .st-nav-item > a,
.st-nav-list > li.is-current > button.st-nav-link { font-weight: 700; }

.st-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--st-line);
  background: #fff;
  margin-left: auto;
}

.st-toggle span,
.st-toggle span::before,
.st-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--st-navy);
  margin: 0 auto;
  position: relative;
}

.st-toggle span::before,
.st-toggle span::after { content: ""; position: absolute; left: 0; }
.st-toggle span::before { top: -6px; }
.st-toggle span::after { top: 6px; }
body.st-nav-open .st-toggle span { background: transparent; }
body.st-nav-open .st-toggle span::before { top: 0; transform: rotate(45deg); }
body.st-nav-open .st-toggle span::after { top: 0; transform: rotate(-45deg); }

.st-nav-list > li { position: relative; }

.st-nav-list > li.has-drop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}

.st-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--st-line);
  padding: 10px 0;
  z-index: 40;
}

.st-nav-list > li:hover > .st-drop,
.st-nav-list > li.is-open > .st-drop { display: block; }

.st-drop a {
  display: block;
  padding: 8px 16px;
  color: var(--st-ink);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.st-drop a:hover,
.st-drop a:focus-visible {
  background: var(--st-soft);
  color: var(--st-navy);
}

@media (min-width: 1600px) {
  .st-nav-list > li > a,
  .st-nav-list > li > .st-nav-item > a,
  .st-nav-list > li > button.st-nav-link { font-size: 18px; }
}

@media (max-width: 1199px) {
  .st-header-grid {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    padding: 12px 0;
    align-items: center;
  }
  .st-logo { grid-column: 1; grid-row: 1; min-width: 0; }
  .st-logo img { height: 56px; width: auto; max-width: 180px; }
  .st-header-search-row {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
  }
  .st-header-search-row .st-search,
  .st-header-search-row .st-contact { display: none; }
  .st-header-nav-row {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 8px;
    border-top: 0;
  }
  body.st-nav-open .st-header-nav-row { display: block; }
  .st-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 3;
    grid-row: 1;
    z-index: 5;
  }
  .st-search { max-width: none; margin: 0; }
  .st-nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .st-nav-list > li.has-drop::after { display: none; }
  .st-nav-list > li:hover > .st-drop { display: none; }
  .st-nav-list > li.is-open > .st-drop { display: block; }
  .st-nav-item {
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid var(--st-line);
  }
  .st-nav-list > li > a,
  .st-nav-list > li > .st-nav-item > a,
  .st-nav-list > li > button.st-nav-link {
    flex: 1 1 auto;
    width: auto;
    padding: 12px 0;
    border-bottom: 0;
    text-align: left;
  }
  .st-nav-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--st-navy);
    cursor: pointer;
  }
  .st-nav-more::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
  }
  .st-nav-list > li.is-open > .st-nav-item .st-nav-more::before {
    transform: rotate(-135deg);
    margin-top: 4px;
  }
  .st-drop {
    position: static;
    border: 0;
    border-bottom: 1px solid var(--st-line);
    padding: 0 0 8px 12px;
    background: #f7f7f9;
  }
}

@media (max-width: 767px) {
  .st-header-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .st-header-search-row {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: stretch;
  }
  .st-header-nav-row { grid-row: 3; }
  body.st-nav-open .st-header-search-row { display: flex; }
  body.st-nav-open .st-header-search-row .st-search { display: flex; flex: 1; }
  .st-toggle { grid-column: 2; }
}

.st-page { padding: 10px 0 0; }

.st-bc-bar {
  background: var(--st-soft);
  padding: 10px 0;
}

.st-bc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: #000;
}

.st-bc li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.st-bc a { color: inherit; text-decoration: none; font-weight: 700; }
.st-bc li.is-current a,
.st-bc li:last-child a { font-weight: 400; }
.st-bc.is-dark,
.st-bc.is-dark a { color: #000; }
.st-bc.is-dark li + li::before { filter: brightness(0); }
.st-bc li + li::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: url("../../../image/catalog/figma/ui/chevron.svg") center / 10px 6px no-repeat;
  transform: rotate(90deg);
  transform-origin: center;
  filter: brightness(0);
}

.st-hero-banner,
.st-hero-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  height: var(--st-hero-h);
  margin: 0 0 20px;
  overflow: hidden;
  border-radius: 12px;
  background: #e8eaee;
}

.st-hero-copy-box {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--st-navy);
  color: #fff;
  padding: 30px 40px 60px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 20px 0 0 20px;
  z-index: 1;
}

.st-hero-copy-box .st-bc,
.st-hero-copy-box .st-bc a,
.st-hero-copy-box .st-bc li {
  color: #fff;
}
.st-hero-copy-box .st-bc li + li::before {
  filter: none;
}
.st-account .st-bc,
.st-account .st-bc a {
  color: #000;
  margin-bottom: 24px;
}
.st-account .st-bc a { margin-bottom: 0; }
.st-page > .st-wrap > .st-bc {
  margin-bottom: 24px;
}

.st-hero-copy-box h1 {
  color: #fff;
  font-size: 50px;
  font-weight: 700;
  margin: 0;
  line-height: 58px;
  letter-spacing: -1px;
}

.st-hero-photo {
  display: block;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.st-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
}

.st-listing-copy h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -.4px;
  color: #000;
  margin: 0 0 22px;
}

.st-hero-text,
.st-hero-text p {
  color: #000;
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 24px;
  max-width: 1121px;
}

.st-listing {
  display: grid;
  grid-template-columns: 355px 1fr;
  gap: 13px;
}

.st-cats {
  padding: 30px 20px 20px 30px;
  border-radius: 12px;
}

.st-cat {
  position: relative;
  border-bottom: 1px solid var(--st-line);
}

.st-cat > a,
.st-cats > a {
  display: block;
  padding: 10px 28px 10px 0;
  color: #000;
  text-decoration: none;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.st-cat.is-active > a,
.st-cats a.is-active,
.st-cat > a:hover,
.st-cats a:hover {
  color: var(--st-navy);
  font-weight: 700;
}

.st-cat-plus {
  position: absolute;
  top: 16px;
  right: 0;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.st-cat-plus img {
  display: block;
  width: 12px;
  height: 12px;
}

.st-cat-kids { display: none; padding: 0 0 8px; }
.st-cat.is-open .st-cat-kids { display: block; }
.st-cat-kids a {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  color: #000;
  text-decoration: none;
}

.st-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 20px;
}

.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--st-line);
  background: #fff;
  border-radius: 5px;
  padding: 6px 15px;
  font-size: 12px;
  line-height: 16px;
  color: #000;
}

.st-chip select {
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 16px;
  padding: 0;
  appearance: none;
}

.st-chip img {
  width: 7px;
  height: 4px;
  transform: rotate(180deg);
}

.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}

.st-card,
.product-thumb {
  background: #fff;
  border: 1px solid var(--st-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 20px;
  gap: 20px;
  overflow: hidden;
  container-type: inline-size;
}

.st-card .image,
.product-thumb .image {
  position: relative;
  height: 327px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
}

.st-card .image a,
.product-thumb .image a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.st-card .image img,
.product-thumb .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.st-card .content,
.product-thumb .content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.st-card-cat {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: #000;
}

.st-badge {
  position: absolute;
  left: 0;
  bottom: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  padding: 0 18px;
  background: var(--st-yellow);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 148px;
  text-transform: uppercase;
}

/* The card's badges side by side where a lone .st-badge sits: its text badge first, then ABRA. */
.st-badges {
  position: absolute;
  left: 0;
  bottom: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.st-badges .st-badge { position: static; }

.st-badge-abra { background: var(--st-orange); }

.st-label {
  font-size: 12px;
  color: var(--st-muted);
}

.st-card h4,
.product-thumb h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin: 3px 0 0;
  color: #000;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
}

.st-card h4 a,
.product-thumb h4 a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: inherit;
  word-break: inherit;
}

.st-card .meta,
.product-thumb .meta {
  font-size: 14px;
  line-height: 24px;
  color: #000;
}

.st-card-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-top: auto;
}

.st-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.st-card-row form {
  margin: 0;
  flex: 0 0 auto;
}

.st-card-row .st-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.st-stock {
  color: var(--st-green);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.st-stock.is-out { color: var(--st-muted); }

.st-inquiry {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--st-muted);
}

.st-inquiry a { color: var(--st-navy); font-weight: 600; text-decoration: underline; }

.st-card .price,
.product-thumb .price {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.24px;
  color: var(--st-navy);
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.st-card .price,
.st-card .price-new,
.product-thumb .price,
.product-thumb .price-new {
  white-space: nowrap;
}

.st-card .price small,
.product-thumb .price small {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--st-muted);
}

.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  background: var(--st-navy);
  color: #fff;
  border: 0;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.st-btn:hover { background: var(--st-navy-2); color: #fff; }

@container (max-width: 260px) {
  .st-card-row {
    flex-direction: column;
    align-items: stretch;
  }
  .st-card-row .price,
  .st-card-row .st-inquiry,
  .st-card-row form,
  .st-card-row .st-btn { width: 100%; }
  .st-card-row form .st-btn { width: 100%; }
}
a.st-btn.st-btn-ghost,
.st-btn.st-btn-ghost {
  background: #fff !important;
  color: var(--st-navy) !important;
  -webkit-text-fill-color: var(--st-navy);
  border: 1px solid var(--st-navy);
}
a.st-btn.st-btn-ghost:hover,
.st-btn.st-btn-ghost:hover {
  background: var(--st-soft) !important;
  color: var(--st-navy) !important;
  -webkit-text-fill-color: var(--st-navy);
}

.st-pager { margin-top: 24px; }

.st-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin: 48px calc(50% - 50vw) 0;
  padding: 112px max(48px, calc((100vw - var(--st-max)) / 2));
  background: var(--st-soft);
}

.st-cta-card {
  min-height: 635px;
  padding: clamp(48px, 7vw, 126px) clamp(32px, 8vw, 153px);
  border-radius: 12px;
}

.st-cta-card.is-navy {
  background: var(--st-navy);
  color: #fff;
}

.st-cta-card.is-navy h2 { color: #fff; }

.st-cta-card.is-light {
  background: #fff;
  border: 0;
}

.st-cta-card.is-light h2 { color: var(--st-navy); }
.st-cta-card.is-light a { color: inherit; text-decoration: underline; }

.st-cta-card h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -.4px;
  margin: 0 0 40px;
}

.st-cta-card > p {
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 40px;
}

.st-cta-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; }
.st-cta-card li {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.2px;
}

.st-cta-card li img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.st-cta-row {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  margin: 0 0 40px;
}

.st-cta-row:last-child { margin-bottom: 0; }

.st-cta-row img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.st-cta-row span {
  display: block;
  font-size: 18px;
  line-height: 28px;
  color: #000;
}

.st-cta-row strong,
.st-cta-row a {
  display: inline;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.2px;
  color: #000;
  text-decoration: none;
}

.st-cta-row a { text-decoration: underline; }

#product-info.st-product {
  width: 100%;
  margin: 0;
  padding: 0;
}

.st-product-top {
  background: #f8f8f8;
  padding: 24px 0 48px;
}

.st-product-top .st-bc { margin-bottom: 28px; }

.st-product-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.st-product-media {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 10px 20px 20px;
  min-width: 0;
}

.st-gallery-main {
  position: relative;
  height: 565px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.st-gallery-current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.st-gallery-current img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.st-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  z-index: 2;
}

.st-gallery-nav img {
  display: block;
  width: 26px;
  height: 22px;
}

.st-gallery-nav.is-prev { left: 20px; }
.st-gallery-nav.is-next { right: 20px; }

.st-thumbs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.st-thumb {
  flex: 0 1 106px;
  min-width: 0;
  aspect-ratio: 106 / 89;
  padding: 0;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}

.st-thumb.is-on { border-color: var(--st-navy); }

.st-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.st-product-info {
  padding: 20px 0 0;
}

.st-product-info h1 {
  font-size: 40px;
  font-weight: 700;
  color: #181c8f;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  line-height: 48px;
  letter-spacing: -.4px;
}

.st-product-info .list-unstyled,
.st-product-info .rating,
.st-product-info .btn-group { display: none; }

.st-lead {
  color: #000;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 8px;
  max-width: 600px;
}

.st-more {
  display: inline-block;
  margin-bottom: 24px;
  color: #000;
  font-size: 16px;
  line-height: 24px;
  text-decoration: underline;
}

.st-price-box {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  padding: 24px 0;
  margin: 0 0 20px;
}

.st-price-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
}

.st-price-box .lbl {
  display: block;
  font-size: 14px;
  line-height: 24px;
  color: #000;
}

.st-price-box .val {
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.24px;
  color: var(--st-navy);
  line-height: 1.2;
}

.st-price-box .val small {
  font-size: 16px;
  font-weight: 400;
}

.st-price-box .sub {
  display: block;
  font-size: 16px;
  line-height: 24px;
  color: #000;
}

.st-price-box .st-inquiry {
  font-size: 18px;
  line-height: 26px;
  color: #000;
}

.st-buy {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  max-width: none;
  height: auto;
}

.st-qty {
  display: flex;
  align-items: center;
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 0;
  height: 50px;
  padding: 0 10px 0 6px;
  width: 142px;
  min-width: 142px;
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
}

.st-qty button {
  width: 28px;
  height: 50px;
  border: 0;
  background: transparent;
  color: #687477;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.st-qty input {
  width: 36px;
  height: 50px;
  border: 0;
  text-align: center;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
}

.st-unit {
  color: #687477;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  margin-left: auto;
  padding-left: 12px;
}

.st-btn-buy,
.st-buy .st-btn {
  min-width: 203px;
  height: 50px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 700;
}

.st-product-info form { margin: 0 0 20px; padding: 0; border: 0; }

.st-meta {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0 12px;
  font-size: 14px;
  line-height: 24px;
  color: #000;
}

.st-meta > div { display: contents; }
.st-meta span { color: #000; }
.st-meta strong { color: #000; font-weight: 400; }
.st-meta a { color: #000; text-decoration: underline; }

.st-tabs-bar {
  background: #f8f8f8;
}

.st-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0;
  border-bottom: 0;
  background: transparent;
}

.st-tabs .nav-item { margin: 0; }
.st-tabs .nav-link {
  background: #fff;
  color: var(--st-muted);
  border: 0;
  border-radius: 0;
  padding: 12px 28px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}
.st-tabs .nav-item:first-child .nav-link { border-radius: 12px 0 0 0; }
.st-tabs .nav-item:last-child .nav-link { border-radius: 0 12px 0 0; }

.st-tabs .nav-link.active {
  background: var(--st-navy);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.st-tab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.st-tab-grid h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.24px;
  margin: 0 0 20px;
  color: #000;
}

.st-tab-grid p,
.st-tab-grid li {
  font-size: 16px;
  line-height: 24px;
  color: #000;
}

.st-params { width: 100%; }
.st-params td {
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 16px;
  line-height: 24px;
}
.st-params td:last-child { font-weight: 700; text-align: right; }

.st-rail {
  padding: 80px 0;
  margin: 0;
  border-radius: 0;
}

.st-rail.is-soft { background: var(--st-soft); }
.st-rail.is-white { background: #fff; }

.st-rail h3 {
  width: 100%;
  margin: 0 0 40px;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -.4px;
  color: #000;
  text-align: center;
}

.st-related-grid {
  width: 100%;
  margin: 0;
  display: grid;
  /* auto-fit drops the empty tracks, so a short row of cards fills the width. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

footer,
.st-footer {
  background: var(--st-navy);
  color: #fff;
  padding: 157px 0 0;
}

.st-footer a { color: #fff; text-decoration: none; }
.st-footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(4, minmax(140px, 1fr));
  gap: 40px 28px;
  padding: 0 0 48px;
}
.st-footer h5 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  margin: 0 0 10px;
}
.st-footer ul { list-style: none; margin: 0; padding: 0; }
.st-footer li {
  margin: 0;
  font-size: 14px;
  line-height: 24px;
  color: #fff;
}
.st-footer .st-footer-brand .st-logo img {
  height: 48px;
  width: 244px;
  object-fit: contain;
}
.st-social {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
.st-social a {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.st-footer-more {
  display: inline-block;
  margin-top: 28px;
  font-size: 14px;
  line-height: 24px;
  text-decoration: underline !important;
}

.st-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin: 0;
  padding: 0 0 31px;
  font-size: 12px;
  line-height: 16px;
}

@media (max-width: 1199px) {
  .st-listing, .st-product-split, .st-cta, .st-hero-split, .st-hero-banner, .st-tab-grid { grid-template-columns: 1fr; }
  .st-gallery-main { height: 360px; }
  .st-tabs { justify-content: flex-start; overflow-x: auto; }
  .st-product-info h1 { font-size: 28px; line-height: 34px; }
  .st-rail h3 { font-size: 28px; line-height: 34px; }
  .st-hero-banner, .st-hero-split { height: 360px; }
  .st-hero-copy-box { width: 100%; height: 100%; border-radius: 12px; padding: 28px 32px; }
  .st-hero-copy-box h1 { font-size: 36px; line-height: 42px; }
  .st-listing-copy h2, .st-cta-card h2 { font-size: 28px; line-height: 34px; }
  .st-cta { margin: 48px 0 0; padding: 40px 0; }
  .st-cta-card { min-height: 0; padding: 40px 32px; }
  .st-card .image, .product-thumb .image { height: 220px; }
  .st-footer { padding-top: 56px; }
  .st-footer-grid { grid-template-columns: 1fr 1fr; padding-left: 0; padding-right: 0; }
  .st-legal { padding-left: 0; padding-right: 0; }
}

@media (max-width: 767px) {
  .st-wrap { width: min(var(--st-max), calc(100% - 32px)); }
  .st-footer-grid { grid-template-columns: 1fr; }
  .st-grid { grid-template-columns: 1fr; }
}

.st-rental { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.st-rental label { font-size: 13px; font-weight: 700; }
.st-rental input[type="date"],
.st-rental input[type="number"],
.st-rental select,
.st-rental textarea {
  height: 40px;
  border: 1px solid var(--st-line);
  border-radius: 6px;
  padding: 0 10px;
  width: 100%;
}
.st-rental textarea { height: 80px; padding: 8px 10px; }
.st-rental-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-pickup { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.st-date-wrap { position: relative; max-width: 399px; z-index: 8; }
.st-date-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  text-align: left;
}
.st-date-field img {
  width: 10px;
  height: 6px;
  filter: brightness(0);
  transform: rotate(180deg);
}
.st-date-field.is-open img { transform: rotate(0deg); }
.st-cal-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: 640px;
  max-width: calc(100vw - 32px);
  padding: 0 12px 12px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.st-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -12px 12px;
  padding: 8px 10px;
  background: var(--st-navy);
  color: #fff;
}
.st-cal-nav button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.35);
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
}
.st-cal-nav button:disabled { opacity: .35; }
.st-cal-months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.st-cal-month-title {
  text-align: center;
  font-weight: 700;
  color: var(--st-navy);
  margin: 0 0 8px;
  text-transform: capitalize;
}
.st-cal-head,
.st-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.st-cal-head { margin-bottom: 6px; }
.st-cal-head span {
  font-size: 11px;
  font-weight: 700;
  color: var(--st-muted);
  text-align: center;
}
.st-cal-empty { height: 32px; }
.st-cal-day {
  height: 32px;
  border: 1px solid var(--st-line);
  background: #fff;
  border-radius: 0;
  font-size: 12px;
}
.st-cal-day.is-blocked { background: #f8d7da; color: #842029; text-decoration: line-through; }
.st-cal-day.is-on { background: var(--st-navy); color: #fff; }
.st-cal-day.is-in { background: #3d3c96; color: #fff; }
.st-cal-day.is-hover-on { background: #9b9ad4; color: #fff; }
.st-cal-day.is-hover-in { background: #dddcf3; color: var(--st-navy); }
.st-rental-total { font-size: 20px; font-weight: 800; color: var(--st-navy); }
.st-rental-rates { list-style: none; margin: 8px 0 0; padding: 0; font-size: 16px; line-height: 24px; color: #000; }
.st-rental-rates strong { color: var(--st-navy); }
.st-rental .st-rental-protection { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 400; cursor: pointer; }
.st-rental-protection input { width: 18px; height: 18px; accent-color: var(--st-navy); }
.st-rental .st-buy { max-width: none; }
.st-open, .st-deposit-note { font-size: 13px; color: var(--st-muted); margin: 0; }
#form-rental-cart .st-open, #form-shop-cart .st-open,
#form-rental-cart .st-deposit-note, #form-shop-cart .st-deposit-note { font-size: 16px; line-height: 24px; }
#form-rental-cart .st-step[data-step="2"] #input-location-id, #form-shop-cart .st-step[data-step="2"] #input-location-id { margin-bottom: 0; }
#form-rental-cart .st-step[data-step="2"] #st-open, #form-shop-cart .st-step[data-step="2"] #st-open { margin: 4px 0 0; }
#form-rental-cart .st-step[data-step="2"] #st-open:empty, #form-shop-cart .st-step[data-step="2"] #st-open:empty { display: none; margin: 0; }
#form-rental-cart .st-step[data-step="2"] h3:not(:first-child), #form-shop-cart .st-step[data-step="2"] h3:not(:first-child) { margin-top: 8px; }
#form-rental-cart .st-step[data-step="2"] .st-deposit-note, #form-shop-cart .st-step[data-step="2"] .st-deposit-note { margin: 5px 0 28px; }

.st-account {
  width: min(860px, calc(100% - 48px));
  margin: 32px auto 56px;
}
.st-account h1 { font-size: 32px; margin: 0 0 8px; color: var(--st-navy); }
.st-account .st-lead { color: var(--st-muted); margin: 0 0 24px; }
.st-account form,
.st-account-card {
  background: #fff;
  border: 1px solid var(--st-line);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.st-account label { font-size: 13px; font-weight: 700; }
.st-account input[type="text"],
.st-account input[type="email"],
.st-account input[type="tel"],
.st-account input[type="password"],
.st-account select {
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 0;
  padding: 0 14px;
  background: #f5f5f5;
  width: 100%;
  box-sizing: border-box;
}
.st-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-type { display: flex; gap: 16px; flex-wrap: wrap; }
.st-account .st-btn { height: 44px; }
.st-register form > .st-btn { align-self: flex-end; min-width: 180px; }
.st-register fieldset {
  border: 0;
  margin: 0 0 8px;
  padding: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.st-register legend {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 12px 0 4px;
  padding: 0;
  color: #111;
}
.st-reg-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: center;
}
.st-reg-row > .invalid-feedback { grid-column: 2; }
.st-reg-row.required > label::before {
  content: "*";
  color: #c00;
  margin-right: 4px;
}
.st-reg-row label {
  margin: 0;
  font-weight: 400;
  color: #111;
}
.st-reg-ico {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.st-ares-btn,
#st-checkout .st-ares-btn {
  min-height: 40px;
  padding: 7px 18px;
  border: 0;
  background: var(--st-navy, #2a2981);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
}
.st-agree { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.st-newsletter-note {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--st-muted);
}
.st-success {
  text-align: center;
}
.st-success-text {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 24px;
  color: #111;
}
.st-success .st-btn { margin: 0 auto; }
.st-done-wrap { padding-bottom: 40px; }
.st-done-thanks {
  text-align: center;
  margin: 24px 0 40px;
}
.st-done-thanks h1 {
  margin: 0 0 12px;
  font-size: 36px;
  color: var(--st-navy);
}
.st-done-thanks p {
  margin: 0 0 24px;
  font-size: 16px;
  color: var(--st-muted);
}
.st-done-thanks .st-done-actions {
  justify-content: center;
}
@media (max-width: 700px) {
  .st-reg-row,
  .st-reg-ico { grid-template-columns: 1fr; }
}
.st-account a { color: var(--st-navy); }
.st-account a.st-btn,
a.st-btn {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  background: var(--st-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.st-toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}
.st-toast {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.st-toast-msg { display: block; }
.st-toast.is-ok { background: #2e7d32; }
.st-toast.is-err { background: #c62828; }
.st-toast.is-info { background: var(--st-navy); }
.st-toast-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #16325a;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.st-toast.is-ok .st-toast-go { color: #1b5e20; }
.st-toast-go:hover { background: #f3f6f3; color: #16325a; }

.st-switch {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5000;
}
.st-switch.is-on { display: block; }
.st-switch-bg {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 40, .45);
}
.st-switch-box {
  position: relative;
  width: min(520px, calc(100% - 32px));
  margin: 18vh auto 0;
  padding: 28px 28px 24px;
  background: #fff;
  border: 1px solid var(--st-line);
  box-shadow: 0 18px 40px rgba(20, 24, 40, .18);
}
.st-switch-msg {
  margin: 0 0 20px;
  color: var(--st-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}
.st-switch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.st-switch-actions .st-btn,
.st-switch-actions .st-btn-ghost {
  min-height: 46px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.st-suggest {
  position: relative;
}
.st-suggest-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid var(--st-line);
  border-radius: 8px;
  max-height: 220px;
  overflow: auto;
  z-index: 20;
}
.st-suggest-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: #fff;
  font-size: 13px;
}
.st-suggest-list button:hover { background: var(--st-soft); }
.st-rental-range { font-size: 13px; color: var(--st-muted); }

.st-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin: 0 0 8px;
}
.st-checkout.is-recap {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}
.st-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column: 1 / -1;
  gap: 0;
  list-style: none;
  margin: 0 0 0;
  padding: 0;
  border: 1px solid var(--st-line);
  background: #fff;
}
.st-steps li { margin: 0; }
.st-steps button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 72px;
  padding: 12px 16px;
  border: 0;
  border-right: 1px solid var(--st-line);
  background: #fff;
  color: var(--st-muted);
  text-align: left;
}
.st-steps li:last-child button { border-right: 0; }
.st-steps em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.st-steps span { font-size: 16px; font-weight: 700; color: var(--st-ink); }
.st-steps li.is-on button {
  background: var(--st-navy);
  color: #fff;
}
.st-steps li.is-on span { color: #fff; }
.st-steps li.is-done button { background: #eef0fb; color: var(--st-navy); }
.st-steps li.is-done span { color: var(--st-navy); }
.st-step { display: none; }
.st-step.is-on { display: block; }
.st-step-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.st-lines-head,
.st-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.4fr) 170px 70px 130px 40px;
  gap: 16px;
  align-items: center;
}
.st-lines-head {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--st-line);
  color: var(--st-muted);
  font-size: 13px;
  font-weight: 700;
}
.st-line {
  padding: 12px 0;
  border-bottom: 1px solid var(--st-line);
}
.st-line-thumb {
  display: block;
  width: 64px;
  height: 64px;
  background: var(--st-soft);
  overflow: hidden;
}
.st-line-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-line-name a {
  color: var(--st-navy);
  font-weight: 700;
  text-decoration: none;
}
.st-line-name a:hover { text-decoration: underline; }
.st-line-name small {
  display: block;
  color: var(--st-muted);
  font-size: 13px;
}
.st-line-price { font-weight: 700; text-align: right; }
.st-line-qty,
.st-line-term { color: var(--st-ink); }
.st-auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.st-auth-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--st-line);
  background: var(--st-soft);
}
.st-auth-card p { margin: 0; color: var(--st-muted); }
.st-profile-fields {
  display: grid;
  gap: 22px;
  margin: 4px 0 12px;
}
.st-profile-fields .st-field { display: grid; gap: 8px; }
.st-profile-fields .st-field-label { margin: 0; }
.st-recap {
  display: grid;
  gap: 12px;
  margin: 36px 0 8px;
}
.st-recap div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
}
.st-recap dt { margin: 0; color: var(--st-muted); font-weight: 700; }
.st-recap dd { margin: 0; }
.st-checkout-empty {
  padding: 8px 0 24px;
}
.st-check-main,
#form-rental-cart,
#form-shop-cart {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 24px;
}
.st-check-card {
  background: #fff;
  border: 1px solid var(--st-line);
  border-radius: 12px;
  padding: 22px 24px 24px;
}
.st-check-card h3 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 800;
  color: var(--st-ink);
}
.st-step[data-step="3"].st-check-card { padding: 28px 28px 32px; }
.st-check-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.st-check-table th,
.st-check-table td {
  border-bottom: 1px solid var(--st-line);
  padding: 12px 8px;
  text-align: left;
  vertical-align: middle;
  font-size: 16px;
}
.st-check-table th {
  font-size: 16px;
  font-weight: 700;
  color: var(--st-muted);
  text-transform: none;
  letter-spacing: 0;
}
.st-check-table td a {
  color: var(--st-navy);
  font-weight: 700;
  text-decoration: none;
}
.st-check-table td a:hover { text-decoration: underline; }
.st-field-label {
  display: block;
  margin: 12px 0 6px;
  font-size: 16px;
  font-weight: 700;
}
.st-checkout input[type="text"],
.st-checkout input[type="email"],
.st-checkout input[type="tel"],
.st-checkout select,
.st-checkout textarea {
  width: 100%;
  min-height: 52px;
  border: 1px solid #ddd;
  background: #f7f7f7;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
}
.st-checkout textarea { min-height: 88px; resize: vertical; }
.st-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.st-choice-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--st-line);
  border-radius: 10px;
  background: var(--st-soft);
  font-weight: 500;
  cursor: pointer;
}
.st-choice-card:has(input:checked) {
  border-color: var(--st-navy);
  background: #eef0fb;
}
.st-choice-card strong { display: block; font-size: 16px; color: var(--st-ink); }
.st-choice-card small { display: block; margin-top: 4px; color: var(--st-muted); font-size: 16px; }
.st-choice-card input { margin-top: 3px; accent-color: var(--st-navy); }
.st-btn-wide {
  height: 48px;
  width: 100%;
  max-width: 420px;
  font-size: 15px;
  border-radius: 8px;
}
.st-step[data-step="4"] .st-step-nav {
  margin-top: 28px;
  align-items: stretch;
}
.st-step[data-step="4"] .st-step-nav .st-btn {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  height: 48px;
  min-height: 48px;
  font-size: 15px;
  border-radius: 8px;
}
.st-remove {
  width: 32px;
  height: 32px;
  border: 1px solid var(--st-line);
  background: #fff;
  border-radius: 50%;
  color: var(--st-muted);
  font-size: 20px;
  line-height: 1;
}
.st-remove:hover { border-color: var(--st-navy); color: var(--st-navy); }
.st-doc {
  border: 1px solid var(--st-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  font-size: 16px;
  position: sticky;
  top: 16px;
}
.st-doc.is-page {
  position: static;
  max-width: 720px;
  margin: 0 auto 40px;
}
.st-done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 20px 8px;
}
.st-doc-bar {
  background: var(--st-navy);
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  line-height: 28px;
  padding: 16px 20px;
}
.st-doc-body {
  padding: 4px 0 16px;
  font-size: 16px;
  line-height: 24px;
}
.st-doc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 20px 0;
}
.st-doc-grid strong,
.st-doc-block strong {
  display: block;
  color: var(--st-navy);
  font-size: 20px;
  line-height: 26px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 8px;
}
.st-doc-grid p,
.st-doc-block,
.st-doc-tot,
.st-doc-hours { margin: 16px 20px; }
.st-doc-grid p,
.st-doc-block p,
.st-doc-hours p {
  color: var(--st-ink);
  font-size: 16px;
  line-height: 24px;
  margin: 0;
}
.st-doc-hours p + p { margin-top: 2px; }
.st-doc-place { margin-top: 12px !important; }
.st-doc table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.st-doc th,
.st-doc td {
  border-bottom: 1px solid var(--st-line);
  padding: 8px 6px;
  text-align: left;
  font-size: 16px;
}
.st-doc th {
  color: var(--st-muted);
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
}
.st-doc-tot {
  text-align: right;
  font-size: 16px;
  line-height: 24px;
  padding-top: 4px;
}
.st-doc-tot strong { color: var(--st-navy); font-size: 20px; }
@media (max-width: 900px) {
  .st-checkout,
  .st-checkout.is-recap,
  .st-choice,
  .st-auth-split,
  .st-cal-months,
  .st-steps { grid-template-columns: 1fr; }
  .st-steps button { border-right: 0; border-bottom: 1px solid var(--st-line); min-height: 56px; }
  .st-steps li:last-child button { border-bottom: 0; }
  .st-lines-head,
  .st-line { grid-template-columns: 56px 1fr auto; }
  .st-lines-head span:nth-child(n+3),
  .st-line-term { display: none; }
  .st-line-qty { grid-column: 3; }
  .st-line-price { grid-column: 3; text-align: right; }
  .st-line-name { grid-column: 2; }
  .st-doc { position: static; }
  .st-btn-wide { max-width: none; }
  .st-recap div { grid-template-columns: 1fr; gap: 2px; }
}

.st-ck { margin: 8px 0 40px; }
.st-ck-head { margin-bottom: 8px; }
.st-ck-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  border-bottom: 1px solid #e6e6e6;
}
.st-ck-steps li { margin: 0; }
.st-ck-steps button {
  width: 100%;
  padding: 14px 8px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}
.st-ck-steps li.is-on button {
  border-bottom-color: #111;
  font-weight: 700;
}
.st-ck-steps li.is-done button { color: #555; }
.st-ck-layout {
  align-items: start;
}
.st-ck-table-wrap { overflow-x: auto; }
.st-ck-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}
.st-ck-table th,
.st-ck-table td {
  padding: 16px 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}
.st-ck-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #222;
}
.st-ck-table td:nth-child(n+6) { white-space: nowrap; }
.st-ck-thumb {
  display: block;
  width: 56px;
  height: 40px;
  background: #f3f3f3;
  overflow: hidden;
}
.st-ck-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-ck-name {
  color: #111;
  font-weight: 600;
  text-decoration: none;
}
.st-ck-name:hover { text-decoration: underline; }
.st-ck-stock {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.st-ck-stock.is-ok { color: var(--st-green); }
.st-ck-stock.is-out { color: #c62828; }
.st-ck-qty {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  font-weight: 600;
}
.st-ck-table-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
.st-ck-edit {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid #000;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0;
}
.st-ck-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.st-ck-cols h3,
.st-ck-aside h3,
.st-ck .st-step h3 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 600;
}
.st-ck-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  cursor: pointer;
}
.st-ck-opt-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.st-ck-opt input { accent-color: #111; }
.st-ck-extra { margin-top: 18px; }
.st-ck-box {
  padding: 16px 0 8px;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}
.st-ck-box strong { display: block; margin-bottom: 6px; }
.st-ck-recap { display: block; }
.st-ck-aside {
  background: #f4f5f6;
  padding: 28px 24px 24px;
}
.st-ck-mini { display: grid; gap: 16px; margin-bottom: 22px; }
.st-ck-mini-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.st-ck-mini-row strong { display: block; font-size: 13px; }
.st-ck-mini-row small { color: #687477; }
.st-ck-sum { margin: 0; }
.st-ck-legal {
  margin: 16px 0 18px;
  color: #687477;
  font-size: 13px;
  line-height: 1.4;
}
.st-ck-cta {
  width: 100%;
  min-height: 48px;
  border: 0;
  background: var(--st-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.st-ck-cta:hover { background: var(--st-navy-2); }
.st-ck-foot { margin-top: 28px; }
.st-ck .st-field-label { margin-top: 16px; font-size: 13px; }
.st-ck input[type="text"],
.st-ck input[type="email"],
.st-ck input[type="tel"],
.st-ck select,
.st-ck textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 0;
  min-height: 44px;
  padding: 10px 12px 10px 10px;
}
@media (max-width: 1199px) {
  .st-ck-layout,
  .st-ck-cols { grid-template-columns: 1fr; }
  .st-ck-aside { position: static; }
  .st-ck-steps { grid-template-columns: 1fr 1fr; }
}

.breadcrumb i.fa-home,
.breadcrumb i.fas.fa-home { display: none; }

/* ==== Homepage: specialities ==== */
.st-specialities {
  padding: 120px 48px;
  background: var(--st-navy);
}

.st-specialities-in {
  max-width: var(--st-max);
  margin: 0 auto;
}

.st-specialities h2 {
  margin: 0 0 40px;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -.4px;
  text-align: center;
}

.st-specialities-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.st-speciality {
  /* Figma insets the copy 40px from the sides. The vertical inset is trimmed
     from Figma's 60px so the tile reads closer to a square — at 60px the
     shortest tile was stretched with dead space under its text. */
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  color: #fff;
  text-decoration: none;
  transition: background .15s ease;
}

.st-speciality:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.st-speciality-icon { width: 64px; height: 64px; }

.st-speciality-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.st-speciality-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.2px;
  white-space: nowrap;
}

.st-speciality-text {
  color: rgba(255, 255, 255, .6);
  font-size: 17px;
  line-height: 26px;
}

/* ==== Homepage: product carousels ==== */

/* Sections alternate soft grey and white, the way the design stacks them.
   The band spans the full width while its contents stay on the 1824 grid. */
.st-prod-carousel {
  --st-prod-visible: 5;
  --st-prod-gap: 12px;
  padding: 80px 48px;
  background: #fff;
}

/* Sections alternate down the page, starting grey. Counting by type is safe
   here: the product carousel is the only <section> the modules emit, so a
   banner carousel sitting between two of them does not shift the rhythm. */
.st-home-sections .st-prod-carousel:nth-of-type(odd) {
  background: var(--st-soft);
}

.st-prod-carousel-in {
  max-width: var(--st-max);
  margin: 0 auto;
}

.st-prod-carousel-head {
  margin-bottom: 40px;
  text-align: center;
}

.st-prod-carousel-head h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -.4px;
}

/* The heading links through to the category, but it is a heading first — it
   should not pick up the default link colour. */
.st-prod-carousel-head h2 a {
  color: inherit;
  text-decoration: none;
}

.st-prod-carousel-head h2 a:hover {
  text-decoration: underline;
}

.st-prod-carousel-body { position: relative; }
.st-prod-carousel-body .swiper { overflow: hidden; }

/* Five cards to a row, flush with the grid — no edge bleed here, unlike the
   hero. At 1920 this resolves to the design's 355px card. */
.st-prod-carousel-body .swiper-slide.st-prod-slide {
  width: calc((100% - (var(--st-prod-visible) - 1) * var(--st-prod-gap)) / var(--st-prod-visible));
  height: auto;
  flex-shrink: 0;
}

.st-prod-slide > .st-card { height: 100%; }

/* Arrows sit centred under the row, the way the Microwell reference does it,
   rather than floating over the first and last card. */
.st-prod-nav-row {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
}

.st-prod-nav {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--st-line);
  border-radius: 50%;
  background: #fff;
  color: var(--st-navy);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.st-prod-nav svg {
  width: 20px;
  height: 20px;
}

.st-prod-nav:hover {
  border-color: var(--st-navy);
  background: var(--st-navy);
  color: #fff;
}

.st-prod-nav.swiper-button-disabled {
  opacity: .35;
  pointer-events: none;
}

/* The CTA block carries the same soft grey. Without this the homepage shows a
   white stripe between it and the last product band. */
.st-home .st-cta { margin-top: 0; }

@media (max-width: 1400px) {
  .st-prod-carousel { --st-prod-visible: 4; }
}

@media (max-width: 1200px) {
  .st-specialities-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-prod-carousel { --st-prod-visible: 3; }
}

@media (max-width: 900px) {
  .st-prod-carousel { --st-prod-visible: 2; }

  .st-specialities { padding: 56px 16px; }
  .st-specialities h2 { margin-bottom: 24px; font-size: 28px; line-height: 34px; }
  .st-specialities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-speciality { min-height: 0; gap: 16px; padding: 28px 20px; }
  .st-speciality-text { margin-top: -6px; font-size: 15px; line-height: 22px; }

  .st-prod-carousel { padding: 48px 16px; }
  .st-prod-carousel-head { margin-bottom: 24px; }
  .st-prod-carousel-head h2 { font-size: 26px; line-height: 32px; }
  .st-prod-nav-row { margin-top: 24px; gap: 24px; }
}

@media (max-width: 620px) {
  .st-prod-carousel { --st-prod-visible: 1; }
}

/* ==== Homepage: O firmě ==== */
.st-about {
  padding: 80px 48px 120px;
  background: #fff;
}

/* The design insets this block 200px from the left and only 45px from the
   right — deliberately off-centre, unlike the rest of the page. The inset sits
   on the block itself, not the section, so the reference carousel below it
   keeps its own centred alignment. */
.st-about-in {
  display: grid;
  max-width: 1675px;
  margin-left: 152px;
  align-items: start;
  gap: 106px;
  grid-template-columns: 511px minmax(0, 1fr);
}

.st-about-eyebrow {
  margin: 0 0 8px;
  color: var(--st-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}

.st-about-copy h2 {
  margin: 0 0 24px;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -.4px;
}

.st-about-copy p {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 24px;
}

.st-about-copy p:last-child { margin-bottom: 0; }

/* The mosaic alternates a wide and a narrow tile and flips their order on the
   second row — that zig-zag is the whole point of the block. The rows carry
   their own column split, which a single two-column grid cannot express. */
.st-about-photos {
  display: grid;
  gap: 12px;
}

.st-about-row {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 749fr) minmax(0, 297fr);
}

.st-about-row:nth-child(even) {
  grid-template-columns: minmax(0, 297fr) minmax(0, 749fr);
}

.st-about-photos img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  aspect-ratio: 749 / 403;
  object-fit: cover;
}

.st-about-row:nth-child(odd) img:nth-child(2),
.st-about-row:nth-child(even) img:nth-child(1) { aspect-ratio: 297 / 403; }

/* ==== Homepage: reference ==== */
.st-ref {
  position: relative;
  max-width: var(--st-max);
  margin: 100px auto 0;
  padding: 0 90px;
}

.st-ref-swiper { overflow: hidden; }

/* Swiper's stylesheet loads after this one and sets .swiper-slide to block,
   so the grid needs the extra class to win. */
.st-ref .swiper-slide.st-ref-slide {
  display: grid;
  align-items: center;
  gap: 0;
  grid-template-columns: minmax(0, 541fr) minmax(0, 664fr);
}

.st-ref-photo img {
  display: block;
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 541 / 501;
  object-fit: cover;
}

.st-ref-copy {
  position: relative;
  padding-left: 71px;
}

/* The quotation mark starts on the photo's right edge and the copy runs out
   from under it — that overlap is what ties the two halves together. */
/* Figma's icon frame is 231 square, but the artwork inside it is inset — the
   mark itself is 154 x 171 and sits 38.5 in from the frame's left edge. Using
   the frame size drew it half again too big and stretched. The asset also
   already carries the soft grey from the palette, so it needs no opacity.
   Set 30px lower than the design's -90 on review, to sink it further behind
   the opening lines. */
.st-ref-mark {
  position: absolute;
  z-index: 0;
  top: -60px;
  left: 38px;
  width: 154px;
  height: 171px;
  pointer-events: none;
}

.st-ref-quote {
  position: relative;
  z-index: 1;
  max-width: 593px;
  margin: 0 0 50px;
  font-size: 18px;
  line-height: 28px;
}

.st-ref-author { position: relative; z-index: 1; max-width: 593px; }

.st-ref-author {
  margin: 0;
  color: var(--st-navy);
  font-size: 16px;
  line-height: 24px;
}

.st-ref-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  width: 65px;
  height: 65px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--st-soft);
  color: var(--st-ink);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .15s ease, color .15s ease;
}

.st-ref-nav svg { width: 24px; height: 24px; }
.st-ref-nav:hover { background: var(--st-navy); color: #fff; }
.st-ref-nav.is-prev { left: 0; }
.st-ref-nav.is-next { right: 0; }
.st-ref-nav.swiper-button-disabled { opacity: .35; pointer-events: none; }

@media (max-width: 1200px) {
  .st-about-in { margin-left: 0; grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .st-ref .swiper-slide.st-ref-slide { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .st-ref-copy { padding-left: 0; }
  .st-ref-mark { top: -62px; left: auto; right: 0; width: 110px; height: 122px; }
}

@media (max-width: 900px) {
  .st-about { padding: 48px 16px 64px; }
  .st-about-in { gap: 32px; }
  .st-about-copy h2 { font-size: 28px; line-height: 34px; }
  .st-about-row,
  .st-about-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .st-about-photos img,
  .st-about-row:nth-child(odd) img:nth-child(2),
  .st-about-row:nth-child(even) img:nth-child(1) { aspect-ratio: 1 / 1; }

  .st-ref { margin-top: 56px; padding: 0; }
  .st-ref-quote { margin-bottom: 28px; font-size: 16px; line-height: 26px; }
  .st-ref-nav { width: 44px; height: 44px; top: auto; bottom: -64px; transform: none; }
  .st-ref-nav.is-prev { left: calc(50% - 54px); }
  .st-ref-nav.is-next { right: calc(50% - 54px); }
  .st-ref { padding-bottom: 80px; }
}