/***************************
 * Constants - WooCommerce *
 ***************************/

body {
  --qip-product-metadata-left-column-min-width: unset;
}

/*************************
 * Generic - WooCommerce *
 *************************/

.wp-block-woocommerce-featured-category h2 {
  /* font-size: var(--wp--preset--font-size--extra-large); */
  font-size: var(--wp--preset--font-size--large);
}

/******************************
 * Undo Woocommerce stupidity *
 * Styling - WooCommerce       *
 ******************************/

/* WooCommerce makes metadata smaller, so make "main" sections 25% bigger to compensate. */
.wc-block-components-main {
  font-size: 1.25em;
}

.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: none;
}

.wc-block-featured-category .wc-block-featured-category__title {
  /* Woocommerce has hardcoded padding */
  padding: 0.25em 0em;
}

.editor-styles-wrapper .wc-block-grid__products .wc-block-grid__product .wc-block-components-product-image img[alt=""], .wc-block-components-product-image img[alt=""] {
  border: unset;
}

/* Disable WooCommerce shrinking product titles/buttons within grids (e.g., related products) */
.theme-twentytwenty .wc-block-grid.has-5-columns .wc-block-grid__product,
.theme-twentytwenty .wc-block-grid.has-6-columns.alignfull .wc-block-grid__product,
                    .wc-block-grid.has-5-columns .wc-block-grid__product,
                    .wc-block-grid.has-6-columns.alignfull .wc-block-grid__product {
  font-size: inherit;
}

/* Align quantity and the "remote item" text */
.wc-block-cart-item__quantity {
  width: fit-content;
  text-align: center;
}

.wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__wrapper {
  aspect-ratio: auto;
}

.wc-block-product-gallery-large-image .wc-block-woocommerce-product-gallery-large-image__image {
	max-width: 800px;
	max-height: 800px;
	aspect-ratio: 1/1;
}

div.wc-block-add-to-cart-form.field-table,
div.wp-block-add-to-cart-form.field-table {
}
div.wc-block-add-to-cart-form.field-table.is-layout-flex,
div.wp-block-add-to-cart-form.field-table.is-layout-flex {
  /* Like .wp-block-group-is-layout-flex */
  gap: var(--wp--preset--spacing--20);
}

div.wc-block-add-to-cart-form.field-table > p.stock,
div.wp-block-add-to-cart-form.field-table > p.stock {
}
div.wc-block-add-to-cart-form.field-table > p.stock,
div.wp-block-add-to-cart-form.field-table > p.stock {
  width: 100%;
  font-size: inherit;
  /* margin-left: calc(var(--qip-product-metadata-left-column-min-width) + var(--wp--preset--spacing--20)); */
  margin-block-end: inherit;
}

.woocommerce div.product div.wp-block-add-to-cart-form > form.cart,
.woocommerce div.product div.wc-block-add-to-cart-form > form.cart {
  margin-bottom: 0em;
  /* float: right; */
}
/* .wc-block-add-to-cart-form .quantity, */
.woocommerce div.product div.wp-block-add-to-cart-form > form.cart > div.quantity,
.woocommerce div.product div.wc-block-add-to-cart-form > form.cart > div.quantity {
  min-width: var(--qip-product-metadata-left-column-min-width);
  margin: 0;
  /* text-align: right; */
}
.woocommerce div.product div.wp-block-add-to-cart-form > form.cart > div.quantity .qty,
.woocommerce div.product div.wc-block-add-to-cart-form > form.cart > div.quantity .qty {
  margin: 0;
}

/* Woocommerce variations_form reset/clear button/a's parent-parent tr */
body.woocommerce div.product form.cart tr:has(> td > .reset_variations) {
  display: table-row;

  td {
    min-width: fit-content;
    text-align: right;

    /* WooCommerce variations_form reset/clear button/a */
    :is(button, a).reset_variations {
      /* Fix when reset/clear button is display: inline making the last select 15% larger for some reason */
      /* display: block ! important; */
      width: fit-content;
      /* Half the spacing under it (?) */
      margin-top: var(--wp--preset--spacing--20);
      position: relative;
      background-color: transparent;
      color: var(--wp--preset--color--link-base);
      border: unset;
      &:hover {
        color: var(--wp--preset--color--link-hover);
      }
    }

  }
}

.woocommerce div.product form.cart table.variations :is(td, th) {
  text-align: left;
  /* WooCommerce cart fix last of the variation names being shifted down a little
   when the reset/clear button is visible because of "vertical-align: middle" */
  vertical-align: top;
  line-height: normal;
}
.woocommerce div.product form.cart .variations label {
  font-weight: normal;
  display: block;
  padding-top: calc(0.5em + 1px);
  margin-bottom: 0px;
}
.woocommerce div.product form.cart .variations label:after {
  content: ":";
}
.woocommerce table.variations tr th {
  padding-right: 0px;
}
.woocommerce div.product form.cart .variations td > p.current-attribute-value {
  padding-top: calc(0.5em + 1px);
}

.woocommerce div.product .woocommerce-variation-description > p:before {
  content: "Variant:";
  min-width: var(--qip-product-metadata-left-column-min-width);
  display: inline-block;
}
.woocommerce div.product .woocommerce-variation-availability .stock {
  font-size: inherit;
}
.woocommerce div.product .woocommerce-variation-availability .stock:before {
  content: "Availability:";
  min-width: var(--qip-product-metadata-left-column-min-width);
  display: inline-block;
  margin-right: 0.5em; /* Cannot add margin-left on the text in the right column */
}
.woocommerce div.product .woocommerce-variation-price .price:before {
  content: "Price:";
  min-width: var(--qip-product-metadata-left-column-min-width);
  display: inline-block;
}

.woocommerce div.product form.cart .woocommerce-variation-description p,
.woocommerce div.product form.cart .woocommerce-variation-availability p {
  /* Override Woocommerce's margin-bottom: 1em; */
  margin-block-end: 0;
  margin-block-start: 0;
}

.woocommerce div.product form.cart .variations {
    margin-bottom: var(--wp--preset--spacing--20);
}
.woocommerce div.product .woocommerce-variation {
    margin-top: var(--wp--preset--spacing--50);
    margin-bottom: var(--wp--preset--spacing--50);
}

.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="url"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="url"] {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-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="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="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--main-text);
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input[aria-expanded=true],
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input[aria-expanded=true] {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list .components-form-token-field__suggestion,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list .components-form-token-field__suggestion,
.wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list,
.wp-site-blocks .currency-switcher-holder select option,
.wp-site-blocks .currency-switcher-holder select option:focus,
.wp-site-blocks .currency-switcher-holder select option:focus-visible,
.woocommerce .woocommerce-ordering select option,
.woocommerce .woocommerce-ordering select option:focus,
.woocommerce .woocommerce-ordering select option:focus-visible,
.wc-block-catalog-sorting select option,
.wc-block-catalog-sorting select option:focus,
.wc-block-catalog-sorting select option:focus-visible {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-background);
}
.woocommerce table.variations tr td ul:is(.wc-variations-attribute,.wc-custom-type-buttons) > li {
  button {
	color: var(--wp--preset--color--button-text-hover) ! important;
	background-color: var(--wp--preset--color--button-background-hover) ! important;
	border: 2px solid transparent;
  }
  &:hover button,
  &:focus button,
  &:focus-visible button {
	border: 2px solid color-mix(in srgb, white, var(--wp--preset--color--button-background-hover) 85%);
  }
  &.selected button {
	color: var(--wp--preset--color--button-text-hover) ! important;
	background-color: var(--wp--preset--color--button-background-hover) ! important;
	border: 2px solid var(--wp--preset--color--button-text-hover);
  }
}

/* WooCommerce Add to cart + options */
:where(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill) {
  /* Pill */
  color: var(--wp--preset--color--button-text-hover) ! important;
  background-color: var(--wp--preset--color--button-background-hover) ! important;
  --pill-color: var(--wp--preset--color--button-text-hover) ! important;
  --pill-background-color: var(--wp--preset--color--button-background-hover) ! important;
  border: 2px solid transparent;
  padding: 0.6em 0.6em;
  font-size: var(--wp--preset--font-size--medium);
}
:where(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:has(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input:checked)) {
  /* Pill, checked */
  border: 2px solid var(--wp--preset--color--button-text-hover);
}
:where(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill):focus-within {
  outline: 1px solid transparent;
}

.wc-block-add-to-cart-with-options-grouped-product-item-selector .wc-block-components-quantity-selector input[type=number].input-text.qty.text, .wc-block-add-to-cart-with-options__quantity-selector .wc-block-components-quantity-selector input[type=number].input-text.qty.text {
  /* Center the quantity selector's selection */
  height: 100%;
  vertical-align: middle;
}

.wc-block-components-textarea {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-checkout__add-note .wc-block-components-textarea:focus {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus {
  background-color: var(--wp--preset--color--input-background);
}
.woocommerce .woocommerce-ordering select
.woocommerce .wc-block-catalog-sorting select {
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-checkbox .wc-block-components-checkbox__mark {
  fill: var(--wp--preset--color--main-text);
}

.wc-block-catalog-sorting select,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
  border: 1px solid transparent;
}
.wc-block-catalog-sorting select {
  padding: 0.5em;
  font-size: 1em;
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="url"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="url"] {
  border: 1px solid transparent;
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  border: 1px solid transparent;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  border: 1px solid transparent;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  border: 1px solid transparent;
}
.woocommerce .woocommerce-ordering select,
.woocommerce .wc-block-catalog-sorting select {
  border: 1px solid transparent;
}
.wc-block-catalog-sorting select:focus,
.wc-block-catalog-sorting select:focus-visible,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus {
  border: 1px solid var(--wp--preset--color--link-base) ! important;
}
.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="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="tel"]:focus,
.wc-block-components-text-input input[type="text"]:focus,
.wc-block-components-text-input input[type="url"]:focus {
  border: 1px solid var(--wp--preset--color--link-base);
}
.wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list {
  border: 1px solid var(--wp--preset--color--link-base);
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus {
  border: 1px solid var(--wp--preset--color--link-base);
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus {
  border: 1px solid var(--wp--preset--color--link-base);
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus {
  box-shadow: none;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus {
  border: 1px solid var(--wp--preset--color--link-base);
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus {
  box-shadow: none;
}
.woocommerce .woocommerce-ordering select:focus,
.woocommerce .wc-block-catalog-sorting select:focus {
  border: 1px solid var(--wp--preset--color--link-base);
}

.wp-site-blocks .currency-switcher-holder select {
  /* Woocommerce had the brilliant idea to force all these in the element style! */
  padding: 0.5em ! important;
  border: 1px solid transparent ! important;
  border-radius: 0 ! important;
  font-size: inherit ! important;
  color: var(--wp--preset--color--main-text) ! important;
  background-color: var(--wp--preset--color--input-background) ! important;
}
.wp-site-blocks .currency-switcher-holder select:focus,
.wp-site-blocks .currency-switcher-holder select:focus-visible {
  border: 1px solid var(--wp--preset--color--link-base) ! important;
}

/* WooCommerce Dropdowns */
.wp-site-blocks .currency-switcher-holder select option:active,
.wp-site-blocks .currency-switcher-holder select option:hover,
.wp-site-blocks .currency-switcher-holder select option:focus,
.wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list .components-form-token-field__suggestion.is-highlighted,
.wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list .components-form-token-field__suggestion:active,
.wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list .components-form-token-field__suggestion:focus,
.wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list .components-form-token-field__suggestion:hover,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list .components-form-token-field__suggestion.is-highlighted,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list .components-form-token-field__suggestion:active,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list .components-form-token-field__suggestion:focus,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list .components-form-token-field__suggestion:hover {
  /*
   * Can't control the browser's white-on-blue defaults for select>option
  background-color: var(--wp--preset--color--button-background-hover) ! important;
  color: var(--wp--preset--color--link-base) ! important;
  */
  background-color: #1967d2 ! important;
  color: white ! important;
}

/* Woocommerce had the brilliant idea to force all these separately in their style sheet! */
.woocommerce table.variations tr td select {
  height: auto ! important;
  padding: 0.5em ! important;
  font-size: inherit ! important;
}
.wc-block-add-to-cart-form .input-text {
  font-size: inherit ! important;
  padding: 0.5em ! important;
}

/* Woocommerce latest version (9.7.0-dev or something) causes all td to have 1px/8px of padding */
.woocommerce div.product form.cart table.variations td {
  padding: 0px;
}
/* WooCommerce: set a fixed height on those new separators */
.woocommerce div.product form.cart table.variations
  tr:not(:has(> th)) /* separator row */
  > td:not(:has(> button.reset_variations)) /* data cell within a separator row, except the special reset row */
,
.woocommerce div.product form.cart table.variations
  tr:has(> th)/* not a separator row */:has(
    + tr > th /* sibling that is a NOT a separator row */
  ) /* followed by a non-separator row */
  > td, /* data cell within a normal row, followed by a non-separator row */
.woocommerce div.product form.cart table.variations
  tr:has(> th)/* not a separator row */:has(
    > td > select + .reset_variations /* select AND reset variations button/link all-in-one */
  )
  > td, /* data cell within a normal row, with the reset variations included */
.woocommerce div.product form.cart table.variations
  tr:has(> th) /* normal row */
  + tr:has(> th):has( /* normal row */
    + tr > td > button.reset_variations /* sibling that is a reset button data cell */
  ) > td /* normal row preceded by a normal row and followed by the reset button */
{
  padding-top: 0.5em;
}
.woocommerce div.product form.cart table.variations
  tr:has(> th)/* not a separator row */:has(
	select.wc-custom-type-buttons
  ) > td {
  /* The custom type: buttons already has its own padding-top */
  padding-top: 0;
}

.wc-block-components-product-button__button {
  font-weight: 500;
}

.wc-block-product-gallery-large-image-next-previous button.wc-block-product-gallery-large-image-next-previous-left--outside-image svg,
.wc-block-product-gallery-large-image-next-previous button.wc-block-product-gallery-large-image-next-previous-left--outside-image svg path,
.wc-block-product-gallery-large-image-next-previous button.wc-block-product-gallery-large-image-next-previous-right--outside-image svg,
.wc-block-product-gallery-large-image-next-previous button.wc-block-product-gallery-large-image-next-previous-right--outside-image svg path {
  fill: white;
  color: white;
  stroke: white;
}
.wc-block-product-gallery-large-image-next-previous button.wc-block-product-gallery-large-image-next-previous-left--outside-image svg,
.wc-block-product-gallery-large-image-next-previous button.wc-block-product-gallery-large-image-next-previous-right--outside-image svg {
  /* Natural height of path: 24 */
  /* Natural height of path: 16 -- bump to 24 */
  transform: scale(1.5);
}

.wc-block-product-gallery-pager__pager button svg circle {
  fill: white;
  color: white;
  /* stroke: white; */
}

.wc-block-product-gallery-pager__pager button svg {
}

.woocommerce img, .woocommerce-page img {
}
@media (min-width: 1025px) {
  /* Desktop */
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet */
}
@media (max-width: 767px) {
  /* Mobile */
  .wc-block-product-gallery-large-image img {
    /* max-width: 80vw; */
  }
  .wc-block-product-gallery:not([data-next-previous-buttons-position=outsideTheImage]:not(.is-single-product-gallery-image)) .wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__image-element {
    max-width: 80vw;
  }
  .wc-block-product-gallery[data-next-previous-buttons-position=outsideTheImage]:not(.is-single-product-gallery-image) .wc-block-product-gallery-large-image-next-previous-left--outside-image,
  .wc-block-product-gallery[data-next-previous-buttons-position=outsideTheImage]:not(.is-single-product-gallery-image) .wc-block-product-gallery-large-image-next-previous-right--outside-image {
    right: 1em;
  }
}

/* Tried to change autofill color, did not work (should use box-shadow?) */
/*
.wc-block-components-form .wc-block-components-text-input input[type="email"]:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input input[type="number"]:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input input[type="tel"]:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input input[type="text"]:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input input[type="url"]:-webkit-autofill,
.wc-block-components-text-input input[type="email"]:-webkit-autofill,
.wc-block-components-text-input input[type="number"]:-webkit-autofill,
.wc-block-components-text-input input[type="tel"]:-webkit-autofill,
.wc-block-components-text-input input[type="text"]:-webkit-autofill,
.wc-block-components-text-input input[type="url"]:-webkit-autofill {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--button-background-hover);
}
.wc-block-components-form .wc-block-components-text-input input[type="email"]:focus:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input input[type="number"]:focus:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input input[type="tel"]:focus:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input input[type="text"]:focus:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input input[type="url"]:focus:-webkit-autofill,
.wc-block-components-text-input input[type="email"]:focus:-webkit-autofill,
.wc-block-components-text-input input[type="number"]:focus:-webkit-autofill,
.wc-block-components-text-input input[type="tel"]:focus:-webkit-autofill,
.wc-block-components-text-input input[type="text"]:focus:-webkit-autofill,
.wc-block-components-text-input input[type="url"]:focus:-webkit-autofill {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--button-background-hover);
}
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:-webkit-autofill,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:-webkit-autofill {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--button-background-hover);
}
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus:-webkit-autofill,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input[aria-expanded=true]:-webkit-autofill,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus:-webkit-autofill,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input[aria-expanded=true]:-webkit-autofill {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list .components-form-token-field__suggestion:-webkit-autofill,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list .components-form-token-field__suggestion:-webkit-autofill,
.wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list:-webkit-autofill,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list:-webkit-autofill {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-textarea:-webkit-autofill {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-checkout__add-note .wc-block-components-textarea:focus:-webkit-autofill {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:-webkit-autofill {
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked:-webkit-autofill {
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:-webkit-autofill {
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus:-webkit-autofill {
  background-color: var(--wp--preset--color--input-background);
}
.woocommerce .woocommerce-ordering select:-webkit-autofill {
  background-color: var(--wp--preset--color--input-background);
}
.wc-block-components-checkbox .wc-block-components-checkbox__mark:-webkit-autofill {
  fill: var(--wp--preset--color--main-text);
}

.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:-webkit-autofill,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:-webkit-autofill {
  border: 1px solid transparent ! important;
  border-bottom-color: var(--wp--preset--color--link-base) ! important;
}
.wc-block-components-form .wc-block-components-text-input input[type="email"]:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input input[type="number"]:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input input[type="tel"]:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input input[type="text"]:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input input[type="url"]:-webkit-autofill,
.wc-block-components-text-input input[type="email"]:-webkit-autofill,
.wc-block-components-text-input input[type="number"]:-webkit-autofill,
.wc-block-components-text-input input[type="tel"]:-webkit-autofill,
.wc-block-components-text-input input[type="text"]:-webkit-autofill,
.wc-block-components-text-input input[type="url"]:-webkit-autofill {
  border: 1px solid transparent ! important;
  border-bottom-color: var(--wp--preset--color--link-base) ! important;
}
.wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list {
  border: 1px solid transparent ! important;
  border-bottom-color: var(--wp--preset--color--link-base) ! important;
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:-webkit-autofill {
  border: 1px solid transparent ! important;
  border-bottom-color: var(--wp--preset--color--link-base) ! important;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:-webkit-autofill {
  border: 1px solid transparent ! important;
  border-bottom-color: var(--wp--preset--color--link-base) ! important;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:-webkit-autofill {
  box-shadow: none ! important;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:-webkit-autofill {
  border: 1px solid transparent ! important;
  border-bottom-color: var(--wp--preset--color--link-base) ! important;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:-webkit-autofill {
  box-shadow: none ! important;
}
.woocommerce .woocommerce-ordering select:-webkit-autofill {
  border: 1px solid transparent ! important;
  border-bottom-color: var(--wp--preset--color--link-base) ! important;
}
*/

.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-form .wc-block-components-text-input.is-active label,
.wc-block-components-combobox.is-active .wc-block-components-combobox-control label.components-base-control__label,
.wc-block-components-form .wc-block-components-combobox.is-active .wc-block-components-combobox-control label.components-base-control__label {
  color: var(--wp--preset--color--button-background-hover);
}

/* WooComerce product-gallery slider has a small padding (seemingly useless), making images overflow when there are too much */
body .wc-block-product-gallery:not([data-next-previous-buttons-position=outsideTheImage]:not(.is-single-product-gallery-image)) .wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__image-element {
  padding: 0px;
}

/* Set woocomerce password input button background and text colors according to strength */
body div.woocommerce-password-strength { /* All of them */
  --qip--color--password-bad: #a82e2e; /* TODO */
  color: var(--wp--preset--color--background);
}
body div.woocommerce-password-strength.short { /* Very Weak */
  /* background-color: var(--wp--preset--color--custom-red); */
  background-color: var(--qip--color--password-bad);
}
body div.woocommerce-password-strength.bad { /* Weak */
  /* background-color: var(--wp--preset--color--custom-brown); */
  background-color: color-mix(in srgb, var(--qip--color--password-bad) 66%, var(--wp--preset--color--button-background) 0%);
}
body div.woocommerce-password-strength.good { /* Medium */
  /* background-color: var(--wp--preset--color--custom-olive); */
  background-color: color-mix(in srgb, var(--qip--color--password-bad) 33%, var(--wp--preset--color--button-background) 0%);
}
body div.woocommerce-password-strength.strong { /* Strong */
  background-color: var(--wp--preset--color--button-background);
}

/* WooCommerce selects */
.wc-blocks-components-select .wc-blocks-components-select__container {
  background: unset;
}
div .wc-blocks-components-select .wc-blocks-components-select__select {
  /* Fix WooCommerce selects having the same line-height as a normal paragraph */
  line-height: 1em;
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-background);
}

/* WooCommerce forces font-size of stock message */
.woocommerce div.product p.stock {
  font-size: var(--wp--preset--font-size--medium);
}

.is-vertical .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail {
  /* Add spacing between the thumbnails and the scrollbar */
  height: calc(100% - 1em);
}

/* Woocommerce my-account shortcode */
body.woocommerce-account .woocommerce {
  width: 100%;

  .woocommerce-MyAccount-navigation {
    width: auto;
  }
  .woocommerce-MyAccount-content {
    width: auto;
    float: left;
    padding-left: 2em;
  }

  #account_display_name_description em {
    font-style: normal;
    font-size: var(--wp--preset--font-size--small);
  }

  fieldset {
    border: 1px solid transparent;
  }

  input,
  input.input-text,
  .woocommerce-input-wrapper select {
    background-color: var(--wp--preset--color--input-background);
    color: var(--wp--preset--color--input-text);
    border: 1px solid transparent;
    border-radius: 0;
  }

  input:focus,
  input:focus-visible,
  input.input-text:focus,
  input.input-text:focus-visible {
    background-color: var(--wp--preset--color--input-text);
    color: var(--wp--preset--color--input-background);
    border: 1px solid transparent ! important;
  }
}
.select2-dropdown,
.select2-container .select2-dropdown, .select2-container .select2-selection {
  background-color: var(--wp--preset--color--input-background);
  color: var(--wp--preset--color--input-text);
  border: 1px solid transparent ! important;
  border-radius: 0;
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true],
.select2-container--default .select2-results__option--highlighted[aria-selected=true],
.select2-container--default .select2-results__option--highlighted[data-selected=true],
.select2-search__field {
  background-color: var(--wp--preset--color--input-text);
  color: var(--wp--preset--color--input-background);
  border: 1px solid transparent ! important;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border: 1px solid transparent;
}

.woocommerce-account .addresses .title .edit {
  float: left;
  margin-bottom: 0;
}
.woocommerce-account .addresses address {
  font-style: normal;
}
.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before {
  background-color: var(--wp--preset--color--input-text);
}

/*************************
 * Buttons - WooCommerce *
 *************************/
/*
 * Button:
 *   background-color var(--wp--preset--color--button-background);
 *   color: var(--wp--preset--color--button-text);
 * Button:hover|focus or current:
 *   background-color: var(--wp--preset--color--button-background-hover);
 *   color: var(--wp--preset--color--button-text-hover);
 *
 * Link text:
 *   background-color: inherit;
 *   color: var(--wp--preset--color--link-base)
 * Link text:hover|focus or current:
 *   background-color: inherit;
 *   color: var(--wp--preset--color--link-hover);
 */

/* .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward.wp-element-button, */
.wc-block-components-order-summary .wc-block-components-panel__button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
.wc-block-product-categories__button {
  background-color: var(--wp--preset--color--button-background) ! important;
  color: var(--wp--preset--color--button-text) ! important;
  opacity: 100%;
  text-decoration: none;
  padding: .5em 1em;
  border: none;
}

.add_to_cart_button:hover /* for Editor */ ,
.add_to_cart_button:focus /* for Editor */ ,
/* .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward.wp-element-button:hover, */
/* .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward.wp-element-button:focus, */
.wc-block-components-order-summary .wc-block-components-panel__button:hover,
.wc-block-components-order-summary .wc-block-components-panel__button:focus,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:focus,
.wc-block-product-categories__button:hover ,
.wc-block-product-categories__button:focus {
  background-color: var(--wp--preset--color--button-background-hover) ! important;
  color: var(--wp--preset--color--button-text-hover) ! important;
  box-shadow: none;
  outline: none;
}

/* Add to cart button */
.add_to_cart_button /* for Editor (?)*/,
button.single_add_to_cart_button {
  background-color: var(--wp--preset--color--button-background) ! important;
  color: var(--wp--preset--color--button-text) ! important;
  opacity: 100%;
  padding: .6em;
  border: none;
  font-size: var(--wp--preset--font-size--medium);
}
.woocommerce div.product form.cart div.quantity {
  margin-right: 0;
}
.woocommerce div.product .wp-block-woocommerce-add-to-cart-form form.cart div.quantity .qty,
.woocommerce div.product .wp-block-woocommerce-add-to-cart-with-options div.quantity .qty {
  margin-right: 0.5em;
  width: 2em;
  height: 100%;
  padding-top: 0 ! important;
  padding-bottom: 0 ! important;
  border: none;
}
.wc-block-components-product-button a {
  margin-top: 0;
}
:root :where(.wp-block-woocommerce-product-button):not(:has(.wp-block-woocommerce-add-to-cart-with-options)) {
  line-height: inherit;
}
.woocommerce div.product .wp-block-group.is-layout-flex .wp-block-add-to-cart-with-options-quantity-selector {
  display: flex;
  align-self: stretch;
}

/* Fix WooCommerce's checkout */
.wc-block-components-checkout-step__description,
.wc-block-components-checkbox label,
.wc-block-components-checkbox__label,
.ppcp-place-order-description {
  font-size: var(--wp--preset--font-size--medium);
}
.wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
  padding-top: 1em;
}
.wc-block-components-form .wc-block-checkout__order-notes.wc-block-components-checkout-step {
  margin-bottom: 0px;
}
h2.wc-block-components-title.wc-block-components-title {
  font-size: var(--wp--custom--typography--font-size--heading-five);
}

/* Fix WooCommerce checkout delivery font size */
.wc-block-components-totals-item__description {
  font-size: inherit;
}
.wc-block-components-totals-item__description .wc-block-components-radio-control__description, .wc-block-components-radio-control__secondary-description {
  font-size: var(--wp--preset--font-size--tiny);
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  min-width: auto;
}

div:has(> .wc-block-mini-cart__button),
div > .wc-block-mini-cart__button {
  outline: unset;
}
.wc-block-mini-cart__button {
  padding: 0.5em;
  left: 0px;
  margin-left: -0.5em;
  position: static;
}
.wc-block-mini-cart__button .wc-block-mini-cart__badge {
  left: 0px;
  margin-left: -0.5em;
  position: static;
}

.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
  box-shadow: unset ! important;
}

/* Woocommerce quantity + and - buttons */
.wc-block-components-quantity-selector__button--plus,
.wc-block-components-quantity-selector__button--minus {
  color: var(--wp--preset--color--main-text);
}
.wc-block-components-quantity-selector__button--plus:hover,
.wc-block-components-quantity-selector__button--plus:focus,
.wc-block-components-quantity-selector__button--minus:hover,
.wc-block-components-quantity-selector__button--minus:focus {
  color: var(--wp--preset--color--button-background-hover);
}

/* More discrete padding */
.wc-block-components-drawer__close-wrapper > button,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward.wp-element-button,
.wc-block-components-order-summary .wc-block-components-panel__button {
  padding: 0 .25em ! important;
}

/* Collapsible headings, not buttons */
.wc-block-components-order-summary .wc-block-components-panel__button {
  border-radius: 0px;
}

/* Subtle links */
.wc-block-mini-cart__button,
.wp-block-woocommerce-customer-account a .wc-block-customer-account__account-icon {
  color: var(--wp--preset--color--main-text);
  text-decoration: none;
}
.wc-block-mini-cart__button:hover,
.wc-block-mini-cart__button:focus,
.wp-block-woocommerce-customer-account a .wc-block-customer-account__account-icon:hover,
.wp-block-woocommerce-customer-account a .wc-block-customer-account__account-icon:focus {
  color: var(--wp--preset--color--link-base);
}
.wc-block-mini-cart__button:focus,
.wp-block-woocommerce-customer-account a .wc-block-customer-account__account-icon:focus {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--button-background-hover);
}

/* Woocommerce "Remove item" button, subtle and red */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
  color: var(--wp--preset--color--main-text);
  text-decoration: none;
}
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover,
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:focus {
  /* Button:hover|focus or current: */
  /* background-color: var(--wp--preset--color--button-background-hover); */
  color: rgb(168,46,46);
}
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:focus {
  color: var(--wp--preset--color--main-text);
  background-color: rgb(168,46,46);
}

.wc-block-mini-cart__button:hover:not([disabled]) {
  opacity: 100%;
}

/* New Woocommerce update breaks width, height and padding of account and mini-cart icons */
.wc-block-mini-cart__button,
.wp-block-woocommerce-customer-account a {
  padding: 0.3em;
}
.wc-block-mini-cart__button .wc-block-mini-cart__icon,
.wp-block-woocommerce-customer-account a .wc-block-customer-account__account-icon {
  width: 32px;
  height: 32px;
}

/******************************
 * WooCommerce Notice banners *
 ******************************/

.wc-block-components-notice-banner.is-success {
  /* Like h6 */
  background: linear-gradient(135deg,rgba(18,18,18,0.89) 0%,rgba(18,18,18,0) 100%);
  background-color: var(--wp--preset--color--link-base);
  border: 1px solid green;
  color: var(--wp--preset--color--foreground);
  font-size: var(--wp--preset--font-size--content-heading);
}

.wc-block-components-notice-banner.is-error {
  /* Like h6 */
  background: linear-gradient(135deg,rgba(18,18,18,0.89) 0%,rgba(18,18,18,0) 100%);
  background-color: #cc1818;
  border: 1px solid red;
  color: white ! important;
  font-size: var(--wp--preset--font-size--content-heading);
}

/* The .wc-forward also has .wc-element-button */
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward.wp-element-button {
  /* background-color: inherit ! important; */
}
.wc-block-components-notice-banner:hover > .wc-block-components-notice-banner__content .wc-forward.wp-element-button,
.wc-block-components-notice-banner:focus > .wc-block-components-notice-banner__content .wc-forward.wp-element-button {
  /* background-color: var(--wp--preset--color--button-background-hover) ! important; */
}

.wc-block-components-notice-banner.is-info {
  background-color: transparent;
  color: var(--wp--preset--color--main-text);
  border: 1px solid transparent;
  padding: 0 ! important;
  margin: 0;

  > svg {
  background-color: transparent;
  }
}

.wp-site-blocks .wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
  display: flex;
  flex-direction: column;
}
.wp-site-blocks .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
  font-size: var(--wp--preset--typography--font-size--medium);
  transition: none;
  float: left;
  padding: 0 ! important;
  /* Make this act as a link, not a button */
  background-color: transparent ! important;
  color: var(--wp--preset--color--link-base) ! important;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: transparent ! important;
    color: var(--wp--preset--color--link-hover) ! important;
  }
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  padding: 0.25em;

  &.is-active a {
  color: var(--wp--preset--color--link-focus);
  text-decoration: none;
  }

  a:hover,
  a:focus,
  a:focus-visible {
    text-decoration: none;
  }
}

/***************************
 * Block: Filter by price *
 ***************************/

/* Filter by price block */
.wc-block-components-price-slider,
.wc-block-components-price-slider__controls {
  margin: 0;
}
.wc-block-components-price-slider__controls .wc-block-components-price-slider__amount,
.wc-block-components-price-slider--is-input-inline .wc-block-components-price-slider__controls .wc-block-components-price-slider__amount {
  border: 1px solid transparent ! important;
  border-radius: 0 !important;
  max-width: 15vw;
}
.wc-block-components-price-slider--is-input-inline .wc-block-components-price-slider__controls .wc-block-components-price-slider__amount:hover {
  background-color: var(--wp--preset--color--button-background-hover) ! important;
  color: var(--wp--preset--color--link-base) ! important;
}
.wc-block-components-price-slider--is-input-inline .wc-block-components-price-slider__controls .wc-block-components-price-slider__amount:focus {
  background-color: var(--wp--preset--color--button-background-hover) ! important;
  color: var(--wp--preset--color--link-base) ! important;
  border: 1px solid var(--wp--preset--color--link-base) ! important;
}
.wc-block-components-price-slider__range-input::-webkit-slider-thumb {
  background-color: var(--wp--preset--color--link-base) ! important;
  border: 2px solid var(--wp--preset--color--button-background-hover) ! important;
}
.wc-block-components-price-slider__range-input::-moz-range-thumb {
  background-color: var(--wp--preset--color--link-base) ! important;
  border: 2px solid var(--wp--preset--color--button-background-hover) ! important;
}
.wc-block-components-price-slider__range-input::-ms-thumb {
  background-color: var(--wp--preset--color--link-base) ! important;
  border: 2px solid var(--wp--preset--color--button-background-hover) ! important;
}
.wc-block-components-price-slider__actions {
  display: none;
}

/*******************************
 * Block: Filter by attributes *
 *******************************/

.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container,
.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container > input,
.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container > input::placeholder {
  color: var(--wp--preset--color--main-text) !important;
  background-color: var(--wp--preset--color--input-background) !important;
  border: unset !important;
}
.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper:not(.is-loading) {
  border: unset !important;
}
.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container:focus {
  box-shadow: unset !important;
}
.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container {
  padding: 0 !important;
}
.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__suggestions-list .components-form-token-field__suggestion {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-background);
  border: unset;
}
.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestions-list {
  color: var(--wp--preset--color--main-text);
  background-color: var(--wp--preset--color--input-background);
  border: unset;
}

/* vim: set sw=2 sts=2 ts=4: */