/* Product page on a computer (two columns from 1100 px), 28. 10. 2026 (29. 10.: border along the buy box cut-out, no hyphenation; new file name because Cloudflare caches CSS as immutable): 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. The ::before draws
     the card's border along the cut-out (from the top of the card, --et-card-top is set by the script in product.twig), and
     the float's margins keep the text one card padding (24 px) away from that border, like on the left side of the card
     (margin 24 + width + 12 px padding = the same 36 px gap and column as the grid, so the float still fits beside the photos). */
  .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 {
    position: relative;
    float: right;
    width: calc((100% - 36px) * 0.475 + 12px);
    margin: 0 0 24px 24px;
    padding: 0 0 28px 12px;
    background: #fbfaf7;
  }

  .et-product-shell--wrap > .et-product-summary::before {
    content: "";
    position: absolute;
    top: var(--et-card-top, 0);
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid var(--et-line);
    border-left: 1px solid var(--et-line);
    border-bottom-left-radius: var(--et-radius);
    pointer-events: none;
  }

  /* A short tab (e.g. Ke stažení) ends above the buy box: no border hanging below the card there */
  .et-product-shell--wrap > .et-product-summary.et-card-short::before {
    display: none;
  }

  .et-product-shell--wrap > .et-product-summary > * {
    position: relative;
  }

  .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;
  }
}

/* Description text never splits a word at the end of a line (no hyphenation, a word breaks only when it alone is wider than the line) */
#tab-description .et-content-card,
#tab-technical-info .et-content-card,
#tab-downloads .et-content-card {
  overflow-wrap: break-word;
  word-break: normal;
}

#tab-description .et-content-card p,
#tab-description .et-content-card li,
#tab-technical-info .et-content-card p,
#tab-technical-info .et-content-card li,
#tab-downloads .et-content-card p,
#tab-downloads .et-content-card li {
  hyphens: manual;
}