/* ============================================================================
  E-Gift Card Product Page Style Overrides
  This CSS file completely overrides all product page styling for the 
  e-gift-card product only (path: /products/e-gift-card)
============================================================================== */

/* Only apply these styles to the e-gift-card product page */
body[data-product-handle="e-gift-card"],
.template-product[data-product-handle="e-gift-card"] {

  .product-intro-mobile__header {
    padding-top: 16px;
    padding-bottom: 10px;
  }

  .product-intro-mobile__price-reviews {
    display: none;
  }

  .product-form__meta {
    margin-bottom: 24px;
  }

  .product-form__price {
    font-family: "fields", sans-serif;
    font-size: 1.625rem;
    line-height: 1;
  }

  .product-swatch-select {
    margin-bottom: 16px;
  }

  .product-swatch-select__list {
    gap: 0px;
    margin: 0px;

    li {
      margin-bottom: 8px;
      padding: 0px;
    }

    li:nth-child(odd) {
      padding-right: 4px;
    }

    li:nth-child(even) {
      padding-left: 4px;
    }

    label {
      border-radius: 2px;
      border: 1px solid #c1c1c1;
      padding-top: 16px;
      padding-bottom: 16px;
      color: #050506;
      font-family: "proxima-nova", sans-serif;
      font-size: 0.875rem;
      -webkit-font-smoothing: antialiased;
      font-weight: 500;
      line-height: 1rem;
      transition-property: background-color, border-color, color;
      transition-duration: 200ms;

      span {
        position: relative;
        display: block;
        top: auto;
        left: auto;
        transform: none;
        width: full;
        text-align: center;
      }
    }

    label:hover {
      border: 1px solid #005f61;
      color: white;
      background-color: #005f61;
    }

    input:checked+label {
      border: 1px solid #005f61;
      color: white;
      background-color: #005f61;
      font-weight: bold;
    }
  }

  @media (min-width: 768px) {
    .product-intro-mobile__header {
      padding-top: 16px;
      padding-bottom: 10px;
    }
  
    .product-intro-mobile__price-reviews {
      display: none;
    }
  
    .product-form__meta {
      margin-bottom: 24px;
      margin-top: 12px;
    }
  
    .product-form__price {
      font-family: "fields", sans-serif;
      font-size: 2rem;
      line-height: 1;
    }
  
    .product-swatch-select {
      margin-bottom: 16px;
    }
  
    .product-swatch-select__list {
      gap: 0px;
      margin: 0px;
  
      li {
        margin-bottom: 8px;
        padding: 0px;
      }
  
      li:nth-child(odd) {
        padding-right: 4px;
      }
  
      li:nth-child(even) {
        padding-left: 4px;
      }
  
      label {
        border-radius: 2px;
        border: 1px solid #c1c1c1;
        padding-top: 16px;
        padding-bottom: 16px;
        color: #050506;
        font-family: "proxima-nova", sans-serif;
        font-size: 1rem;
        -webkit-font-smoothing: antialiased;
        font-weight: 500;
        line-height: 1rem;
        transition-property: background-color, border-color, color;
        transition-duration: 200ms;
  
        span {
          position: relative;
          display: block;
          top: auto;
          left: auto;
          transform: none;
          width: full;
          text-align: center;
        }
      }
  
      label:hover {
        border: 1px solid #005f61;
        color: white;
        background-color: #005f61;
      }
  
      input:checked+label {
        border: 1px solid #005f61;
        color: white;
        background-color: #005f61;
        font-weight: bold;
      }
    }
  }

  @media (min-width: 1024px) {
    .product-intro-mobile__header {
      padding-top: 16px;
      padding-bottom: 10px;
    }
  
    .product-intro-mobile__price-reviews {
      display: none;
    }
  
    .product-form__meta {
      margin-bottom: 24px;
      margin-top: 12px;
    }
  
    .product-form__price {
      font-family: "fields", sans-serif;
      font-size: 2rem;
      line-height: 1;
    }
  
    .product-swatch-select {
      margin-bottom: 16px;
    }
  
    .product-swatch-select__list {
      gap: 0px;
      margin: 0px;
  
      li {
        margin-bottom: 8px;
        padding: 0px;
      }
  
      li:nth-child(odd) {
        padding-right: 4px;
      }
  
      li:nth-child(even) {
        padding-left: 4px;
      }
  
      label {
        border-radius: 2px;
        border: 1px solid #c1c1c1;
        padding-top: 16px;
        padding-bottom: 16px;
        color: #050506;
        font-family: "proxima-nova", sans-serif;
        font-size: 1rem;
        -webkit-font-smoothing: antialiased;
        font-weight: 500;
        line-height: 1rem;
        transition-property: background-color, border-color, color;
        transition-duration: 200ms;
  
        span {
          position: relative;
          display: block;
          top: auto;
          left: auto;
          transform: none;
          width: full;
          text-align: center;
        }
      }
  
      label:hover {
        border: 1px solid #005f61;
        color: white;
        background-color: #005f61;
      }
  
      input:checked+label {
        border: 1px solid #005f61;
        color: white;
        background-color: #005f61;
        font-weight: bold;
      }
    }
  }
}