body:has(.erewhon-campaign:not([hidden])) { background: #fff; }

.erewhon-campaign .campaign-link,
.erewhon-campaign .campaign-panel:hover .campaign-link {
  border-radius: 999px;
  font: 400 12px var(--mono);
  letter-spacing: .03em;
}

.home-collection {
  padding: clamp(24px, 5vw, 64px) 0;
  background: #fff;
  color: #111;
  text-align: center;
}

.home-collection-track {
  display: flex;
  --collection-gap: clamp(8px, 2vw, 24px);
  gap: var(--collection-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.home-collection-track::-webkit-scrollbar { display: none; }

.home-collection-product {
  flex: 0 0 24%;
  min-width: 0;
  scroll-snap-align: start;
}

.home-collection-product img {
  display: block;
  width: 100%;
  height: auto;
}

.home-collection-actions {
  display: flex;
  justify-content: center;
  padding: 20px 12px 20px;
}

.home-collection-actions a {
  display: inline-block;
  line-height: 20px;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 11px 24px;
  color: inherit;
  background: transparent;
  text-decoration: none;
  font-family: var(--mono, monospace);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: lowercase;
}

.home-collection-actions a:hover { color: #fff; background: #111; }
.home-collection :is(a, [tabindex]):focus-visible { outline: 2px solid #111; outline-offset: -2px; }

@media (max-width: 700px) {
  .home-collection-product { flex-basis: 40%; }
}

.hat-recommendations h2 {
  margin: 0 0 18px;
  font-size: 20px;
}

.hat-recommendations[hidden] {
  display: none;
}

.erewhon-campaign .campaign-photos .campaign-photo {
  height: clamp(360px, 58svh, 680px);
  object-position: right 83%;
}

.campaign-shop {
  position: absolute;
  right: 20%;
  bottom: 8%;
  transform: translateX(50%);
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: 0 24px;
  background: #fff;
  color: #111;
  font-weight: 700;
  text-decoration: none;
}

.campaign-shop:hover,
.campaign-shop:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.home-editorial-photo {
  display: block;
  width: 100cqw;
  height: auto;
  max-width: none;
  margin-inline: calc(50% - 50cqw);
}

#home-hats { padding-block: clamp(20px, 3vw, 40px); }

.home-collections > .home-collection {
  padding-inline: clamp(12px, 3vw, 48px);
}

/* Bring the crewneck photo's off-white backdrop up to the rail's white. */
#home-hoodies-track img[src*="/erewhon-varsity-crewneck.webp"] {
  filter: brightness(1.035);
}

#home-hats-heading { margin: 0 0 8px; font-size: clamp(19px, 2.3vw, 28px); }
#home-hats-track, #home-hoodies-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#home-hats-track a, #home-hoodies-track a, #home-sweats-track a { color: inherit; text-decoration: none; }
#home-sweats-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: calc((100% - var(--collection-gap)) / 2);
  margin-inline: auto;
  overflow: visible;
}
.hat-card-caption { display: grid; gap: 3px; padding: 5px 3px; }
.hat-card-caption span { color: #555; font-size: .875rem; }
.size-guide { margin: 0 0 14px; font-size: .875rem; }
.size-guide summary { cursor: pointer; text-decoration: underline; }

@media (max-width: 700px) {
  .erewhon-campaign .campaign-photos .campaign-photo {
    height: clamp(360px, 64svh, 570px);
    object-position: right 79%;
  }
  .campaign-shop { right: 50%; bottom: 5%; }
  #home-hats-track, #home-hoodies-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #home-sweats-track { width: 100%; }
}

.hat-shipping-offer { margin: 0 0 8px; color: #555; font-size: .875rem; }

/* Use the same photo framing wherever shoppers compare products. */
.home-collection-product img {
  aspect-ratio: 1;
  object-fit: contain;
}

.product-open .product-photo {
  aspect-ratio: 1;
}

.cart-item img,
.cart-rec img {
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
}

.gallery-track .gallery-frame {
  min-width: 0;
  min-height: 0;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

.gallery-frame img[src*="-snapback-back.webp"],
.viewer-frame img[src*="-snapback-back.webp"] {
  transform: scale(.84);
}

.model-slide img {
  object-fit: contain;
}

.hoodie-layout .hoodie-photo,
.crewneck-gallery img {
  display: block;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.crewneck-gallery img {
  background: #fff;
}

.home-collection-product:focus,
.home-collection-actions a:focus,
.campaign-shop:focus {
  outline: 3px solid #2659bd;
  outline-offset: -3px;
}

/* Transparent apparel photos share the same white surface in each listing. */
.home-collection-product img,
.product-card--apparel .product-photo,
.hoodie-layout .hoodie-photo {
  background-color: #fff;
}
.product-card--apparel .product-card-img {
  mix-blend-mode: normal;
}

.home-model-banner {
  overflow: hidden;
  background: #fff;
}

.home-model-banner img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  /* Keep the models inside the outer edges of the product photos. */
  .home-model-banner img {
    width: 122%;
    max-width: none;
    margin-left: -11%;
  }
}

body:not(.store-enhanced) .gallery :is(.gallery-arrow, .gallery-count, .gallery-dots),
body:not(.store-enhanced) .header-cart {
  display: none;
}

:is(#home-hoodies-track, #home-hats-track) .apparel-card-name {
  white-space: nowrap;
  font-size: clamp(11px, 3vw, 16px);
}

.apparel-review {
  display: grid;
  justify-items: inherit;
  gap: 2px;
  color: #555;
  font-size: .75rem;
}

.apparel-review-stars {
  font-size: .95rem;
  line-height: 1;
}

.erewhon-campaign :is(.campaign-shop, .home-collection-actions a) {
  border: 2px solid #d49316;
  border-radius: 999px;
}

/* Keep studio product photos flush with the white storefront. */
.product-view-open :is(.gallery-stage, .gallery-frame, .viewer-frame),
.store-screen .product-photo {
  background: #fff;
}

.hat-recommendations .home-collection-product {
  color: inherit;
  text-decoration: none;
}

.hat-recommendations .home-collection-product span {
  display: block;
  padding: 6px 4px;
  font-size: .875rem;
}

.hoodie-main :is(.hoodie-photo, .design img)[src$="/erewhon-hoodie-oatmeal-stacked-sleeve.jpeg"] {
  filter: brightness(1.09);
}

.hoodie-main :is(.hoodie-photo, .design img)[src$="/erewhon-hoodie-oatmeal.jpeg"] {
  filter: brightness(1.25);
}