html {
  background: var(--wp--preset--color--background);
}

body {
  background: radial-gradient(circle at right 15%,
      rgba(142, 154, 236, 0.4) 0%,
      rgba(142, 154, 236, 0) 25%),
    radial-gradient(circle at left 85%,
      rgba(142, 154, 236, 0.4) 0%,
      rgba(142, 154, 236, 0) 25%);
  min-height: 100vh;
}

// Common WooCommerce input field styling
.woocommerce,
.wc-block-components-form,
.woocommerce-page {

  input[type=email],
  input[type=number],
  input[type=password],
  input[type=tel],
  input[type=text],
  input[type=url],
  input[type=search],
  input[type=date],
  textarea,
  select {
    padding: 1em;
    color: var(--wp--preset--color--foreground);
    background: transparent;
    border: 1px solid var(--wp--preset--color--foreground);
    border-radius: 12px;
    transition: border-color 0.3s, box-shadow 0.3s;

    &::placeholder {
      color: var(--wp--preset--color--foreground);
      opacity: 0.7;
    }

    &:hover {
      border-color: var(--wp--preset--color--foreground);
    }

    &:focus {
      outline: none;
      border-color: var(--wp--preset--color--foreground);
      box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
    }
  }

  // Special styling for select fields
  select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7z' fill='%23FAF7EF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1em top 50%;
    padding-right: 2.5em;

    option {
      background-color: var(--wp--preset--color--background);
      color: var(--wp--preset--color--foreground);
    }
  }

  // Textarea specific styling
  textarea {
    min-height: 100px;
    resize: vertical;
  }

  // Checkbox and radio styling
  input[type=checkbox],
  input[type=radio] {
    position: relative;
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.5em;
    background: transparent;
    border: 1px solid var(--wp--preset--color--foreground);
    cursor: pointer;

    &:checked {
      background-color: var(--wp--preset--color--foreground);
      border-color: var(--wp--preset--color--foreground);

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0.5em;
        height: 0.5em;
        background-color: var(--wp--preset--color--background);
        border-radius: 1px;
      }
    }

    &:focus {
      outline: none;
      box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
    }
  }

  input[type=radio] {
    border-radius: 50%;

    &:checked::after {
      border-radius: 50%;
    }
  }

  // Error state styling
  .woocommerce-invalid,
  .woocommerce-invalid-required-field,
  .has-error {

    input[type=email],
    input[type=number],
    input[type=password],
    input[type=tel],
    input[type=text],
    input[type=url],
    input[type=search],
    input[type=date],
    textarea,
    select {
      border-color: var(--wp--preset--color--foreground);
      border-width: 2px;

      &:focus {
        box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
      }
    }
  }

  .woocommerce-error {
    background-color: rgba(250, 247, 239, 0.1);
    border-left: 3px solid var(--wp--preset--color--foreground);
    color: var(--wp--preset--color--foreground);
    padding: 1em 1.5em;
    margin-bottom: 2em;
    border-radius: 4px;

    li {
      list-style: none;
      margin-left: 0;
    }
  }

  // Validation error messages
  .woocommerce-error,
  .woocommerce-message {
    margin: 0 0 2em;
    padding: 1em 1.5em;
    border-radius: 4px;

    &::before {
      margin-right: 0.5em;
    }
  }

  span.required {
    color: var(--wp--preset--color--foreground);
    opacity: 0.8;
  }
}

// Specific class for WooCommerce components
.wc-block-components-form {

  .wc-block-components-text-input,
  .wc-block-components-select {

    input[type=email],
    input[type=number],
    input[type=password],
    input[type=tel],
    input[type=text],
    input[type=url],
    select {
      padding: 1em;
      color: var(--wp--preset--color--foreground);
      background: transparent;
      border: 1px solid var(--wp--preset--color--foreground);
      border-radius: 12px;

      &::placeholder {
        color: var(--wp--preset--color--foreground);
        opacity: 0.7;
      }

      &:hover {
        border-color: var(--wp--preset--color--foreground);
      }

      &:focus {
        outline: none;
        border-color: var(--wp--preset--color--foreground);
        box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
      }
    }
  }

  // Style the combobox
  .wc-block-components-combobox .wc-block-components-combobox-control {
    input.components-combobox-control__input {
      padding: 1em;
      color: var(--wp--preset--color--foreground);
      background: transparent;
      border: 1px solid var(--wp--preset--color--foreground);
      border-radius: 12px;

      &:hover,
      &:focus {
        border-color: var(--wp--preset--color--foreground);
      }
    }
  }

  // Error states for WC blocks
  .has-error {

    input,
    select,
    textarea {
      border-color: var(--wp--preset--color--foreground);
      border-width: 2px;
    }

    .wc-block-components-validation-error {
      color: var(--wp--preset--color--foreground);
      font-size: 0.875em;
      margin-top: 0.5em;
    }
  }
}

// Fix for variable products dropdown
.woocommerce div.product form.cart .variations select,
.single-product div.product table.variations select {
  padding: 1em;
  color: var(--wp--preset--color--foreground);
  background-color: transparent;
  border: 1px solid var(--wp--preset--color--foreground);
  border-radius: 12px;
  min-width: 150px;
}

// Fix for cart quantity inputs
.woocommerce .quantity .qty {
  padding: 0.7em;
  text-align: center;
}

// Form labels
.woocommerce form .form-row label,
.wc-block-components-form .wc-block-components-text-input label {
  color: var(--wp--preset--color--foreground);
  margin-bottom: 0.5em;
  display: block;
  margin-left: .5em
}

// Form validation indicators
.woocommerce form .form-row {
  &.woocommerce-validated {
    input.input-text {
      border-color: var(--wp--preset--color--foreground);
      border-width: 2px;

      &:focus {
        box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
      }
    }
  }

  &.woocommerce-invalid {
    input.input-text {
      border-color: var(--wp--preset--color--foreground);
      border-width: 2px;

      &:focus {
        box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
      }
    }
  }

  .woocommerce-input-wrapper {
    .description {
      background: rgba(250, 247, 239, 0.1);
      border-radius: 3px;
      color: var(--wp--preset--color--foreground);
      padding: 0.5em 1em;
      margin: 0.5em 0 0;
      font-size: 0.875em;
    }
  }
}

// Button styles for consistency
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button:not(.is-link) {
  border: 1px solid var(--wp--preset--color--foreground);
  border-radius: 0.85em;
  padding: .75em 1.5em;
  background-color: transparent;
  color: var(--wp--preset--color--foreground);
  transition: all 0.25s ease;
  font-weight: normal;

  &:hover {
    background-color: var(--wp--preset--color--foreground);
    color: var(--wp--preset--color--background);
    text-decoration: none;
  }

  &.alt {
    background-color: var(--wp--preset--color--foreground);
    color: var(--wp--preset--color--background);

    &:hover {
      background-color: transparent;
      color: var(--wp--preset--color--foreground);
    }
  }
}

// Notices and messages
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  border-radius: 4px;
  background-color: rgba(250, 247, 239, 0.1);
  border-left: 3px solid var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--foreground);
  padding: 1em 1.5em;
  margin-bottom: 2em;

  a {
    color: var(--wp--preset--color--foreground);
    font-weight: 600;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}

// Make sure error feedback text uses foreground color
.wc-block-components-notice-banner,
.woocommerce-error {

  // color: var(--wp--preset--color--foreground);
  a {
    color: black;
  }

  &.is-error,
  &.is-info,
  &.is-success,
  &.is-warning {
    border-left-color: var(--wp--preset--color--foreground);
  }
}

#coming-soon-footer-banner {
  background: black;
  color: var(--wp--preset--color--foreground);
}

.wc-block-components-title.wc-block-components-title {
  font-size: 38px;
  margin-bottom: 1rem;
}

.wc-block-components-notice-banner.is-error {
  // background-color: black;
  border-color: white;
}

.wc-blocks-components-select .wc-blocks-components-select__select {
  border: 1px solid var(--wp--preset--color--foreground);
  border-radius: 12px;
  color: var(--wp--preset--color--foreground);
}

.wc-blocks-components-select .wc-blocks-components-select__label {
  color: var(--wp--preset--color--foreground);
}

.wc-blocks-components-select .wc-blocks-components-select__container {
  background: transparent;
  color: var(--wp--preset--color--foreground);
  border: 1px solid var(--wp--preset--color--foreground);
  border: none;
  border-radius: 12px;
}

.wc-blocks-components-select .wc-blocks-components-select__expand {
  fill: var(--wp--preset--color--foreground) !important;
}

.wc-block-components-form .wc-block-components-text-input.has-error label,
.wc-block-components-text-input.has-error label {
  color: var(--wp--preset--color--foreground);
}

.wc-block-components-form .wc-block-components-text-input input[type=email]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=number]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=password]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=text]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=url]:focus,
.wc-block-components-text-input input[type=email]:focus,
.wc-block-components-text-input input[type=number]:focus,
.wc-block-components-text-input input[type=password]:focus,
.wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-text-input input[type=text]:focus,
.wc-block-components-text-input input[type=url]:focus {
  background-color: var(--wp--preset--color--background);
}

.wc-block-components-form .wc-block-components-text-input input[type=email]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=number]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=password]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=text]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=url]:focus,
.wc-block-components-text-input input[type=email]:focus,
.wc-block-components-text-input input[type=number]:focus,
.wc-block-components-text-input input[type=password]:focus,
.wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-text-input input[type=text]:focus,
.wc-block-components-text-input input[type=url]:focus {
  color: var(--wp--preset--color--foreground);
}

@media (max-width: 480px) {
  .wp-block-woocommerce-checkout.alignwide.wc-block-checkout {
    padding-inline: 3rem;
  }

  [data-block-name="woocommerce/page-content-wrapper"] {
    display: none;
  }
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button:not(.is-link) {
  background-color: var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--background);
  text-transform: uppercase;
  transition: all 0.125s ease-in-out;

  &:hover {
    background-color: white;
    color: black;
  }
}

// .d-none {
//   display: none !important;
// }

// .wc-block-components-express-payment--checkout,
// .wc-block-components-express-payment__title-container,
// .wc-block-components-express-payment__content,
// .wc-block-components-express-payment-continue-rule.wc-block-components-express-payment-continue-rule--checkout {
//   display: none !important;
// }

// we dont have any coupons on the site
.woocommerce-form-coupon-toggle {
  display: none;
}

.woocommerce-account .wp-block-post-title,
.woocommerce-account main .woocommerce,
.woocommerce-cart .wp-block-post-title,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout main .woocommerce {
  max-width: 968px;
}

.woocommerce {
  h3 {
    font-family: var(--wp--preset--font-family--eb-garamond);
    font-size: 32px;
    font-weight: 300;
  }

  h2 {
    font-weight: 300;
  }
}

.woocommerce form .form-row label,
.wc-block-components-form .wc-block-components-text-input label {
  margin-left: 0 !important;
}

.woocommerce .col2-set,
.woocommerce-page .col2-set {
  display: flex;
  flex-direction: column;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
  width: unset;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
  background: transparent;
  border-color: var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--foreground);
  border-radius: 12px;
}

.select2-container .select2-dropdown,
.select2-container .select2-selection {
  background-color: var(--wp--preset--color--foreground);
}

#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
  background: white;
}

.form-row.woocommerce-SavedPaymentMethods-saveNew.woocommerce-validated label {
  color: black;
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
  border: 1em solid white;
  border-top-color: white;
  border-right-color: white;
  border-left-color: white;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
}

.payment_box.payment_method_stripe fieldset {
  border: none;
}

.woocommerce form .form-row.woocommerce-invalid label {
  color: var(--wp--preset--color--foreground) !important;
}

.woocommerce table.shop_table {
  border-color: var(--wp--preset--color--foreground);
}

.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
  border-color: var(--wp--preset--color--foreground);
}

.woocommerce table.shop_table td {
  border-color: var(--wp--preset--color--foreground);
}

.woocommerce-MyAccount-content {
  .button {
    text-decoration: none;
  }
}

.woocommerce-account {
  .woocommerce {
    display: flex;
    // justify-content: space-between;
    max-width: 1440px !important;
    gap: 4rem;
    @media (max-width: 500px) {
      flex-direction: column;
      padding-inline: 1.5rem;
      gap: 1rem;
    }

    &::before,
    &::after {
      display: none;
    }

    .woocommerce-MyAccount-navigation {
      width: unset;
      float: unset;

      li.woocommerce-MyAccount-navigation-link {
        padding-bottom: 0;

        &.is-active a {
          background: var(--wp--preset--color--foreground);
          color: var(--wp--preset--color--background);
        }

        a {
          text-decoration: none;
          text-transform: uppercase;
          font-family: var(--wp--preset--font-family--jura);
          font-weight: bold;
          font-size: var(--wp--preset--font-size--medium);
          letter-spacing: 0;
          padding: .75em;
          border: 1px solid;
          border-radius: 12px;
          display: flex;
          @media (max-width: 500px) {
            font-size: 16px;
          }
        }
      }
    }

    .woocommerce-MyAccount-content {
      float: unset;
      border: 1px solid;
      border-radius: 12px;
      padding: 3rem;
      @media (max-width: 500px) {
        width: auto;
      }
    }
  }
}

.is-large.wc-block-cart .wc-block-cart-items {
  border: 1px solid;
  border-radius: 12px;
  border-radius: 12px;
  border-color: #FAF7EF5E;
  padding-block: 1rem;
  padding-inline: 1rem;
}

@media (max-width: 520px) {
  #checkout-header,
  #checkout-page-container {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }
}

@media (max-width: 500px) {
  #main-site-header {
    padding-right: 3rem !important;
  }
}
.woocommerce-page table.shop_table { width: 100%; }
.product-total, .cart-subtotal td, .tax-total td, .order-total td { text-align: right; }

@media (max-width: 1500px) and (min-width: 501px) {
  .entry-content {
    margin-inline: 3rem !important
  }
}

.woocommerce-page .select2-container .select2-search--dropdown .select2-search__field {
  color: black;
}

.select2-container .select2-dropdown, .select2-container .select2-selection {
  border-radius: 12px;
}

.woocommerce-checkout-review-order-table {
  border-radius: 12px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}