/* Single Print - photograph first, purchase controls second. Loads only
 * on individual Product pages (is_product()). Shares nothing with
 * gallery.css, prints-page.css, or project-page.css - a dedicated
 * .single-print__* namespace, built entirely from the site's existing
 * design tokens.
 *
 * Images use width:100%/height:auto only - never object-fit:cover, never
 * a fixed height. WooCommerce's own markup (title, variation table,
 * price/availability, Add to Cart) is restyled in place rather than
 * replaced - the underlying commerce logic stays entirely WooCommerce's.
 */

.single-print {
  padding-top: var(--space-64);
  padding-bottom: var(--space-192);
}

/* WooCommerce's own <h1 class="product_title">. Same restrained,
   explicit size already used for Project/Prints titles, rather than the
   browser default (~32px) that read as heavy everywhere else it was
   tested on this site. */
.single-print .product_title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  margin: 0;
}

.single-print__image-trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
  appearance: none;
  -webkit-appearance: none;
}

.single-print__image-trigger:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: var(--space-4);
}

.single-print__image-img {
  display: block;
  width: 100%;
  height: auto;
}

.single-print .summary.entry-summary {
  margin-top: var(--space-48);
  max-width: var(--measure-text);
}

.single-print__source-project,
.single-print__from-price {
  display: block;
  margin-top: var(--space-16);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  color: var(--color-text-muted);
}

.single-print__source-project a {
  color: var(--color-text);
}

/* Variation form - WooCommerce's own <table class="variations"> stays
   fully visible and functional by default. It's only visually hidden
   once single-print.js has successfully built and wired the custom size
   buttons (the .single-print--enhanced class is only ever added after
   that succeeds) - if JS fails for any reason, the native table/select
   remains the way to choose a size. This is the progressive-enhancement
   fallback, not a cosmetic choice. */
.single-print--enhanced table.variations {
  display: none;
}

/* Shared by both attribute groups (Size, Edition) - each is otherwise an
   independent button group driving its own native <select>, see
   single-print.js. A second group reuses these exact rules rather than a
   parallel set, so Size's existing appearance is guaranteed unchanged. */
.single-print__sizes,
.single-print__editions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

.single-print__attribute-label {
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
  /* Own line above its row of buttons, not inline with them. */
  flex-basis: 100%;
}

.single-print__size-button,
.single-print__edition-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--color-border-subtle);
  background: none;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.single-print__size-button[aria-pressed="true"],
.single-print__edition-button[aria-pressed="true"] {
  border-color: var(--color-text);
  color: var(--color-text);
}

.single-print__size-button:disabled,
.single-print__edition-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.single-print__size-button:focus-visible,
.single-print__edition-button:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: var(--space-4);
}

/* WooCommerce's own elements, auto-populated by its own JS once a
   variation is matched - restyled in place, not replaced. */
.woocommerce-variation-price {
  margin-top: var(--space-24);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  color: var(--color-text);
}

.woocommerce-variation-availability {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  color: var(--color-text-muted);
}

.woocommerce-variation-availability p {
  margin: 0;
}

/* Prints are sold individually (native WooCommerce setting, not custom
   code) - the quantity stepper WooCommerce still renders regardless is
   hidden here. Its hidden input still submits value=1 normally; nothing
   about cart behaviour changes, only its visibility. */
.single-print .quantity {
  display: none;
}

/* WooCommerce's own CSS carries several selectors for this button's own
   state classes (".woocommerce button.button.alt",
   "...button.button.alt.disabled", etc.), each combining ".woocommerce"
   with the button's own classes at a specificity this rule cannot beat
   for every state just by adding classes of its own here - disabled,
   added the moment no size is yet selected, is one of them. The
   background/color/border are the only three properties WooCommerce's
   skin actually sets, so !important is scoped to exactly those three,
   nothing else on the button. */
.single-print .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--space-24);
  padding: var(--space-16) var(--space-32);
  border: 1px solid var(--color-text) !important;
  background: none !important;
  color: var(--color-text) !important;
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: opacity 0.15s ease;
}

.single-print .single_add_to_cart_button:hover {
  opacity: 0.7;
}

.single-print .single_add_to_cart_button:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: var(--space-4);
}

.single-print__description {
  margin-top: var(--space-64);
  max-width: var(--measure-text);
}

/* Single-image lightbox - independent of the Project lightbox (that one
   is built around a Project's own multi-image sequence array). No
   prev/next - there is only ever one image. */
.single-print-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background);
}

.single-print-lightbox[hidden] {
  display: none;
}

.single-print-lightbox__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.single-print-lightbox__close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  border: 0;
  background: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.single-print-lightbox__close:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: var(--space-4);
}

@media (max-width: 767px) {
  .single-print {
    padding-top: var(--space-48);
  }

  .single-print .summary.entry-summary {
    margin-top: var(--space-32);
  }
}