/* ==========================================================================
   PRODUCT PAGE RESPONSIVE STYLING (From product-jump-starter gabarit)
   ========================================================================== */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}

.page-wrap {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-12);
}
@media (min-width: 768px) {
  .page-wrap {
    padding: var(--space-6) var(--space-4) var(--space-16);
  }
}

.product-hero-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

@media (min-width: 992px) {
  .product-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
    align-items: start;
    position: relative;
  }
}

.media-column-container {
  width: 100%;
  min-width: 0;
}

@media (min-width: 992px) {
  .media-column-container {
    position: -webkit-sticky;
    position: sticky;
    align-self: start;
    top: var(--media-sticky-top, 24px);
    z-index: 15;
    will-change: top;
  }
}

.product-order-column {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Reassurance Box Placement: Desktop in media column, Mobile under form */
.desktop-only-reassurance,
.desktop-only-trust-urgency,
.desktop-only-features {
  display: none !important;
}
.mobile-only-reassurance,
.mobile-only-features {
  display: block !important;
  margin-top: var(--space-4);
}

@media (min-width: 992px) {
  .desktop-only-reassurance {
    display: block !important;
    margin-top: var(--space-4);
  }
  .desktop-only-trust-urgency {
    display: block !important;
    margin: var(--space-4) 0 var(--space-2) 0 !important;
  }
  .desktop-only-features {
    display: block !important;
  }
  .mobile-only-reassurance,
  .mobile-only-features {
    display: none !important;
  }
}

/* Product Title Responsive Styling */
.product-main-title {
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: var(--space-2);
  color: var(--text-main);
  font-weight: var(--fw-bold);
  font-family: var(--font-heading);
}
@media (min-width: 768px) {
  .product-main-title {
    font-size: 1.3rem;
  }
}
@media (min-width: 992px) {
  .product-main-title {
    font-size: 1.5rem;
  }
}

.product-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.stars-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Interactive Image Zoom */
.zoom-image-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-base);
  aspect-ratio: 1 / 1;
  cursor: crosshair;
}
.zoom-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.1s ease-out;
}
.zoom-image-container {
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.zoom-hint-badge {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 5;
}
.zoom-hint-mobile {
  display: none;
}
.zoom-hint-desktop {
  display: inline;
}
@media (max-width: 991px) {
  .zoom-hint-badge {
    display: inline-flex !important;
    bottom: 10px !important;
    inset-inline-start: 10px !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
  .zoom-hint-desktop {
    display: none !important;
  }
  .zoom-hint-mobile {
    display: inline !important;
  }
}

/* Thumbnails */
.gallery-thumbs-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  overflow-x: auto;
  padding-bottom: 4px;
}
.gallery-thumb {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-base);
  background: var(--bg-subtle);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.gallery-thumb:hover, .gallery-thumb.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pricing Box */
.cod-price-box {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-base);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.cod-price-current {
  font-size: 1.65rem;
  font-weight: var(--fw-black);
  color: var(--primary);
  font-family: var(--font-heading);
  line-height: 1;
}
.cod-price-currency {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.cod-price-old {
  font-size: var(--fs-base);
  color: var(--text-subtle);
  text-decoration: line-through;
  font-family: var(--font-heading);
}
.cod-price-save {
  background: var(--primary-light);
  color: var(--primary);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  margin-inline-start: auto;
}

/* Dual Product Actions (Checkout & Add to Cart - Unpinned / Non-Sticky) */
.product-actions-dual {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: var(--space-4) 0 !important;
  width: 100% !important;
}

.btn-checkout-main {
  flex: 1 !important;
  min-width: 160px !important;
  padding: 12px 20px !important;
  background: #D3141E !important;
  border: 2px solid #D3141E !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(211, 20, 30, 0.25) !important;
  transition: all var(--transition-fast) !important;
  font-family: var(--font-heading) !important;
  white-space: nowrap !important;
}
.btn-checkout-main:hover {
  background: #b90e17 !important;
  border-color: #b90e17 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(211, 20, 30, 0.35) !important;
}

.btn-add-cart-main {
  flex: 1 !important;
  min-width: 160px !important;
  padding: 12px 20px !important;
  background: #ffffff !important;
  border: 2px solid #D3141E !important;
  color: #D3141E !important;
  border-radius: 9999px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all var(--transition-fast) !important;
  font-family: var(--font-heading) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
.btn-add-cart-main span {
  color: #D3141E !important;
  font-weight: 800 !important;
}
.btn-add-cart-main .icon-svg svg {
  stroke: #D3141E !important;
}
.btn-add-cart-main:hover {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
}
.btn-add-cart-main:hover span,
.btn-add-cart-main:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

@media (max-width: 600px) {
  .product-actions-dual {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .btn-checkout-main,
  .btn-add-cart-main {
    width: 100% !important;
    min-width: 100% !important;
    padding: 13px 16px !important;
  }
}

/* Continue Shopping State Button */
.btn-continue-shopping {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}
.btn-continue-shopping:hover {
  background: #1e293b !important;
}

/* Mobile: Stack buttons vertically (one below the other) */
@media (max-width: 768px) {
  .product-actions-dual {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .btn-checkout-main,
  .btn-add-cart-main {
    width: 100% !important;
    min-width: 100% !important;
    padding: 13px !important;
    font-size: 14px !important;
  }
}

/* Floating Cart Pinned Button (Desktop & Mobile) - Hidden by default unless cart has items */
.floating-cart-btn {
  display: none;
  position: fixed;
  bottom: 28px;
  inset-inline-start: 28px;
  z-index: 998;
  background: #0f172a;
  color: #ffffff;
  border: 2px solid #D3141E;
  border-radius: var(--radius-full);
  padding: 10px 18px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  align-items: center;
  gap: 8px;
  font-weight: bold;
  cursor: pointer;
  font-family: var(--font-heading);
  transition: all var(--transition-fast);
}
.floating-cart-btn.visible {
  display: inline-flex !important;
}
.floating-cart-btn .icon-svg {
  color: #D3141E;
  transition: color 0.2s ease, stroke 0.2s ease;
}
.floating-cart-btn:hover {
  transform: scale(1.05);
  background: #D3141E;
}
.floating-cart-btn:hover .icon-svg,
.floating-cart-btn:hover .icon-svg svg,
.floating-cart-btn:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
.floating-cart-btn .cart-badge-count {
  background: #00A859;
  color: #ffffff;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs) ;
  font-weight: var(--fw-black);
}
.floating-cart-btn:hover .cart-badge-count {
  background: #ffffff;
  color: #D3141E;
}

@media (max-width: 768px) {
  .floating-cart-btn {
    bottom: 86px; /* Sits cleanly above the stacked mobile sticky bar */
    inset-inline-start: 14px;
    padding: 8px 13px;
    font-size: var(--fs-sm) ;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  }
}

/* Non-Intrusive Floating Toast Notification */
.moto-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: #0f172a;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border: 1.5px solid #00A859;
  z-index: 99999;
  display: flex;
  align-items: center;
  max-width: 92vw;
  width: 440px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  opacity: 0;
  pointer-events: none;
}
.moto-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Stock Urgency */
.cod-stock-tracker {
  background: var(--bg-surface);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.cod-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 6px;
}
.cod-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #D3141E, #00A859);
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

/* (Sticky actions bar styles consolidated at the bottom of the stylesheet) */

.icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-svg svg {
  width: 100%;
  height: 100%;
}
.icon-svg-xs { width: 14px; height: 14px; }
.icon-svg-sm { width: 18px; height: 18px; }
.icon-svg-md { width: 22px; height: 22px; }
.icon-svg-lg { width: 32px; height: 32px; }
.icon-svg-xl { width: 48px; height: 48px; }


/* ==========================================================================
   WHATSAPP REVIEWS SECTION (آراء ومحادثات الواتساب)
   ========================================================================== */
.wa-reviews-section {
  margin: var(--space-12) 0;
  padding: var(--space-8) 0;
  position: relative;
}

.wa-reviews-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto var(--space-8);
  padding: 0 var(--space-3);
}

.wa-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  margin-bottom: var(--space-3);
  box-shadow: 0 1px 3px rgba(180, 83, 9, 0.08);
}

.wa-section-title {
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight: var(--fw-black);
  color: var(--text-main);
  margin: 0 0 var(--space-2) 0;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}

.wa-section-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.wa-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .wa-reviews-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    gap: var(--space-6);
  }
}

/* Single Phone Mockup Card */
.wa-phone-card {
  background: #efeae2;
  border: 1.5px solid #d5d9df;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wa-phone-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.12);
}

/* Chat Body (Android WhatsApp Design) */
.wa-chat-body {
  background-color: #efeae2;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280' fill='none' stroke='%230b141a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.055'%3E%3Cpath d='M30 35c0-5 4-10 10-10h16c6 0 10 5 10 10v8c0 5-4 10-10 10h-3l-7 6v-6h-6c-6 0-10-5-10-10z'/%3E%3Ccircle cx='115' cy='40' r='12'/%3E%3Cpolyline points='115,34 115,40 120,43'/%3E%3Cpath d='M180 30h18l3 7h9a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4h-30a4 4 0 0 1-4-4V41a4 4 0 0 1 4-4h4z'/%3E%3Ccircle cx='195' cy='46' r='5'/%3E%3Cpath d='M250 35c3-3 8-3 11 0 3 3 3 8 0 11l-11 11-11-11c-3-3-3-8 0-11 3-3 8-3 11 0z'/%3E%3Ccircle cx='50' cy='115' r='13'/%3E%3Ccircle cx='50' cy='115' r='5'/%3E%3Cpath d='M125 105a7 7 0 0 0-7 7v10a7 7 0 0 0 14 0v-10a7 7 0 0 0-7-7z'/%3E%3Cpath d='M195 105l16 9-8 15-4-5z'/%3E%3Cpath d='M250 110c0 7-5 13-13 13h-8v-26h8c8 0 13 6 13 13z'/%3E%3Cpath d='M40 185h22v15a5 5 0 0 1-5 5H45a5 5 0 0 1-5-5z'/%3E%3Cpolygon points='115,175 119,185 130,186 122,194 124,205 115,199 106,205 108,194 100,186 111,185'/%3E%3Crect x='180' y='180' width='20' height='32' rx='3'/%3E%3Ccircle cx='190' cy='205' r='2' fill='%230b141a'/%3E%3Cpath d='M245 185c0-5 4-9 9-9h14c5 0 9 4 9 9v7c0 5-4 9-9 9h-3l-6 5v-5h-5c-5 0-9-4-9-9z'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 280px 280px;
  padding: 18px 12px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 390px;
  justify-content: flex-start;
  direction: ltr;
  box-sizing: border-box;
  flex: 1;
}

/* Date & City Pill */
.wa-date-pill {
  align-self: center;
  background: #ffffff;
  color: #54656f;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 7.5px;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.12);
  margin: 0 auto 8px auto;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  direction: rtl;
}

/* Chat Bubbles */
.wa-bubble {
  position: relative;
  padding: 6px 10px 6px 10px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  word-break: break-word;
  box-sizing: border-box;
  max-width: 86%;
  width: fit-content;
  display: flex;
  flex-direction: column;
}

/* Customer Incoming Bubble (White - Left side) */
.wa-bubble-incoming {
  align-self: flex-start;
  background: #ffffff;
  border-radius: 8px;
  border-top-left-radius: 0px;
}

.wa-bubble-incoming::before {
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  width: 0;
  height: 0;
  border-top: 6px solid #ffffff;
  border-left: 6px solid transparent;
}

/* Store Outgoing Bubble (Light Green - Right side) */
.wa-bubble-outgoing {
  align-self: flex-end;
  background: #d9fdd3;
  border-radius: 8px;
  border-top-right-radius: 0px;
}

.wa-bubble-outgoing::before {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  width: 0;
  height: 0;
  border-top: 6px solid #d9fdd3;
  border-right: 6px solid transparent;
}

.wa-bubble-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: #111b21;
  direction: rtl;
  text-align: right;
}

.wa-bubble-meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  align-self: flex-start;
  direction: ltr;
  user-select: none;
}

.wa-bubble-time {
  font-size: 10.5px;
  color: #667781;
  line-height: 1;
}

.wa-double-check {
  display: inline-flex;
  align-items: center;
  color: #53bdeb;
  width: 16px;
  height: 11px;
  flex-shrink: 0;
}

.wa-double-check svg {
  width: 16px;
  height: 11px;
  max-width: 16px;
  display: block;
}

/* Audio Player Bubble */
.wa-bubble-audio {
  width: 82%;
  max-width: 260px;
}

.wa-audio-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  direction: ltr;
}

.wa-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #00a884;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.wa-play-btn svg {
  width: 13px;
  height: 13px;
  margin-left: 2px;
  fill: #ffffff;
}

.wa-audio-waveform {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wa-audio-bar {
  position: relative;
  height: 4px;
  background: #d1d7db;
  border-radius: 2px;
}

.wa-audio-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #00a884;
  border-radius: 2px;
}

.wa-audio-scrub {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00a884;
}

.wa-audio-duration {
  font-size: 11px;
  color: #667781;
  direction: ltr;
  text-align: left;
}

.wa-audio-avatar {
  color: #00a884;
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
}

.wa-audio-avatar svg {
  width: 20px;
  height: 20px;
  stroke: #00a884;
}

/* WhatsApp Android Bottom Input Bar */
.wa-chat-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 12px 10px;
  background: transparent;
  direction: ltr;
  box-sizing: border-box;
}

.wa-input-pill {
  flex: 1;
  background: #ffffff;
  border-radius: 24px;
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(11, 20, 26, 0.15);
  box-sizing: border-box;
  user-select: none;
}

.wa-emoji-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8696a0;
  flex-shrink: 0;
}

.wa-emoji-btn svg {
  width: 22px;
  height: 22px;
  stroke: #8696a0;
  display: block;
}

.wa-input-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  color: #8696a0;
  font-size: 15px;
  line-height: 1;
}

@keyframes waBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.wa-cursor {
  color: #000000;
  font-weight: 300;
  font-size: 18px;
  margin-right: 3px;
  animation: waBlink 1.1s infinite;
  line-height: 1;
}

.wa-placeholder-text {
  color: #8696a0;
  font-size: 15px;
}

.wa-footer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8696a0;
  flex-shrink: 0;
}

.wa-footer-actions svg {
  width: 20px;
  height: 20px;
  stroke: #8696a0;
  display: block;
}

.wa-mic-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #00a884;
  box-shadow: 0 1px 3px rgba(11, 20, 26, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  user-select: none;
}

.wa-mic-btn svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
  display: block;
}

/* Complementary Product Card - Button under price on desktop and mobile */
.related-product-price-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: auto !important;
}

.related-price-box {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
}

.related-add-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 6px !important;
  text-align: center !important;
}



/* --------------------------------------------------------------------------
   PERMANENT FLOATING BOTTOM BAR (ثابت وظاهر دائماً على الكمبيوتر والموبايل)
   - Price on the Right (الثمن في اليمين)
   - Desktop: Buttons side-by-side (الكمبيوتر: واحداً جنب الآخر)
   - Mobile: Buttons stacked vertically (الموبايل: واحد فوق الآخر)
   - Highly compact, sleek, non-intrusive (<70px on mobile)
   - NO product image (بدون صورة منتج)
   - ALWAYS visible across scrolling (ثابت وظاهر دائماً رغم السكرول)
   -------------------------------------------------------------------------- */
body {
  padding-bottom: 75px !important;
}
@media (max-width: 768px) {
  body {
    padding-bottom: 85px !important;
  }
}

.cod-mobile-sticky-bar {
  display: none !important;
}

.floating-cart-btn {
  bottom: 78px !important;
}
@media (max-width: 768px) {
  .floating-cart-btn {
    bottom: 88px !important;
  }
}

.cod-sticky-actions-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid var(--border-base, #e2e8f0) !important;
  z-index: 9999 !important;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08) !important;
  box-sizing: border-box !important;
  display: block !important;
  transform: translateY(115%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.35s ease !important;
}

.cod-sticky-actions-bar.is-visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.sticky-bar-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  direction: rtl !important;
}

/* --- RIGHT SIDE: PRICE (الثمن في اليمين) --- */
.sticky-price-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: right !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  gap: 1px !important;
}

.sticky-price-label {
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.sticky-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  line-height: 1 !important;
}

.sticky-amount {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #D3141E !important;
  font-family: var(--font-heading) !important;
  line-height: 1 !important;
}

.sticky-currency {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.sticky-shipping-tag {
  font-size: 10.5px !important;
  color: #059669 !important;
  font-weight: 700 !important;
  background: #ecfdf5 !important;
  padding: 1px 7px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* --- DESKTOP STYLES (>= 769px): Side by Side --- */
@media (min-width: 769px) {
  .cod-sticky-actions-bar {
    padding: 8px 0 !important;
  }
  .sticky-bar-inner {
    padding: 0 24px !important;
    gap: 16px !important;
    height: 56px !important;
  }
  .sticky-actions-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
  }
  .sticky-btn-order {
    background: #D3141E !important;
    color: #ffffff !important;
    border: 2px solid #D3141E !important;
    border-radius: 9999px !important;
    padding: 9px 24px !important;
    height: 42px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(211, 20, 30, 0.28) !important;
    text-decoration: none !important;
    transition: all var(--transition-fast) !important;
    cursor: pointer !important;
    font-family: var(--font-heading) !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  .sticky-btn-order:hover {
    background: #b90e17 !important;
    border-color: #b90e17 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(211, 20, 30, 0.38) !important;
  }
  .sticky-btn-order .icon-svg svg {
    stroke: #ffffff !important;
    stroke-width: 2.8 !important;
    width: 17px !important;
    height: 17px !important;
  }
  .sticky-btn-cart {
    background: #ffffff !important;
    color: #D3141E !important;
    border: 2px solid #D3141E !important;
    border-radius: 9999px !important;
    padding: 9px 20px !important;
    height: 42px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all var(--transition-fast) !important;
    cursor: pointer !important;
    font-family: var(--font-heading) !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
  }
  .sticky-btn-cart:hover {
    background: #0f172a !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
  }
  .sticky-btn-cart:hover .sticky-cart-btn-text,
  .sticky-btn-cart:hover .icon-svg,
  .sticky-btn-cart:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }
}

/* --- MOBILE STYLES (< 768px): Buttons stacked ONE ON TOP OF THE OTHER --- */
@media (max-width: 768px) {
  .cod-sticky-actions-bar {
    padding: 6px 10px !important;
    height: auto !important;
  }
  .sticky-bar-inner {
    padding: 0 !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  /* Right: Price */
  .sticky-price-col {
    min-width: 75px !important;
    max-width: 90px !important;
    gap: 1px !important;
  }
  .sticky-price-label {
    font-size: 10px !important;
  }
  .sticky-amount {
    font-size: 1.25rem !important;
  }
  .sticky-currency {
    font-size: 11px !important;
  }
  .sticky-shipping-tag {
    font-size: 9.5px !important;
    padding: 1px 5px !important;
  }
  /* Left: Actions stacked one on top of the other (واحد فوق الآخر) */
  .sticky-actions-col {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: stretch !important;
    justify-content: center !important;
  }
  /* Top Button: Order Now */
  .sticky-btn-order {
    width: 100% !important;
    height: 31px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    line-height: 29px !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    background: #D3141E !important;
    color: #ffffff !important;
    border: 1.5px solid #D3141E !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(211, 20, 30, 0.22) !important;
  }
  .sticky-btn-order .icon-svg svg {
    width: 13px !important;
    height: 13px !important;
  }
  /* Bottom Button: Add to Cart */
  .sticky-btn-cart {
    width: 100% !important;
    height: 27px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    line-height: 25px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    color: #D3141E !important;
    border: 1.5px solid #D3141E !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  .sticky-btn-cart .icon-svg svg {
    width: 13px !important;
    height: 13px !important;
  }
}

@media (max-width: 360px) {
  .sticky-price-col {
    min-width: 68px !important;
  }
  .sticky-amount {
    font-size: 1.15rem !important;
  }
  .sticky-btn-order {
    font-size: 12px !important;
    height: 29px !important;
  }
  .sticky-btn-cart {
    font-size: 11px !important;
    height: 25px !important;
  }
}

/* --------------------------------------------------------------------------
   COMPLEMENTARY ADDONS IN ORDER FORM
   -------------------------------------------------------------------------- */
.cod-selected-addons-box {
  background: #f8fafc !important;
  border: 1.5px dashed var(--border-dark, #cbd5e1) !important;
  border-radius: var(--radius-lg, 12px) !important;
  padding: 12px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}
.cod-selected-addons-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
.selected-addon-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  background: #ffffff !important;
  border: 1px solid var(--border-base, #e2e8f0) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}
.selected-addon-thumb {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  border: 1px solid #f1f5f9 !important;
  flex-shrink: 0 !important;
}
.selected-addon-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: right !important;
}
.selected-addon-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-main, #0f172a) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}
.selected-addon-price {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #D3141E !important;
}
.selected-addon-remove {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #ef4444 !important;
  border-radius: 6px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
.selected-addon-remove:hover {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}
.form-qty-ctrl {
  display: inline-flex !important;
  align-items: center !important;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  height: 26px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
.form-qty-btn {
  background: transparent !important;
  border: none !important;
  color: #334155 !important;
  width: 26px !important;
  height: 26px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
}
.form-qty-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
.form-qty-btn:active {
  background: #cbd5e1 !important;
}
.form-qty-val {
  min-width: 22px !important;
  padding: 0 4px !important;
  text-align: center !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 26px !important;
}
.related-add-btn.added {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}
.related-add-btn.added:hover {
  background: #047857 !important;
  border-color: #047857 !important;
}

/* Continue Shopping Button (High contrast dark slate & white text) */
.sticky-btn-cart.btn-continue-shopping,
.btn-add-cart-main.btn-continue-shopping {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1.5px solid #0f172a !important;
}
.sticky-btn-cart.btn-continue-shopping .sticky-cart-btn-text,
.sticky-btn-cart.btn-continue-shopping span,
.sticky-btn-cart.btn-continue-shopping .icon-svg,
.sticky-btn-cart.btn-continue-shopping svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
}
.sticky-btn-cart.btn-continue-shopping:hover {
  background: #1e293b !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}

/* Order Confirmation Buttons Font Size (16px) */
#submitOrderBtn,
#submitOrderBtn #submitBtnText,
#submitOrderBtn span,
#cartSubmitBtn,
#cartSubmitBtn #cartSubmitBtnText,
#cartSubmitBtn span {
  font-size: 16px !important;
}

/* Accurate scroll target offset for Order Form */
#orderForm,
.cod-form-container {
  scroll-margin-top: 30px !important;
}

/* Hide Sticky Actions Bar when Cart Drawer is Open (Mobile & Desktop) */
body.cart-drawer-open .cod-sticky-actions-bar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.cart-drawer-overlay {
  z-index: 9999998 !important;
}
.cart-drawer {
  z-index: 9999999 !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 100vh !important;
}
.cart-drawer-scrollable {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}
.cart-drawer-body {
  padding: 16px !important;
  background: #f8fafc !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  flex: none !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  min-height: auto !important;
  height: auto !important;
}
.cart-drawer-footer {
  display: block !important;
  flex: none !important;
  flex-shrink: 0 !important;
  padding: 16px !important;
  background: #ffffff !important;
}
.cart-drawer-floating-bottom {
  background: #ffffff !important;
  border-top: 1.5px solid #e2e8f0 !important;
  padding: 12px 16px !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08) !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}
.cart-drawer-floating-btn {
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  background: #D3141E !important;
  color: #ffffff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(211, 20, 30, 0.3) !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}
.cart-drawer-floating-btn:hover {
  background: #b90e17 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(211, 20, 30, 0.4) !important;
}
.cart-drawer-floating-note {
  font-size: 11.5px !important;
  color: #64748b !important;
  text-align: center !important;
  margin: 6px 0 0 !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}
.cart-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  flex-shrink: 0 !important;
}
.cart-item-img {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  border: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
  flex-shrink: 0 !important;
}
.cart-item-img-placeholder {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  border-radius: 10px !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
}
.cart-item-details {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.cart-item-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.cart-item-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}
.cart-item-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.cart-item-price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #D3141E !important;
}
.cart-item-remove-btn {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #ef4444 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}
.cart-item-remove-btn:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}
.cart-item-remove-btn svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  display: block !important;
  stroke: #ef4444 !important;
  stroke-width: 2.2 !important;
  fill: none !important;
  pointer-events: none !important;
}
.cart-item-remove-btn:hover svg {
  stroke: #dc2626 !important;
}
.cart-item-remove-btn svg path,
.cart-item-remove-btn svg line,
.cart-item-remove-btn svg polyline {
  stroke: inherit !important;
  stroke-width: inherit !important;
  fill: none !important;
}
.cart-qty-ctrl {
  display: inline-flex !important;
  align-items: center !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
.cart-qty-btn {
  background: transparent !important;
  border: none !important;
  color: #334155 !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  user-select: none !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.cart-qty-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
.cart-qty-val {
  min-width: 26px !important;
  text-align: center !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding: 0 4px !important;
}

/* ==========================================================================
   PRODUCT IN-PAGE BLOCKS NAVBAR (REMOVED PERMANENTLY PER USER REQUEST)
   ========================================================================== */
.product-blocks-navbar,
.mobile-product-sections-menu {
  display: none !important;
}

/* ============================================================
   PZ19 & Product Specifications & Details Rich Styling
   ============================================================ */
.pz19-product-details-wrap {
  font-family: var(--font-body);
  color: var(--text-main);
  line-height: 1.7;
}
.pz19-intro-box {
  background: var(--bg-subtle);
  border-right: 4px solid var(--primary);
  padding: 14px 18px;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: var(--fs-base);
  margin-bottom: 22px;
}
.pz19-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--text-main);
  margin: 20px 0 12px 0;
  font-family: var(--font-heading);
}
.pz19-heading-icon {
  font-size: 20px;
}
.pz19-table-responsive {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 20px;
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--border-base);
  background: var(--bg-surface);
}
.pz19-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  text-align: right;
}
.pz19-spec-table th,
.pz19-spec-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
}
.pz19-spec-table tr:last-child th,
.pz19-spec-table tr:last-child td {
  border-bottom: none;
}
.pz19-spec-table th {
  width: 38%;
  background: var(--bg-subtle);
  color: var(--text-main);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.pz19-spec-table td {
  color: var(--text-muted);
}
.pz19-compat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 14px 0 22px 0;
}
.pz19-compat-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-base);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-xs);
  transition: border-color var(--transition-fast);
}
.pz19-compat-card:hover {
  border-color: var(--primary);
}
.pz19-compat-card strong {
  color: var(--text-main);
  font-size: var(--fs-sm);
}
.pz19-compat-card span {
  color: var(--text-muted);
}
.pz19-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 22px 0;
}
.pz19-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  font-size: var(--fs-sm);
}
.pz19-check-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}
.pz19-benefit-item strong {
  display: block;
  color: var(--text-main);
  margin-bottom: 2px;
}
.pz19-guarantee-box {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: var(--radius-xl);
  padding: 16px 18px;
  margin-top: 20px;
}
@media (max-width: 768px) {
  .pz19-spec-table th {
    width: 45%;
    white-space: normal;
    padding: 10px 12px;
  }
  .pz19-spec-table td {
    padding: 10px 12px;
  }
  .pz19-compat-grid {
    grid-template-columns: 1fr;
  }

  /* ============================================================
     MOBILE: RESTORED BLOCK BORDERS AS ORIGINAL
     ============================================================ */
  .page-wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .product-hero-grid {
    gap: 16px !important;
  }

  .media-column-container,
  .product-order-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ============================================================
     MOBILE: ANATOMICAL & ENGINEERING DIAGRAM (المخطط التشريحي والهندسي)
     INSIDE DETAILS BLOCK, RESPECTING BORDERS WITH SHORT CLEAN DISTANCE
     ============================================================ */
  .product-details-section {
    border: 1.5px solid var(--border-base, #e2e8f0) !important;
    border-radius: var(--radius-2xl, 16px) !important;
    padding: 18px 14px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .schematic-deep-dive-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 16px 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
  }

  /* Image contained strictly inside block border with short distance */
  .schematic-image-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 16px auto !important;
    margin-inline: 0 !important;
    position: relative !important;
    padding: 8px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    overflow: hidden !important;
    display: block !important;
    text-align: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
  }

  .schematic-image-wrap img,
  .schematic-zoomable-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border: none !important;
    border-radius: 8px !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  .schematic-zoom-hint-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(15, 23, 42, 0.88) !important;
    color: #ffffff !important;
    padding: 5px 12px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    z-index: 2 !important;
  }
}

/* ==========================================
   Fullscreen Zoom Lightbox Modal
   ========================================== */
.schematic-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: rgba(10, 15, 25, 0.94) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  touch-action: none !important;
  user-select: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.schematic-modal.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.schematic-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  z-index: 10 !important;
}

.schematic-modal-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

.schematic-modal-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.schematic-zoom-btn,
.schematic-close-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 8px !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.schematic-zoom-btn:active,
.schematic-close-btn:active {
  background: rgba(255, 255, 255, 0.35) !important;
}

.schematic-close-btn {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  font-size: 16px !important;
  margin-right: 6px !important;
}

.schematic-modal-body {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  cursor: grab !important;
}

.schematic-modal-body.grabbing {
  cursor: grabbing !important;
}

.schematic-pan-wrapper {
  position: absolute !important;
  transform-origin: center center !important;
  transition: transform 0.15s ease-out !important;
  will-change: transform !important;
}

.schematic-modal-img {
  max-width: 95vw !important;
  max-height: 80vh !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  pointer-events: none !important;
}

.schematic-modal-footer {
  text-align: center !important;
  padding: 10px 14px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  z-index: 10 !important;
}

.modal-footer-desktop-hint {
  display: inline !important;
}
.modal-footer-mobile-hint {
  display: none !important;
}
@media (max-width: 768px) {
  .modal-footer-desktop-hint {
    display: none !important;
  }
  .modal-footer-mobile-hint {
    display: inline !important;
  }
}

/* Floating Navigation Chevrons for Multi-image Gallery */
.schematic-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 20 !important;
  transition: all 0.2s ease !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}
.schematic-nav-btn:hover {
  background: rgba(211, 20, 30, 0.85) !important;
  border-color: #ef4444 !important;
}
.schematic-nav-btn:active {
  transform: translateY(-50%) scale(0.92) !important;
}
.schematic-prev-btn {
  right: 14px !important;
}
.schematic-next-btn {
  left: 14px !important;
}
@media (max-width: 768px) {
  .schematic-nav-btn {
    width: 38px !important;
    height: 38px !important;
  }
  .schematic-prev-btn {
    right: 8px !important;
  }
  .schematic-next-btn {
    left: 8px !important;
  }
}

.schematic-modal-counter {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.2) !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  margin-inline-start: 6px !important;
}

/* Universal High-Definition Sharpness & Zoom Styling */
.schematic-image-wrap img,
.schematic-zoomable-img,
.anatomy-diagram-zoomable,
img[src*="schema"],
img[src*="anatomie"] {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  cursor: zoom-in !important;
  transition: transform 0.25s ease, filter 0.25s ease !important;
}
.product-rich-desc img,
.product-details-content img,
.wa-chat-body img,
.wa-review-bubble img,
.wa-card img {
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   DYNAMIC PRODUCT VARIATIONS SELECTOR (الألوان والمقاسات في فورم الطلب)
   ========================================================================== */
.cod-variations-container {
  background: #ffffff !important;
  border: 1.5px solid var(--border-base, #e2e8f0) !important;
  border-radius: var(--radius-lg, 12px) !important;
  padding: 14px 16px !important;
  margin-bottom: var(--space-4, 16px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.cod-variation-group {
  margin-bottom: 14px !important;
}
.cod-variation-group:last-child {
  margin-bottom: 0 !important;
}

.cod-variation-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.cod-variation-title {
  font-size: var(--fs-sm, 14px) !important;
  font-weight: var(--fw-bold, 700) !important;
  color: var(--text-main, #0f172a) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.selected-variation-label {
  font-size: var(--fs-xs, 12px) !important;
  font-weight: 800 !important;
  color: var(--primary, #D3141E) !important;
  background: rgba(211, 20, 30, 0.08) !important;
  padding: 2px 10px !important;
  border-radius: 9999px !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
}

.cod-variation-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.cod-variation-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px 6px 8px !important;
  border-radius: var(--radius-md, 8px) !important;
  border: 2px solid var(--border-base, #e2e8f0) !important;
  background: #ffffff !important;
  color: var(--text-main, #0f172a) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

.cod-variation-btn:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  transform: translateY(-1px) !important;
}

.cod-variation-btn.is-active {
  border-color: var(--primary, #D3141E) !important;
  background: rgba(211, 20, 30, 0.05) !important;
  color: var(--primary, #D3141E) !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(211, 20, 30, 0.15) !important;
}

.cod-variation-btn .variation-product-thumb {
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.cod-variation-btn .variation-product-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  padding: 1.5px !important;
}

.cod-variation-btn:hover .variation-product-thumb {
  border-color: #94a3b8 !important;
}

.cod-variation-btn.is-active .variation-product-thumb {
  border-color: var(--primary, #D3141E) !important;
  box-shadow: 0 0 0 1px var(--primary, #D3141E) !important;
}

.cod-variation-btn .cod-var-label {
  line-height: 1.3 !important;
}

.cod-variation-btn .color-dot {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
  flex-shrink: 0 !important;
}

.cod-variation-btn .active-check-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   CUSTOM DROPDOWN FOR PRODUCT VARIATIONS (قائمة منسدلة للألوان والمواصفات)
   ========================================================================== */
.cod-dropdown-wrapper {
  position: relative !important;
  width: 100% !important;
  margin-top: 4px !important;
}

.cod-dropdown-trigger {
  width: 100% !important;
  min-height: 52px !important;
  padding: 6px 14px !important;
  background: #ffffff !important;
  border: 1.5px solid var(--border-base, #cbd5e1) !important;
  border-radius: var(--radius-md, 10px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  text-align: right !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.cod-dropdown-trigger:hover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}

.cod-dropdown-trigger.is-open {
  border-color: var(--primary, #D3141E) !important;
  box-shadow: 0 0 0 3px rgba(211, 20, 30, 0.12) !important;
  background: #ffffff !important;
}

.cod-dropdown-selected {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  overflow: hidden !important;
}

.cod-dropdown-selected .dropdown-selected-text {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-main, #0f172a) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cod-dropdown-chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

.cod-dropdown-trigger.is-open .cod-dropdown-chevron {
  transform: rotate(180deg) !important;
  color: var(--primary, #D3141E) !important;
}

.dropdown-item-thumb {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.dropdown-item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  padding: 1.5px !important;
}

.dropdown-item-swatch {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) !important;
  flex-shrink: 0 !important;
}

.cod-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: 0 !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: var(--radius-md, 12px) !important;
  box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.16), 0 6px 12px -2px rgba(15, 23, 42, 0.08) !important;
  z-index: 1050 !important;
  max-height: 290px !important;
  overflow-y: auto !important;
  padding: 6px !important;
  display: none !important;
  list-style: none !important;
  margin: 0 !important;
}

.cod-dropdown-menu.is-open {
  display: block !important;
  animation: codDropdownAnim 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes codDropdownAnim {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cod-dropdown-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  margin-bottom: 4px !important;
  border: 1.5px solid transparent !important;
}

.cod-dropdown-item:last-child {
  margin-bottom: 0 !important;
}

.cod-dropdown-item:hover {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.cod-dropdown-item.is-selected {
  background: rgba(211, 20, 30, 0.06) !important;
  border-color: rgba(211, 20, 30, 0.25) !important;
}

.cod-dropdown-item.is-selected .dropdown-item-title {
  color: var(--primary, #D3141E) !important;
  font-weight: 800 !important;
}

.dropdown-item-main {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
}

.dropdown-item-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-main, #0f172a) !important;
  line-height: 1.35 !important;
}

.dropdown-item-check {
  color: var(--primary, #D3141E) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}