/* -----------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------- IMPORTED STYLES --------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


@import "../../universal_styles/variables.css?v=20261101-1600";



/* ---------------------------------------------- vv SITE-SPECIFIC STYLES vv ---------------------------------------------- */

/* Drop page (drop.html): one drop fills the whole screen, nothing to scroll.
   Figma: Drop Page - Single (2520:481), expanded (2524:778 / 2528:1177), more-info motion (2528:1292),
   drop-to-drop motion (2370:2364). Built at 1920 x 1080, centered in each half.
   Responsive (2026-11-01, Figma 2626:2): the picture + the info box shrink with the window (see PICTURE).
   Side by side only for now; portrait / phone layout follows with its own design. */





/* -----------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------- PAGE STRUCTURE ---------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


html.dropPage,
html.dropPage body {
  height: 100%;
  overflow: hidden;
}

/* visible between the two drops while they are scaled down during a drop change */
html.dropPage body {
  background-color: var(--color-white);
}

/* the drops + the up/down buttons, above everything of the drop page except the nav.
   White left + right of it (also during a drop change, when the screens are scaled down) */
#dropLayer {
  position: fixed;
  inset: 0;
  z-index: 420;
}

#dropLayer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -50vw;
  right: -50vw;
  background-color: var(--color-white);
}

#dropStage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* one drop. Moved + scaled as a whole during a drop change (drop.js) */
.dropScreen {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

/* white frame with rounded corners (Figma: Frame Mask 2520:698): 20px from the screen edges (thinner on small
   screens, none below 550px: variables.css), 32px radius.
   The rounded box itself is transparent; its huge box-shadow paints everything outside it white
   (the screen's overflow: hidden cuts the shadow off at the screen edge) */
.dropScreen {
  --drop-frame-inset: var(--screen-frame-inset);
  --drop-frame-radius: var(--screen-frame-radius);
}

/* the drop is also clipped to the frame's rounded box. While it's zoomed out (drop change, page transition) its edge
   sits between pixels: the white mask alone would let a 1px sliver of the dark background show at the sides
   (white #dropLayer background behind it) */
.dropScreen {
  clip-path: inset(var(--drop-frame-inset) round var(--drop-frame-radius));
}

/* ---------------------------------------------- SIZES ---------------------------------------------- */

/* Responsive rules (Justus, 2026-11-01; Figma 2626:2 / 2626:400 / 2626:302 / 2626:700). Set on #dropLayer (not
   html.dropPage: that class is only set once a page transition to the drop page has finished), so the drops,
   the up / down buttons and the grid all use them.

   Side by side (from 1100px width): each half's container = the half inside the frame (50vw - 20px). Its content
   is centered in it (left content 10px to the right of the half's center, right content 10px to the left).
   The picture (always square) and the info box next to it have the same width; their top + bottom lines align
   (box = picture + 30px above and below); the background lines sit at the picture's edges + center.
   Picture size = the smaller of
   - a share of the container width: 2/3 (from 1600px), 3/4 (1300 - 1600px), 5/6 (below 1300px)
   - the height rule: the "drop #3" line below the picture (picture + 36px) stays at least 24px above the nav,
     everything centered vertically -> 100dvh - 2 x (44 + 52 + 24 + 36) = 100dvh - 312px
   The diagonals left of the picture: from the frame towards the picture, 3/4 of that gap (all of it below 1300px).
   Stacked (below 1100px): see RESPONSIVE at the end.
   Texts keep their size; if the collapsed info doesn't fit anymore, it scrolls (drop.js refreshDropScroll) */
#dropLayer {
  --drop-half-shift: calc(var(--screen-frame-inset) / 2);
  --drop-nav-gap: 24px;          /* min. space between the content's bottom (picture's bottom line) and the nav */
  --drop-detail-below: 36px;     /* the "drop #3" line: from the picture's bottom edge to its bottom */
  --drop-height-room: calc(2 * (var(--nav-bottom) + var(--nav-height) + var(--drop-nav-gap) + var(--drop-detail-below)));
  --drop-container: calc(50vw - var(--screen-frame-inset));
  --drop-width-share: calc(2 / 3);
  --drop-diagonal-share: 0.75;
  --drop-picture-size: min(calc(var(--drop-container) * var(--drop-width-share)), calc(100dvh - var(--drop-height-room)));
  --drop-side-gap: calc((var(--drop-container) - var(--drop-picture-size)) / 2);   /* frame -> picture */
  --drop-btn-size: 40px;
}

@media (width < 1600px) {
  #dropLayer {
    --drop-width-share: calc(3 / 4);
  }
}

@media (width < 1300px) {
  #dropLayer {
    --drop-width-share: calc(5 / 6);
    --drop-diagonal-share: 1;
  }
}

.dropFrameMask {
  position: absolute;
  inset: var(--drop-frame-inset);
  z-index: 10;
  border-radius: var(--drop-frame-radius);
  box-shadow: 0 0 0 100vmax var(--color-white);
  pointer-events: none;
}





/* -----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------- LEFT HALF -----------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


.dropLeft {
  position: relative;
  overflow: hidden;
  background-color: var(--color-dark);
}

/* vertical lines (Figma: Lines 2520:743): at the picture's left edge, center and right edge, 14px from the top + bottom.
   1px white at 10% like the home hero lines (opacity measured on the Figma render) */
.dropLines {
  position: absolute;
  inset: 14px calc(-1 * var(--drop-half-shift)) 14px var(--drop-half-shift);   /* centered like the picture */
  opacity: var(--grid-line-opacity);
  pointer-events: none;
  background:
    linear-gradient(var(--color-white), var(--color-white)) calc(50% - var(--drop-picture-size) / 2) 0 / 1px 100% no-repeat,
    linear-gradient(var(--color-white), var(--color-white)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--color-white), var(--color-white)) calc(50% + var(--drop-picture-size) / 2) 0 / 1px 100% no-repeat;
}

/* diagonal lines left of the picture (Figma: 2520:742, same height + top as the picture), from the frame towards
   the picture (width: see SIZES).
   Same pattern as the home hero (.diagonalsPattern in styles.css), shifted 2px down to match the Figma render
   (y="2" on the pattern in drop.html) */
.dropDecoration {
  position: absolute;
  left: var(--screen-frame-inset);
  top: calc(50% - var(--drop-picture-size) / 2);
  width: calc(var(--drop-side-gap) * var(--drop-diagonal-share));
  height: var(--drop-picture-size);
  overflow: hidden;
  pointer-events: none;
}




/* ---------------------------------------------- PICTURE --------------------------------------------- */

/* picture + the detail lines above / below it, centered in the left half */
.dropPictureWrap {
  position: absolute;
  left: calc(50% + var(--drop-half-shift));
  top: 50%;
  width: var(--drop-picture-size);
  height: var(--drop-picture-size);
  transform: translate(-50%, -50%);
}

.dropPicture {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--color-placeholder);   /* shown while a drop has no image yet */
  filter: drop-shadow(0 50px 50px rgba(0, 0, 0, 0.5));
}

.dropPictureImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "tides ———" above and "——— drop #3" below the picture */
.dropPictureDetail {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-body);
  font-size: var(--xs-text);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  white-space: nowrap;
}

.dropPictureDetailTop {
  top: -36px;
}

.dropPictureDetailBottom {
  top: calc(100% + 23px);
}

.dropPictureLine {
  flex: 1;
  height: 1px;
  background-color: var(--color-white);
  opacity: 0.5;
}





/* -----------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------- RIGHT HALF -----------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


.dropRight {
  position: relative;
  background-color: var(--color-drop-info-bg);
}



/* --------------------------------------- PREVIOUS / NEXT BUTTONS ------------------------------------ */

/* Figma 2520:481: 40px circles, 50px from the top / bottom of the screen, centered over the right half's content
   (like the info box: the part of the half inside the frame). When the down button would come closer than 30px
   to the nav (Figma 2626:302, below ~1300 - 1350px width), both buttons stay 30px right of the nav instead
   (--nav-width: navbar.js). Stacked layout: see RESPONSIVE.
   Fixed like the nav (not part of the drops), so they stay in place during a drop change.
   The arrow is the Figma vector, inline in drop.html (points down; turned for the up button).
   Dark = enabled, light = disabled (first / last drop); drop.js animates between them during a drop change */
.dropNavBtn {
  position: fixed;
  left: max(calc(75% - var(--drop-half-shift)), calc(50% + var(--nav-width, 552px) / 2 + 30px + var(--drop-btn-size) / 2));
  width: var(--drop-btn-size);
  height: var(--drop-btn-size);
  margin-left: calc(var(--drop-btn-size) / -2);
  z-index: 20;
  border-radius: 50%;
  background-color: var(--color-dark);
}

.dropNavBtnPrev {
  top: 50px;
}

/* vertically centered on the nav */
.dropNavBtnNext {
  bottom: calc(var(--nav-bottom) + (var(--nav-height) - var(--drop-btn-size)) / 2);
}

/* hidden until the first drop is shown */
.dropNav:not(.isReady) .dropNavBtn {
  visibility: hidden;
}

.dropNavBtn svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--color-white);
}

.dropNavBtnPrev svg {
  transform: rotate(180deg);
}

.dropNavBtn:disabled {
  background-color: var(--color-drop-btn-disabled);
}

.dropNavBtn:disabled svg {
  fill: var(--color-drop-btn-disabled-icon);
}



/* --------------------------------------------- INFO BOX --------------------------------------------- */

/* line · body (title, price, texts) · line · button · line */
.dropInfo {
  position: absolute;
  left: calc(50% - var(--drop-half-shift));
  top: 50%;
  width: var(--drop-picture-size);                  /* same width as the picture (640px in Figma) */
  height: calc(var(--drop-picture-size) + 60px);    /* lines align with the picture's detail lines (700px) */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  color: var(--color-dark);
}

.dropInfoSeparator {
  flex-shrink: 0;
  height: 1px;
  background-color: var(--color-separator);
}

.dropInfoBody {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  contain: paint;   /* nothing of the content is ever drawn outside (iOS drew the banner image over the footer) */
}

/* the part that scrolls once "more" is open and the content is taller than the box.
   The native scrollbar is hidden, .dropScrollBar is drawn instead */
.dropInfoScroll {
  position: absolute;
  inset: 0;
  overflow: hidden;
  scrollbar-width: none;
}

.dropInfoScroll::-webkit-scrollbar {
  display: none;
}

.dropInfoScroll.isScrollable {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* dragged with the mouse (drop.js setUpScrollDrag): no text selection meanwhile */
.dropInfoScroll.isDragging {
  user-select: none;
  -webkit-user-select: none;
}

/* collapsed: title at the top, description + "more" at the bottom.
   expanded: everything one after another, 50px between title and description */
.dropInfoInner {
  min-height: 100%;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 50px;   /* collapsed: at least this much between title and description when the box gets short */
}

.dropScreen.isExpanded .dropInfoInner {
  justify-content: flex-start;
  gap: 50px;
}



/* ---------------------------------------------- HEADER ---------------------------------------------- */

.dropInfoHeader {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  font-family: var(--font-display);
}

.dropNumber {
  font-weight: var(--light-weight);
  font-size: 10px;
  letter-spacing: 10px;
}

.dropTitle {
  font-weight: var(--black-weight);
  font-size: 30px;
  letter-spacing: 3px;
}

.dropPriceRow {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  font-weight: var(--thin-weight);
}

.dropPrice {
  font-size: 24px;
  letter-spacing: 2.4px;
}

.dropPriceNote {
  padding: 4px 0;
  font-size: var(--xs-text);
  letter-spacing: 1.2px;
  color: var(--color-muted);
}



/* ---------------------------------------------- CONTENT --------------------------------------------- */

.dropInfoContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: var(--s-text);
  line-height: var(--body-line-height);
  letter-spacing: var(--letter-spacing-tight);
}

.dropDescription {
  width: 100%;
}

/* paragraphs are separated by one empty line */
.dropDescription p + p {
  margin-top: var(--body-line-height);
}

/* the "more" content: hidden until expanded. Figma (2524:778): 22px around the first line, 40px between the rest */
.dropMore {
  display: none;
  width: 100%;
  flex-direction: column;
  gap: 40px;
}

.dropScreen.isExpanded .dropMore {
  display: flex;
  margin-top: 22px;
}

.dropMore > .dropSeparator:first-child + * {
  margin-top: -18px;
}

.dropSeparator {
  height: 1px;
  background-color: var(--color-separator-light);
}

.dropDetails ul {
  list-style: disc outside;
  padding-left: 21px;
}

/* wide image. The image fills it by default; a drop can zoom / move it with an inline style */
.dropBanner {
  position: relative;
  height: 360px;
  overflow: hidden;
  /* Safari / iOS sometimes doesn't clip the moved image (transform) inside the scrolling info: the mask forces it */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  background-color: var(--color-placeholder);
}

.dropBanner img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.dropNote {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  line-height: normal;
  letter-spacing: -0.5px;
  color: var(--color-gray);
}

.dropNoteNoAi::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: url("../../../images/page_images/drops/ui/icon-crossed-through.svg") center / 100% 100% no-repeat;
}



/* ------------------------------------------ MORE / LESS BUTTON -------------------------------------- */

/* Figma 2566:2: "more" and "less" sit on top of each other and cross-fade, the triangle next to them turns
   (both with the expand / collapse spring, drop.js) */
.dropMoreBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 30px;
  color: var(--color-gray);
  line-height: normal;
}

.dropScreen.isExpanded .dropMoreBtn {
  margin-top: 40px;
}

.dropMoreLabels {
  display: grid;
}

.dropMoreLabel {
  grid-area: 1 / 1;
}

.dropMoreLabelLess {
  opacity: 0;
}

.dropScreen.isExpanded .dropMoreLabelMore {
  opacity: 0;
}

.dropScreen.isExpanded .dropMoreLabelLess {
  opacity: 1;
}

/* Figma: 14 x 7px box, triangle 12.1 x 5.25px inside. icon-dropdown.svg points down ("more"); turned around the
   box center for "less" (so the triangle sits at the bottom of the box for "more", at the top for "less", as in Figma) */
.dropMoreTriangle {
  flex: none;
  width: 14px;
  height: 7px;
  background: url("../../../images/page_images/drops/ui/icon-dropdown.svg") center 1.75px / 12.1242px 6px no-repeat;
}

.dropScreen.isExpanded .dropMoreTriangle {
  transform: rotate(-180deg);
}



/* ---------------------------------------------- SHADOWS --------------------------------------------- */

/* Figma: radial gradient 371 x 27.5px, #141416 at 6% -> transparent, at the bottom / top edge of the body */
.dropInfoShadow {
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s cubic-bezier(0.5, 0, 0.5, 1);
}

.dropInfoShadowTop {
  top: 0;
  background: radial-gradient(371px 27.5px at 50% 0%, rgba(var(--color-dark-rgb), 0.06), rgba(var(--color-dark-rgb), 0));
}

.dropInfoShadowBottom {
  bottom: 0;
  background: radial-gradient(371px 27.5px at 50% 100%, rgba(var(--color-dark-rgb), 0.06), rgba(var(--color-dark-rgb), 0));
}

.dropInfoShadow.isVisible {
  opacity: 1;
}



/* ---------------------------------------------- FOOTER ---------------------------------------------- */

.dropInfoFooter {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* the button row itself: .btnRow.btnRowFull (styles.css) */



/* --------------------------------------------- SCROLL BAR ------------------------------------------- */

/* Figma: 4px wide, 30px right of the info box, from its top over the whole body (603px = box - 97px footer).
   Height + position are animated by drop.js (grows from the bottom when expanding).
   Only the thumb is drawn, with rounded ends: no track (2026-10-31, Justus' choice, like the page scroll indicator).
   The bar still cuts the thumb off at its top + bottom while it grows (clip-path); sideways the clip reaches
   6px further, so the thumb's wider grab area below can be hit */
.dropScrollBar {
  position: absolute;
  left: calc(50% - var(--drop-half-shift) + var(--drop-picture-size) / 2 + 30px);
  top: calc(50% - (var(--drop-picture-size) + 60px) / 2);
  width: 4px;
  height: calc(var(--drop-picture-size) - 37px);
  clip-path: inset(0 -6px);
  visibility: hidden;
}

.dropScrollBar.isVisible {
  visibility: visible;
}

/* draggable (drop.js setUpScrollThumbDrag), a-click cursor effect (drop.html) */
.dropScrollThumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  border-radius: var(--corner-radius-infinite);
  background-color: var(--color-dark);
  touch-action: none;
}

/* grab area 16px wide (6px left + right of the 4px thumb), invisible */
.dropScrollThumb::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -6px;
}





/* -----------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------- RESPONSIVE -----------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* number, title + price next to the picture: only in the stacked layout */
.dropTopInfo {
  display: none;
}



/* ------------------------------------- BELOW 1100PX: STACKED (TOP / BOTTOM) ------------------------------------ */

/* Figma 2626:700 / 2633:1010 / 2635:1107 / 2635:1372 / 2635:1198 / 2635:1461 / 2635:1776 (Justus' rules, 2026-11-01).
   The halves are on top of each other: top = picture + title, bottom = the info box (without number / title / price).
   Each half's container = the half inside the frame (frame: 20px, 15px below 850, 10px below 450).

   Stacked from 1100px down (Justus, 2026-11-01: was 1200, Figma 2626:700's 2/3 rule is not used anymore).
   From 850px: picture + title block in a row ("content", --drop-content-width) centered in the top container:
     content width = 3/4 of the container width (5/6 below 1000). Picture: square, 5/6 of the top
     container's height (but the title block keeps at least 150px). The title block (number, title, price between
     two lines) fills the rest, 50px from the picture. The info box has the content's width.
   Below 850: picture with title + price in a row below it (28px gap, 30px row) as a column, centered in the top
     container; picture = 5/6 of the top container's height minus that row (at most 5/6 of the container width).
     Info box: 3/4 of the container width; below 700 as wide as the home page's sections (screen minus
     --page-padding on both sides, Figma 2635:1198 / 2635:1461 / 2635:1776 / 2635:1875 / 2645:504).
   Info box: top as far below the middle as the picture's bottom is above it (from 1000: 40px, below 700: 36px),
   bottom 24px above the nav. Collapsed it never scrolls: the description is cut to the lines that fit (drop.js)
   Background lines: left edge, center + right edge of the info box. Diagonals: from the frame towards the picture,
   3/4 of that gap (all of it below 550).
   The info box has no top line and (collapsed) no top padding: the description can use that room.
   Up / down buttons (32px): right edge 28px from the frame (24px below 1000), below 850 centered
   between info box and frame; down button on the nav's height, up button's top at the info box's top. Below 700
   they're replaced by "< back" / "next >" buttons under the CTA.
   Footer: CTA 36px (32 below 550), 22px below it (20 below 850); below 700 + 12px + back / next, 12px below
   (8 below 450). Below 390 the top container starts under the single / grid toggle (navbar.css). */
@media (width < 1100px) {
  #dropLayer {
    --drop-top-edge: var(--screen-frame-inset);                                            /* top of the top container */
    --drop-top-shift: calc(var(--drop-top-edge) / 2);                                      /* its center below the top half's */
    --drop-top-container: calc(50dvh - var(--drop-top-edge));
    --drop-full-container: calc(100vw - 2 * var(--screen-frame-inset));
    --drop-content-share: calc(3 / 4);
    --drop-content-width: calc(var(--drop-full-container) * var(--drop-content-share));
    --drop-title-gap: 50px;
    --drop-title-min: 150px;
    --drop-picture-size: min(calc(var(--drop-top-container) * 5 / 6), calc(var(--drop-content-width) - var(--drop-title-gap) - var(--drop-title-min)));
    --drop-box-width: var(--drop-content-width);
    --drop-picture-left: calc(50vw - var(--drop-content-width) / 2);                       /* from the screen's left */
    --drop-side-gap: calc(var(--drop-picture-left) - var(--screen-frame-inset));           /* frame -> picture */
    --drop-diagonal-share: 0.75;
    --drop-box-gap: calc((var(--drop-top-container) - var(--drop-picture-size)) / 2);    /* box top below the middle */
    --drop-box-bottom: calc(var(--nav-bottom) + var(--nav-height) + var(--drop-nav-gap));  /* from the screen's bottom */
    --drop-btn-size: 32px;
    --drop-btn-edge: 28px;   /* up / down buttons: right edge to the frame */
    --drop-footer-btn: 36px;      /* CTA (+ back / next) height */
    --drop-footer-pb: 22px;       /* below the last button */
    --drop-footer-height: calc(var(--drop-footer-btn) + var(--drop-footer-pb));
  }

  @media (width < 1000px) {
    #dropLayer {
      --drop-content-share: calc(5 / 6);
      --drop-btn-edge: 24px;
      --drop-box-gap: 40px;
    }
  }

  @media (width < 850px) {
    #dropLayer {
      --drop-title-row: 30px;
      --drop-title-row-gap: 28px;
      --drop-picture-size: min(calc(var(--drop-top-container) * 5 / 6 - var(--drop-title-row-gap) - var(--drop-title-row)), calc(var(--drop-full-container) * 5 / 6));
      --drop-box-width: calc(var(--drop-full-container) * 3 / 4);
      --drop-picture-left: calc(50vw - var(--drop-picture-size) / 2);
      --drop-footer-pb: 20px;
    }
  }

  @media (width < 700px) {
    #dropLayer {
      --drop-box-width: calc(100vw - 2 * var(--page-padding));   /* as wide as the home sections (Figma 2635:1198 ... 2645:504) */
      --drop-box-gap: 36px;
      --drop-bar-gap: min(30px, (var(--page-padding) - 4px) / 2);   /* scroll bar: 30px right of the box, or centered in a narrower side space */
      --drop-footer-pb: 12px;
      --drop-footer-height: calc(2 * var(--drop-footer-btn) + 12px + var(--drop-footer-pb));   /* + back / next */
    }
  }

  @media (width < 550px) {
    #dropLayer {
      --drop-diagonal-share: 1;
      --drop-footer-btn: 32px;
    }
  }

  @media (width < 450px) {
    #dropLayer {
      --drop-footer-pb: 8px;
    }
  }

  /* below 390 (Figma 2635:1875) the single / grid toggle sits at the top (navbar.css): the top container starts
     below it, so picture + title are centered between the toggle and the middle */
  @media (width < 390px) {
    #dropLayer {
      --drop-top-edge: calc(var(--nav-toggle-top) + 32px);   /* toggle: 34px from the top, 32px tall */
    }
  }

  .dropScreen {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }


  /* -------- top half -------- */

  /* at the info box's left edge, center and right edge */
  .dropLines {
    inset: 0;
    background:
      linear-gradient(var(--color-white), var(--color-white)) calc(50% - var(--drop-box-width) / 2) 0 / 1px 100% no-repeat,
      linear-gradient(var(--color-white), var(--color-white)) 50% 0 / 1px 100% no-repeat,
      linear-gradient(var(--color-white), var(--color-white)) calc(50% + var(--drop-box-width) / 2) 0 / 1px 100% no-repeat;
  }

  /* the top container's center is half the frame below the top half's center */
  .dropPictureWrap {
    left: calc(var(--drop-picture-left) + var(--drop-picture-size) / 2);
    top: calc(50% + var(--drop-top-shift));
  }

  .dropDecoration {
    top: calc(50% + var(--drop-top-shift) - var(--drop-picture-size) / 2);
  }

  .dropPictureDetail {
    display: none;
  }

  .dropTopInfo {
    position: absolute;
    left: calc(var(--drop-picture-left) + var(--drop-picture-size) + var(--drop-title-gap));
    right: calc(50% - var(--drop-content-width) / 2);
    top: calc(50% + var(--drop-top-shift) - var(--drop-picture-size) / 2);
    height: var(--drop-picture-size);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--color-white);
  }

  .dropTopInfoLine {
    height: 1px;
    background-color: var(--color-white);
    opacity: 0.5;
  }


  /* -------- bottom half -------- */

  .dropInfo {
    left: 50%;
    top: var(--drop-box-gap);   /* the bottom half starts at the middle */
    bottom: var(--drop-box-bottom);
    width: var(--drop-box-width);
    height: auto;
    transform: translateX(-50%);
  }

  .dropInfo .dropInfoHeader {
    display: none;
  }

  /* collapsed: the description sits at the bottom of the box (no title above it anymore) */
  .dropScreen:not(.isExpanded) .dropInfoInner {
    justify-content: flex-end;
  }

  /* no top line: no line on top of the box, and collapsed no top padding either */
  .dropInfo > .dropInfoSeparator {
    display: none;
  }

  .dropScreen:not(.isExpanded) .dropInfoInner {
    padding-top: 0;
  }

  /* expanded: the content moves up to the box's top edge (2026-11-01: it stopped 30px below it) */
  .dropScreen.isExpanded .dropInfoInner {
    padding-top: 0;
  }

  /* footer (Figma, updated 2026-11-01): no lines, CTA (+ "< back" / "next >" below 700) and the space below.
     The body's 30px bottom padding is the gap between "more" and the CTA */
  .dropInfoFooter > .dropInfoSeparator {
    display: none;
  }

  .dropInfoFooter {
    gap: 12px;
    padding-bottom: var(--drop-footer-pb);
  }

  .dropInfoFooter .btnRow {
    height: var(--drop-footer-btn);
  }

  /* the CTA + previous / next texts get smaller when the box is narrow (short phones: the box is as wide as the
     picture, which then follows the height). 23 = width of "pre-orders start december 2026" in font sizes */
  .dropInfoFooter .btn {
    font-size: min(var(--button-text), calc(var(--drop-box-width) / 23));
  }

  .dropScrollBar {
    left: calc(50% + var(--drop-box-width) / 2 + var(--drop-bar-gap, 30px));
    top: var(--drop-box-gap);
    bottom: calc(var(--drop-box-bottom) + var(--drop-footer-height));   /* over the box's body, like side by side */
    height: auto;
  }

  .dropNavBtn {
    left: calc(100% - var(--screen-frame-inset) - var(--drop-btn-edge) - var(--drop-btn-size) / 2);
  }

  .dropNavBtnPrev {
    top: calc(50% + var(--drop-box-gap));
  }
}


/* -------- collapsed: 20px between description and "more" below 1200px (both layouts) -------- */

@media (width < 1200px) {
  .dropScreen:not(.isExpanded) .dropMoreBtn {
    margin-top: 20px;
  }
}


/* -------- below 550px, collapsed: description at the top, "more" stays at the bottom (Figma 2635:1461) -------- */

/* the space between them fills up, but is at least 20px: with less, the description is cut (drop.js fitDescription) */
@media (width < 550px) {
  .dropScreen:not(.isExpanded) .dropInfoInner {
    justify-content: flex-start;
  }

  .dropScreen:not(.isExpanded) .dropInfoContent {
    flex: 1;
  }

  .dropScreen:not(.isExpanded) .dropDescription {
    margin-bottom: 20px;
  }

  .dropScreen:not(.isExpanded) .dropMoreBtn {
    margin-top: auto;
  }
}


/* -------- title sizes -------- */

@media (width < 1100px) {
  .dropTitle {
    font-size: 28px;
    letter-spacing: 2.8px;
  }
}


/* ------------------------------------- BELOW 850PX: PICTURE + TITLE AS A COLUMN ------------------------------------ */

@media (width < 850px) {
  /* column: picture, 28px, title row (30px), centered in the top container */
  .dropPictureWrap {
    top: calc(50% + var(--drop-top-shift) - (var(--drop-title-row-gap) + var(--drop-title-row)) / 2);
  }

  .dropDecoration {
    top: calc(50% + var(--drop-top-shift) - (var(--drop-picture-size) + var(--drop-title-row-gap) + var(--drop-title-row)) / 2);
  }

  /* title + price in a row below the picture: no number, no "expected", no lines */
  .dropTopInfo {
    left: var(--drop-picture-left);
    right: auto;
    top: calc(50% + var(--drop-top-shift) + (var(--drop-picture-size) + var(--drop-title-row-gap) + var(--drop-title-row)) / 2 - var(--drop-title-row));
    width: var(--drop-picture-size);
    height: var(--drop-title-row);
    padding: 0 8px;
    justify-content: center;
  }

  .dropTopInfoLine,
  .dropTopInfo .dropNumber,
  .dropTopInfo .dropPriceNote {
    display: none;
  }

  .dropTopInfo .dropInfoHeader {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .dropTitle {
    font-size: 26px;
    letter-spacing: 2.6px;
  }

  .dropTopInfo .dropPrice {
    font-size: 22px;
    letter-spacing: 2.2px;
  }

  /* info box + up / down buttons: the buttons sit centered between the box and the frame */
  .dropNavBtn {
    left: calc(75% + var(--drop-box-width) / 4 - var(--screen-frame-inset) / 2);
  }

}


/* ------------------------------ BELOW 700PX: PREVIOUS / NEXT BUTTONS INSTEAD OF ARROWS ------------------------------ */

/* "< previous" / "next >" under the CTA (only below 700px, Figma 2635:1198) */
.dropPageButtons {
  display: none;
}

@media (width < 700px) {
  .dropNavBtn {
    display: none;
  }

  /* CTA · 12 · back / next (heights + space below: RESPONSIVE variables) */
  .dropPageButtons {
    display: flex;
    gap: 12px;
  }

  .dropPageBtn {
    border: 0.5px solid var(--color-dark);
    color: var(--color-dark);
  }

  .dropPageBtn:disabled {
    border-color: var(--color-muted);
    color: var(--color-muted);
  }
}


/* ----------------------------------- SHORTER CTA TEXTS ON NARROW SCREENS ----------------------------------- */

/* optional per drop (drop file: data-label-450 / data-label-390 on the button, drop.js splitButtonLabels):
   one text per width, below 450px and below 390px the shorter ones (Figma 2635:1776 / 2635:1875) */
.btnLabel450,
.btnLabel390 {
  display: none;
}

@media (width < 450px) {
  .btnLabelFull {
    display: none;
  }

  .btnLabel450 {
    display: inline;
  }

  /* the short text fits: no need to scale it down */
  .dropInfoFooter .btn.hasShortLabels {
    font-size: var(--button-text);
  }
}

@media (width < 390px) {
  .btnLabel450 {
    display: none;
  }

  .btnLabel390 {
    display: inline;
  }
}