/* ssaw Stage 11.10 / Home shelf module
 * Scope: mobile RARE / PICK UP shelf width and edge-arrow presentation.
 * Loaded at the original cascade position, immediately after home-v47 CSS.
 */

/* ========================================================================
   RARE / PICK UP mobile shelf controls
   Source: #ssaw-mobile-shelf-field-controls-v6 (Stage 10.43)
   Behavior-preserving extraction: declarations are unchanged.
======================================================================== */
@media screen and (max-width:767px){
  /*
   * RARE / PICK UP
   * Two complete cards plus approximately half of the next card.
   */
  body#pageIndex .top-rank,
  body#pageIndex .top-pickup{
    position:relative!important;
  }

  body#pageIndex .top-rank>.ttl-h2,
  body#pageIndex .top-pickup>.ttl-h2{
    min-height:0!important;
    padding-right:0!important;
  }

  body#pageIndex .top-rank .slider-item-wrap,
  body#pageIndex .top-pickup .slider-item-wrap{
    position:relative!important;
    overflow:visible!important;
  }

  body#pageIndex .top-rank .slick-list,
  body#pageIndex .top-pickup .slick-list{
    box-sizing:content-box!important;
    overflow:hidden!important;
    padding-right:24%!important;
    margin-right:-24%!important;
    touch-action:pan-y!important;
    cursor:grab!important;
  }

  body#pageIndex .top-rank .slick-list:active,
  body#pageIndex .top-pickup .slick-list:active{
    cursor:grabbing!important;
  }

  body#pageIndex .top-rank .slick-track,
  body#pageIndex .top-pickup .slick-track{
    display:flex!important;
  }

  body#pageIndex .top-rank .slick-slide,
  body#pageIndex .top-pickup .slick-slide{
    height:auto!important;
  }

  body#pageIndex .top-rank .slick-slide>div,
  body#pageIndex .top-pickup .slick-slide>div{
    height:100%!important;
  }

  body#pageIndex .top-rank .items,
  body#pageIndex .top-pickup .items{
    box-sizing:border-box!important;
    padding-right:8px!important;
  }

  /* Do not depend on Slick-generated arrows. */
  body#pageIndex .top-rank .slick-arrow,
  body#pageIndex .top-pickup .slick-arrow{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body#pageIndex .top-rank .slider-item-wrap::before,
  body#pageIndex .top-rank .slider-item-wrap::after,
  body#pageIndex .top-pickup .slider-item-wrap::before,
  body#pageIndex .top-pickup .slider-item-wrap::after{
    content:none!important;
    display:none!important;
  }

  /*
   * IMPORTANT:
   * The visible shelf area is wider than .slider-item-wrap because the
   * third card is exposed with negative margin-right. Therefore the
   * overlay must also be extended to the real visible edges.
   */
  body#pageIndex .ssaw-shelf-field-controls{
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    left:-12px!important;
    right:-24%!important;
    z-index:50!important;
    display:block!important;
    pointer-events:none!important;
  }

  body#pageIndex .ssaw-shelf-field-controls[hidden]{
    display:none!important;
  }

  body#pageIndex .ssaw-shelf-field-controls
  .ssaw-field-notes-arrow{
    position:absolute!important;
    top:var(--ssaw-field-arrow-y,50%)!important;
    display:grid!important;
    place-items:center!important;
    box-sizing:border-box!important;
    width:30px!important;
    min-width:30px!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:rgba(0,0,48,.06)!important;
    color:rgba(0,0,48,.78)!important;
    opacity:.68!important;
    box-shadow:none!important;
    cursor:pointer!important;
    pointer-events:auto!important;
    transform:translateY(-50%)!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    z-index:51!important;
  }

  /* Pin both arrows to the actual visible edges. */
  body#pageIndex .ssaw-shelf-field-controls
  .ssaw-field-notes-arrow.is-prev{
    left:0!important;
    right:auto!important;
  }

  body#pageIndex .ssaw-shelf-field-controls
  .ssaw-field-notes-arrow.is-next{
    right:0!important;
    left:auto!important;
  }

  body#pageIndex .ssaw-shelf-field-controls
  .ssaw-field-notes-arrow svg{
    display:block!important;
    width:8px!important;
    height:14px!important;
  }

  body#pageIndex .ssaw-shelf-field-controls
  .ssaw-field-notes-arrow:disabled{
    opacity:.14!important;
    cursor:default!important;
    pointer-events:none!important;
  }
}

@media screen and (min-width:768px){
  body#pageIndex .ssaw-shelf-field-controls{
    display:none!important;
  }
}