/* One large centred slide and a peek at its neighbours, without page overflow. */
.qp-page .qp-formats-explorer-page #formats { overflow: clip; container-type: inline-size; }
.qp-mini-carousel { --mini-slide-height: min(64svh,50cqw,680px); margin-top: 32px; }
.qp-page .qp-formats-explorer-page .qp-mini-carousel__track {
  display: flex; gap: clamp(16px,1.5vw,24px); width: 100cqw; max-width: none;
  margin-inline: calc(50% - 50cqw); padding-block: 24px;
  padding-inline: max(24px,calc((100cqw - var(--mini-first-width)) / 2)) max(24px,calc((100cqw - var(--mini-last-width)) / 2));
  box-sizing: border-box; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.qp-mini-carousel__track::-webkit-scrollbar { display: none; }
.qp-page .qp-formats-explorer-page .qp-mini-carousel__track .qp-photo-ambient__light { inset: -20px; overflow: clip; }
.qp-page .qp-formats-explorer-page .qp-mini-carousel__track figure { position: relative; flex: 0 0 auto; height: var(--mini-slide-height); aspect-ratio: var(--mini-photo-ratio); scroll-snap-align: center; scroll-snap-stop: normal; }
.qp-page .qp-formats-explorer-page .qp-mini-carousel__track figure > picture { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 28px; }
.qp-page .qp-formats-explorer-page .qp-mini-carousel__track img { aspect-ratio: auto; object-fit: cover; }
.qp-page .qp-formats-explorer-page .qp-mini-carousel__photo-select { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 28px; background: transparent; box-shadow: none; cursor: pointer; touch-action: manipulation; }
.qp-mini-carousel__controls { --mini-control-size: 44px; display: flex; justify-content: center; align-items: center; gap: 12px; margin: 8px auto 0; max-width: 100%; }
.qp-mini-carousel__controls[hidden] { display: none; }
.qp-mini-carousel__controls button:active:not(:disabled) { transform: scale(.96); }
.qp-mini-carousel__bar {
  position: relative; isolation: isolate; display: flex; min-width: 0; max-width: 100%; padding: 5px; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  overscroll-behavior-x: contain; border-radius: 999px; background: rgba(237,242,251,.7); border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--qp-soft-edge); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.qp-mini-carousel__bar::-webkit-scrollbar { display: none; }
.qp-mini-carousel__indicator {
  position: absolute; left: 0; top: 5px; bottom: 5px; width: 0; border-radius: 999px; pointer-events: none; z-index: -1;
  box-sizing: border-box; background: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35),0 2px 6px rgba(15,23,43,.15);
}
.qp-page .qp-formats-explorer-page .qp-mini-carousel__track.is-transitioning { scroll-snap-type: none; }
.qp-mini-carousel__bar.is-ready .qp-mini-carousel__indicator { transition: transform 800ms cubic-bezier(.33333,0,.66667,1), width 800ms cubic-bezier(.33333,0,.66667,1); }
.qp-mini-carousel__progress { position: absolute; inset: 0; overflow: visible; stroke-dashoffset: 100; }
.qp-mini-carousel__progress rect { width: calc(100% - 4px); height: calc(100% - 4px); fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; filter: blur(.2px) drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #fff); }
.qp-mini-carousel__autoplay { box-sizing: border-box; flex: 0 0 var(--mini-control-size); width: var(--mini-control-size); height: var(--mini-control-size); padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; color: #283044; background: rgba(237,242,251,.7); box-shadow: var(--qp-soft-edge); cursor: pointer; touch-action: manipulation; transition: background-color 280ms ease-out; }
.qp-mini-carousel__autoplay:hover { background: #fff; }
.qp-format-autoplay svg { width: 20px; height: 20px; fill: currentColor; }
.qp-format-autoplay__pause, .qp-format-autoplay__repeat { display: none; }
.qp-format-autoplay[data-state="playing"] .qp-format-autoplay__play,
.qp-format-autoplay[data-state="ended"] .qp-format-autoplay__play { display: none; }
.qp-format-autoplay[data-state="playing"] .qp-format-autoplay__pause,
.qp-format-autoplay[data-state="ended"] .qp-format-autoplay__repeat { display: block; }
.qp-format-autoplay__repeat { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qp-mini-carousel__bar button {
  flex: 0 0 auto; min-height: var(--mini-control-size); margin: 0; padding: 10px 16px; border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: #283044; background: transparent;
  cursor: pointer; touch-action: manipulation; transition: color 180ms ease-out, background-color 280ms ease-out;
}
.qp-mini-carousel__bar button:hover { background: rgba(255,255,255,.65); }
.qp-mini-carousel__bar button[aria-current="true"] {
  color: #142238; background: transparent;
}
.qp-page .qp-formats-explorer-page #formats > .wrap > header { display: block; }
.qp-page .qp-formats-explorer-page #formats > .wrap > header h2 { text-align: center; }
.qp-page .qp-formats-explorer-page :is(#mini-formats-title,#mixup-formats-title) { font-size: clamp(40px,6.4vw,76px); line-height: 1.08; width: 100%; max-width: none; text-wrap: balance; }
.qp-page .qp-formats-explorer-page .qp-mini-formats-description {
  grid-column: 2; grid-row: 2; width: 100%; min-width: 0; max-width: none; margin: 0;
}
.qp-page .qp-formats-explorer-page:not(.qp-product-family) .qp-mini-formats-description {
  padding: 24px 26px; border-radius: var(--qp-radius-frame);
  background: rgba(245,248,255,.7); border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--qp-soft-edge); color: #283044; font-size: 16px; font-weight: 500; line-height: 1.6;
}
.qp-mini-carousel :is(button,.qp-mini-carousel__track):focus-visible { outline: 3px solid #3968c5; outline-offset: -3px; }
/* Apple-inspired product explorer, expressed in the existing light material.
   One image viewport, no cloned slides or new rendering loop. */
.qp-mini-explorer {
  --mini-slide-height: clamp(540px,66svh,700px);
  display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0,2fr);
  column-gap: clamp(32px,5vw,80px); row-gap: 24px; align-items: start;
  width: 100%; margin-inline: 0;
}
.qp-page .qp-formats-explorer-page .qp-mini-explorer .qp-mini-carousel__track {
  grid-column: 2; grid-row: 1; width: 100%; margin: 0; padding: 0;
  gap: 0; border-radius: 28px; isolation: isolate;
}
.qp-page .qp-formats-explorer-page .qp-mini-explorer .qp-mini-carousel__track figure {
  flex: 0 0 100%; width: 100%; min-width: 0; margin: 0; aspect-ratio: auto;
}
.qp-page .qp-formats-explorer-page .qp-mini-explorer .qp-mini-carousel__track figure > picture {
  display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; z-index: 1;
}
.qp-page .qp-formats-explorer-page .qp-mini-explorer .qp-mini-carousel__track figure > picture::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: var(--mixup-photo-edge,var(--qp-soft-edge)); pointer-events: none;
}
.qp-page .qp-formats-explorer-page .qp-mini-explorer .qp-mini-carousel__track img {
  width: 100%; height: 100%; object-fit: contain; border-radius: 28px;
}
.qp-mini-explorer .qp-mini-carousel__controls {
  grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start;
  width: 100%; margin: 0; gap: 20px;
}
@media (min-width: 901px) {
  .qp-page .qp-read-page--mixup-seo:not(.qp-product-family) #formats .qp-mini-explorer .qp-mini-carousel__controls { align-self: center; }
}
.qp-mini-explorer .qp-mini-carousel__bar {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%;
  padding: 0; gap: 10px; border: 0; border-radius: 0; overflow: visible;
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.qp-mini-explorer .qp-mini-carousel__bar button {
  width: var(--mini-label-width,100%); max-width: 100%; min-height: 52px; padding: 14px 20px;
  text-align: left; white-space: normal; font-size: 16px; font-weight: 600; overflow: hidden;
  background: rgba(228,234,246,.8); border: 1px solid rgba(255,255,255,.8);
  border-radius: 26px; transition: background-color 300ms ease-out, color 300ms ease-out, width 480ms cubic-bezier(.22,1,.36,1);
}
.qp-mini-explorer .qp-mini-carousel__bar button[aria-current="true"] { width: 100%; }
.qp-mini-explorer .qp-mini-carousel__bar button:hover,
.qp-mini-explorer .qp-mini-carousel__bar button[aria-current="true"] { background: rgba(255,255,255,.88); }
.qp-mini-explorer__label { display: flex; align-items: center; gap: 12px; width: max-content; white-space: nowrap; }
.qp-mini-explorer__mark {
  flex: 0 0 20px; width: 20px; height: 20px; border: 1.5px solid currentColor;
  border-radius: 50%; position: relative; opacity: .7;
}
.qp-mini-explorer__mark::before,.qp-mini-explorer__mark::after {
  content: ""; position: absolute; background: currentColor; border-radius: 1px;
  width: 8px; height: 1.5px; left: 4.5px; top: 8px;
}
.qp-mini-explorer__mark::after { transform: rotate(90deg); transition: transform 300ms ease-out; }
[aria-current="true"] .qp-mini-explorer__mark::after { transform: rotate(0); }
.qp-mini-explorer__detail {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  width: var(--mini-copy-width,100%); font-size: 15px; line-height: 1.5; font-weight: 400; color: #475269;
  transition: grid-template-rows 480ms cubic-bezier(.22,1,.36,1), opacity 300ms ease, visibility 0s 480ms;
}
.qp-mini-explorer__detail > span { min-height: 0; overflow: hidden; }
.qp-mini-explorer__copy { display: block; padding: 14px 0 2px; }
[aria-current="true"] > .qp-mini-explorer__detail {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows 480ms cubic-bezier(.22,1,.36,1), opacity 360ms ease, visibility 0s;
}
.qp-mini-explorer .qp-mini-carousel__indicator {
  top: 0; bottom: auto; border-radius: 26px; z-index: 1;
  background: none; border: 0; box-shadow: none;
}
.qp-mini-explorer .qp-mini-carousel__bar.is-ready .qp-mini-carousel__indicator {
  transition: transform 650ms cubic-bezier(.22,1,.36,1),width 650ms cubic-bezier(.22,1,.36,1),height 650ms cubic-bezier(.22,1,.36,1);
}
.qp-mini-explorer__caption { display: none; }
@media (max-width: 900px) {
  .qp-mini-explorer { --mini-slide-height: clamp(240px,78vw,460px); grid-template-columns: minmax(0,1fr); width: 100%; margin-inline: 0; gap: 20px; }
  .qp-page .qp-formats-explorer-page .qp-mini-explorer .qp-mini-carousel__track { grid-column: 1; grid-row: 1; }
  .qp-mini-explorer .qp-mini-carousel__controls { grid-row: 2; flex-direction: row; align-items: center; gap: 12px; }
  .qp-mini-explorer .qp-mini-carousel__autoplay { order: 2; }
  .qp-mini-explorer .qp-mini-carousel__bar { flex-direction: row; flex: 1; width: auto; overflow-x: auto; overflow-y: hidden; padding: 4px; border-radius: 30px; }
  .qp-mini-explorer .qp-mini-carousel__bar button,
  .qp-mini-explorer .qp-mini-carousel__bar button[aria-current="true"] { width: auto; min-height: 48px; padding: 12px 16px; white-space: nowrap; font-size: 14px; }
  .qp-mini-explorer .qp-mini-carousel__indicator { top: 4px; }
  .qp-mini-explorer .qp-mini-explorer__detail { display: none; }
  .qp-mini-explorer__caption { display: block; grid-row: 3; margin: 0; min-height: 3em; padding-inline: 8px; font-size: 16px; line-height: 1.5; color: #475269; }
  .qp-page .qp-formats-explorer-page .qp-mini-formats-description { grid-column: 1; grid-row: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .qp-mini-explorer .qp-mini-carousel__bar.is-ready .qp-mini-carousel__indicator,
  .qp-mini-explorer__mark::after { transition: none; }
  .qp-mini-explorer .qp-mini-carousel__bar button,
  .qp-mini-explorer .qp-mini-explorer__detail { transition: none; }
}

/* MixUp's nested examples keep the same sidebar and bounded media column. */
.qp-page .qp-read-page--mixup-seo .qp-mixup-formats:has(.qp-format-galleries) header { margin-bottom: 40px; }
.qp-page .qp-read-page--mixup-seo .qp-mixup-formats:has(.qp-format-galleries) h2 { margin-bottom: 0; }
.qp-page .qp-read-page--mixup-seo .qp-mixup-formats-noscript {
  display: grid; gap: 12px; max-width: 76ch; margin: 0 auto 32px; color: #283044;
}
.qp-page .qp-read-page--mixup-seo .qp-mixup-formats-noscript p { margin: 0; line-height: 1.6; }
.qp-page .qp-read-page--mixup-seo #assembly .dza-text.qp-mixup-assembly-value { margin-top: 28px; }
.qp-format-galleries__media { grid-column: 2; grid-row: 1; min-width: 0; width: 100%; }
.qp-format-galleries [data-format-panel][hidden] { display: none; }
.qp-format-galleries [data-format-panel] {
  min-width: 0; padding: 20px; border-radius: var(--qp-radius-frame);
  background: rgba(245,247,253,.55); box-shadow: var(--qp-soft-edge);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.qp-format-gallery__track {
  display: flex; position: relative; gap: 0; padding: 0; overflow-x: auto;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  border-radius: var(--qp-radius-frame); cursor: grab; touch-action: pan-x pan-y;
}
.qp-format-gallery__track::-webkit-scrollbar { display: none; }
.qp-format-gallery__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.qp-page .qp-formats-explorer-page .qp-format-gallery__item {
  position: relative; flex: 0 0 100%; min-width: 0; height: var(--mini-slide-height);
  display: flex; align-items: center; justify-content: center;
  margin: 0; scroll-snap-align: center; overflow: hidden;
  background: transparent; box-shadow: none;
}
.qp-page .qp-format-gallery__item > img,
.qp-page .qp-format-gallery__film, .qp-page .qp-format-gallery__film .qp-mixup-video-frame,
.qp-page .qp-format-gallery__film video { display: block; width: 100%; height: 100%; object-fit: contain; max-height: none; aspect-ratio: auto; background: transparent; }
.qp-read-page.qp-formats-explorer-page .qp-format-gallery__film video { background: transparent; }
.qp-page .qp-format-gallery__item > img,
.qp-page .qp-format-gallery__film {
  width: min(100%, calc(var(--mini-slide-height) * var(--format-ratio)));
  height: auto; aspect-ratio: var(--format-ratio);
  border-radius: var(--qp-radius-frame); overflow: hidden; box-shadow: var(--qp-soft-edge);
}
.qp-page .qp-format-gallery__film .qp-mixup-video-frame,
.qp-page .qp-format-gallery__film video { border-radius: inherit; }
.qp-format-gallery__item:not([data-format-active="true"]) { cursor: pointer; }
.qp-format-gallery__navigation { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 12px; }
.qp-format-gallery__navigation[hidden] { display: none; }
.qp-format-gallery__navigation button {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.8); background: #e4eaf6; color: #283044; cursor: pointer; font: inherit; font-size: 22px;
}
.qp-format-gallery__navigation button:hover:not(:disabled) { background: #fff; }
.qp-format-gallery__navigation button:disabled { opacity: .4; cursor: default; }
.qp-format-gallery__navigation [data-format-status] { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; font-size: 14px; color: #475269; }
/* Opt-in axis shared with product-page owners; categories keep their own axis. */
.qp-format-galleries[data-format-axis="vertical"] .qp-format-gallery__track {
  flex-direction: column; overflow-x: hidden; overflow-y: auto;
  scroll-snap-type: y mandatory; overscroll-behavior-y: contain;
}
.qp-format-galleries[data-format-axis="vertical"] .qp-format-gallery__track.is-dragging { scroll-snap-type: none; }
.qp-format-galleries[data-format-axis="vertical"] .qp-format-gallery__navigation { flex-direction: column; gap: 8px; }
.qp-format-galleries[data-format-axis="vertical"] .qp-format-gallery__navigation button span {
  display: block; width: 8px; height: 8px; font-size: 0;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(2px) rotate(-45deg);
}
.qp-format-galleries[data-format-axis="vertical"] .qp-format-gallery__navigation [data-format-next] span { transform: translateY(-2px) rotate(135deg); }
.qp-format-galleries[data-format-axis="vertical"] [data-format-status] {
  position: absolute; width: 1px; height: 1px; min-width: 0; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.qp-format-galleries :is(button,[data-format-track]):focus-visible { outline: 3px solid #3968c5; outline-offset: -3px; }
.qp-read-page .qp-format-gallery__film .qp-video-toggle {
  top: auto; left: auto; bottom: 16px; right: 16px; width: 44px; height: 44px; min-width: 44px;
  transform: none; opacity: 1; pointer-events: auto;
}
.qp-read-page .qp-format-gallery__film .qp-video-toggle:active { transform: scale(.96); }
.qp-read-page .qp-format-gallery__item[data-format-active="false"] .qp-video-toggle { visibility: hidden; }
@media (max-width: 900px) {
  .qp-format-galleries__media { grid-column: 1; grid-row: 1; }
  .qp-format-galleries [data-format-panel] { padding: 12px; }
}
@media (max-width: 768px) {
  .qp-format-galleries [data-format-panel] { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
@media (prefers-contrast: more) {
  .qp-format-galleries [data-format-panel] { background: #f0f3fa; backdrop-filter: none; -webkit-backdrop-filter: none; }
}