/*
 * Host-side styles for the Tip Top Hydrogen PDP theme app block.
 *
 * Theme app extension blocks cannot use the {% stylesheet %} tag, so this ships
 * as an asset and is loaded from the block with `asset_url | stylesheet_tag`.
 */

.hydrogen-pdp {
  position: relative;
  width: 100%;
}

.hydrogen-pdp__frame {
  border: 0;
  display: block;
  width: 100%;
  /* The height is owned by hydrogen-pdp.js once the frame reports itself. */
  transition: height 120ms ease-out;
}

/* The base author rule overrides the browser default for the hidden attribute. */
.hydrogen-pdp__frame[hidden] {
  display: none;
}

/* Values mirror the framed PDP tokens: surface-muted and the slow pulse. */
.hydrogen-pdp {
  --hydrogen-pdp-skeleton: #edecea;
  --hydrogen-pdp-ease: cubic-bezier(0.46, 0.01, 0.32, 1);
  container-type: inline-size;
}

.hydrogen-pdp--loading .hydrogen-pdp__frame {
  /* Keep the loading document rendering and measuring beneath the skeleton. */
  opacity: 0;
  pointer-events: none;
}

/* Fades the frame in once, as the skeleton fades out. */
.hydrogen-pdp:not(.hydrogen-pdp--loading) .hydrogen-pdp__frame {
  animation: hydrogen-pdp-reveal 200ms ease-out;
}

/* The status element is announced, not shown; the skeleton is the visual. */
.hydrogen-pdp__loading {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/*
 * The skeleton redraws the framed PDP's layout, because the frame's own
 * stylesheet cannot reach this page. Each rule names the frame rule it copies
 * (app/styles/app/embed.css and app/styles/app/product/*.css). Inside the frame
 * `100vw` is this block's width, so `vw` there is `cqi` here; `100vh` is the
 * same in both, since the block relays its window height to the frame.
 */
.hydrogen-pdp__skeleton {
  box-sizing: border-box;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  /*
   * embed.css pads the frame's body 16px. The embed document renders no
   * `body > main`, so reset.css adds no second gutter.
   */
  padding-inline: 16px;
  pointer-events: none;
  position: absolute;
  transition:
    opacity 200ms ease-out,
    visibility 0s linear 200ms;
  visibility: hidden;
}

.hydrogen-pdp--loading .hydrogen-pdp__skeleton {
  opacity: 1;
  transition: none;
  visibility: visible;
}

.hydrogen-pdp__skeleton *,
.hydrogen-pdp__skeleton *::before,
.hydrogen-pdp__skeleton *::after {
  box-sizing: border-box;
}

.hydrogen-pdp__skeleton span {
  animation: hydrogen-pdp-pulse 500ms var(--hydrogen-pdp-ease) infinite
    alternate;
  background: var(--hydrogen-pdp-skeleton);
  display: block;
}

/* A short stagger per component so the parts read as separate pieces. */
.hydrogen-pdp__skeleton-main span {
  animation-delay: 120ms;
}

/* page.css `.product`, inside the body's 1850px cap. */
.hydrogen-pdp__skeleton-product {
  margin-inline: auto;
  max-inline-size: 1850px;
}

/* gallery.css below 750px: the first slide of the mobile track. */
.hydrogen-pdp__skeleton-gallery {
  overflow: hidden;
  padding-block-end: 5px;
}

.hydrogen-pdp__skeleton-thumbs {
  display: none;
}

.hydrogen-pdp__skeleton-stage {
  aspect-ratio: var(--hydrogen-pdp-stage-ratio, 4 / 5);
  inline-size: min(284px, 100%);
}

/* embed.css pads the details column 1rem on every side up to 1024px. */
.hydrogen-pdp__skeleton-main {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* Text pills: page.css and purchase.css `.product-skeleton-*`. */
.hydrogen-pdp__skeleton-line {
  block-size: 1rem;
  border-radius: 9999px;
}

/* The vendor slot is 1.5rem tall; its pill is 1rem. */
.hydrogen-pdp__skeleton-vendor {
  inline-size: min(40%, 8rem);
  margin-block-end: 0.5rem;
}

.hydrogen-pdp__skeleton-title {
  block-size: 2rem;
  inline-size: 85%;
  margin-block-end: 0.5rem;
}

.hydrogen-pdp__skeleton-price {
  block-size: 1.75rem;
  inline-size: 6rem;
  margin-block-end: 0.75rem;
}

/*
 * purchase.css: the PayPal message shell reserves 2.625rem while it loads and
 * centres a pill in it.
 */
.hydrogen-pdp__skeleton-paypal {
  inline-size: min(70%, 14rem);
  margin-block: 0.8125rem;
}

/* purchase.css `.suit-separate-promotion`: one 12px line of banner. */
.hydrogen-pdp__skeleton-promotion {
  block-size: 20px;
}

/* suit-separates.css: each part is a 44px disclosure row, 5px apart. */
.hydrogen-pdp__skeleton-disclosure {
  block-size: 44px;
  margin-block-end: 5px;
}

/* A closed row keeps its 5px options padding, so closed rows are 54px apart. */
.hydrogen-pdp__skeleton-disclosure + .hydrogen-pdp__skeleton-disclosure {
  margin-block-start: 5px;
}

/*
 * `.suit-separate-bundle-submit`: the last row's 5px padding, the submit's 8px
 * margin and 5px padding, then a 24px total line and 5px above Add to cart.
 */
.hydrogen-pdp__skeleton-total {
  align-self: flex-end;
  inline-size: 40%;
  margin-block: 22px 9px;
}

.hydrogen-pdp__skeleton-bundle {
  display: flex;
  flex-direction: column;
}

.hydrogen-pdp__skeleton-bundle + .hydrogen-pdp__skeleton-cta {
  margin-block-start: 0;
}

/* An option legend, such as "Colour: Black" or "Waist": a 24px line. */
.hydrogen-pdp__skeleton-label {
  inline-size: 30%;
  margin-block-end: 0.5rem;
}

/*
 * swatch-picker.css: 26px chips, 8px apart. color-selector.css puts the legend
 * 8px above them and the fieldset 10px above what follows.
 */
.hydrogen-pdp__skeleton-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 8px 10px;
}

.hydrogen-pdp__skeleton-swatches span {
  block-size: 26px;
  inline-size: 26px;
}

/* color-selector.css photo tiles: four to a row, 4px apart, 9 / 10. */
.hydrogen-pdp__skeleton-swatches--photo {
  gap: 4px;
}

.hydrogen-pdp__skeleton-swatches--photo span {
  aspect-ratio: 9 / 10;
  block-size: auto;
  inline-size: calc(25% - 8px);
  max-inline-size: 90px;
}

/*
 * options.css: size buttons five to a row, 42.5px tall, 10px apart, 5px above
 * and below the grid. Size groups sit about 4.5px apart.
 */
.hydrogen-pdp__skeleton-sizes {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-block: 5px 9.5px;
}

.hydrogen-pdp__skeleton-sizes span {
  block-size: 42.5px;
}

/* purchase.css `.product-add-to-cart`, full column width. */
.hydrogen-pdp__skeleton-cta {
  block-size: 3rem;
  margin-block: 0 16px;
}

/* The "Find a store near you" link under Add to cart. */
.hydrogen-pdp__skeleton-link {
  block-size: 0.875rem;
  inline-size: 38%;
  margin-inline: auto;
}

/* page.css `.product-skeleton-description`. */
.hydrogen-pdp__skeleton-description {
  display: grid;
  gap: 0.5rem;
  margin-block-start: 2rem;
}

.hydrogen-pdp__skeleton-heading {
  inline-size: 30%;
}

.hydrogen-pdp__skeleton-short {
  inline-size: 65%;
}

/* The frame's own media queries see this block's width, so query it too. */
@container (min-width: 750px) {
  /* purchase.css from 750px: the band's line is 24px. */
  .hydrogen-pdp__skeleton-promotion {
    block-size: 32px;
  }

  /* page.css `.product` from 750px. */
  .hydrogen-pdp__skeleton-product {
    align-items: flex-start;
    display: flex;
    inline-size: calc(100% - 8px);
    justify-content: center;
    /* The frame caps its body at 1850px, then takes 8px off for `.product`. */
    max-inline-size: calc(1850px - 8px);
  }

  /* page.css `.product-gallery` and gallery.css `.product-gallery-desktop`. */
  .hydrogen-pdp__skeleton-gallery {
    align-items: flex-start;
    display: flex;
    flex: 0 0 53.13%;
    gap: 16px;
    max-inline-size: 53.13%;
    min-inline-size: 0;
    padding-block-end: 0;
  }

  .hydrogen-pdp__skeleton-thumbs {
    block-size: calc(100vh - 140px);
    display: flex;
    flex: 0 0 184px;
    flex-direction: column;
    gap: 16px;
    /*
     * Its pills have no content, so without a width it adds nothing to the
     * gallery's own width and the stage gives up 184px to make room.
     */
    inline-size: 184px;
    overflow: hidden;
  }

  .hydrogen-pdp__skeleton-thumbs span {
    /* The block's chosen image ratio, when it sets one. */
    aspect-ratio: var(--hydrogen-pdp-thumb-ratio, 4 / 5);
    flex: 0 1 auto;
    inline-size: 100%;
    min-block-size: 0;
  }

  /*
   * The column shrinks its placeholders to fit its height. With a chosen
   * ratio each one narrows with that height to keep the shape, aligned to the
   * stage as gallery.css aligns the real rail.
   */
  .hydrogen-pdp__skeleton--framed .hydrogen-pdp__skeleton-thumbs {
    align-items: flex-end;
  }

  /* Empty, so each starts at a full-width thumbnail's height and shrinks. */
  .hydrogen-pdp__skeleton--framed .hydrogen-pdp__skeleton-thumbs span {
    flex-basis: calc(184px / (var(--hydrogen-pdp-thumb-ratio)));
    inline-size: auto;
    max-inline-size: 100%;
  }

  /* gallery.css `.product-gallery-stage`: its height budget caps its width. */
  .hydrogen-pdp__skeleton-stage {
    flex: 1 1 auto;
    inline-size: auto;
    max-inline-size: calc(
      (100vh - 140px) * var(--hydrogen-pdp-stage-ratio, 4 / 5)
    );
    min-inline-size: 0;
  }

  .hydrogen-pdp__skeleton-main {
    flex: 0 0 46.87%;
    inline-size: 46.87%;
    max-inline-size: 46.87%;
  }
}

@container (min-width: 1025px) {
  /* purchase.css: the price line is 2rem tall from 1025px. */
  .hydrogen-pdp__skeleton-price {
    block-size: 2rem;
  }

  .hydrogen-pdp__skeleton-gallery {
    flex: 0 1 auto;
    inline-size: auto;
    max-inline-size: 75%;
  }

  .hydrogen-pdp__skeleton-stage {
    flex: 0 1 auto;
    inline-size: min(
      calc(75cqi - 200px),
      calc((100vh - 140px) * var(--hydrogen-pdp-stage-ratio, 4 / 5))
    );
  }

  /* The details column is a quarter wide, padded only at its start. */
  .hydrogen-pdp__skeleton-main {
    flex: 0 1 auto;
    inline-size: 25%;
    max-inline-size: 25%;
    padding: 0 0 0 16px;
  }
}

/*
 * The collection skeleton redraws the framed collection the same way. Each rule
 * names the frame rule it copies (app/styles/app/collection/*.css,
 * app/styles/app/components/breadcrumb.css, app/styles/app/routes/collections.css
 * and app/styles/app/embed.css). Text pills sit inside the line box the frame's
 * text takes, so each row ends where the frame's does. The frame's body line
 * height is 1.5.
 */

/*
 * embed.css: the body's 1850px cap; `.collection` starts flush at the top.
 * Columns of pills are flex columns, as the PDP's buy column is, so their
 * margins add up rather than collapse into each other.
 */
.hydrogen-pdp__skeleton-collection {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-inline-size: 1850px;
}

/* A short stagger per component, as the PDP skeleton has. */
.hydrogen-pdp__skeleton-catalog span {
  animation-delay: 120ms;
}

/* breadcrumb.css: a 12px trail on an 18px line, nothing under it. */
.hydrogen-pdp__skeleton-crumb {
  block-size: 12px;
  inline-size: min(40%, 9rem);
  margin-block: 3px;
}

/* filters.css `.collection__heading`: 12px under a 30px title line. */
.hydrogen-pdp__skeleton-heading {
  align-items: center;
  column-gap: 16px;
  display: flex;
  margin-block-end: 12px;
}

.hydrogen-pdp__skeleton-collection-title {
  block-size: 22px;
  inline-size: min(60%, 14rem);
  margin-block: 4px;
}

/* `.collection__count`: 16px on a 20px line beside the title. */
.hydrogen-pdp__skeleton-count {
  block-size: 14px;
  inline-size: 4.5rem;
}

/*
 * category-nav.css below 750px: the dropdown, a 40px box across the page with
 * 8px under it. The pills it stands in for start at 750px.
 */
.hydrogen-pdp__skeleton-categories {
  margin-block-end: 8px;
}

.hydrogen-pdp__skeleton-categories span {
  block-size: 40px;
}

.hydrogen-pdp__skeleton-categories span + span {
  display: none;
}

/*
 * filters.css `.collection__controls` on a phone: the filter trigger, sort
 * taking what is left, then the 2-up and 1-up toggles, all 40px and 8px apart,
 * with 12px under the row.
 */
.hydrogen-pdp__skeleton-controls {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-block-end: 12px;
}

.hydrogen-pdp__skeleton-controls span {
  block-size: 40px;
  flex: none;
}

.hydrogen-pdp__skeleton-trigger {
  inline-size: 7.5rem;
}

.hydrogen-pdp__skeleton-controls .hydrogen-pdp__skeleton-sort {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.hydrogen-pdp__skeleton-views {
  display: flex;
  flex: none;
  gap: 8px;
}

.hydrogen-pdp__skeleton-views span {
  inline-size: 40px;
}

/*
 * filters.css `.collection__body`: one column 16px apart. On a phone the rail
 * is a closed drawer, so it is an empty row and the gap is all that shows.
 */
.hydrogen-pdp__skeleton-catalog {
  display: grid;
  gap: 16px;
}

.hydrogen-pdp__skeleton-rail {
  block-size: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hydrogen-pdp__skeleton-filter {
  display: flex;
  flex-direction: column;
}

/*
 * collections.css `.products-grid[data-columns]`: two up before the rail, one
 * for the phone's 1-up, 16px between columns and 1.5rem between rows.
 */
.hydrogen-pdp__skeleton-grid {
  column-gap: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 1.5rem;
}

.hydrogen-pdp__skeleton-grid[data-columns='1'] {
  grid-template-columns: minmax(0, 1fr);
}

/* product-card.css: 16px under each card on a phone. */
.hydrogen-pdp__skeleton-card {
  display: flex;
  flex-direction: column;
  margin-block-end: 16px;
  position: relative;
}

.hydrogen-pdp__skeleton-card-media {
  aspect-ratio: var(--hydrogen-pdp-card-ratio, 4 / 5);
  inline-size: 100%;
}

/*
 * `.collection-card__header` opens 9px under the photo and closes 8px under
 * the price. The vendor is a 16px line, the title and price 24px, each with
 * 2px under it on a phone.
 */
.hydrogen-pdp__skeleton-card-vendor {
  block-size: 12px;
  inline-size: 40%;
  margin-block: 11px 2px;
}

.hydrogen-pdp__skeleton-card-title {
  block-size: 16px;
  inline-size: 85%;
  margin-block: 4px 6px;
}

.hydrogen-pdp__skeleton-card-price {
  block-size: 16px;
  inline-size: 30%;
  margin-block: 4px 14px;
}

/*
 * routes/collections.css `.collection-empty`, which the frame draws for a
 * collection with no products: a band of the muted surface, 90px above and
 * below the centred headline, subline and button. The band is drawn still and
 * its lines pulse over it.
 */
.hydrogen-pdp__skeleton-empty {
  align-items: center;
  background: var(--hydrogen-pdp-skeleton);
  display: flex;
  flex-direction: column;
  padding: 90px 16px;
}

.hydrogen-pdp__skeleton .hydrogen-pdp__skeleton-empty span {
  background: #fff;
}

.hydrogen-pdp__skeleton-empty-headline {
  block-size: 22px;
  inline-size: min(70%, 20rem);
  margin-block: 4px 12px;
}

.hydrogen-pdp__skeleton-empty-subline {
  inline-size: min(80%, 26rem);
  margin-block: 4px 20px;
}

.hydrogen-pdp__skeleton-empty-cta {
  block-size: 48px;
  inline-size: 100%;
  margin-block-start: 16px;
  max-inline-size: 327px;
}

@container (min-width: 750px) {
  /*
   * filters.css from 750px: the category pills and the controls share a row,
   * the controls in a column that never drops below sort and the toggles
   * (280px, two 40px squares 4px apart, 16px from sort). A header hidden in
   * the block settings leaves the controls in that column on their own.
   */
  .hydrogen-pdp__skeleton-bar {
    align-items: start;
    column-gap: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr);
  }

  /* category-nav.css: 36px pills, 8px apart, 8px plus 12px under the row. */
  .hydrogen-pdp__skeleton-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1;
    margin-block-end: 20px;
  }

  .hydrogen-pdp__skeleton-categories span,
  .hydrogen-pdp__skeleton-categories span + span {
    block-size: 36px;
    display: block;
    inline-size: 6.5rem;
  }

  .hydrogen-pdp__skeleton-categories span:nth-child(2n) {
    inline-size: 8rem;
  }

  .hydrogen-pdp__skeleton-categories span:nth-child(3n) {
    inline-size: 5.5rem;
  }

  .hydrogen-pdp__skeleton-controls {
    gap: 16px;
    grid-column: 2;
    justify-content: flex-end;
  }

  .hydrogen-pdp__skeleton-controls .hydrogen-pdp__skeleton-trigger {
    display: none;
  }

  .hydrogen-pdp__skeleton-controls .hydrogen-pdp__skeleton-sort {
    flex: none;
    inline-size: 280px;
  }

  .hydrogen-pdp__skeleton-views {
    gap: 4px;
  }

  /* filters.css: the 253px rail beside the grid, 32px apart. */
  .hydrogen-pdp__skeleton-catalog {
    align-items: start;
    column-gap: 32px;
    grid-template-columns: 253px minmax(0, 1fr);
  }

  .hydrogen-pdp__skeleton-rail {
    block-size: auto;
    overflow: visible;
  }

  /* `.collection-rail__heading`: an 18px line with 32px under it. */
  .hydrogen-pdp__skeleton-rail-heading {
    block-size: 12px;
    inline-size: 5rem;
    margin-block: 3px 35px;
  }

  /*
   * `.collection-filter`: a rule over each group and 24px either side of its
   * 24px label, which keeps 5px under it. The first group opens 15px below
   * that onto its values, as the frame opens it.
   */
  .hydrogen-pdp__skeleton-filter {
    border-block-start: 1px solid var(--hydrogen-pdp-skeleton);
    padding-block: 24px;
  }

  .hydrogen-pdp__skeleton-filter-label {
    block-size: 14px;
    inline-size: 45%;
    margin-block: 5px 10px;
  }

  .hydrogen-pdp__skeleton-filter-value {
    block-size: 12px;
    inline-size: 60%;
    margin-block: 6px;
  }

  .hydrogen-pdp__skeleton-filter-label + .hydrogen-pdp__skeleton-filter-value {
    margin-block-start: 21px;
  }

  .hydrogen-pdp__skeleton-filter-value:nth-child(2n) {
    inline-size: 45%;
  }

  .hydrogen-pdp__skeleton-filter-value:nth-child(3n) {
    inline-size: 70%;
  }

  /*
   * collections.css from 750px: the default density and the phone's 1-up are
   * three up beside the rail, the 2-up stays two.
   */
  .hydrogen-pdp__skeleton-grid,
  .hydrogen-pdp__skeleton-grid[data-columns='1'] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hydrogen-pdp__skeleton-grid[data-columns='2'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* product-card.css: 67px under each card, and nothing under title or price. */
  .hydrogen-pdp__skeleton-card {
    margin-block-end: 67px;
  }

  .hydrogen-pdp__skeleton-card-title {
    margin-block-end: 4px;
  }

  .hydrogen-pdp__skeleton-card-price {
    margin-block-end: 12px;
  }

  /* routes/collections.css: the empty headline is 34px from 750px. */
  .hydrogen-pdp__skeleton-empty-headline {
    block-size: 26px;
  }
}

@container (min-width: 1025px) {
  /*
   * breadcrumb.css and filters.css from 1025px: a 14px trail on a 21px line
   * with 16px under it, a 40px title line with 20px under it, and 32px and
   * 28px around the controls row.
   */
  .hydrogen-pdp__skeleton-crumb {
    block-size: 14px;
    margin-block: 3.5px 19.5px;
  }

  .hydrogen-pdp__skeleton-heading {
    margin-block-end: 20px;
  }

  .hydrogen-pdp__skeleton-collection-title {
    block-size: 30px;
    margin-block: 5px;
  }

  .hydrogen-pdp__skeleton-bar {
    column-gap: 32px;
    grid-template-columns: minmax(0, 7fr) minmax(380px, 5fr);
  }

  .hydrogen-pdp__skeleton-categories {
    margin-block-end: 36px;
  }

  .hydrogen-pdp__skeleton-controls {
    margin-block-end: 28px;
  }

  /* collections.css: the layout gutter between columns from 1025px. */
  .hydrogen-pdp__skeleton-grid {
    column-gap: 32px;
  }

  /* product-card.css: the vendor's line closes to 14px. */
  .hydrogen-pdp__skeleton-card-vendor {
    block-size: 10px;
  }

  /* routes/collections.css: the empty headline is 40px from 1025px. */
  .hydrogen-pdp__skeleton-empty-headline {
    block-size: 30px;
    margin-block: 5px 13px;
  }
}

@container (min-width: 1400px) {
  .hydrogen-pdp__skeleton-bar {
    grid-template-columns: minmax(0, 8fr) minmax(380px, 4fr);
  }

  /*
   * product-card.css from 1400px: the price leaves the column for the card's
   * end edge, 2px above the header's top, so the header closes after the
   * title. Placed from the card's foot, which is the header's: 55px of text
   * under the photo, the pill 4px into the price's 24px line.
   */
  .hydrogen-pdp__skeleton-card-title {
    inline-size: calc(100% - 76px);
    margin-block-end: 12px;
  }

  .hydrogen-pdp__skeleton-card-price {
    inline-size: 60px;
    inset-block-end: 28px;
    inset-inline-end: 0;
    margin: 0;
    position: absolute;
  }
}

@keyframes hydrogen-pdp-reveal {
  from {
    opacity: 0;
  }
}

@keyframes hydrogen-pdp-pulse {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 0.75;
  }
}

/*
 * Dims this page while a framed panel (the size guide, the mobile filter
 * drawer) is open. The frame draws its own overlay; the script clips a hole
 * for it out of this one, so the two meet without overlapping. The colour and
 * fade match the framed overlay. A frame lifted for the filter drawer is over
 * this, so it dims only what lies beside that frame.
 */
.hydrogen-pdp__backdrop {
  background: rgba(0, 0, 0, 0.4);
  inset: 0;
  opacity: 0;
  overscroll-behavior: contain;
  pointer-events: none;
  position: fixed;
  touch-action: none;
  transition: opacity 0.3s ease-in-out;
  z-index: 2147483646;
}

.hydrogen-pdp__backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

/*
 * The frame lifted over the whole window while the collection's filter drawer
 * is open (liftFrame in hydrogen-pdp.js). The script puts it over the block's
 * own place at its own size, so only its layer changes, and the block keeps
 * the height it leaves.
 *
 * Layout containment, which `container-type` brings, makes the block the box
 * a fixed frame is placed in, and trapped an earlier lift inside it. Only the
 * loading skeleton queries the block, and it has gone before a drawer opens.
 */
.hydrogen-pdp--lifted {
  container-type: normal;
}

.hydrogen-pdp--lifted .hydrogen-pdp__frame {
  position: fixed;
  z-index: 2147483647;
}

/*
 * Add-on area (Complete Your Look), laid over the empty slot the frame leaves
 * under its Add to cart. hydrogen-pdp.js sets top, left and width from what the
 * frame reports, in page coordinates because it may move the area out of this
 * block, and the frame grows the slot to this area's height.
 */
.hydrogen-pdp__addons {
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
}

.hydrogen-pdp__addons[hidden] {
  display: none;
}

/*
 * Selleasy caps each add-on card at 400px, and the theme lifts that only under
 * its own `.product__form` (main-product.css), which the stand-in form here is
 * not. Carry those overrides over so Complete Your Look spans the slot, which
 * is already the width of the framed buy box.
 */
.hydrogen-pdp__addons lb-upsell-product-page-addon {
  display: block;
}

.hydrogen-pdp__addons .lb-upsell-ppa-card-cont {
  margin-bottom: 0 !important;
}

.hydrogen-pdp__addons
  .lb-upsell-ppa-card-cont
  .lb-upsell-product-page-card
  .lb-spc-cont,
.hydrogen-pdp__addons .lb-upsell-ppa-card-cont .lb-spc-cont {
  max-width: none !important;
}

.hydrogen-pdp__addons .lb-upsell-ppa-card-cont .lb-spc-details-btm select {
  width: 160px;
}

.hydrogen-pdp__addons .lb-upsell-ppa-card-cont .lb-upsell-ppa-title-cont {
  margin-top: 0 !important;
  margin-bottom: 2px;
}

/*
 * The Yotpo star rating, laid over the slot under the framed title. Unplaced,
 * it keeps its layout but is invisible, rather than `display: none`, so the
 * Yotpo widget script can render into it before the frame reports the slot.
 */
.hydrogen-pdp__rating {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.hydrogen-pdp__rating[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.hydrogen-pdp__rating--covered {
  visibility: hidden;
}

/*
 * `visibility` is inherited, not enforced: Yotpo's widget CSS sets its own
 * elements back to visible, so the stars showed over the framed price after a
 * colour swatch moved the frame to a sibling product. Hide every descendant.
 */
.hydrogen-pdp__rating[hidden] *,
.hydrogen-pdp__rating--covered * {
  visibility: hidden !important;
}

/* The framed size guide covers the viewport; the add-ons must not float over it. */
.hydrogen-pdp__addons--covered {
  visibility: hidden;
}

/*
 * An area showing through a framed panel's overlay. Darkening to 60% matches
 * the overlay's 40% black, and leaves what the area does not paint to the frame
 * under it, which that overlay has already dimmed. The script clips the panel's
 * box out of it.
 */
.hydrogen-pdp__addons,
.hydrogen-pdp__rating {
  transition: filter 0.3s ease-in-out;
}

.hydrogen-pdp__overlay--dimmed {
  filter: brightness(0.6);
  pointer-events: none;
}

/*
 * Clicked by script only. Upsell apps listen on it and render after it, so the
 * form around it stays in the layout; shoppers never see the button itself.
 * `!important` because it carries the theme's Add to cart classes, whose
 * display rules would otherwise show it.
 */
.hydrogen-pdp__cart-trigger {
  display: none !important;
}

/*
 * The failed state carries no presentation of its own. The script sets the
 * `hidden` attribute only when the block's hide_on_error setting is on, and
 * clears both when a late frame reports in.
 */

@media (prefers-reduced-motion: reduce) {
  .hydrogen-pdp__frame,
  .hydrogen-pdp__skeleton,
  .hydrogen-pdp__addons,
  .hydrogen-pdp__rating {
    transition: none;
  }

  .hydrogen-pdp:not(.hydrogen-pdp--loading) .hydrogen-pdp__frame {
    animation: none;
  }

  .hydrogen-pdp__skeleton span {
    animation: none;
    opacity: 0.6;
  }
}

/* Theme-editor-only setup notice; never rendered for shoppers. */
.hydrogen-pdp--setup {
  background: #fff4f4;
  border: 1px solid #d82c0d;
  border-radius: 4px;
  color: #4a1505;
  font-size: 14px;
  line-height: 1.5;
  padding: 16px;
}

.hydrogen-pdp--setup code {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  padding: 1px 4px;
  word-break: break-all;
}

.hydrogen-pdp__selection-prompt[hidden] {
  display: none;
}