:root {
  --form-control-color: #ee4d2d;
  --orichi-circle-card-layout: rgb(212, 215, 217);
  --orichi-box-shadow-left-card-layout: -2px;
  --orichi-box-shadow-right-card-layout: 2px;
}

p {
  margin: 0;
  padding: 0;
}

.orichi-bundle .text-center {
  text-align: center;
}

.orichi-bundle .d-none {
  display: none !important;
}

.orichi-bundle .text-left {
  text-align: left;
}

.orichi-bundle .d-grid {
  display: grid;
}

.orichi-bundle .align-center {
  align-items: center;
}

.orichi-bundle input[type="radio"]:hover {
  cursor: pointer;
}

.orichi-bundle input[type="radio"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid var(--form-control-color);
  border-radius: 50%;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

.orichi-bundle-volumn__title {
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.orichi-bundle-volumn__description {
  margin-bottom: 1rem;
  font-weight: 500;
}

.orichi-bundle-volumn__rule {
  padding: 1rem 0;
  align-items: flex-start;
  box-shadow: 0 2px 3px 0 #00000040;
}

.orichi-bundle-volumn__rule:not(:last-child),
.orichi-rule-with-highlight-wrapper:not(:last-child) {
  margin-bottom: 1.5rem;
}
.orichi-bundle-volumn__rule.layout-pill:not(:last-child) {
  margin-bottom: 2.5rem;
}

.orichi-bundle-volumn__rule:hover {
  cursor: pointer;
}

.orichi-bundle-volume__rule-radio {
  display: flex;
  justify-content: center;
  height: 63px;
  align-items: center;
}

.orichi-bundle-volume__rule-title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.orichi-bundle-volume__rule-label {
  border-radius: 9999px;
  padding: 0.125rem 0.75rem;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  height: 20px;
  line-height: 17px;
}

.orichi-bundle-volumn__sale-price {
  margin-bottom: 0.5rem;
  display: block;
}

.orichi-bundle-volumn__original-price {
  text-decoration: line-through;
  display: block;
}

.orichi-bundle-volumn__rule-content {
  display: flex;
  justify-content: space-between;
}

.orichi-bundle-volumn__rule-variant-select {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.orichi-bundle input[type="radio"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: var(--form-control-color);
}

.orichi-bundle input[type="radio"]:checked::before {
  transform: scale(1);
}

.orichi-rule-with-highlight-wrapper {
  display: flex;
  flex-direction: column;
}

.orichi-rule-with-highlight-wrapper .label {
  height: 30px;
  padding: 7px 17px;
  line-height: 18px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.orichi-card-clip-path {
  clip-path: polygon(
    0% 2.326%,
    0% 2.326%,
    0.007% 1.948%,
    0.026% 1.591%,
    0.058% 1.257%,
    0.1% 0.952%,
    0.151% 0.681%,
    0.212% 0.449%,
    0.279% 0.26%,
    0.353% 0.119%,
    0.433% 0.03%,
    0.517% 0%,
    99.483% 0%,
    99.483% 0%,
    99.567% 0.03%,
    99.647% 0.119%,
    99.721% 0.26%,
    99.788% 0.449%,
    99.849% 0.681%,
    99.9% 0.952%,
    99.942% 1.257%,
    99.974% 1.591%,
    99.993% 1.948%,
    100% 2.326%,
    100% 34.893%,
    100% 34.893%,
    99.987% 34.892%,
    99.974% 34.89%,
    99.961% 34.889%,
    99.948% 34.887%,
    99.935% 34.886%,
    99.923% 34.885%,
    99.91% 34.885%,
    99.897% 34.884%,
    99.884% 34.884%,
    99.871% 34.884%,
    99.871% 34.884%,
    99.305% 35.074%,
    98.768% 35.625%,
    98.268% 36.506%,
    97.811% 37.688%,
    97.404% 39.141%,
    97.055% 40.834%,
    96.772% 42.739%,
    96.56% 44.824%,
    96.428% 47.061%,
    96.382% 49.419%,
    96.382% 49.419%,
    96.428% 51.776%,
    96.56% 54.013%,
    96.772% 56.098%,
    97.055% 58.003%,
    97.404% 59.696%,
    97.811% 61.149%,
    98.268% 62.331%,
    98.768% 63.212%,
    99.305% 63.763%,
    99.871% 63.953%,
    99.871% 63.953%,
    99.884% 63.953%,
    99.897% 63.953%,
    99.91% 63.953%,
    99.923% 63.952%,
    99.935% 63.951%,
    99.948% 63.95%,
    99.961% 63.949%,
    99.974% 63.947%,
    99.987% 63.946%,
    100% 63.944%,
    100% 97.674%,
    100% 97.674%,
    99.993% 98.052%,
    99.974% 98.409%,
    99.942% 98.743%,
    99.9% 99.048%,
    99.849% 99.319%,
    99.788% 99.551%,
    99.721% 99.74%,
    99.647% 99.881%,
    99.567% 99.97%,
    99.483% 100%,
    0.517% 100%,
    0.517% 100%,
    0.433% 99.97%,
    0.353% 99.881%,
    0.279% 99.74%,
    0.212% 99.551%,
    0.151% 99.319%,
    0.1% 99.048%,
    0.058% 98.743%,
    0.026% 98.409%,
    0.007% 98.052%,
    0% 97.674%,
    0% 63.944%,
    0% 63.944%,
    0.548% 63.68%,
    1.066% 63.078%,
    1.549% 62.165%,
    1.989% 60.969%,
    2.38% 59.518%,
    2.714% 57.84%,
    2.986% 55.963%,
    3.189% 53.915%,
    3.316% 51.725%,
    3.359% 49.419%,
    3.359% 49.419%,
    3.316% 47.113%,
    3.189% 44.922%,
    2.986% 42.874%,
    2.714% 40.997%,
    2.38% 39.32%,
    1.989% 37.869%,
    1.549% 36.673%,
    1.066% 35.76%,
    0.548% 35.157%,
    0% 34.893%,
    0% 2.326%
  );
}

.orichi-haft-circle::before {
  position: absolute;
  content: "";
  width: 26px;
  height: 25px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  left: -16px;
  box-shadow: #d4d7d9 var(--orichi-box-shadow-left-card-layout) 0 inset;
  display: inline-block;
}

.orichi-haft-circle::after {
  position: absolute;
  content: "";
  width: 26px;
  height: 25px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  right: -16px;
  box-shadow: #d4d7d9 var(--orichi-box-shadow-right-card-layout) 0 inset;
  display: inline-block;
}

.orichi-haft-circle-active::before {
  position: absolute;
  content: "";
  width: 26px;
  height: 25px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  left: -16px;
  box-shadow: var(--orichi-circle-card-layout) var(--orichi-box-shadow-left-card-layout) 0 inset;
  display: inline-block;
}

.orichi-haft-circle-active::after {
  position: absolute;
  content: "";
  width: 26px;
  height: 25px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  right: -16px;
  box-shadow: var(--orichi-circle-card-layout) var(--orichi-box-shadow-right-card-layout) 0 inset;
  display: inline-block;
}

.orichi-bundle-volume__rule-pill-wrapper {
  position: absolute;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  top: -16px;
  right: 28px;
  padding: 2px 6px 6px 6px;
}

.orichi-bundle-volumn__rule:not(.orichi-bundle-volumn__rule-active) .orichi-bundle-volume__rule-pill-wrapper {
  top: -15px;
}

.orichi-bundle-volume__rule-pill-wrapper
  :is(.orichi-bundle-volume__rule-triangle-left, .orichi-bundle-volume__rule-triangle-right) {
  width: 0;
  height: 0;
  position: absolute;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  display: block !important;
}

.orichi-bundle-volume__rule-pill-wrapper
  :is(.orichi-bundle-volume__rule-triangle-left, .orichi-bundle-volume__rule-triangle-right)::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid rgba(0, 0, 0, 0.4);
  top: 0;
  left: -9px;
}

.orichi-bundle-volume__rule-pill-wrapper .orichi-bundle-volume__rule-triangle-left {
  top: 6px;
  left: -12px;
  transform: rotate(135deg);
}

.orichi-bundle-volumn__rule.layout-pill:not(.orichi-bundle-volumn__rule-active)
  .orichi-bundle-volume__rule-triangle-left {
  top: 4.5px;
  left: -11.4px;
}

.orichi-bundle-volumn__rule.layout-pill:not(.orichi-bundle-volumn__rule-active)
  .orichi-bundle-volume__rule-triangle-right {
  top: 4.5px;
}

.orichi-bundle-volume__rule-pill-wrapper .orichi-bundle-volume__rule-triangle-right {
  top: 6px;
  right: -12px;
  transform: rotate(225deg);
}

.orichi-bundle-volume__rule-pill-wrapper .orichi-bundle-volume__rule-label-pill {
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  line-height: 20px;
}

@media screen and (max-width: 750px) {
  .orichi-haft-circle::before,
  .orichi-haft-circle-active::before {
    left: -12px;
  }

  .orichi-haft-circle::after,
  .orichi-haft-circle-active::after {
    right: -12px;
  }
}

@media screen and (min-width: 750px) {
  .orichi-haft-circle::before,
  .orichi-haft-circle-active::before {
    left: -14px;
  }

  .orichi-haft-circle::after,
  .orichi-haft-circle-active::after {
    right: -14px;
  }
}

@media screen and (min-width: 1310px) {
  .orichi-haft-circle::before,
  .orichi-haft-circle-active::before {
    left: -12px;
  }

  .orichi-haft-circle::after,
  .orichi-haft-circle-active::after {
    right: -12px;
  }
}

/* Halloween */
.halloween-1,
.halloween-2,
.halloween-3,
.black-friday-1,
.black-friday-2,
.black-friday-3,
.christmas-2 {
  position: absolute;
  z-index: 100;
}

.halloween-1 {
  top: -60px;
  left: 40px;
}

.halloween-2 {
  right: 0;
  top: 28px;
}
.halloween-3 {
  top: 30px;
  right: -12px;
}
.halloween-4,
.halloween-5 {
  display: flex;
  justify-content: center;
}

.black-friday-1 {
  top: 30px;
  right: 0;
}

.black-friday-2 {
  top: 5px;
  right: 0;
}

.black-friday-3 {
  top: -10px;
  right: 0;
}

.christmas-1 {
  margin-top: -15px;
}
.christmas-3 {
  margin-top: -10px;
}

.christmas-2 {
  top: 15px;
  right: 0;
}