Pipeline theme version 6 to 7

/* CSS - hide Add to Cart button price */
.btn--add-to-cart .btn-state-ready span:not([data-add-to-cart-text]){ 
  display:none; 
}
/* end */

/* CSS - hide navigation cart link */
.header__desktop__button .navlink--cart,
.header__mobile__button[data-drawer-toggle="drawer-cart"]{
  display: none;
}
/* end */

/* CSS - solid background-color header */
.js__header__stuck .theme__header:after {
    opacity: 1 !important;
}
/* end */

@font-face{
  font-family:"Gotham";
  src:url('https://cdn.shopify.com/s/files/1/0611/7824/9366/files/font.woff2?v=1661161539') format("woff2"),
  url('https://cdn.shopify.com/s/files/1/0611/7824/9366/files/font.woff?v=1661161539')format("woff");
}

/* CSS - change color of size chart link */
.product__info__link--inline,
.product__info__link{
  background-color: #d02e2e; 
  color: #ffffff;
}
/* end */

/* CSS - change hover color of size chart link */
.product__info__link--inline:hover,
.product__info__link:hover{
  background-color: #ffffff; 
  color: #d02e2e;
}
/* end */

/* CSS - Sticky currency and language selectors */
#localization-form-footer{
  position: fixed;
  z-index: 1000;
  bottom: 0px;
  left: 15px;
}
#localization-form-footer .popout-list,
#localization-form-footer .popout__toggle{
  background: #ffffff;
  color: #000;
}
#localization-form-footer .popout__toggle{
  border: 1px solid #f0f0f0;
}
#localization-form-footer .popout-list__item a{
  color: #000;
}
/* end */

/* CSS - Sticky currency and language selectors desktop */
@media only screen and (min-width: 480px){ 
  #localization-form-footer{
    position: fixed;
    z-index: 1000;
    bottom: 0px;
    left: 15px;
  }
  #localization-form-footer .popout-list,
  #localization-form-footer .popout__toggle{
    background: #ffffff;
    color: #000;
  }
  #localization-form-footer .popout__toggle{
    border: 1px solid #f0f0f0;
  }
  #localization-form-footer .popout-list__item a{
    color: #000;
  }
}
/* end */

/* CSS - Change background-color and roundness of variant radio labels */
.radio__fieldset .radio__button{
  --background-color: #f9f9f9;
  --color: #1b1546;
}
.radio__fieldset .radio__button input~label {
    background-color: var(--background-color);
    color: var(--color);
}
/* When the radio button is checked */
.radio__fieldset .radio__button input:checked~label {
    background-color: var(--color);
    color: var(--background-color);
    border-color: var(--background-color);
}
/* When the radio button is hover */
.radio__fieldset .radio__button label:active, .radio__fieldset .radio__button label:focus, .radio__fieldset .radio__button label:hover {
    background-color: var(--background-color);
    color: var(--color);
    opacity: 0.7;
}

/* Make button round */
.radio__fieldset .radio__button label{
    border-radius: 25px;
}
/* end */

/* CSS - Borderless product page image on mobile */
@media only screen and (max-width: 480px) {  
  .product__media > div{
    width: 100% !important;
  } 
  .product-page{
    padding-top: 0;
  }
  .product-page > .wrapper {
      padding: 0;
  }
  .product-single{
    margin-left: 0;
  }  
  .product-single > .grid__item{
    padding-left: 0;
  }
  .breadcrumb,
  .media__thumb__wrapper {
     margin: 0 var(--gutter) 0 var(--gutter);
  }
  .product-single > .grid__item:not(.product__media__wrapper){
     padding: 0 var(--gutter);
  }
}
/* end */

/* CSS - Always show grid swatches */
.product-grid-item .grid__swatch__container .grid__swatch__placeholder {
    display: none;
}
.product-grid-item .grid__swatch__container .grid__swatch__hover {
    visibility: visible;
    opacity: 1;
    height: initial;
    top: 0;
}
/* end */

/* CSS - code to add dropdown arrows in top-level navigation - */
.header__desktop .navlink--toplevel:not(:only-child) .navtext:after {
  content: ''; 
  position: relative;
  top: -1px;
  width: 0.5em;
  height: 0.5em;
  display: inline-block;
  vertical-align: middle;
  border-left: 0.15em solid currentColor;
  border-bottom: 0.15em solid currentColor;
  transform: rotate(-45deg);
  margin-left: 8px;
  margin-top: -0.25em;
}
.header__desktop [aria-expanded="true"] .navlink--toplevel:not(:only-child) .navtext:after,
.header__desktop .navlink--toplevel:hover:not(:only-child) .navtext:after {
  transform: rotate(-135deg);
  transition: 0.2s all;
}
/* - end - */

/* CSS - Increase the size of the swatches on the product page  - */
.product-page .swatch__button {
  --width: 38px;
  --height: var(--width);  
  --offset: 4px;
}
.product-page .swatch__button label {
  width: var(--width);
  height: var(--height);
}
.product-page .swatch__button input:checked ~ label::after {
  width: calc(var(--width) + var(--offset) * 2);
  height: calc(var(--height) + var(--offset) *2);
  top: calc(var(--offset) * -1);
  left: calc(var(--offset) * -1);
  border: 2px solid var(--primary);
}
/* - end - */

/* CSS - Hide the product add popdown */
.product-add-popdown{
  display: none !important;
}
/* end */

/* Javascript - Show cart drawer when product added to cart */
document.addEventListener('theme:cart:popdown', (e) => {
  const listener = (e) => {
    document.querySelector('[data-drawer="drawer-cart"]').dispatchEvent(
      new CustomEvent('theme:drawer:open', {
        bubbles: false,
      })
    );
    document.removeEventListener('theme:cart:change', listener);
  };
  document.addEventListener('theme:cart:change', listener);
});
/* end */

<!-- Liquid - Add product SKU -->                       
{% assign current_variant = product.selected_or_first_available_variant %}
<p class="sku-wrapper radio__legend"><span class="radio__legend__label" {% if current_variant.sku == "" %}style="display:none;" {% endif %}>SKU</span><span class="variant-sku">{{ current_variant.sku }}</span></p>

<script>
  document.addEventListener('theme:variant:change', function(event) {
    const variant = event.detail.variant;
    let container = event.target;

    if(event.target.outerWrapper){
      container = event.target.outerWrapper;
    }

    const skuWrapper = container.querySelectorAll(".sku-wrapper");

    if (skuWrapper.length) {
      skuWrapper.forEach((element) => {
        const sku = element.querySelector(".variant-sku");
        if (variant) {
          if (variant.sku) {
            if(sku) {
              sku.innerHTML = variant.sku;
            }
            element.style.display = "block"
          } else {
            element.style.display = "none";
          }
        } else {
          element.style.display = "none";
        }
      });
    }  
  });
</script>
<!-- end SKU --> 

/* CSS - Show native quantity selection for quantity input*/
.quantity__button{
  display: none;
}
.quantity__input{ 
  text-align: left;
  padding: 8px 10px;
}
input[type=number],
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
   opacity: 1 !important;
  -webkit-appearance: auto !important;
  -moz-appearance auto !important;
}
/* end */

<!-- Liquid - Add payment types --> 
{% unless shop.enabled_payment_types == empty %}
<ul class="footer-payment payment-icons inline-list">
  {% for type in shop.enabled_payment_types %}
  <li>
    {{ type | payment_type_svg_tag: class: 'payment-icon' }}
    <span class="visually-hidden">{{ type | capitalize | replace: '_', ' ' }}</span>
  </li>
  {% endfor %}
</ul>
{% endunless %}
<!-- end payment types --> 

/* CSS - Scroll to top button */
.btn--scroll-top {
  position: fixed;
  right: var(--outer);
  bottom: var(--outer);
  z-index: 500;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.btn--scroll-top:after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-width: 0 0 1px 1px;
  border-style: solid;
  border-color: currentcolor;
  margin: 0;
  vertical-align: middle;
  transform: rotate(135deg);
  transform-origin: 50% 50%;
  transition: all 0.3s;
}
.btn--scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s;
}
/* end */

<!-- Paste popup code or third party scripts below this comment line ============== -->

  <button type="button" class="btn btn--scroll-top btn--neutral" data-scroll-top-button></button>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // Scroll to top button
      const scrollTopButton = document.querySelector('[data-scroll-top-button]');
      if (scrollTopButton) {
        scrollTopButton.addEventListener('click', () => {
          window.scrollTo({
            top: 0,
            left: 0,
            behavior: 'smooth',
          });
        });
        document.addEventListener('theme:scroll', () => {
          scrollTopButton.classList.toggle('is-visible', window.pageYOffset > window.innerHeight);
        });
      }
    });
  </script>