/* Product page on a computer (two columns from 1100 px), 28. 10. 2026: more than 9 photos show two rows of thumbnails and
   a faded part of the third with a "show all photos" button; when the buy box is much longer than the photos, the tabs
   with the description start right under the photos (the script in product.twig decides, nothing changes without it or
   on phones and tablets). */
@media (min-width: 1100px) {
  /* max-content rows: otherwise the grid squeezes the thumbnails (overflow: hidden) into the limited height */
  .et-product-gallery__thumbs.is-collapsed {
    position: relative;
    grid-auto-rows: max-content;
    overflow: hidden;
    max-height: var(--et-thumbs-collapsed, 260px);
  }

  .et-product-gallery__thumbs.is-collapsed::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 40px;
    background: linear-gradient(to bottom, rgba(251, 250, 247, 0), #fbfaf7 85%);
    pointer-events: none;
  }

  .et-gallery-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: center;
    margin-top: -6px;
    padding: 8px 18px;
    border: 1px solid var(--et-line);
    border-radius: 999px;
    background: #fff;
    color: var(--et-text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  .et-gallery-more:hover,
  .et-gallery-more:focus-visible {
    border-color: var(--et-accent);
    color: var(--et-accent);
  }

  .et-gallery-more .fa {
    transition: transform 0.2s ease;
  }

  .et-gallery-more[aria-expanded="true"] .fa {
    transform: rotate(180deg);
  }

  /* Tabs under the photos: the buy box floats right (same widths as the 1.05fr / 0.95fr grid with its 36 px gap) and covers
     the corner of the description card with the page colour, so the card wraps around it in an L shape. */
  .et-product-shell.et-product-shell--wrap {
    display: block;
    margin-bottom: 0;
  }

  .et-product-shell--wrap > .et-product-gallery {
    float: left;
    width: calc((100% - 36px) * 0.525);
    margin-bottom: 32px;
  }

  .et-product-shell--wrap > .et-product-summary {
    float: right;
    width: calc((100% - 36px) * 0.475 + 36px);
    padding: 0 0 28px 36px;
    border-bottom-left-radius: var(--et-radius);
    background: var(--et-paper, #fbfaf7);
  }

  .et-product-shell--wrap + .et-tabs {
    clear: left;
  }

  /* A table with width 100% (also inline) does not fit beside the buy box and would drop below it, leaving a hole; with
     automatic width it fits the space beside it and below grows as wide as its content needs. Pictures and forms that
     still do not fit make the script keep the old layout. */
  .et-product-shell--wrap + .et-tabs .et-content-card table {
    width: auto !important;
  }

  .et-product-shell--wrap ~ :not(.et-tabs) {
    clear: both;
  }
}

@media (max-width: 1099px) {
  .et-gallery-more {
    display: none;
  }
}