/**
 * Single product — fabric and construction first.
 *
 * Scoped to .single-product so nothing here can reach the shop or category pages. Typography and
 * colours stay the theme's; this only adds the new elements and the gallery grid.
 */

/* ---------------------------------------------------------------- gallery */

.single-product .twill-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

/* A lone photograph has no grid to sit in — give it the full column. */
.single-product .twill-gallery--count-1 {
  grid-template-columns: 1fr;
}

.single-product .twill-gallery .twill-gallery__item {
  position: relative;
  aspect-ratio: 3 / 4;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f4f5f7;
}

/* WooCommerce and the theme both style `div.product div.images img`, which outranks a plain
   class selector and leaves the picture at its natural height inside the frame. */
.woocommerce div.product .twill-gallery .twill-gallery__item img.twill-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ------------------------------------------------------------ subtitle */

.single-product .twill-product-subtitle {
  margin: 2px 0 14px;
  font-size: 16px;
  line-height: 1.4;
  color: #6b7280;
}

/* -------------------------------------------------------------- badges */

.single-product .twill-product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 22px;
  padding: 0;
  list-style: none;
}

.single-product .twill-product-badges .twill-badge {
  padding: 7px 14px;
  border: 1px solid #d7dee8;
  border-radius: 3px;
  background-color: #f2f6fb;
  font-size: 13px;
  line-height: 1.3;
  color: #021e42;
  white-space: nowrap;
}

/* The theme leaves list-item markers on summary lists; both lists need them off explicitly. */
.woocommerce div.product .summary ul.twill-product-badges,
.woocommerce div.product .summary ul.twill-product-badges li,
.woocommerce div.product .summary ul.twill-product-trust,
.woocommerce div.product .summary ul.twill-product-trust li {
  list-style: none;
}

.woocommerce div.product .summary ul.twill-product-badges li::marker,
.woocommerce div.product .summary ul.twill-product-trust li::marker {
  content: "";
}

/* ------------------------------------------------- size label + guide */

.single-product .variations .label {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.single-product .twill-size-guide {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.single-product .twill-size-guide:hover,
.single-product .twill-size-guide:focus {
  color: #021e42;
  border-bottom-color: #021e42;
}

/* The guide used to be a standalone button below the options; it now sits on the size row. */
.single-product .variations .methodology-button {
  display: none;
}

/* ------------------------------------------------------ chosen size */

/* The theme marks a chosen size with a dot inside a ring. main.css swapped the ring for a pill and
   shrank the dot to nothing, so the only thing left telling the chosen size apart was a slightly
   bolder label. The chosen pill is filled instead.
   Scoped to .variations_form rather than .single-product: the quick view popup draws the same
   options on shop and category pages, and a customer choosing a size there needs to see it too. */
.variations_form .ts-product-attribute > div.option:not(.color).selected > a {
  background-color: #021e42;
  border-color: #021e42;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(2, 30, 66, 0.25);
}

.variations_form .ts-product-attribute > div.option:not(.color) > a:focus-visible {
  outline: 2px solid #021e42;
  outline-offset: 2px;
}

/* --------------------------------------------------------- trust row */

.single-product .twill-product-trust {
  clear: both;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.9;
  color: #4b5563;
}

/* ------------------------------------------------------------ mobile */

@media only screen and (max-width: 767px) {
  /* A column of full-width 3:4 frames puts the buy button three or four screens down, and the
     shop reported customers scrolling to reach it. One row that swipes keeps every photograph at
     full width and the button within reach. The next frame peeks past the edge so the swipe is
     discoverable without a script or a row of dots.
     Change back to `display: grid; grid-template-columns: 1fr;` to return to the stacked column. */
  .single-product .twill-gallery {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .single-product .twill-gallery::-webkit-scrollbar {
    display: none;
  }

  .single-product .twill-gallery .twill-gallery__item {
    flex: 0 0 88%;
    scroll-snap-align: start;
  }

  /* A lone photograph has nothing to swipe to, so it takes the whole width. */
  .single-product .twill-gallery--count-1 .twill-gallery__item {
    flex-basis: 100%;
  }

  .single-product .twill-product-subtitle {
    font-size: 15px;
  }
}

/* ---------------------------------------------- σταθερή δεξιά στήλη */

/**
 * The summary stays put while the photographs scroll past it — the behaviour the client asked
 * for after seeing etonshirts.com.
 *
 * Two things have to be true for this to work at all:
 *
 * 1. No ancestor may be a scroll container. The theme puts `overflow: hidden` on #page (it stops
 *    full-width WPBakery rows from causing sideways scroll), and that alone silently disables
 *    every sticky descendant. `overflow-x: clip` clips exactly the same way without creating a
 *    scroll container, so the sticky survives and the sideways scroll stays fixed.
 * 2. The column must not scroll internally. Capping its height and letting it scroll would mean
 *    the wheel scrolls the summary whenever the pointer is over it — the opposite of "you scroll
 *    the left column only". So it is left at its natural height: 733px of it (everything up to and
 *    including the trust rows) fits under the header, and the accordions below that come into view
 *    at the end of the scroll, when the column releases.
 */

/* Contains the two floated columns without becoming a scroll container, so the sticky survives. */
.single-product .twill-product-columns {
  display: flow-root;
}

@media only screen and (min-width: 992px) {
  .single-product #page.site {
    overflow: visible;
    overflow-x: clip;
  }

  /**
   * Give the photographs the wider half. The theme splits the row 45/55 in favour of the text,
   * which makes each frame 296px wide and the whole grid shorter than the summary — so there is
   * nothing for the pinned column to sit still against. Eton's proportions are the other way
   * round, and the brief wants the construction shots big in any case.
   */
  .single-product.woocommerce div.product .twill-product-columns div.images-thumbnails.twill-gallery {
    width: 60%;
  }

  .single-product.woocommerce div.product .twill-product-columns div.summary.entry-summary {
    width: 40%;
  }

  .woocommerce div.product .summary.entry-summary {
    position: sticky;
    top: 108px; /* 88px sticky header + 20px */
    align-self: flex-start;
  }
}