/* Mobile colour and size picker alignment.
   Load after shoptet-barevne-varianty.css and fanshops-v15-product-v3.css. */
@media (max-width: 767px) {
  html.fs-v15-preview body.type-product .p-info-wrapper > .fs-color-detail {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html.fs-v15-preview body.type-product .fs-color-detail
  button:is(.fs-color-detail-toggle, .fs-color-size-toggle) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html.fs-v15-preview body.type-product .fs-color-detail
  :is(.fs-color-detail-panel, .fs-color-size-panel) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  html.fs-v15-preview body.type-product .fs-color-detail .fs-color-detail-swatches {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  html.fs-v15-preview body.type-product .fs-color-detail
  button.fs-color-detail-swatch {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html.fs-v15-preview body.type-product .fs-color-detail
  button.fs-color-detail-swatch:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  html.fs-v15-preview body.type-product .fs-color-detail .fs-size-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html.fs-v15-preview body.type-product .fs-color-detail button.fs-size-option {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    box-sizing: border-box !important;
  }
}