[data-hook="OrichiSwatchesContainer"] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0px;
  width: 100%;
  max-width: 100%;
  position: relative;
}

.orichi-swatch-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.orichi-button-item-image {
  object-fit: cover;
  border-radius: var(--orichi-border-radius, 0px);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.orichi-swatch-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.orichi-swatch-item-text {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--orichi-border-radius, 0px);
}

.orichi-swatch-item {
  border-radius: var(--orichi-border-radius);
  outline: 0.1rem solid var(--orichi-frame-color);
  background: var(--orichi-bg-color, transparent);
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  border: 0.05rem solid #bdbdbd;
  position: relative;
  z-index: 999;
}

.orichi-swatch-item.small {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

.orichi-swatch-item.medium {
  width: 40px;
  min-width: 40px;
  height: 40px;
}

.orichi-swatch-item.large {
  width: 52px;
  min-width: 52px;
  height: 52px;
}

.orichi-swatch-item.selected {
  border: none;
  outline: 0.13rem solid var(--orichi-selected-color);
  outline-offset: 0.1rem;
  forced-color-adjust: none;
}

[data-hook="OrichiSwatchesOptionItem"]:hover {
  outline: 0.13rem solid var(--orichi-hover-color, #000000);
  outline-offset: 0.1rem;
  forced-color-adjust: none;
}

/* Tooltip styles */

.orichi-swatches-wrapper.small .orichi-swatch-hover-image {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
}
.orichi-swatches-wrapper.medium .orichi-swatch-hover-image {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
}
.orichi-swatches-wrapper.large .orichi-swatch-hover-image {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px;
}

.orichi-swatches-tooltip-wrapper .orichi-swatch-item-tooltip {
  opacity: 1;
  visibility: visible;
  bottom: 100%;
}

.circle {
  border-radius: 50%;
}

.square {
  border-radius: 0;
}

.orichi-swatch-item-tooltip.hidden-tooltip {
  bottom: 80%;
  left: 50%;
  transform: translate(-50%, 0);
}

.orichi-swatch-item-tooltip {
  opacity: 0;
  transform: translateY(0);
}

.orichi-swatch-item-tooltip.animate-in {
  opacity: 1;
  transform: translateY(-5px);
}

.hover-tooltip .orichi-swatch-item-tooltip {
  bottom: 80%;
  left: 50%;
  transform: translate(-50%, 0);
}

.orichi-swatches-swiper.swiper-initialized {
  overflow: hidden;
}

.orichi-swatches-swiper.swiper-initialized .hover-tooltip:hover .orichi-swatch-item-tooltip {
  opacity: 0;
  visibility: hidden;
}

.orichi-dropdown-item.hover-tooltip:hover .orichi-swatch-item-tooltip,
.orichi-swatches-swiper .hover-tooltip:hover .orichi-swatch-item-tooltip,
.orichi-swatch-item-preview .hover-tooltip:hover .orichi-swatch-item-tooltip {
  opacity: 1;
  visibility: visible;
  bottom: 100%;
}

.orichi-swatch-item-tooltip {
  position: absolute;
  transition: all 0.3s ease-out;
  background: #ffffff;
  color: #000000;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  z-index: 99;
  margin-bottom: 8px;
  text-align: center;
  height: max-content;
  box-shadow: 0rem 0.25rem 0.375rem -0.125rem rgba(26, 26, 26, 0.2);
}

.orichi-swatch-item-tooltip::after {
  content: "";
  position: absolute;
  top: 98%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #ffffff;
  z-index: 99999;
}

.product-grid__card.product-grid__card {
  overflow: visible !important;
}

.orichi-swatch-tooltip {
  display: block;
  font-weight: 500;
}

.orichi-swatch-hover-image {
  width: 100%;
  height: auto;
  max-width: 200px;
  border-radius: 4px;
  display: block !important;
}

.orichi-swatch-item img,
.orichi-swatch-item .orichi-swatch-item-image {
  min-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--orichi-border-radius);
}

.orichi-swatch-item-color {
  width: 100%;
  height: var(--orichi-height);
  outline: 0.1rem solid var(--orichi-bg-color);
}

.orichi-button-label {
  color: #bdbdbd;
  font-size: 12px;
  margin-bottom: 8px;
  text-transform: lowercase;
  letter-spacing: 0.5px;
}

.orichi-button-title {
  font-weight: bold;
  font-size: 16px;
  margin: 0px;
  color: #000000;
  margin-left: 5px;
}

.orichi-button-item {
  max-width: var(--orichi-max-width, max-content);
  width: var(--orichi-width, max-content);
  height: var(--orichi-height, auto);
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  user-select: none;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  outline: 0.1rem solid var(--orichi-bg-color);
  border-radius: var(--orichi-border-radius);
  padding: 3px;
  transition-property: outline-color, outline-width, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  forced-color-adjust: none;
  z-index: 10;
}

.orichi-button-item.medium {
  padding: 6px 15px;
  min-width: 90px;
  max-width: 90px;
  width: 90px;
}

.orichi-button-item.medium .orichi-button-item-text {
  font-size: 14px;
  line-height: 16px;
}

.orichi-button-item.medium .orichi-button-item-image img {
  width: 50px;
  height: 50px;
  min-width: 50px;
}

.orichi-button-item.small {
  padding: 5px 15px;
  min-width: 70px;
  max-width: 70px;
  width: 70px;
}

.orichi-button-item.small .orichi-button-item-text {
  font-size: 12px;
  line-height: 16px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.orichi-button-item-image img{
  object-fit: contain;
}

.orichi-button-item.small .orichi-button-item-image img {
  width: 40px;
  height: 40px;
  min-width: 40px;
}

.orichi-button-item.large {
  padding: 9px 25px;
  min-width: 120px;
  max-width: 120px;
  width: 120px;
}

.orichi-button-item.large .orichi-button-item-text {
  font-size: 16px;
  line-height: 18px;
}

.orichi-button-item.large .orichi-button-item-image img {
  width: 70px;
  height: 70px;
}

.orichi-button-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.orichi-button-item.selected {
  outline: 0.1rem solid var(--orichi-selected-color);
}

.orichi-button-item-text {
  font-weight: 500;
  text-align: left;
  line-height: 1;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.orichi-button-item-image {
  border-radius: var(--orichi-border-radius);
  overflow: hidden;
  background: var(--orichi-bg-color);
  margin-bottom: 10px;
  border: 0.1rem solid var(--orichi-frame-color, #fafafa);
}

.orichi-button-item-image img {
  object-fit: cover;
}
/* Dropdown Styles */

.orichi-dropdown-label {
  color: #bdbdbd;
  font-size: 12px;
  margin-bottom: 8px;
  text-transform: lowercase;
  letter-spacing: 0.5px;
}

.orichi-dropdown-title {
  font-weight: bold;
  font-size: 16px;
  margin: 0px;
  color: #000000;
  margin-left: 5px;
}

.orichi-dropdown-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 9px;
  cursor: pointer;
  width: max-content;
  max-width: 100%;
  background: var(--orichi-bg-color);
  border: 0.5px solid #000000;
  overflow: hidden;
  border-radius: var(--orichi-border-radius, 0px);
  z-index: 100;
}

.orichi-swatches-container.small img {
  width: 35px;
}

.orichi-swatches-container.small .orichi-dropdown-swatch-color {
  width: 25px;
  height: 25px;
}

.orichi-swatches-container.small .orichi-dropdown-selected-text {
  font-size: 12px;
}

.orichi-swatches-container.medium .orichi-dropdown-swatch-color {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

.orichi-swatches-container.medium .orichi-dropdown-container {
  padding: 8px 12px;
}

.orichi-swatches-container.medium .orichi-dropdown-selected-text {
  font-size: 14px;
}

.orichi-swatches-container.large img {
  width: 62px;
}

.orichi-swatches-container.large .orichi-dropdown-container {
  padding: 10px 15px;
}

.orichi-swatches-container.large .orichi-dropdown-selected-text {
  font-size: 16px;
}

.orichi-swatches-container.large .orichi-dropdown-swatch-color {
  width: 40px;
  height: 40px;
}

.orichi-swatches-container:hover {
  border-color: #000000;
}

.orichi-dropdown-selected-image,
.orichi-dropdown-selected-color {
  width: 30px;
  height: 30px;
  border-radius: var(--orichi-border-radius);
  border: 0.5px solid #bdbdbd;
  background: var(--orichi-bg-selected, "transparent");
}

.orichi-dropdown-selected-image {
  object-fit: cover;
}

.orichi-dropdown-selected-text {
  flex: 1;
  font-size: 14px;
  color: #000000;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orichi-dropdown-chevron {
  color: #666666;
  transition: transform 0.2s ease;
}

.orichi-swatches-container.open .orichi-dropdown-chevron {
  transform: rotate(180deg);
}

.orichi-dropdown-options {
  padding: 1px;
  position: absolute;
  top: calc(100% + 5px);
  left: 55%;
  transform: translateX(-50%);
  right: 0;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 7px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  max-height: 300px;
  width: max-content;
  display: none;
  overflow: auto;
}

.orichi-dropdown-options .orichi-dropdown-item:nth-child(1) {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.orichi-swatches-container.open .orichi-dropdown-options {
  display: flex;
  flex-direction: column;
}

.orichi-dropdown-item.selected {
  outline: 1px solid var(--orichi-selected-color);
}
.orichi-dropdown-item:hover {
  outline: 1px solid var(--orichi-hover-color);
}

.orichi-dropdown-item {
  outline-offset: 0px !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 10px;
  transition: background-color 0.2s ease;
  padding: 10px 30px 10px 10px;
  min-width: 100px;
}

.orichi-dropdown-swatch-color {
  position: relative;
  border: 0.5px solid #bdbdbd;
  border-radius: var(--orichi-border-radius, 0px);
  background: var(--orichi-bg, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.orichi-dropdown-swatch-color img {
  z-index: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.orichi-dropdown-swatch-image {
  object-fit: cover;
  border-radius: var(--orichi-border-radius);
}

.orichi-dropdown-bg-item {
  width: 100%;
  float: left;
}

.orichi-dropdown-item-text {
  flex: 1;
  font-size: 14px;
}

.orichi-outofstock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  --color-background: 239, 236, 236;
  --gradient-background: #efecec;
  --color-foreground: 37, 37, 37;
  --color-background-contrast: 181, 167, 167;
  --color-shadow: 37, 37, 37;
  --color-button: 44, 51, 47;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 239, 236, 236;
  --color-secondary-button-text: 80, 86, 85;
  --color-link: 80, 86, 85;
  --color-badge-foreground: 37, 37, 37;
  --color-badge-background: 239, 236, 236;
  --color-badge-border: 37, 37, 37;
  --payment-terms-background-color: rgb(239 236 236);
  color: rgba(var(--color-foreground), 0.75);
  list-style: none;
  cursor: pointer;
  forced-color-adjust: none;
  --swatch-input--size: 2.8rem;
  box-sizing: inherit;
  --swatch--size: var(--swatch-input--size, 4.4rem);
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  background: rgb(255 255 255);
  background-position: var(--swatch-focal-point, initial);
  background-size: cover;
  background-origin: border-box;
  border: none !important;
  overflow: hidden;
  opacity: 0.7;
  border-radius: var(--swatch-input--border-radius, 0px);
}

/* Default strike-out line for outofstock */
.orichi-outofstock:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10%;
  width: 120%;
  height: 0.15rem;
  background-color: var(--swatch--background, currentColor);
  transform: rotate(-45deg);
  transform-origin: center;
  pointer-events: none;
}

/* Cross-out specific styles - more specific to override default */
.orichi-outofstock.cross-out {
  width: 100%;
  /* Use calculated diagonal angle from JavaScript */
  --diagonal-angle: 45deg;
}

/* Override the default :after for cross-out with calculated angle */
.orichi-outofstock.cross-out:after {
  --crossed-line--size: 0.2rem;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--crossed-line--size);
  background-color: var(--swatch--background, currentColor);
  /* Use calculated diagonal angle from JavaScript */
  transform: translateY(-50%) rotate(var(--diagonal-angle));
  transform-origin: center;
  pointer-events: none;
}

/* Add the second line for cross-out with calculated angle */
.orichi-outofstock.cross-out:before {
  --crossed-line--size: 0.2rem;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--crossed-line--size);
  background-color: var(--swatch--background, currentColor);
  /* Use negative calculated diagonal angle from JavaScript */
  transform: translateY(-50%) rotate(calc(-1 * var(--diagonal-angle)));
  transform-origin: center;
  pointer-events: none;
}

.orichi-swatch-label {
  font-size: 13px;
}

.card__content {
  display: block;
}

.orichi-swatches-wrapper {
  width: 100%;
  flex: 1;
  position: relative;
}

div[name="orichi-swatches-wrapper"] {
  width: 100%;
  position: relative;
}

.orichi-swatches-container {
  width: max-content;
  position: relative;
}

.swiper-button-lock {
  display: none !important;
}

.orichi-swatch-item-preview .orichi-swatches-swiper {
  overflow: unset;
}

.orichi-swatches-swiper {
  max-width: 100%;
  width: 100%;
  padding-left: 3px;
  position: relative;
  height: max-content;
  padding: 4px;
}

.orichi-swatch-item-preview .swiper-wrapper {
  flex-wrap: wrap;
  gap: var(--orichi-swatches-spacing);
}

.swiper-initialized .swiper-wrapper {
  overflow: visible;
  gap: 0px;
  flex-wrap: nowrap;
}

.swiper-wrapper {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--orichi-swatches-spacing);
}

.orichi-swatch-item-preview .orichi-swatches-swiper-button {
  display: none;
}

.swiper-initialized .orichi-swatches-swiper-button {
  display: flex;
}

.orichi-swatches-swiper-button {
  display: none;
  position: absolute;
  gap: 5px;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  z-index: 999;
  height: calc(100% + 10px);
  align-items: center;
  justify-content: center;
  width: max-content;
}
.orichi-swatches-swiper-button-next:not(.swiper-button-lock),
.orichi-swatches-swiper-button-prev:not(.swiper-button-lock) {
  display: flex !important;
}

.orichi-swatches-swiper-button-next,
.orichi-swatches-swiper-button-prev {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  background-color: #fafafafa;
  color: #000 !important;
  fill: black !important;
  stroke: black !important;
  cursor: pointer;
  &:after {
    font-size: 10px;
  }
}

.orichi-swatches-swiper-button-next.swiper-button-disabled,
.orichi-swatches-swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.orichi-swatches-swiper-button-next:after,
.orichi-swatches-swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: 12px;
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
}
.orichi-swatches-swiper-button-prev:after,
.swiper-container-rtl .orichi-swatches-swiper-button-next:after {
  content: "prev";
}
.orichi-swatches-swiper-button-next:after,
.swiper-container-rtl .orichi-swatches-swiper-button-prev:after {
  content: "next";
}
.orichi-swatches-swiper-button-next.swiper-button-white,
.orichi-swatches-swiper-button-prev.swiper-button-white {
  --swiper-navigation-color: #ffffff;
}
.orichi-swatches-swiper-button-next.swiper-button-black,
.orichi-swatches-swiper-button-prev.swiper-button-black {
  --swiper-navigation-color: #000000;
}