/* Extracted from inline <style> in single-ideeda_product.php (part of #11 front-end unification) */

/* ── Product content page section spacing ── */
.section {
  padding-top: var(--space-10);
  padding-bottom: var(--space-4);
}
@media (max-width: 767px) {
  /* Tighten top gap between sticky header and first content block on mobile */
  .section { padding-top: var(--space-6); padding-bottom: var(--space-4); }
}

/* ── Related + Accessories side-by-side row (unified style) ── */
.pd-related-dual-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8, 32px);
  align-items: start;
}
.pd-dual-col {
  display: flex;
  flex-direction: column;
}
.pd-dual-col .pd-related-head {
  display: flex;
  flex-direction: row; /* title left + link-more right */
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--color-border, #e5e7eb); /* [T2] border-bottom full width */
  padding-bottom: var(--space-3, 12px);
  margin-bottom: var(--space-5, 20px);
  gap: var(--space-3);
  width: 100%;
}
/* [T2] Hide sub-titles */
.pd-related-sub { display: none !important; }
.pd-compare-sub { display: none !important; } /* [T3] */
/* [T5] Remove section title ::after + margin/padding-bottom on product page */
body.single-ideeda_product .section__title::after,
body.single-ideeda_product .section-heading h2::after,
body.single-ideeda_product .section-header h2::after { display: none !important; }
body.single-ideeda_product .section-heading h2,
body.single-ideeda_product .section__title,
body.single-ideeda_product .section-header h2 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.pd-dual-col .pd-related-head .section__title { margin-bottom: 0; }
.pd-dual-col .link-more {
  font-size: var(--text-sm, 14px);
  color: var(--color-primary, #0095DA);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.pd-dual-col .link-more:hover {
  color: var(--color-primary-600, #0077B3);
}

@media (max-width: 1024px) {
  .pd-related-dual-row { grid-template-columns: 1fr; gap: var(--space-10, 40px); }
}
@media (max-width: 767px) {
  .pd-related-dual-row { gap: var(--space-8, 32px); }
  .pd-dual-col .pd-related-head { /* keep border-bottom on mobile too */ }
}
/* [T2] Unified: both Related & Accessories use identical card + carousel style */
.pd-dual-col .pd-related-acc-grid,
.pd-dual-col .pd-acc-carousel {
  display: flex;
  gap: var(--space-4, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--space-4, 16px); /* [T5] room for hover lift so top isn't clipped */
  padding-bottom: var(--space-4, 16px);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border, #e5e7eb) transparent;
}
.pd-dual-col .pd-related-acc-grid::-webkit-scrollbar,
.pd-dual-col .pd-acc-carousel::-webkit-scrollbar { height: 6px; }
.pd-dual-col .pd-related-acc-grid::-webkit-scrollbar-thumb,
.pd-dual-col .pd-acc-carousel::-webkit-scrollbar-thumb {
  background: var(--color-border, #e5e7eb);
  border-radius: 6px;
}
.pd-dual-col .pd-related-acc-card {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
}
.pd-related-acc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3, 12px);
  border-radius: var(--radius-lg, 8px);
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-white, #fff);
  text-decoration: none;
  color: inherit;
  transition: all 0.25s ease;
}
.pd-related-acc-card:hover {
  border-color: var(--color-accent, #e8622c);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.pd-related-acc-card__img {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  background: #f8fafc;
  margin-bottom: var(--space-2, 8px);
}
.pd-related-acc-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-related-acc-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-gray-50, #f9fafb);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2, 8px);
  color: var(--color-primary, #1a3a5c);
}
.pd-related-acc-card__name {
  font-size: var(--text-sm, 14px); /* [P2/G3] bump 12px -> 14px for readability */
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  color: var(--color-dark, #111);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-related-acc-card__desc {
  font-size: 11px;
  color: var(--color-gray-500, #6b7280);
  margin: 4px 0 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Premium: Core Features 2-col grid collapses to 1 column on small screens */
.pd-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 640px) { .pd-features-grid { grid-template-columns: 1fr; } }

/* Video modal visibility */
#videoDemoModal.active { display: flex !important; }

/* Inquiry bar transition */
#inquiryBar {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Inquiry bar WhatsApp button */
.inquiry-bar .btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 6px);
  padding: 10px 20px;
  font-size: var(--text-sm, 14px);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
  transition: all 0.25s ease;
}
.inquiry-bar .btn-whatsapp:hover {
  background: #20bd5c;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  transform: translateY(-2px);
}
.inquiry-bar .btn-whatsapp:active {
  background: #1aa34e;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.25);
  transform: translateY(0);
}
.inquiry-bar .btn-whatsapp svg {
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   T5 — Product detail upgrades:
   Related carousel · Compare table · Trust badges
   ══════════════════════════════════════════ */

/* ── Related Products Carousel (same category) ── */
.pd-related-head {
  margin-bottom: var(--space-6);
  /* [T2] border-bottom + full-width title block handled by .pd-dual-col .pd-related-head override above */
}
.pd-related-sub {
  color: var(--color-gray-500, #6b7280);
  font-size: var(--text-sm, 14px);
  margin: var(--space-1, 4px) 0 0;
}
.pd-related-carousel {
  display: flex;
  gap: var(--space-4, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-top: var(--space-4, 16px); /* [T5] room for hover lift so top isn't clipped */
  padding-bottom: var(--space-4, 16px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border, #e5e7eb) transparent;
}
.pd-related-carousel::-webkit-scrollbar { height: 6px; }
.pd-related-carousel::-webkit-scrollbar-thumb {
  background: var(--color-border, #e5e7eb);
  border-radius: 6px;
}
.pd-related-carousel__item {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
}
.pd-related-carousel .pd-related-acc-card:hover {
  border-color: var(--color-primary, #0095da);
  transform: translateY(-4px);
}
.pd-related-carousel__item .pd-related-acc-card__name {
  -webkit-line-clamp: 2;
}

/* ── Compare Models Table ── */
.pd-compare-head {
  margin-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-border, #e5e7eb); /* [T3] */
  padding-bottom: var(--space-3, 12px); /* [T3] */
  width: 100%; /* [T3] */
}
.pd-compare-sub {
  color: var(--color-gray-500, #6b7280);
  font-size: var(--text-sm, 14px);
  margin: var(--space-1, 4px) 0 0;
}
.pd-compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-xl, 16px);
}
.pd-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
}
.pd-compare-table th,
.pd-compare-table td {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  text-align: left;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  font-size: var(--text-sm, 14px);
  vertical-align: top;
}
.pd-compare-table thead th {
  background: var(--color-gray-50, #f9fafb);
  font-weight: 700;
  color: var(--color-gray-700, #374151);
  position: sticky;
  top: 0;
}
.pd-compare-table tbody th {
  font-weight: 600;
  color: var(--color-gray-600, #4b5563);
  background: var(--color-gray-50, #f9fafb);
  width: 30%;
}
.pd-compare-table__corner { width: 30%; }
.pd-compare-table .is-current { background: rgba(0,149,218,0.06); }
.pd-compare-model {
  display: block;
  font-size: var(--text-sm, 14px);
  font-weight: 700;
  color: var(--color-gray-900, #111827);
  line-height: 1.3;
}
.pd-compare-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--text-xs, 12px);
  font-weight: 700;
  color: #fff;
  background: var(--color-primary, #0095da);
  padding: 2px 10px;
  border-radius: var(--radius-full, 999px);
}

/* ── Trust Badges ── */
.pd-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4, 16px);
}
.pd-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-5, 20px);
  background: var(--color-gray-50, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-xl, 16px);
  transition: transform var(--transition-base, .25s ease), box-shadow var(--transition-base, .25s ease);
}
.pd-trust__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.pd-trust__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #0095da);
  background: var(--color-primary-light, #e6f4fb);
  border-radius: 50%;
}
.pd-trust__text h4 {
  font-size: var(--text-base, 16px);
  margin: 0 0 2px;
  color: var(--color-gray-900, #111827);
}
.pd-trust__text p {
  font-size: var(--text-xs, 12px);
  color: var(--color-gray-500, #6b7280);
  margin: 0;
  line-height: 1.4;
}

/* ── T5 responsive ── */
@media (max-width: 767px) {
  .pd-trust { grid-template-columns: 1fr; }
  .pd-related-carousel__item { flex: 0 0 calc(50% - 8px); }
}

/* ── Mobile: unified carousel + samples lightbox (2026-07-08) ── */
@media (max-width: 767px) {
  /* [T2] Unified card size for both Related & Accessories */
  .pd-dual-col .pd-related-acc-card { flex: 0 0 calc(50% - 8px); }
  .pd-related-carousel__item { flex: 0 0 calc(50% - 8px); } /* keep related in sync */
  .pd-related-acc-grid.pd-acc-carousel {
    /* inherit 16px gap from base rule; keep bottom padding tight */
    padding-bottom: var(--space-3, 12px);
  }
  /* [P1] Tap-target hardening for carousel cards + View All link */
  .pd-dual-col .pd-related-acc-card,
  .pd-dual-col .pd-related-carousel__item { min-height: 44px; }
  .pd-dual-col .link-more {
    display: flex;
    align-items: center;
    min-height: 44px;
    flex-shrink: 0;
  }
}
/* [P3] <=480px: keep title + View All on one row, let title shrink instead of overflow */
@media (max-width: 480px) {
  .pd-dual-col .pd-related-head { flex-wrap: nowrap; gap: var(--space-2, 8px); }
  .pd-dual-col .pd-related-head .section__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-lg, 20px);
  }
  .pd-dual-col .link-more { flex-shrink: 0; }
}

/* Samples: clickable + swipeable lightbox */
.sample-item { cursor: pointer; }
.pd-samples-lightbox {
  /* Force centering — override any mobile align-items:flex-end on .modal-overlay */
  align-items: center !important;
  justify-content: center !important;
  padding: var(--space-4) !important;
}
.pd-samples-lightbox .modal-lightbox-content { max-width: 92vw; }
.pd-sl-prev,
.pd-sl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.2s ease;
}
.pd-sl-prev:hover,
.pd-sl-next:hover { background: rgba(0, 0, 0, 0.7); }
.pd-sl-prev { left: 8px; }
.pd-sl-next { right: 8px; }
@media (max-width: 767px) {
  .pd-sl-prev { left: 4px; }
  .pd-sl-next { right: 4px; }
}

/* ══════════════════════════════════════════
   Related Case Studies on product detail (req #4)
   ══════════════════════════════════════════ */
.section--related-cases { margin-top: 56px; }
.pd-related-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 22px;
}
.pd-case-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface, #fff);
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s;
}
.pd-case-card:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(0, 0, 0, .14); }
.pd-case-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0b0f17; }
.pd-case-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.pd-case-card:hover .pd-case-card__media img { transform: scale(1.06); }
.pd-case-card__badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(255, 255, 255, .92); color: #111; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}
.pd-case-card__play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, .5); color: #fff; font-size: 18px;
  transition: all .35s cubic-bezier(.16, 1, .3, 1);
}
.pd-case-card:hover .pd-case-card__play { background: var(--color-primary, #005fda); border-color: transparent; transform: scale(1.1); }
.pd-case-card__title { margin: 14px 16px 4px; font-size: 16px; font-weight: 700; }
.pd-case-card__meta { margin: 0 16px 16px; font-size: 13px; color: var(--color-gray-500, #6b7280); }