/* Product: gallery and summary */
.pbly .product { padding-block: var(--pbly-space-9) 0; }

.pbly .product__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--pbly-space-15);
}

.pbly .product-gallery__stage,
.pbly .product-gallery__thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--pbly-radius-lg);
}

/* The same 4% shade as the product cards. */
.pbly .product-gallery__stage::after,
.pbly .product-gallery__thumb::after {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--pbly-color-palette-black) 4%, transparent);
  content: "";
  pointer-events: none;
}

.pbly .product-gallery__image,
.pbly .product-gallery__thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.pbly .product-gallery__image[hidden] { display: none; }

.pbly .product-gallery__thumbs {
  display: flex;
  gap: var(--pbly-space-2);
  padding-block: var(--pbly-space-2) var(--pbly-space-3-5);
}

.pbly .product-gallery__thumb {
  width: calc((100% - 3 * var(--pbly-space-2)) / 4);
  transition: opacity 0.2s;
}

.pbly .product-gallery__thumb[aria-pressed="false"] { opacity: 0.4; }

.pbly .product-summary {
  display: grid;
  justify-items: start;
}

.pbly .product-summary__code {
  padding: var(--pbly-space-2) var(--pbly-space-4);
  border-radius: var(--pbly-radius-full);
  background: var(--pbly-color-palette-mint);
  color: var(--pbly-color-palette-green-deep);
  font-size: var(--pbly-font-size-sm);
}

.pbly .product-summary__title {
  padding-top: var(--pbly-space-4);
  font-family: var(--pbly-text-heading-lg-font-family);
  font-size: var(--pbly-text-heading-lg-font-size);
  font-weight: var(--pbly-text-heading-lg-font-weight);
  line-height: var(--pbly-text-heading-lg-line-height);
  letter-spacing: var(--pbly-text-heading-lg-letter-spacing);
}

.pbly .product-summary__excerpt {
  padding-top: var(--pbly-space-5);
  color: var(--pbly-color-text-muted);
}

.pbly .product-summary__categories {
  padding-block: var(--pbly-space-5);
  color: var(--pbly-color-text-soft);
}

.pbly .product-summary__price {
  padding-bottom: var(--pbly-space-2);
  color: var(--pbly-color-action-primary);
  font-size: var(--pbly-font-size-2xl);
  font-weight: var(--pbly-font-weight-bold);
  line-height: var(--pbly-font-line-height-tight);
}

/* The phone-only price line under the product code (a copy of the price, hidden from screen readers). */
.pbly .product-summary__lead { display: none; }

.pbly .product-summary__lead-price {
  color: var(--pbly-color-action-primary);
  font-size: var(--pbly-font-size-2xl);
  font-weight: var(--pbly-font-weight-bold);
  line-height: var(--pbly-font-line-height-tight);
}

.pbly .product-summary__purchase {
  display: grid;
  justify-items: start;
  gap: var(--pbly-space-4);
  padding-top: var(--pbly-space-6);
}

.pbly .product-summary__add {
  width: 15rem;
  max-width: 100%;
  padding-block: var(--pbly-space-5);
  line-height: 1;
}

.pbly .product-summary__notes {
  display: grid;
  gap: var(--pbly-space-1-5);
  padding: var(--pbly-space-6) 0 var(--pbly-space-5) var(--pbly-space-1);
  color: var(--pbly-color-text-muted);
  font-size: var(--pbly-font-size-sm);
}

.pbly .product-summary__notes li {
  display: flex;
  align-items: center;
  gap: var(--pbly-space-2);
}

/* Not in the prototype (listed in the pull request): the parts of the page that WooCommerce and the shop's rules add.
   They use the prototype's tokens and components. */
.pbly .product-summary__partners {
  display: grid;
  gap: var(--pbly-space-1);
  color: var(--pbly-color-text-muted);
}

.pbly .product-summary__partners strong { color: var(--pbly-color-text-primary); }

.pbly .product-summary__partners a {
  color: var(--pbly-color-action-primary);
  text-decoration: underline;
}

.pbly .product-summary__partners a:hover { color: var(--pbly-color-action-hover); }

/* Out of stock: the same note the product cards show where the button would be. */
.pbly .product-summary__stock {
  color: var(--pbly-color-text-muted);
  font-weight: var(--pbly-font-weight-bold);
}

/* The partner "Mențiuni" field (a form field) sits above the quantity and fills the column, as on faberpet.ro. */
.pbly form.product-summary__purchase { width: 100%; }

.pbly .product-summary__note { width: 100%; }

/* Variable products: one select per attribute, then the variation's own price, quantity and button. */
.pbly .product-variations {
  display: grid;
  gap: var(--pbly-space-3-5);
  width: 100%;
}

.pbly .product-variations__row { gap: var(--pbly-space-2); }

.pbly .product-variations__label { font-weight: var(--pbly-font-weight-bold); }

.pbly .product-variations__reset {
  justify-self: start;
  color: var(--pbly-color-text-muted);
  font-size: var(--pbly-font-size-sm);
  text-decoration: underline;
}

.pbly .product-variations__reset:hover { color: var(--pbly-color-action-hover); }

.pbly .product-variations__wrap {
  display: grid;
  justify-items: start;
  gap: var(--pbly-space-4);
}

.pbly .woocommerce-variation-price {
  color: var(--pbly-color-action-primary);
  font-size: var(--pbly-font-size-2xl);
  font-weight: var(--pbly-font-weight-bold);
  line-height: var(--pbly-font-line-height-tight);
}

/* WooCommerce's script marks the button `disabled` until every option is chosen (it has no disabled attribute). */
.pbly .single_add_to_cart_button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pbly .woocommerce-variation-availability { color: var(--pbly-color-text-muted); }

.pbly .product-summary__buy {
  display: grid;
  justify-items: start;
  gap: var(--pbly-space-4);
  width: 100%;
}

.pbly .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Spacing around the shared parts on this page */
.pbly .product-page .shipping-info { padding-top: var(--pbly-space-15); }
.pbly .product-page .popular-categories { padding-top: var(--pbly-space-15); }
.pbly .product-page .useful-links { padding-bottom: var(--pbly-space-15); }

/* Description, specifications and tags */
.pbly .product-details { padding-bottom: var(--pbly-space-15); }

.pbly .product-details__inner {
  display: grid;
  gap: var(--pbly-space-5);
}

.pbly .product-details__ean,
.pbly .product-details__tags { color: var(--pbly-color-text-soft); }

.pbly .product-details__text { color: var(--pbly-color-text-muted); }

/* Long descriptions fold to five lines on narrow screens (js/main.js decides when). */
.pbly .product-details__description[data-collapsed="true"] .product-details__text {
  max-height: 7.5rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, var(--pbly-color-palette-black) 55%, transparent);
}

.pbly .product-details__toggle {
  margin-top: var(--pbly-space-2);
  font-weight: var(--pbly-font-weight-bold);
}

.pbly .product-details__toggle:hover { color: var(--pbly-color-action-hover); }

.pbly .product-details__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pbly .product-details__table {
  width: 100%;
  border-collapse: collapse;
  color: var(--pbly-color-text-muted);
  font-size: var(--pbly-font-size-sm);
}

.pbly .product-details__table th,
.pbly .product-details__table td {
  padding: var(--pbly-space-4) var(--pbly-space-2) var(--pbly-space-4) var(--pbly-space-6);
  border-block: 1px solid var(--pbly-color-border-default);
  background: var(--pbly-color-surface-raised);
  text-align: left;
}

.pbly .product-details__table th {
  width: 15.625rem;
  padding-right: var(--pbly-space-3);
  border-left: 1px solid var(--pbly-color-border-default);
  font-weight: var(--pbly-font-weight-bold);
}

.pbly .product-details__table td { border-right: 1px solid var(--pbly-color-border-default); }

/* Tablets (768–1024px), as on faberpet.ro. */
@media (max-width: 64rem) {
  .pbly .product-page .shipping-info { padding-top: var(--pbly-space-10); }
}

/* Phones (up to 767px), as on faberpet.ro. */
@media (max-width: 47.9375rem) {
  /* Title, code and a price line above the photos; the full price block stays above the quantity,
     so phones show the price twice, as on faberpet.ro. */
  .pbly .product { padding-top: var(--pbly-space-4); }

  .pbly .product__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .pbly .product-summary { display: contents; }

  .pbly .product-summary__title {
    order: 1;
    padding-top: 0;
    font-size: var(--pbly-font-size-xl-plus);
  }

  .pbly .product-summary__code { order: 2; align-self: flex-start; margin-top: var(--pbly-space-4); }

  .pbly .product-summary__lead {
    display: flex;
    order: 3;
    align-items: baseline;
    gap: var(--pbly-space-5);
    padding-top: var(--pbly-space-4);
  }

  .pbly .product-gallery { order: 4; margin-top: var(--pbly-space-6); }
  .pbly .product-summary__excerpt { order: 5; }
  .pbly .product-summary__categories { order: 6; }
  .pbly .product-summary__price { order: 7; }
  .pbly .product-summary__unit { order: 8; }
  .pbly .product-summary__purchase { order: 9; }
  .pbly .product-summary__notes { order: 10; }

  .pbly .product-details__table th { width: 40%; }
}