/* ==================================================================
   FIRST PAINT - what the page looks like before any script has run

   Each rule here describes a state the page is in for the few hundred
   milliseconds between the first frame and the moment a script (Swiper,
   mostly) finishes starting up, and makes that state look like the one
   the script will leave behind. Measured with a frame-by-frame recording
   of each page: without them the product photograph shrank, the
   thumbnail strip appeared out of nothing and the buy card jumped down.

   Nothing here applies once a slider is running - every selector is
   limited to :not(.swiper-container-initialized) or, where XStore waits
   for its own second pass, :not(.second-initialized).
   ================================================================== */

/* ---- the large photograph ----

   Before Swiper starts, every slide is laid out in one row and the row is
   as tall as the tallest photograph. Swiper then sets it to the height of
   the one showing (autoHeight), so the photograph area shrank - on a phone
   by 57px, pulling the buy card up under the reader's thumb. Only the first
   slide, the one Swiper will show, is given a height beforehand. */
.af-pdp .swiper-control-top:not(.swiper-container-initialized) > .main-images > .swiper-slide:not(:first-child){
  height:0!important;
  overflow:hidden;
}

/* ---- the thumbnail strip ----

   XStore hides the thumbnails (height 0, invisible) until its second
   pass after Swiper has sized them - .second-initialized - so the strip
   was a 48px band that grew to its real height when they appeared, and
   everything under it moved. They are sized here exactly as Swiper will
   size them: the same number across at each of Swiper's breakpoints (read
   from the strip's own data attributes) with the same gap, and the first
   one marked current. */
.af-pdp .swiper-control-bottom[data-space="0"]{--af-gap:0px}
.af-pdp .swiper-control-bottom[data-space="5"]{--af-gap:5px}
.af-pdp .swiper-control-bottom[data-space="10"]{--af-gap:10px}
.af-pdp .swiper-control-bottom[data-space="15"]{--af-gap:15px}
.af-pdp .swiper-control-bottom[data-space="20"]{--af-gap:20px}
.af-pdp .swiper-control-bottom[data-space="30"]{--af-gap:30px}

.af-pdp .swiper-control-bottom[data-xs-slides="2"]{--af-n:2}
.af-pdp .swiper-control-bottom[data-xs-slides="3"]{--af-n:3}
.af-pdp .swiper-control-bottom[data-xs-slides="4"]{--af-n:4}
.af-pdp .swiper-control-bottom[data-xs-slides="5"]{--af-n:5}
.af-pdp .swiper-control-bottom[data-xs-slides="6"]{--af-n:6}

@media (min-width:640px){
  .af-pdp .swiper-control-bottom[data-sm-slides="2"]{--af-n:2}
  .af-pdp .swiper-control-bottom[data-sm-slides="3"]{--af-n:3}
  .af-pdp .swiper-control-bottom[data-sm-slides="4"]{--af-n:4}
  .af-pdp .swiper-control-bottom[data-sm-slides="5"]{--af-n:5}
  .af-pdp .swiper-control-bottom[data-sm-slides="6"]{--af-n:6}
}

@media (min-width:1024px){
  .af-pdp .swiper-control-bottom[data-md-slides="2"]{--af-n:2}
  .af-pdp .swiper-control-bottom[data-md-slides="3"]{--af-n:3}
  .af-pdp .swiper-control-bottom[data-md-slides="4"]{--af-n:4}
  .af-pdp .swiper-control-bottom[data-md-slides="5"]{--af-n:5}
  .af-pdp .swiper-control-bottom[data-md-slides="6"]{--af-n:6}
}

@media (min-width:1370px){
  .af-pdp .swiper-control-bottom[data-lt-slides="2"]{--af-n:2}
  .af-pdp .swiper-control-bottom[data-lt-slides="3"]{--af-n:3}
  .af-pdp .swiper-control-bottom[data-lt-slides="4"]{--af-n:4}
  .af-pdp .swiper-control-bottom[data-lt-slides="5"]{--af-n:5}
  .af-pdp .swiper-control-bottom[data-lt-slides="6"]{--af-n:6}
}

.af-pdp .swiper-control-bottom:not(.second-initialized) .swiper-slide{
  height:auto!important;
  width:calc((100% - (var(--af-n,4) - 1) * var(--af-gap,10px)) / var(--af-n,4))!important;
  margin-right:var(--af-gap,10px);
  flex-shrink:0;
  visibility:visible!important;
  opacity:.6!important;
}

.af-pdp .swiper-control-bottom:not(.second-initialized) .swiper-slide:first-child{
  opacity:1!important;
}