:root {
  --surp-ink: #0b0b0c;
  --surp-paper: #ffffff;
  --surp-mist: #eef1f4;
  --surp-line: rgba(11, 11, 12, 0.16);
  --surp-muted: #565d65;
  --surp-radius: 22px;
}

.site-header:not(.surp-pdp-header) {
  --notch-h: 80px;
}

/* Preserve the transparent counter in the final P of the SURP wordmark. */
[data-logo-target="wordmark"] path {
  fill-rule: evenodd;
  clip-rule: evenodd;
}

/* Hide only the floating teaser card, not its animation container. */
[data-hero-front="true"] > a {
  display: none !important;
}

/* Product imagery stays evenly lit instead of following the pointer. */
[data-product="true"] .sheen {
  display: none !important;
}

@media (max-width: 767px) {
  .site-header:not(.surp-pdp-header) {
    --bar-h: 70px;
    --notch-h: 76px;
  }
}

.text-steel {
  color: var(--surp-muted) !important;
}

.text-paper\/55,
.text-paper\/60 {
  color: rgba(255, 255, 255, 0.74) !important;
}

[data-product="true"] h3 {
  line-height: 1.25;
}

.surp-card-title-row,
.surp-product-title-row,
.surp-pdp-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.surp-card-title-row {
  min-width: 0;
  flex-wrap: wrap;
}

.surp-card-title-row h3 {
  margin: 0;
}

.surp-color-swatches {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.surp-color-swatch {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.surp-color-swatch span {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(11, 11, 12, 0.24);
  border-radius: 999px;
  background: var(--surp-swatch);
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.surp-color-swatch:hover span {
  transform: scale(1.12);
}

.surp-color-swatch[aria-pressed="true"] span {
  box-shadow: 0 0 0 2px #f7f8f8, 0 0 0 3px var(--surp-ink);
}

.surp-color-swatch:focus-visible {
  outline: 2px solid var(--surp-ink);
  outline-offset: 1px;
}

[data-product="true"] img,
.surp-pdp-media img,
.surp-product-dialog__media img,
.surp-cart-item img {
  transition: opacity 160ms ease;
}

.surp-color-changing {
  opacity: 0.55;
}

[data-product="true"] button[aria-label^="Select options"] {
  min-height: 44px;
  min-width: 72px;
}

.surp-card-view {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11, 11, 12, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  padding: 0 15px;
  color: var(--surp-ink);
  font: 600 10px/1 var(--font-sans, Arial, sans-serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 220ms ease, transform 220ms ease, background 220ms ease;
  backdrop-filter: blur(8px);
}

[data-product="true"]:hover .surp-card-view,
[data-product="true"]:focus-within .surp-card-view {
  opacity: 1;
  transform: translateY(0);
}

.surp-preview-banner {
  background: #dfe5ea !important;
  color: #34393f !important;
}

.surp-lookbook-link .surp-view-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.surp-legacy-cart,
.surp-unconfigured-social {
  display: none !important;
}

.surp-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.surp-motion-ticker {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--surp-mist);
  padding: 10px clamp(10px, 1.2vw, 18px);
}

.surp-motion-ticker__viewport {
  overflow: hidden;
  border-radius: 17px;
  background: var(--surp-ink);
  color: var(--surp-paper);
}

.surp-motion-ticker__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: surp-ticker-move 28s linear infinite;
}

.surp-motion-ticker__group {
  display: flex;
  min-height: 64px;
  flex: 0 0 auto;
  align-items: center;
}

.surp-motion-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(22px, 2.2vw, 36px);
  padding-right: clamp(22px, 2.2vw, 36px);
  white-space: nowrap;
  font: 500 clamp(16px, 1.45vw, 22px)/1 var(--font-sans, Arial, sans-serif);
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.surp-motion-ticker__item--strong {
  font-weight: 800;
  letter-spacing: -0.045em;
}

.surp-motion-ticker__mark {
  display: block;
  width: clamp(24px, 2vw, 30px);
  height: clamp(24px, 2vw, 30px);
  flex: 0 0 auto;
  object-fit: contain;
}

.surp-motion-ticker__viewport:hover .surp-motion-ticker__track {
  animation-play-state: paused;
}

[aria-label="Lookbook"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.surp-collection-hero {
  position: relative;
  height: clamp(320px, 34vw, 590px);
  overflow: hidden;
  margin: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 64px) clamp(44px, 5vw, 72px);
  border-radius: var(--surp-radius);
  background: #e8e5e1;
}

.surp-collection-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, rgba(241, 239, 236, 0.92) 0%, rgba(241, 239, 236, 0.68) 26%, rgba(241, 239, 236, 0) 55%);
  content: "";
  pointer-events: none;
}

.surp-collection-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.surp-collection-hero__copy {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: min(560px, 46%);
  padding: clamp(26px, 4vw, 60px) !important;
  color: var(--surp-ink);
}

.surp-collection-hero__copy h1 {
  margin-top: clamp(10px, 1.4vw, 18px) !important;
}

.surp-collection-hero__copy h1 + p {
  margin-top: clamp(14px, 1.6vw, 22px) !important;
}

@keyframes surp-ticker-move {
  to {
    transform: translateX(-50%);
  }
}

.surp-search-trigger {
  display: inline-flex;
  min-width: 108px;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 1px solid rgba(11, 11, 12, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  padding: 0 15px;
  color: var(--surp-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
  backdrop-filter: blur(8px);
}

.surp-search-trigger:hover {
  border-color: rgba(11, 11, 12, 0.2);
  background: var(--surp-paper);
  transform: translateY(-1px);
}

.surp-search-trigger svg,
.surp-search-form__icon svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.surp-search {
  position: fixed;
  inset: 0;
  z-index: 180;
  visibility: hidden;
  color: var(--surp-ink);
  opacity: 0;
  pointer-events: none;
  transition: visibility 0s linear 300ms, opacity 240ms ease;
}

.surp-search.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.surp-search:not(.is-open) {
  z-index: 110;
}

.surp-search__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(11, 11, 12, 0.42);
  cursor: default;
  backdrop-filter: blur(2px);
}

.surp-search-panel {
  position: relative;
  width: 100%;
  max-height: min(690px, calc(100dvh - 18px));
  overflow-y: auto;
  border-radius: 0 0 30px 30px;
  background: var(--surp-paper);
  box-shadow: 0 28px 80px rgba(11, 11, 12, 0.2);
  transform: translateY(-22px);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.surp-search.is-open .surp-search-panel {
  transform: translateY(0);
}

.surp-search-topbar {
  display: grid;
  width: min(1600px, 100%);
  min-height: 82px;
  grid-template-columns: minmax(120px, 190px) minmax(280px, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  margin: 0 auto;
  padding: 14px clamp(20px, 3vw, 48px);
}

.surp-search-brand {
  justify-self: start;
  font-size: 23px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.13em;
}

.surp-search-form {
  display: flex;
  min-width: 0;
  min-height: 50px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f2f3f4;
  padding: 0 9px 0 17px;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.surp-search-form:focus-within {
  border-color: rgba(11, 11, 12, 0.34);
  background: var(--surp-paper);
  box-shadow: 0 0 0 3px rgba(11, 11, 12, 0.07);
}

.surp-search-form__icon {
  display: inline-flex;
  color: var(--surp-ink);
}

.surp-search-form input {
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 12px;
  color: var(--surp-ink);
  font: 500 16px/1.2 var(--font-sans, Arial, sans-serif);
}

.surp-search-form input::-webkit-search-cancel-button {
  display: none;
}

.surp-search-form input::placeholder {
  color: #737980;
  opacity: 1;
}

.surp-search-clear {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  color: #34383d;
  font-size: 24px;
  line-height: 1;
}

.surp-search-clear:hover {
  background: #e5e7e9;
}

.surp-search-cancel {
  min-height: 44px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 650;
}

.surp-search-content {
  display: grid;
  width: min(1600px, 100%);
  grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  margin: 0 auto;
  padding: 10px clamp(20px, 3vw, 48px) 42px;
}

.surp-search-kicker {
  margin: 4px 0 18px;
  color: #777d83;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.surp-search-suggestion-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.surp-search-suggestion-list button {
  min-height: 34px;
  color: #34383d;
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 500;
  text-align: left;
  transition: color 160ms ease, transform 160ms ease;
}

.surp-search-suggestion-list button:hover,
.surp-search-suggestion-list button:focus-visible {
  color: var(--surp-ink);
  transform: translateX(3px);
}

.surp-search-results-heading {
  display: flex;
  min-height: 28px;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.surp-search-results-heading h3 {
  font-size: 13px;
  font-weight: 650;
}

.surp-search-results-heading p {
  color: var(--surp-muted);
  font-size: 11px;
}

.surp-search-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.25vw, 20px);
  list-style: none;
}

.surp-search-card {
  display: block;
  width: 100%;
  color: var(--surp-ink);
  text-align: left;
}

.surp-search-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 15px;
  background: #eff1f2;
}

.surp-search-card__media::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(11, 11, 12, 0.06);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.surp-search-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5%;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.surp-search-card:hover img,
.surp-search-card:focus-visible img {
  transform: scale(1.035);
}

.surp-search-card__copy {
  display: grid;
  gap: 4px;
  padding-top: 12px;
}

.surp-search-card__copy strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surp-search-card__copy span {
  overflow: hidden;
  color: #777d83;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.surp-search-card__copy b {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.surp-search-empty {
  display: grid;
  min-height: 280px;
  place-content: center;
  justify-items: center;
  color: var(--surp-muted);
  text-align: center;
}

.surp-search-empty p {
  color: var(--surp-ink);
  font-size: 18px;
}

.surp-search-empty span {
  margin-top: 7px;
  font-size: 13px;
}

.surp-search-empty a {
  margin-top: 20px;
  border-bottom: 1px solid currentColor;
  color: var(--surp-ink);
  font-size: 12px;
  font-weight: 650;
}

.surp-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  visibility: hidden;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: visibility 0s linear 240ms, opacity 240ms ease;
}

.surp-overlay.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.surp-overlay__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(11, 11, 12, 0.6);
  cursor: default;
  backdrop-filter: blur(5px);
}

.surp-product-dialog {
  position: relative;
  display: grid;
  width: min(920px, 100%);
  max-height: min(760px, calc(100dvh - 36px));
  overflow: auto;
  border-radius: 28px;
  background: var(--surp-paper);
  box-shadow: 0 30px 90px rgba(11, 11, 12, 0.3);
}

.surp-product-dialog__media {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  background: #f2f3f3;
}

.surp-product-dialog__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
}

.surp-product-dialog__content {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 5vw, 48px);
}

.surp-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--surp-ink);
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 4px 20px rgba(11, 11, 12, 0.1);
}

.surp-eyebrow,
.surp-field-label,
.surp-cart-kicker {
  color: var(--surp-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.surp-product-title {
  margin-top: 12px;
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.96;
  text-transform: uppercase;
}

.surp-product-title-row {
  align-items: flex-end;
  flex-wrap: wrap;
}

.surp-product-title-row .surp-product-title {
  margin-right: 5px;
}

.surp-product-price {
  margin-top: 18px;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.surp-product-meta {
  display: flex;
  gap: 20px;
  margin-top: 8px;
  color: var(--surp-muted);
  font-size: 13px;
}

.surp-size-section {
  margin-top: 32px;
}

.surp-size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}

.surp-size-option {
  min-width: 52px;
  min-height: 44px;
  border: 1px solid var(--surp-line);
  border-radius: 999px;
  background: var(--surp-paper);
  padding: 0 14px;
  color: var(--surp-ink);
  font-size: 12px;
  font-weight: 600;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.surp-size-option[aria-pressed="true"] {
  border-color: var(--surp-ink);
  background: var(--surp-ink);
  color: var(--surp-paper);
}

.surp-primary-action {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surp-ink);
  padding: 0 26px;
  color: var(--surp-paper);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: opacity 180ms ease, transform 180ms ease;
}

.surp-primary-action:hover:not(:disabled) {
  transform: translateY(-1px);
}

.surp-primary-action:disabled,
.surp-primary-action[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.42;
}

.surp-product-add {
  width: 100%;
  margin-top: 28px;
}

.surp-size-message,
.surp-checkout-note,
.surp-form-status {
  min-height: 20px;
  margin-top: 10px;
  color: var(--surp-muted);
  font-size: 12px;
  line-height: 1.5;
}

.surp-cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 131;
  display: flex;
  width: min(460px, 100%);
  height: 100dvh;
  flex-direction: column;
  background: var(--surp-paper);
  color: var(--surp-ink);
  visibility: hidden;
  box-shadow: none;
  transform: translateX(102%);
  /* Closed: hide after the slide-out so its shadow does not paint along the right edge of every page. */
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 340ms ease, visibility 0s linear 340ms;
}

.surp-cart-panel.is-open {
  visibility: visible;
  box-shadow: -20px 0 70px rgba(11, 11, 12, 0.22);
  transform: translateX(0);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 340ms ease, visibility 0s;
}

.surp-cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  visibility: hidden;
  border: 0;
  background: rgba(11, 11, 12, 0.46);
  opacity: 0;
  pointer-events: none;
  transition: visibility 0s linear 260ms, opacity 260ms ease;
  backdrop-filter: blur(3px);
}

.surp-cart-backdrop.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.surp-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  border-bottom: 1px solid var(--surp-line);
  padding: 16px 22px;
}

.surp-cart-title {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.surp-cart-close {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 999px;
  background: var(--surp-mist);
  font-size: 22px;
}

.surp-cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}

.surp-cart-empty {
  display: grid;
  min-height: 50vh;
  place-items: center;
  color: var(--surp-muted);
  text-align: center;
}

.surp-cart-list {
  display: grid;
  gap: 1px;
  list-style: none;
}

.surp-cart-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  border-bottom: 1px solid var(--surp-line);
  padding: 16px 0;
}

.surp-cart-item img {
  width: 88px;
  height: 108px;
  border-radius: 15px;
  background: #f2f3f3;
  object-fit: contain;
  padding: 8px;
}

.surp-cart-item__top,
.surp-cart-item__bottom,
.surp-cart-summary-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.surp-cart-item__name {
  font-size: 14px;
  font-weight: 600;
}

.surp-cart-item__meta {
  margin-top: 5px;
  color: var(--surp-muted);
  font-size: 12px;
}

.surp-cart-item__bottom {
  align-items: center;
  margin-top: 18px;
}

.surp-quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--surp-line);
  border-radius: 999px;
}

.surp-quantity button {
  width: 38px;
  height: 38px;
  font-size: 18px;
}

.surp-quantity span {
  min-width: 24px;
  text-align: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.surp-remove {
  min-height: 38px;
  color: var(--surp-muted);
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.surp-size-fix {
  margin-top: 7px;
  color: #8a4300;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.surp-cart-footer {
  border-top: 1px solid var(--surp-line);
  padding: 20px 22px max(20px, env(safe-area-inset-bottom));
}

.surp-cart-summary-row {
  align-items: center;
  margin-bottom: 16px;
  font-size: 14px;
}

.surp-cart-summary-row strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.surp-checkout-button {
  width: 100%;
}

.surp-cart-count {
  position: absolute;
  top: -3px;
  right: -3px;
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid var(--surp-mist);
  border-radius: 999px;
  background: var(--surp-paper);
  padding: 0 4px;
  color: var(--surp-ink);
  font-size: 10px;
  font-weight: 700;
}

.surp-toast {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 150;
  max-width: calc(100% - 32px);
  border-radius: 999px;
  background: var(--surp-ink);
  padding: 13px 20px;
  color: var(--surp-paper);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.surp-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.surp-newsletter-disabled {
  cursor: not-allowed !important;
  opacity: 0.48 !important;
}

body.surp-modal-open {
  overflow: hidden !important;
}

@media (min-width: 768px) {
  .surp-product-dialog {
    grid-template-columns: 1.05fr 0.95fr;
    overflow: hidden;
  }

  .surp-product-dialog__media {
    min-height: 620px;
  }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .surp-search-content {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 28px;
  }

  .surp-search-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .surp-search-grid li:nth-child(5) {
    display: none;
  }
}

@media (max-width: 767px) {
  .surp-search-panel {
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .surp-search-topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 72px;
    border-bottom: 1px solid rgba(11, 11, 12, 0.08);
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 14px;
    backdrop-filter: blur(12px);
  }

  .surp-search-brand {
    display: none;
  }

  .surp-search-form {
    min-height: 48px;
  }

  .surp-search-cancel {
    padding: 0 7px;
  }

  .surp-search-content {
    display: block;
    padding: 20px 16px max(34px, env(safe-area-inset-bottom));
  }

  .surp-search-suggestions {
    margin-bottom: 28px;
  }

  .surp-search-kicker {
    margin-bottom: 10px;
  }

  .surp-search-suggestion-list {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .surp-search-suggestion-list button {
    min-height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--surp-line);
    border-radius: 999px;
    padding: 0 14px;
    font-size: 13px;
  }

  .surp-search-suggestion-list button:hover,
  .surp-search-suggestion-list button:focus-visible {
    transform: none;
  }

  .surp-search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 10px;
  }

  .surp-search-card__media {
    border-radius: 13px;
  }

  .surp-search-results-heading {
    margin-bottom: 12px;
  }

  .surp-card-view {
    display: none;
  }

  [data-product="true"] h3 {
    font-size: 14px;
  }

  [data-product="true"] button[aria-label^="Select options"] {
    min-width: 68px;
    padding-inline: 12px;
  }

  form input[type="email"] {
    min-height: 44px;
    font-size: 16px !important;
  }

  footer a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
  }

  .surp-product-dialog {
    grid-template-rows: minmax(280px, 42vh) auto;
  }

  .surp-product-dialog__media {
    min-height: 280px;
  }
}

/* Product cards and dedicated product pages */
.surp-card-clickable {
  cursor: pointer;
}

article[data-surp-slug="crew-socks"] img,
article[data-surp-slug="session-bag"] img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 5% !important;
  transform: none !important;
}

.surp-product-page {
  min-height: 100%;
  margin: 0;
  background: var(--surp-paper);
  color: var(--surp-ink);
  font-family: var(--font-sans, Arial, Helvetica, sans-serif);
}

.surp-product-page *,
.surp-product-page *::before,
.surp-product-page *::after {
  box-sizing: border-box;
}

.surp-product-page a {
  color: inherit;
  text-decoration: none;
}

.surp-product-page button,
.surp-product-page input,
.surp-product-page select {
  font: inherit;
}

.surp-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surp-ink);
  color: var(--surp-paper) !important;
  opacity: 0;
  pointer-events: none;
}

.surp-skip-link:focus {
  opacity: 1;
  pointer-events: auto;
}

.surp-pdp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(11, 11, 12, 0.09);
  background: rgba(238, 241, 244, 0.92);
  backdrop-filter: blur(14px);
}

.surp-pdp-nav {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 8px clamp(18px, 3vw, 48px);
}

.surp-pdp-nav__links,
.surp-pdp-nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.surp-pdp-nav__actions {
  justify-content: flex-end;
}

.surp-pdp-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--surp-ink);
  font-size: 27px;
}

.surp-pdp-brand svg {
  display: block;
}

.surp-pdp-cart {
  position: relative;
  display: inline-flex;
  min-width: 58px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surp-ink);
  padding: 0 16px;
  color: var(--surp-paper);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.surp-pdp-breadcrumb {
  display: flex;
  width: min(1480px, 100%);
  align-items: center;
  gap: 9px;
  margin: 0 auto;
  padding: 24px clamp(20px, 4vw, 64px);
  color: var(--surp-muted);
  font-size: 11px;
}

.surp-pdp-breadcrumb a {
  color: var(--surp-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.surp-pdp-hero {
  display: grid;
  width: min(1480px, 100%);
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: clamp(34px, 5vw, 88px);
  align-items: start;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px) clamp(72px, 8vw, 128px);
}

.surp-pdp-media {
  position: sticky;
  top: 92px;
  display: grid;
  min-height: 640px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  place-items: center;
  border-radius: clamp(22px, 3vw, 40px);
  background: var(--surp-mist);
}

.surp-pdp-media::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(11, 11, 12, 0.06);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.surp-pdp-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(26px, 6vw, 86px);
}

.surp-pdp-buy {
  padding-top: clamp(18px, 4vw, 64px);
}

.surp-pdp-kicker {
  margin: 0;
  color: var(--surp-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.surp-pdp-buy h1 {
  max-width: 720px;
  margin: 14px 0 0;
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 620;
  letter-spacing: -0.065em;
  line-height: 0.9;
  text-transform: uppercase;
}

.surp-pdp-title-row {
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
}

.surp-pdp-title-row h1 {
  margin-top: 0;
}

.surp-pdp-color-swatches {
  margin-bottom: 5px;
  gap: 4px;
}

.surp-pdp-color-swatches .surp-color-swatch {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

.surp-pdp-color-swatches .surp-color-swatch span {
  width: 16px;
  height: 16px;
}

.surp-pdp-price {
  margin: 25px 0 0;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}

.surp-pdp-description {
  max-width: 580px;
  margin: 26px 0 0;
  color: #3f464d;
  font-size: 15px;
  line-height: 1.75;
}

.surp-pdp-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 34px 0 0;
  border: 1px solid var(--surp-line);
  border-radius: 17px;
  overflow: hidden;
  background: var(--surp-line);
}

.surp-pdp-meta div {
  background: var(--surp-paper);
  padding: 16px 18px;
}

.surp-pdp-meta dt {
  color: var(--surp-muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.surp-pdp-meta dd {
  margin: 7px 0 0;
  font-size: 13px;
}

.surp-pdp-size-block {
  margin-top: 38px;
}

.surp-pdp-size-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.surp-pdp-size-heading p {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
}

.surp-pdp-size-heading a {
  border-bottom: 1px solid currentColor;
  color: var(--surp-muted);
  font-size: 11px;
}

.surp-pdp-sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.surp-pdp-size {
  min-height: 50px;
  border: 1px solid var(--surp-line);
  border-radius: 13px;
  background: var(--surp-paper);
  color: var(--surp-ink);
  font-size: 12px;
  font-weight: 650;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.surp-pdp-size:hover {
  border-color: var(--surp-ink);
  transform: translateY(-1px);
}

.surp-pdp-size[aria-pressed="true"] {
  border-color: var(--surp-ink);
  background: var(--surp-ink);
  color: var(--surp-paper);
}

.surp-pdp-add {
  width: 100%;
  margin-top: 16px;
}

.surp-pdp-selection-status,
.surp-pdp-preview-note {
  margin: 10px 0 0;
  color: var(--surp-muted);
  font-size: 11px;
  line-height: 1.5;
}

.surp-pdp-preview-note {
  margin-top: 19px;
  border-radius: 13px;
  background: #f3f5f6;
  padding: 13px 15px;
}

.surp-pdp-information,
.surp-pdp-checker {
  display: grid;
  width: min(1480px, 100%);
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1.2fr);
  gap: clamp(38px, 7vw, 130px);
  margin: 0 auto;
  border-top: 1px solid var(--surp-line);
  padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 64px);
}

.surp-pdp-information h2,
.surp-pdp-checker h2 {
  max-width: 620px;
  margin: 14px 0 0;
  font-size: clamp(28px, 5vw, 66px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-transform: uppercase;
}

.surp-pdp-information ul {
  display: grid;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.surp-pdp-information li {
  border-bottom: 1px solid var(--surp-line);
  padding: 20px 0;
  color: #30363c;
  font-size: 14px;
  line-height: 1.55;
}

.surp-pdp-information li:first-child {
  border-top: 1px solid var(--surp-line);
}

/* "Ausgangsgröße" / "startstorlek" are wider than the narrow checker column: hyphenate that one heading. */
.surp-pdp-checker h2 {
  hyphens: auto;
  overflow-wrap: break-word;
}

.surp-pdp-checker {
  background: var(--surp-ink);
  color: var(--surp-paper);
}

.surp-pdp-checker .surp-pdp-kicker {
  color: rgba(255, 255, 255, 0.56);
}

.surp-pdp-checker-copy {
  max-width: 540px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.7;
}

.surp-pdp-size-form {
  display: grid;
  align-content: start;
  gap: 15px;
}

.surp-pdp-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.surp-pdp-size-form label {
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.surp-pdp-size-form input,
.surp-pdp-size-form select {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  outline: 0;
  background: rgba(255, 255, 255, 0.08);
  padding: 0 15px;
  color: var(--surp-paper);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
}

.surp-pdp-size-form input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.surp-pdp-size-form input:focus,
.surp-pdp-size-form select:focus {
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.surp-pdp-size-form option {
  color: var(--surp-ink);
}

.surp-pdp-size-form button {
  min-height: 54px;
  border-radius: 999px;
  background: var(--surp-paper);
  color: var(--surp-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.surp-pdp-size-result {
  min-height: 38px;
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  line-height: 1.55;
}

.surp-pdp-service {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: clamp(54px, 7vw, 96px) clamp(20px, 4vw, 64px);
}

.surp-pdp-service details {
  border-top: 1px solid var(--surp-line);
}

.surp-pdp-service details:last-child {
  border-bottom: 1px solid var(--surp-line);
}

.surp-pdp-service summary {
  cursor: pointer;
  padding: 21px 2px;
  font-size: 13px;
  font-weight: 650;
  list-style-position: outside;
}

.surp-pdp-service details p {
  max-width: 720px;
  margin: -4px 0 23px;
  color: var(--surp-muted);
  font-size: 13px;
  line-height: 1.65;
}

.surp-pdp-back {
  display: flex;
  width: min(1480px, 100%);
  justify-content: flex-end;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px) clamp(70px, 8vw, 120px);
}

.surp-pdp-back a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  font-size: 12px;
  font-weight: 650;
}

.surp-pdp-footer {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr auto;
  gap: 28px;
  align-items: end;
  background: var(--surp-ink);
  padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 64px);
  color: var(--surp-paper);
}

.surp-pdp-footer__brand {
  font-size: 27px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.1em;
}

.surp-pdp-footer p,
.surp-pdp-footer span {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  line-height: 1.6;
}

.surp-pdp-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 20px;
  font-size: 11px;
}

@media (max-width: 980px) {
  .surp-pdp-nav__links a:nth-child(n + 3),
  .surp-pdp-nav__actions > a {
    display: none;
  }

  .surp-pdp-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 30px;
  }

  .surp-pdp-media {
    min-height: 520px;
  }

  .surp-pdp-footer {
    grid-template-columns: 1fr 2fr;
    align-items: start;
  }
}

@media (max-width: 720px) {
  .surp-card-view {
    opacity: 1;
    transform: none;
  }

  .surp-pdp-nav {
    grid-template-columns: auto 1fr auto;
    min-height: 62px;
    gap: 12px;
    padding: 7px 14px;
  }

  .surp-pdp-nav__links {
    order: 1;
  }

  .surp-pdp-nav__links a {
    display: none;
  }

  .surp-pdp-nav__links a:first-child {
    display: inline;
  }

  .surp-pdp-brand {
    order: 2;
    justify-self: center;
    font-size: 22px;
  }

  .surp-pdp-nav__actions {
    order: 3;
    gap: 8px;
  }

  .surp-pdp-nav .surp-search-trigger {
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }

  .surp-pdp-nav .surp-search-trigger span {
    display: none;
  }

  .surp-pdp-cart {
    min-width: 52px;
    padding: 0 13px;
  }

  .surp-pdp-breadcrumb {
    padding: 18px;
  }

  .surp-pdp-hero {
    display: block;
    padding: 0 14px 72px;
  }

  .surp-pdp-media {
    position: relative;
    top: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-radius: 23px;
  }

  .surp-pdp-media img {
    padding: 11%;
  }

  .surp-pdp-buy {
    padding: 34px 6px 0;
  }

  .surp-pdp-buy h1 {
    font-size: clamp(46px, 16vw, 72px);
  }

  .surp-pdp-information,
  .surp-pdp-checker {
    display: block;
    padding: 68px 20px;
  }

  .surp-pdp-information ul,
  .surp-pdp-size-form {
    margin-top: 38px;
  }

  .surp-pdp-field-row {
    grid-template-columns: 1fr;
  }

  .surp-pdp-service {
    padding: 56px 20px;
  }

  .surp-pdp-back {
    justify-content: flex-start;
    padding: 0 20px 72px;
  }

  .surp-pdp-footer {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 54px 20px;
  }
}

@media (max-width: 520px) {
  .surp-collection-hero {
    height: auto;
    aspect-ratio: 4 / 5;
    margin-top: 28px;
    margin-bottom: 42px;
    border-radius: 18px;
  }

  .surp-collection-hero::after {
    background: linear-gradient(155deg, rgba(241, 239, 236, 0.97) 0%, rgba(241, 239, 236, 0.82) 31%, rgba(241, 239, 236, 0) 58%);
  }

  .surp-collection-hero__copy {
    width: 100%;
    max-width: 340px;
    padding: 26px 24px !important;
  }

  .surp-collection-hero__copy h1 {
    font-size: clamp(2.4rem, 15vw, 4rem) !important;
  }

  .surp-collection-hero__copy h1 + p {
    max-width: 290px;
    font-size: 14px;
    line-height: 1.55;
  }

  .surp-collection-hero--women img {
    object-position: 78% center;
  }

  .surp-collection-hero--men img {
    object-position: 80% center;
  }

  .surp-motion-ticker {
    padding: 8px;
  }

  .surp-motion-ticker__viewport {
    border-radius: 14px;
  }

  .surp-motion-ticker__group {
    min-height: 54px;
  }

  .surp-motion-ticker__item {
    gap: 20px;
    padding-right: 20px;
    font-size: 15px;
  }

  .surp-search-trigger {
    width: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0;
  }

  .surp-search-trigger span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .surp-motion-ticker__track {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .surp-motion-ticker__group:nth-child(2) {
    display: none;
  }

  .surp-search,
  .surp-search-panel,
  .surp-search-card img,
  .surp-search-trigger,
  .surp-overlay,
  .surp-card-view,
  .surp-primary-action,
  .surp-cart-panel,
  .surp-cart-backdrop,
  .surp-toast {
    scroll-behavior: auto;
    /* No transition at all: a 0.01 ms one still starts from visibility:hidden and swallows the initial focus. */
    transition: none !important;
  }
}

/* Size checker result: large size plus a scale that shows where the estimate sits between two sizes. */
.surp-size-visual {
  display: grid;
  gap: 18px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 26px;
}

.surp-size-visual[hidden] {
  display: none;
}

.surp-size-visual__label {
  margin: 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.surp-size-visual__value {
  margin: -6px 0 0;
  color: var(--surp-paper);
  font-size: clamp(88px, 12vw, 150px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.86;
  text-transform: uppercase;
}

.surp-size-visual.is-updated .surp-size-visual__value {
  animation: surp-size-pop 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

@keyframes surp-size-pop {
  from { opacity: 0; transform: translateY(18px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

.surp-size-scale {
  --surp-size-position: 0%;
  padding: 0 16px;
}

.surp-size-scale__track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.surp-size-scale__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--surp-size-position);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), var(--surp-paper));
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.surp-size-scale__marker {
  position: absolute;
  top: 50%;
  left: var(--surp-size-position);
  width: 22px;
  height: 22px;
  border: 5px solid var(--surp-ink);
  border-radius: 50%;
  background: var(--surp-paper);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 6px 18px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  transition: left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.surp-size-scale__ticks {
  position: relative;
  height: 22px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.surp-size-scale__ticks li {
  position: absolute;
  top: 0;
  left: var(--surp-tick);
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: color 0.3s ease;
}

.surp-size-scale__ticks li::before {
  position: absolute;
  top: -17px;
  left: 50%;
  width: 1px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  content: "";
}

.surp-size-scale__ticks li[data-active] {
  color: var(--surp-paper);
}

.surp-size-visual__note {
  margin: 0;
  color: var(--surp-paper);
  font-size: 14px;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .surp-size-visual.is-updated .surp-size-visual__value {
    animation: none;
  }

  .surp-size-scale__fill,
  .surp-size-scale__marker {
    transition: none;
  }
}

/* "Built with intent": the Next stylesheet still starts the mask from the right and is cached for a year.
   The patched home chunk reveals top to bottom, so the resting state before hydration has to match. */
#details .mask-reveal {
  clip-path: inset(0 0 100% 0);
}

/* Home hero: vertical product strip on the left. Only where the headline leaves room beside it. */
.surp-hero-products {
  display: none;
}

/* The sticky stage starts 84 px below the top and is one viewport tall, so its last 84 px sit below the fold.
   Below 1280 px the centred headline starts too far left for the strip. */
@media (min-width: 1280px) {
  .surp-hero-products {
    position: absolute;
    top: 96px;
    bottom: calc(84px + clamp(16px, 3vh, 36px));
    left: clamp(18px, 2vw, 40px);
    z-index: 40;
    display: flex;
    width: clamp(140px, 10.5vw, 188px);
    flex-direction: column;
    gap: 12px;
    transition: opacity 0.45s ease, transform 0.45s ease;
  }

  .surp-hero-products.is-away {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-24px);
  }
}

.surp-hero-products__label {
  align-self: flex-start;
  border-radius: 999px;
  background: var(--surp-ink);
  padding: 9px 14px;
  color: var(--surp-paper);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.surp-hero-products__viewport {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  border-radius: 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

.surp-hero-products__track {
  display: flex;
  flex-direction: column;
  animation: surp-hero-products-move 44s linear infinite;
  will-change: transform;
}

.surp-hero-products:hover .surp-hero-products__track,
.surp-hero-products:focus-within .surp-hero-products__track {
  animation-play-state: paused;
}

@keyframes surp-hero-products-move {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.surp-hero-products__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
}

.surp-hero-product {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(11, 11, 12, 0.08);
  border-radius: 20px;
  background: var(--surp-paper);
  padding: 8px 8px 12px;
  color: var(--surp-ink);
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(11, 11, 12, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.surp-hero-product:hover,
.surp-hero-product:focus-visible {
  box-shadow: 0 16px 36px rgba(11, 11, 12, 0.16);
  transform: translateY(-2px);
}

.surp-hero-product:focus-visible {
  outline: 2px solid var(--surp-ink);
  outline-offset: 2px;
}

.surp-hero-product__media {
  display: block;
  overflow: hidden;
  margin-bottom: 8px;
  border-radius: 14px;
  background: #f1f3f5;
  aspect-ratio: 1;
}

.surp-hero-product__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.surp-hero-product__name {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.surp-hero-product__price {
  padding: 0 4px;
  color: rgba(11, 11, 12, 0.62);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .surp-hero-products__track {
    animation: none;
  }

  .surp-hero-products__viewport {
    overflow-y: auto;
  }

  .surp-hero-products__list[aria-hidden="true"] {
    display: none;
  }
}

/* Newsletter consent under the sign-up field (dark section). */
.surp-newsletter-consent {
  display: flex;
  max-width: 620px;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

.surp-newsletter-consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #ffffff;
  cursor: pointer;
}

.surp-newsletter-consent a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#newsletter .surp-form-status {
  color: rgba(255, 255, 255, 0.6);
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 420px) {
  .surp-pdp-nav {
    gap: 8px;
    padding: 7px 12px;
  }

  .surp-pdp-brand {
    min-width: 0;
    font-size: clamp(15px, 5vw, 22px);
  }

  .surp-pdp-nav__actions {
    gap: 6px;
  }

  .surp-pdp-cart {
    padding: 0 10px;
    letter-spacing: 0.08em;
  }
}

/* ==========================================================================
   Durchsicht 20.09.2026 — Startseite und Produktseite
   Befunde aus der Live-Messung; jede Regel gehört zu genau einem Befund.
   ========================================================================== */

/* Befund 4: Die Farbfelder standen mit 9 px Abstand neben der 96-px-Überschrift
   und lasen sich als Satzzeichen ("CORE TEE•••"). Das Negativ-Kerning der
   Überschrift (-0.065em) frisst davon noch einmal gut 6 px. Sie bekommen jetzt
   eine eigene Zeile unter dem Titel — dort kollidieren sie mit keiner Länge. */
.surp-pdp-title-row {
  flex-wrap: wrap;
  align-items: flex-end;
  row-gap: 14px;
}

.surp-pdp-title-row .surp-pdp-color-swatches {
  flex-basis: 100%;
  margin-bottom: 0;
}

/* Befund 1: Das waagrechte Lookbook ist durch `overflow-x: auto` in BEIDEN
   Achsen ein Scroll-Container (CSS zwingt overflow-y von `visible` auf `auto`).
   Reicht seine Höhe rechnerisch auch nur um einen Bruchteil über den sichtbaren
   Bereich, rastet Chrome die Radgeste darin ein und die Seite steht — genau das
   gemeldete Bild. Mit `overflow-y: hidden` ist die senkrechte Achse gar kein
   Ziel mehr. Abgeschnitten wird nichts: Inhalt und Container sind gleich hoch.
   `overscroll-behavior-x: contain` verhindert zusätzlich, dass ein Wisch über
   das Ende hinaus die Zurück-Navigation auslöst. */
#lookbook ul {
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}


/* Befund 3: Alle Kacheln haben `aspect-[3/4]`, aber sehr verschiedene Breiten
   (44vw gegen 24vw). Dadurch war Look 01 fast doppelt so hoch wie 02/03 und
   daneben stand eine grosse schwarze Fläche. Eine gemeinsame feste Höhe räumt
   das Loch weg; `object-fit: cover` im Bild bleibt unverändert. */
#lookbook ul > li > figure > .tile {
  aspect-ratio: auto;
  height: clamp(340px, 58svh, 560px);
}

#lookbook ul > li > figure {
  display: flex;
  flex-direction: column;
}

/* Befund 2: Die Pfeile sitzen am Abschnittsanfang. Sobald man die Bilder
   ansieht, sind sie aus dem Bild gescrollt — deshalb wirkten sie wirkungslos.
   surp-store.js hängt zusätzlich zwei mitlaufende Pfeile an den Rand des
   Karussells; hier steht nur ihr Aussehen. */
#lookbook {
  position: relative;
}

.surp-look-nav {
  position: absolute;
  top: 50%; /* Startwert; surp-store.js setzt die echte Höhe der Bildreihe. */
  z-index: 6;
  transform: translateY(-50%);
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(11, 11, 12, 0.72);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity 180ms ease, background-color 180ms ease, color 180ms ease;
}

.surp-look-nav[hidden] {
  display: none;
}

.surp-look-nav:hover {
  background: #fff;
  color: #0b0b0c;
}

.surp-look-nav:disabled {
  cursor: default;
  opacity: 0.25;
}

/* Logische Eigenschaften, damit die Pfeile auf der arabischen Fassung mitspiegeln. */
.surp-look-nav--prev {
  inset-inline-start: clamp(6px, 1.4vw, 20px);
}

.surp-look-nav--next {
  inset-inline-end: clamp(6px, 1.4vw, 20px);
}

[dir="rtl"] .surp-look-nav svg {
  transform: scaleX(-1);
}

.surp-look-nav svg {
  width: 20px;
  height: 20px;
}

@media (pointer: coarse) {
  /* Am Touchgerät wischt man ohnehin — dort stören die Pfeile nur. */
  .surp-look-nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Umbau 20.09.2026 (Adam): Das Produktgitter stand auf hellem Grau und sah
   dadurch nach Katalog aus, nicht nach der Marke. Es wandert auf die dunkle
   Markenfläche. Wichtig dabei: Die elf Teile sind schwarz und freigestellt —
   auf reinem Schwarz wären sie weg. Die Kachel bleibt deshalb eine eigene,
   etwas hellere Fläche mit weichem Lichtverlauf, damit die Silhouette steht.
   -------------------------------------------------------------------------- */
#collection {
  background-color: #0b0b0c;
  color: rgba(255, 255, 255, 0.92);
}

#collection h2,
#collection h3 {
  color: #fff;
}

#collection p {
  color: rgba(255, 255, 255, 0.68);
}

#collection .label {
  color: rgba(255, 255, 255, 0.5);
}

/* Die Kachel: dunkel, aber deutlich heller als der Grund. Der Verlauf setzt die
   Schulterpartie ab, damit ein schwarzes Shirt nicht mit dem Rand verschwimmt. */
#collection .product-tile {
  background-color: #17181a;
  background-image: radial-gradient(118% 88% at 50% 8%, #26282b 0%, #17181a 58%, #101113 100%);
}

#collection [data-product="true"] {
  color: rgba(255, 255, 255, 0.92);
}

/* Preis und Name standen als text-ink (fast schwarz) da. */
#collection .tabular-nums,
#collection [data-surp-price] {
  color: rgba(255, 255, 255, 0.88);
}

/* Filterknöpfe: heller Rahmen statt dunklem, aktiver Zustand weiß gefüllt. */
#collection .chip {
  border-color: rgba(255, 255, 255, 0.26);
  color: rgba(255, 255, 255, 0.78);
  background-color: transparent;
}

#collection .chip:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

#collection .chip[aria-pressed="true"],
#collection .chip.is-active {
  background-color: #fff;
  border-color: #fff;
  color: #0b0b0c;
}

/* Der Knopf auf der Kachel war dunkel auf hell — jetzt hell auf dunkel. */
#collection .product-tile .btn-dark {
  background-color: #fff;
  color: #0b0b0c;
  border-color: #fff;
}

#collection .surp-card-view {
  color: rgba(255, 255, 255, 0.78);
}

#collection .surp-card-view:hover {
  color: #fff;
}

/* Die weiße Farbprobe braucht auf Dunkel einen Rand, sonst schwebt sie frei. */
#collection .surp-color-swatch span {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

#collection .surp-color-swatch[aria-pressed="true"] span {
  box-shadow: 0 0 0 2px #fff;
}

/* Der Hero war 240svh hoch (Handy) bzw. 280svh (Desktop) — fast drei Bildschirme,
   bevor der erste Preis kommt. Die Scroll-Animation des S hängt an genau dieser
   Höhe: Sie wird dadurch nicht abgeschnitten, sondern läuft auf kürzerer Strecke
   ab. Der Produktstreifen im Hero (surp-store.js) bleibt unberührt. */
#hero > div[class*="svh"] {
  height: 165svh;
}

@media (min-width: 768px) {
  #hero > div[class*="svh"] {
    height: 195svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero > div[class*="svh"] {
    height: auto;
  }
}