/* product-card-variants.css — variant options on listing cards.
   Theme settings > Product card switches it; snippets/product-card.liquid renders the
   empty hooks, assets/product-card-variants.js fills them.

     .card-variants__row    swatches of the first option below the price — only for a
                            product whose variants have photos of their own
     .card-variants__sheet  every option, the picked variant's price and an add
                            button, shown BELOW the image (over the name and price)
                            while the card is hovered, on screens that hover — inside
                            one frame with the image
     [data-card-frame]      a card with NO sheet (no options, sold out, nothing to add)
                            where the sheet is switched on: a hover frames it the same
                            way — image, name, price and .card-frame__add, an add
                            button under the price when the product can be added */

/* ---- chips (row and sheet share them) ------------------------------------ */
.card-variants__chip {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 0 1.2rem;
  border: 0.1rem solid rgb(var(--color-foreground) / 0.25);
  border-radius: 0;
  background: transparent;
  color: rgb(var(--color-foreground));
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.card-variants__chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the rules above set display, which would beat the hidden attribute */
.card-variants__chip[hidden],
.card-variants__more[hidden] { display: none; }
.card-variants__chip[aria-pressed="true"] {
  border-color: rgb(var(--color-foreground));
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}
.card-variants__chip:focus-visible {
  outline: 0.2rem solid rgb(var(--color-foreground));
  outline-offset: 0.2rem;
}
@media (hover: hover) and (pointer: fine) {
  .card-variants__chip:hover { border-color: rgb(var(--color-foreground)); }
}

/* a variant's own photo instead of its name */
.card-variants__chip--photo {
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgb(var(--color-foreground) / 0.06);
}
.card-variants__chip--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-variants__chip--photo[aria-pressed="true"] {
  background: rgb(var(--color-foreground) / 0.06);
  box-shadow: 0 0 0 0.2rem rgb(var(--color-background)), 0 0 0 0.3rem rgb(var(--color-foreground));
}
@media (hover: hover) and (pointer: fine) {
  .card-variants__chip--photo:not([aria-pressed="true"]):hover {
    box-shadow: 0 0 0 0.2rem rgb(var(--color-background)), 0 0 0 0.3rem rgb(var(--color-foreground) / 0.4);
  }
}

/* no variant in stock behind this value (it can still be picked, to look at it) */
.card-variants__chip[data-card-variants-unavailable] { opacity: 0.45; }
.card-variants__chip[data-card-variants-unavailable]:not(.card-variants__chip--photo) > span { text-decoration: line-through; }
.card-variants__chip--photo[data-card-variants-unavailable]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right bottom, transparent calc(50% - 0.1rem), rgb(var(--color-foreground)), transparent calc(50% + 0.1rem));
  pointer-events: none;
}

/* ---- swatches of the first option, below the price ------------------------ */
.card-variants__row {
  /* above the link that covers the whole card */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: var(--content-alignment, flex-start);
  gap: 0.6rem;
  box-sizing: border-box;
  align-self: stretch;
  min-height: 3.6rem;
  /* the padding keeps a selection ring inside the clip; the margins give it back at
     the sides and the bottom, and leave 0.8rem between the price and the swatches */
  margin: 0 -0.4rem -0.4rem;
  padding: 0.4rem;
  overflow: hidden;
}
.card-variants__row .card-variants__chip {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
}
.card-variants__more {
  flex: none;
  color: rgb(var(--color-foreground) / 0.7);
  font-size: 1.2rem;
  line-height: 2.8rem;
  text-decoration: none;
  white-space: nowrap;
}
.card-variants__more:hover { color: rgb(var(--color-foreground)); }

/* A picked variant's photo stays on screen: the hover swap to the second image is the
   resting card's behaviour. */
.product-card__media.card-variants--photo:hover .product-card__image--first {
  opacity: 1;
  visibility: visible;
}
.product-card__media.card-variants--photo:hover .product-card__image--second {
  opacity: 0;
  visibility: hidden;
}

/* ---- every option, in the sheet a hover shows below the image ------------- */
.card-variants__sheet { display: none; }
.card-frame__add { display: none; }

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  /* The sheet overhangs the cards after this one, so the hovered card comes forward —
     and with it the list item, should that be a stacking context of its own. */
  .product-card[data-card-variants]:hover,
  .product-card[data-card-variants]:has(.card-variants__sheet :focus-visible),
  .product-card[data-card-variants]:has(.card-variants__sheet .transparent),
  :is(ul, .swiper-wrapper) > :has(> product-card[data-card-variants]:hover),
  :is(ul, .swiper-wrapper) > :has(> product-card[data-card-variants] .card-variants__sheet :focus-visible),
  :is(ul, .swiper-wrapper) > :has(> product-card[data-card-variants] .card-variants__sheet .transparent) {
    z-index: 5;
  }

  .product-card[data-card-frame]:hover,
  .product-card[data-card-frame]:has(.card-frame__add :focus-visible),
  .product-card[data-card-frame]:has(.card-frame__add .transparent),
  :is(ul, .swiper-wrapper) > :has(> product-card[data-card-frame]:hover),
  :is(ul, .swiper-wrapper) > :has(> product-card[data-card-frame] .card-frame__add :focus-visible),
  :is(ul, .swiper-wrapper) > :has(> product-card[data-card-frame] .card-frame__add .transparent) {
    z-index: 5;
  }
  /* ...and the carousel with them. <carousel-slider> is `contain: layout` — a stacking
     context of its own at z-index auto — so the card's z-index stopped at its edge, and
     the section after the carousel painted over a last-row sheet's overhang: its
     positioned elements (the countdown's images) took the pointer on the way to the
     sheet's add button, the hover ended and the sheet closed before the click. */
  carousel-slider:has(product-card[data-card-variants]:hover),
  carousel-slider:has(product-card[data-card-variants] .card-variants__sheet :focus-visible),
  carousel-slider:has(product-card[data-card-variants] .card-variants__sheet .transparent),
  carousel-slider:has(product-card[data-card-frame]:hover),
  carousel-slider:has(product-card[data-card-frame] .card-frame__add :focus-visible),
  carousel-slider:has(product-card[data-card-frame] .card-frame__add .transparent) {
    position: relative;
    z-index: 5;
  }
  /* The fill of the container sits BEHIND the card's content (z-index: -1). The card
     keeps it to itself at all times: without this the fill dropped behind the page the
     moment the pointer left, while the rest was still fading out. */
  .product-card[data-card-variants],
  .product-card[data-card-frame] { isolation: isolate; }

  /* Style steps: each step is a rounded box that clips what it holds — overflow AND a
     mask, both written inline on the <details>, hence !important — so the sheet was cut
     off at the step's bottom edge, its add button with it. While a sheet shows, the
     step lets it out downwards; sideways it still clips, for slides off to the side. */
  .product-suggestion__card:has(product-card:hover .card-variants__sheet),
  .product-suggestion__card:has(.card-variants__sheet :focus-visible),
  .product-suggestion__card:has(.card-variants__sheet .transparent),
  .product-suggestion__card:has(product-card[data-card-frame]:hover),
  .product-suggestion__card:has(.card-frame__add :focus-visible),
  .product-suggestion__card:has(.card-frame__add .transparent) {
    overflow-x: clip !important;
    overflow-y: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* the container a hover draws around the image and the sheet: how far it stands out
     from the image, and the image's corners moved out by as much (2rem -> 3.2rem; a
     square image keeps a square container) */
  .product-card[data-card-variants],
  .product-card[data-card-frame] {
    --card-variants-overhang: 1.2rem;
    --card-variants-radius: calc(var(--product-card-media-radius, 2rem) * 1.6);
    /* the add button under the price of a framed card, and the gap above it */
    --card-frame-add-height: 4.4rem;
    --card-frame-add-gap: 0.8rem;
    /* the space under the price of a framed card that has no add button */
    --card-frame-end: 2.4rem;
  }

  /* the reference turns the add button into a small round one on cards this narrow,
     and there it stays the way to the options */
  @container (min-width: 200px) {
    /* the options now sit below the image: the pill over it has nothing left to do */
    .product-card--standard .product-card__media .quick-add--variants { display: none; }

    /* While the sheet shows, it and the image stand in ONE container: a fill, a
       hairline and a shadow around both, so the options read as part of the card and
       not as a panel hung under it. Three boxes draw it, none of them measured by
       script:
         * the wrapper's ::before is the fill behind the image — the image's own
           corners moved out by the overhang, over the neighbouring cards;
         * the sheet's own fill carries on below, over the name and the price;
         * the sheet's ::before is the outline of both. Only the sheet knows where the
           container ends, so it belongs to the sheet and reaches up over the image.
       A percentage padding is measured on a WIDTH, and the image is (the card's width)
       / its ratio tall — that is how the two ::before boxes find the image's height. */
    .card-variants__sheet {
      /* no top: it starts where it stands, first thing under the image */
      position: absolute;
      inset-inline: 0;
      z-index: 3;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      /* the overhang lines its content up with the card's own */
      margin: calc(-1 * var(--card-variants-overhang)) calc(-1 * var(--card-variants-overhang)) 0;
      padding: var(--card-variants-overhang);
      border-radius: 0 0 var(--card-variants-radius) var(--card-variants-radius);
      background-color: rgb(var(--color-background));
      color: rgb(var(--color-foreground));
      text-align: start;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease;
    }
    .card-variants__sheet::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      bottom: 0;
      z-index: -1;
      box-sizing: content-box;
      height: 100%;
      /* 100% is the sheet's width: the card's plus the two overhangs */
      padding-block-start: calc((100% - 2 * var(--card-variants-overhang)) / var(--card-variants-ratio, 0.75) + var(--product-card-wrapper-gap, 1.6rem));
      border-radius: var(--card-variants-radius);
      /* no fill: it lies over the image, and a shadow is never drawn inside its box */
      box-shadow: 0 1.2rem 3.2rem rgb(0 0 0 / 0.14), 0 0 0 0.1rem rgb(var(--color-foreground) / 0.1);
      /* the image, the badges and an app's wishlist heart under it stay clickable */
      pointer-events: none;
    }
    .product-card__wrapper:has(.card-variants__sheet)::before {
      content: "";
      position: absolute;
      top: calc(-1 * var(--card-variants-overhang));
      inset-inline: calc(-1 * var(--card-variants-overhang));
      /* behind everything in the card, which is a stacking context while it shows */
      z-index: -1;
      height: 0;
      /* 100% is the card's width; it ends under the sheet's top edge */
      padding-block-start: calc(100% / var(--card-variants-ratio, 0.75) + var(--product-card-wrapper-gap, 1.6rem) + var(--card-variants-overhang));
      border-radius: var(--card-variants-radius) var(--card-variants-radius) 0 0;
      background-color: rgb(var(--color-background));
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease;
    }
    /* On show: the card is hovered, the keyboard is inside the sheet, or an add is in
       flight. Not plain focus — a chip the shopper clicked keeps focus, and would pin
       the sheet open after the pointer has left. */
    .product-card:hover .card-variants__sheet,
    .card-variants__sheet:has(:focus-visible),
    .card-variants__sheet:has(.transparent) {
      opacity: 1;
      pointer-events: auto;
      /* a beat before it shows, so a pointer crossing the grid does not flash a sheet
         on every card it passes; it leaves at once */
      transition-delay: 0.08s;
    }
    /* ...and the fill behind the image with it. It takes the pointer too, so the card
       stays hovered while the pointer crosses the container's edge around the image. */
    .product-card:hover .product-card__wrapper:has(.card-variants__sheet)::before,
    .product-card__wrapper:has(.card-variants__sheet :focus-visible)::before,
    .product-card__wrapper:has(.card-variants__sheet .transparent)::before {
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0.08s;
    }

    /* ---- a card with no sheet: the same container, drawn around the card itself ----
       Here the card's own box IS the container's content (image, name, price), so one
       box does it all: fill, hairline and shadow, standing out by the overhang. With an
       add button it runs on below the card by the button's height and the gap above
       it — both fixed, which is what lets CSS size it. */
    .product-card--standard .product-card__media .quick-add--frame { display: none; }

    .product-card[data-card-frame] .product-card__wrapper::before {
      content: "";
      position: absolute;
      inset: calc(-1 * var(--card-variants-overhang));
      /* Below, the card ends in text — the price, which has no margin of its own, while
         the image above carries its corner radius. The overhang alone left the price
         sitting on the container's edge, so the bottom takes more. */
      bottom: calc(-1 * var(--card-frame-end));
      z-index: -1;
      border-radius: var(--card-variants-radius);
      background-color: rgb(var(--color-background));
      box-shadow: 0 1.2rem 3.2rem rgb(0 0 0 / 0.14), 0 0 0 0.1rem rgb(var(--color-foreground) / 0.1);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease;
    }
    /* an add button closes the card instead: the overhang is enough under a button */
    .product-card[data-card-frame] .product-card__wrapper:has(.card-frame__add)::before {
      bottom: calc(-1 * (var(--card-variants-overhang) + var(--card-frame-add-gap) + var(--card-frame-add-height)));
    }
    .card-frame__add {
      /* no top: it starts where it stands, right under the price */
      position: absolute;
      inset-inline: 0;
      z-index: 3;
      display: block;
      padding-block-start: var(--card-frame-add-gap);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease;
    }
    /* grid, as every <add-to-cart-button> (transplant.css §9): the button and its loading
       overlay share one cell, so the spinner sits ON the button. `block` here used to
       out-rank that and flow the overlay below the button, outside it. */
    .card-frame__add > .card-variants__add { display: grid; margin: 0; }
    .card-frame__add .addToClassList { --button-height: var(--card-frame-add-height); }
    /* on show: as the sheet — the card is hovered, the keyboard is on the button, or an
       add is in flight */
    .product-card[data-card-frame]:hover .product-card__wrapper::before,
    .product-card[data-card-frame]:has(.card-frame__add :focus-visible) .product-card__wrapper::before,
    .product-card[data-card-frame]:has(.card-frame__add .transparent) .product-card__wrapper::before,
    .product-card[data-card-frame]:hover .card-frame__add,
    .card-frame__add:has(:focus-visible),
    .card-frame__add:has(.transparent) {
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0.08s;
    }
  }
}

.card-variants__panel {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  /* Two option groups fit; more of them, or more rows of values, scroll here — the
     sheet stays a small card whatever the product has. */
  max-height: 13.6rem;
  overflow-y: auto;
  scrollbar-width: thin;
  /* room for a selection ring against the scroll clip */
  margin: -0.4rem -0.4rem 0;
  padding: 0.4rem;
}
.card-variants__panel:empty { display: none; }
/* The options that do not fit scroll under a faded edge, and the last row clears it. */
.card-variants__panel[data-card-variants-overflow] {
  padding-block-end: 2rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent);
}
.card-variants__group {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.card-variants__label {
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 600;
}
.card-variants__current { font-weight: 400; }
.card-variants__values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.card-variants__panel .card-variants__chip {
  min-height: 2.6rem;
  padding-inline: 0.9rem;
  font-size: 1.2rem;
}
.card-variants__panel .card-variants__chip--photo {
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
}
.card-variants__price {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.8rem;
  margin-block-start: 0.8rem;
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 600;
}
.card-variants__price[hidden] { display: none; }
.card-variants__price-was {
  font-weight: 400;
  color: rgb(var(--color-foreground) / 0.6);
}
.card-variants__add {
  flex: none;
  margin-block-start: 0.8rem;
}
.card-variants__panel:empty + .card-variants__price[hidden] + .card-variants__add { margin-block-start: 0; }
.card-variants__add > .addToClassList {
  --button-height: 4.4rem;
  width: 100%;
}