/* Mission Control product layout metadata + storefront sale treatment. */

.page-shop .pcard,
[data-mc-product-grid] > [data-product-id] {
  grid-column: span 1;
}

.page-shop .pcard:nth-child(7n + 1) {
  grid-column: span 1;
}

.pgrid > [data-product-span-desktop="2"],
[data-mc-product-grid] > [data-product-span-desktop="2"] {
  grid-column: span 2;
}

.pgrid > [data-product-span-desktop="3"],
[data-mc-product-grid] > [data-product-span-desktop="3"] {
  grid-column: span 3;
}

.pcard[data-product-size="compact"] .pcard__tile {
  aspect-ratio: 4 / 3;
}

.pcard[data-product-size="feature"] .pcard__tile {
  aspect-ratio: 16 / 10;
}

.mc-discount {
  position: absolute;
  z-index: 3;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--olive) 42%, transparent);
  background: color-mix(in srgb, var(--paper) 86%, var(--olive));
  color: var(--forest);
  font-family: var(--f-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  isolation: isolate;
  animation: mc-discount-enter 760ms var(--ease) both;
}

.mc-discount::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -25% -12%;
  background: linear-gradient(
    102deg,
    transparent 22%,
    color-mix(in srgb, var(--olive) 14%, transparent) 48%,
    transparent 74%
  );
  transform: translateX(-48%);
  animation: mc-discount-matte-wash 1.15s 160ms var(--ease) both;
}

.mc-discount--pdp {
  position: relative;
  inset: auto;
  margin-inline-start: 12px;
  vertical-align: middle;
}

.pcard.is-mc-dragging {
  opacity: 0.48;
}

.pcard[draggable="true"] {
  cursor: grab;
}

.pcard[draggable="true"]:active {
  cursor: grabbing;
}

@keyframes mc-discount-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mc-discount-matte-wash {
  from {
    opacity: 0;
    transform: translateX(-48%);
  }
  45% {
    opacity: 0.7;
  }
  to {
    opacity: 0;
    transform: translateX(48%);
  }
}

@media (max-width: 1024px) {
  .pgrid > [data-product-span-desktop],
  [data-mc-product-grid] > [data-product-span-desktop] {
    grid-column: span 1;
  }

  .pgrid > [data-product-span-tablet="2"],
  [data-mc-product-grid] > [data-product-span-tablet="2"] {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .page-shop .pgrid,
  [data-mc-product-grid] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .pgrid > [data-product-span-desktop],
  .pgrid > [data-product-span-tablet],
  [data-mc-product-grid] > [data-product-span-desktop],
  [data-mc-product-grid] > [data-product-span-tablet] {
    grid-column: span 1;
  }

  .pgrid > [data-product-span-phone="2"],
  [data-mc-product-grid] > [data-product-span-phone="2"] {
    grid-column: span 2;
  }

  .pcard[data-product-size="compact"] .pcard__tile,
  .pcard[data-product-size="feature"] .pcard__tile {
    aspect-ratio: 1;
  }

  .mc-discount {
    inset-block-start: 8px;
    inset-inline-end: 8px;
    min-height: 26px;
    padding: 5px 7px;
    font-size: 0.62rem;
  }

  .mc-discount--pdp {
    inset: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-discount,
  .mc-discount::before {
    animation: none;
  }
}