/* Indoor LED Display product page. Order: base styles, FAQ, slider, then RESPONSIVE (last). */

/* ===== Product page (pd-) ===== */
.pd-section{padding:clamp(3rem,7vw,5rem) 0;background:#fff}
.pd-alt{background:#f8f6ff}
.pd-title{font-size:45px;font-weight:500;line-height:57px;color:#212529
;margin-bottom:1rem}
.pd-title span{font-weight:600;color:#45289b}
.pd-eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:#45289b;font-weight:600;margin-bottom:.5rem}
.pd-lead{color:#212529;line-height:27px}
.pd-icon{width:2.5rem;height:2.5rem;flex:none}
.pd-icon-sm{width:2.1rem;height:2.1rem;flex:none}

.pd-btn{display:inline-block;background:#45289b;color:#fff;border:1px solid #45289b;border-radius:50rem;padding:.75rem 1.8rem;font-weight:500;text-decoration:none;transition:background .2s}
.pd-btn:hover{background:#341d7a;color:#fff;text-decoration:none;}
.pd-btn-outline{background:transparent;color:#45289b;text-decoration:none;}
.pd-btn-outline:hover{background:#f1edff;color:#341d7a}
.pd-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:#45289b;text-decoration:none}
.pd-link:hover{text-decoration:underline;color:#341d7a}
.pd-btn:focus-visible,.pd-link:focus-visible{outline:3px solid #45289b;outline-offset:3px;text-decoration:none;}

.pd-art{border-radius:1.25rem;overflow:hidden;border:1px solid #e6e1f8;box-shadow:0 20px 50px rgba(69,40,155,.15);background:#fff}
.pd-art svg{display:block;width:100%;height:auto}

.pd-card{background:#fff;border:1px solid #e6e1f8;border-radius:16px;padding:1.5rem;height:100%;box-shadow:0 2px 10px rgba(26,26,26,.04);transition:box-shadow .25s,transform .25s}
.pd-card:hover{box-shadow:0 12px 28px rgba(69,40,155,.13);transform:translateY(-2px)}
.pd-card h3{font-size:1.1rem;font-weight:600;color:#1a1a1a;margin-bottom:.5rem}
.pd-card p{color:#212529;font-size:.95rem;line-height:1.65;margin:0}
.pd-dot{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:#fff;color:#000;margin-bottom:1rem}
.pd-pill{border:1px solid #e6e1f8;background:#f8f6ff;border-radius:50rem;padding:.2rem .9rem;color:#45289b;font-size:.8rem;font-weight:600}

.pd-table-wrap{overflow-x:auto;border:1px solid #e6e1f8;border-radius:16px;background:#fff}
.pd-table{width:100%;border-collapse:collapse;color:#1a1a1a;font-size:.95rem}
.pd-table caption{caption-side:bottom}
.pd-table th,.pd-table td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid #eeeaf9;white-space:nowrap}
.pd-table thead th{background:#ede9ff;font-weight:600}
.pd-table tbody tr:nth-child(even){background:#faf9ff}
.pd-table tbody tr:last-child th,.pd-table tbody tr:last-child td{border-bottom:0}
.pd-table tbody th{font-weight:600}
.pd-table-wrap {max-width: 850px;width: 100%;margin: 0 auto; overflow-x:auto;}

.pd-table {width: 100%;margin-bottom: 0;}
.pd-note{color:#212529;font-size:.85rem;margin-top:.75rem}

.pd-steps{list-style:none;padding:0;margin:0;counter-reset:n}
.pd-steps li{counter-increment:n;display:flex;gap:1rem;margin-bottom:1rem;color:#212529;line-height:1.65}
.pd-steps li::before{content:counter(n);flex:none;width:34px;height:34px;border-radius:50%;background:#45289b;color:#fff;display:grid;place-items:center;font-weight:600;font-size:.9rem}
.pd-steps strong{color:#1a1a1a;font-weight:600}

.pd-ph{position:relative;overflow:hidden;border-radius:16px;border:1px solid #e6e1f8;aspect-ratio:4/3;background:linear-gradient(135deg,#efecff,#fbfaff);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:#8a7fd9}
.pd-ph .pd-icon{width:2.2rem;height:2.2rem}
.pd-ph::after{content:attr(data-label);font-size:.8rem}
.pd-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.pd-cap{font-size:.85rem;color:#212529;margin-top:.5rem}

.pd-cta{background:linear-gradient(120deg,#2d1a6e,#45289b);border-radius:24px;padding:clamp(2rem,5vw,3.5rem);color:#fff}
.pd-cta h2{color:#fff;font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:.5rem}
.pd-cta h2 span{font-weight:600}
.pd-cta p{margin:0;color:#e9e4ff; line-height: 27px;}
.pd-cta .pd-btn{background:#fff;color:#2d1a6e;border-color:#fff;text-decoration:none;}
.pd-cta .pd-btn:hover{background:#f1edff}

@media (prefers-reduced-motion:reduce){.pd-card{transition:none}.pd-card:hover{transform:none}}

/* ===== FAQ ===== */
    .faq-section {
  padding: 60px 0 80px;
}

.faq-title {
  font-size: 45px;
  font-weight: 400;
  line-height: 1.2;
  color: #111;
  margin-bottom: 4rem;
}

.faq-title span {
  display: block;
  font-weight: 600;
  color:#45289b;
}

.faq-wrap {
  max-width: 960px;
  margin-inline: auto;
}

.faq-accordion .accordion-item {
  background:#f8f6ff;
  border: 1px solid #e6e1f8;
  border-radius: 16px !important;
  margin-bottom: 18px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.faq-accordion .accordion-item:hover,
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color:#c8bff0;
  box-shadow: 0 6px 20px rgba(69, 40, 155, .10);
}

.faq-accordion .accordion-button {
  background: transparent;
  color:#1a1a1a;
  font-size: 1.125rem;          /* 18px */
  font-weight: 600;
  line-height: 1.5;
  padding: 1.35rem 1rem;
  box-shadow: none;
  border-radius: 0 !important;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color:#1a1a1a;
  background: transparent;
  box-shadow: none;
}

.faq-accordion .accordion-button:focus-visible {
  outline: 2px solid #45289b;
  outline-offset: -4px;
}

/* Replace Bootstrap chevron with a "+" (turns into "x" when open) */
.faq-accordion .accordion-button::after {
  width: 1.5rem;
  height: 1.5rem;
  background-size: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345289b' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform .3s ease;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345289b' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transform: rotate(45deg);
}

.faq-accordion .accordion-body {
  padding: 0 2rem 1.75rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #212529;
}

@media (max-width: 767.98px) {
  .faq-section { padding: 40px 0 60px; }
  .faq-title { margin-bottom: 2.5rem; }
  .faq-accordion .accordion-item { margin-bottom: 14px; }
  .faq-accordion .accordion-button {
    font-size: 1rem;
    padding: 1.25rem 1.25rem;
  }
  .faq-accordion .accordion-body { padding: 0 1.25rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-accordion .accordion-item,
  .faq-accordion .accordion-button::after { transition: none; }
}
  

/* ===== Related products slider (os-) ===== */
/* ---- One-Stop slider (prefixed os- so it cannot clash with style.css) ---- */
.os-slider{position:relative}

.os-track{
	display:flex;
	gap:20px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;            /* Firefox */
	padding:8px 2px 18px;
}
.os-track::-webkit-scrollbar{display:none}   /* Chrome, Safari */
.os-track:focus-visible{outline:2px solid #8a6cff;outline-offset:4px;border-radius:12px}

/* 4 cards per row on desktop: (100% - 3 gaps) / 4 */
.os-card{
	flex:0 0 calc((100% - 60px) / 4);
	scroll-snap-align:start;
	display:block;
	text-decoration:none;
	color:#fff;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.12);
	border-radius:16px;
	overflow:hidden;
	transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.os-card:hover,.os-card:focus-visible{
	transform:translateY(-4px);
	border-color:#8a6cff;
	box-shadow:0 14px 30px rgba(0,0,0,.35);
	color:#fff;
}
.os-card:focus-visible{outline:3px solid #8a6cff;outline-offset:3px}

.os-img{display:block;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#2b2158,#14121f)}
.os-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.os-card:hover .os-img img{transform:scale(1.06)}
/* shown only if a product photo is missing and the old icon is used as fallback */
.os-img img.is-icon{object-fit:contain;padding:22%}

.os-body{display:block;padding:1rem 1.1rem 1.2rem}
.os-name{font-size:1.1rem;font-weight:500;line-height:1.35;color:#fff;margin:0 0 .5rem}
.os-more{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:#c8b9ff}
.os-more svg{width:1rem;height:1rem;transition:transform .25s}
.os-card:hover .os-more svg{transform:translateX(4px)}

/* arrows */
.os-nav{
	position:absolute;top:calc(50% - 30px);z-index:2;
	width:46px;height:46px;border-radius:50%;border:0;
	background:#fff;color:#45289b;display:grid;place-items:center;
	box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer;
	transition:background .2s,color .2s,transform .2s;
}
.os-nav:hover{background:#45289b;color:#fff}
.os-nav:focus-visible{outline:3px solid #8a6cff;outline-offset:3px}
.os-nav svg{width:22px;height:22px}
.os-prev{left:-22px}
.os-next{right:-22px}

/* tablet: 2 cards */
@media (max-width:991.98px){
	.os-card{flex-basis:calc((100% - 20px) / 2)}
	.os-prev{left:-10px}.os-next{right:-10px}
}
/* phone: one card with a peek of the next */
@media (max-width:575.98px){
	.os-card{flex-basis:78%}
	.os-prev{left:4px}.os-next{right:4px}
}
@media (prefers-reduced-motion:reduce){
	.os-track{scroll-behavior:auto}
	.os-card,.os-img img,.os-more svg{transition:none}
	.os-card:hover{transform:none}
	.os-card:hover .os-img img{transform:none}
}

/* ===== Related products + CTA: stop overlap with the site's .body2 rules ===== */
.body2.pd-related{
  position:relative;z-index:1;
  height:auto;min-height:0;            /* ignore any fixed height from the homepage CSS */
  margin-top:0;margin-bottom:0;        /* ignore negative margins */
  padding-top:clamp(3rem,7vw,5rem);
  padding-bottom:0;
  overflow:visible;
}
.body2.pd-related::before,
.body2.pd-related::after{display:none}   /* hide any decorative shapes that overlap the next section */
.pd-cta-section{position:relative;z-index:2;clear:both;margin-top:0}

/* =====================================================================
   RESPONSIVE (small screens). Keep this section LAST in the file so it
   wins over the base rules above. Text sizes are slightly larger on phones.
   ===================================================================== */

/* ---------- Tablet and below (max 991.98px) ---------- */
@media (max-width:991.98px){
  .pd-section{padding:3.5rem 0}
  .pd-title{font-size:38px;line-height:1.25}
  .pd-lead{line-height:1.7}
  .faq-title{font-size:38px}

  /* slider */
  .os-track{gap:16px}
  .os-card{flex-basis:calc((100% - 16px) / 2)}
  .os-prev{left:-10px}.os-next{right:-10px}
  .os-nav{width:40px;height:40px}
  .os-nav svg{width:20px;height:20px}
}

/* ---------- Large phones / small tablets (max 767.98px) ---------- */
@media (max-width:767.98px){
  .pd-section{padding:3rem 0}
  .pd-title{font-size:32px;line-height:1.25;margin-bottom:.75rem}
  .pd-lead{font-size:1.0625rem;line-height:1.7}     /* 17px */
  .pd-eyebrow{font-size:.8rem}

  .pd-card{padding:1.25rem}
  .pd-card h3{font-size:1.15rem}
  .pd-card p{font-size:1rem;line-height:1.65}
  .pd-dot{width:46px;height:46px;margin-bottom:.75rem}
  .pd-icon{width:2rem;height:2rem}
  .pd-icon-sm{width:1.5rem;height:1.5rem}

  /* table: first column stays visible while scrolling sideways */
  .pd-table{font-size:.9rem}
  .pd-table th,.pd-table td{padding:.7rem .85rem}
  .pd-table tbody th,.pd-table thead th:first-child{position:sticky;left:0;z-index:1;background:#fff}
  .pd-table thead th:first-child{background:#ede9ff}
  .pd-table tbody tr:nth-child(even) th{background:#faf9ff}
  .pd-note{font-size:.875rem}
  .pd-cap{font-size:.875rem}

  .pd-steps li{gap:.75rem}
  .pd-cta{border-radius:18px}
  .pd-cta p{font-size:1.0625rem;line-height:1.7}

  /* FAQ */
  .faq-section{padding:40px 0 60px}
  .faq-title{font-size:32px;margin-bottom:2rem}
  .faq-accordion .accordion-item{margin-bottom:14px}
  .faq-accordion .accordion-button{font-size:1.0625rem;padding:1.25rem 1.25rem}
  .faq-accordion .accordion-body{padding:0 1.25rem 1.25rem;font-size:1.0625rem}

  /* inner banner (site classes) */
  .inner-banner .in-baner-content h2{font-size:32px;line-height:1.25}
  .inner-banner .in-baner-content p.prabnrs{font-size:1.0625rem;line-height:1.65}
  .inner-banner .in-baner-content h3{font-size:.9rem;line-height:1.6}
}

/* ---------- Phones (max 575.98px) ---------- */
@media (max-width:575.98px){
  .pd-title,.faq-title,
  .inner-banner .in-baner-content h2{font-size:28px}

  /* buttons full width */
  .pd-btn{display:block;width:100%;text-align:center;padding:.8rem 1.25rem;font-size:1rem}
  .pd-cta .pd-btn{display:flex;justify-content:center}
  .pd-cta{padding:1.75rem 1.25rem;text-align:center}
  .pd-cta h2{font-size:1.65rem}
  .pd-cta p br{display:none}

  /* slider */
  .os-track{gap:12px;padding:6px 2px 14px}
  .os-card{flex-basis:70%;border-radius:14px}
  .os-img{aspect-ratio:16/11}
  .os-body{padding:.8rem .9rem 1rem}
  .os-name{font-size:1.05rem;line-height:1.3;margin-bottom:.4rem}
  .os-more{font-size:.85rem}
  .os-more svg{width:.95rem;height:.95rem}
  .os-nav{width:34px;height:34px;top:28%;box-shadow:0 4px 12px rgba(0,0,0,.3)}
  .os-nav svg{width:18px;height:18px}
  .os-prev{left:2px}.os-next{right:2px}
}

/* ---------- Very small phones (max 375px) ---------- */
@media (max-width:375px){
  .pd-title,.faq-title,
  .inner-banner .in-baner-content h2{font-size:26px}
  .pd-card{padding:1rem}
  .pd-table th,.pd-table td{padding:.6rem .7rem}
  .os-card{flex-basis:76%}
}