/* ==========================================================================
   Street style (default preset): flagship-store language of high-end
   streetwear. One 12px grotesk for everything, 10px tracked capitals for
   labels, condensed capitals only for the wordmark, products on a soft
   grey well, black and white, nothing shouted.
   Spec: docs/design/street-flagship-spec.md.
   ========================================================================== */

.style-street {
  --street-ui: 0.75rem;
  --street-label: 0.625rem;
  --street-tracking: 0.05em;
  --street-label-tracking: 0.14em;
  --street-display-tracking: -0.01em;
  --street-image-well: var(--color-well);
  --street-gutter: 0.875rem;
  --street-rule: 1px solid var(--color-hairline);
}

body.style-street {
  font-size: var(--street-ui);
  line-height: 1.41;
  letter-spacing: var(--street-tracking);
}

/* ---------- Type: one size, tracked labels ---------- */
.style-street :is(
    .product-card__title,
    .product-card__price,
    .cart-item__title,
    .look__products a,
    .floor-plan__name,
    .faq__question,
    .pickup__location,
    .work__title,
    .lookbook-list__title,
    .wall-label__title,
    .product-vendor,
    .collection__title,
    .showcase__title,
    .carousel__title
  ) {
  font-family: var(--font-body--family);
  font-size: var(--street-ui);
  font-style: normal;
  font-weight: 400;
  letter-spacing: var(--street-tracking);
  line-height: 1.41;
  text-transform: none;
}

.style-street :is(
    .eyebrow,
    .site-header__link,
    .button,
    .facets__count,
    .product-card__vendor,
    .site-footer__heading,
    .drawer__title,
    .heading--l,
    .variant-option__legend,
    .campaign__button
  ),
.style-street h2:not(.heading--xl):not(.room__title):not(.collection__title) {
  font-family: var(--font-body--family);
  font-size: var(--street-label);
  font-style: normal;
  font-weight: 500;
  letter-spacing: var(--street-label-tracking);
  line-height: 1.35;
  text-transform: uppercase;
}

/* Display type only where the brand speaks: wordmarks, campaign lines. */
.style-street :is(h1, .heading--xl, .lookbook__title, .room__title, .entrance__mark, .opening__mark, .countdown__done) {
  font-family: var(--font-heading--family);
  font-style: normal;
  font-weight: var(--font-heading--weight);
  letter-spacing: var(--street-display-tracking);
  line-height: 0.9;
  text-transform: uppercase;
}

.style-street .campaign__heading {
  font-size: calc(clamp(1.75rem, 1rem + 2.5vw, 3.5rem) * var(--heading-scale));
}

.style-street .lookbook__title,
.style-street .room__title {
  font-size: calc(clamp(2.5rem, 1rem + 5vw, 6rem) * var(--heading-scale));
}

/* Product title on the product page is a quiet line, like the reference. */
.style-street .product-title {
  font-family: var(--font-body--family);
  font-size: var(--street-ui);
  font-weight: 400;
  letter-spacing: var(--street-tracking);
  line-height: 1.41;
  text-transform: none;
}

/* Mono details: clock, countdown, counters. */
.style-street :is(.countdown__value, .countdown__label, .store-clock, .product-gallery__counter, .hotspot__number, .carousel__rank) {
  font-family: var(--font-mono--family);
  letter-spacing: 0;
}

.style-street .countdown__value {
  font-size: calc(clamp(3rem, 1rem + 7vw, 7.5rem) * var(--heading-scale));
  font-weight: 400;
  line-height: 1;
}

/* ---------- Header ---------- */
.style-street .site-header {
  border-block-end: var(--street-rule);
}

.style-street .site-header--sticky {
  background: var(--color-background);
}

.style-street .site-header__mark {
  font-family: var(--font-heading--family);
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.125rem);
  font-weight: var(--font-heading--weight);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Menu: dark side panel with small tracked links ---------- */
.style-street .menu-dialog {
  width: min(100%, 24rem);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
}

.style-street .menu-dialog::backdrop {
  background: rgb(0 0 0 / 0.35);
}

.style-street .menu-dialog__inner {
  padding: 1.25rem 2rem 2rem;
}

.style-street .menu-dialog__list {
  gap: 1.15rem;
}

.style-street .menu-dialog__link,
.style-street .menu-dialog__sublink {
  font-family: var(--font-body--family);
  font-size: var(--street-label);
  font-weight: 400;
  letter-spacing: var(--street-label-tracking);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-foreground-muted);
  transition: color 150ms ease;
}

.style-street .menu-dialog__link:hover,
.style-street .menu-dialog__link[aria-current='page'],
.style-street .menu-dialog__group[open] > summary,
.style-street .menu-dialog__sublink:hover {
  color: var(--color-foreground);
  text-decoration: none;
}

.style-street .menu-dialog__sublist {
  gap: 0.9rem;
  padding-block: 1rem 0.25rem;
  padding-inline-start: 1rem;
}

.style-street .menu-dialog .site-header__link {
  color: var(--color-foreground);
}

/* ---------- Buttons: black, square, tall, tracked ---------- */
.style-street .button {
  min-height: 3rem;
  border-radius: 0;
  letter-spacing: 0.1em;
}

.style-street .buy-buttons__add {
  min-height: 3.75rem;
}

.style-street .campaign__button {
  min-height: 2.5rem;
  padding: 0 1.25rem;
}

/* ---------- Collection: quiet title bar + grid ---------- */
.style-street .collection {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  padding-block: 0 4rem;
}

.style-street .collection > :not(.collection__header, .facets) {
  grid-column: 1 / -1;
}

.style-street .collection__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.8rem;
  max-width: none;
  border-block-end: var(--street-rule);
}

.style-street .collection__title {
  margin: 0;
}

.style-street .collection__title .kinetic__mask,
.style-street .collection__title .kinetic__word {
  animation: none;
  transform: none;
}

.style-street .collection__description {
  display: none;
}

.style-street .facets {
  align-content: center;
  gap: 0;
  padding: 0;
  border-block: 0;
  border-block-end: var(--street-rule);
}

.style-street .facets__toolbar {
  justify-content: flex-end;
  gap: 1.5rem;
  min-height: 2.8rem;
}

.style-street .facets__sort select {
  font-size: var(--street-ui);
  letter-spacing: var(--street-tracking);
}

.style-street .facets__chip {
  border-radius: 0;
}

.style-street [data-facets-swap='results'] {
  padding-block-start: 1.5rem;
}

.style-street .product-grid {
  gap: 2.5rem var(--street-gutter);
}

/* ---------- Product card: image well, title left / price right ---------- */
.style-street .product-card {
  gap: 0.75rem;
}

.style-street .product-card__media {
  background: var(--street-image-well);
}

.style-street .product-card:hover .product-card__image {
  transform: none;
}

.style-street .product-card__info {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 1rem;
}

.style-street .product-card__vendor {
  display: none;
}

.style-street .product-card__title a:hover {
  text-decoration: none;
  opacity: 0.6;
}

.style-street .product-card__price {
  text-align: end;
  white-space: nowrap;
}

.style-street .product-card__price s {
  color: var(--color-foreground-muted);
}

.style-street .product-card .unit-price {
  grid-column: 1 / -1;
}

/* ---------- Product page ---------- */
.style-street .product__media {
  background: transparent;
}

.style-street .product-gallery__item {
  background: var(--street-image-well);
}

.style-street .product-gallery__list {
  gap: var(--street-gutter);
}

.style-street .variant-option__value {
  min-height: 2.4rem;
  border-color: var(--color-hairline);
  border-radius: 0;
  font-size: var(--street-label);
  letter-spacing: var(--street-tracking);
}

.style-street .variant-option__value--swatch {
  width: 2.7rem;
  height: 2.7rem;
  min-height: 0;
  border-radius: 0;
}

/* ---------- Gallery pieces in the street language ---------- */
.style-street .wall-label {
  border-color: var(--color-foreground);
  box-shadow: none;
}

.style-street .hotspot__dot {
  width: 1.75rem;
  height: 1.75rem;
  background: var(--color-foreground);
  color: var(--color-background);
  box-shadow: none;
}

.style-street .hotspot__dot::after {
  border-color: var(--color-foreground);
}

.style-street .doorway {
  background: var(--color-foreground);
  border-color: var(--color-foreground);
  backdrop-filter: none;
}

.style-street .floor-plan__room {
  border-color: var(--color-foreground);
}

.style-street :is(.look__open, .lookbook-list__media, .split__media) {
  background: var(--street-image-well);
}

.style-street .lookbook__grid {
  gap: 3rem var(--street-gutter);
}

/* ---------- Drops & accents ---------- */
.style-street .sold-dot {
  border-radius: 0;
  background: var(--color-accent);
}

.style-street .announcement {
  font-family: var(--font-mono--family);
  font-size: var(--street-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.style-street :is(.cart-item__discount, .form-error) {
  color: var(--color-accent);
}

@media (max-width: 989px) {
  .style-street .collection {
    grid-template-columns: 1fr;
  }

  .style-street .facets__toolbar {
    justify-content: space-between;
  }
}

/* Product price reads at the body size, like the title above it. */
.style-street .product-price,
.style-street .product-price__current {
  font-family: var(--font-body--family);
  font-size: var(--street-ui);
  font-weight: 400;
  letter-spacing: var(--street-tracking);
}