/* Decorative stitch-grid accents — sparse crosses, woven through page fields */

.tile-accent {
  display: grid;
  grid-template-columns: repeat(3, var(--size-tile-cell));
  grid-template-rows: repeat(3, var(--size-tile-cell));
  width: calc(var(--size-tile-cell) * 3);
  height: calc(var(--size-tile-cell) * 3);
  pointer-events: none;
}

.tile-accent__cell {
  background: transparent;
}

.tile-accent__cell--cream {
  background-color: var(--color-bg-subtle);
}

.tile-accent__cell--fill {
  background-color: var(--color-fg-accent);
}

.tile-accent--olive .tile-accent__cell--cream,
.tile-accent--olive .tile-accent__cell--fill {
  background-color: var(--color-fg-accent);
}

/* Tapestry sits behind scrollable page content */
.tapestry-field,
.catalog-field {
  position: relative;
  overflow: visible;
}

.tapestry-field > :not(.catalog-tapestry),
.catalog-field > :not(.catalog-tapestry) {
  position: relative;
  z-index: 1;
}

.catalog-tapestry {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-transition-panel);
}

.catalog-tapestry--visible {
  opacity: 1;
}

.catalog-tapestry[hidden] {
  display: none;
}

.catalog-tapestry__cross,
.catalog-tapestry__stack {
  position: absolute;
}

.catalog-tapestry__stack {
  display: flex;
  flex-direction: column;
}

/* Catalog page — full scroll tapestry */
.catalog-tapestry__cross--header {
  top: 4%;
  right: 6%;
}

.catalog-tapestry__cross--tools {
  top: 16%;
  left: 0;
}

.catalog-tapestry__cross--matrix {
  top: 36%;
  right: -4rem;
}

.catalog-tapestry__cross--plants {
  top: 52%;
  left: 2%;
}

.catalog-tapestry__stack--living {
  top: 70%;
  left: -3rem;
}

.catalog-tapestry__cross--tail {
  top: 86%;
  right: 8%;
}

/* Content pages — visit, nursery, cart, checkout */
.catalog-tapestry--sparse .catalog-tapestry__cross--sparse-a {
  top: 6%;
  right: 5%;
}

.catalog-tapestry--sparse .catalog-tapestry__cross--sparse-b {
  top: 42%;
  left: -2rem;
}

.catalog-tapestry--sparse .catalog-tapestry__cross--sparse-c {
  bottom: 10%;
  right: 8%;
}

/* Long-form content pages — two accents, widely spaced */
.catalog-tapestry--minimal .catalog-tapestry__cross--minimal-a {
  top: 12%;
  right: 5%;
}

.catalog-tapestry--minimal .catalog-tapestry__cross--minimal-b {
  bottom: 18%;
  left: -2rem;
}

/* Homepage — feature bands below hero */
.catalog-tapestry--home .catalog-tapestry__cross--home-a {
  top: 8%;
  right: 0;
}

.catalog-tapestry--home .catalog-tapestry__cross--home-b {
  top: 48%;
  left: -2rem;
}

.catalog-tapestry--home .catalog-tapestry__cross--home-c {
  bottom: 8%;
  right: 6%;
}

/* Product detail */
.catalog-tapestry--product .catalog-tapestry__cross--product-a {
  top: 18%;
  right: 3%;
}

.catalog-tapestry--product .catalog-tapestry__cross--product-b {
  top: 62%;
  left: -1.5rem;
}

@media (max-width: 767px) {
  .catalog-tapestry__cross--matrix,
  .catalog-tapestry__stack--living,
  .catalog-tapestry--sparse .catalog-tapestry__cross--sparse-b,
  .catalog-tapestry--minimal .catalog-tapestry__cross--minimal-b,
  .catalog-tapestry--home .catalog-tapestry__cross--home-b,
  .catalog-tapestry--product .catalog-tapestry__cross--product-b {
    opacity: 0.45;
  }

  .catalog-tapestry__cross--matrix {
    right: -6rem;
  }

  .catalog-tapestry__stack--living {
    left: -5rem;
  }

  .catalog-tapestry--sparse .catalog-tapestry__cross--sparse-b {
    left: -4rem;
  }

  .catalog-tapestry--minimal .catalog-tapestry__cross--minimal-b {
    left: -4rem;
  }

  .catalog-tapestry--home .catalog-tapestry__cross--home-b {
    left: -4rem;
  }

  .catalog-tapestry--product .catalog-tapestry__cross--product-b {
    left: -3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-tapestry {
    transition: none;
  }
}