.patches-size-dock {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(15rem, .7fr) minmax(24rem, 1.3fr);
  gap: 1.6rem 2.4rem;
  align-items: center;
  margin-top: 1.6rem;
  padding: 1.8rem 2rem;
  color: var(--color-text, #f3efe7);
  background: var(--color-surface-raised, #171a1c);
  border: 1px solid var(--color-border, #2b2e30);
  border-radius: var(--radius-card, 1rem);
  width: 100%;
}

.patches-product-size--mirrored {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.patches-size-dock__eyebrow {
  display: block;
  color: var(--color-accent, #c89a5a);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.patches-size-dock__title {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-heading, inherit);
  font-size: clamp(2rem, 2.5vw, 2.8rem);
  line-height: 1.05;
}

.patches-size-dock__result {
  margin: .7rem 0 0;
  color: var(--color-text-muted, #b9b5ad);
  font-size: 1.35rem;
}

.patches-size-dock__controls {
  display: grid;
  grid-template-columns: 4.8rem minmax(10rem, 1fr) 4.8rem minmax(8rem, 10rem);
  gap: 1rem;
  align-items: center;
}

.patches-size-dock__button,
.patches-size-dock__number-wrap {
  min-height: 4.8rem;
  border: 1px solid var(--color-border, #2b2e30);
  border-radius: var(--radius-button, .6rem);
  background: var(--color-surface, #0f1112);
}

.patches-size-dock__button {
  padding: 0;
  color: var(--color-text, #f3efe7);
  font-size: 2.4rem;
  font-weight: 700;
  cursor: pointer;
}

.patches-size-dock__button:hover,
.patches-size-dock__button:focus-visible {
  color: var(--color-canvas, #080a0b);
  background: var(--color-accent, #c89a5a);
  border-color: var(--color-accent, #c89a5a);
}

.patches-size-dock__range {
  width: 100%;
  accent-color: var(--color-accent, #c89a5a);
  cursor: pointer;
}

.patches-size-dock__number-wrap {
  display: flex;
  align-items: center;
  padding-inline: 1rem;
}

.patches-size-dock__number {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--color-text, #f3efe7);
  background: transparent;
  border: 0;
  font-size: 1.7rem;
  font-weight: 700;
  text-align: right;
}

.patches-size-dock__unit {
  margin-left: .4rem;
  color: var(--color-text-muted, #b9b5ad);
  font-size: 1.3rem;
}

@media (max-width: 767px) {
  .patches-size-dock {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.6rem;
  }

  .patches-size-dock__controls {
    grid-template-columns: 4.4rem minmax(8rem, 1fr) 4.4rem;
  }

  .patches-size-dock__number-wrap {
    grid-column: 1 / -1;
    width: 100%;
  }
}