/* =========================================================
   ORBITS GIFTS — MASTER CSS — MODERN FONT + SAFE WHATSAPP V32
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800;900&display=swap");


/* =========================================================
   01 — GLOBAL
   ========================================================= */

html,
body {
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box;
}


/* =========================================================
   02 — HEADER
   ========================================================= */

header svg,
header i,
header .icon,
header button {
  opacity: 1 !important;
  visibility: visible !important;
}

header .container,
header .main-nav-container,
header .navbar {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

header .logo img,
header .navbar-brand img,
header img[alt*="logo" i] {
  width: auto;
  max-height: 49px !important;
  object-fit: contain;
}

header .header-actions button,
header .header-actions a {
  transform: scale(.9);
  transform-origin: center;
}


/* =========================================================
   03 — INSTAGRAM
   ========================================================= */

.orbits-instagram-link {
  width: auto;
  min-width: 132px;
  height: 40px;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;

  flex: 0 0 auto;

  padding: 0 14px;

  border: 0;
  border-radius: 999px;

  background:
    linear-gradient(
      45deg,
      #feda75 0%,
      #fa7e1e 22%,
      #d62976 48%,
      #962fbf 72%,
      #4f5bd5 100%
    ) !important;

  color: #fff !important;
  text-decoration: none !important;

  box-shadow:
    0 5px 14px rgba(214, 41, 118, .28);

  font-size: 13px;
  line-height: 1;
  font-weight: 900;

  direction: rtl;
  white-space: nowrap;

  opacity: 1 !important;
  visibility: visible !important;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

.orbits-instagram-link:hover {
  opacity: 1 !important;
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow:
    0 7px 18px rgba(214, 41, 118, .34);
}

.orbits-instagram-link svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: currentColor;
}

.orbits-instagram-link span {
  display: inline-block;
  color: inherit;
  font: inherit;
  line-height: 1;
}


/* =========================================================
   04 — SECOND HERO TEXT BOX
   ========================================================= */

.orbits-hero-sidebox {
  position: absolute !important;

  left: 12.5% !important;
  right: auto !important;

  top: 23% !important;

  width: 29% !important;
  max-width: 190px !important;

  min-height: 145px !important;

  transform: none !important;

  padding: 16px 12px !important;

  border-radius: 14px !important;

  background: rgba(248, 245, 235, .94) !important;

  color: #174f3d !important;

  font-weight: 900 !important;
  font-size: 23px !important;
  line-height: 1.35 !important;

  direction: rtl !important;

  text-align: center !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  z-index: 40 !important;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, .15) !important;

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}


/* =========================================================
   05 — QUANTITY SAVING BANNER
   ========================================================= */

.orbits-qty-banner {
  direction: rtl;
  position: relative;

  width: min(1050px, calc(100% - 28px));

  margin: 22px auto 28px;
  padding: 17px 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 11px;

  overflow: hidden;

  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.025)
    ),
    #168b83;

  color: #fff;

  box-shadow:
    0 10px 28px rgba(0,0,0,.11);
}

.orbits-qty-banner::before {
  content: "";

  position: absolute;
  inset: -80%;

  background:
    linear-gradient(
      110deg,
      transparent 39%,
      rgba(255,255,255,.26) 50%,
      transparent 61%
    );

  transform: translateX(-80%);
  animation: orbitsQtyShine 4.5s ease-in-out infinite;
}

.orbits-qty-banner > * {
  position: relative;
  z-index: 2;
}

.orbits-qty-icon {
  font-size: 27px;
  line-height: 1;

  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;
}

.orbits-qty-text {
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.35;
  font-weight: 900;
}

.orbits-qty-badge {
  padding: 6px 13px;

  border-radius: 999px;

  background: #fff;
  color: #168b83;

  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

@keyframes orbitsQtyShine {

  0%,
  72% {
    transform: translateX(-80%);
  }

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


/* =========================================================
   06 — PRODUCT CARDS
   ========================================================= */

.s-product-card-entry,
.product-card,
.product-entry {
  display: flex;
  flex-direction: column;
}

.s-product-card-content,
.product-card .content,
.product-entry .content {
  display: flex;
  flex-direction: column;
}

.s-product-card-content-title,
.product-card .product-title,
.product-entry .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  line-height: 1.45;
}

.s-product-card-image img,
.product-card img,
.product-entry img {
  width: 100%;
  object-fit: contain;
}


/* =========================================================
   07 — WHATSAPP
   ========================================================= */

.orbits-whatsapp {
  direction: rtl;

  position: fixed;

  right: 18px;
  bottom: 18px;

  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 11px 17px;

  border-radius: 999px;

  background: #25D366;
  color: #fff !important;

  text-decoration: none !important;

  font-size: 14px;
  font-weight: 800;

  box-shadow:
    0 8px 25px rgba(0,0,0,.20);
}

.orbits-whatsapp:hover {
  transform: translateY(-2px);
}

.orbits-whatsapp svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}


/* =========================================================
   08 — DESKTOP WIDTH
   ========================================================= */

@media (min-width: 1500px) {

  .container {
    max-width: 1450px;
  }

}


/* =========================================================
   09 — MOBILE
   ========================================================= */

@media (max-width: 767px) {


  /* HEADER */

  header .container,
  header .main-nav-container,
  header .navbar {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  header .logo img,
  header .navbar-brand img,
  header img[alt*="logo" i] {
    max-height: 42px !important;
  }

  .orbits-instagram-link {
    width: auto;
    min-width: 112px;
    height: 36px;
    flex-basis: auto;
    padding: 0 11px;
    gap: 6px;
    font-size: 11.5px;
  }

  .orbits-instagram-link svg {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }


  /* =======================================================
     SECOND HERO BOX
     ANOTHER 15% TO THE RIGHT
     ======================================================= */

  .orbits-hero-sidebox {

    left: 12.5% !important;
    right: auto !important;

    top: 20% !important;

    width: 30% !important;
    max-width: none !important;

    min-height: 155px !important;

    padding: 12px 7px !important;

    border-radius: 11px !important;

    font-size: 17px !important;
    line-height: 1.35 !important;

    font-weight: 900 !important;

    text-align: center !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }


  /* QUANTITY BANNER */

  .orbits-qty-banner {
    width: calc(100% - 18px);

    margin: 12px auto 16px;
    padding: 10px 8px;

    gap: 5px;

    border-radius: 10px;
  }

  .orbits-qty-text {
    font-size: 14px;
  }

  .orbits-qty-icon {
    font-size: 17px;
  }

  .orbits-qty-badge {
    display: none;
  }


  /* PRODUCT SLIDER */

  salla-products-slider .swiper-slide,
  .products-slider .swiper-slide,
  .s-products-slider-wrapper .swiper-slide {

    width: 45% !important;
    flex: 0 0 45% !important;

    height: auto !important;
    align-self: flex-start !important;
  }


  /* PRODUCT GRID */

  salla-products-list .grid,
  .products-grid,
  .products-container {

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 7px !important;
  }


  /* PRODUCT CARD */

  .s-product-card-entry,
  .product-card,
  .product-entry {

    height: auto !important;
    min-height: 0 !important;

    display: block !important;

    border-radius: 7px !important;
    overflow: hidden !important;
  }


  /* PRODUCT IMAGE */

  .s-product-card-image {

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    /* Unified square thumbnail on phones */
    aspect-ratio: 1 / 1 !important;

    overflow: hidden !important;

    background: #f7f7f7 !important;
  }

  .s-product-card-image img {

    width: 100% !important;
    height: 100% !important;

    /* Fill the square instead of leaving empty side space */
    object-fit: cover !important;
    object-position: center center !important;

    display: block !important;
  }


  /* HEART */

  .s-product-card-image .s-button-element,
  .s-product-card-wishlist-btn,
  .s-product-card-image button {

    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;
    min-height: 24px !important;

    padding: 4px !important;
  }

  .s-product-card-image button svg,
  .s-product-card-wishlist-btn svg {

    width: 12px !important;
    height: 12px !important;
  }


  /* CONTENT */

  .s-product-card-content {

    display: block !important;
    flex: none !important;

    padding: 5px !important;

    min-height: 0 !important;
    height: auto !important;

    text-align: center !important;
  }


  /* TITLE */

  .s-product-card-content-title {

    width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 auto 3px !important;
    padding: 0 !important;

    font-size: 9px !important;
    line-height: 1.3 !important;

    font-weight: 600 !important;

    text-align: center !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    overflow: hidden !important;
  }

  .s-product-card-content-title a,
  .s-product-card-content-title span {

    width: 100% !important;
    display: block !important;

    text-align: center !important;
  }


  /* PRICE */

  .s-product-card-price,
  .product-card .product-price,
  .product-entry .product-price {

    width: 100% !important;

    margin: 2px auto 3px !important;
    padding: 0 !important;

    font-size: 9px !important;
    line-height: 1.15 !important;

    min-height: 0 !important;
    height: auto !important;

    text-align: center !important;
  }


  /* FOOTER */

  .s-product-card-content-footer {

    width: 100% !important;

    margin: 3px auto 0 !important;
    padding: 0 !important;

    min-height: 0 !important;
    height: auto !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }


  /* ADD TO CART */

  .s-product-card-content-footer button,
  .s-product-card-entry .s-button-element {

    min-height: 25px !important;
    height: 25px !important;

    padding: 2px 5px !important;

    border-radius: 6px !important;

    font-size: 8.5px !important;
    line-height: 1 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    text-align: center !important;
  }

  .s-product-card-content-footer button svg,
  .s-product-card-content-footer .s-button-element svg {

    width: 11px !important;
    height: 11px !important;

    margin-inline-start: 2px !important;
  }

  .s-product-card-content > * {
    flex-grow: 0 !important;
  }


  /* WHATSAPP */

  .orbits-whatsapp {

    right: 10px;
    bottom: 12px;

    padding: 7px 10px;

    font-size: 11px;
  }

  .orbits-whatsapp svg {

    width: 16px;
    height: 16px;
  }

}


/* =========================================================
   10 — TEACHER CARD ORDER FLOW — V24 ULTRA SIMPLE
   Products: p1394961856 + p1539639658 + p1955384505 + p333075094
   ========================================================= */

/* Hide Salla's old personalization fields.
   JavaScript keeps them populated behind the scenes so required
   native fields cannot block Add to Cart. */
.orbits-native-personalization-field {
  display: none !important;
}

/* V29: Salla's native quantity/price/purchase controls are intentionally untouched. */

.orbits-teacher-personalizer {
  direction: rtl;
  display: block !important;
  width: 100%;
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid rgba(23, 79, 61, .13);
  border-radius: 15px;
  background: #fbfaf6;
}

.orbits-card-mode-picker {
  direction: rtl;
  margin: 0;
}

.orbits-card-mode-heading {
  margin: 0 0 9px;
  color: #172522;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 900;
  text-align: right;
}

.orbits-card-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.orbits-card-mode-option {
  position: relative;
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid #d8dfdc;
  border-radius: 12px;
  background: #fff;
  color: #172522;
  text-align: right;
  cursor: pointer;
  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.orbits-card-mode-option:hover {
  border-color: rgba(22, 139, 131, .48);
  transform: translateY(-1px);
}

.orbits-card-mode-option.is-active {
  border-color: #168b83;
  background: #f0faf7;
  box-shadow: 0 0 0 2px rgba(22, 139, 131, .08);
}

.orbits-card-mode-check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border: 1px solid #cdd7d3;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-size: 12px;
  font-weight: 900;
}

.orbits-card-mode-option.is-active .orbits-card-mode-check {
  border-color: #168b83;
  background: #168b83;
  color: #fff;
}

.orbits-card-mode-copy {
  min-width: 0;
  display: block;
}

.orbits-card-mode-title {
  display: block;
  margin-bottom: 3px;
  color: #172522;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
}

.orbits-card-mode-option[data-mode="custom"] .orbits-card-mode-title {
  color: #168b83;
}

.orbits-card-mode-desc {
  display: block;
  color: #747b78;
  font-size: 10.5px;
  line-height: 1.45;
  font-weight: 650;
}

.orbits-simple-custom-panel {
  margin-top: 11px;
  padding: 11px;
  border: 1px solid rgba(22, 139, 131, .14);
  border-radius: 12px;
  background: #fff;
}

.orbits-simple-custom-panel[hidden] {
  display: none !important;
}

.orbits-simple-names-label,
.orbits-simple-sender-label {
  display: block;
  margin: 0 0 7px;
  color: #174f3d;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 900;
  text-align: right;
}

.orbits-simple-names-input,
.orbits-simple-sender-input {
  width: 100%;
  min-height: 128px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #d6dcda;
  border-radius: 11px;
  background: #fff;
  color: #111;
  font-size: 16px;
  line-height: 1.65;
  direction: rtl;
  text-align: right;
  outline: none;
  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.orbits-simple-names-input::placeholder,
.orbits-simple-sender-input::placeholder {
  color: #a0a0a0;
  opacity: 1;
}

.orbits-simple-names-input:focus,
.orbits-simple-sender-input:focus {
  border-color: #168b83;
  box-shadow: 0 0 0 3px rgba(22, 139, 131, .09);
}

.orbits-simple-sender-label {
  margin-top: 11px;
}

.orbits-simple-sender-input {
  min-height: 46px;
  resize: none;
}

.orbits-simple-help {
  margin-top: 7px;
  color: #6d7471;
  font-size: 10.5px;
  line-height: 1.5;
  font-weight: 700;
  text-align: right;
}

.orbits-simple-save-status {
  min-height: 16px;
  margin-top: 5px;
  color: #168b83;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 800;
  text-align: right;
}

/* Legacy preview/tree elements are intentionally suppressed in V24. */
.orbits-family-flow,
.orbits-personalizer-head,
.orbits-add-child,
.orbits-preview-section,
.orbits-cart-teacher-preview {
  display: none !important;
}

@media (max-width: 767px) {

  .orbits-teacher-personalizer {
    margin: 11px 0 15px;
    padding: 9px;
    border-radius: 13px;
  }

  .orbits-card-mode-heading {
    font-size: 14px;
  }

  .orbits-card-mode-options {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .orbits-card-mode-option {
    min-height: 62px;
    padding: 9px 10px;
  }

  .orbits-card-mode-title {
    font-size: 12px;
  }

  .orbits-card-mode-desc {
    font-size: 10px;
  }

  .orbits-simple-custom-panel {
    margin-top: 9px;
    padding: 9px;
  }

  .orbits-simple-names-input,
  .orbits-simple-sender-input {
    min-height: 120px;
    font-size: 16px;
  }

}


/* =========================================================
   11 — RESTORED TEACHER'S DAY CAMPAIGN LAYER — V28
   Restored from the previous V26/V27 campaign version.
   The V24 simple order flow below/above remains authoritative.
   ========================================================= */

/* =========================================================
   12 — TEACHER'S DAY PROMO THEME
   ========================================================= */

.orbits-teacher-promo-bar {
  direction: rtl;
  position: relative;
  z-index: 9998;
  width: 100%;
  background:
    linear-gradient(
      100deg,
      #174f3d 0%,
      #1f6951 52%,
      #9b7442 100%
    );
  color: #fff;
  box-shadow: 0 2px 12px rgba(23, 79, 61, .14);
}

.orbits-teacher-promo-bar-inner {
  width: min(1220px, calc(100% - 24px));
  min-height: 48px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 7px 0;
}

.orbits-teacher-promo-icon {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

.orbits-teacher-promo-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.orbits-teacher-promo-copy strong {
  font-size: 13px;
  font-weight: 900;
}

.orbits-teacher-promo-copy span {
  opacity: .92;
  white-space: nowrap;
}

.orbits-teacher-promo-copy b {
  display: inline-block;
  margin-right: 3px;
  padding: 2px 7px;
  border: 1px dashed rgba(255,255,255,.6);
  border-radius: 6px;
  background: rgba(255,255,255,.10);
  color: #fff;
  font-family: "Tajawal", Arial, sans-serif;
  letter-spacing: .4px;
}

.orbits-coupon-copy-button,
.orbits-teacher-hero-coupon button,
.orbits-showcase-coupon button,
.orbits-teacher-urgency-coupon button {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.orbits-coupon-copy-button--bar {
  flex: 0 0 auto;
  min-height: 31px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  color: #174f3d;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 3px 12px rgba(0,0,0,.10);
}

.orbits-coupon-copy-button.is-copied,
.orbits-teacher-hero-coupon button.is-copied,
.orbits-showcase-coupon button.is-copied,
.orbits-teacher-urgency-coupon button.is-copied {
  background: #174f3d !important;
  color: #fff !important;
}

/* --- campaign hero --- */

.orbits-teacher-campaign-hero {
  direction: rtl;
  width: min(1180px, calc(100% - 28px));
  margin: 22px auto 24px;
}

.orbits-teacher-campaign-hero-inner {
  position: relative;
  overflow: hidden;
  padding: 30px 34px;
  border: 1px solid rgba(155, 116, 66, .20);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(200, 155, 90, .18),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 85%,
      rgba(22, 139, 131, .13),
      transparent 32%
    ),
    #fbf7ee;
  text-align: center;
  box-shadow: 0 13px 38px rgba(50, 45, 35, .08);
}

.orbits-teacher-campaign-hero-inner::before,
.orbits-teacher-campaign-hero-inner::after {
  content: "✦";
  position: absolute;
  color: rgba(155, 116, 66, .25);
  font-size: 38px;
  line-height: 1;
  pointer-events: none;
}

.orbits-teacher-campaign-hero-inner::before {
  top: 17px;
  right: 24px;
}

.orbits-teacher-campaign-hero-inner::after {
  left: 27px;
  bottom: 17px;
  font-size: 28px;
}

.orbits-teacher-campaign-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(23, 79, 61, .08);
  color: #174f3d;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
}

.orbits-teacher-campaign-hero h2 {
  max-width: 720px;
  margin: 0 auto 8px;
  color: #173d31;
  font-size: clamp(25px, 3vw, 39px);
  line-height: 1.28;
  font-weight: 950;
}

.orbits-teacher-campaign-hero p {
  max-width: 680px;
  margin: 0 auto;
  color: #6f6a61;
  font-size: clamp(13px, 1.5vw, 17px);
  line-height: 1.7;
  font-weight: 650;
}

.orbits-teacher-campaign-actions {
  margin-top: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
}

.orbits-teacher-campaign-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 19px;
  border-radius: 11px;
  background: #168b83;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(22, 139, 131, .20);
}

.orbits-teacher-hero-coupon {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 8px 7px 12px;
  border: 1px dashed rgba(155, 116, 66, .45);
  border-radius: 11px;
  background: rgba(255,255,255,.72);
  color: #6e5637;
  font-size: 10.5px;
  font-weight: 800;
}

.orbits-teacher-hero-coupon b {
  color: #174f3d;
  font-family: "Tajawal", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .45px;
}

.orbits-teacher-hero-coupon button {
  min-height: 29px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #eadfc9;
  color: #5d482e;
  font-size: 9.5px;
  font-weight: 900;
}

/* --- teacher product showcase --- */

.orbits-teacher-products-showcase {
  direction: rtl;
  width: min(1180px, calc(100% - 28px));
  margin: 22px auto 26px;
  padding: 21px;
  border: 1px solid rgba(23, 79, 61, .10);
  border-radius: 20px;
  background: #fffdf8;
}

.orbits-teacher-products-showcase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}

.orbits-teacher-products-showcase-head > div:first-child > span {
  display: inline-block;
  margin-bottom: 4px;
  color: #9b7442;
  font-size: 10.5px;
  font-weight: 900;
}

.orbits-teacher-products-showcase h2 {
  margin: 0 0 3px;
  color: #174f3d;
  font-size: clamp(20px, 2.3vw, 29px);
  line-height: 1.3;
  font-weight: 950;
}

.orbits-teacher-products-showcase p {
  margin: 0;
  color: #777068;
  font-size: 11.5px;
  line-height: 1.55;
  font-weight: 650;
}

.orbits-showcase-coupon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px dashed rgba(155, 116, 66, .40);
  border-radius: 10px;
  background: #fbf4e7;
}

.orbits-showcase-coupon small {
  color: #80613c;
  font-size: 9px;
  font-weight: 900;
}

.orbits-showcase-coupon b {
  color: #174f3d;
  font-family: "Tajawal", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .4px;
}

.orbits-showcase-coupon button {
  min-height: 29px;
  padding: 5px 9px;
  border-radius: 7px;
  background: #174f3d;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.orbits-teacher-products-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.orbits-teacher-showcase-card {
  overflow: hidden;
  display: block;
  border: 1px solid rgba(23, 79, 61, .10);
  border-radius: 14px;
  background: #fff;
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: 0 5px 17px rgba(39, 51, 47, .05);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.orbits-teacher-showcase-card:hover {
  transform: translateY(-2px);
  border-color: rgba(22, 139, 131, .30);
  box-shadow: 0 8px 22px rgba(39, 51, 47, .09);
}

.orbits-teacher-showcase-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f6f2eb;
}

.orbits-teacher-showcase-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.orbits-teacher-showcase-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  background:
    radial-gradient(
      circle,
      #fff 0%,
      #f4ecdc 100%
    );
}

.orbits-teacher-showcase-image > span {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(23, 79, 61, .93);
  color: #fff;
  font-size: 8.5px;
  line-height: 1;
  font-weight: 900;
}

.orbits-teacher-showcase-content {
  padding: 10px;
  text-align: right;
}

.orbits-teacher-showcase-content strong {
  display: -webkit-box;
  min-height: 38px;
  overflow: hidden;
  color: #26352f;
  font-size: 11.5px;
  line-height: 1.55;
  font-weight: 850;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.orbits-teacher-showcase-content small {
  display: block;
  margin-top: 4px;
  color: #837d75;
  font-size: 9px;
  line-height: 1.4;
  font-weight: 650;
}

.orbits-teacher-showcase-content em {
  display: block;
  margin-top: 7px;
  color: #168b83;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 900;
}

/* --- badges on the original product cards --- */

.orbits-teacher-product-image {
  position: relative !important;
}

.orbits-teacher-product-badges {
  direction: rtl;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
}

.orbits-teacher-product-badge {
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(23, 79, 61, .94);
  color: #fff;
  font-size: 8.5px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.orbits-teacher-product-badge--custom {
  background: rgba(251, 247, 238, .95);
  color: #7f613c;
  border: 1px solid rgba(155, 116, 66, .20);
}

/* --- product description --- */

.orbits-teacher-description {
  direction: rtl;
  margin: 15px 0 13px;
  padding: 15px;
  border: 1px solid rgba(23, 79, 61, .10);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      #fffdf8,
      #f9f5ec
    );
  text-align: right;
}

.orbits-teacher-description-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(23, 79, 61, .07);
  color: #174f3d;
  font-size: 9.5px;
  font-weight: 900;
}

.orbits-teacher-description h3 {
  margin: 0 0 8px;
  color: #174f3d;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 950;
}

.orbits-teacher-description p {
  margin: 0 0 7px;
  color: #5f625e;
  font-size: 11.5px;
  line-height: 1.8;
  font-weight: 600;
}

.orbits-teacher-description p strong {
  color: #168b83;
  font-weight: 900;
}

.orbits-teacher-description-closing {
  color: #7b5e39 !important;
  font-weight: 850 !important;
}

.orbits-teacher-description-chips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.orbits-teacher-description-chips span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(22, 139, 131, .14);
  color: #356257;
  font-size: 9px;
  font-weight: 850;
}

/* V29: no custom elements are inserted inside Salla's native purchase-action area. */

/* --- promo mobile --- */

@media (max-width: 767px) {

  .orbits-teacher-promo-bar-inner {
    width: calc(100% - 14px);
    min-height: 44px;
    gap: 6px;
    padding: 5px 0;
  }

  .orbits-teacher-promo-icon {
    font-size: 16px;
  }

  .orbits-teacher-promo-copy {
    display: block;
    flex: 1 1 auto;
    font-size: 8.7px;
    line-height: 1.25;
  }

  .orbits-teacher-promo-copy strong {
    display: block;
    font-size: 9.8px;
    line-height: 1.3;
  }

  .orbits-teacher-promo-copy span {
    display: block;
    margin-top: 1px;
  }

  .orbits-teacher-promo-copy b {
    padding: 1px 5px;
  }

  .orbits-coupon-copy-button--bar {
    min-height: 29px;
    padding: 5px 9px;
    font-size: 8.5px;
  }

  .orbits-teacher-campaign-hero {
    width: calc(100% - 18px);
    margin: 12px auto 14px;
  }

  .orbits-teacher-campaign-hero-inner {
    padding: 19px 12px;
    border-radius: 15px;
  }

  .orbits-teacher-campaign-kicker {
    font-size: 9px;
  }

  .orbits-teacher-campaign-hero h2 {
    font-size: 21px;
    line-height: 1.35;
  }

  .orbits-teacher-campaign-hero p {
    font-size: 11px;
    line-height: 1.55;
  }

  .orbits-teacher-campaign-actions {
    margin-top: 12px;
    gap: 6px;
  }

  .orbits-teacher-campaign-cta {
    min-height: 39px;
    padding: 8px 13px;
    font-size: 10px;
  }

  .orbits-teacher-hero-coupon {
    min-height: 39px;
    padding: 5px 6px 5px 9px;
    gap: 5px;
    font-size: 8.5px;
  }

  .orbits-teacher-hero-coupon b {
    font-size: 10.5px;
  }

  .orbits-teacher-hero-coupon button {
    min-height: 26px;
    padding: 4px 7px;
    font-size: 8px;
  }

  .orbits-teacher-products-showcase {
    width: calc(100% - 18px);
    margin: 12px auto 16px;
    padding: 11px;
    border-radius: 14px;
  }

  .orbits-teacher-products-showcase-head {
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }

  .orbits-teacher-products-showcase-head > div:first-child > span {
    font-size: 8.5px;
  }

  .orbits-teacher-products-showcase h2 {
    font-size: 17px;
  }

  .orbits-teacher-products-showcase p {
    font-size: 9px;
    line-height: 1.4;
  }

  .orbits-showcase-coupon {
    padding: 5px;
    gap: 4px;
  }

  .orbits-showcase-coupon small {
    display: none;
  }

  .orbits-showcase-coupon b {
    font-size: 9px;
  }

  .orbits-showcase-coupon button {
    min-height: 25px;
    padding: 4px 6px;
    font-size: 7.5px;
  }

  .orbits-teacher-products-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .orbits-teacher-showcase-card {
    border-radius: 10px;
  }

  .orbits-teacher-showcase-image > span {
    top: 5px;
    right: 5px;
    padding: 4px 6px;
    font-size: 7px;
  }

  .orbits-teacher-showcase-content {
    padding: 7px;
  }

  .orbits-teacher-showcase-content strong {
    min-height: 31px;
    font-size: 9px;
    line-height: 1.45;
  }

  .orbits-teacher-showcase-content small {
    margin-top: 3px;
    font-size: 7.5px;
  }

  .orbits-teacher-showcase-content em {
    margin-top: 5px;
    font-size: 8px;
  }

  .orbits-teacher-product-badges {
    top: 5px;
    right: 5px;
    gap: 3px;
  }

  .orbits-teacher-product-badge {
    padding: 4px 5px;
    font-size: 6.5px;
  }

  .orbits-teacher-description {
    margin: 10px 0;
    padding: 11px;
    border-radius: 12px;
  }

  .orbits-teacher-description h3 {
    font-size: 14px;
  }

  .orbits-teacher-description p {
    font-size: 10px;
    line-height: 1.65;
  }

  .orbits-teacher-description-chips {
    gap: 4px;
  }

  .orbits-teacher-description-chips span {
    padding: 4px 6px;
    font-size: 7.5px;
  }










}


/* =========================================================
   13 — V25 Teacher's Day banner refresh
   ========================================================= */

.orbits-teacher-promo-bar {
  background:
    linear-gradient(
      100deg,
      #0f3e31 0%,
      #1d7b71 42%,
      #b78647 100%
    ) !important;
}

.orbits-teacher-promo-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,.08) 32%,
      transparent 58%
    );
  pointer-events: none;
}

.orbits-teacher-promo-copy strong {
  letter-spacing: .1px;
}

.orbits-teacher-campaign-hero-inner {
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(183, 134, 71, .23),
      transparent 28%
    ),
    radial-gradient(
      circle at 86% 18%,
      rgba(22, 139, 131, .14),
      transparent 22%
    ),
    radial-gradient(
      circle at 50% 92%,
      rgba(22, 139, 131, .08),
      transparent 28%
    ),
    linear-gradient(
      140deg,
      #fff9ef 0%,
      #fbf3e3 46%,
      #f6efe4 100%
    ) !important;
  border: 1px solid rgba(183, 134, 71, .24) !important;
  box-shadow:
    0 16px 42px rgba(42, 46, 44, .10),
    0 0 0 1px rgba(255,255,255,.55) inset !important;
}

.orbits-teacher-campaign-hero-inner::before {
  top: 18px !important;
  right: 20px !important;
  font-size: 34px !important;
  color: rgba(183, 134, 71, .35) !important;
}

.orbits-teacher-campaign-hero-inner::after {
  left: 22px !important;
  bottom: 18px !important;
  color: rgba(22, 139, 131, .25) !important;
}

.orbits-teacher-campaign-ribbon {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 2;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #174f3d, #168b83);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(22, 139, 131, .20);
}

.orbits-teacher-campaign-spark {
  position: absolute;
  z-index: 1;
  font-size: 20px;
  line-height: 1;
  color: rgba(183, 134, 71, .35);
  pointer-events: none;
}

.orbits-teacher-campaign-spark--one {
  top: 60px;
  left: 56px;
}

.orbits-teacher-campaign-spark--two {
  bottom: 56px;
  right: 72px;
  color: rgba(22, 139, 131, .28);
}

.orbits-teacher-campaign-hero h2 {
  max-width: 820px !important;
  color: #163f31 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.orbits-teacher-campaign-hero p {
  max-width: 720px !important;
}

.orbits-teacher-campaign-bullets {
  margin-top: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.orbits-teacher-campaign-bullets span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(22, 139, 131, .12);
  color: #23584d;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 4px 11px rgba(0,0,0,.03);
}

.orbits-teacher-campaign-cta {
  background:
    linear-gradient(
      90deg,
      #174f3d 0%,
      #168b83 100%
    ) !important;
  box-shadow:
    0 10px 22px rgba(22, 139, 131, .24) !important;
}

.orbits-teacher-hero-coupon {
  border: 1px solid rgba(183, 134, 71, .26) !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.88),
      rgba(252, 247, 238, .94)
    ) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
}

.orbits-teacher-hero-coupon span {
  color: #8c6a3d;
  font-weight: 900;
}

.orbits-teacher-hero-coupon b {
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(23, 79, 61, .08);
}

.orbits-teacher-hero-coupon button {
  background: linear-gradient(90deg, #f5e9d4, #efdfc2) !important;
  color: #5f482d !important;
}

@media (max-width: 767px) {

  .orbits-teacher-campaign-hero-inner {
    padding-top: 44px !important;
  }

  .orbits-teacher-campaign-ribbon {
    top: 10px;
    left: 10px;
    padding: 6px 10px;
    font-size: 8.4px;
  }

  .orbits-teacher-campaign-spark {
    font-size: 16px;
  }

  .orbits-teacher-campaign-spark--one {
    top: 45px;
    left: 20px;
  }

  .orbits-teacher-campaign-spark--two {
    right: 18px;
    bottom: 42px;
  }

  .orbits-teacher-campaign-bullets {
    gap: 5px;
    margin-top: 10px;
  }

  .orbits-teacher-campaign-bullets span {
    padding: 5px 7px;
    font-size: 7.8px;
  }

}

/* =========================================================
   30 — ORBITS MODERN FONT V31
   Apple-inspired visual language: quiet surfaces, generous
   radii, crisp type, subtle borders, restrained motion.
   FUNCTIONALITY NOTE: this layer is visual only. Salla's
   native price / quantity / discount / purchase logic stays native.
   ========================================================= */

:root {
  --orbits-ui-bg: #f5f5f7;
  --orbits-ui-surface: #ffffff;
  --orbits-ui-surface-soft: rgba(255,255,255,.82);
  --orbits-ui-text: #1d1d1f;
  --orbits-ui-muted: #6e6e73;
  --orbits-ui-line: rgba(0,0,0,.09);
  --orbits-ui-line-strong: rgba(0,0,0,.14);
  --orbits-ui-accent: #168b83;
  --orbits-ui-accent-dark: #0f6e68;
  --orbits-ui-accent-soft: #edf8f6;
  --orbits-ui-radius-xl: 26px;
  --orbits-ui-radius-lg: 20px;
  --orbits-ui-radius-md: 15px;
  --orbits-ui-shadow: 0 10px 35px rgba(0,0,0,.055);
  --orbits-ui-shadow-hover: 0 18px 44px rgba(0,0,0,.09);
}

html.orbits-ui-v31,
body.orbits-ui-v31 {
  background: var(--orbits-ui-bg) !important;
  color: var(--orbits-ui-text) !important;
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* Modern Arabic/Latin typography. Intentionally avoids icon elements. */
body.orbits-ui-v31 :where(
  h1, h2, h3, h4, h5, h6,
  p, a, button, input, textarea, select, option, label,
  small, strong, b, li, td, th
) {
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

body.orbits-ui-v31 input,
body.orbits-ui-v31 textarea,
body.orbits-ui-v31 select,
body.orbits-ui-v31 button {
  font-weight: 600;
}

body.orbits-ui-v31 h1,
body.orbits-ui-v31 h2,
body.orbits-ui-v31 h3,
body.orbits-ui-v31 h4,
body.orbits-ui-v31 .s-product-card-content-title,
body.orbits-ui-v31 .product-title {
  font-weight: 700 !important;
}
body.orbits-ui-v31 main,
body.orbits-ui-v31 .app-inner,
body.orbits-ui-v31 .page-wrapper,
body.orbits-ui-v31 .content-wrapper {
  background: transparent !important;
}

/* Header: translucent, calm, compact */
body.orbits-ui-v31 header,
body.orbits-ui-v31 .main-nav-container,
body.orbits-ui-v31 .navbar {
  background: rgba(255,255,255,.88) !important;
  border-bottom: 1px solid rgba(0,0,0,.055) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}

body.orbits-ui-v31 header .container,
body.orbits-ui-v31 header .main-nav-container,
body.orbits-ui-v31 header .navbar {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

body.orbits-ui-v31 header button,
body.orbits-ui-v31 header a {
  border-radius: 12px !important;
}

/* Promo bar: still visible, but less "sale banner" and more premium notice */
body.orbits-ui-v31 .orbits-teacher-promo-bar {
  background: rgba(29,29,31,.96) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

body.orbits-ui-v31 .orbits-teacher-promo-bar-inner {
  min-height: 42px !important;
  gap: 9px !important;
  padding: 6px 0 !important;
}

body.orbits-ui-v31 .orbits-teacher-promo-copy,
body.orbits-ui-v31 .orbits-teacher-promo-copy strong,
body.orbits-ui-v31 .orbits-teacher-promo-copy span {
  letter-spacing: 0 !important;
}

body.orbits-ui-v31 .orbits-teacher-promo-copy b {
  background: rgba(255,255,255,.13) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
}

body.orbits-ui-v31 .orbits-coupon-copy-button--bar {
  background: #fff !important;
  color: #1d1d1f !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Campaign hero: clean Apple-like card */
body.orbits-ui-v31 .orbits-teacher-campaign-hero {
  width: min(1180px, calc(100% - 28px)) !important;
  margin: 20px auto 24px !important;
}

body.orbits-ui-v31 .orbits-teacher-campaign-hero-inner {
  overflow: hidden !important;
  padding: clamp(26px, 4vw, 48px) !important;
  border: 1px solid var(--orbits-ui-line) !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, #fff 0%, #fbfbfc 100%) !important;
  color: var(--orbits-ui-text) !important;
  box-shadow: var(--orbits-ui-shadow) !important;
}

body.orbits-ui-v31 .orbits-teacher-campaign-kicker {
  color: var(--orbits-ui-accent) !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

body.orbits-ui-v31 .orbits-teacher-campaign-hero h2 {
  color: var(--orbits-ui-text) !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

body.orbits-ui-v31 .orbits-teacher-campaign-hero p {
  color: var(--orbits-ui-muted) !important;
  font-size: clamp(14px, 1.5vw, 18px) !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
}

body.orbits-ui-v31 .orbits-teacher-campaign-cta {
  min-height: 48px !important;
  padding: 12px 20px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--orbits-ui-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 750 !important;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
}

body.orbits-ui-v31 .orbits-teacher-campaign-cta:hover {
  background: var(--orbits-ui-accent-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(22,139,131,.16) !important;
}

body.orbits-ui-v31 .orbits-teacher-hero-coupon {
  min-height: 48px !important;
  border: 1px solid var(--orbits-ui-line) !important;
  border-radius: 14px !important;
  background: #f5f5f7 !important;
  color: var(--orbits-ui-text) !important;
  box-shadow: none !important;
}

/* Quantity saving message */
body.orbits-ui-v31 .orbits-qty-banner {
  width: min(1080px, calc(100% - 28px)) !important;
  margin: 18px auto 24px !important;
  padding: 15px 20px !important;
  border: 1px solid rgba(22,139,131,.15) !important;
  border-radius: 18px !important;
  background: var(--orbits-ui-accent-soft) !important;
  color: #0f655f !important;
  box-shadow: none !important;
}

body.orbits-ui-v31 .orbits-qty-banner::before {
  display: none !important;
}

body.orbits-ui-v31 .orbits-qty-text {
  font-size: clamp(16px, 1.7vw, 21px) !important;
  font-weight: 750 !important;
}

body.orbits-ui-v31 .orbits-qty-badge {
  background: #fff !important;
  border: 1px solid rgba(22,139,131,.12) !important;
  color: var(--orbits-ui-accent) !important;
  box-shadow: none !important;
}

/* Product cards */
body.orbits-ui-v31 .s-product-card-entry,
body.orbits-ui-v31 .product-card,
body.orbits-ui-v31 .product-entry {
  overflow: hidden !important;
  border: 1px solid var(--orbits-ui-line) !important;
  border-radius: 22px !important;
  background: var(--orbits-ui-surface) !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.035) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

body.orbits-ui-v31 .s-product-card-entry:hover,
body.orbits-ui-v31 .product-card:hover,
body.orbits-ui-v31 .product-entry:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0,0,0,.12) !important;
  box-shadow: var(--orbits-ui-shadow-hover) !important;
}

body.orbits-ui-v31 .s-product-card-image {
  overflow: hidden !important;
  background: #f5f5f7 !important;
}

body.orbits-ui-v31 .s-product-card-image img,
body.orbits-ui-v31 .product-card img,
body.orbits-ui-v31 .product-entry img {
  transition: transform .35s cubic-bezier(.2,.7,.2,1) !important;
}

body.orbits-ui-v31 .s-product-card-entry:hover .s-product-card-image img,
body.orbits-ui-v31 .product-card:hover img,
body.orbits-ui-v31 .product-entry:hover img {
  transform: scale(1.02) !important;
}

body.orbits-ui-v31 .s-product-card-content {
  padding: 14px 15px 15px !important;
}

body.orbits-ui-v31 .s-product-card-content-title,
body.orbits-ui-v31 .product-card .product-title,
body.orbits-ui-v31 .product-entry .product-title {
  color: var(--orbits-ui-text) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

body.orbits-ui-v31 .s-product-card-price,
body.orbits-ui-v31 .product-card .product-price,
body.orbits-ui-v31 .product-entry .product-price {
  color: var(--orbits-ui-text) !important;
  font-weight: 800 !important;
}

body.orbits-ui-v31 .s-product-card-content-footer button,
body.orbits-ui-v31 .s-product-card-content-footer .s-button-element {
  min-height: 39px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--orbits-ui-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* Product personalization: simple, spacious, confidence-building */
body.orbits-ui-v31 .orbits-teacher-personalizer {
  margin: 18px 0 22px !important;
  padding: 18px !important;
  border: 1px solid var(--orbits-ui-line) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.04) !important;
}

body.orbits-ui-v31 .orbits-card-mode-heading {
  margin-bottom: 13px !important;
  color: var(--orbits-ui-text) !important;
  font-size: 17px !important;
  font-weight: 780 !important;
  letter-spacing: -.01em !important;
}

body.orbits-ui-v31 .orbits-card-mode-options {
  gap: 10px !important;
}

body.orbits-ui-v31 .orbits-card-mode-option {
  min-height: 78px !important;
  padding: 13px 14px !important;
  border: 1px solid var(--orbits-ui-line) !important;
  border-radius: 16px !important;
  background: #f8f8fa !important;
  box-shadow: none !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

body.orbits-ui-v31 .orbits-card-mode-option:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(22,139,131,.28) !important;
  background: #fff !important;
}

body.orbits-ui-v31 .orbits-card-mode-option.is-active {
  border-color: rgba(22,139,131,.48) !important;
  background: var(--orbits-ui-accent-soft) !important;
  box-shadow: 0 0 0 3px rgba(22,139,131,.06) !important;
}

body.orbits-ui-v31 .orbits-card-mode-check {
  width: 24px !important;
  height: 24px !important;
  flex-basis: 24px !important;
  border-color: #c7c7cc !important;
}

body.orbits-ui-v31 .orbits-card-mode-title {
  color: var(--orbits-ui-text) !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}

body.orbits-ui-v31 .orbits-card-mode-option[data-mode="custom"] .orbits-card-mode-title {
  color: var(--orbits-ui-text) !important;
}

body.orbits-ui-v31 .orbits-card-mode-desc {
  color: var(--orbits-ui-muted) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

body.orbits-ui-v31 .orbits-simple-custom-panel {
  margin-top: 12px !important;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #f5f5f7 !important;
}

body.orbits-ui-v31 .orbits-simple-names-label,
body.orbits-ui-v31 .orbits-simple-sender-label {
  color: var(--orbits-ui-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.orbits-ui-v31 .orbits-simple-names-input,
body.orbits-ui-v31 .orbits-simple-sender-input,
body.orbits-ui-v31 input,
body.orbits-ui-v31 textarea,
body.orbits-ui-v31 select {
  border-color: var(--orbits-ui-line-strong) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--orbits-ui-text) !important;
  box-shadow: none !important;
}

body.orbits-ui-v31 .orbits-simple-names-input:focus,
body.orbits-ui-v31 .orbits-simple-sender-input:focus,
body.orbits-ui-v31 input:focus,
body.orbits-ui-v31 textarea:focus,
body.orbits-ui-v31 select:focus {
  border-color: rgba(22,139,131,.6) !important;
  box-shadow: 0 0 0 4px rgba(22,139,131,.08) !important;
  outline: none !important;
}

body.orbits-ui-v31 .orbits-simple-help {
  color: var(--orbits-ui-muted) !important;
  font-weight: 500 !important;
}

/* Native Salla purchase UI — STYLE ONLY, no DOM or pricing manipulation */
body.orbits-ui-v31 salla-quantity-input,
body.orbits-ui-v31 .s-quantity-input-container,
body.orbits-ui-v31 [class*="quantity-input"] {
  border-radius: 14px !important;
}

body.orbits-ui-v31 salla-quantity-input button,
body.orbits-ui-v31 salla-quantity-input input,
body.orbits-ui-v31 .s-quantity-input-container button,
body.orbits-ui-v31 .s-quantity-input-container input {
  min-height: 44px !important;
  border-color: var(--orbits-ui-line) !important;
  background: #fff !important;
  color: var(--orbits-ui-text) !important;
  box-shadow: none !important;
}

body.orbits-ui-v31 salla-add-product-button .s-button-element,
body.orbits-ui-v31 .s-add-product-button,
body.orbits-ui-v31 button.add-to-cart,
body.orbits-ui-v31 [data-testid*="add-to-cart"] {
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: var(--orbits-ui-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 760 !important;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease !important;
}

body.orbits-ui-v31 salla-add-product-button .s-button-element:hover,
body.orbits-ui-v31 .s-add-product-button:hover,
body.orbits-ui-v31 button.add-to-cart:hover {
  background: var(--orbits-ui-accent-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(22,139,131,.16) !important;
}

body.orbits-ui-v31 [class*="apple-pay"],
body.orbits-ui-v31 [id*="apple-pay"] {
  overflow: hidden !important;
  border-radius: 15px !important;
}

/* Secondary buttons */
body.orbits-ui-v31 .orbits-instagram-link,
body.orbits-ui-v31 .orbits-whatsapp {
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.09) !important;
}

body.orbits-ui-v31 .orbits-whatsapp {
  padding: 9px 13px !important;
}

/* Checkout/cart surfaces */
body.orbits-ui-v31 .cart-item,
body.orbits-ui-v31 .cart-summary,
body.orbits-ui-v31 .checkout-section,
body.orbits-ui-v31 .checkout-card,
body.orbits-ui-v31 .order-summary,
body.orbits-ui-v31 [class*="checkout"] .card,
body.orbits-ui-v31 [class*="cart"] .card {
  border-color: var(--orbits-ui-line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.035) !important;
}

/* Accessibility / motion */
body.orbits-ui-v31 button,
body.orbits-ui-v31 a,
body.orbits-ui-v31 input,
body.orbits-ui-v31 textarea,
body.orbits-ui-v31 select {
  -webkit-tap-highlight-color: transparent;
}

body.orbits-ui-v31 button:focus-visible,
body.orbits-ui-v31 a:focus-visible {
  outline: 3px solid rgba(22,139,131,.24) !important;
  outline-offset: 2px !important;
}

@media (max-width: 767px) {
  body.orbits-ui-v31 .orbits-teacher-campaign-hero {
    width: calc(100% - 18px) !important;
    margin: 12px auto 15px !important;
  }

  body.orbits-ui-v31 .orbits-teacher-campaign-hero-inner {
    padding: 22px 16px !important;
    border-radius: 22px !important;
  }

  body.orbits-ui-v31 .orbits-teacher-campaign-hero h2 {
    font-size: 27px !important;
  }

  body.orbits-ui-v31 .orbits-qty-banner {
    width: calc(100% - 18px) !important;
    margin: 11px auto 15px !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
  }

  body.orbits-ui-v31 .orbits-qty-text {
    font-size: 13px !important;
  }

  body.orbits-ui-v31 .orbits-teacher-personalizer {
    margin: 13px 0 17px !important;
    padding: 13px !important;
    border-radius: 18px !important;
  }

  body.orbits-ui-v31 .orbits-card-mode-options {
    grid-template-columns: 1fr !important;
  }

  body.orbits-ui-v31 .orbits-card-mode-option {
    min-height: 68px !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
  }

  body.orbits-ui-v31 .orbits-simple-custom-panel {
    padding: 11px !important;
    border-radius: 14px !important;
  }

  body.orbits-ui-v31 .orbits-simple-names-input {
    min-height: 112px !important;
  }

  /* Override the old ultra-small mobile cards: cleaner and easier to read */
  body.orbits-ui-v31 .s-product-card-entry,
  body.orbits-ui-v31 .product-card,
  body.orbits-ui-v31 .product-entry {
    border-radius: 16px !important;
  }

  body.orbits-ui-v31 .s-product-card-content {
    padding: 9px 9px 10px !important;
  }

  body.orbits-ui-v31 .s-product-card-content-title {
    margin-bottom: 5px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    font-weight: 650 !important;
  }

  body.orbits-ui-v31 .s-product-card-price,
  body.orbits-ui-v31 .product-card .product-price,
  body.orbits-ui-v31 .product-entry .product-price {
    margin: 3px auto 5px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  body.orbits-ui-v31 .s-product-card-content-footer button,
  body.orbits-ui-v31 .s-product-card-entry .s-button-element {
    min-height: 32px !important;
    height: 32px !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
  }

  body.orbits-ui-v31 .orbits-whatsapp {
    right: 10px !important;
    bottom: 12px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: 10.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.orbits-ui-v31 *,
  body.orbits-ui-v31 *::before,
  body.orbits-ui-v31 *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================================
   V32 — SAFE WHATSAPP / TALK TO DESIGNER
   Keep support visible without covering Salla purchase CTAs.
   ========================================================= */

body.orbits-ui-v32 .orbits-whatsapp {
  transition:
    opacity .16s ease,
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease !important;
}

body.orbits-ui-v32 .orbits-whatsapp.orbits-whatsapp--blocked {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
}

@media (max-width: 767px) {
  /* Mobile: keep it away from Salla's bottom purchase area. */
  body.orbits-ui-v32 .orbits-whatsapp {
    left: 10px !important;
    right: auto !important;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    min-width: 0 !important;
    max-width: min(42vw, 138px) !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    z-index: 80 !important;
  }

  body.orbits-ui-v32 .orbits-whatsapp svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
  }
}

@media (min-width: 768px) {
  body.orbits-ui-v32 .orbits-whatsapp {
    z-index: 80 !important;
  }
}

/* =========================================================
   V33 — SAFE BILINGUAL ENGLISH LAYER
   Only styles ORBITS custom UI. Native Salla purchase,
   pricing, quantity, discount, checkout and payment remain untouched.
   ========================================================= */
html.orbits-lang-en,
body.orbits-lang-en {
  direction: ltr;
}

body.orbits-lang-en :where(
  .orbits-teacher-promo-bar,
  .orbits-teacher-promo-bar-inner,
  .orbits-teacher-campaign-hero,
  .orbits-teacher-campaign-hero-inner,
  .orbits-teacher-description,
  .orbits-teacher-personalizer,
  .orbits-simple-personalizer,
  .orbits-card-mode-picker,
  .orbits-card-mode-options,
  .orbits-card-mode-copy,
  .orbits-simple-custom-panel,
  .orbits-whatsapp,
  .orbits-instagram-link,
  .orbits-qty-banner
) {
  direction: ltr !important;
}

body.orbits-lang-en :where(
  .orbits-teacher-campaign-hero,
  .orbits-teacher-description,
  .orbits-card-mode-copy,
  .orbits-simple-custom-panel,
  .orbits-simple-names-label,
  .orbits-simple-sender-label,
  .orbits-simple-help,
  .orbits-simple-save-status
) {
  text-align: left !important;
}

body.orbits-lang-en :where(
  .orbits-teacher-campaign-hero,
  .orbits-teacher-description,
  .orbits-teacher-personalizer,
  .orbits-simple-personalizer,
  .orbits-whatsapp,
  .orbits-instagram-link,
  .orbits-qty-banner,
  .orbits-teacher-promo-bar
),
body.orbits-lang-en :where(
  .orbits-teacher-campaign-hero,
  .orbits-teacher-description,
  .orbits-teacher-personalizer,
  .orbits-simple-personalizer,
  .orbits-whatsapp,
  .orbits-instagram-link,
  .orbits-qty-banner,
  .orbits-teacher-promo-bar
) :where(h1,h2,h3,h4,p,span,strong,b,small,button,input,textarea,label,a) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

body.orbits-lang-en .orbits-simple-names-input,
body.orbits-lang-en .orbits-simple-sender-input {
  direction: ltr !important;
  text-align: left !important;
}

body.orbits-lang-en .orbits-teacher-product-badges {
  direction: ltr !important;
}

/* =========================================================
   V34 — SAFE ENGLISH DISPLAY LAYER FOR NATIVE SALLA CONTENT
   Visual/text-only. Does not alter price, quantity, cart,
   discount, checkout, shipping, Apple Pay or payment logic.
   ========================================================= */
html.orbits-lang-en body,
body.orbits-lang-en {
  direction: ltr !important;
}

html.orbits-lang-en .orbits-native-en,
html.orbits-lang-en .s-product-card-content-title,
html.orbits-lang-en .product-card .product-title,
html.orbits-lang-en .product-entry .product-title,
html.orbits-lang-en [data-orbits-native-en="1"] {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext;
}

html.orbits-lang-en .orbits-native-section-title {
  direction: ltr !important;
  text-align: left !important;
}


/* =========================================================
   V35 — ENGLISH NATIVE PRODUCT FIELD POLISH
   Display-only. No purchase logic is touched.
   ========================================================= */
html.orbits-lang-en .orbits-native-field-en,
body.orbits-lang-en .orbits-native-field-en {
  direction: ltr !important;
  text-align: left !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

html.orbits-lang-en .orbits-native-field-input-en,
body.orbits-lang-en .orbits-native-field-input-en {
  direction: ltr !important;
  text-align: left !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}