/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 20:11 Unexpected "{"
Line 20:13 Expected identifier but found "'component-quick-cart.css'"
Line 20:71 Unexpected "<"
Line 33:5 Expected identifier but found "%"
Line 33:30 Unexpected "{"
Line 33:31 Unexpected "{"
Line 33:33 Expected identifier but found "'general.common.close'"
Line 34:2 Unexpected "<"
Line 39:7 Unexpected "{"
... and 39 more hidden warnings

**/
<link rel="stylesheet"
      href="{{ 'component-quick-cart.css' | asset_url }}"
      media="print"
      onload="this.media='all'">
<noscript>{{ 'component-quick-cart.css' | asset_url | stylesheet_tag }}</noscript>

<div id="halo-cart-sidebar"
     class="halo-sidebar halo-sidebar-right halo-cart-sidebar"
     role="dialog"
     aria-modal="true"
     aria-labelledby="CartDrawerHeading">

  <!-- Close -->
  <button type="button"
          class="halo-sidebar-close button-effect"
          data-close-cart-sidebar
          aria-label="{{ 'general.common.close' | t }}">
    {% render 'icon-close' %} {{ 'general.common.close' | t }}
  </button>

  <!-- Header -->
  <div class="halo-sidebar-header text-left drawer__header">
    <span id="CartDrawerHeading" class="title drawer__title">
      {{ 'sections.cart.my_cart' | t }}
    </span>
    <div class="wrapper-cartCount">
      <span class="cartCount" data-cart-count>{{ cart.item_count }}</span>
      <span data-cart-text>
        {% if cart.item_count == 1 %}
          {{ 'sections.cart.item' | t }}
        {% else %}
          {{ 'sections.cart.items' | t }}
        {% endif %}
      </span>
    </div>
  </div>

  <!-- Body -->
  <div class="halo-sidebar-wrapper custom-scrollbar">

    {% if settings.show_calculator_free_shipping_message %}
      <div class="previewCartMessage">
        {% render 'free-shipping-component' %}
      </div>
    {% endif %}

    {%- comment -%} Line items + discount UI (populated by halo-toolcart.js) {%- endcomment -%}
    <cart-coupon-discount data-is-sidebar="true">
      <template data-discount-icon>
        {% render 'icon-discount' %}
      </template>

      <template data-discounted-price-template>
        <span class="previewCartItem-saving-price">
          <s class="before-discount-price" data-original-price-display></s>
          <span class="discounted-price" data-current-price-display></span>
        </span>
      </template>

      <div class="previewCart-wrapper"></div>
    </cart-coupon-discount>

    <!-- Order note (inline, visible, auto-saves) -->
    <div class="cart__note">
      <label for="CartDrawerNote">{{ 'sections.cart.order_note' | t | default: 'Order note' }}</label>
      <textarea id="CartDrawerNote" name="note" class="input-full">{{ cart.note }}</textarea>
    </div>

  </div> <!-- /.halo-sidebar-wrapper -->
</div>   <!-- /#halo-cart-sidebar -->

<!-- Overlay as a SIBLING (must be after the drawer) -->
<div class="background-overlay" data-close-cart-sidebar aria-hidden="true"></div>

<script src="{{ 'halo-toolcart.js' | asset_url }}" defer="defer"></script>

{%- comment -%}
  Debounced auto-save for the cart note.
  If your theme already saves note changes, you may remove this block.
{%- endcomment -%}
<script>
(function () {
  var t, el = document.getElementById('CartDrawerNote');
  if (!el) return;

  function saveNote(val){
    try {
      fetch('/cart/update.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ note: val || '' })
      });
    } catch(e) {}
  }

  el.addEventListener('input', function(e){
    clearTimeout(t);
    t = setTimeout(function(){ saveNote(e.target.value); }, 300);
  });
})();
</script>
/* --- ADD TO CART: force solid black + matching typography --- */
.t4s-product-form form[action*="/cart/add"] button[name="add"],
.product-form form[action*="/cart/add"] button[name="add"],
form[action*="/cart/add"] button[name="add"]{
  display:block !important;
  width:100% !important;
  height:52px !important;
  line-height:52px !important;
  padding:0 16px !important;
  background:#000 !important;
  color:#fff !important;
  border:1px solid #000 !important;
  text-transform:uppercase !important;
  letter-spacing:.18em !important;
  font-weight:600 !important;
  font-size:14px !important;
}

/* kill ALL hover/overlay effects on Add to Cart */
.t4s-product-form form[action*="/cart/add"] button[name="add"]:hover,
.t4s-product-form form[action*="/cart/add"] button[name="add"]:focus,
.product-form form[action*="/cart/add"] button[name="add"]:hover,
.product-form form[action*="/cart/add"] button[name="add"]:focus,
form[action*="/cart/add"] button[name="add"]:hover,
form[action*="/cart/add"] button[name="add"]:focus{
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  transform:none !important;
}
.t4s-product-form form[action*="/cart/add"] button[name="add"]::before,
.t4s-product-form form[action*="/cart/add"] button[name="add"]::after,
.product-form form[action*="/cart/add"] button[name="add"]::before,
.product-form form[action*="/cart/add"] button[name="add"]::after,
form[action*="/cart/add"] button[name="add"]::before,
form[action*="/cart/add"] button[name="add"]::after{
  content:none !important;
  display:none !important;
}

/* --- BUY IT NOW: reduce height (smaller than the bar) --- */
.product-form .shopify-payment-button__button,
.product-form .shopify-payment-button__button--unbranded{
  display:block !important;
  width:100% !important;
  min-height:30px !important;   /* ↓ adjust to taste (e.g., 40–46px) */
  line-height:30px !important;
  padding:0 16px !important;
  text-transform:uppercase !important;
  letter-spacing:.18em !important;
  font-weight:600 !important;
  font-size:14px !important;
}
/* --- Product buttons to match "SHIPPING INFORMATION" bar --- */

/* shared typography + sizing */
.product-form button[name="add"],
.product-form .shopify-payment-button__button,
.product-form .shopify-payment-button__button--unbranded {
  width: 100% !important;
  min-height: 52px !important;
  line-height: 52px !important;     /* centers text vertically */
  padding: 0 16px !important;
  text-transform: uppercase !important;
  letter-spacing: .18em !important;  /* match the bar */
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

/* ADD TO CART — white background, black bold text, black border */
.product-form button[name="add"] {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
}

/* keep it white on hover/focus (no dark overlay) */
.product-form button[name="add"]:hover,
.product-form button[name="add"]:focus {
  background: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* BUY IT NOW — keep black, but use the same font/height/width */
.product-form .shopify-payment-button__button,
.product-form .shopify-payment-button__button--unbranded {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #111 !important;
}

/* a little spacing between the two buttons */
.product-form .shopify-payment-button { margin-top: 12px !important; }

/* (Ella/t4s) ensure the wrapper doesn’t constrain width */
.t4s-product-form__actions,
.t4s-product-form__actions .t4s-product__buttons,
.t4s-product-form__actions .t4s-product__submit {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}
/* Buy It Now: force solid black */
.product-form .shopify-payment-button__button,
.product-form .shopify-payment-button__button--unbranded{
  background:#000 !important;
  color:#fff !important;
  border:1px solid #000 !important;
}

/* Hand cursor over BOTH buttons */
.product-form button[name="add"],
.product-form .product-form__submit,
.product-form .shopify-payment-button__button,
.product-form .shopify-payment-button__button--unbranded{
  cursor: pointer !important;
}

/* Optional: clear hand cursor when disabled */
.product-form button[name="add"][disabled],
.product-form .product-form__submit[disabled],
.product-form .shopify-payment-button__button[disabled],
.product-form .shopify-payment-button__button--unbranded[disabled]{
  cursor: not-allowed !important;
  opacity: .6;
}
/* ===== Force BUY IT NOW solid black, and hand cursor on both buttons ===== */

/* Highest-specificity pass for the unbranded Shopify pay button */
.t4s-product-form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded,
.product-form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded,
.shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded,
.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
}

/* Keep it black on hover/focus */
.t4s-product-form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:hover,
.product-form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover,
.t4s-product-form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:focus,
.product-form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:focus {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  box-shadow: none !important;
}

/* Hand cursor on BOTH buttons */
.product-form button[name="add"],
.product-form .product-form__submit,
.t4s-product-form button[name="add"],
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded,
.product-form .shopify-payment-button__button,
.product-form .shopify-payment-button__button--unbranded {
  cursor: pointer !important;
}

/* If disabled, show not-allowed */
.product-form button[name="add"][disabled],
.product-form .product-form__submit[disabled],
.shopify-payment-button__button[disabled],
.shopify-payment-button__button--unbranded[disabled],
.shopify-payment-button__button[aria-disabled="true"],
.shopify-payment-button__button--unbranded[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .6;
}
/* =========================
   FINAL OVERRIDES – place at the very end of custom.css
   ========================= */

/* 1) ADD TO CART: white background, black text/border, no hover darkening */
.t4s-product-form form[action*="/cart/add"] button[name="add"],
.product-form form[action*="/cart/add"] button[name="add"],
form[action*="/cart/add"] button[name="add"],
.product-form .product-form__submit {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  font-weight: 600 !important;
}

/* kill ALL hover/overlay/opacity effects on Add to Cart */
.t4s-product-form form[action*="/cart/add"] button[name="add"]:hover,
.t4s-product-form form[action*="/cart/add"] button[name="add"]:focus,
.product-form form[action*="/cart/add"] button[name="add"]:hover,
.product-form form[action*="/cart/add"] button[name="add"]:focus,
form[action*="/cart/add"] button[name="add"]:hover,
form[action*="/cart/add"] button[name="add"]:focus,
.product-form .product-form__submit:hover,
.product-form .product-form__submit:focus {
  background: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* remove pseudo-element overlays some themes add */
.t4s-product-form form[action*="/cart/add"] button[name="add"]::before,
.t4s-product-form form[action*="/cart/add"] button[name="add"]::after,
.product-form form[action*="/cart/add"] button[name="add"]::before,
.product-form form[action*="/cart/add"] button[name="add"]::after,
.product-form .product-form__submit::before,
.product-form .product-form__submit::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

/* 2) BUY IT NOW: keep solid black (also on hover/focus) */
.t4s-product-form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded,
.product-form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded,
.shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded,
.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  font-weight: 600 !important;
}

.t4s-product-form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:hover,
.product-form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover,
.t4s-product-form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:focus,
.product-form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:focus {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  box-shadow: none !important;
}

/* 3) Hand cursor on both buttons (and not-allowed if disabled) */
.product-form button[name="add"],
.product-form .product-form__submit,
.t4s-product-form button[name="add"],
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded,
.product-form .shopify-payment-button__button,
.product-form .shopify-payment-button__button--unbranded {
  cursor: pointer !important;
}

.product-form button[name="add"][disabled],
.product-form .product-form__submit[disabled],
.shopify-payment-button__button[disabled],
.shopify-payment-button__button--unbranded[disabled],
.shopify-payment-button__button[aria-disabled="true"],
.shopify-payment-button__button--unbranded[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .6 !important;
}
/* === BUY IT NOW: black, same height as shipping bar, pointer cursor === */
.product-form .shopify-payment-button__button,
.product-form .shopify-payment-button__button--unbranded,
.shopify-payment-button .shopify-payment-button__button,
.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  display:block !important;
  width:100% !important;

  /* match your shipping bar height */
  min-height:52px !important;
  line-height:52px !important;
  padding:0 16px !important;

  background:#000 !important;
  color:#fff !important;
  border:1px solid #000 !important;

  text-transform:uppercase !important;
  letter-spacing:.18em !important;
  font-weight:600 !important;
  font-family:inherit !important;

  cursor:pointer !important;

  /* for the slide sheen */
  position:relative !important;
  overflow:hidden !important;
}

/* keep it black on hover/focus (theme sometimes turns it grey) */
.product-form .shopify-payment-button__button:hover,
.product-form .shopify-payment-button__button:focus,
.product-form .shopify-payment-button__button--unbranded:hover,
.product-form .shopify-payment-button__button--unbranded:focus,
.shopify-payment-button .shopify-payment-button__button:hover,
.shopify-payment-button .shopify-payment-button__button:focus {
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
  box-shadow:none !important;
}

/* subtle sliding “sheen” animation (light sweep) */
.product-form .shopify-payment-button__button::after,
.product-form .shopify-payment-button__button--unbranded::after,
.shopify-payment-button .shopify-payment-button__button::after {
  content:"";
  position:absolute;
  top:0;
  left:-30%;
  width:28%;
  height:100%;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-120%);
  transition:transform .6s ease;
  pointer-events:none;
}
.product-form .shopify-payment-button__button:hover::after,
.product-form .shopify-payment-button__button--unbranded:hover::after,
.shopify-payment-button .shopify-payment-button__button:hover::after {
  transform:translateX(380%);
}

/* disabled state cursor */
.shopify-payment-button__button[disabled],
.shopify-payment-button__button--unbranded[disabled],
.shopify-payment-button__button[aria-disabled="true"],
.shopify-payment-button__button--unbranded[aria-disabled="true"]{
  cursor:not-allowed !important;
  opacity:.6 !important;
}
/* === BUY IT NOW: black, same height as shipping bar, pointer cursor === */
.product-form .shopify-payment-button__button,
.product-form .shopify-payment-button__button--unbranded,
.shopify-payment-button .shopify-payment-button__button,
.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  display:block !important;
  width:100% !important;

  /* match your shipping bar height */
  min-height:52px !important;
  line-height:52px !important;
  padding:0 16px !important;

  background:#000 !important;
  color:#fff !important;
  border:1px solid #000 !important;

  text-transform:uppercase !important;
  letter-spacing:.18em !important;
  font-weight:600 !important;
  font-family:inherit !important;

  cursor:pointer !important;

  /* for the slide sheen */
  position:relative !important;
  overflow:hidden !important;
}

/* keep it black on hover/focus (theme sometimes turns it grey) */
.product-form .shopify-payment-button__button:hover,
.product-form .shopify-payment-button__button:focus,
.product-form .shopify-payment-button__button--unbranded:hover,
.product-form .shopify-payment-button__button--unbranded:focus,
.shopify-payment-button .shopify-payment-button__button:hover,
.shopify-payment-button .shopify-payment-button__button:focus {
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
  box-shadow:none !important;
}

/* subtle sliding “sheen” animation (light sweep) */
.product-form .shopify-payment-button__button::after,
.product-form .shopify-payment-button__button--unbranded::after,
.shopify-payment-button .shopify-payment-button__button::after {
  content:"";
  position:absolute;
  top:0;
  left:-30%;
  width:28%;
  height:100%;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-120%);
  transition:transform .6s ease;
  pointer-events:none;
}
.product-form .shopify-payment-button__button:hover::after,
.product-form .shopify-payment-button__button--unbranded:hover::after,
.shopify-payment-button .shopify-payment-button__button:hover::after {
  transform:translateX(380%);
}

/* disabled state cursor */
.shopify-payment-button__button[disabled],
.shopify-payment-button__button--unbranded[disabled],
.shopify-payment-button__button[aria-disabled="true"],
.shopify-payment-button__button--unbranded[aria-disabled="true"]{
  cursor:allowed !important;
  opacity:.6 !important;
}
/* ==== BUY IT NOW — force black, match shipping height, pointer cursor ==== */

/* remove any gray wrapper/background the theme adds */
.product-form .shopify-payment-button,
.t4s-product-form__actions .shopify-payment-button {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}

/* the actual button */
.t4s-product-form__actions .shopify-payment-button .shopify-payment-button__button--unbranded,
.shopify-payment-button .shopify-payment-button__button--unbranded,
.t4s-product-form__actions .shopify-payment-button .shopify-payment-button__button,
.shopify-payment-button .shopify-payment-button__button {
  display: block !important;
  width: 100% !important;

  /* match your SHIPPING INFORMATION bar */
  min-height: 52px !important;
  line-height: 52px !important;
  padding: 0 16px !important;

  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;

  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  font-weight: 600 !important;
  font-family: inherit !important;

  cursor: pointer !important;

  position: relative !important;   /* for the sheen */
  overflow: hidden !important;
}

/* keep it black on hover/focus (theme flips it to grey) */
.shopify-payment-button .shopify-payment-button__button:hover,
.shopify-payment-button .shopify-payment-button__button:focus,
.shopify-payment-button .shopify-payment-button__button--unbranded:hover,
.shopify-payment-button .shopify-payment-button__button--unbranded:focus {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  box-shadow: none !important;
}

/* kill any theme overlay/pseudo that tints the button */
.shopify-payment-button__button--unbranded::before {
  content: none !important;
  display: none !important;
}

/* subtle sliding sheen on hover */
.shopify-payment-button .shopify-payment-button__button::after,
.shopify-payment-button .shopify-payment-button__button--unbranded::after {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 28%;
  height: -30%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events: none;
}
.shopify-payment-button .shopify-payment-button__button:hover::after,
.shopify-payment-button .shopify-payment-button__button--unbranded:hover::after {
  transform: translateX(380%);
}

/* ensure Add to Cart also shows hand cursor (you asked for that too) */
.product-form button[name="add"] { cursor: pointer !important; }
/* ===== BUY IT NOW – force black, same height as SHIPPING bar, pointer cursor, light hover sheen ===== */

/* 1) Kill any gray wrapper / padding the theme adds around the payment button */
.t4s-product-form__actions,
.t4s-product-form__actions .t4s-product__buttons,
.t4s-product-form__actions .t4s-product__submit,
.product-form .shopify-payment-button {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* also remove pseudo overlays that can tint the row */
.t4s-product-form__actions::before,
.t4s-product-form__actions::after,
.t4s-product-form__actions .t4s-product__submit::before,
.t4s-product-form__actions .t4s-product__submit::after {
  content: none !important;
  display: none !important;
}

/* 2) Style the actual payment button (unbranded) */
.shopify-payment-button .shopify-payment-button__button,
.shopify-payment-button .shopify-payment-button__button--unbranded,
.t4s-product-form__actions .shopify-payment-button .shopify-payment-button__button,
.t4s-product-form__actions .shopify-payment-button .shopify-payment-button__button--unbranded {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 30px !important;    /* match the SHIPPING INFORMATION bar */
  padding: 0 16px !important;

  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;

  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: inherit !important;

  cursor: pointer !important;
  position: relative !important;   /* for sheen */
  overflow: hidden !important;
}

/* 3) Stop the theme from flipping it to grey on hover/focus */
.shopify-payment-button .shopify-payment-button__button:hover,
.shopify-payment-button .shopify-payment-button__button:focus,
.shopify-payment-button .shopify-payment-button__button--unbranded:hover,
.shopify-payment-button .shopify-payment-button__button--unbranded:focus {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 4) Subtle sliding sheen on hover (light animation) */
.shopify-payment-button .shopify-payment-button__button::after,
.shopify-payment-button .shopify-payment-button__button--unbranded::after {
  content: "";
  position: absolute;
  top: 0;
  left: -25%;
  width: 24%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events: none;
}
.shopify-payment-button .shopify-payment-button__button:hover::after,
.shopify-payment-button .shopify-payment-button__button--unbranded:hover::after {
  transform: translateX(360%);
}

/* 5) Disabled state clarity (optional) */
.shopify-payment-button__button[disabled],
.shopify-payment-button__button--unbranded[disabled],
.shopify-payment-button__button[aria-disabled="true"],
.shopify-payment-button__button--unbranded[aria-disabled="true"] {
  opacity: .6 !important;
  cursor: not-allowed !important;
}

/* 6) Ensure Add to Cart also shows a hand cursor (you asked for it as well) */
.product-form button[name="add"] { cursor: pointer !important; }
/* ===== Overlay: hidden by default, only visible when drawer is open ===== */
.background-overlay{
  position: fixed;
  inset: 0;
  background:#000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:100; /* under drawer, above page */
}
#halo-cart-sidebar.is--open + .background-overlay,
.halo-side.is--open + .background-overlay,
body.cart-open .background-overlay{
  opacity:.45;
  visibility:visible;
  pointer-events:auto;
}

/* ===== Product buttons — match "SHIPPING INFORMATION" bar ===== */

/* Reset wrappers that add padding/grey background or limit width */
.t4s-product-form__actions,
.t4s-product-form__actions .t4s-product__buttons,
.t4s-product-form__actions .t4s-product__submit,
.product-form .shopify-payment-button{
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Shared size & typography */
.product-form button[name="add"],
.product-form .shopify-payment-button__button,
.product-form .shopify-payment-button__button--unbranded{
  display:block !important;
  width:100% !important;
  min-height:52px !important;
  line-height:52px !important;
  padding:0 16px !important;
  text-transform:uppercase !important;
  letter-spacing:.18em !important;
  font-weight:600 !important;
  font-size:14px !important;
  font-family:inherit !important;
  box-sizing:border-box !important;
  cursor:pointer !important;
}

/* ADD TO CART — white bg, black text/border, no hover darkening */
.product-form button[name="add"]{
  background:#fff !important;
  color:#000 !important;
  border:1px solid #000 !important;
  box-shadow:none !important;
}
.product-form button[name="add"]:hover,
.product-form button[name="add"]:focus{
  background:#fff !important;
  color:#000 !important;
  border-color:#000 !important;
  box-shadow:none !important;
  transform:none !important;
  opacity:1 !important;
}

/* BUY IT NOW — solid black, same height, light sheen on hover */
.shopify-payment-button .shopify-payment-button__button,
.shopify-payment-button .shopify-payment-button__button--unbranded,
.product-form .shopify-payment-button__button,
.product-form .shopify-payment-button__button--unbranded{
  background:#000 !important;
  color:#fff !important;
  border:1px solid #000 !important;
  border-radius:0 !important;
  position:relative !important; /* for sheen */
  overflow:hidden !important;
}
.shopify-payment-button .shopify-payment-button__button:hover,
.shopify-payment-button .shopify-payment-button__button:focus,
.product-form .shopify-payment-button__button:hover,
.product-form .shopify-payment-button__button:focus{
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
  box-shadow:none !important;
}

/* Sheen animation */
.shopify-payment-button .shopify-payment-button__button::after,
.product-form .shopify-payment-button__button::after{
  content:"";
  position:absolute;
  top:0;
  left:-25%;
  width:24%;
  height:30%;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-120%);
  transition:transform .6s ease;
  pointer-events:none;
}
.shopify-payment-button .shopify-payment-button__button:hover::after,
.product-form .shopify-payment-button__button:hover::after{
  transform:translateX(360%);
}

/* Disabled state */
.product-form button[name="add"][disabled],
.product-form .shopify-payment-button__button[disabled],
.product-form .shopify-payment-button__button--unbranded[disabled],
.product-form .shopify-payment-button__button[aria-disabled="true"],
.product-form .shopify-payment-button__button--unbranded[aria-disabled="true"]{
  cursor:not-allowed !important;
  opacity:.6 !important;
}
/* ===== BUY IT NOW – force black, 52px height, pointer cursor (Ella/t4s) ===== */

/* 0) Nuke wrappers/tints the theme adds around the payment row */
.t4s-product-form__actions,
.t4s-product-form__actions .t4s-product__buttons,
.t4s-product-form__actions .t4s-product__submit,
.product-form .shopify-payment-button {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 1) Hide branded wallets so Shopify falls back to the unbranded button we can style */
.shopify-payment-button__button--branded { display: none !important; }

/* 2) Style the actual button (cover both generic + unbranded classes) */
.shopify-payment-button .shopify-payment-button__button,
.shopify-payment-button .shopify-payment-button__button--unbranded,
.t4s-product-form__actions .shopify-payment-button .shopify-payment-button__button,
.t4s-product-form__actions .shopify-payment-button .shopify-payment-button__button--unbranded {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 52px !important;     /* match SHIPPING bar */
  line-height: 52px !important;
  padding: 0 16px !important;

  background: #000 !important;      /* black button */
  color: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;

  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: inherit !important;

  cursor: pointer !important;
  position: relative !important;     /* for sheen */
  overflow: hidden !important;
}

/* 3) Keep it black on hover/focus (theme likes to flip it to grey) */
.shopify-payment-button .shopify-payment-button__button:hover,
.shopify-payment-button .shopify-payment-button__button:focus,
.shopify-payment-button .shopify-payment-button__button--unbranded:hover,
.shopify-payment-button .shopify-payment-button__button--unbranded:focus {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 4) Subtle sliding sheen on hover */
.shopify-payment-button .shopify-payment-button__button::after,
.shopify-payment-button .shopify-payment-button__button--unbranded::after {
  content: "";
  position: absolute;
  top: 0;
  left: -25%;
  width: 24%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events: none;
}
.shopify-payment-button .shopify-payment-button__button:hover::after,
.shopify-payment-button .shopify-payment-button__button--unbranded:hover::after {
  transform: translateX(360%);
}

/* 5) Disabled visual/cursor (only when Shopify truly disables it) */
.shopify-payment-button__button[disabled],
.shopify-payment-button__button--unbranded[disabled],
.shopify-payment-button__button[aria-disabled="true"],
.shopify-payment-button__button--unbranded[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .6 !important;           /* you can remove if you want it to look enabled */
}