/* BEGIN SOURCE /assets/sarmad-v101-home-card-size-guide.css?v=101 sha256=6474e439a593bc511141ebc82890ae7573c7559d1269f61c6ffdf79c9a3658a8 */

/*
 * SARMAD V101
 * Scope ONLY:
 * 1) HOME product-card CTA alignment: every add-to-cart button sits at one fixed bottom position.
 * 2) Product-details size-guide button/theme + image modal interaction.
 * No /products-card styling, cart, admin, backend, database, orders, payment, currency, or product-option logic changes.
 */

/* ============================================================
 * SIZE GUIDE BUTTON — brand/theme control, never white.
 * ============================================================ */
html .product-page .product-options > .size-guide-link {
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: 2px 0 8px !important;
  padding: 0 54px !important;
  border: 1px solid rgba(109,151,226,.75) !important;
  border-radius: 10px !important;
  background: #18336e !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-family: "Thmanyah Sans", Tajawal, Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
html .product-page .product-options > .size-guide-link:hover,
html .product-page .product-options > .size-guide-link:active {
  background: #1f4289 !important;
}
html .product-page .product-options > .size-guide-link::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  width: 24px !important;
  height: 22px !important;
  transform: translateY(-50%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 22px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M2 4.5h20v13H2z' fill='none' stroke='%23CDAA4A' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M6 4.5v4m4-4v2.5m4-2.5v4m4-4v2.5' fill='none' stroke='%23CDAA4A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
html .product-page .product-options > .size-guide-link::before {
  content: "‹" !important;
  box-sizing: border-box !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 34px !important;
  transform: translateY(-50%) !important;
  border-right: 1px solid rgba(255,255,255,.28) !important;
  color: #ffffff !important;
  font-family: Arial, sans-serif !important;
  font-size: 29px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}
html .product-page .product-options > .size-guide-link:focus-visible {
  outline: 2px solid #cdaa4a !important;
  outline-offset: 2px !important;
}

/* ============================================================
 * SIZE GUIDE MODAL — exact image viewer.
 * No close X. Tap image or backdrop to close. Pinch/pan supported.
 * ============================================================ */
.sarmad-v101-size-guide-backdrop {
  box-sizing: border-box !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 100300 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  background: rgba(5, 9, 19, .82) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.sarmad-v101-size-guide-dialog {
  box-sizing: border-box !important;
  width: min(760px, calc(100vw - 24px)) !important;
  max-height: 94dvh !important;
  overflow: hidden !important;
  border: 1px solid rgba(109,151,226,.45) !important;
  border-radius: 18px !important;
  background: #18336e !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.5) !important;
  direction: rtl !important;
}
.sarmad-v101-size-guide-tabs {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  width: calc(100% - 20px) !important;
  margin: 10px auto !important;
  padding: 4px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.12) !important;
}
.sarmad-v101-size-guide-tabs button {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #ffffff !important;
  font-family: "Thmanyah Sans", Tajawal, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.sarmad-v101-size-guide-tabs button.is-active {
  background: #6d97e2 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
}
.sarmad-v101-size-guide-stage {
  box-sizing: border-box !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  max-height: calc(94dvh - 70px) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.sarmad-v101-size-guide-stage img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(94dvh - 70px) !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #ffffff !important;
  transform-origin: center center !important;
  will-change: transform !important;
  cursor: zoom-in !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.sarmad-v101-size-guide-stage.is-zoomed img { cursor: grab !important; }
.sarmad-v101-size-guide-stage.is-panning img { cursor: grabbing !important; }
.sarmad-v101-size-guide-status {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  min-height: 220px !important;
  padding: 24px !important;
  color: #18336e !important;
  background: #ffffff !important;
  text-align: center !important;
  font-family: "Thmanyah Sans", Tajawal, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
body.sarmad-v101-size-guide-open { overflow: hidden !important; }

@media (max-width: 767px) {
  html .product-page .product-options > .size-guide-link {
    min-height: 50px !important;
    margin: 0 0 8px !important;
    padding-inline: 50px !important;
    font-size: 16px !important;
  }
  .sarmad-v101-size-guide-backdrop { padding: 8px !important; }
  .sarmad-v101-size-guide-dialog {
    width: calc(100vw - 16px) !important;
    max-height: 96dvh !important;
    border-radius: 14px !important;
  }
  .sarmad-v101-size-guide-stage,
  .sarmad-v101-size-guide-stage img {
    max-height: calc(96dvh - 66px) !important;
  }
}

/* ============================================================
 * HOME PRODUCT CARDS — ONE FIXED CTA POSITION FOR EVERY CARD.
 * Original card/body width, height and original top/side padding remain untouched.
 * Only direct HOME CTA positioning + compact content margins are normalized.
 * ============================================================ */
.home-code-artboard .home-product-card .home-product-body {
  position: relative !important;
}
.home-code-artboard .home-product-card .home-product-body
  > :not(strong):not(button):not(.sarmad-v62-discount-row):first-child {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 0 !important;
  margin-bottom: 8px !important;
}
.home-code-artboard .home-product-card .home-product-body > strong {
  position: static !important;
  top: auto !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}
.home-code-artboard .home-product-card .home-product-body > .sarmad-v62-discount-row {
  position: static !important;
  top: auto !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.home-code-artboard .home-product-card .home-product-body > button {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 10px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 3 !important;
}

/* Never leak the HOME CTA fix into /products cards. */
.products-card-body > button { }


/* END SOURCE /assets/sarmad-v101-home-card-size-guide.css?v=101 */