/* Small visual overrides for the Ecwid storefront. Do the heavy lifting in Ecwid's own design settings first (see README).
   Every rule is scoped to #store or the cart slot. If Ecwid changes its markup, the worst case is a rule stops applying. */

#store .ecwid,
#store .ec-size {
  font-family: var(--body);
}

/* titles */
#store .ec-header-h1,
#store .ec-header-h2,
#store .ec-header-h3,
#store .grid-product__title-inner,
#store .product-details__product-title {
  font-family: var(--display);
  font-weight: 400;
}

/* panels */
#store .grid-product__wrap-inner,
#store .ec-store__content-wrapper .form-control__text,
#store .ec-cart__sidebar-inner {
  background-color: var(--panel);
  color: var(--ink);
}

/* buttons: orange and chamfered */
#store .form-control--primary .form-control__button,
#store .details-product-purchase__add-to-bag .form-control__button {
  background-color: var(--hot);
  border-color: var(--hot);
  color: #0b0b0b;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .04em;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}
#store .form-control--primary .form-control__button:focus-visible {
  outline: 2px solid #0b0b0b;
  outline-offset: -6px;
}

/* links */
#store .ec-link,
#store .ec-store a.ec-link {
  color: var(--hot);
}

/* header cart */
.cart-slot .ec-minicart__icon,
.cart-slot .ec-minicart__counter {
  color: var(--ink);
}
.cart-slot .ec-minicart__counter::after {
  background-color: var(--hot);
}

/* keeps headings readable until the dark option is set in Ecwid's design settings */
#store .ec-header-h1,
#store .ec-header-h2,
#store .ec-header-h3,
#store .ec-header-h4,
#store .ec-cart__title {
  color: var(--ink);
}