/* =====================================================
   DESKTOP BUNDLE CSS - Table of Contents
   =====================================================
   1.  Cart Page                    (line ~15)
   2.  Cart Widget                  (line ~330)
   3.  Checkout                     (line ~380)
   4.  Collections                  (line ~910)
   5.  Header & Navigation          (line ~1090)
   6.  Skeleton Loaders             (line ~1330)
   7.  Homepage                     (line ~1510)
   8.  Product Page                 (line ~1700)
   9.  Thank You Page               (line ~2830)
   10. Upsell                       (line ~2840)
   11. User Page (Login/Register)   (line ~2870)
   12. Wishlist                     (line ~3100)
   13. Page Builder (Rows/Columns/Accordion/Testimonials/Media) (~3540)
   14. Support Box                 (line ~3850)
   15. Popups & Modals              (line ~4020)
   16. Comparison Table             (line ~4270)
   17. Facebook Post Slider         (line ~4320)
   18. Before/After Slider          (line ~4420)
   19. Header Layout RTL/LTR Fix    (line ~4525)
   20. Product Page Layout RTL/LTR  (line ~4650)
   ===================================================== */

/* =====================================================
   1. CART PAGE
   ===================================================== */

/* Price Animation Effects */
#End_Price,
#end_price_2,
#saveing_1,
#saveing_2 {
  transition: transform 0.15s ease-out, color 0.15s ease-out;
  display: inline-block;
}

.price-animating {
  color: #2563eb !important;
}

.price-updated {
  animation: priceUpdatePulse 0.3s ease-out;
}

@keyframes priceUpdatePulse {
  0% {
    transform: scale(1.15);
    color: #16a34a;
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
    color: inherit;
  }
}

/* Price going up effect (red flash) */
.price-increase {
  animation: priceIncrease 0.4s ease-out;
}

@keyframes priceIncrease {
  0% {
    color: inherit;
  }

  30% {
    color: #dc2626;
  }

  100% {
    color: inherit;
  }
}

/* Price going down effect (green flash) */
.price-decrease {
  animation: priceDecrease 0.4s ease-out;
}

@keyframes priceDecrease {
  0% {
    color: inherit;
  }

  30% {
    color: #16a34a;
  }

  100% {
    color: inherit;
  }
}


#title_collections_page {

  font-weight: bold;
}


#may_also_cart_title {

  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 0.25rem;
  display: flex;
  justify-content: center;
}

.cart_info_item>span {

  font-size: 1.6rem;
}

.cart_info_row {

  display: flex;
  width: 95%;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  border: 0.0625rem solid #3f3f3f;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  margin: 0 auto;


}

.cart_info_row::-webkit-scrollbar {
  display: none;
}

.cart_info_item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;


  font-weight: 600;
  font-size: 11px;
  color: #222;
  white-space: nowrap;
}


.cart_info_icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #222;
}

.cart_info_icon svg {
  width: 18px;
  height: 18px;
  display: block;
}







#button_cart_page {
  cursor: pointer;
  border: none;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 600;
  box-shadow: rgba(37, 42, 50, 0.32) 0 1px 4px 1px;
  border-radius: 0.375rem;
  color: white;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  min-height: 3rem;
  width: 80%;
}

#img_emty_cart {
  width: 16%;
  height: 130px;
}

#button_back_to_buy {
  cursor: pointer;
  border: none;
  line-height: 100%;
  letter-spacing: .02em;
  font-weight: 600;
  box-shadow: rgba(37, 42, 50, .32) 0 1px 4px 1px;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  padding: 8px 17px;
}


#button_cart_page_top {

  cursor: pointer;
  border: none;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 600;
  box-shadow: rgba(37, 42, 50, 0.32) 0 1px 4px 1px;
  border-radius: 0.375rem;
  color: white;
  font-size: 0.4rem;
  min-height: 1.58rem;
  width: 20%;

}

.ButtonDown_Quantity_cart_page {
  font-weight: bold;
  padding: 1%;
  border: 0.0625rem solid #dbdbdb;
  line-height: 1;
  height: 2vw;
  width: 2vw;
  color: black;
  vertical-align: middle;
  font-size: 0.675rem;
  letter-spacing: 0;
  border-style: solid;
  border-width: 0.0625rem;
  transition: none;
  background-color: #f6f6f6;
  border-top-right-radius: 0.2625rem;
  border-bottom-right-radius: 0.2625rem;
}

.ButtonUP_Quantity_cart_page {
  padding: 1%;
  border-top-left-radius: 0.2625rem;
  border-bottom-left-radius: 0.2625rem;
  font-weight: bold;
  border: 0.0625rem solid #dbdbdb;
  line-height: 1;
  height: 2vw;
  width: 2vw;
  color: black;
  vertical-align: middle;
  font-size: 0.675rem;
  letter-spacing: 0;
  border-style: solid;
  border-width: 0.0625rem;
  transition: none;
  background-color: #f6f6f6;
}

.Quantity_num {
  background-color: white;
  text-align: center;
  vertical-align: middle;
  border: 0.0625rem solid #dbdbdb;
  height: 2vw;
  width: 2vw;
  font-size: 0.875rem;
  border-width: 0.0625rem 0;
}




.cart_product_price {
  border-radius: 0.375rem;
  height: 2.5625rem;
  display: flex;
  gap: 0.1875rem;
  align-items: baseline;
}

#top_nave {
  position: relative;
  height: 40px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #222;
}

#closebtn_cart {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

#BottomBUTTOS {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  width: 100%;
  background: white;
  z-index: 1;
  position: fixed;
  bottom: 0vw;
}

.cart_product_title {
  font-size: 0.75rem !important;
  display: block;
  margin-bottom: 0.3125rem;
  line-height: 1.2;
  word-break: break-word;
}

.cart_product_optine {
  font-size: 0.75rem !important;
  display: block;
  margin-bottom: 0.3125rem;
  line-height: 1.2;
  word-break: break-word;
  cursor: pointer;
}

.modal-content_product {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  width: 75%;
}

.cart_X_button_back {
  width: 2vw;
  height: 2vw;
}

#like_share_ {
  padding-right: 3%;
}

/* =====================================================
   2. CART WIDGET (Slide-out / Modal)
   ===================================================== */
.u-inner-container-layout,
.u-container-layout>* {
  position: relative;
}

#gallery {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

}

#product_setting_images {
  width: 40%;
}

#atc_New {
  display: none;
}

h2 {
  font-weight: 400;
}

.adder_cart_first::after {
  background: rgba(0, 0, 0, 0.03);
  content: "";
  height: 586px;
  right: 0;
  position: absolute;
  top: 0;
  width: 355px;
  pointer-events: none;
}

.model_backgorund {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  position: fixed;
  bottom: 0%;
  display: none;
}

/* =====================================================
   3. CHECKOUT PAGE
   ===================================================== */
.in_checkout_header {
  display: flex;
  align-items: baseline;
  font-size: 15px;
  justify-content: space-between;
}

.checkout_header {
  margin: 0 auto;
  background: white;
  border-bottom: 1px solid #e5e5e5;
  height: 35px;
  padding: 0px 26% 0px 27%;
  color: #222;
  font-weight: 700;
  background-color: white;
}

/* השורה הראשונה */
.Payment_box_all>[class^="Box_Payment"]:first-of-type {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* השורה האחרונה */
.Payment_box_all>[class^="Box_Payment"]:last-of-type {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.Payment_box_all {
  margin-top: 4%;
  overflow: hidden;
  box-sizing: border-box;
}

.Payment_box_all>[class^="Box_Payment"] {
  padding: 0.5rem 1.0714rem;
  border: 1px solid #ddd;
}

.custom-radio_checkout span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  transition: border-width 0.15s ease-out,
    border-color 0.15s ease-out;
}

.custom-radio span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  transition: border-width 0.15s ease-out,
    border-color 0.15s ease-out;
}

.image_checkout_header {
  text-align: center;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

#back_to_cart {
  width: 2%;
  position: absolute;
  padding: 2%;
  right: 26%;
  display: block;
}

.Paypal_Style2 {
  width: 22%;
  padding: 0 2em;
  border-radius: 4px;
  padding-top: 14px;
  display: inline-table;
}

#express_payment_title {
  text-align: center;
}

.or_other_option:before,
.or_other_option:after {
  content: "";
  display: inline-block;
  border: 1px #e2e2e2 solid;
  width: 18%;
  margin: 0 10px;
  vertical-align: middle;
}

.or_other_option {
  margin-left: var(--x-spacing-base);
  margin-right: var(--x-spacing-base);
  text-align: center;
}

/* Center the loader */
#loader {
  position: fixed;
  display: none;
  top: 50%;
  left: 48%;
  z-index: 1000;
  width: 54px;
  height: 56px;
  border: 9px solid #cfcfcf;
  border-radius: 50%;
  border-top: 9px solid #3498db;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s;
}

@-webkit-keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }

  to {
    bottom: 0px;
    opacity: 1;
  }
}

@keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }

  to {
    bottom: 0;
    opacity: 1;
  }
}

#myDiv {
  display: none;
  text-align: center;
}

.error {
  border: 1px solid red;
}

.flex-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem;
}

.radio_payment {
  width: 1.125rem;
  height: 1.125rem;
  transition: all 0.2s ease-in-out;
  position: relative;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 0 #f4743c inset;
  -webkit-font-smoothing: inherit;
  background: transparent;
  line-height: normal;
  border: 0.0625rem solid #d9d9d9;
}

/* Hide site header on checkout page in desktop */
body:has(#hold_all) #dynamic_header {
  display: none !important;
}

/* Hide stray <br> spacing elements inside checkout on desktop - mobile keeps them */
#in_app:has(#hold_all) br {
  display: none !important;
}

#hold_all {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: none;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  align-items: stretch;
  box-sizing: border-box;
}

#hold_all>#cart_info {
  grid-column: 2;
  grid-row: 2 / span 2;
  background: #f5f5f5;
  padding: 5% 4% 5% 42%;
  min-height: 100%;
  box-sizing: border-box;
}

html[dir="ltr"] #hold_all>#cart_info {
  padding: 5% 42% 5% 4%;
}

#hold_all>#cart_info>.container {
  padding: 0;
  background: transparent;
  border: none;
  width: 100%;
}

#hold_all>#form_column {
  grid-column: 1;
  grid-row: 2 / span 2;
  padding: 40px 60px;
  box-sizing: border-box;
  max-width: 620px;
  margin-right: auto;
  margin-left: 0;
  width: 100%;
}

html[dir="ltr"] #hold_all>#form_column {
  margin-left: auto;
  margin-right: 0;
}

#hold_all>#cart_info .container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
  border: none;
  background: transparent;
}

#hold_all>#cart_info #content.content {
  display: block !important;
  opacity: 1 !important;
}

/* Hide the collapse/expand toggle inside cart_info on desktop - summary is always open */
#hold_all>#cart_info .flex-text {
  display: none !important;
}

/* Improve proportions of product rows in the desktop cart summary */
#hold_all>#cart_info .cart_product_title {
  font-size: 0.9375rem !important;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #202223;
}

#hold_all>#cart_info .cart_product_optine {
  font-size: 0.8125rem !important;
  color: #6b7177;
  margin-bottom: 0;
}

#hold_all>#cart_info .cart_product_price {
  height: auto;
  gap: 0.375rem;
  align-items: baseline;
}

#hold_all>#cart_info .cart_product_price span {
  font-size: 0.875rem !important;
}

/* Discount code input + button - proper proportions on desktop */
#hold_all>#cart_info #discount_input_button {
  display: flex !important;
  gap: 10px;
  align-items: stretch !important;
  justify-content: flex-start !important;
  margin: 16px 0;
  width: 100%;
}

#hold_all>#cart_info #discount_input_button .form-group {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

#hold_all>#cart_info #discount_input_button .form-group p {
  margin: 0;
  width: 100%;
}

#hold_all>#cart_info #discount_input_button .Discount_Code {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 5px;
  font-size: 14px;
  background: #fff;
}

#hold_all>#cart_info #discount_input_button>div:last-child {
  flex: 0 0 auto;
}

#hold_all>#cart_info #discount_button {
  height: 44px;
  min-width: 80px;
  padding: 0 18px;
  border-radius: 5px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

/* Unified cart totals (subtotal / shipping / discount / total) */
#hold_all>#cart_info #cart_totals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #dcdcdc;
}

#hold_all>#cart_info .cart_totals_row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  color: #222;
  font-size: 14px;
}

#hold_all>#cart_info .cart_totals_label {
  flex: 0 1 auto;
}

#hold_all>#cart_info .cart_totals_value {
  flex: 0 0 auto;
  font-size: 16px;
  color: #000;
  direction: ltr;
  unicode-bidi: isolate;
}

#hold_all>#cart_info .cart_totals_value_discount,
#hold_all>#cart_info .cart_totals_value_discount .Symbol {
  color: #e22222 !important;
}

#hold_all>#cart_info .cart_totals_row_total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid #dcdcdc;
  font-size: 16px;
}

#hold_all>#cart_info .cart_totals_row_total .cart_totals_label {
  font-weight: 600;
  font-size: 16px;
  color: #000;
}

#hold_all>#cart_info .cart_totals_row_total .cart_totals_value {
  font-size: 22px;
  font-weight: 600;
  color: #000;
}

/* Narrower + slightly taller PayPal button on desktop checkout */
#hold_all .Paypal_Style2 {
  width: 55%;
  padding: 0;
  margin: 0 auto;
}

#hold_all #Card_Box2 {
  height: auto;
  padding-top: 0;
  text-align: center;
}

#hold_all #paypal-button-container2 .paypal-buttons {
  min-height: 45px !important;
  height: 45px !important;
}

/* Breathing room between "תשלום מהיר" title and the PayPal button */
#hold_all #express_payment_title {
  margin-bottom: 18px;
  font-weight: 600;
}

/* "או" divider - stripes span the full width of the column */
#hold_all .or_other_option {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  width: 100%;
}

#hold_all .or_other_option:before,
#hold_all .or_other_option:after {
  content: "";
  display: block;
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  border-top: 1px solid #e2e2e2;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

#hold_all .or_other_option span {
  flex: 0 0 auto;
  color: #737373;
  font-size: 14px;
}

#hold_all>#logo_top {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex !important;
  justify-content: center;
  align-items: center;
  direction: ltr;
  margin: 0;
  padding: 20px 60px;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
  text-align: center !important;
  width: 100%;
}

#hold_all>#logo_top .logo {
  text-align: center !important;
  flex: 0 0 auto;
}

#hold_all>#logo_top #closebtn {
  display: none;
}

.container {
  align-items: center;
  cursor: pointer;
  background: #fafafa;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  width: 50%;
  margin: auto;
  padding: 0.2%;
}

#Form_all {

  border-radius: 4px;
  padding-top: 14px;
  margin-right: auto;
  margin-left: auto;
}

/* Container styling */
.container_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 27%;
}

.right-img {
  max-width: 100px;
}

#discount_button {
  cursor: pointer;
  background-color: #1773b0;
  color: white;
  border-radius: 6px;
  padding: 21%;
}

.product-thumbnail__quantity {
  border-radius: 1.75em;
  z-index: 1;
  background-color: rgba(114, 114, 114, 0.9);
  color: #fff;
  padding: 0 0.5833rem;
  bottom: -0.75rem;
  position: relative;
  left: 0;
}

.content {
  padding: 0% 7%;

}


#cvv_and_date {
  display: flex;
  gap: 12px;
  align-items: center;
}

#cvv_and_date>div {
  flex: 1 1 0;
  min-width: 0;
}

#cvv_and_date .form-group,
#cvv_and_date .form-group input {
  width: 100% !important;
  box-sizing: border-box;
}


.Full_name,
.First_name,
.Last_name,
.Email,
.Address,
.State,
.Phone,
.Zip,
.City,
#cardnumber,
#cvv {
  position: relative;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 27px 17px 15px 22px;
}

#discount_input_button .form-group p {
  position: relative;
  margin: 0;
}

#expiration-date-input,
#Card_id,
.Discount_Code {
  border-radius: 8px;
  padding: 27px 17px 15px 22px;
  width: 100%;
  box-sizing: border-box;
}

.Country {
  font-weight: bold;
}

.ship_cost_checkout {
  width: 18px;
  height: 18px;
  transition: all 0.2s ease-in-out;
  position: relative;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 0 #f4743c inset;
  -webkit-font-smoothing: inherit;
  background: transparent;
  line-height: normal;
  border: 1px solid #d9d9d9;
}

.Box_Ship {
  justify-content: space-between;
  display: flex;
  height: 2.8125rem;
  align-items: center;
  background-color: #fff;
  padding: 0 1.0714rem;
  border: 1px solid #ddd;
}

.shipping_box {
  margin-top: 4%;
  overflow: hidden;
  box-sizing: border-box;
}

/* השורה הראשונה */
.shipping_box .just_Box_Ship:first-of-type .Box_Ship {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* השורה האחרונה */
.shipping_box .just_Box_Ship:last-of-type .Box_Ship {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

#State_zip {
  display: flex;
  gap: 16px;
  align-items: end;
}

#State_zip>div {
  float: none !important;
  flex: 1 1 0;
  min-width: 0;
}

.custom-select-wrapper,
#State,
.Zip {
  width: 100%;
}

.Box_Payment {
  background-color: rgb(240, 245, 255);
  width: 100%;
  height: 3.428571em;
  padding: 0 1.0714285714em;
  border-radius: 4px;
  border: 1px solid #c1c1c1;
  display: inline-table;
  box-sizing: border-box;
}

.credit_card_text {
  white-space: nowrap;
}

.card-icons .pay-icon {
  height: 20px;
  width: auto;
  margin-right: 0;
  /* ננהל מרווח עם gap של flex */
  flex-shrink: 1;
  /* מותר להתכווץ */
}



.card-icons {
  padding: 0;
  width: auto;
  /* במקום 50% */
  display: flex;
  /* כדי שהאייקונים יהיו בשורה */
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  /* לא לשבור שורה */
}


.Box_Payment_text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;

}



#Box_Payment2_text {
  display: flex;
  align-items: center;
  padding: 2%;
  padding-top: 3%;
}

.text_and_icon_card {
  display: flex;
  align-items: center;
}

#ship_hide_show {

  align-items: baseline;
  color: #222;
  display: flex;
  justify-content: space-between;
}

#Card_Box2 {
  text-align: center;
  height: 3.428571em;
  width: 100%;
  border-radius: 4px;
  padding-top: 14px;
  display: inline-table;
  box-sizing: border-box;
}

#Card_Box {
  background: #f7f7f7;
  width: 100%;
  padding: 3%;
  border-radius: 4px;
  padding-top: 14px;
  border: 1px solid #c1c1c1;
  display: inline-table;
  box-sizing: border-box;
}

#Card_Box>div {
  margin-bottom: 14px;
}

#Card_Box>div:last-child {
  margin-bottom: 0;
}

#Card_Box br {
  display: none;
}

#Card_Box {
  margin-bottom: 10%;
}

.Box_Payment2 {
  width: 100%;
  padding: 0 1.0714285714em;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #c1c1c1;
  display: inline-table;
  box-sizing: border-box;
}

#checkout_summery_text {
  display: inline;
  color: #0078e1;
}

.form-group {
  position: relative;
}

/* RTL (Hebrew) - label on right side */
html[dir="rtl"] .form-group label {
  left: auto;
  right: 17px;
}

/* LTR (English) - label on left side */
html[dir="ltr"] .form-group label {
  right: auto;
  left: 17px;
}

#zip_city {

  display: flex;
  gap: 12px;
  align-items: center;

}

#zip_city>div {
  flex: 1 1 0;
  min-width: 0;
}

#zip_city .form-group,
#zip_city .form-group input {
  width: 100%;
  box-sizing: border-box;
}

/* Phone input (intl-tel-input) - full width on desktop */
#hold_all #Form_all .iti,
#hold_all #Form_all .iti__tel-input {
  width: 100% !important;
  box-sizing: border-box;
}

#hold_all #Form_all #phone_number {
  width: 100%;
  box-sizing: border-box;
}

/* Section titles - bigger on desktop checkout */
#hold_all #Form_all #info_title_text,
#hold_all #Form_all #address_title_text,
#hold_all #Form_all #ship_title_text,
#hold_all #Form_all #payment_title_text {
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 0 12px 0 !important;
  color: #202223;
}


.form-group label {
  position: absolute;

  transform: translateY(120%);
  color: #999;
  pointer-events: none;
  transition: all 0.3s;
}

.form-group input:focus+label,
.form-group input:not(:placeholder-shown)+label {
  transform: translateY(0%);
  font-size: 0.8rem;
  color: #333;
}

#buy_from_us_checkout {
  direction: rtl;
  padding: 10%;
}

#title_buy_from_us_checkout {
  text-align: center;
  font-size: 40px;
}

.show_line_buy_from_us_checkout {
  display: flex;
  gap: 3%;
  align-items: center;
}

.show_line_buy_from_us_checkout>svg {
  width: 5%;
  fill: #4D990D;
}

/* =====================================================
   4. COLLECTIONS PAGE
   ===================================================== */
#filter_title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0% 5% 0% 2%;
}


/* products_container*/
.products_container_title_and_price {
  text-align: left;
  padding: 2% 11%;
}

.products_container_title {

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 3%;
}

.products_container_title>a {
  color: black;
  text-decoration: none;
  font-size: 12px;
}

.symbole_code_show,
.dot_number {
  font-size: 12px;
}

.products_container_price_price_itself {
  font-size: 16px;
  font-weight: bold;
}

.products_container_image_image {
  width: 93% !important;
  height: 500px;
  border-radius: 4%;
  object-fit: cover;
}

/* ═══ Grid Color Options ═══ */
.grid-color-options {
  display: flex;
  gap: 6px;
  padding: 6px 4px 2px;

}

.grid-color-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #e0e0e0;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
  flex-shrink: 0;
}

.grid-color-circle:hover {
  transform: scale(1.15);
  border-color: #999;
}

.grid-color-circle.active {
  border-color: #333;
  border-width: 2px;
}

/* ═══ End Grid Color Options ═══ */

/* Spacing before footer when no may_also_like */
#in_app {
  padding-bottom: 60px;
}

/* No bottom padding on checkout page */
#in_app:has(#hold_all) {
  padding-bottom: 0;
}

/* may_also_like */
.may_also_like_wrapper {
  background-color: #fdfdfd;
}

.may_also_like_heading {
  font-size: 1.4rem;
  font-weight: 600;
  padding: 1.25rem 1.25rem 0.25rem;
  letter-spacing: 0.02em;
}

/* may_also_like end */

.products_container {
  display: grid;
  grid-template-columns: repeat(5, 20%);
  padding: 1.25rem;
}

#cart_adder {
  height: 1.125rem;
  width: 100%;
}

.products_container_price {
  justify-content: space-between;
  display: flex;
  align-items: center;
  flex-flow: row-reverse;
}

/* products_container end */
/*body*/
#filter {
  height: 1%;
  background-color: white;
}

#filter_products {
  display: flex;
  align-items: baseline;
}

.u-product-title-link,
.image_product_down,
.title_may_also_like {
  font-size: 12px !important;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0px 0px 0px 0px;
  color: black;
}

.u-align-center.u-product-control.u-text.u-text-1 {
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0;
  white-space: nowrap;
  text-align: left;
}

.close-button {
  position: absolute;
  top: 0.625rem;
  border: none;
  padding: 0.3125rem 0.625rem;
  border-radius: 0.3125rem;
  right: 3%;
  cursor: pointer;
  color: black;
}

#modal_widget_add_to_cart_button {
  cursor: pointer;
  display: block;
  border: none;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-weight: 500;
  position: relative;
  box-shadow: rgba(37, 42, 50, 0.32) 0 1px 4px 1px;
  border-radius: 4px;
  color: rgb(246, 249, 254);
  font-size: 20px;
  padding: 15px 30px;
}

#modal_widget_index_count_cart {
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  padding: 5px;
  text-align: center;
}

/* =====================================================
   5. HEADER & NAVIGATION
   ===================================================== */
.img_icon_in_menu {
  width: 33px;
  height: 33px;
  display: inline;
  margin-top: 2%;
}

#cart_button {
  width: 30px;
  height: 29px;
  display: inline;
}




#main_page_product {
  margin-top: 2rem;
}


.header-text {
  margin-top: 6% !important;
}

.header-not-exists {
  margin-top: 0% !important;
}

#hart_icon_button {
  border: none;
  cursor: pointer;
  width: 100%;
  background-color: transparent;
  outline: none;
}

#user_icon_button {
  border: none;
  cursor: pointer;
  width: 100%;
  background-color: transparent;
  outline: none;
}

#search_icon_img {
  width: 30px;
  height: 29px;
  display: inline;
}

#search_icon_button {
  justify-content: flex-end;
  display: flex;
  border: none;
  cursor: pointer;
  width: 100%;
  background-color: transparent;
  outline: none;
}

.menu {
  white-space: nowrap;
}

.u-nav-container .u-nav-item:hover>.u-nav-popup:not(.fake) {
  visibility: visible;
  pointer-events: auto;
}

#cart_icon_number {
  border-radius: 100%;
  position: absolute;
  color: #ffffff;
  top: 0;
  transform: translate(20%, 0%);
  z-index: 1;
  width: calc(1em + 3px);
  height: calc(1em + 3px);
  line-height: calc(1em + 2px);
  text-align: center;
  vertical-align: baseline;
  box-sizing: content-box;
}

#cart_icon_number2 {
  border-radius: 100%;
  position: absolute;
  transform: translate(-50%, -20%);
  z-index: 1;
  width: calc(1em + 3px);
  height: calc(1em + 3px);
  line-height: calc(1em + 2px);
  text-align: center;
  vertical-align: baseline;
  box-sizing: content-box;
}

.u-icon-circle {
  border-radius: 50%;
}

.u-nav-link {
  display: block;
  color: black;
  white-space: nowrap;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-style: inherit;
  font-weight: inherit;
  text-decoration: none;
  border: 0 none transparent;
  outline-width: 0;
  background-color: transparent;
  margin: 0;
  -webkit-text-decoration-skip: objects;
}

.header_container {
  height: 82px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.u-header .u-nav-1 {
  font-size: 1rem;
  letter-spacing: 0px;
}

.menu-collapse {
  display: none;
  border: none;
  z-index: 1;
}

#myHeader {
  position: relative !important;
  top: auto !important;
  box-shadow: rgb(197, 199, 210) 0px 0px 28px 1px;
  width: 100%;
}


.u-nav {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.u-menu,
.u-popupmenu-items {
  display: table;
  white-space: nowrap;
  position: relative;
  line-height: 1;
}

.u-nav-container .u-nav-popup {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  left: 34px;
  background-color: white;
  width: 500px;
}

.u-nav-item {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  padding: 0;
  margin: 0;
}

.u-inner-container-layout {
  display: none;
}

.modal_widget_thumbnails {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 500px;
  padding: 10px;
  width: 100px;
}

.modal_widget_thumbnails img {
  width: 80px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  object-fit: contain;
}

.modal_widget_thumbnails img:hover,
.modal_widget_thumbnails img.active {
  border: 2px solid #007bff;
}

.modal_widget_main-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal_widget_main-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

#modal_widget_product_setting_images {
  width: 38%;
}

.modal-container {
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 50%;
}

/* =====================================================
   6. SKELETON LOADERS (Loading Placeholders)
   ===================================================== */
/* Base skeleton loader style */
.skeleton_checkout_header_1 {
  width: 10%;
  height: 20px;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton_checkout_header_2 {
  width: 20%;
  height: 20px;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton_checkout_header_3 {
  width: 10%;
  height: 20px;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton_checkout_summery_text {
  width: 25%;
  height: 20px;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton_checkout_arrow {
  width: 10%;
  height: 20px;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton_checkout_input_city_zip {
  border-radius: 8px;
  font-weight: bold;
  padding: 28px 17px 6px 22px;
  width: 50%;
  box-sizing: border-box;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton_checkout_input {
  border-radius: 8px;
  font-weight: bold;
  padding: 28px 17px 6px 22px;
  width: 100%;
  box-sizing: border-box;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton_checkout_button {
  cursor: pointer;
  letter-spacing: .02em;
  border-radius: 4px;
  color: rgb(246, 249, 254);
  font-size: 20px;
  padding: 15px 30px;
  box-sizing: border-box;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
  width: 56%;
  margin: auto;
}

.skeleton__button_cart {
  width: 50%;
  transform: scaleX(-1);
  margin-left: 0;
  margin-right: 0;
  height: 35px;
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}

.skeleton__text_cart {
  width: 12%;
  transform: scaleX(-1);
  margin-left: 0;
  margin-right: 0;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}

.skeleton__cart_closebtn {
  width: 20%;
  transform: scaleX(-1);
  margin-left: 0;
  margin-right: 0;
  height: 36px;
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}

/* Specific styles for skeleton shapes */
.skeleton__wishlist_img {
  right: 10px;
}

.modal_widget_skeleton__image {
  margin-right: 0%;
  margin-left: 0%;
  height: 193px;
  width: 161px;
  object-fit: contain;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.modal_widget_skeleton__image_gallery {
  margin-right: 0%;
  margin-left: 0%;
  height: var(--product-img-h, 100vw);
  max-height: var(--product-img-mh, 100vh);
  width: 100%;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

/* Shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -100px 0;
  }

  100% {
    background-position: 100px 0;
  }
}

.skeleton__thank_you_page_text {
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}

.skeleton__thank_you_page_text_2 {
  height: 20px;
  width: 30px;
  text-align: left;
  direction: rtl;
  padding-left: 4%;
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}

.skeleton__thank_you_page_text_3 {
  height: 20px;
  width: 60px;
  text-align: left;
  direction: rtl;
  padding-left: 4%;
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}

.skeleton_thank_you_page_image {
  display: flex;
  width: 4%;
  height: 7%;
  margin: auto;
  margin-top: 7%;
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}

/* skeleton  end*/
/* =====================================================
   7. HOMEPAGE
   ===================================================== */
/* Base skeleton loader style */
.skeleton__text {
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}

/* Specific styles for skeleton shapes */
.skeleton__homepage_image {
  width: 100%;
  margin-top: 10%;
  height: 349px !important;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton_Category_image {
  border-radius: 69%;
  width: 56px;
  height: 56px;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton_products_container {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  justify-content: space-around;
  grid-gap: 5px;
  background-color: #fdfdfd;
  padding: 0% 3% 0% 2%;
}

.skeleton__title_product_collection {
  width: 100%;
  height: 20px;
  margin-bottom: 10px;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton__title {
  width: 40%;
  height: 20px;
  margin-bottom: 10px;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton__may_also_like_img {
  width: 100% !important;
  object-fit: contain;
  height: 221px;
  border-radius: 4%;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton__may_also_like_text {
  text-align: right;
  height: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  direction: rtl;
  margin-top: 11px;
  margin-bottom: 4%;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton__wishlist_img {
  width: 7%;
  height: 4%;
  position: absolute;
  left: 10px;
  cursor: pointer;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton__button_cart_product_page {
  padding: 15px 30px;
  width: 40%;
  height: 20px;
  margin-bottom: 10px;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton__image {
  margin-right: 0%;
  margin-left: 0%;
  height: var(--product-img-h, 100vw);
  max-height: var(--product-img-mh, 100vh);
  width: 100%;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton__circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.option-name-skeleton {
  display: flex;
  gap: 4px;
  width: 66px;
  height: 15px;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
  margin-top: 10px;
  margin-bottom: 10px;
}

.skeleton__size {
  width: 28px;
  height: 28px;
  border-radius: 42%;
  padding: 4px 4%;
  background-color: #e0e0e0;
  animation: shimmer 1.5s infinite;
}

.skeleton__line {
  width: 90%;
  height: 15px;
  margin-bottom: 8px;
}

/* Shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -100px 0;
  }

  100% {
    background-position: 100px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
}

/* skeleton  end*/
#scrollTopcart {
  right: 15px;
  z-index: 2;
  display: none;
  position: fixed;
  bottom: 25%;
  padding: 6px 7px;
  font-size: 24px;
  cursor: pointer;
  background-color: white;
  color: white;
  border: none;
  border-radius: 40%;
}

.text_Category_box {
  max-width: 6em;
  display: block;
  word-wrap: break-word;
  text-align: center;
}

.Category_image {
  border-radius: 69%;
  width: 100px;
  height: 100px;
}

#homepage_image {
  width: 100%;
  margin-top: -2%;
}

.image_category {
  width: 100%;
  height: 285px;
  box-shadow: rgba(37, 42, 50, 0.32) 0 1px 4px 1px;
}

/* =====================================================
   8. PRODUCT PAGE
   ===================================================== */
.option-button.selected {
  border: 1px solid rgb(0, 0, 0);
}

.option-button {
  border: 1px solid #e5e5e5;
  cursor: pointer;
  padding: 4px 4%;
  font-size: 16px;
  margin-bottom: 0.213333rem;
  border-radius: 42%;
  text-align: center;
}

.new-options {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
  padding-left: 2%;
}

.option-name {
  display: flex;
  gap: 4px;
}

.color-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
  padding-left: 2%;
}

.option-name-select {
  font-weight: bold;
}

.color-circle.selected {
  border: 1px solid rgb(0, 0, 0);
  padding: 3px;
  border-radius: 50%;
}

.color {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
}

.size-options {
  flex-wrap: wrap;
  margin-top: 10px;
  display: flex;
  gap: 13px;
  align-items: center;
  padding-left: 2%;
}

.PC {
  width: 100%;
  margin-left: 0%;
}

.size-button {
  border: 1px solid #e5e5e5;
  cursor: pointer;
  padding: 4px 4%;
  font-size: 16px;
  margin-bottom: 0.213333rem;
  border-radius: 42%;
  text-align: center;
}

.size-button.selected {
  border: 1px solid rgb(0, 0, 0);
}

.gallery {
  display: flex;
  max-width: 800px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.thumbnails {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 500px;
  padding: 10px;
  width: 100px;
}

.thumbnails img {
  width: 80px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  object-fit: contain;
}

.thumbnails img:hover,
.thumbnails img.active {
  border: 2px solid #007bff;
}

.main-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.main-image img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}

.thumbnails::-webkit-scrollbar {
  width: 6px;
}

.thumbnails::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

#payment_method_site_images {
  align-items: center;
  display: flex;
  justify-content: center;
}

.wishlist_img {
  width: 6%;
  margin-left: auto;
  cursor: pointer;
  display: block;
}

.image_product_page_also_like_continter {
  text-align: center;
  padding: 0% 9%;
}

.product_page_also_like {
  display: grid;
  grid-template-columns: repeat(5, 20%);
}

.title_may_also_like {
  color: black !important;
}

.image_product_down {
  line-height: 1.2;
  margin-top: 20px;
  margin-bottom: 20px;
}

#question {
  box-shadow: 0 0 10px #aeaeae;
  margin: auto;
  padding: 4%;
  width: 50%;
}

#product_setting {
  width: 30%;
}


#button_add_to_cart {
  margin-top: 10px;
  cursor: pointer;
  width: 100%;
  display: block;
  border: none;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-weight: 600;
  border-radius: 14px;
  outline: none;
  color: white;
  font-size: 20px;
  padding: 16px 30px;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.32);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
#button_add_to_cart:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.36);
}

#button_add_to_cart_upsell {

  margin-top: 10px;
  border: 2px solid #00000000 !important;
  cursor: pointer;
  line-height: 1.2;
  letter-spacing: 0.02em;
  box-shadow: rgba(37, 42, 50, 0.32) 0 1px 4px 1px;
  border-radius: 4px;
  outline: none;
  color: white !important;
  width: 100%;
  border-radius: 10px;
  font-size: 23px;
  padding: 14px 20px;
  font-weight: 700;
  cursor: pointer;

}

#thumbnails {
  display: flex;
  align-items: center;
  overflow-y: auto;
}

#thumbnails img {
  max-width: 100px;
  max-height: 100px;
  margin: 5px;
  cursor: pointer;
}

/* For Webkit browsers (Chrome, Safari, etc.) */
#thumbnails::-webkit-scrollbar {
  scrollbar-width: auto;
}

#thumbnails::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

#index-count-proudct-page {
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  padding: 5px;
  text-align: center;
}

.img_cart_product {
  height: 4vw;
  width: 4vw;
  object-fit: fill;
  border-radius: 13%;
  margin: 0;
}

#paypal-button-container {
  width: 100%;
  color: white;
  font-size: 17px;
  padding: 14px 0px 0px 0px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;

  z-index: 1;
  position: relative;


}

.cart_product_outside_cart_page {
  padding: 0.2vw 3vw 0.2vw 3vw;
}

#scrollTopBtn {
  right: 15px;
  z-index: 0;
  position: fixed;
  bottom: 7vw;
  display: none;
  cursor: pointer;
  background-color: #949494;
  color: #ffffff;
  border: none;
  border-radius: 25%;
  width: 2vw;
  height: 2vw;
}

#scrollTopBtn_arrow {
  transform: rotate(-90deg);
  font-size: 1.5rem;
  text-align: center;
  font-weight: bold;
}

#cart_floating {
  width: 1.5vw;
  height: 1.5vw;
}

#index-count {
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  padding: 5px;
  text-align: center;
}

.modal_backgorund {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  bottom: 0%;
  display: none;
  z-index: 9999;
}

.support_icon_image_svg {
  display: flex;
  align-items: center;
  margin-bottom: 7px;
  gap: 2%;
}

.support_icon_image:hover {
  transform: scale(1.05);
}

.support_icon_image_svg svg {
  width: 30px;
  height: 30px;
}

.support_icon_text {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.divider {
  font-size: 32px;
  color: #ccc;
}

#popupOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9998;
}

#emailPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 350px;
  background: #ffffff;
  z-index: 9999;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: none;
  animation: popup-bounce 0.6s ease;
}

.popup-email-content h3 {
  margin-top: 0;
}

.popup-email-content input {
  width: 100%;
  padding: 10px;
  margin-top: 12px;
  margin-bottom: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.popup-email-content button {
  width: 100%;
  padding: 10px;
  background-color: #1C1C1C;
  color: white;
  border: none;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
}

.close-email-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 22px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-5px);
  }

  100% {
    transform: translateX(0);
  }
}

#exitPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 350px;
  background: white;
  z-index: 9999;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  text-align: center;
  display: none;
}

.exit-popup-content {
  animation: popup-fade-scale 0.4s ease-out;
}

.exit-popup-content h3 {
  margin-top: 0;
  font-size: 20px;
}

.exit-popup-content p {
  font-size: 16px;
  margin: 10px 0 20px 0;
}

.exit-popup-content button {
  padding: 10px 20px;
  background-color: #1C1C1C;
  color: white;
  border: none;
  font-size: 16px;
  border-radius: 10px;
  cursor: pointer;
}

.exit-close-btn {
  position: absolute;
  top: 10px;
  left: 15px;
  font-size: 22px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}

/* offer css */
.bundle-box {
  border: 1px solid #ddd;
  padding: 16px;
  background: #fff;
}

.offer_product {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 2%;
}

.offer_product_img_wrap {
  position: relative;
  flex-shrink: 0;
  margin-right: 12px;
}

.offer_product_img_wrap img,
.offer_product img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

.offer-product-gallery-btn {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s;
}

.offer-product-gallery-btn:hover {
  background: rgba(255, 255, 255, 1);
}

.details {
  flex-grow: 1;
}

.name {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 4px;

  width: 80%;
}

.offer_price {
  font-size: 13px;
  color: #555;
  text-align: end;
}

.old-offer_price {
  text-decoration: line-through;
  color: #999;
}

.new-offer_price {
  color: #444;
  font-weight: bold;
}

.free-offer_price {
  color: #4CAF50;
  font-weight: bold;
}

.offer_divider {
  text-align: center;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 12px 0;
  position: relative;
}

.offer_plus-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #999;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}

.offer_total {
  border-top: 1px solid #eee;
  margin-top: 12px;
  padding-top: 8px;
  text-align: center;
}

.offer_total .offer_description {
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
  text-transform: uppercase;
  display: flex;
  justify-content: end;
}

.offer_total .offer_summary {
  font-size: 16px;
  font-weight: bold;
  display: FLEX;
  JUSTIFY-CONTENT: space-between;
}

.offer_total .offer_label {
  color: #333;
  margin-right: 6px;
}

.old-offer_total {
  text-decoration: line-through;
  color: #999;
  margin: 0 6px;
  font-size: 14px;
}

.final-offer_total {
  color: #000;
  font-weight: bold;
}

@keyframes zoomLoop {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.25);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.bogo-anim {
  font-size: 18px;
  font-weight: bold;
  color: #28a745;
  text-align: center;
  margin-top: 10px;
  display: none;
}

.bogo-anim.animate {
  display: block;
  animation: zoomLoop 1s ease-in-out infinite;
}

/* =============================================
   BOGO VERTICAL LAYOUT - .bundle-box-vertical
   Products displayed as side-by-side cards
   ============================================= */
.bundle-box-vertical {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.bundle-box-vertical .offer_product {
  flex: 1;
  min-width: 0;
  flex-direction: column;
  text-align: center;
  margin-bottom: 0;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 14px 10px;
  background: #fff;
}

.bundle-box-vertical .offer_product img {
  width: 80px;
  height: 80px;
  margin: 0 auto 10px;
  display: block;
}

.bundle-box-vertical .offer_product .details {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bundle-box-vertical .offer_product #name_and_price {
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px;
}

.bundle-box-vertical .offer_product .name {
  width: auto;
  text-align: center;
  font-size: 13px;
}

.bundle-box-vertical .offer_product .offer_price {
  text-align: center;
}

.bundle-box-vertical .offer_divider {
  display: none;
}

.bundle-box-vertical .offer_total {
  width: 100%;
  flex-shrink: 0;
}

.bundle-box-vertical .offer_options_container {
  width: 100%;
}

.bundle-box-vertical .color-options-offer,
.bundle-box-vertical .size-options-offer,
.bundle-box-vertical .new-options-offer {
  justify-content: center;
}

/* ═══════════════════════════════════════════════════
   BUNDLE GIFTS SECTION
   ═══════════════════════════════════════════════════ */
.bundle-gifts-section {
  margin-top: 12px;
  padding: 14px 16px;
  background: #f0fdf4;
  border-radius: 10px;
  border: 1px solid #bbf7d0;
}

.bundle-gifts-title {
  display: none;
  font-size: 15px;
  font-weight: 700;
  color: #16a34a;
  text-align: center;
  margin-bottom: 10px;
}

.bundle-gifts-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.bundle-gift-item {
  text-align: center;
  max-width: 90px;
}

.bundle-gift-img {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid #bbf7d0;
}

.bundle-gift-img-placeholder {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  background: #dcfce7;
  margin: 0 auto;
}

.bundle-gift-name {
  font-size: 12px;
  color: #333;
  margin-top: 5px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Follows the store direction on its own: RTL (Israel) → right, LTR → left. */
  text-align: start;
}

.bundle-gift-badge {
  display: inline-block;
  font-size: 10px;
  color: #fff;
  background: #16a34a;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 2px;
}

.bundle-gift-img-wrap {
  position: relative;
  display: inline-block;
}

.bundle-gift-gallery-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s;
  z-index: 2;
}

.bundle-gift-gallery-btn:hover {
  background: rgba(255, 255, 255, 1);
}

.bundle-gift-options {
  margin-top: 8px;
  width: 100%;
}

.bundle-gift-option-group {
  margin-bottom: 4px;
}

.bundle-gift-option-label {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  display: block;
  margin-bottom: 2px;
}

.bundle-gift-option-select {
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #333;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════
   GIFT DESIGN 2 - Attached below selected tier
   ═══════════════════════════════════════════════════ */
.bundle-gifts-inline {
  margin: -1px 0 8px 0;
  padding: 10px 14px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-top: 1px dashed #bbf7d0;
  border-radius: 0 0 10px 10px;
  animation: giftSlideDown .3s ease-out;
}

.bundle-gifts-inline .bundle-gifts-title {
  font-size: 13px;
  margin-bottom: 8px;
}

.bundle-gifts-inline .bundle-gifts-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.bundle-gifts-inline .bundle-gift-item {
  max-width: 80px;
}

.bundle-gifts-inline .bundle-gift-img {
  width: 60px;
  height: 60px;
}

@keyframes giftSlideDown {
  from {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  to {
    opacity: 1;
    max-height: 300px;
    padding-top: 10px;
    padding-bottom: 12px;
  }
}

/* ═══════════════════════════════════════════════════
   GIFT DESIGN 4 - Horizontal Cards
   ═══════════════════════════════════════════════════ */
.bundle-gifts-horizontal {
  margin-top: 12px;
  padding: 14px 16px;
  background: #f0fdf4;
  border-radius: 10px;
  border: 1px solid #bbf7d0;
}

.bundle-gifts-horizontal .bundle-gifts-title {
  font-size: 15px;
  font-weight: 700;
  color: #16a34a;
  text-align: center;
  margin-bottom: 10px;
}

.bundle-gifts-row-horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.bundle-gifts-row-horizontal .bundle-gift-card,
.bundle-gifts-row-horizontal .bundle-reward-card {
  flex: 1 1 auto;
  min-width: 0;
}

/* Admin opt-in: one card per row */
.bundle-gifts-mobile-stacked .bundle-gifts-row-horizontal {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}

.bundle-gifts-mobile-stacked .bundle-gifts-row-horizontal .bundle-gift-card,
.bundle-gifts-mobile-stacked .bundle-gifts-row-horizontal .bundle-reward-card {
  flex: 0 0 auto;
  width: 100%;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0;
  box-sizing: border-box;
}

.bundle-gifts-mobile-stacked .bundle-gifts-row-horizontal> :not(:first-child) {
  border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.bundle-gift-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px 14px;
  transition: box-shadow .2s;
}

.bundle-gift-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* RTL: keep the gift/reward image on the LEFT (match the LTR layout) — skip the column-layout cards */
html[dir="rtl"] .bundle-gift-card:not(.bundle-gift-card-vertical):not(.bundle-gift-teaser) {
  flex-direction: row-reverse;
}

.bundle-gift-card-img {
  position: relative;
  flex-shrink: 0;
}

.bundle-gift-card-img .bundle-gift-img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #bbf7d0;
}

.bundle-gift-card-img .bundle-gift-img-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: #dcfce7;
}

.bundle-gift-card-img .bundle-gift-gallery-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s;
  z-index: 2;
}

.bundle-gift-card-img .bundle-gift-gallery-btn:hover {
  background: rgba(255, 255, 255, 1);
}

/* Zoom button BELOW the image (small, not overlapping it) — horizontal cards only */
.bundle-gift-card:not(.bundle-gift-card-vertical) .bundle-gift-card-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bundle-gift-card:not(.bundle-gift-card-vertical) .bundle-gift-card-img .bundle-gift-gallery-btn {
  position: static;
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  opacity: .6;
}
.bundle-gift-card:not(.bundle-gift-card-vertical) .bundle-gift-card-img .bundle-gift-gallery-btn:hover {
  background: transparent;
  opacity: 1;
}
.bundle-gift-card:not(.bundle-gift-card-vertical) .bundle-gift-card-img .bundle-gift-gallery-btn img {
  width: 14px !important;
  height: 14px !important;
}

.bundle-gift-card-info {
  flex: 1;
  min-width: 0;
}

.bundle-gift-card-info .bundle-gift-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.bundle-gift-card-info .bundle-gift-badge {
  display: inline-block;
  font-size: 11px;
  color: #fff;
  background: #16a34a;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  margin-top: 6px;
}

.bundle-gift-card-info .offer_options_headers {
  margin-top: 6px;
}

.bundle-gift-card-info .bundle-gift-options {
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════
   GIFT DESIGN 5 - Horizontal Cards Attached to Tier
   ═══════════════════════════════════════════════════ */
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) {
  margin: 0 0 8px 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  animation: giftSlideDown .3s ease-out;
}

/* Stacked + inline: wrap cards in a bordered container that continues the tier above */
.bundle-gifts-inline-horizontal.bundle-gifts-mobile-stacked {
  margin: 0 0 8px 0;
  padding: 0 !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-top-width: 0 !important;
  border-radius: 0 0 10px 10px !important;
  overflow: hidden;
  animation: giftSlideDown .3s ease-out;
}

.bundle-gifts-inline-horizontal .bundle-gifts-title {
  font-size: 14px;
  margin-bottom: 8px;
}

.bundle-gifts-inline-horizontal .bundle-gift-card {
  padding: 5px 10px;
  gap: 8px;
  align-items: center;
}

.bundle-gifts-inline-horizontal .bundle-gift-card-img .bundle-gift-img {
  width: 42px;
  height: 42px;
}

.bundle-gifts-inline-horizontal .bundle-reward-card .bundle-reward-img {
  width: 38px;
  height: 38px;
}

.bundle-gifts-inline-horizontal .bundle-gift-card-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bundle-gifts-inline-horizontal .bundle-gift-card-info .bundle-gift-name {
  font-size: 13px;
  margin: 0;
}

.bundle-gifts-inline-horizontal .bundle-gift-card-info .bundle-gift-badge {
  margin: 0;
}

/* ═══════════════════════════════════════════════════
   GIFT DESIGN 6 - Vertical Cards
   ═══════════════════════════════════════════════════ */
.bundle-gifts-vertical-cards {
  margin-top: 12px;
  padding: 14px 16px;
  background: #f0fdf4;
  border-radius: 10px;
  border: 1px solid #bbf7d0;
}

.bundle-gifts-vertical-cards .bundle-gifts-title {
  font-size: 15px;
  font-weight: 700;
  color: #16a34a;
  text-align: center;
  margin-bottom: 10px;
}

.bundle-gifts-row-vertical {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.bundle-gift-card.bundle-gift-card-vertical {
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 0;
  min-width: 100px;
  max-width: 180px;
  padding: 12px 10px;
}

.bundle-gift-card-vertical .bundle-gift-card-img .bundle-gift-img {
  width: 100px;
  height: 100px;
}

.bundle-gift-card-vertical .bundle-gift-card-img .bundle-gift-img-placeholder {
  width: 100px;
  height: 100px;
}

.bundle-gift-card-vertical .bundle-gift-card-info {
  width: 100%;
}

.bundle-gift-card-vertical .bundle-gift-card-info .bundle-gift-name {
  font-size: 13px;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════
   GIFT DESIGN 7 - Vertical Cards Attached to Tier
   ═══════════════════════════════════════════════════ */
.bundle-gifts-inline-vertical {
  margin: -1px 0 8px 0;
  padding: 12px 14px;
  border-top: 1px dashed #bbf7d0;
  border-radius: 0 0 10px 10px;
  animation: giftSlideDown .3s ease-out;
}

.bundle-gifts-inline-vertical .bundle-gifts-title {
  font-size: 14px;
  margin-bottom: 8px;
}

.bundle-gifts-inline-vertical .bundle-gift-card-vertical .bundle-gift-card-img .bundle-gift-img {
  width: 85px;
  height: 85px;
}

/* ═══════════════════════════════════════════════════
   GIFT TEASER - Locked Cards
   ═══════════════════════════════════════════════════ */
.bundle-gift-teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f5f5f5;
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 14px;
  opacity: 0.7;
  cursor: default;
  position: relative;
  min-height: 80px;
}

.bundle-gift-teaser-icon {
  font-size: 32px;
  font-weight: 700;
  color: #aaa;
  line-height: 1;
  margin-bottom: 6px;
}

.bundle-gift-teaser-text {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  line-height: 1.3;
}

/* Teaser inside horizontal row */
.bundle-gifts-row-horizontal .bundle-gift-teaser {
  flex-direction: row;
  gap: 14px;
  min-height: auto;
  padding: 12px 14px;
}

.bundle-gifts-row-horizontal .bundle-gift-teaser-icon {
  font-size: 28px;
  margin-bottom: 0;
}

/* Teaser inside vertical grid */
.bundle-gifts-row-vertical .bundle-gift-teaser,
.bundle-gifts-row .bundle-gift-teaser {
  flex: 1 1 0;
  min-width: 80px;
  max-width: 180px;
}

/* ═══════════════════════════════════════════════════
   BOGO DESIGN 2 - Cards Style
   ═══════════════════════════════════════════════════ */
.bundle-box-design2 {
  background: #fafbff;
  border: none;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  gap: 14px;
}

.bundle-box-design2 .offer_product {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8eaf0;
  transition: transform 0.15s, box-shadow 0.15s;
}

.bundle-box-design2 .offer_product:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.bundle-box-design2 .offer_product img {
  border-radius: 10px;
}

.bundle-box-design2 .offer_product .name {
  font-weight: 600;
  font-size: 14px;
}

.bundle-box-design2 .offer_divider {
  display: none;
}

.bundle-box-design2 .offer_total {
  background: #f8f9fb;
  border: 1px solid #e8eaf0;
  border-radius: 10px;
  padding: 14px 18px;
  font-weight: 600;
}

.bundle-box-design2 .offer_total .offer_label {
  color: #555;
}

.bundle-box-design2 .offer_total .final-offer_total {
  color: #222;
  font-size: 18px;
  font-weight: 700;
}

.bundle-box-design2 .offer_total .old-offer_total {
  color: #aaa;
}

.bundle-box-design2 .offer_total .offer_description {
  color: #666;
}

.bundle-box-design2 .free-offer_price {
  background: #dcfce7;
  color: #16a34a;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   BOGO DESIGN 3 - Gift Attached Below
   ═══════════════════════════════════════════════════ */
.bundle-box-design3 {
  border-radius: 10px 10px 0 0;
  margin-bottom: 0;
}

.bogo-gifts-attached {
  margin: -1px 0 0 0;
  padding: 14px 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-top: 1px dashed #bbf7d0;
  border-radius: 0 0 10px 10px;
  animation: giftSlideDown .3s ease-out;
}

.bogo-gifts-attached-title {
  font-size: 14px;
  font-weight: 700;
  color: #16a34a;
  text-align: center;
  margin-bottom: 10px;
}

.bogo-gifts-attached .offer_product {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid #bbf7d0;
}

.bogo-gifts-attached .offer_product:last-of-type {
  margin-bottom: 0;
}

.bogo-gifts-attached .free-offer_price {
  background: #dcfce7;
  color: #16a34a;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.bogo-gifts-attached .offer_divider {
  display: none;
}

.bogo-total-attached {
  margin-top: 10px;
  border-top: 1px solid #eee;
  padding-top: 8px;
  text-align: center;
}

/* BOGO Gift Horizontal Cards */
.bogo-gift-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: box-shadow .2s;
}

.bogo-gift-card:last-of-type {
  margin-bottom: 0;
}

.bogo-gift-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bogo-gift-card-img {
  position: relative;
  flex-shrink: 0;
}

.bogo-gift-card-img .bogo-gift-img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #bbf7d0;
}

.bogo-gift-card-img .offer-product-gallery-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
}

.bogo-gift-card-info {
  flex: 1;
  min-width: 0;
}

.bogo-gift-card-info .bogo-gift-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.bogo-gift-card-info .bogo-gift-badge {
  display: inline-block;
  font-size: 11px;
  color: #fff;
  background: #16a34a;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  margin-top: 6px;
}

.bogo-gift-card-info .offer_options_container {
  margin-top: 6px;
}

/* BOGO Design 4 - Separate Vertical Grid */
.bogo-gifts-separate {
  margin: 12px 0 0 0;
  border: 1px solid #bbf7d0;
  border-top: 1px solid #bbf7d0;
  border-radius: 10px;
}

.bogo-gifts-vertical-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.bogo-gifts-vertical-grid .bogo-gifts-attached-title {
  width: 100%;
}

.bogo-gift-card.bogo-gift-card-vertical {
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 0;
  min-width: 100px;
  max-width: 180px;
  padding: 12px 10px;
}

.bogo-gift-card-vertical .bogo-gift-img {
  width: 100px;
  height: 100px;
}

.bogo-gift-card-vertical .bogo-gift-card-info {
  min-width: 0;
  width: 100%;
}

.bogo-gift-card-vertical .bogo-gift-name {
  font-size: 13px;
  margin-top: 6px;
}

/* timer_offer */
#timer_countdown {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(90deg, #ff5f6d, #ffc371);
  padding: 12px 18px;
  border-radius: 12px;
  display: inline-block;
  margin: 20px 0;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#timer_popup_extension {
  max-width: 90%;
  width: 340px;
}

#timer_popup_extension h3 {
  margin-top: 0;
  font-size: 20px;
  color: #333;
}

#timer_popup_extension p {
  color: #555;
  font-size: 15px;
  margin: 10px 0 20px;
}

#timer_close_popup_btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 30px;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#timer_close_popup_btn:hover {
  background-color: #45a049;
}

/* bundle*/
.bundle-option {
  gap: 10px;
}

.bundle-option {
  flex-direction: row;
}

.bundle-option img {
  width: 50px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.bundle-container {
  box-sizing: border-box;
  /* Breathing room above the first bundle tier — same fix as mob_bundle.css. */
  margin-top: 16px;
}

.bundle-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 20px;
}

.bundle-heading .line {
  flex: 1;
  height: 1px;
  background-color: #ccc;
  margin: 0 10px;
}

.bundle-heading .heading-text {
  font-weight: bold;
  font-size: 16px;
  white-space: nowrap;
}

.bundle-option {
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  display: grid;
  align-items: center;
  position: relative;
  transition: all 0.3s;
  background-color: white;
}

.bundle-option input {
  transform: scale(1.4);
}

.pack-title {
  font-size: 18px;
  font-weight: bold;
  display: grid;
}

.price {
  font-size: 18px;
  margin-top: 5px;
  display: grid;
  /* 📍 Force price text to align with the start of the row — same direction
     as the title/subtitle in .bundle-info-text. Without this, an inherited
     `text-align: end` from an ancestor (or a stale cached rule) flipped the
     price to the opposite edge of its own grid track, making it visually
     "stuck to the other side" of the bundle box. Operator complaint:
     "the price is glued to the left/right, opposite from the title". */
  text-align: start;
}

.old-price {
  text-decoration: line-through;
  color: #999;
  font-size: 14px;
  margin-left: 5px;
}

.savings {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.badge {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 8px;
}

.badge.shipping {
  background-color: #eee;
  color: #666;
}

.badge.popular {
  color: white;
  position: absolute;
  top: -10px;
  padding: 5px 10px;
  border-radius: 50px;
}

/* RTL (Hebrew) - Badge on LEFT side */
body.rtl .badge.popular,
html[dir="rtl"] .badge.popular {
  left: -10px;
  right: auto;
}

/* LTR (English) - Badge on RIGHT side */
body.ltr .badge.popular,
html[dir="ltr"] .badge.popular {
  right: -10px;
  left: auto;
}

/* ═══ Most Popular badge — distinct designs (popular_badge_style) ═══ */
/* style2 — Full-width TOP BANNER (content pushed down) */
.bundle-option:has(.popular-style2) { padding-top: 42px; overflow: hidden; }
.badge.popular.popular-style2 {
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100%; text-align: center;
  border-radius: 0 !important;
  padding: 9px 10px !important;
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--bundle-accent, #4f6ef7) !important;
}
/* style3 — Corner PENNANT (sticks UP at the corner; never covers content) */
.badge.popular.popular-style3 {
  top: -14px !important;
  padding: 5px 16px 11px !important;
  border-radius: 4px 4px 0 0 !important;
  font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  background: var(--bundle-accent, #4f6ef7) !important;
  box-shadow: 0 3px 7px rgba(0,0,0,.22);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}
html[dir="ltr"] .badge.popular.popular-style3, body.ltr .badge.popular.popular-style3 {
  right: 10px !important; left: auto !important;
}
html[dir="rtl"] .badge.popular.popular-style3, body.rtl .badge.popular.popular-style3 {
  left: 10px !important; right: auto !important;
}
/* style4 — Floating TAB with downward pointer */
.badge.popular.popular-style4 {
  top: -17px !important; left: 50% !important; right: auto !important;
  transform: translateX(-50%);
  padding: 6px 18px !important; border-radius: 20px !important;
  font-size: 12px; font-weight: 800;
  background: var(--bundle-accent, #4f6ef7) !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.22);
}
.badge.popular.popular-style4::after {
  content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 7px solid var(--bundle-accent, #4f6ef7);
}
/* style5 — Circular SEAL / stamp (raised fully above the card so it never covers the price) */
.bundle-option:has(.popular-style5) { margin-top: 40px; }
.badge.popular.popular-style5 {
  top: -46px !important;
  width: 52px; height: 52px; padding: 4px !important;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  line-height: 1.1; font-size: 8.5px; font-weight: 800; text-transform: uppercase;
  border-radius: 50% !important;
  background: var(--bundle-accent, #4f6ef7) !important;
  border: 2px dashed rgba(255,255,255,.75);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
/* style6 — GLOW CARD: whole most-popular tier highlighted + chip */
.bundle-option:has(.popular-style6) {
  border-color: var(--bundle-accent, #4f6ef7) !important;
  box-shadow: 0 0 0 2px var(--bundle-accent, #4f6ef7), 0 10px 26px rgba(0,0,0,.16);
}
.badge.popular.popular-style6 {
  top: -11px !important;
  padding: 4px 12px !important; border-radius: 6px !important;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  background: var(--bundle-accent, #4f6ef7) !important;
}

/* style7 — Glossy gradient pill */
.badge.popular.popular-style7 {
  top: -11px !important;
  padding: 5px 15px !important; border-radius: 20px !important;
  font-size: 11px; font-weight: 800;
  background-image: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 62%) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.55);
}

/* style8 — Pulsing live dot */
.badge.popular.popular-style8 {
  top: -11px !important;
  padding: 5px 14px !important; padding-inline-start: 24px !important;
  border-radius: 20px !important; font-size: 11px; font-weight: 800;
  background: var(--bundle-accent, #4f6ef7) !important;
}
.badge.popular.popular-style8::before {
  content: ""; position: absolute; inset-inline-start: 9px; top: 50%;
  width: 7px; height: 7px; transform: translateY(-50%); border-radius: 50%; background: #fff;
  animation: bundlePopDot 1.2s ease-in-out infinite;
}
@keyframes bundlePopDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); opacity: 1; }
  50%      { box-shadow: 0 0 0 5px rgba(255,255,255,0); opacity: .55; }
}

/* style9 — Outline chip + accent dot */
.badge.popular.popular-style9 {
  top: -11px !important;
  padding: 4px 12px !important; padding-inline-start: 22px !important;
  border-radius: 6px !important; font-size: 11px; font-weight: 800;
  background: #fff !important; color: var(--bundle-accent, #4f6ef7) !important;
  border: 2px solid var(--bundle-accent, #4f6ef7);
}
.badge.popular.popular-style9::before {
  content: ""; position: absolute; inset-inline-start: 8px; top: 50%;
  width: 7px; height: 7px; transform: translateY(-50%); border-radius: 50%;
  background: var(--bundle-accent, #4f6ef7);
}

/* style10 — Striped full-width banner */
.bundle-option:has(.popular-style10) { padding-top: 42px; overflow: hidden; }
.badge.popular.popular-style10 {
  top: 0 !important; left: 0 !important; right: 0 !important; width: 100%; text-align: center;
  border-radius: 0 !important; padding: 9px 10px !important;
  font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  background-color: var(--bundle-accent, #4f6ef7) !important;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 10px, rgba(255,255,255,0) 10px 20px) !important;
}

/* style11 — Sticker pop (white border + hard offset shadow) */
.badge.popular.popular-style11 {
  top: -12px !important; padding: 5px 14px !important; border-radius: 6px !important;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  background: var(--bundle-accent, #4f6ef7) !important;
  border: 2px solid #fff;
  box-shadow: 3px 3px 0 rgba(0,0,0,.3);
}

/* style12 — Hexagon gem */
.badge.popular.popular-style12 {
  top: -14px !important; padding: 7px 18px !important; border-radius: 0 !important;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  background: var(--bundle-accent, #4f6ef7) !important;
  -webkit-clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
}

/* style13 — Halo double-ring */
.badge.popular.popular-style13 {
  top: -13px !important; padding: 5px 14px !important; border-radius: 20px !important;
  font-size: 11px; font-weight: 800;
  background: var(--bundle-accent, #4f6ef7) !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--bundle-accent, #4f6ef7), 0 4px 9px rgba(0,0,0,.22);
}

/* style14 — Shine sweep */
.badge.popular.popular-style14 {
  top: -11px !important; padding: 5px 15px !important; border-radius: 20px !important;
  font-size: 11px; font-weight: 800; overflow: hidden;
  background: var(--bundle-accent, #4f6ef7) !important;
}
.badge.popular.popular-style14::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: bundlePopShine 2.6s ease-in-out infinite;
}
@keyframes bundlePopShine { 0% { left: -60%; } 60%, 100% { left: 130%; } }

/* style15 — Tilted sticker (slapped-on angle) */
.badge.popular.popular-style15 {
  top: -12px !important; padding: 5px 14px !important; border-radius: 6px !important;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  background: var(--bundle-accent, #4f6ef7) !important;
  border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.28);
  transform: rotate(-7deg);
}

/* style16 — Arrow ribbon (chevron-pointed end) */
.badge.popular.popular-style16 {
  top: -12px !important; padding: 5px 20px 5px 14px !important; border-radius: 0 !important;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  background: var(--bundle-accent, #4f6ef7) !important;
  -webkit-clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
  clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
}

/* style17 — Gentle bounce */
.badge.popular.popular-style17 {
  top: -12px !important; padding: 5px 14px !important; border-radius: 20px !important;
  font-size: 11px; font-weight: 800;
  background: var(--bundle-accent, #4f6ef7) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  animation: bundlePopBounce 1.6s ease-in-out infinite;
}
@keyframes bundlePopBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* style18 — Neon glow */
.badge.popular.popular-style18 {
  top: -12px !important; padding: 5px 14px !important; border-radius: 20px !important;
  font-size: 11px; font-weight: 800;
  background: #15152b !important; color: #fff;
  border: 1.5px solid var(--bundle-accent, #4f6ef7);
  box-shadow: 0 0 6px var(--bundle-accent, #4f6ef7), 0 0 13px var(--bundle-accent, #4f6ef7);
  text-shadow: 0 0 6px var(--bundle-accent, #4f6ef7);
}

/* style19 — Stacked paper shadow */
.badge.popular.popular-style19 {
  top: -12px !important; padding: 5px 14px !important; border-radius: 5px !important;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  background: var(--bundle-accent, #4f6ef7) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,.18), 6px 6px 0 rgba(0,0,0,.1);
}

.bundle-option input {
  margin-bottom: 10px;
  margin-right: 0;
}

.bundle-info {
  align-items: center;
  text-align: start;
  /* 📍 Price sits NEXT TO the title block (not pushed to the opposite edge
     of the row). Operator complaint: with `space-between` the price got
     glued to the far side of the bundle box, visually disconnected from
     the title it described. flex-start + the gap below keeps them as a
     readable unit. */
  justify-content: space-between;
  width: 100%;
  display: flex;
  /* 📏 Visible breathing room between title/subtitle and the price. */
  gap: 14px;
}

.bundle-heading {
  flex-direction: row;
  flex-wrap: nowrap;
}

.bundle-box_background {
  display: flex;
  align-items: center;
  gap: 2%;
}

.color-options-bundle {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
  padding-right: 2%;
}

.size-options-bundle {
  flex-wrap: wrap;
  margin-top: 10px;
  display: flex;
  gap: 13px;
  align-items: center;
  padding-right: 2%;
}

.new-options-bundle {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
}

.color_bundle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
}

.optionsHTML_name {
  display: flex;
}

.bottom_bundle {
  display: flex;
  justify-content: space-between;
}

.data_product_options_bundle_app {
  width: 80%;
}

.image_bundle {
  display: grid;
  align-items: center;
}

/* =============================================
   VERTICAL LAYOUT - .bundle-vertical
   Tiers displayed as side-by-side cards (columns)
   ============================================= */
.bundle-vertical .bundle-heading {
  margin-bottom: 16px;
}

.bundle-vertical {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bundle-vertical .bundle-heading {
  width: 100%;
  flex-shrink: 0;
}

.bundle-vertical .bundle-option {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 12px;
  margin-bottom: 0;
}

.bundle-vertical .bundle-box_background {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.bundle-vertical .custom-radio {
  order: -1;
}

.bundle-vertical .bundle-info {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  width: 100%;
}

.bundle-vertical .price {
  text-align: center;
  justify-items: center;
}

.bundle-vertical .badge.popular {
  position: absolute;
  top: -10px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.bundle-vertical .bottom_bundle {
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}

.bundle-vertical .data_product_options_bundle_app {
  width: 100%;
}

.bundle-vertical .image_bundle {
  justify-items: center;
  margin-top: 8px;
}

.bundle-vertical .image_bundle img {
  width: 70px;
  height: auto;
}

.bundle-vertical .color-options-bundle,
.bundle-vertical .size-options-bundle,
.bundle-vertical .new-options-bundle {
  justify-content: center;
  padding-right: 0;
}

.color-image {
  height: 20px !important;
  width: 20px !important;
}

.option-button-bundle {
  border: 1px solid #ffffff;
  cursor: pointer;
  padding: 4px 4%;
  font-size: 16px;
  margin-bottom: 0.213333rem;
  border-radius: 42%;
  text-align: center;
}

.option-button-bundle.selected {
  border: 1px solid rgb(0, 0, 0);
}

.size-button-bundle.selected {
  border: 1px solid rgb(0, 0, 0);
}

.size-button-bundle {
  border: 1px solid #ffffff;
  cursor: pointer;
  padding: 6px 4%;
  font-size: 16px;
  margin-bottom: 0.213333rem;
  border-radius: 42%;
  text-align: center;
}

.color-circle>img {
  border-radius: 8px;
  object-fit: cover;
  height: 20px !important;
  width: 20px !important;
  margin-right: 0px !important;
}

/* ── Image Swatch (square) - renders product variation image in place of colored circle ── */
.color-circle.image-swatch {
  border: 1px solid transparent;
  border-radius: 0;
  padding: 3px;
  overflow: hidden;
}

.color-circle.image-swatch.selected {
  border: 1px solid #000;
  border-radius: 0;
  padding: 3px;
}

.color-circle.image-swatch>.color-image-swatch,
.color-circle>.color-image-swatch {
  display: block;
  width: 40px !important;
  height: 40px !important;
  border-radius: 0;
  object-fit: cover;
  cursor: pointer;
  margin: 0 !important;
}

/* Grid color circles (may_also_like) - square when image-swatch mode */
.grid-color-circle.image-swatch {
  border-radius: 0 !important;
}

.color-options-offer {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
  padding-right: 2%;
}

.option-button-offer {
  border: 1px solid #e5e5e5;
  cursor: pointer;
  padding: 4px 4%;
  font-size: 16px;
  margin-bottom: 0.213333rem;
  border-radius: 42%;
  text-align: center;
}

.size-button-offer {
  border: 1px solid #e5e5e5;
  cursor: pointer;
  padding: 4px 4%;
  font-size: 16px;
  margin-bottom: 0.213333rem;
  border-radius: 42%;
  text-align: center;
}

.option-button-offer.selected {
  border: 1px solid rgb(0, 0, 0);
}

.size-button-offer.selected {
  border: 1px solid rgb(0, 0, 0);
}

.new-options-offer {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
}

.size-options-offer {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
}

#all_the_reviews_container_tm_review {
  background: white;
  padding: 2% 15% 1% 15%;
  margin: auto;
}

.show-all-reviews-btn_tm_review {
  display: none;
}

#sliderValue_tm_review {
  display: none;
}

.filter-slider-container_tm_review {
  text-align: center;
  margin-bottom: 30px;
}

#starSlider_tm_review {
  width: 80%;
  margin-top: 10px;
}

.slider-labels_tm_review {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 5px auto 0;
  font-size: 14px;
  color: #666;
}

.add-review-form_tm_review {
  text-align: center;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.add-review-form_tm_review textarea,
.add-review-form_tm_review select,
.add-review-form_tm_review input[type="text"] {
  width: 90%;
  max-width: 400px;
  padding: 10px;
  margin: 8px 0;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.custom-file-upload_tm_review {
  display: inline-block;
  padding: 8px 14px;
  cursor: pointer;
  color: white;
  background-color: #3855d4;
  /* fallback if JS doesn't set product color_cart */
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 10px;
}

#newReviewImage_tm_review {
  display: none;
}

#reviewsContainer_tm_review {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 18px;
}

@media (max-width: 1199px) {
  #reviewsContainer_tm_review {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 899px) {
  #reviewsContainer_tm_review {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─────────────────────────────────────────────────────────────────
   Compact + Slide-in Drawer mode (general.reviews_layout='compact_drawer')
   ───────────────────────────────────────────────────────────────── */
.reviews-compact-mode_tm_review {
  background: #fafafa;
  border-radius: 14px;
  padding: 20px;
}

.reviews-compact-header_tm_review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.reviews-compact-title_tm_review {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.reviews-compact-count_tm_review {
  color: #666;
  font-weight: 500;
  font-size: 14px;
}

/* In compact mode the main grid only ever holds 2 cards. */
.reviews-compact-mode_tm_review #reviewsContainer_tm_review.reviews-compact-preview_tm_review {
  grid-template-columns: repeat(2, 1fr) !important;
  margin-top: 0;
}

.reviews-view-all-btn_tm_review {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 16px auto 0;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #3855d4;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: filter .15s, transform .15s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.reviews-view-all-btn_tm_review:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Drawer overlay */
.reviews-drawer-overlay_tm_review {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background-color .25s;
}

.reviews-drawer-overlay_tm_review.open {
  background: rgba(0, 0, 0, .45);
  pointer-events: auto;
}

/* Drawer panel - slides in from the side opposite to the document direction
   (RTL → from left edge, LTR → from right edge). */
.reviews-drawer_tm_review {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(520px, 92vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

html[dir="ltr"] .reviews-drawer_tm_review {
  right: 0;
  transform: translateX(110%);
  box-shadow: -10px 0 30px rgba(0, 0, 0, .15);
}

html[dir="ltr"] .reviews-drawer-overlay_tm_review.open .reviews-drawer_tm_review {
  transform: translateX(0);
}

html[dir="rtl"] .reviews-drawer_tm_review {
  left: 0;
  transform: translateX(-110%);
  box-shadow: 10px 0 30px rgba(0, 0, 0, .15);
}

html[dir="rtl"] .reviews-drawer-overlay_tm_review.open .reviews-drawer_tm_review {
  transform: translateX(0);
}

.reviews-drawer-header_tm_review {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid #eee;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
}

.reviews-drawer-title_tm_review {
  font-size: 18px;
  font-weight: 700;
}

.reviews-drawer-close_tm_review {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: #666;
  padding: 4px 10px;
  border-radius: 6px;
}

.reviews-drawer-close_tm_review:hover {
  background: #f3f3f5;
  color: #1a1a2e;
}

.reviews-drawer-filter_tm_review {
  padding: 14px 22px;
  border-bottom: 1px solid #eee;
}

.reviews-drawer-body_tm_review {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.reviews-drawer-body_tm_review .review-wrapper_tm_review {
  margin-bottom: 0;
}

.review-wrapper_tm_review {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.stars_tm_review {
  font-size: 22px;
  margin-bottom: 6px;
  text-align: start;
}

.review-name_tm_review {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
  color: #333;
}

.review-text_tm_review {
  color: #333;
  margin-bottom: 6px;
}

.review_tm_review img {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 10px;
}

.show-all-reviews-btn_tm_review {
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

#toggleReviewFormBtn_tm_review {
  color: white;
  background-color: #3855d4;
  /* fallback if JS doesn't set product color_cart */
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 15px;
  cursor: pointer;
}

#submitReviewBtn_tm_review {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  color: white;
  background-color: #3855d4;
  /* fallback if JS doesn't set product color_cart */
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

.slider-labels_tm_review span .star_tm_review {
  font-weight: bold;
  margin-right: 2px;
}

.img_tm_review {
  max-width: 100%;

  border-radius: 8px;
  margin-top: 10px;
}

/* =====================================================
   9. THANK YOU PAGE
   ===================================================== */
/* =====================================================
   10. UPSELL / DOWNSELL PAGES
   ===================================================== */
.product_price {
  font-size: 23px;
}

#container_upsell {
  white-space: nowrap;
  text-align: left;
  padding-right: 4%;
  padding-left: 4%;
  padding-top: 1%;
}

#loader_model {
  position: absolute;
  left: 50%;
  z-index: 1;
  width: 100px;
  height: 100px;
  margin: -241px 0 0 -75px;
  border: 16px solid #cfcfcf;
  border-radius: 50%;
  border-top: 17px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 6s linear infinite;
}

.paypl_button_Syle {
  padding-top: 3%;
}

.upsell_price {
  gap: 2%;
  display: flex;
  margin-bottom: 5px !important;
  margin-top: 5px !important;
  align-items: baseline;
}

/* =====================================================
   11. USER PAGE (Login / Register)
   ===================================================== */
#order_confirmation_img {
  display: flex;
  width: 4%;
  height: 7%;
  margin: auto;
  margin-top: 7%;
}

#table_1 {
  width: 60%;
  padding: 0 1.0714285714em;
  border-radius: 4px;
  padding-top: 14px;
  border: 1px solid #c1c1c1;
  display: inline-table;
}

.THE_IMAGE {
  width: 100px;
  height: 100px;
}

tr {
  text-align: center;
}


th {
  text-decoration: underline;
}

td {
  width: 10%;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}




#table_2 {
  padding: 0 1.0714285714em;
  border-radius: 4px;
  padding-top: 14px;
}

a {
  text-decoration: none;
  color: black;
}

* {
  box-sizing: border-box;
}

#logo_image {
  width: auto;
  height: 4vw;
  max-height: 56px;
}

#box {
  border: 1px #ddd solid;
  padding: 2%;
  margin-right: 39%;
  margin-left: 39%;
  margin-top: 1%;
}

#hold_info {
  width: 41%;
  margin: auto;
}

.box_place {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  gap: 24%;
}

.box {
  border: 1px #ddd solid;
  padding: 0.5%;
  margin-top: 1%;
  border-radius: 7%;
  width: 82%;
}

#box_title {
  font-size: 30px;
  font-weight: bold;
}

#box_input {
  padding: 1%;
}

#box_input_text {
  font-weight: bold;
}

input {
  width: 66%;
  height: 46px;
  border: 1px solid #a6a6a6;
  border-top-color: #949494;
  border-radius: 3px;
}

#connect_button {
  margin: auto;
  display: block;
  border: 2px solid #00000000 !important;
  cursor: pointer;
  line-height: 1.2;
  letter-spacing: .02em;
  font-weight: 500;
  box-shadow: rgba(37, 42, 50, .32) 0 1px 4px 1px;
  border-radius: 4px;
  outline: none;
  color: white !important;
  font-size: 20px;
  padding: 1%;
  width: 100%;
}

#register_button {
  text-align: center;
}

#register_button_self {
  margin: auto;
  border: 2px solid #00000000 !important;
  cursor: pointer;
  letter-spacing: .02em;
  text-decoration: none;
  font-weight: 500;
  box-shadow: rgba(37, 42, 50, .32) 0 1px 4px 1px;
  border-radius: 4px;
  outline: none;
  color: #000000 !important;
  font-size: 20px;
  width: 17%;
}

.Country {
  border: #000000 1px solid !important;
  width: 100%;
  height: 48px;
  line-height: normal;
  border-radius: 4px;
  padding: 0 1.0714285714em;
  background-color: white;
  box-sizing: border-box;
  color: black;
}

.state {
  border: #000000 1px solid !important;
  height: 48px;
  line-height: normal;
  border-radius: 4px;
  padding: 0 0.9714285714em;
  background-color: white;
  box-sizing: border-box;
  color: black;
}

.Zip {
  border: #000000 1px solid !important;
  width: 100%;
  height: 48px;
  line-height: normal;
  border-radius: 4px;
  padding: 0 0.9714285714em;
  background-color: white;
  box-sizing: border-box;
  color: black;
}

#recovery_button_self {
  margin: auto;
  border: 2px solid #00000000 !important;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: .02em;
  font-weight: 500;
  box-shadow: rgba(37, 42, 50, .32) 0 1px 4px 1px;
  border-radius: 4px;
  outline: none;
  color: #000000 !important;
  font-size: 20px;
  width: 17%;
}

#register {
  text-align: center;
  display: flex;
  align-items: center;
}

#register_title {
  margin: auto;
}

#register_line_left {
  width: 8%;
  background-color: transparent;
  display: block;
  height: 1px;
  border-top: 1px solid #e7e7e7;
  position: absolute;
  margin-top: -1px;
  z-index: 1;
  left: 39%;
}

#register_line_right {
  width: 8%;
  background-color: transparent;
  display: block;
  height: 1px;
  border-top: 1px solid #e7e7e7;
  position: absolute;
  margin-top: -1px;
  z-index: 1;
  right: 39%;
}

/* =====================================================
   12. WISHLIST PAGE
   ===================================================== */
html {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

body {
  margin: 0;
  /* 🎨 Modern base font (see mob_bundle.css) — was unset → browser-default Times. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Hebrew", "Arial Hebrew", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.products_container_image_image_wishlist {
  width: 100% !important;
  height: 350px;
  border-radius: 4%;
}

.products_container_title_and_price_wishlist {
  text-align: right;
  padding: 0% 5% 5% 5%;
}

.products_container_images_and_prices_and_title_wishlist {
  margin-bottom: 6%;
  background-color: white;
}

.products_container_wishlist {
  display: grid;
  grid-template-columns: repeat(5, 20%);
  padding: 2%;
  background-color: #f7f7f7;
}

#title_may_like {
  text-align: center;
  font-size: 16px !important;
  display: block;
  font-weight: bold;
}

/* products_container*/
.title_product_collection {
  font-size: 12px;
}

.title_product_collection {
  color: black;
  text-decoration: none;
}

/* products_container end */
.hand {
  position: relative;
  left: -15px;
}

#cart_price_before {
  display: flex;
  padding: 1% 10% 0% 10%;
  justify-content: space-between;
  align-items: center;
}

#cart_saved {
  display: flex;
  padding: 0% 10% 0% 10%;
  justify-content: space-between;
  align-items: center;
}

#cart_discount_row {
  display: flex;
  padding: 0% 10% 0% 10%;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
}

#cart_need_to_pay {
  display: flex;
  padding: 0% 10% 0% 10%;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
}

#atc_top {
  margin: 0 auto;
  background: white;
  border-bottom: 1px solid #e5e5e5;
  width: 100%;
  position: sticky;
  top: 0px;
  right: 0px;
  z-index: 1;
}

#closebtn_imag {
  width: 71%;
  margin-left: 0;
  margin-right: 0;
  height: 36px;
}

#hedaer_cart {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 18px;
  overflow: hidden;
}

#spacekris {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  margin-bottom: 4px;
}

#lowstockkris {
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  border-radius: 60px;
  background-color: #ebebeb;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22%;
}

#lowstockkris b {
  font-size: 12px;
  color: black;
}

#in_nave {
  margin-top: 0px;
  flex-grow: 1;
  position: relative;
  background-color: white;
  color: black;
  height: 300000000px;
  overflow: scroll;
}

.u-repeater {
  display: grid;
  grid-template-columns: repeat(4, 25.333333%);
}

.image_product_down {
  font-size: 16px !important;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 400;
  margin: 0px 0px 0px 0px;
}

.u-price-wrapper {
  justify-content: space-between;
  display: flex;
  text-align: center;
  align-items: center;
  gap: 12px;
  margin-top: 2%;
}

.also_like_image {
  height: 285px;
  cursor: pointer;
}

.u-container-layout.u-similar-container.u-valign-top.u-container-layout-1 {
  padding: 13%;
}

.u-align-center {
  text-align: center;
}

.image_category_upsell {
  width: 93%;
  height: 420px;
  box-shadow: rgba(37, 42, 50, 0.32) 0 1px 4px 1px;
}

.container_also_like {
  display: flex;
  justify-content: center;
  align-items: center;
}

#image_product>div {
  padding-bottom: 15%;
}

.image-button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  border: none;
  padding: 7px 9px;
  font-size: 18px;
  cursor: pointer;
}

.u-hide-price.u-old-price {
  margin-left: 10px;
  display: none;
}

#yes {
  width: 4%;
  height: 7%;
}

.u-text {
  word-wrap: break-word;
  position: relative;
}

h4 {
  font-weight: 400;
}

#modal_widget_main_page_product {
  display: flex;
  justify-content: center;
}

.unselectable {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.arrow_back_right {
  background-color: #e4e4e4;
  position: absolute;
  width: 29px;
  right: 10px;
  border-radius: 16px;
  height: 30px;
}

.arrow_back_left {
  background-color: #e4e4e4;
  position: absolute;
  width: 29px;
  left: 10px;
  border-radius: 16px;
  height: 30px;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  cursor: pointer;
  z-index: 1;
}

#modal_widget_thumbnails img {
  max-width: 100px;
  max-height: 100px;
  margin: 5px;
  cursor: pointer;
}

#modal_widget_product_setting {
  width: 50%;
  padding: 2%;
}

#modal_widget_gallery {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#btc_addto_Cart {
  display: none;
}

#modal_widget_thumbnails {
  display: flex;
  align-items: center;
  overflow-y: auto;
}

.modal_widget_main_image_gallery_background::after {
  background: rgba(0, 0, 0, 0.03);
  content: "";
  height: 586px;
  right: 0;
  position: absolute;
  top: 0;
  width: 355px;
  pointer-events: none;
}

.modal_widget_images_background::after {
  background: rgba(0, 0, 0, 0.03);
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  height: 193px;
  width: 161px;
  pointer-events: none;
}

.modal_widget_images_background {
  position: relative;
  margin-left: 1%;
}

#arrow-left {
  left: 9px;
  font-weight: 600;
}

#arrow-right {
  right: 10px;
  font-weight: 600;
}

#modal_widget_headline {
  word-break: break-word;
  text-align: left;
  align-items: center;
  justify-content: space-between;
}

#modal_widget_price_product {
  display: flex;
  gap: 20px;
  margin-bottom: 11px;
  align-items: baseline;
}

#modal_widget_headline_text {
  font-size: 43px;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-right: 0px;
}

.modal_widget_product_price_compare_symbole {
  text-decoration: line-through !important;
}

#modal_widget_product_price {
  font-size: 22px;
}

#modal_widget_index_count {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin: -24px auto 0;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 5px;
  text-align: center;
}

#modal_widget_index_count.modal-widget-dots {
  background: none;
  margin: 4px auto 0;
  padding: 0;
  border-radius: 0;
}

#size_world_wide>span,
.varrint_0>div,
.varrint_1>div,
.varrint_2>div,
.varrint_3>div,
.varrint_4>div,
.varrint_0>input,
.varrint_1>input,
.varrint_2>input,
.varrint_3>input,
.varrint_4>input {
  margin-left: 2%;
}

.accordion {
  max-width: 600px;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header .icon {
  transition: transform 0.3s ease;
}

.info-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0;
}

.info-item {
  text-align: center;
  padding: 0 10px;
}

.info-icon {
  width: 30px;
  margin-bottom: 10px;
  opacity: 0.7;
}

.info-text div {
  font-size: 14px;
  color: #333;
}

.divider {
  width: 1px;
  height: 40px;
  background-color: #ccc;
}

.info-tooltip {
  background: #000;
  color: #fff;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
  margin-right: 4px;
  cursor: help;
}

#Description {
  width: 100%;
  margin-top: 0%;
}

/* =====================================================
   13. PAGE BUILDER (Visual Editor Components)
   ===================================================== */
/* === Rows & Columns === */
/* Editor-built rows on desktop: row itself spans the full viewport
   (so a row with a colored background bleeds edge-to-edge), but the
   CONTENT inside is capped via viewport-relative padding — on a
   1920px screen the content sits in a centered 1100px-wide column,
   on smaller screens the padding gracefully shrinks to a 20px gutter.
   This is the standard "full-bleed band, contained content" pattern. */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 40px;
  padding-left: max(20px, calc((100% - 1100px) / 2));
  padding-right: max(20px, calc((100% - 1100px) / 2));
  box-sizing: border-box;
}

.column {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 12px;
  box-sizing: border-box;
}

.column img {
  width: 100%;
  border-radius: 16px;
  display: block;
  box-shadow: 0 14px 34px -18px rgba(20, 22, 44, 0.22);
}

/* === Text & Paragraph === */
.row .column p,
.row .column div {
  font-size: 16px;
  line-height: 1.5;
}

/* === Accordion === */
.accordion {
  border-radius: 8px;
  overflow: hidden;
  margin: 15px 0;
}

.accordion-item {
  margin-bottom: 10px;
  border: 1px solid #ececf0;
  border-radius: 12px;
  box-shadow: 0 6px 18px -12px rgba(20, 22, 44, 0.16);
  overflow: hidden;
}

/* אם לא רוצים מרווח אחרי האחרון */
.accordion-item:last-child {
  margin-bottom: 0;
}

.accordion-header {
  cursor: pointer;
  padding: 12px 15px;
  font-weight: bold;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-header:hover {
  background: transparent;
}

.accordion-header .icon {
  font-size: 18px;
  font-weight: bold;
}

.accordion-content {
  overflow: hidden;
  height: 0;
  padding: 0 15px;
  transition: height 0.3s ease, padding 0.3s ease;
}

.accordion-content.open {
  height: auto;
  padding: 15px;
}

/* === Testimonial === */
.testimonial {
  border-radius: 14px;
  padding: 18px 18px 20px;
  margin: 15px 0;
  background: #ffffff;
  border: 1px solid #eef0f4;
  box-shadow: 0 10px 24px rgba(12, 22, 44, 0.08);
  text-align: center;
  max-width: 400px;
}

.testimonial-avatar {
  border-radius: 50%;
  margin-bottom: 10px;
}

.testimonial-text {
  font-style: italic;
  margin-bottom: 10px;
}

.testimonial-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.testimonial-stars {
  color: gold;
  font-size: 18px;
}

/* === Media Gallery === */
.media-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 10px;
  padding: 10px;
}

.gallery-img,
.gallery-video {
  flex: 0 0 100%;
  max-width: 100%;
  border-radius: 8px;
  scroll-snap-align: center;
  object-fit: cover;
}

.media-gallery::-webkit-scrollbar {
  display: none;
}

.video-wrapper {
  position: relative;
  flex: 0 0 75%;
  max-width: 100%;
  scroll-snap-align: center;
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.sound-toggle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 16px;
  line-height: 36px;
  text-align: center;
  padding: 0;
}

.gallery-img:hover {
  transform: scale(1.05);
}

/* נקודות מתחת לגלריה */
.gallery-dots {
  text-align: center;
  margin-top: 10px;
}

.gallery-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.gallery-dot.active {
  background: #333;
}

/* === General Images === */
.row-1 .column {
  width: 30%;
  flex: 1 1 100%;
}

.row-2 .column {
  flex: 1 1 calc(50% - 15px);
}

.row-3 .column {
  flex: 1 1 calc(33.333% - 15px);
}

.row-4 .column {
  flex: 1 1 calc(25% - 15px);
}

.before-after {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  margin: 20px auto;
  /* Own stacking context: keeps .slider-handle (z-index:5) + .ba-label
     (z-index:3) contained inside the widget so they never paint over the
     fixed #sticky_atc_wrap (z-index:2) when scrolled near the viewport bottom. */
  isolation: isolate;
}

.before-after img {
  width: 100%;
  display: block;
  border-radius: 8px;
}

.after-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.before-after-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* after תמיד מעל before ונחתכת */
.after-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

/* קו ההפרדה */
.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  cursor: ew-resize;
  z-index: 5;
}

/* העיגול עם החצים */
.slider-handle .arrows {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #333;
}

#sc-panel {
  width: 20%;
}

/* 🔖 Static yellow highlighter — same class the editor uses
   (registered in admin/editor/editor.js) so AI-generated text
   that includes <span class="hl-mark"> stays styled on the
   customer-facing product page. Inline background-color from
   the AI is preferred but this class is the fallback. */
.hl-mark {
  background-color: #FFF59D;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit;
  letter-spacing: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .06em;
}

/* 🔖 מרקר אחיד לכל הגובה + שליטה במהירות */
/* בסיס */
.hl-ink {
  --ink: #FFF59D;
  --ink-ease: linear;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .06em;
}

.hl-ink-line {
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 100%;
  transition-property: background-size;
  transition-timing-function: var(--ink-ease);
  transition-duration: var(--dur, 1s);
  transition-delay: var(--delay, 0s);
  display: inline;
}

/* RTL - סוויפ מימין לשמאל */
.hl-ink.rtl .hl-ink-line {
  background-position: 100% 100%;
}

/* הפעלה */
.hl-ink.on .hl-ink-line {
  background-size: 100% 100%;
}

/* =====================================================
   14. SUPPORT BOX
   ===================================================== */
.support-box {
  max-width: 380px;
  margin: 0 auto;
  padding: 16px 18px 18px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(12, 22, 44, 0.10);
  border: 1px solid #eef0f4;
  font-family: inherit;
}

.support-title {
  font-size: 20px;
  font-weight: 700;
  color: #0c1423;
  text-align: center;
  margin-bottom: 14px;
}

/* Preset buttons row */
.support-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.support-btn {
  appearance: none;
  text-align: center;
  border: 1.5px solid #d8dde6;
  background: #fff;
  color: #0c1423;
  border-radius: 10px;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  outline: none;
}

.support-btn:hover {
  border-color: #b8c2d3;
}

.support-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(18, 84, 255, .18);
  border-color: #1254ff;
}

/* מחליף את הקבועים בצבעים דינמיים מה-:root של הקופסה */
.support-box .support-btn.is-active,
.support-box-support_page .support-btn.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Input section */
.support-input-wrap {
  margin-top: 8px;
}

.support-input-label {
  font-size: 12px;
  color: #6b7280;
  /* Follow the box direction: right in RTL (Hebrew), left in LTR (English).
     Was hardcoded left, so the open-by-default field's label sat on the wrong
     side on Hebrew pages. */
  text-align: start;
  margin: 0 2px 6px;
}

.support-input {
  width: 100%;
  height: 44px;
  border: 1.5px solid #e5e8ef;
  background: #f4f7fb;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 600;
  color: #0c1423;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.support-input::placeholder {
  color: #9aa3b2;
  font-weight: 500;
}

.support-input:focus {
  border-color: #1254ff;
  box-shadow: 0 0 0 3px rgba(18, 84, 255, .12);
  background: #f9fbff;
}

/* כפתור המשך (אם יש לך אחד מתחת) - דוגמה תואמת */
.support-continue {
  width: 100%;
  height: 48px;
  margin-top: 10px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .04s ease, opacity .15s ease;
}

.support-continue:active {
  transform: translateY(1px);
}

.support-continue[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

/* ==== Override with CSS variables (paste at the END) ==== */
/* ברירת מחדל אם לא הוזרק צבע מה-JS */
.support-box {
  --accent: #0c1423;
  --accent-ring: rgba(12, 20, 35, .18);
  --accent-contrast: #ffffff;
}

.support-box-support_page {
  max-width: 380px;
  margin: 0 auto;
  padding: 16px 18px 18px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(12, 22, 44, 0.10);
  border: 1px solid #eef0f4;
  font-family: inherit;
}

/* הכפתור הפעיל - רקע/מסגרת מה-accent */
.support-box .support-btn.is-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

/* גם "סכום אחר" כשהוא פעיל */
.support-box .support-btn--other.is-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

/* פוקוס טבעת/מסגרת בצבע המוצר */
.support-box .support-btn:focus-visible {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

/* אינפוט בפוקוס בצבע המוצר */
.support-box .support-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
  background: #f9fbff;
}

/* =====================================================
   15. POPUPS & MODALS (Offers, Alerts)
   ===================================================== */
/* overlay */
#offer-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* הקופסה */
.offer-popup {
  width: min(92vw, 420px);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}

/* כותרת */
.offer-popup header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  direction: rtl;
  gap: 10px;
}

.offer-popup header .title {
  font-weight: 700;
  font-size: 16px;
  color: #111;
  line-height: 1.3;
  flex: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.offer-popup .x {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* גוף (ברירת מחדל: grid אופקי) */
.offer-popup .body {
  padding: 12px;
  overflow: auto;
  direction: rtl;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: start;
}

.offer-popup .body img {
  width: 96px;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #eee;
}

.offer-popup .body .price {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 6px 0 10px 0;
}

.offer-popup .body .price .old {
  text-decoration: line-through;
  color: #666;
  font-size: 14px;
}

.offer-popup .body .price .new {
  font-weight: 800;
  font-size: 18px;
  color: #111;
}

.offer-popup .selects>* {
  width: 100%;
  margin-bottom: 10px;
}

/* פוטר */
.offer-popup footer {
  padding: 12px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.offer-popup footer button {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
}

.offer-popup .save-btn {
  background: #111;
  color: #fff;
}

.offer-popup .cancel-btn {
  background: #f2f2f2;
  color: #111;
}

/* ===================== UX polish: בלי FOUC/היילייט טאץ' ===================== */
/* מבטל את ה-highlight הכחול/אפור במובייל כשנוגעים בשטח האוברליי או בפנים */
#offer-popup-overlay,
#offer-popup-overlay * {
  -webkit-tap-highlight-color: transparent;
}

/* אין קווי מתאר/פוקוס לא יפים בתוך הפופאפ (נשאר ממוקד ונקי) */
.offer-popup :focus,
.offer-popup :focus-visible {
  outline: none;
}

/* (אופציונלי) מניעת בחירת טקסט אקראית במגע על האוברליי */
#offer-popup-overlay {
  -webkit-user-select: none;
  user-select: none;
}

/* ===================== Centered variant ===================== */
/* מפעיל לייאאוט אנכי עם תמונה ממורכזת - רק כשיש is-centered על הקופסה */
.offer-popup.is-centered .body {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px;
  direction: rtl;
  overflow: auto;
}

.offer-popup.is-centered .body img {
  width: min(70vw, 240px);
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #eee;
  display: block;
  margin: 0 auto;
}

.offer-popup.is-centered .body .price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 12px 0;
}

.offer-popup.is-centered .selects {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.offer-popup.is-centered .selects>* {
  width: 100%;
  margin-bottom: 10px;
}

/* ===================== (אופציונלי) קוסמטיקה קלה ===================== */
/* מעבר רך כשנפתח (למנוע "הבזק") */
#offer-popup-overlay {
  opacity: 0;
  animation: offerOverlayFade .12s ease-out forwards;
}

@keyframes offerOverlayFade {
  to {
    opacity: 1;
  }
}

.offer_options_headers {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 6px 0;
}

.offer_option_header_item {
  appearance: none;
  border: 0;
  background: #f5f5f5;
  color: #333;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.offer_option_header_item:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .1);
}

/* ===== Product Page - Compare Table ===== */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 14px 0;
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}

.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  direction: inherit;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  font-size: 15px;
}

.tbl th,
.tbl td {
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f4;
  text-align: start;
  vertical-align: middle;
  line-height: 1.4;
}

.tbl tr:last-child th,
.tbl tr:last-child td {
  border-bottom: 0;
}

/* Round the 4 corner cells (logical properties → auto-flips in RTL) */
.tbl>thead>tr:first-child>th:first-child,
.tbl>tbody>tr:first-child>td:first-child,
.tbl>tr:first-child>td:first-child {
  border-start-start-radius: 14px;
}

.tbl>thead>tr:first-child>th:last-child,
.tbl>tbody>tr:first-child>td:last-child,
.tbl>tr:first-child>td:last-child {
  border-start-end-radius: 14px;
}

.tbl>tbody>tr:last-child>td:first-child,
.tbl>tr:last-child>td:first-child {
  border-end-start-radius: 14px;
}

.tbl>tbody>tr:last-child>td:last-child,
.tbl>tr:last-child>td:last-child {
  border-end-end-radius: 14px;
}

.tbl thead th {
  background: linear-gradient(180deg, #f7f8fc 0%, #eef0f6 100%);
  color: #1f2937;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-bottom: 2px solid #e0e3eb;
}

.tbl tbody tr:nth-child(even) td {
  background: #fafbfd;
}

.tbl tbody tr:hover td {
  background: #f3f5fa;
  transition: background 0.15s ease;
}

/* תמונות בתוך טבלה */
.tbl .table-img {
  max-width: 80px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
}

/* מצב השוואה: גריד נקי + הדגשת סימנים */
.tbl-compare th,
.tbl-compare td {
  text-align: center;
}

.tbl-compare tbody tr td:first-child,
.tbl-compare tbody tr td:nth-child(2) {
  width: 56px;
  font-weight: 700;
}

/* Check/cross marks */
.cmp-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  border-radius: 50%;
}

.cmp-mark.tick {
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.35);
}

.cmp-mark.cross {
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
}

.cmp-mark.plain {
  background: transparent;
  box-shadow: none;
  width: auto;
  height: auto;
}

/* מובייל: שורות קומפקטיות */
@media (max-width: 640px) {

  .tbl {
    font-size: 14px;
  }

  .tbl th,
  .tbl td {
    padding: 10px 12px;
  }

  .tbl thead th {
    font-size: 12px;
    letter-spacing: 0.2px;
  }

  .tbl .table-img {
    max-width: 64px;
  }

  .cmp-mark {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}

.Box_Payment_payplus {
  justify-content: space-between;
  display: flex;
  border-radius: 4px;
  border: 1px solid #c1c1c1;
  padding: 0% 4% 0% 2%;
}

/* =====================================================
   17. FACEBOOK POST SLIDER
   ===================================================== */
.fbp-slider {
  max-width: 700px;
  margin: 0 auto;
}

.fbp-track::-webkit-scrollbar {
  display: none;
}

.fbp-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 10px 0 0;
}

.fbp-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #cfd4d9;
  cursor: pointer;
}

.fbp-dots .dot.active {
  width: 18px;
  background: #2374E1;
  transition: width .2s ease;
}

.fbp-card {
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.fbp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.fbp-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.fbp-h-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.fbp-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fbp-name {
  font-weight: 600;
}

.fbp-verified svg {
  display: block;
}

.fbp-line2 {
  color: #606770;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fbp-dot {
  opacity: .7;
}

.fbp-more {
  margin-inline-start: auto;
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #606770;
}

.fbp-text {
  padding: 0 12px 10px;
  font-size: 15px;
}

.fbp-media {
  background: #000;
}

.fbp-img {
  width: 100%;
  height: auto;
  display: block;
}

.fbp-counters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  color: #606770;
  border-top: 1px solid #eef0f2;
}

.fbp-counters .fbp-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fbp-reactions {
  display: inline-flex;
  gap: 2px;
  font-size: 14px;
}

.fbp-actions {
  display: flex;
  justify-content: space-around;
  gap: 6px;
  padding: 6px 6px 10px;
  border-top: 1px solid #eef0f2;
}

.fbp-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 8px 0;
  cursor: pointer;
  color: #1d2129;
  font-weight: 600;
  font-size: 14px;
}

.fbp-btn svg {
  opacity: .8;
}

.fbp-btn:hover {
  background: #f2f3f5;
}

.fbp-like.is-liked {
  color: #2374E1;
}

.ba-label {
  position: absolute;
  top: 10px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  backdrop-filter: saturate(140%) blur(2px);
  user-select: none;
  pointer-events: none;
  line-height: 1;
  max-width: min(48%, 240px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* חדש: לפני תמיד שמאל, אחרי תמיד ימין */
[dir="rtl"] .ba-label-before {
  left: 10px;
}

[dir="rtl"] .ba-label-after {
  right: 10px;
}

[dir="ltr"] .ba-label-before {
  left: 10px;
}

[dir="ltr"] .ba-label-after {
  right: 10px;
}

/* =====================================================
   HEADER LAYOUT FIX - RTL/LTR Support
   ===================================================== */

/* LTR Layout (English) - Logo left, Menu center, Icons right */
.header_container.header-ltr {
  flex-direction: row;
  padding: 0% 2% 0% 2%;
}

.header_container.header-ltr .logo {
  order: 1;
  text-align: left;
  margin: 0;
  width: auto;
}

.header_container.header-ltr .button.right {
  order: 2;
  width: auto;
  flex: 1;
  display: flex;
  justify-content: center;
}

.header_container.header-ltr .button.left {
  order: 3;
  width: auto;
  text-align: right;
}

.header_container.header-ltr .button.left>div {
  justify-content: flex-end;
}

/* RTL Layout (Hebrew) - Icons left, Menu center, Logo right */
.header_container.header-rtl {

  padding: 0% 2% 0% 2%;
  flex-direction: row-reverse;

}

.header_container.header-rtl .button.left {
  order: 1;
  text-align: left;
}

.header_container.header-rtl .button.right {
  order: 2;
  width: auto;
  flex: 1;
  display: flex;
  justify-content: center;
}

.header_container.header-rtl .logo {
  order: 3;
  text-align: right;
  margin: 0;
}

/* Menu nav container - center alignment */
.header_container .u-nav-container {
  display: flex;
  justify-content: center;
}

.header_container .u-nav {
  display: flex;
  gap: 5px;
  align-items: baseline;
}

/* =====================================================
   CART ICON NUMBER FIX - Position relative parent
   ===================================================== */

/* Make parent relative so absolute positioning works */
.u-shopping-cart-icon {
  position: relative !important;
  display: inline-block;
}

#Cart_icon {
  position: relative;
}

/* RTL - number on left side of cart icon */
.header-rtl #cart_icon_number {
  right: auto;
  left: 0;
  transform: translate(50%, 78%);
}

/* LTR - number on right side of cart icon */
.header-ltr #cart_icon_number {
  left: auto;
  right: 0;
  transform: translate(-50%, 78%);
}

/* =====================================================
   NAV POPUP (Categories Dropdown) - RTL/LTR Support
   ===================================================== */

/* RTL - dropdown opens to the right */
.header-rtl .u-nav-container .u-nav-popup {
  left: auto;
  right: 0;
}

/* LTR - dropdown opens to the left */
.header-ltr .u-nav-container .u-nav-popup {
  right: auto;
  left: 0;
}

/* =====================================================
   PRODUCT PAGE LAYOUT - RTL/LTR Support
   ===================================================== */

/* RTL (Hebrew) - Images RIGHT, Details LEFT */
/* gap: 20px to match the editor-built row gap (set in product_core.js
   case "row"). Before: gap was 5% (60-96px on typical desktop widths),
   which made the hero image+details split feel detached from the
   editor-built section rows below it (image+text columns there use
   20px gap). Now both sit on the same horizontal rhythm. */
.header-rtl~#in_app #main_page_product,
html[dir="rtl"] #main_page_product,
body.rtl #main_page_product {

  flex-direction: row-reverse;
  display: flex;
  gap: 20px;
  justify-content: center;

}



/* LTR (English) - Images LEFT, Details RIGHT */
.header-ltr~#in_app #main_page_product,
html[dir="ltr"] #main_page_product,
body.ltr #main_page_product {

  flex-direction: row-reverse;
  display: flex;
  gap: 20px;
  justify-content: center;

}

html[dir="ltr"] #modal_widget_gallery {
  flex-direction: row-reverse;


}

/* =====================================================
   CART QUANTITY BUTTONS - RTL/LTR Border Radius Fix
   ===================================================== */

/* LTR (English) - swap border radius since buttons are reversed */
body.ltr .ButtonDown_Quantity_cart_page,
html[dir="ltr"] .ButtonDown_Quantity_cart_page {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0.2625rem;
  border-bottom-left-radius: 0.2625rem;
}

body.ltr .ButtonUP_Quantity_cart_page,
html[dir="ltr"] .ButtonUP_Quantity_cart_page {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0.2625rem;
  border-bottom-right-radius: 0.2625rem;
}

nagishli#NagishLiTag>#NagishLiBar>#NagishLiBarStrip {
  display: inline-block;
  color: white !important;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer !important;
  background: #e8e6ff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
  padding: 1px !important;
}

nagishli#NagishLiTag>#NagishLiBar {
  inset: 65% auto 0vh 0px !important;
}

nagishli#NagishLiTag>#NagishLiBar>#NagishLiMenus {
  min-width: 251px !important;
  overflow: SCROLL !important;
  height: 75% !important;
}

nagishli#NagishLiTag>#NagishLiBar>#NagishLiMenus>.nl-dropdown>.nl-dropdown-toggle {
  padding: 10px 6px 0px 0px !important;
}

.offer_select_dropdown,
.bundle_select_dropdown {
  max-width: 140px;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: #333;
  background-color: #fff;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  transition: border-color .2s;
}

.offer_select_dropdown:focus,
.bundle_select_dropdown:focus {
  border-color: #888;
}

/* ═══════════════════════════════════════════════════
   BUNDLE TIER REWARDS (Free Shipping + Discount)
   ═══════════════════════════════════════════════════ */
.bundle-reward-card .bundle-reward-img,
.bundle-reward-item .bundle-reward-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  color: #16a34a;
}

.bundle-reward-unlocked {
  background: #fff;
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: 10px;
}

.bundle-reward-unlocked .bundle-reward-label {
  font-weight: 700;
  font-size: 13px;
}

.bundle-reward-unlocked .bundle-reward-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-block;
  margin-top: 4px;
}

.bundle-reward-teaser {
  opacity: 0.75;
  border: 2px dashed #ccc;
  border-radius: 10px;
  background: #fafafa;
}

.bundle-reward-teaser .bundle-reward-img-locked {
  filter: grayscale(1);
  opacity: 0.55;
}

.bundle-reward-teaser .bundle-gift-teaser-text {
  font-size: 11px;
  color: #888;
  font-weight: 600;
}

.bundle-gifts-row .bundle-reward-item,
.bundle-gifts-row-vertical .bundle-reward-card,
.bundle-gifts-row-horizontal .bundle-reward-card {
  display: flex;
  align-items: center;
}

.bundle-gifts-row-horizontal .bundle-reward-card {
  flex-direction: row;
  gap: 12px;
  padding: 10px 12px;
}

.bundle-gifts-row-vertical .bundle-reward-card {
  flex-direction: column;
  gap: 6px;
  text-align: center;
  padding: 10px;
}

.bundle-gifts-row .bundle-reward-item {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
}

/* ==================================================
   STICKY CART BAR (admin: general.sticky_cart_mode)
   On desktop, constrain max width and center for a less intrusive UX.
   ================================================== */
.sticky-cart-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translate(-50%, calc(100% + 32px));
  width: min(560px, calc(100% - 32px));
  z-index: 9998;
  background: #ffffff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 250ms ease, opacity 200ms ease;
  opacity: 0;
  pointer-events: none;
}

.sticky-cart-bar.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.sticky-cart-bar__price {
  font-weight: 700;
  font-size: 18px;
  flex: 0 0 auto;
  color: #111;
  white-space: nowrap;
}

.sticky-cart-bar__price:empty {
  display: none;
}

.sticky-cart-bar__btn {
  flex: 1 1 auto;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  min-height: 46px;
  line-height: 1;
}

.sticky-cart-bar__btn:hover {
  filter: brightness(1.08);
}

.sticky-cart-bar__btn:active {
  filter: brightness(0.92);
}
/* ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ
   Gift design 5 — attach the gifts to the SELECTED TIER.
   The gifts block is injected after .bundle-container, so by default it read
   as separate floating cards under the bundle. These rules make it look like
   one continuous card: no gap, the tier's border carries on down the sides,
   only the bottom corners are rounded, and the individual gift cards lose
   their own frame so they sit inside that box.
   Same idea the mobile-stacked variant already used.
   ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ׳’ג€¢ֲ */
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) {

  border: 1px solid #ddd !important;
  border-top: 0 !important;               /* the tier's own bottom edge is the divider */
  border-radius: 0 0 10px 10px !important;
  box-shadow: none !important;
}

/* Cards inside the attached box: no separate frame, just rows. */
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-gift-card,
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-reward-card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* A hairline between stacked gift rows keeps them readable without boxing them. */
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-gift-card + .bundle-gift-card,
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-gift-card + .bundle-reward-card,
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-reward-card + .bundle-gift-card {
  border-top: 1px dashed #eee !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   Gift card options (design 5, desktop): pair each option LABEL with its own
   dropdown. The markup puts the labels in .offer_options_headers and the
   selects in .bundle-gift-options — two separate rows, so "צבע / מידה" ended
   up clustered on one side with both dropdowns underneath and no way to tell
   which belongs to which. `display:contents` lifts the buttons and selects out
   of their wrappers so they become items of one grid: every label lands in the
   same column as its own select.
   ═══════════════════════════════════════════════════════════════════════ */
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-gift-card-info {
  display: grid !important;
  grid-template-columns: repeat(var(--gift-opt-cols, 2), minmax(0, 1fr));
  gap: 4px 8px;
  align-items: center;
}

/* The product name keeps the full width above the options. */
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-gift-card-info .bundle-gift-name {
  grid-column: 1 / -1;
}

/* Let the labels and the selects become direct grid items. */
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .offer_options_headers,
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-gift-options {
  display: contents !important;
}

/* Label sits right above its dropdown, same column, same width. */
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .offer_option_header_item {
  justify-self: stretch;
  text-align: center;
  margin: 0 !important;
}

.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-gift-option-select {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   Separate one gift from the next with a thin line instead of empty space.
   The 6px gap left the cards floating; a hairline reads as "these belong to
   the same box, but they are different gifts". Applies to every gift/reward
   card after the first, so there is no stray line above the first one.
   ═══════════════════════════════════════════════════════════════════════ */
.bundle-gifts-row-horizontal {
  gap: 0 !important;
}

.bundle-gifts-row-horizontal > * + * {
  border-top: 1px solid #e9e9e9;
  padding-top: 8px;
  margin-top: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════
   Corrections to the desktop gift card:
   1. The option chips (צבע / מידה) were stretching to the full column because
      grid items default to justify-self:stretch — keep them small like mobile.
   2. Same for the "free gift" badge.
   3. The divider line never showed: the design-5 block resets the cards with
      `border: 0 !important`, which also wiped the border-top of the separator.
      Re-assert it with !important so the hairline wins.
   ═══════════════════════════════════════════════════════════════════════ */
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .offer_option_header_item {
  justify-self: start !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
}

.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-gift-badge,
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-gift-free-badge {
  justify-self: start !important;
  width: auto !important;
  display: inline-block !important;
  grid-column: auto !important;
}

/* The thin line between one gift and the next (beats the card border reset). */
.bundle-gifts-row-horizontal > * + *,
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-gift-card + .bundle-gift-card,
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-gift-card + .bundle-reward-card,
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-reward-card + .bundle-gift-card {
  border-top: 1px solid #e0e0e0 !important;
  padding-top: 8px !important;
  margin-top: 8px !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   Desktop gift card: the two option columns were `1fr` each, so they split
   the FULL card width and the dropdowns ended up far apart. Size the columns
   to their content and pack them together at the start — compact pairs,
   like mobile. Selects get a sane fixed-ish width instead of 100%.
   ═══════════════════════════════════════════════════════════════════════ */
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-gift-card-info {
  grid-template-columns: repeat(var(--gift-opt-cols, 2), max-content) !important;
  justify-content: start;
  gap: 4px 10px;
}

.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked) .bundle-gift-option-select {
  width: auto !important;
  min-width: 120px !important;
  max-width: 180px !important;
}

/* Products with 1 or 3 options keep label↔select alignment (default is 2). */
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked)
  .bundle-gift-card-info:has(.bundle-gift-option-select:first-of-type:last-of-type) {
  --gift-opt-cols: 1;
}
.bundle-gifts-inline-horizontal:not(.bundle-gifts-mobile-stacked)
  .bundle-gift-card-info:has(.bundle-gift-option-select:nth-of-type(3)) {
  --gift-opt-cols: 3;
}



/* =====================================================
   PAYMENT METHOD ROWS - modern card rows
   -----------------------------------------------------
   One rule set for every gateway. Each row carries
   .pay-row alongside its .Box_Payment_* class (the class
   attribute must still START with Box_Payment - that is
   what resetPaymentUI() selects on).

   The SELECTED state is still painted inline by
   activatePayment() with the store accent colour, so the
   border width below is 2px to match: switching rows must
   not shift the layout by a pixel.
   ===================================================== */
.pay-row {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 10px 16px;
  margin-bottom: 10px;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.pay-row:hover {
  border-color: #cbd5e1;
}

/* Row body: radio, label, then icons pushed to the far end. */
.pay-row .Box_Payment_text {
  width: 100%;
  gap: 10px;
  justify-content: flex-start;
}

.pay-row .text_and_icon_card {
  flex: 0 0 auto;
}

/* Was an inline margin-<side>:auto on every row; owned by CSS now so it
   flips correctly for RTL without the template re-writing the style. */
.pay-row .pay-row-label {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.pay-row .credit_card_text {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Brand marks sit at the end of the row and never wrap. */
.pay-row .card-icons {
  flex: 0 0 auto;
  margin-inline-start: auto;
  gap: 8px;
}

.pay-row .card-icons .pay-icon {
  height: 24px;
}

@media (max-width: 480px) {
  .pay-row {
    padding: 10px 12px;
    min-height: 52px;
  }
  .pay-row .card-icons .pay-icon {
    height: 20px;
  }
}

/* The PayPal "Credit/Debit Card" row is not a .pay-row card, so the plain
   .Box_Payment_text (space-between over radio / label / icons) left its label
   floating mid-row. Same alignment as the other rows: the label right after the
   radio (the start side, so also in RTL), the icons at the far end, and a long
   label wraps instead of running under the icons. */
.Box_Payment_Paypal_card .Box_Payment_text>.pay-row-label {
  flex: 1 1 auto;
  min-width: 0;
  margin-inline-start: 10px;
  margin-inline-end: 10px;
}

.Box_Payment_Paypal_card .Box_Payment_text>.pay-row-label .credit_card_text {
  white-space: normal;
}