/* Opti Plaza product cards and prices (own code, 2026-09-28).
   Loaded by layout/theme.liquid right after op-luxury.css, so at equal specificity these rules settle the
   card the way the live cascade does. Used by snippets/card-product and snippets/price. */

/* ---- product card ------------------------------------------------------------------------------ */
.card-wrapper {
  position: relative;
  color: inherit;
  height: 100%;
  text-decoration: none;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  text-align: left;
}

.card__inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 0 solid rgba(var(--color-foreground), 0.1);
  transition: border-color 0.3s, transform 0.3s;
}

.card__inner.ratio::before {
  content: '';
}

.card__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}

.card__media {
  z-index: 0;
}

.card__media .media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* live look: no outline or rounding on the white plate (op-luxury.css draws one; the live cascade drops it) */
.product-card-wrapper .card__inner {
  border-width: 0;
  border-radius: 0;
}

.card--media .card__inner .card__content {
  position: relative;
  padding: 1rem;
}

.card__content {
  display: grid;
  position: static;
  grid-template-rows: minmax(0, 1fr) max-content minmax(0, 1fr);
  flex-grow: 1;
  padding: 1rem;
  width: 100%;
}

.card__information {
  grid-row-start: 2;
  padding: 1.3rem 1rem;
}

@media screen and (min-width: 750px) {
  .card--standard > .card__content .card__information {
    padding-top: 1.7rem;
    padding-bottom: 1.7rem;
  }
}

.card:not(.ratio) > .card__content {
  grid-template-rows: max-content minmax(0, 1fr) max-content auto;
}

.card--standard > .card__content {
  padding: 0;
}

.card--standard > .card__content .card__information {
  padding-left: 0;
  padding-right: 0;
}

.card--media .card__inner .card__information,
.card--standard.card--media .card__inner .card__information {
  display: none;
}

.card__heading {
  margin-top: 0;
  margin-bottom: 0;
}

.card__heading:last-child {
  margin-bottom: 0;
}

.card-information {
  text-align: left;
}

.card-wrapper .card-information > * + * {
  margin-top: 0.7rem;
}

.card-wrapper .card-information > .caption-with-letter-spacing {
  margin-top: 0.5rem;
  line-height: 1.4rem;
}

.card-information > .visually-hidden,
.card-information > .op-swatches {
  line-height: 1.4;
}

.card-information > .price {
  color: var(--ink);
  letter-spacing: 0.1rem;
}

.card__heading.h5 {
  margin-bottom: 0.6rem;
}

.card__heading a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card-wrapper .op-swatches {
  position: relative;
  z-index: 2;
}

/* Four chips and a "+N" need 178px; a phone card is 174px, and the grid track grew to the chips' width so the last
   chip poked past the card edge. Hold the text block to the card and let the chips give up those few pixels (their
   photos are object-fit: cover, so they only crop a little). */
.card-wrapper .card__information {
  min-width: 0;
}

.card-wrapper .op-swatches > .op-swatch {
  flex-shrink: 1;
  min-width: 0;
}

.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child,
  .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
    transition: transform 0.4s var(--ease);
  }

  .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
    opacity: 0;
  }

  .card-wrapper:hover .media.media--hover-effect > img + img {
    opacity: 1;
    transition: transform 0.4s var(--ease);
  }
}

/* ---- price ------------------------------------------------------------------------------------- */
.price {
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  line-height: 1.5;
  color: var(--ink);
}

.price > * {
  display: inline-block;
  vertical-align: top;
}

.price .price-item {
  display: inline-block;
  margin: 0 1rem 0 0;
}

.price__regular .price-item--regular {
  margin-right: 0;
}

.price__sale {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.price--on-sale .price-item--regular {
  text-decoration: line-through;
  color: var(--ink-75);
  font-size: 1.3rem;
}

.price--large {
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.13rem;
}

@media screen and (min-width: 750px) {
  .price--large {
    font-size: 1.8rem;
  }
}

.op-card__left,
.op-card__ship {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--op-sans, var(--font-body-family));
  font-size: 1.05rem;
  line-height: 1.4;
  letter-spacing: var(--op-track-mid, 0.12em);
  text-transform: uppercase;
  color: var(--op-muted, var(--ink-55));
}

.op-card__left {
  color: var(--op-ink, var(--ink));
}


/* model and colour code, when the title does not already carry it (card-product.liquid: op_card_code) */
.op-card__code {
  margin: 0.2rem 0 0.4rem;
  font-family: var(--op-sans, var(--font-body-family));
  font-size: 1.1rem;
  line-height: 1.4;
  letter-spacing: var(--op-track-mid, 0.12em);
  color: var(--op-muted, var(--ink-55));
}