/* Phone layout fixes for the home page (screens up to 767px wide). */

/* The strip of photos inside a product tile exists only for phones. */
.item-strip { display: none; }

@media (max-width: 767px) {
  /* The page itself must never scroll sideways. Cause fixed below; this is the safety net. */
  body { overflow-x: hidden; }

  /* One product per row, full width (the "collage" rows too). */
  .product-grid-section .partition-wrapper { display: contents; }
  .product-grid-section .hover-image-container { flex: 0 0 100%; position: relative; }

  /* Inside a product: all photos of THAT product in one strip, swiped with a finger.
     One photo fills the whole width, nothing peeks in, no gap. */
  .hover-image-container > .hover-image.hover { display: none; }
  /* The plain photo stays until the strip is ready (script adds .strip-ready); it also keeps the tile height. */
  .item-strip { visibility: hidden; }
  .hover-image-container.strip-ready > .item-strip { visibility: visible; }
  .hover-image-container.strip-ready > .hover-image.default { visibility: hidden; }
  .item-strip {
    display: flex;
    position: absolute;
    inset: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .item-strip::-webkit-scrollbar { display: none; }
  .item-strip img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Footer: the e-mail address and the Instagram name used to be 32px (the address was 498px wide, broke into
     two lines and stretched the whole page). Now the size follows the screen width, so the address always
     fits on ONE line: it is about 15 x font-size + 17px wide in the Bebas font, the free width is 100vw - 60px. */
  p.investor-email a,
  p.follow-us-email a {
    font-size: min(32px, calc((100vw - 78px) / 15.2));
    line-height: 1.5;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Touch screens: a tap must open the product at once, not first trigger the hover picture. */
@media (hover: none) {
  .hover-image-container:hover .hover-image.hover { opacity: 0; }
  .hover-image-container:hover .hover-image.default { opacity: 1; }
}


/* ---------- Hero sound line: one quiet text toggle, OUTSIDE the video (DESIGN-SYSTEM.md 4.2) ---------- */
/* Same slot as the old grey label: left of the video on desktop/tablet, under it on phones.
   No border, fill, radius, shadow or icon. State = the word OFF/ON + brightness. */
.sound-line {
  -webkit-appearance: none; appearance: none;
  display: block; position: relative; margin: 0 0 10px; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  font-family: Bebas, sans-serif; font-size: 16px; line-height: 24px; font-weight: 400;
  letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; text-align: center;
  color: rgba(255, 255, 255, .6);
  cursor: pointer; transition: color .2s ease; -webkit-tap-highlight-color: transparent;
}
.sound-line::before { content: ""; position: absolute; inset: -10px -16px; } /* hit area 44px high, invisible */
.sound-line[aria-pressed="true"] { color: #fff; }
@media (hover: hover) { .sound-line:hover { color: #fff; } }  /* not on touch: hover would stick after a tap */
/* keyboard focus on the text itself, no rectangle (DESIGN-SYSTEM.md 14): white and underlined 2px */
.sound-line:focus-visible { outline: none; color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 768px) { .sound-button-container .sound-line { text-align: right; } }
/* Phones: the box around the video clips its overflow (the video is wider than the screen area), which would also cut
   the lower part of the invisible hit area. Grow the box by 10px and pull it back with a negative margin: no layout shift. */
@media (max-width: 767px) { .video-button-container { padding-bottom: 10px; margin-bottom: -10px; } }