/* ---------------- VALUES TO SET START ---------------- */
:root {
  --noss_green: #02d869;
  --noss_best_value: #007dc0;
  --noss_most_popular: #39aa03;
  --noss_best_value_color: #fff;
  --noss_most_popular_color: #fff;
  /* sub / non-sub radio buttons */
  --noss_radio_bg: #38ab0330;
  --noss_radio_color: #19171fbf;
  /* activated radio button */
  --noss_selected_radio_bg: var(--noss_bg_color);
  --noss_selected_radio_color: #2e2a39bf;
  /* section text colour */
  --noss_color: #2e2a39; 
  /* section background colour */
  --noss_bg_color: #fff; 
  /* quantity section colours */
  --noss_quantity_border_color: #EFEFEF;
  --noss_quantity_selected_border_color: #39aa03;
  /* free product list colours */
  --noss_free_border_color: #39aa03;
  --noss_free_value_bg: #39aa03;
  --noss_free_value_color: #fff;
  /* product advantage icon colour */
  --noss_advantage_icon: #39aa03;
  --noss_button_bg: #000;
  --noss_button_colour: #fff;
  --noss_button_hover_bg: #1f1f1f;
  --noss_button_hover_colour: #fff;
}
/* product information modal */
.osbb_pip {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: #00000080;
	display: flex;
	align-items: center;
	justify-content: center;
}
.osbb_pip_content {
	width: 440px;
	max-width: 100%;
	box-shadow: 0 0 #0000, 0 1.8px 5.8px #0000000b, 0 3.9px 11.7px #0000000d, 0 6.7px 18px #0000000e, 0 11.5px 25.3px #0000000f, 0 22.6px 35.9px #00000010;
	background-color: #fff;
  border-radius: 8px;
	position: relative;
  padding-top: 15px;
}
.osbb_pip_i_w {
	background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px 8px 0 0;
  height: 200px;
  width: 100%;
  max-width: 100%;
}
.osbb_pip_text {
	padding: 1rem;
	gap: .65rem;
	display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.5rem 2rem 1rem;
}
.osbb_pip_text p {
	margin: 0;
}
.osbb_pip_text p.t {
	font-size: 1rem;
  font-weight: 900;
	line-height: 1.2;
}
.osbb_pip_text p.st {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.2;
}
.osbb_pip_text p.d {
	font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
}
.osbb_pip_text p.in {
	font-size: 0.65rem;
  font-weight: 400;
	line-height: 1.2;
}
.osbb_pip_text .osbb_pip_nl img {
	margin: 0 auto;
	width: 155px;
	max-width: 100%;
}
ul.pip_ul li {
  list-style-type: circle;
  list-style-position: inside;
}
.osbb_pip_close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  background-color: #362F59;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
}
/* product information modal */
.new_order_selection_strip {
  //font-family: 'Gilroy';
  font-size: 14px;
  margin-top: 12px;
  color: var(--noss_color);
  border-radius: 10px;
}
.noss_shadow {
  background-color: var(--noss_bg_color);
  box-shadow: #959da533 0 8px 24px;
  border-radius: 10px;
}
.noss_radio_bg {
  background: var(--noss_selected_radio_bg);
  color: var(--noss_selected_radio_color);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border-radius: 10px 0 0 0;
}
.noss_radio_bg.noss_selected {
  background-color: var(--noss_radio_bg);
  color: var(--noss_radio_color);
}
.noss_plan_radio {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-grow: 1;
  position: relative;
  padding: 12px 20px 12px 18px;
  font-family: inherit;
  font-size: 16px;
  background-color: var(--noss_radio_bg);
  color: var(--noss_radio_color);
  line-height: 1.25;
  border-radius: 10px 20px 0 0;
}
.noss_plan_radio.noss_selected {
  background: var(--noss_selected_radio_bg);
  color: var(--noss_selected_radio_color);
}
.noss_plan_radio input {
  width: 20px;
  height: 20px;
}
.noss_radio_bg:nth-child(2) {
  border-radius: 0 10px 0 0;
}
.noss_radio_bg:nth-child(2) .noss_plan_radio {
  padding: 10px 18px 10px 20px;
  border-radius: 0 10px 0 20px;
}

.sub_selected .sub {
  background-color: var(--noss_radio_bg);
  color: var(--noss_radio_color);
}
.sub_selected .sub .noss_plan_radio {
  background: var(--noss_selected_radio_bg);
  color: var(--noss_selected_radio_color);
  border-radius: 10px 20px 0 0;
}
.sub_selected .non_sub {
  background: var(--noss_selected_radio_bg);
  color: var(--noss_selected_radio_color);
}
.sub_selected .non_sub .noss_plan_radio {
  background-color: var(--noss_radio_bg);
  color: var(--noss_radio_color);
  border-radius: 0 10px 0 20px;
}

.non_sub_selected .sub {
  background: var(--noss_selected_radio_bg);
  color: var(--noss_selected_radio_color);
}
.non_sub_selected .sub .noss_plan_radio {
  background-color: var(--noss_radio_bg);
  color: var(--noss_radio_color);
  border-radius: 10px 0 20px 0;
}
.non_sub_selected .non_sub {
  background-color: var(--noss_radio_bg);
  color: var(--noss_radio_color);
}
.non_sub_selected .non_sub .noss_plan_radio {
  background: var(--noss_selected_radio_bg);
  color: var(--noss_selected_radio_color);
  border-radius: 20px 10px 0 0;
}

.noss_mark {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  padding: 6px 5px 5px 5px;
  background: var(--noss_most_popular);
  color: white;
  font-size: 11px;
  border-radius: 5px 0 5px 0;
  line-height: 1;
  font-weight: 500;
  user-select: none;
}
.noss_quantity_wrapper {
  display: flex;gap:8px;
}
.noss_quantity {
  text-align: center;
  border-radius: 8px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.noss_popularity {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  border-radius: 6px;
  background-color: var(--noss_most_popular);
  color: var(--noss_most_popular_color);
  padding: 5px 0 15px;
  width: 100%;
  display: block;
  margin-bottom: -10px !important;
}
.noss_popularity.noss_p_best_value {
  background-color: var(--noss_best_value);
  color: var(--noss_best_value_color);
}
.noss_quantity > div {
  text-align: center;
  border: 3px solid var(--noss_quantity_border_color);
  border-radius: 8px;
  position: relative;
  padding: 10px 2px 15px;
  z-index: 1;
  background-color: var(--noss_bg_color);
  flex-grow: 1;
}
.noss_quantity.noss_q_selected > div {
  border: 3px solid var(--noss_quantity_selected_border_color);
}
.noss_quantity:hover > div {
  border: 3px solid var(--noss_most_popular);
}
.noss_q_saving {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-50%, 50%, 0);
  background: #555;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  color: white;
}
.noss_free_wrapper {
  display: grid;
  grid-template-columns: repeat(var(--noss_free_columns), minmax(0px, 1fr));
  gap:16px;
}
.noss_free {
  text-align: center;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  justify-content: space-between;
  gap: 8px;
}
.noss_free_i_w {
  border-radius: 7px;
  position: relative;
  aspect-ratio: 1 / 1;
  display:flex;
  overflow: hidden;
}
.noss_free_value {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--noss_free_value_bg);
  color: var(--noss_free_value_color);
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
  border-radius: 100% 100% 0 0;
  padding: 10px 0px 2px;
  width: 45px;
}
.text_noss_green {
  color: var(--noss_green);
}
.noss_advantages {
  display: flex;
  align-content: center;
  justify-content: center;
  column-gap: 10px;
  row-gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
}
.noss_advantages > p {
  width: fit-content;
}
.noss_advantages svg {
  color: var(--noss_advantage_icon);
}
.noss_advantages span {
  vertical-align: text-top;
  line-height: 1;
  display: inline-block;
}
.noss_studies_text {
  font-size: 1rem;padding: 0.5rem 0px 1rem;
}
.noss_delivery_text {
  display: flex;
  gap: 5px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px !important;
  align-items: center;
}
@keyframes noss_button_animation {
  0% {
    left: -20%;
  }
  100% {
    left: 100%;
  }
}
.noss_button {
  background-color: var(--noss_button_bg);
  color: var(--noss_button_colour);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  padding: 18px 20px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 19px;
  cursor: pointer;
  position: relative;
}
.noss_button:hover,.noss_button:active,.noss_button:focus {
  background-color: var(--noss_button_hover_bg);
  color: var(--noss_button_hover_colour);
}
.noss_button:before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 7%;
  height: 100%;
  background: #ffffff7f;
  transform: skew(-40deg);
  filter: blur(5px);
  animation: noss_button_animation 3s linear infinite;
  z-index: 1;
}
@media all and (min-width: 1200px) and (max-width: 1499px) {
  .noss_free_wrapper {
    gap:10px;
  }
}
@media all and (min-width: 1024px) and (max-width: 1199px),  (max-width: 499px) {
  .noss_plan_radio {
    font-size: 13px;
    padding: 15px 10px;
  }
  .noss_plan_radio input {
    width: 16px;
    height: 16px;
  }
  .noss_radio_bg:nth-child(2) .noss_plan_radio {
    padding: 10px 10px;
  }
  .noss_quantity_wrapper {
    gap: 4px;
  }
  .noss_quantity {
    font-size: 12px;
  }
  .noss_popularity {
    font-size: 10px;
  }
  .noss_q_saving {
    font-size: 10px;
  }
  .noss_section_title {
    font-size: 13px;
  }
  .noss_free_wrapper {
    gap:6px;
  }
  .noss_free {
    font-size: 10px;
  }
  .noss_free_value {
    font-size: 11px;
  }
  .noss_advantages {
    column-gap: 8px;
    row-gap: 8px;
    font-size: 11px;
  }
  .noss_studies_text {
    font-size: 14px;
  }
  .noss_delivery_text {
    gap: 4px; font-size: 14px;
  }
}
@media all and (max-width: 399px) {
  .noss_free_wrapper {
    grid-template-columns: repeat(var(--noss_free_columns_sm), minmax(0px, 1fr));
  }
}