/*
 * KARMA MOBILE PRODUCT PAGE COMPACT V1.0.1
 *
 * Main product page only.
 * Restores proper mobile shell and spacing.
 */

@media (max-width: 840px) {

  /* =======================================================
     MAIN PRODUCT CONTAINER
     ======================================================= */

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

    width: min(100% - 28px, 720px) !important;
    max-width: 720px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-top: 4px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 145px !important;

    overflow: visible !important;
  }


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

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

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

    gap: 18px !important;
  }


  html body .product-gallery,
  html body .product-summary,
  html body .product-form,
  html body .product-meta,
  html body .product-info-tabs,
  html body .product-description,
  html body .config-section {

    box-sizing: border-box !important;

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

  }


  /* =======================================================
     GALLERY
     ======================================================= */

  html body .product-gallery__main {

    width: 100% !important;

    margin: 0 !important;

    aspect-ratio: 1 / 1 !important;

    border-left: 0 !important;
    border-right: 0 !important;

    overflow: hidden !important;

  }


  html body .product-gallery__main img {

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;

    object-fit: contain !important;

  }


  html body .product-thumbs {

    gap: 7px !important;

    margin-top: 8px !important;

  }


  html body .product-thumbs button {

    width: 60px !important;
    height: 60px !important;

  }


  /* =======================================================
     CATEGORY
     ======================================================= */

  html body .product-summary__category {

    margin-top: 1px !important;

    font-size: 9px !important;

    line-height: 1.2 !important;

    letter-spacing: .09em !important;

  }


  /* =======================================================
     BREADCRUMBS
     ======================================================= */

  html body .product-page .breadcrumbs {

    width: 100% !important;

    gap: 6px !important;

    margin: 0 !important;

    padding:
      8px 0
      12px !important;

    overflow-x: auto !important;

    font-size: 10px !important;

    line-height: 1.25 !important;

    white-space: nowrap;

    scrollbar-width: none;

  }


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


  /* =======================================================
     H1
     ======================================================= */

  html body .product-summary h1 {

    width: 100% !important;

    margin:
      7px 0
      9px !important;

    font-size: 22px !important;

    font-weight: 500 !important;

    line-height: 1.16 !important;

    letter-spacing: -.015em !important;

    overflow-wrap: break-word;

  }


  /* =======================================================
     LEAD / DESIGN DESCRIPTION
     ======================================================= */

  html body .product-design-summary {

    margin:
      10px 0
      15px !important;

    padding:
      0 0
      14px !important;

  }


  html body .product-design-summary p {

    margin: 0 !important;

    font-size: 14px !important;

    line-height: 1.48 !important;

  }


  /* =======================================================
     PRICE
     ======================================================= */

  html body .product-summary__price {

    margin:
      12px 0
      14px !important;

    font-size: 21px !important;

    line-height: 1.1 !important;

  }


  html body .special-price {

    margin:
      11px 0
      14px !important;

  }


  html body .special-price > div {

    min-height: 0 !important;

    gap: 8px !important;

  }


  html body .special-price strong {

    font-size: 22px !important;

    line-height: 1.1 !important;

  }


  html body .special-price__old {

    font-size: 13px !important;

  }


  html body .special-price__badge {

    padding: 3px 6px !important;

    margin-bottom: 5px !important;

    font-size: 9px !important;

  }


  /* =======================================================
     CONFIGURATION
     ======================================================= */

  html body .config-section {

    margin-top: 12px !important;

    padding-top: 14px !important;

  }


  html body .config-heading {

    gap: 8px !important;

    margin-bottom: 10px !important;

  }


  html body .config-heading > span {

    width: 24px !important;
    height: 24px !important;

    font-size: 10px !important;

  }


  html body .config-heading b {

    font-size: 13px !important;

    line-height: 1.25 !important;

  }


  html body .config-heading small {

    margin-top: 2px !important;

    font-size: 10px !important;

    line-height: 1.3 !important;

  }


  html body .field-label,
  html body .product-form > label,
  html body .product-material > span,
  html body .option-group legend {

    margin-bottom: 6px !important;

    font-size: 12px !important;

    line-height: 1.25 !important;

  }


  html body .brand-select,
  html body .model-list-select,
  html body .model-panel input,
  html body .product-form select {

    width: 100% !important;

    height: 46px !important;

    padding:
      0 11px !important;

    font-size: 14px !important;

  }


  html body .model-tabs {

    margin:
      8px 0
      10px !important;

    padding: 3px !important;

  }


  html body .model-tabs button {

    height: 38px !important;

    font-size: 12px !important;

  }


  /* =======================================================
     LARGE ACTION BUTTONS
     ======================================================= */

  html body .product-page .button--wide,
  html body .product-page .button,
  html body .model-picker .button {

    min-height: 46px !important;

    padding:
      0 16px !important;

    font-size: 14px !important;

    line-height: 1.2 !important;

  }


  /* =======================================================
     MODEL RESULTS
     ======================================================= */

  html body .model-search-hint,
  html body .model-empty {

    padding:
      10px 0 !important;

    font-size: 11px !important;

    line-height: 1.35 !important;

  }


  html body .model-option {

    gap: 7px !important;

    padding:
      9px 10px !important;

  }


  html body .model-option span b {

    font-size: 12px !important;

  }


  html body .model-option small {

    font-size: 10px !important;

  }


  html body .model-option strong {

    font-size: 11px !important;

  }


  /* =======================================================
     OPTIONS
     ======================================================= */

  html body .choice-card,
  html body .addon-card {

    gap: 8px !important;

    padding:
      9px 10px !important;

    margin-bottom: 6px !important;

  }


  html body .choice-card input,
  html body .addon-card input {

    width: 16px !important;
    height: 16px !important;

  }


  html body .choice-card small,
  html body .addon-card small {

    font-size: 10px !important;

  }


  html body .choice-card > strong,
  html body .addon-card > strong {

    font-size: 11px !important;

  }


  /* =======================================================
     CONFIG SUMMARY
     ======================================================= */

  html body .configuration-summary {

    margin:
      11px 0 !important;

    padding:
      10px 11px !important;

    gap:
      4px 8px !important;

  }


  html body .configuration-summary > span {

    font-size: 9px !important;

  }


  html body .configuration-summary > div {

    font-size: 10px !important;

    line-height: 1.35 !important;

  }


  html body .configuration-summary > strong {

    font-size: 17px !important;

  }


  /* =======================================================
     META
     ======================================================= */

  html body .product-meta {

    margin-top: 14px !important;

  }


  html body .product-meta div {

    gap: 10px !important;

    padding:
      8px 0 !important;

    font-size: 10.5px !important;

  }


  html body .product-meta a {

    overflow-wrap: anywhere;

  }


  /* =======================================================
     INFO TABS
     ======================================================= */

  html body .product-info-tabs {

    margin-top: 27px !important;

  }


  html body .info-tab-buttons {

    margin: 0 !important;

    padding: 0 !important;

  }


  html body .info-tab-buttons button {

    padding:
      11px 12px !important;

    font-size: 12px !important;

    line-height: 1.2 !important;

  }


  html body .info-panel {

    width: 100% !important;

    padding:
      18px 0
      25px !important;

    font-size: 14px !important;

    line-height: 1.5 !important;

  }


  html body .info-panel h2 {

    margin:
      0 0
      11px !important;

    font-size: 21px !important;

    line-height: 1.2 !important;

  }


  html body .info-panel h3 {

    margin:
      18px 0
      7px !important;

    font-size: 15px !important;

  }


  html body .info-panel p,
  html body .info-panel__lead {

    margin:
      0 0
      9px !important;

    font-size: 14px !important;

    line-height: 1.5 !important;

  }


  /* =======================================================
     DESCRIPTION
     ======================================================= */

  html body .product-description {

    margin-top: 26px !important;

    padding-top: 20px !important;

  }


  html body .product-description h2 {

    margin-bottom: 12px !important;

    font-size: 21px !important;

    line-height: 1.2 !important;

  }


  html body .product-description p,
  html body .product-description .rich-text {

    font-size: 14px !important;

    line-height: 1.5 !important;

  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

  html body .product-page {

    width: calc(100% - 22px) !important;

  }


  html body .product-summary h1 {

    font-size: 21px !important;

  }


  html body .product-design-summary p,
  html body .info-panel,
  html body .info-panel p,
  html body .info-panel__lead,
  html body .product-description p {

    font-size: 13px !important;

  }

}