/* Storefront controls: retain native inputs, select behavior and WooCommerce validation. */
body {
  --hess-field-text: #283e34;
  --hess-field-border: #aebcaf;
  --hess-field-hover: #718673;
  --hess-field-focus: #426b4d;
  --hess-field-disabled: #f3f5f1;
  --hess-field-error: #a95042;
}

body :is(main, .site-header) :where(input:not([type]), input[type=text], input[type=search], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], select, textarea):not(.wc-block-components-address-form__address_2-hidden-input) {
  box-sizing: border-box;
  max-width: 100%;
  color: var(--hess-field-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}

body :is(main, .site-header) :where(input:not([type]), input[type=text], input[type=search], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], select, textarea):not(.wc-block-components-address-form__address_2-hidden-input):not(:disabled) {
  border-color: var(--hess-field-border);
}

body :is(main, .site-header) :where(input:not([type]), input[type=text], input[type=search], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], select, textarea):not(.wc-block-components-address-form__address_2-hidden-input):not(:disabled):hover {
  border-color: var(--hess-field-hover);
}

body :is(main, .site-header) :where(input, textarea)::placeholder { color: #66756a; opacity: 1; }
body :is(main, .site-header) :where(input, select, textarea):disabled { color: #66736a; cursor: not-allowed; }
body :is(main, .site-header) :where(select, textarea, input:not([type=checkbox]):not([type=radio])):disabled { background-color: var(--hess-field-disabled); border-color: #d4dcd2; }
body :is(main, .site-header) :where(input[type=checkbox], input[type=radio]) { accent-color: var(--hess-field-focus); }

/* Do not change the separate arrow and floating label supplied by Woo Blocks. */
body main select:not(.wc-blocks-components-select__select) {
  min-height: 48px;
  padding: 10px 42px 10px 14px;
  border: 1px solid var(--hess-field-border);
  border-radius: 0;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='%23283e34' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 9px;
  cursor: pointer;
}
body main select:not(.wc-blocks-components-select__select):disabled { background-color: var(--hess-field-disabled); border-color: #d4dcd2; cursor: not-allowed; }
body main select option { color: #283e34; background: #fff; font-family: inherit; font-size: 16px; }
body main :is(.woocommerce-ordering select.orderby, .hess-size-select) { font-size: 16px !important; }
body .site-header :is(.header-search input[type=search], .mobile-search-panel input[type=search], .hess-nav-mobile-head input[type=search]) { font-size: 16px; }

/* Keep focus visible for keyboard users without the previous double green ring. */
body :is(main, .site-header) :where(input:not([type=hidden]), select, textarea):focus-visible,
body.single-product div.product form.cart :is(.variations select, .quantity .qty):focus-visible,
body.woocommerce-account:not(.logged-in) main .u-columns form.woocommerce-form input.input-text:focus-visible {
  outline: 2px solid var(--hess-field-focus);
  outline-offset: 2px;
  box-shadow: none;
  border-color: var(--hess-field-focus);
}
body.single-product div.product form.cart :is(.variations select, .quantity .qty):focus:not(:focus-visible),
body.woocommerce-account:not(.logged-in) main .u-columns form.woocommerce-form input.input-text:focus:not(:focus-visible) {
  outline: 0;
  border-color: var(--hess-field-focus);
  box-shadow: 0 0 0 2px rgb(66 107 77 / 15%);
}

body.woocommerce-account main input[type=checkbox]:not(.wc-block-components-checkbox__input),
body.woocommerce-account main input[type=radio]:not(.wc-block-components-radio-control__input) {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* Woo Blocks positions its labels inside the field; preserve its sizing and padding. */
body.woocommerce-checkout main .wc-block-checkout__main :is(.wc-block-components-text-input input:not([type=checkbox]):not([type=radio]), .wc-blocks-components-select__select, .wc-block-components-textarea) {
  font-size: 16px !important;
}
body:is(.woocommerce-cart, .woocommerce-checkout) main .wc-block-components-totals-coupon__input input {
  min-height: 56px !important;
  padding: 22px 12px 6px !important;
  font-size: 16px !important;
}
body:is(.woocommerce-cart, .woocommerce-checkout) main .wc-block-components-totals-coupon__input label { transition: none; }
body:is(.woocommerce-cart, .woocommerce-checkout) main .wc-block-components-totals-coupon__input.is-active label {
  top: 5px;
  left: 12px;
  font-size: 12px;
  line-height: 16px;
  transform: none;
}
body:is(.woocommerce-cart, .woocommerce-checkout) main .wc-block-components-totals-coupon__button { min-height: 56px; }
body.woocommerce-checkout main .wc-block-checkout__main :is(input, select, textarea)[aria-invalid=true],
body.woocommerce :is(.woocommerce-invalid input, .woocommerce-invalid select, .woocommerce-invalid textarea) {
  border-color: var(--hess-field-error) !important;
}

/* Classic WooCommerce country/state pickers are enhanced by SelectWoo. */
body .select2-container--default .select2-selection--single {
  min-height: 48px;
  border: 1px solid var(--hess-field-border);
  border-radius: 0;
}
body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: 14px; padding-right: 40px; color: var(--hess-field-text); }
body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 10px; }
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single { outline: 2px solid var(--hess-field-focus); outline-offset: 2px; }
body .select2-dropdown { border-color: var(--hess-field-border); border-radius: 0; }
body .select2-container--open .select2-search__field { box-sizing: border-box; min-height: 44px; padding: 8px 10px; border: 1px solid var(--hess-field-border); font-family: inherit; font-size: 16px; line-height: 1.4; }
body .select2-container--open .select2-search__field:focus-visible { outline: 2px solid var(--hess-field-focus); outline-offset: 1px; }
body .select2-results__option { padding: 10px 14px; line-height: 1.4; }
body .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--hess-field-text); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  body :is(main, .site-header) :where(input, select, textarea) { transition: none; }
}
@media (forced-colors: active) {
  body main select:not(.wc-blocks-components-select__select) { appearance: auto; background-image: none; }
}
