/* =========================================================================
   quote-products.css — visual selector for the FlipSidez quote form.
   Namespaced .qprod- so it can coexist with the original .acc- showcase.
   ========================================================================= */

.qprod, .qprod *{box-sizing:border-box}

.qprod{
  width:100%;
  max-width:1080px;
  margin:18px auto 34px;
  padding:28px 18px 38px;
  text-align:center;
  color:var(--ink,#16212c);
  font-family:var(--sans,Arial,sans-serif);
}

.qprod-eyebrow{
  display:block;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--darkgold,#1d778c);
}

.qprod h2{
  margin:10px 0 0;
  font-family:var(--serif,Georgia,serif);
  font-weight:400;
  line-height:1.15;
  font-size:clamp(1.7rem,3.4vw,2.35rem);
  color:var(--ink,#16212c);
}

.econtent p.qprod-intro {
  max-width:640px;
  margin:10px auto 0;
  color:var(--ink-soft,#45433c);
  font-size:.95rem;
  line-height:1.5;
  text-align:center;
}

.qprod-row{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  height:270px;
  margin:34px auto 0;
  gap:0;
}

.qprod-row::after{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--hairline,#ddd3bf) 16%,var(--hairline,#ddd3bf) 84%,transparent);
}

.qprod-item{
  position:relative;
  flex:1 1 0%;
  min-width:0;
  height:100%;
  cursor:pointer;
  border:0;
  background:none;
  padding:0 6px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  transition:flex-grow .5s cubic-bezier(.22,.61,.36,1),
             border-color .2s ease,
             background .2s ease;
}


.qprod-item img{
  max-width:100%;
  max-height:90%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:saturate(.85) brightness(.99) opacity(.82) drop-shadow(0 10px 18px rgba(22,33,44,.28));
  transition:filter .45s ease,transform .5s ease;
  transform-origin:50% 100%;
  pointer-events:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,filter;
}

.qprod-item.is-focus{flex-grow:2.8}

.qprod-item.is-focus img,
.qprod-item:focus-visible img{
  filter:saturate(1) brightness(1) opacity(1) drop-shadow(0 24px 34px rgba(22,33,44,.42));
  transform:scale(1.04);
}

.qprod-item:focus-visible{outline:none}

/* Persistent selected marker — independent of which product currently has focus. */
.qprod-check{
  display:none;
}


.qprod-item.is-selected img{
  filter:saturate(1) brightness(1) opacity(1)
         drop-shadow(0 16px 24px rgba(22,33,44,.38));
  outline:2px solid var(--accent,#3695ab);
  outline-offset:6px;
  border-radius:8px;
}

.qprod-caption{
  margin:20px auto 0;
  min-height:175px;
  max-width:32rem;
  transition:opacity .2s ease;
}

.qprod-cap-kicker{
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--darkgold,#1d778c);
}

.qprod-caption h3{
  font-family:var(--serif,Georgia,serif);
  font-weight:400;
  font-size:1.7rem;
  margin:7px 0 0;
  color:var(--ink,#16212c);
}

.qprod-caption p{
  margin:9px auto 0;
  max-width:28rem;
  color:var(--ink-soft,#45433c);
  font-size:.95rem;
  line-height:1.5;
  min-height:3em;
}

.qprod-price{
  margin-top:11px;
  font-size:.93rem;
  color:var(--ink,#16212c);
}

.qprod-price b{
  font-family:var(--serif,Georgia,serif);
  font-weight:400;
  color:var(--darkgold,#1d778c);
}

.qprod-cta{
  margin-top:16px;
  display:inline-block;
  cursor:pointer;
  font-family:var(--sans,Arial,sans-serif);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:#fff;
  background:var(--ink,#16212c);
  border:1px solid var(--ink,#16212c);
  padding:12px 24px;
  border-radius:2px;
  transition:background .2s,border-color .2s,color .2s;
}

.qprod-cta:hover{
  background:var(--accent,#3695ab);
  border-color:var(--accent,#3695ab);
}

.qprod-cta.is-selected{
  color:var(--accent-deep,#1d778c);
  background:#fff;
  border-color:var(--accent,#3695ab);
}

.qprod-status{
  min-height:1.4em;
  margin-top:9px;
  color:var(--accent-deep,#1d778c);
  font-size:.82rem;
}

.qprod-lightbox{
  position:fixed;
  inset:0;
  z-index:1100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:30px;
  background:rgba(22,33,44,.84);
  cursor:zoom-out;
  opacity:0;
  transition:opacity .2s ease;
}

.qprod-lightbox.show{display:flex;opacity:1}

.qprod-lightbox img{
  max-width:92vw;
  max-height:88vh;
  background:#fcfcfc;
  padding:10px;
  border-radius:12px;
  box-shadow:0 30px 90px -24px rgba(0,0,0,.7);
  cursor:default;
}

.qprod-lb-close{
  position:absolute;
  top:18px;
  right:22px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  transition:background .2s;
}

.qprod-lb-close:hover{background:rgba(255,255,255,.3)}

/* Optional class added by JS when the mount requests the original Contact
   Form 7 checkbox row to be hidden. The checkbox itself still exists and is
   submitted normally; only its original visual row is removed. */
.qprod-native-hidden{display:none!important}

.qprod-swipe-hint{
  display:none;
}

.qprod-zoom{
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;

  width:34px;
  height:34px;
  padding:7px;

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

  border:1px solid var(--accent,#3695ab);
  border-radius:50%;
  background:#fff;
  color:var(--accent-deep,#1d778c);

  cursor:zoom-in;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,
             visibility .2s ease,
             background .2s ease,
             color .2s ease;

  box-shadow:0 3px 10px rgba(22,33,44,.18);
}

/* Desktop: reveal magnifier only on the product being hovered.
   Keyboard users still see it when focus is visibly shown. */
@media (hover:hover) and (pointer:fine){
  .qprod-item:hover .qprod-zoom,
  .qprod-item:focus-visible .qprod-zoom,
  .qprod-zoom:focus-visible{
    opacity:1;
    visibility:visible;
  }
}

.qprod-zoom:hover{
  opacity:1;
  background:var(--accent,#3695ab);
  color:#fff;
}

.qprod-zoom svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}




@media (max-width:560px){
  .qprod-swipe-hint{
    display:block;
    margin:14px 0 2px;
    text-align:center;
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--accent-deep,#1d778c);
  }
}



@media (prefers-reduced-motion:reduce){
  .qprod-item,
  .qprod-item img,
  .qprod-check{transition:none}
}

/* Phone: discrete horizontal swipe carousel. */
@media (max-width:560px){
  .qprod{padding:24px 12px 34px}
  .qprod-row{
    height:235px;
    overflow-x:auto;
    justify-content:flex-start;
    padding:0 18%;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .qprod-row::-webkit-scrollbar{display:none}
  .qprod-row::after{display:none}
  .qprod-item{
    flex:0 0 64%;
    scroll-snap-align:center;
    padding:0;
  }
  .qprod-item.is-focus{flex-grow:0}
  .qprod-item img{
    max-height:100%;
    transform:scale(.78);
    opacity:.5;
    filter:drop-shadow(0 12px 20px rgba(22,33,44,.3));
    transition:transform .35s ease,opacity .35s ease,filter .35s ease;
  }
  .qprod-item.is-focus img{
    transform:scale(1.35);
    opacity:1;
    filter:drop-shadow(0 20px 28px rgba(22,33,44,.42));
  }
  .qprod-check{top:18px;right:17%}

  /* Touch screens have no reliable hover. Show zoom only on the centered item. */
  .qprod-item:not(.is-focus) .qprod-zoom{
    opacity:0;
    visibility:hidden;
  }
  .qprod-item.is-focus .qprod-zoom{
    opacity:1;
    visibility:visible;
  }
}

@media (max-width:560px){
  .qprod{padding-left:0;padding-right:0}
  .qprod h2{font-size:1.65rem}
  .qprod-intro{padding:0 12px}
  .qprod-row{height:210px}
  .qprod-caption{padding:0 12px;min-height:185px}
  .qprod-item.is-focus img{transform:scale(1.25)}
}