/* === Components === */

@layer component {
  theme-input-number {
    --input-padding-inline: 30px;

    position: relative;
    display: inline-flex;
    width: calc(
      4 * var(--sort-body-size) + var(--input-border-thickness) * 2 +
        var(--input-padding-inline) * 2
    );
    color: rgba(var(--color-text));
    background: rgb(var(--color-background));
    border-radius: var(--input-border-radius-outset);
  }

  theme-input-number::before {
    position: absolute;
    inset: 0;
    z-index: var(--z-index-hover);
    pointer-events: none;
    content: "";
    border-radius: var(--input-border-radius-outset);
    box-shadow: var(--input-shadow-offset-x) var(--input-shadow-offset-y)
      var(--input-shadow-blur)
      rgba(var(--color-text), var(--input-shadow-opacity));
  }

  theme-input-number::after {
    position: absolute;
    inset: var(--input-border-thickness);
    z-index: var(--z-index-hover);
    pointer-events: none;
    content: "";
    border-radius: var(--input-border-radius);
    box-shadow: 0 0 0 var(--input-border-thickness)
      rgba(var(--color-text), var(--input-border-opacity));
    transition: box-shadow 0.2s;
  }
  theme-input-number:hover::after {
    box-shadow: 0 0 0 calc(var(--input-border-thickness) + 1px)
      rgba(var(--color-text), var(--input-border-opacity));
  }

  theme-input-number button[name="minus"],
  theme-input-number button[name="plus"] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    width: 30px;
    padding: 0;
    color: rgb(var(--color-text));
    background: transparent;
    border: 0;
  }

  theme-input-number button[name="minus"]:disabled,
  theme-input-number button[name="plus"]:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.3;
  }

  theme-input-number button[name="minus"] .icon,
  theme-input-number button[name="plus"] .icon {
    width: 10px;
    height: 10px;
    pointer-events: none;
  }

  theme-input-number input[type="number"] {
    flex: 1 0 0;
    width: 100%;
    padding: 0.6em 0;
    color: currentcolor;
    text-align: center;
    appearance: textfield;
    background: transparent;
    border: 0;
    outline-style: none;
  }

  theme-input-number input[type="number"]::-webkit-outer-spin-button,
  theme-input-number input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
  }
  theme-input-number[data-border-style="line"]::before,
  theme-input-number[data-border-style="line"]::after {
    border-radius: 0;
  }

  theme-input-number[data-border-style="line"]::before {
    display: none;
  }

  theme-input-number[data-border-style="line"]::after {
    --box-shadow-thickness: var(--input-border-thickness);

    box-shadow:
      0 calc(1 * var(--box-shadow-thickness)) 0 0
        rgba(var(--color-text), var(--input-border-opacity)),
      0 calc(-1 * var(--box-shadow-thickness)) 0 0
        rgba(var(--color-text), var(--input-border-opacity));
  }

  theme-input-number[data-border-style="line"]:hover::after {
    --box-shadow-thickness: calc(var(--input-border-thickness) + 1px);
  }

  theme-input-number[data-border-style="none"] {
    --input-padding-inline: 40px;
  }

  theme-input-number[data-border-style="none"]::before,
  theme-input-number[data-border-style="none"]::after {
    display: none;
  }

  theme-input-number[data-border-style="none"] button[name="minus"],
  theme-input-number[data-border-style="none"] button[name="plus"] {
    width: 40px;
  }

  theme-input-number[data-border-style="none"] button[name="minus"] .icon,
  theme-input-number[data-border-style="none"] button[name="plus"] .icon {
    width: 20px;
    height: auto;
    padding: 4px;
    color: rgb(var(--color-background));
    background-color: rgb(var(--color-text));
    border-radius: 50%;
  }
}
.country-select {
  position: relative;
  display: flex;
  padding-inline-start: 8px;
}
.country-select__dropdown {
  position: absolute;
  inset: 0;
  appearance: none;
  cursor: pointer;
  border: none;
  opacity: 0;
}
.country-select__trigger {
  position: relative;
  display: flex;
  align-items: center;
  padding-inline-start: 16px;
}
.country-select__trigger span {
  padding-inline-end: 4px;
  color: rgb(var(--color-text));
}
.country-select__trigger::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 100%;
  content: " ";
  border-inline-start: 1px solid rgb(var(--color-entry-line));
}
@layer component {
  theme-show-more:empty {
    display: none;
  }
  theme-show-more:not([open]) [data-more="true"],
  theme-show-more:not([open]) .view-less {
    display: none !important;
  }
  theme-show-more[open] .view-more {
    display: none !important;
  }
}
.product-price {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.product-price__item {
  display: inline;
}
.product-price__sale {
  color: rgb(var(--color-sale));
}
.product-price__origin {
  color: rgb(var(--color-light-text));
  text-decoration: line-through;
}
.product-price__save--text-style {
  color: rgb(var(--color-discount));
}
.product-price__save--button-style {
  padding: 2px 8px;
  color: rgb(var(--color-tag-text));
  background-color: rgb(var(--color-tag-background));
  border-radius: var(--save-button-radius);
}
theme-sticky-position[data-enforce="true"] {
  display: contents;
}