/* Editorial product mosaic. The original hero and header are untouched. */
:root {
  --store-piece-ivory: #faf7f1;
  --store-piece-ink: #24211e;
  --store-piece-gold: #876b42;
  --store-piece-serif: Georgia, 'Times New Roman', serif;
}

#storeProductGrid .store-family-group > .store-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(13rem, 42vw);
  grid-auto-flow: row;
  gap: .4rem;
  justify-content: stretch;
}

#storeProductGrid .store-family-group > .store-product-grid > .store-editorial-piece {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--store-piece-ivory);
  box-shadow: none;
  transform: none;
}

#storeProductGrid .store-editorial-piece:hover {
  border: 0;
  box-shadow: none;
  transform: none;
}

#storeProductGrid .store-editorial-piece .store-product-link {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--store-piece-ink);
  text-decoration: none;
}

#storeProductGrid .store-editorial-piece .store-product-link::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(250,247,241,.88), transparent 30%, transparent 65%, rgba(250,247,241,.86));
}

#storeProductGrid .store-editorial-piece .store-product-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: linear-gradient(145deg, #fffaf4, #e9ddcb);
}

#storeProductGrid .store-editorial-piece .store-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#storeProductGrid .store-editorial-piece h3 {
  position: absolute;
  z-index: 2;
  top: clamp(.65rem, 2vw, 1.5rem);
  left: clamp(.65rem, 2vw, 1.5rem);
  right: .75rem;
  margin: 0;
  color: var(--store-piece-ink);
  font: 400 clamp(1.05rem, 2vw, 1.85rem) / 1.1 var(--store-piece-serif);
  overflow-wrap: anywhere;
}

#storeProductGrid .store-piece-cta {
  position: absolute;
  z-index: 2;
  left: clamp(.65rem, 2vw, 1.5rem);
  bottom: clamp(.65rem, 2vw, 1.5rem);
  display: inline-block;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--store-piece-gold);
  color: var(--store-piece-ink);
  font: 400 clamp(.8rem, 1.3vw, 1rem) var(--store-piece-serif);
}

#storeProductGrid .store-editorial-piece .store-product-link:focus-visible {
  outline: 3px solid var(--store-piece-gold);
  outline-offset: -3px;
}

#storeProductGrid .store-editorial-piece .store-card-carousel-controls {
  z-index: 3;
  top: 50%;
  opacity: 0;
  transition: opacity .2s ease;
}

#storeProductGrid .store-editorial-piece:hover .store-card-carousel-controls,
#storeProductGrid .store-editorial-piece:focus-within .store-card-carousel-controls { opacity: 1; }
#storeProductGrid .store-editorial-piece .store-card-carousel-indicator { display: none; }

/* Every five products form a new large/small editorial rhythm. */
#storeProductGrid .store-family-group > .store-product-grid > .store-editorial-piece:nth-child(5n + 1),
#storeProductGrid .store-family-group > .store-product-grid > .store-editorial-piece:nth-child(5n) { grid-column: span 2; }
#storeProductGrid .store-family-group > .store-product-grid:has(> .store-editorial-piece:nth-child(3)) > .store-editorial-piece:nth-child(5n + 1) { grid-row: span 2; }
#storeProductGrid .store-family-group > .store-product-grid > .store-editorial-piece:only-child { grid-column: 1 / -1; grid-row: span 1; }
#storeProductGrid .store-family-group > .store-product-grid:has(> .store-editorial-piece:nth-child(2)):not(:has(> .store-editorial-piece:nth-child(3))) > .store-editorial-piece:first-child { grid-column: span 1; }

@media (min-width: 768px) {
  #storeProductGrid .store-family-group > .store-product-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(15rem, 19vw, 20rem);
  }
  #storeProductGrid .store-family-group > .store-product-grid > .store-editorial-piece { grid-column: span 3; }
  #storeProductGrid .store-family-group > .store-product-grid > .store-editorial-piece:nth-child(5n + 1) { grid-column: span 3; }
  #storeProductGrid .store-family-group > .store-product-grid > .store-editorial-piece:nth-child(5n + 4) { grid-column: span 2; }
  #storeProductGrid .store-family-group > .store-product-grid > .store-editorial-piece:nth-child(5n) { grid-column: span 4; }
  #storeProductGrid .store-family-group > .store-product-grid > .store-editorial-piece:only-child { grid-column: 1 / -1; }
  #storeProductGrid .store-family-group > .store-product-grid > .store-editorial-piece:last-child:nth-child(5n + 4) { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  #storeProductGrid .store-family-group > .store-product-grid { grid-auto-rows: minmax(12rem, 55vw); }
  #storeProductGrid .store-editorial-piece h3 { font-size: clamp(1rem, 5vw, 1.3rem); }
}

@media (max-width: 359.98px) {
  #storeProductGrid .store-family-group > .store-product-grid { grid-template-columns: 1fr; grid-auto-rows: 17rem; }
  #storeProductGrid .store-family-group > .store-product-grid > .store-editorial-piece { grid-column: 1 / -1; grid-row: span 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  #storeProductGrid .store-editorial-piece .store-card-carousel-controls { transition: none; }
}