.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} .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)} .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);
} @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}
} @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%} .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)}
}