/* Listings, as on Etsy: a card per listing ("From $X" across its variations, Choose
   options when there are several), and the listing page with its gallery, a picker
   per property, the description and tags. */

/* Cards. */
.portal-workspace-shell .grid-view .product-price > .product-price-from { display: inline; margin: 0 1px 0 0; color: #6b6b6b; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.portal-workspace-shell .grid-view .listing-card-purchase { grid-template-columns: minmax(0, 1fr); }
.portal-workspace-shell .product-card .card-options-button { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 36px; padding: 7px 12px; border: 1px solid #303030; border-radius: 7px; background: #fff; color: #303030; font-size: 12px; font-weight: 550; line-height: 1.2; text-align: center; text-decoration: none; transition: background .15s; }
.portal-workspace-shell .product-card .card-options-button:hover { background: #f2f2f2; }
.portal-workspace-shell .product-card .card-options-button:focus-visible { outline: 2px solid #2463c5; outline-offset: 2px; }

/* The gallery: the main photo with previous and next, and a strip of thumbnails. */
.listing-gallery { min-width: 0; }
.listing-gallery.has-thumbnails .listing-gallery-stage { touch-action: pan-y; }
.listing-gallery .listing-gallery-step { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0; padding: 0; border: 1px solid #e2e2e2; border-radius: 50%; background: #ffffffeb; color: #262626; box-shadow: 0 2px 10px #00000012; cursor: pointer; }
.listing-gallery .listing-gallery-step:hover { border-color: #b8b8b8; background: #fff; }
.listing-gallery .listing-gallery-step:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
.listing-gallery-step .icon { width: 20px; height: 20px; }
.listing-gallery-step.is-previous { left: 14px; }
.listing-gallery-step.is-previous .icon { transform: rotate(90deg); }
.listing-gallery-step.is-next { right: 14px; }
.listing-gallery-step.is-next .icon { transform: rotate(-90deg); }
.listing-gallery-count { position: absolute; right: 14px; bottom: 14px; z-index: 2; margin: 0; padding: 3px 9px; border-radius: 12px; background: #ffffffe6; color: #555; font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; }
.listing-gallery-thumbnails { display: flex; gap: 8px; margin: 12px 0 0; padding: 3px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #d0d0d0 transparent; }
.listing-gallery-thumbnails li { flex: 0 0 auto; margin: 0; padding: 0; }
.listing-gallery .listing-gallery-thumbnail { display: grid; place-items: center; width: 64px; height: 64px; margin: 0; padding: 0; overflow: hidden; border: 1px solid #e3e3e3; border-radius: 8px; background: #fff; cursor: pointer; }
.listing-gallery-thumbnail:hover { border-color: #9a9a9a; }
.listing-gallery-thumbnail[aria-current] { border-color: #1c1c1c; box-shadow: inset 0 0 0 1px #1c1c1c; }
.listing-gallery-thumbnail:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
.listing-gallery-thumbnail img { display: block; width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.listing-gallery-thumbnail .product-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #a0a0a0; font-size: 15px; }

/* A picker per property: buttons, or a select when there are many values. A value
   that does not exist with the other property's choice is unavailable. */
.listing-option-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.listing-option-group > legend { padding: 0; }
.listing-option-values { display: flex; flex-wrap: wrap; gap: 8px; }
.listing-option { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 64px; max-width: 100%; min-height: 44px; padding: 10px 16px; border: 1px solid #d7d7d7; border-radius: 8px; background: #fff; color: #333; font-size: 14px; line-height: 22px; text-align: center; overflow-wrap: anywhere; cursor: pointer; }
.listing-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.listing-option:hover { border-color: #777; background: #fafafa; }
.listing-option.is-selected { border-color: #1c1c1c; background: #1c1c1c; color: #fff; }
.listing-option:has(input:focus-visible) { outline: 2px solid #333; outline-offset: 2px; }
.listing-option.is-sold-out > span:first-of-type { text-decoration: line-through; text-decoration-thickness: 1px; }
.listing-option.is-unavailable { border-style: dashed; border-color: #d0d0d0; background: #fafafa; color: #9b9b9b; cursor: not-allowed; }
.listing-option-select { position: relative; display: block; max-width: 440px; }
.listing-option-select select { width: 100%; min-height: 48px; margin: 0; padding: 11px 42px 11px 14px; border: 1px solid #d7d7d7; border-radius: 8px; background: #fff; color: #252525; font-size: 15px; line-height: 22px; appearance: none; cursor: pointer; }
.listing-option-select select:hover { border-color: #888; }
.listing-option-select select:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
.listing-option-select .icon { position: absolute; top: 50%; right: 14px; width: 18px; height: 18px; margin-top: -9px; color: #666; pointer-events: none; }

/* The description (plain text, its line breaks kept) and the tags. */
.listing-description, .listing-tags { margin-top: 28px; padding: 24px 0 0; border-top: 1px solid #e8e8e8; }
.listing-description h2, .listing-tags h2 { margin: 0 0 14px; color: #242424; font-size: 16px; font-weight: 600; line-height: 24px; }
.listing-description p { margin: 0 0 14px; color: #393939; font-size: 14px; line-height: 23px; white-space: pre-line; overflow-wrap: anywhere; }
.listing-description p:last-child { margin-bottom: 0; }
.listing-tags ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.listing-tags li { min-width: 0; max-width: 100%; margin: 0; padding: 0; }
.listing-tag { display: inline-flex; align-items: center; max-width: 100%; min-height: 36px; padding: 7px 14px; border: 1px solid #e0e0e0; border-radius: 18px; background: #f6f6f6; color: #383838; font-size: 13px; line-height: 20px; text-decoration: none; overflow-wrap: anywhere; }
.listing-tag:hover { border-color: #b5b5b5; background: #ececec; }
.listing-tag:focus-visible { outline: 2px solid #333; outline-offset: 2px; }

/* The variation bought, under the name of a cart line. */
.cart-row-description > .cart-row-variation { margin: -2px 0 3px; color: #474747; font-weight: 500; }

@media (min-width: 901px) {
  .listing-gallery { position: sticky; top: 112px; }
  .listing-gallery .product-detail-image { position: relative; top: auto; }
}
@media (max-width: 700px) {
  .listing-gallery-thumbnails { gap: 6px; margin-top: 8px; padding: 3px 16px; }
  .listing-gallery .listing-gallery-thumbnail { width: 56px; height: 56px; }
  .listing-gallery .listing-gallery-step { width: 40px; height: 40px; margin-top: -20px; }
  .listing-gallery-step.is-previous { left: 10px; }
  .listing-gallery-step.is-next { right: 10px; }
  .listing-gallery-count { right: 12px; bottom: 10px; }
  .listing-option-select select { font-size: 16px; }
  .listing-description, .listing-tags { margin-top: 24px; padding-top: 22px; }
  .listing-tag { min-height: 40px; }
}
@media (max-width: 520px) {
  .portal-workspace-shell .grid-view .product-price > .product-price-from { font-size: 11px; }
  .portal-workspace-shell .product-card .card-options-button { min-height: 38px; height: 38px; padding: 7px 6px; font-size: 11px; }
}