/**
 * APW Product Configurator — cart artwork previews.
 *
 * Styles the artwork entries of a configured job in the classic cart table,
 * the checkout order review, the mini-cart, and the Cart and Checkout blocks:
 * one compact row per attached file with a small tile (the file-type badge,
 * with the thumbnail drawn over it), the filename and, in the full variant,
 * the View and Download original links on a line of their own.
 *
 * Everything is scoped to .apwpc-cart-artwork (and its visually hidden
 * helper), with WooCommerce or Blocks container classes only as scoping
 * ancestors, so no other part of the cart changes. The values are custom
 * properties on .apwpc-cart-artwork: a site overrides the variables, not the
 * selectors.
 *
 *   --apwpc-cart-art-size          tile size, full variant
 *   --apwpc-cart-art-compact-size  tile size, compact variant (mini-cart,
 *                                  checkout summary)
 *   --apwpc-cart-art-radius        tile and focus-ring corner radius
 *   --apwpc-cart-art-gap           space between tile, name and links
 *   --apwpc-cart-art-border        tile border colour
 *   --apwpc-cart-art-bg            tile and thumbnail background
 *   --apwpc-cart-art-badge-color   file-type badge text colour
 *   --apwpc-cart-art-font-size     text size of the whole listing
 *   --apwpc-cart-art-focus         keyboard focus ring colour
 *
 * The thumbnail is fitted inside the tile (never cropped). Its rules name
 * three classes so they win over the theme's mini-cart image rules by
 * specificity alone. Focus states never rely on colour alone: they are an
 * outline with an offset.
 */

.apwpc-cart-artwork {
  --apwpc-cart-art-size: 48px;
  --apwpc-cart-art-compact-size: 32px;
  --apwpc-cart-art-radius: 4px;
  --apwpc-cart-art-gap: 0.5rem;
  --apwpc-cart-art-border: #dcdcde;
  --apwpc-cart-art-bg: #f6f7f7;
  --apwpc-cart-art-badge-color: #50575e;
  --apwpc-cart-art-font-size: 0.875em;
  --apwpc-cart-art-focus: currentColor;
  display: flex;
  flex-wrap: wrap;
  gap: var(--apwpc-cart-art-gap);
  clear: both;
  margin: 0.25em 0 0;
  padding: 0;
  max-width: 100%;
  font-size: var(--apwpc-cart-art-font-size);
  line-height: 1.4;
  text-align: start;
}

/* One file: the tile and name on the first line, the links and any note on the next. */
.apwpc-cart-artwork .apwpc-cart-artwork__file {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.25rem var(--apwpc-cart-art-gap);
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 100%;
}

/* The link around a viewable file's tile and name. */
.apwpc-cart-artwork .apwpc-cart-artwork__open {
  display: flex;
  align-items: flex-start;
  gap: var(--apwpc-cart-art-gap);
  flex: 1 1 0;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.apwpc-cart-artwork .apwpc-cart-artwork__open:hover .apwpc-cart-artwork__name {
  text-decoration: underline;
}

/* The tile: a bordered square with the badge centred and the thumbnail over it. */
.apwpc-cart-artwork .apwpc-cart-artwork__tile {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--apwpc-cart-art-size);
  height: var(--apwpc-cart-art-size);
  border: 1px solid var(--apwpc-cart-art-border);
  border-radius: var(--apwpc-cart-art-radius);
  background: var(--apwpc-cart-art-bg);
  overflow: hidden;
}

.apwpc-cart-artwork .apwpc-cart-artwork__badge {
  max-width: 100%;
  overflow: hidden;
  color: var(--apwpc-cart-art-badge-color);
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/*
 * The thumbnail covers the badge and is fitted inside the tile, so a design
 * is never cropped. Three classes: more specific than the theme's
 * mini-cart image rules, which float it right and fix its width.
 */
.apwpc-cart-artwork .apwpc-cart-artwork__tile .apwpc-cart-artwork__img {
  position: absolute;
  inset: 0;
  float: none;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  object-fit: contain;
  background: var(--apwpc-cart-art-bg);
}

.apwpc-cart-artwork .apwpc-cart-artwork__file--unavailable .apwpc-cart-artwork__tile {
  border-style: dashed;
}

/* The filename wraps instead of stretching its column. */
.apwpc-cart-artwork .apwpc-cart-artwork__name {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

/*
 * The note and the links sit on lines of their own, under the filename: the
 * note ("Preview not available", "File unavailable") first, then the links.
 */
.apwpc-cart-artwork .apwpc-cart-artwork__actions {
  display: flex;
  order: 2;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 0.125rem 0.75rem;
  box-sizing: border-box;
  min-width: 0;
  padding-inline-start: calc(var(--apwpc-cart-art-size) + var(--apwpc-cart-art-gap));
}

.apwpc-cart-artwork .apwpc-cart-artwork__view,
.apwpc-cart-artwork .apwpc-cart-artwork__download {
  color: inherit;
  text-decoration: underline;
}

.apwpc-cart-artwork .apwpc-cart-artwork__note {
  order: 1;
  flex: 1 1 100%;
  box-sizing: border-box;
  min-width: 0;
  padding-inline-start: calc(var(--apwpc-cart-art-size) + var(--apwpc-cart-art-gap));
  font-size: 0.9em;
}

/* Keyboard focus: a visible ring that does not depend on colour alone. */
.apwpc-cart-artwork .apwpc-cart-artwork__open:focus-visible,
.apwpc-cart-artwork .apwpc-cart-artwork__view:focus-visible,
.apwpc-cart-artwork .apwpc-cart-artwork__download:focus-visible {
  outline: 2px solid var(--apwpc-cart-art-focus);
  outline-offset: 2px;
  border-radius: var(--apwpc-cart-art-radius);
}

/* Text for screen readers only. */
.apwpc-cart-artwork .apwpc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Compact variant (mini-cart, checkout summary): a smaller tile, the filename only. */
.apwpc-cart-artwork.apwpc-cart-artwork--compact .apwpc-cart-artwork__file {
  flex-basis: 100%;
}

.apwpc-cart-artwork.apwpc-cart-artwork--compact .apwpc-cart-artwork__tile,
.wc-block-components-order-summary-item .apwpc-cart-artwork .apwpc-cart-artwork__tile {
  width: var(--apwpc-cart-art-compact-size);
  height: var(--apwpc-cart-art-compact-size);
}

.apwpc-cart-artwork.apwpc-cart-artwork--compact .apwpc-cart-artwork__badge,
.wc-block-components-order-summary-item .apwpc-cart-artwork .apwpc-cart-artwork__badge {
  font-size: 0.6em;
}

.wc-block-components-order-summary-item .apwpc-cart-artwork .apwpc-cart-artwork__file {
  flex-basis: 100%;
}

/* The compact variant's only note ("File unavailable") lines up with its smaller tile. */
.apwpc-cart-artwork.apwpc-cart-artwork--compact .apwpc-cart-artwork__note,
.wc-block-components-order-summary-item .apwpc-cart-artwork .apwpc-cart-artwork__note {
  padding-inline-start: calc(var(--apwpc-cart-art-compact-size) + var(--apwpc-cart-art-gap));
}

/*
 * Cart and Checkout blocks. The listing sits inside an inline detail span, so
 * it takes the full width to start on its own line, and an upgraded detail
 * drops the separator the block draws between details.
 */
.wc-block-components-product-details .apwpc-cart-artwork {
  display: flex;
  box-sizing: border-box;
  width: 100%;
}

.wc-block-components-product-details > .apwpc-blocks-artwork-detail {
  display: block;
}

.wc-block-components-product-details > .apwpc-blocks-artwork-detail > span[aria-hidden="true"],
.wc-block-components-product-details > .apwpc-blocks-artwork-detail + span[aria-hidden="true"] {
  display: none;
}

/* Where the browser supports :has(), the separator before an upgraded detail goes too. */
.wc-block-components-product-details > span[aria-hidden="true"]:has(+ .apwpc-blocks-artwork-detail) {
  display: none;
}

/* Narrow screens: every file takes the full width, so six files stack cleanly. */
@media (max-width: 600px) {
  .apwpc-cart-artwork .apwpc-cart-artwork__file {
    flex-basis: 100%;
  }
}