/*
 * KARMA MOBILE PRODUCT CARDS FIX V1.0.1
 *
 * ALL product cards on mobile:
 * catalog grid
 * homepage grid
 * horizontal product scrollers
 * related products
 * recently viewed
 *
 * Desktop untouched.
 */


/* =========================================================
   MOBILE <= 840
   ========================================================= */

@media (max-width: 840px) {

  /* -------------------------------------------------------
     GLOBAL CARD SAFETY
     ------------------------------------------------------- */

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html body .product-card {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;

    border-radius: 3px !important;

    overflow: hidden !important;

    transform: none !important;
    box-shadow: none !important;
  }


  html body .product-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }


  /* -------------------------------------------------------
     NORMAL PRODUCT GRIDS
     ------------------------------------------------------- */

  html body .product-grid,
  html body .product-grid--home {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    column-gap: 7px !important;
    row-gap: 10px !important;
  }


  /* -------------------------------------------------------
     ALL HORIZONTAL PRODUCT SCROLLERS
     -------------------------------------------------------

     Old mobile rule = 64% per card.
     We override it so roughly two cards are visible.
     ------------------------------------------------------- */

  html body .product-scroller,
  html body .product-scroller--product-page {

    display: grid !important;

    grid-auto-flow: column !important;

    grid-auto-columns:
      calc((100% - 8px) / 2) !important;

    grid-template-columns: none !important;

    gap: 8px !important;

    overflow-x: auto !important;

    overflow-y: hidden !important;

    scroll-snap-type: x proximity;

    scroll-padding-inline: 0 !important;

    padding:
      0 0
      10px !important;

    margin-right: -14px;

    padding-right: 14px !important;

    scrollbar-width: none;
  }


  html body .product-scroller::-webkit-scrollbar,
  html body .product-scroller--product-page::-webkit-scrollbar {
    display: none;
  }


  html body .product-scroller .product-card,
  html body .product-scroller--product-page .product-card {

    width: 100% !important;

    min-width: 0 !important;

    scroll-snap-align: start;
  }


  /* -------------------------------------------------------
     IMAGE
     ------------------------------------------------------- */

  html body .product-card__media {

    position: relative;

    width: 100% !important;

    min-width: 0 !important;

    aspect-ratio: 1 / 1 !important;

    overflow: hidden !important;

    background: #fff;
  }


  html body .product-card__media > a {

    display: block !important;

    width: 100% !important;

    height: 100% !important;
  }


  html body .product-card__media img {

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    max-width: 100% !important;

    padding: 4px !important;

    object-fit: contain !important;

    transform: none !important;

    transition: none !important;
  }


  /* -------------------------------------------------------
     CARD BODY
     ------------------------------------------------------- */

  html body .product-card__body {

    display: flex !important;

    flex-direction: column !important;

    min-width: 0 !important;

    padding:
      7px 7px
      9px !important;
  }


  /* -------------------------------------------------------
     CATEGORY
     ------------------------------------------------------- */

  html body .product-card__category {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    margin:
      0 0
      4px !important;

    overflow: hidden;

    color: #7b7b7b !important;

    font-size: 8px !important;

    font-weight: 500 !important;

    line-height: 1.15 !important;

    letter-spacing: .045em !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;
  }


  /* -------------------------------------------------------
     PRODUCT TITLE
     ------------------------------------------------------- */

  html body .product-card h3 {

    display: -webkit-box !important;

    min-height: 0 !important;

    max-height: 29px !important;

    margin:
      0 0
      6px !important;

    padding: 0 !important;

    overflow: hidden !important;

    color: #171717 !important;

    font-size: 10.5px !important;

    font-weight: 500 !important;

    line-height: 1.32 !important;

    letter-spacing: 0 !important;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow-wrap: anywhere;
  }


  html body .product-card h3 a,
  html body .product-card h3 a:visited {

    display: block;

    color: inherit !important;

    font: inherit !important;

    line-height: inherit !important;

    letter-spacing: inherit !important;

    text-decoration: none !important;
  }


  /* -------------------------------------------------------
     PRICE
     ------------------------------------------------------- */

  html body .product-card__price {

    display: flex !important;

    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 3px !important;

    margin-top: auto !important;

    color: #171717 !important;

    font-size: 11.5px !important;

    line-height: 1.15 !important;
  }


  html body .product-card__price strong {

    font-size: 11.5px !important;

    font-weight: 700 !important;

    line-height: 1.15 !important;
  }


  html body .product-card__price .old-price {

    display: none !important;
  }


  /* -------------------------------------------------------
     PRODUCT-PAGE RECOMMENDATION SECTIONS
     ------------------------------------------------------- */

  html body .product-slider-section {

    margin-top: 40px !important;

    padding:
      32px 0
      24px !important;
  }


  html body .product-slider-section--related,
  html body .product-slider-section--recent {

    margin-top: 36px !important;
  }


  html body .product-slider-heading {

    margin-bottom: 16px !important;
  }


  /* Desktop arrows do not belong in mobile card carousels. */
  html body .product-slider-controls {

    display: none !important;
  }

}


/* =========================================================
   SMALL MOBILE <= 390
   ========================================================= */

@media (max-width: 390px) {

  html body .product-grid,
  html body .product-grid--home {

    column-gap: 6px !important;

    row-gap: 9px !important;
  }


  html body .product-scroller,
  html body .product-scroller--product-page {

    grid-auto-columns:
      calc((100% - 6px) / 2) !important;

    gap: 6px !important;
  }


  html body .product-card__body {

    padding:
      6px 6px
      8px !important;
  }


  html body .product-card__category {

    font-size: 7.5px !important;
  }


  html body .product-card h3 {

    max-height: 27px !important;

    font-size: 10px !important;

    line-height: 1.3 !important;
  }


  html body .product-card__price,
  html body .product-card__price strong {

    font-size: 11px !important;
  }

}