/* 03/11/2026 (Franco): stile della nuova scheda prodotto a preventivo (ProductBodyV3.astro). Regole del prototipo approvato
   (ares-flusso.html) limitate a quelle usate dalla pagina e confinate in .pv3, poi gli adattamenti al sito vero in fondo. */
.pv3 { --carta: #f0e8dc; --carta2: #e8dfd2; --panna: #f8f3eb; --ink: #252523; --txt: #3d3731; --mid: #6f6458; --filo: #dcd2c4; --bx: #8a2f33; --bx2: #a63c40; --rust: #b5482a; --f-disp: 'Fraunces',Georgia,serif; --f-ui: 'Onest',system-ui,sans-serif; --f-h: 'Archivo',system-ui,sans-serif; --f-menu: 'Manrope',system-ui,sans-serif; --gl: max(20px,env(safe-area-inset-left,0px)); --gr: max(20px,env(safe-area-inset-right,0px)); --side: max(32px,env(safe-area-inset-left,0px)); --sider: max(32px,env(safe-area-inset-right,0px)); --head: 84px; --rail: clamp(190px,16vw,240px); }
.pv3 *, .pv3 ::before, .pv3 ::after { box-sizing: border-box; }
.pv3 { background: var(--carta); color: var(--ink); font-family: var(--f-ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.pv3 a { color: inherit; }
.pv3 img { display: block; }
.pv3 button { font: inherit; color: inherit; }
.pv3 .hero { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); }
.pv3 .hl { padding: 0 clamp(28px,4.4vw,72px) 56px var(--side); display: grid; gap: 26px; align-content: start; }
.pv3 .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid); margin: 8px 0px 0px; }
.pv3 .crumb .sep { margin: 0px 10px; color: var(--filo); }
.pv3 .crumb a { text-decoration: none; }
.pv3 .crumb a:hover { color: var(--ink); }
.pv3 .tt { display: grid; gap: 16px; margin-bottom: 18px; }
.pv3 .hl > .tags { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust); margin: -16px 0px 6px; }
.pv3 .hl > .tags span + span::before { content: "·"; margin-right: 16px; color: var(--filo); }
.pv3 .crumb b { color: var(--ink); }
.pv3 .crumb b { color: var(--ink); font-weight: 600; }
.pv3 h1 { font-family: var(--f-disp); font-weight: 350; font-size: clamp(56px, 5.6vw, 88px); line-height: 0.92; letter-spacing: -0.035em; margin: 0px; }
.pv3 .hr { position: relative; padding-top: 28px; }
.pv3 .ph { position: sticky; top: calc(var(--head) + 28px); overflow: hidden; width: 100%; aspect-ratio: 4 / 5; background: rgb(230, 220, 205); }
.pv3 .ph > img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.7s; }
.pv3 .ph > img.off { object-position: 50% 40%; }
.pv3 .ph .lit { opacity: 0; filter: brightness(0.6) saturate(1.15) sepia(0.2); }
.pv3 .ph .glow { position: absolute; inset: 0px; opacity: 0; transition: opacity 1s; mix-blend-mode: screen; background: radial-gradient(ellipse 36% 27% at var(--gx,50%) var(--gy,44%),rgba(255,214,150,.95),rgba(255,170,90,.45) 45%,rgba(120,60,20,0) 75%); }
.pv3 .ph .glow2 { position: absolute; inset: 0px; opacity: 0; transition: opacity 1s; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--gx,50%) var(--gy,44%),rgba(255,236,200,.9),rgba(255,236,200,0) 30%); }
.pv3 .ph.on .lit, .pv3 .ph.on .glow, .pv3 .ph.on .glow2 { opacity: 1; }
.pv3 .fav { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--panna); display: grid; place-items: center; z-index: 2; border: 0px; cursor: pointer; }
.pv3 .plate { position: absolute; left: 24px; bottom: 24px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 7px 18px 7px 7px; border-radius: 999px; border: 0px; cursor: pointer; background: rgba(248, 243, 235, 0.94); font-size: 14px; box-shadow: rgba(37, 37, 35, 0.12) 0px 6px 24px; }
.pv3 .plate .k { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); transition: background 0.4s, box-shadow 0.4s; }
.pv3 .plate .k svg { width: 16px; height: 16px; fill: none; stroke: rgb(240, 232, 220); stroke-width: 1.6; }
.pv3 .ph.on .plate .k { background: rgb(242, 194, 124); box-shadow: rgba(242, 194, 124, 0.25) 0px 0px 0px 6px, rgba(242, 194, 124, 0.8) 0px 0px 22px; }
.pv3 .ph.on .plate .k svg { stroke: rgb(58, 36, 20); }
.pv3 .sim { position: absolute; left: 0px; right: 0px; top: 20px; text-align: center; font-size: 12px; color: rgb(255, 255, 255); opacity: 0; transition: opacity 0.4s; z-index: 2; }
.pv3 .sim span { background: rgba(37, 37, 35, 0.55); padding: 4px 10px; border-radius: 999px; }
.pv3 .ph.on .sim { opacity: 1; }
.pv3 #collezione { grid-row: 3; }
.pv3 #colori { grid-row: 4; }
.pv3 #progetti { grid-row: 5; }
.pv3 #simili { grid-row: 6; }
@keyframes pv3-fl{ 
  0% { background: rgba(138, 47, 51, 0.07); }
  100% { background: transparent; }
}
.pv3 .wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--panna); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; box-shadow: 4px 4px 0 var(--ink); transition: transform 0.15s, box-shadow 0.15s; }
.pv3 .wa:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.pv3 .wa svg { width: 21px; height: 21px; fill: rgb(31, 122, 77); }
.pv3 .tg { position: absolute; right: 24px; bottom: 24px; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(248, 243, 235, 0.94); box-shadow: rgba(37, 37, 35, 0.12) 0px 6px 24px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pv3 .tg button { width: 36px; height: 36px; border-radius: 50%; border: 0px; background: transparent; cursor: pointer; font-size: 15px; transition: background 0.2s; }
.pv3 .tg button:hover { background: var(--carta2); }
.pv3 .tg span { min-width: 46px; text-align: center; }
@keyframes pv3-rise{ 
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: none; }
}
@keyframes pv3-letter{ 
  0% { opacity: 0; transform: translateY(0.4em) rotate(5deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes pv3-photo{ 
  0% { transform: scale(1.06); filter: saturate(0.8); }
  100% { transform: none; filter: none; }
}
.pv3 .hl > * { animation: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal both running pv3-rise; }
.pv3 .hl > :nth-child(2) { animation-delay: 0.08s; }
.pv3 .hl > :nth-child(3) { animation-delay: 0.22s; }
.pv3 .hl > :nth-child(4) { animation-delay: 0.32s; }
.pv3 .hl > :nth-child(5) { animation-delay: 0.42s; }
.pv3 h1 .lt { display: inline-block; animation: 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal both running pv3-letter; }
.pv3 .ph > img.off { animation: 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal both running pv3-photo; }
.pv3 .rv { transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce){
.pv3 .hl > *, .pv3 h1 .lt, .pv3 .ph > img.off { animation: auto ease 0s 1 normal none running none; }
}
.pv3 .more { font-size: 13px; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentcolor; padding-bottom: 1px; white-space: nowrap; }
.pv3 .more:hover { color: var(--bx); }
.pv3 .pl { background: none; border: 0px; padding: 0px; cursor: pointer; display: grid; gap: 6px; justify-items: center; width: 68px; font-size: 12px; color: var(--mid); text-align: center; line-height: 1.25; }
.pv3 .plus { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--bx); color: rgb(255, 255, 255); font-size: 11px; font-weight: 600; line-height: 1; font-style: normal; }
.pv3 .leg { font-size: 12.5px; color: var(--mid); margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.pv3 { --wob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6' viewBox='0 0 120 6'%3E%3Cpath d='M0 3.2C12 1.9 22 4.4 34 3.1S58 2.2 70 3.4 94 4.2 106 2.9 116 3 120 3.2' fill='none' stroke='%23252523' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pv3 .pro-box { position: relative; display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 14px 22px; align-items: center; background: var(--panna); border: 1.5px solid var(--ink); border-radius: 4px; padding: 22px 22px 20px; box-shadow: 5px 5px 0 var(--ink); }
.pv3 .stamp { position: absolute; top: -13px; left: 18px; font-family: var(--f-h); font-weight: 800; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255, 255, 255); background: var(--bx); border: 1.5px solid var(--ink); border-radius: 3px; padding: 2px 9px 1px; transform: rotate(-3deg); }
.pv3 .btn, .pv3 .btn-o { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0px 22px; border: 1.5px solid var(--ink); border-radius: 6px; font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: 4px 4px 0 var(--ink); transition: transform 0.15s, box-shadow 0.15s, background 0.2s; }
.pv3 .btn { background: var(--bx); color: rgb(255, 255, 255); }
.pv3 .btn:hover, .pv3 .btn-o:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.pv3 .btn:active, .pv3 .btn-o:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.pv3 .btn svg, .pv3 .btn-o svg { width: 28px; height: 14px; fill: none; stroke: currentcolor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s; }
.pv3 .btn:hover svg, .pv3 .btn-o:hover svg { transform: translateX(3px); }
.pv3 .sl { font-family: var(--f-h); font-weight: 600; font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; display: grid; gap: 6px; align-content: start; padding-top: 3px; }
@keyframes pv3-drawc{ 
  100% { stroke-dashoffset: 0; }
}
.pv3 #gQ { margin-bottom: 6px; }
.pv3 .cfg { margin-top: 20px; border-top: 1.5px solid var(--ink); }
.pv3 .acc { border-bottom: 1px solid var(--filo); }
.pv3 .acc > button { width: 100%; display: grid; grid-template-columns: 110px minmax(0px, 1fr) auto 20px; gap: 12px; align-items: center; background: none; border: 0px; padding: 21px 0px; cursor: pointer; text-align: left; color: var(--ink); }
.pv3 .acc .sl { padding-top: 0px; }
.pv3 .acc .val { font-size: 15px; display: flex; gap: 9px; align-items: center; min-width: 0px; transition: opacity 0.25s; }
.pv3 .acc .val small { color: var(--mid); font-size: 13px; }
.pv3 .acc .th { width: 26px; height: 26px; border-radius: 3px; object-fit: cover; flex: 0 0 auto; }
.pv3 .acc .ch { font-size: 12.5px; color: var(--mid); opacity: 0; transition: opacity 0.2s; }
.pv3 .acc > button:hover .ch { opacity: 1; }
.pv3 .acc .ic { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pv3 .acc.open .ic { transform: rotate(45deg); }
.pv3 .acc.open[data-k="v"] .val { opacity: 0; }
.pv3 .acc .pn { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pv3 .acc.open .pn { grid-template-rows: 1fr; }
.pv3 .acc .pn > div { overflow: hidden; }
.pv3 .acc .in { padding: 6px 0px 24px 122px; display: grid; gap: 10px; justify-items: start; }
.pv3 .acc .in#vlist { justify-items: stretch; gap: 0px; }
.pv3 .acc.open .in > * { animation: 0.45s ease 0s 1 normal both running pv3-inUp; }
@keyframes pv3-inUp{ 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
.pv3 .vr { display: grid; grid-template-columns: 96px minmax(0px, 1fr) auto; gap: 12px; align-items: baseline; background: none; border: 0px; padding: 8px 0px; cursor: pointer; text-align: left; color: var(--mid); font-size: 15px; transition: color 0.2s; }
.pv3 .vr:hover { color: var(--ink); }
.pv3 .vr b { font-weight: 500; color: var(--ink); position: relative; justify-self: start; }
.pv3 .vr small { font-size: 13px; }
.pv3 .vr[aria-pressed="true"] { color: var(--ink); }
.pv3 .vr b svg { position: absolute; left: -10px; top: -7px; width: calc(100% + 20px); height: calc(100% + 14px); overflow: visible; opacity: 0; }
.pv3 .vr b svg path { fill: none; stroke: var(--rust); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 240; stroke-dashoffset: 240; vector-effect: non-scaling-stroke; }
.pv3 .vr[aria-pressed="true"] b svg { opacity: 1; }
.pv3 .vr[aria-pressed="true"] b svg path { animation: 0.7s ease 0s 1 normal forwards running pv3-drawc; }
.pv3 .sqs { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.pv3 .sq { background: none; border: 0px; padding: 0px; cursor: pointer; display: grid; gap: 5px; justify-items: center; width: 62px; font-size: 12px; color: var(--mid); text-align: center; line-height: 1.25; }
.pv3 .sq span { position: relative; display: block; width: 56px; height: 56px; padding: 3px; border: 1.5px solid transparent; border-radius: 4px; transition: border-color 0.2s, transform 0.25s; }
.pv3 .sq img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.pv3 .sq:hover span { transform: translateY(-3px) rotate(-2deg); }
.pv3 .sq[aria-pressed="true"] span { border-color: var(--ink); }
.pv3 .sq[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
.pv3 .sq .plus { position: absolute; top: -6px; right: -6px; }
.pv3 .rq2 { display: grid; gap: 22px; margin-top: 20px; }
.pv3 .rq-s { margin: 0px; font-size: 13.5px; color: var(--txt); display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; }
.pv3 .rq-s em { font-style: normal; color: var(--bx); display: inline-flex; gap: 6px; align-items: center; }
.pv3 .rq-b2 { display: grid; grid-template-columns: minmax(0px, 1.3fr) minmax(0px, 1fr); gap: 14px; }
.pv3 .btn2, .pv3 .wa2 { height: 64px; justify-content: center; gap: 14px; }
.pv3 .wa2 { display: inline-flex; align-items: center; }
.pv3 .bt { display: grid; gap: 1px; text-align: left; line-height: 1.15; }
.pv3 .bt small { font-size: 11.5px; font-weight: 400; opacity: 0.8; }
.pv3 .btn2 .bt small { color: rgb(243, 220, 216); opacity: 1; }
.pv3 .facts { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 13px; color: var(--txt); margin: 4px 0px 6px; padding: 0px; list-style: none; }
.pv3 .facts li { display: flex; gap: 7px; align-items: center; }
.pv3 .facts svg { width: 21px; height: 21px; flex: 0 0 auto; fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pv3-ul{ 
  100% { clip-path: inset(0px); }
}
@media (max-width: 960px){
.pv3 .acc > button { grid-template-columns: 84px minmax(0px, 1fr) 20px; }
.pv3 .acc .ch { display: none; }
.pv3 .acc .in { padding-left: 0px; }
.pv3 .vr { grid-template-columns: 76px minmax(0px, 1fr); }
.pv3 .vr small { grid-column: 2; }
.pv3 .rq-b2 { grid-template-columns: minmax(0px, 1fr); }
}
@media (prefers-reduced-motion: reduce){
.pv3 .acc .pn, .pv3 .acc.open .in > * { transition: none; animation: auto ease 0s 1 normal none running none; }
}
@media (max-width: 960px){
.pv3 .pro-box { grid-template-columns: minmax(0px, 1fr); }
.pv3 .sl { grid-auto-flow: column; justify-content: space-between; align-items: baseline; }
}
@media (max-width: 960px){
.pv3 { --head: 70px; --side: var(--gl); --sider: var(--gr); }
.pv3 .hero { grid-template-columns: minmax(0px, 1fr); margin-top: 0px; }
.pv3 .hr { order: -1; min-height: 0px; }
.pv3 .ph { position: relative; }
.pv3 .fav { top: 14px; }
.pv3 .sim { top: 16px; }
.pv3 .plate { left: 14px; bottom: 14px; }
.pv3 .tg { right: 12px; bottom: 12px; }
.pv3 .hl { padding: 24px var(--gr) 0 var(--gl); }
}
@media (prefers-reduced-motion: reduce){
.pv3 * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
}
.pv3 .rl { display: inline-flex; align-items: baseline; white-space: pre; }
.pv3 .rd { display: inline-block; speak: none; height: 1.2em; line-height: 1.2em; overflow: hidden; vertical-align: bottom; }
.pv3 .rd > span { display: flex; flex-direction: column; transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1); }
.pv3 .rd > span > i { font-style: normal; height: 1.2em; line-height: 1.2em; }
.pv3 .rc { display: inline-block; animation: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal both running pv3-rcin; }
@keyframes pv3-rcin{ 
  0% { opacity: 0; transform: translateY(0.5em); }
  100% { opacity: 1; transform: none; }
}
.pv3 .fw { display: inline-block; perspective: 400px; }
.pv3 .fw > span { display: inline-block; transform-origin: 50% 100%; }
.pv3 .fw > span.go { animation: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal both running pv3-flipin; }
@keyframes pv3-flipin{ 
  0% { opacity: 0; transform: rotateX(-80deg) translateY(0.3em); }
  100% { opacity: 1; transform: none; }
}
.pv3 #sX { max-width: 0px; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s; }
.pv3 #sX.on { max-width: 340px; opacity: 1; }
.pv3 #sX.on .plus { animation: 1.2s ease-out 0.3s 2 normal none running pv3-pulse; }
@keyframes pv3-pulse{ 
  0% { box-shadow: rgba(138, 47, 51, 0.45) 0px 0px 0px 0px; }
  100% { box-shadow: rgba(138, 47, 51, 0) 0px 0px 0px 9px; }
}
.pv3 .sq span { overflow: visible; }
.pv3 .sq .ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); pointer-events: none; overflow: visible; }
.pv3 .sq .ring path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 260; stroke-dashoffset: 260; }
.pv3 .sq[aria-pressed="true"] span { border-color: transparent; }
.pv3 .sq[aria-pressed="true"] .ring path { stroke-dashoffset: 0; }
.pv3 .sq.just .ring path { animation: 0.7s ease 0s 1 normal forwards running pv3-ringd; }
@keyframes pv3-ringd{ 
  0% { stroke-dashoffset: 260; }
  100% { stroke-dashoffset: 0; }
}
.pv3 .sq.just span { animation: 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) 0s 1 normal none running pv3-popq; }
@keyframes pv3-popq{ 
  0% { transform: scale(0.88); }
  100% { transform: none; }
}
.pv3 .sq:hover img { filter: brightness(1.05); }
.pv3 .vr { transition: color 0.4s, opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pv3 #vlist:has(.vr[aria-pressed="true"]) .vr:not([aria-pressed="true"]) { opacity: 0.62; }
.pv3 #vlist .vr:hover { opacity: 1 !important; transform: translateX(6px); }
.pv3 #vlist .vr[aria-pressed="true"] { transform: translateX(6px); }
.pv3 .sz { position: absolute; left: 24px; top: 22px; z-index: 2; display: grid; gap: 1px; background: rgba(248, 243, 235, 0.94); border-radius: 4px; padding: 8px 12px 7px; box-shadow: rgba(37, 37, 35, 0.1) 0px 6px 24px; }
.pv3 .sz b { font-family: var(--f-disp); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; }
.pv3 .sz small { font-size: 12px; color: var(--mid); }
.pv3 .ph.breath > img.off { animation: 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal none running pv3-breath; }
@keyframes pv3-breath{ 
  0% { transform: scale(1); }
  40% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
.pv3 .wipe { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; z-index: 1; clip-path: circle(0% at var(--wx,0%) var(--wy,100%)); transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.25, 1); }
.pv3 .wipe.go { clip-path: circle(150% at var(--wx,0%) var(--wy,100%)); }
.pv3 .btn2, .pv3 .wa2 { position: relative; overflow: hidden; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s; }
.pv3 .btn2::before { content: ""; position: absolute; top: 0px; bottom: 0px; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-18deg) translateX(0px); pointer-events: none; }
.pv3 .btn2.sh::before { animation: 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 normal none running pv3-shine; }
@keyframes pv3-shine{ 
  100% { transform: skewX(-18deg) translateX(520%); }
}
.pv3 .btn2 svg path { transition: d 0.3s; }
.pv3 .btn2:hover svg { transform: translateX(5px) scaleX(1.15); }
.pv3 .wa2:hover svg { animation: 0.6s ease 0s 1 normal none running pv3-wig; }
@keyframes pv3-wig{ 
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-12deg); }
  60% { transform: rotate(9deg); }
}
.pv3 .wa2::after { content: ""; position: absolute; inset: 0px; background: rgb(227, 239, 230); transform: scaleY(0); transform-origin: center bottom; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: -1; }
.pv3 .wa2 { z-index: 0; }
.pv3 .wa2:hover::after { transform: none; }
@media (prefers-reduced-motion: reduce){
.pv3 .rd > span { transition: none; }
}
.pv3 .sz { left: 22px; top: 20px; background: none; box-shadow: none; padding: 0px; display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
.pv3 .sz b { font-family: var(--f-ui); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.pv3 .sz small { font-size: 11.5px; letter-spacing: 0.06em; color: rgba(37, 37, 35, 0.62); }
.pv3 .sz b::before { content: ""; display: inline-block; width: 18px; height: 1px; background: currentcolor; vertical-align: middle; margin-right: 10px; opacity: 0.6; }
.pv3 .plate { background: rgba(240, 232, 220, 0.42); backdrop-filter: blur(10px); box-shadow: none; font-size: 12.5px; padding: 5px 14px 5px 5px; gap: 9px; left: 20px; bottom: 20px; color: var(--ink); }
.pv3 .plate .k { width: 26px; height: 26px; background: transparent; border: 1px solid rgba(37, 37, 35, 0.55); }
.pv3 .plate .k svg { width: 13px; height: 13px; stroke: var(--ink); }
.pv3 .ph.on .plate .k { background: rgba(242, 194, 124, 0.9); border-color: transparent; box-shadow: rgba(242, 194, 124, 0.7) 0px 0px 14px; }
.pv3 .tg { background: rgba(240, 232, 220, 0.42); backdrop-filter: blur(10px); box-shadow: none; font-size: 12px; padding: 2px; right: 20px; bottom: 20px; }
.pv3 .tg button { width: 30px; height: 30px; font-size: 13px; }
.pv3 .tg button:hover { background: rgba(240, 232, 220, 0.7); }
.pv3 .tg span { min-width: 38px; }
.pv3 .fav { width: 38px; height: 38px; background: rgba(240, 232, 220, 0.42); backdrop-filter: blur(10px); }
.pv3 .fav svg { width: 17px; height: 17px; }
.pv3 .vin { position: absolute; inset: 0px; transform: scale(var(--vs,1.08)); transform-origin: 50% 40%; }
.pv3 .vin video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv3 .facts3 { margin: 34px 0px 0px; display: flex; flex-wrap: wrap; gap: 18px 40px; padding-top: 20px; border-top: 1px solid var(--ink); }
.pv3 .facts3 div { display: grid; gap: 4px; }
.pv3 .facts3 dt { font-family: var(--f-h); font-weight: 600; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mid); }
.pv3 .facts3 dd { margin: 0px; font-size: 14.5px; color: var(--ink); }
.pv3 .lamp3 { padding-top: 150px; }
.pv3 .l3top { display: grid; gap: 22px; }
.pv3 .dtx3 { font-family: var(--f-disp); font-weight: 300; font-size: clamp(28px, 3.1vw, 48px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 0px; max-width: 26ch; }
.pv3 .vwide { position: relative; margin-top: 48px; margin-left: calc(var(--side) + var(--ind,140px) + var(--o,18%)); margin-right: var(--sider); aspect-ratio: 16 / 9; max-height: 84vh; overflow: hidden; background: rgb(43, 39, 36); transition: margin-left 0.2s linear; }
.pv3 .lamp3 { position: relative; z-index: 0; }
.pv3 .vin { position: absolute; inset: 0px; transform: scale(var(--vs,1.1)); transform-origin: 50% 50%; }
.pv3 .vin video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv3 .l3bot { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 28px clamp(30px, 5vw, 90px); margin-top: 44px; }
.pv3 .dsub3 { grid-area: 1 / 1; margin: 0px; font-size: 16.5px; line-height: 1.7; color: var(--txt); max-width: 52ch; }
.pv3 .l3bot .facts3 { margin: 0px; }
@media (max-width: 900px){
.pv3 .lamp3 { padding-top: 70px; }
.pv3 .vwide { margin: 24px var(--gr) 0 var(--gl); max-height: none; }
.pv3 .l3bot { grid-template-columns: minmax(0px, 1fr); margin-top: 26px; gap: 22px; }
.pv3 .dsub3, .pv3 .l3bot .facts3 { grid-column: 1; }
}
.pv3 .facts3 { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.pv3 .docs3 { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px; }
.pv3 .doc3 { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--filo); border-radius: 4px; text-decoration: none; transition: border-color 0.3s, background 0.3s, transform 0.3s; }
.pv3 .doc3:hover { border-color: var(--ink); background: var(--panna); transform: translateY(-2px); }
.pv3 .doc3 b { display: block; font-weight: 500; font-size: 14px; }
.pv3 .doc3 small { display: block; font-size: 12px; color: var(--mid); line-height: 1.35; }
.pv3 .pdf3 { flex: 0 0 auto; font-family: var(--f-h); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; color: var(--bx); border: 1px solid var(--bx); border-radius: 3px; padding: 3px 6px; }
.pv3 .pro3 { background: var(--bx); color: rgb(255, 255, 255); }
@media (max-width: 900px){
.pv3 .dsub3, .pv3 .l3bot .facts3, .pv3 .docs3 { grid-row: auto !important; }
.pv3 .docs3 { grid-column: 1; grid-template-columns: minmax(0px, 1fr); }
}
.pv3 .rcol { grid-area: 1 / 2; display: grid; gap: 28px; align-content: start; }
.pv3 .lcol { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 0px; }
.pv3 .colhd { display: grid; gap: 4px; scroll-margin-top: 120px; }
.pv3 .colhd { margin-top: clamp(150px, 14vw, 220px); }
.pv3 .colhd .disp { font-family: var(--f-h); font-weight: 600; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -0.02em; margin: 14px 0px 12px; }
.pv3 .colhd .disp i { font-style: normal; color: var(--bx); }
.pv3 .colhd .txt { font-size: 15px; }
.pv3 section.s-col { padding-top: 46px; }
.pv3 .s-col .rail2 { overflow: visible; margin-right: 0px; padding-right: 0px; }
.pv3 .s-col .rail2 .tr2 { flex-wrap: wrap; width: auto; gap: 16px 10px !important; }
.pv3 .s-col .tr2 .sm { width: clamp(66px, 5.2vw, 80px); font-size: 11.5px; gap: 6px; }
.pv3 .s-col .mets .sm { width: 72px; font-size: 11.5px; }
.pv3 .tr2 { gap: 10px !important; }
.pv3 .mets { margin-top: 34px; gap: 40px; }
@media (max-width: 900px){
.pv3 .lcol, .pv3 .rcol { grid-area: auto / 1; }
}
.pv3 .dtx3 { font-family: var(--f-ui) !important; font-weight: 400 !important; font-size: clamp(21px, 1.9vw, 28px) !important; line-height: 1.45 !important; letter-spacing: -0.01em !important; max-width: 34ch !important; }
.pv3 .pf { position: relative; display: block; padding: 0px; border: 0px; background: rgb(230, 220, 205); overflow: hidden; cursor: zoom-in; }
.pv3 .pf img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pv3 .pf:hover img { transform: scale(1.04); }
.pv3 .plb { position: fixed; inset: 0px; z-index: 80; background: rgba(28, 24, 21, 0.96); display: grid; grid-template-columns: 70px minmax(0px, 1fr) 70px; align-items: center; padding: 60px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px)); color: var(--carta); animation: 0.5s ease 0s 1 normal none running pv3-plbin; }
.pv3 .plb[hidden] { display: none; }
@keyframes pv3-plbin{ 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.pv3 .plb figure { margin: 0px; display: grid; gap: 14px; justify-items: center; height: 100%; min-height: 0px; }
.pv3 .plb img { max-width: 100%; max-height: calc(-160px + 100vh); object-fit: contain; animation: 0.5s ease 0s 1 normal none running pv3-plbin; }
.pv3 .plb figcaption { font-size: 13px; color: rgba(240, 232, 220, 0.75); }
.pv3 .plb .pa { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(240, 232, 220, 0.4); background: transparent; color: var(--carta); cursor: pointer; font-size: 18px; }
.pv3 .plb .pa:hover { background: rgba(240, 232, 220, 0.12); }
.pv3 .plb .px { position: absolute; top: 18px; right: max(20px,env(safe-area-inset-right,0px)); background: none; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-left-color: initial; border-image: initial; color: var(--carta); font-size: 14px; cursor: pointer; border-bottom-style: solid; border-bottom-color: rgba(240, 232, 220, 0.5); }
@media (max-width: 900px){
.pv3 .plb { grid-template-columns: 44px minmax(0px, 1fr) 44px; }
.pv3 .plb .pa { width: 40px; height: 40px; }
}
@keyframes pv3-nudge{ 
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(8px); }
}
.pv3 .hintro h2, .pv3 .hcap h3, .pv3 .hall b, .pv3 .colhd .disp, .pv3 .cap4 h2, .pv3 .simh { font-weight: 800 !important; letter-spacing: -0.03em !important; }
.pv3 .simh { font-family: var(--f-h); font-size: clamp(28px, 2.6vw, 40px); line-height: 1.08; margin: 14px 0px 0px; }
.pv3 section.s-sim { padding-top: 170px; }
.pv3 .car .tr3 { gap: 22px; }
.pv3 .car a { width: clamp(240px, 22vw, 320px); gap: 14px; opacity: 0; transform: translateY(40px); transition: opacity 1s ease var(--d),transform 1.2s cubic-bezier(.2,.8,.2,1) var(--d); }
.pv3 .car.in a { opacity: 1; transform: none; }
.pv3 .car .shot { aspect-ratio: 4 / 5; position: relative; background: rgb(230, 220, 205); }
.pv3 .car .shot img { transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s; }
.pv3 .car a:hover .shot img { transform: scale(1.06); }
.pv3 .sgo { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--carta); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pv3 .sgo svg { width: 22px; height: 11px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pv3 .car a:hover .sgo { opacity: 1; transform: none; }
.pv3 .car span { display: grid; gap: 3px; }
.pv3 .car span b { font-family: var(--f-h); font-weight: 800; font-size: 20px; letter-spacing: -0.025em; line-height: 1.1; }
.pv3 .car span small { font-size: 13px; color: var(--mid); }
@media (prefers-reduced-motion: reduce){
.pv3 .car a { opacity: 1; transform: none; }
}
.pv3 .car { cursor: grab; padding: 6px 0px 70px; scroll-snap-type: none !important; }
.pv3 .car.dn { cursor: grabbing; }
.pv3 .car .tr3 { align-items: flex-start; gap: 26px !important; }
.pv3 .car a { user-select: none; }
.pv3 .car a:nth-child(2n) { margin-top: 70px; }
.pv3 .car .shot { aspect-ratio: 3 / 4 !important; }
.pv3 .scap { display: grid; gap: 3px !important; }
.pv3 .scap em { font-style: normal; font-size: 13px; color: var(--ink); }
.pv3 .scap small { font-size: 12.5px !important; color: var(--mid) !important; }
.pv3 .scap small:first-of-type { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--filo); }
.pv3 .simbar { position: relative; height: 1px; background: var(--filo); margin-top: -30px; max-width: 420px; }
.pv3 .simbar i { position: absolute; top: -0.5px; height: 2px; left: var(--sl,0%); width: var(--sw,30%); background: var(--ink); transition: left 0.2s; }
.pv3 .arw button:disabled { opacity: 0.3; cursor: default; box-shadow: none; transform: none; }
@media (max-width: 900px){
.pv3 .car a:nth-child(2n) { margin-top: 40px; }
.pv3 .simbar { display: none; }
}
.pv3 .simbar { display: none !important; }
.pv3 .s-sim .hd { width: min(380px, 28vw); position: relative; z-index: 2; background: var(--carta); padding-bottom: 24px; box-shadow: 24px 0 24px -6px var(--carta); display: grid !important; justify-content: start !important; gap: 22px !important; margin-bottom: 0px !important; }
.pv3 .s-sim .arw { order: 2; }
.pv3 .car { margin-top: calc(-1 * clamp(150px, 13vw, 200px)); }
.pv3 .car .tr3 { padding-left: min(420px, 31vw); }
.pv3 .car a:nth-child(2n) { margin-top: 0px !important; }
.pv3 .car a:nth-child(4n+1) { margin-top: 110px !important; }
.pv3 .car a:nth-child(4n+2) { margin-top: 40px !important; }
.pv3 .car a:nth-child(4n+3) { margin-top: 150px !important; }
.pv3 .car a:nth-child(4n+4) { margin-top: 70px !important; }
@media (max-width: 900px){
.pv3 .s-sim .hd { width: auto; }
.pv3 .car { margin-top: 20px; }
.pv3 .car .tr3 { padding-left: var(--gl); }
.pv3 .car a:nth-child(n) { margin-top: 0px !important; }
}
.pv3 section.s-sim { padding-top: 20px !important; }
.pv3 .car { margin-top: calc(-1 * var(--sh,190px)) !important; }
.pv3 .car a:nth-child(4n+1) { margin-top: 0px !important; }
.pv3 .car a:nth-child(4n+2) { margin-top: 140px !important; }
.pv3 .car a:nth-child(4n+3) { margin-top: 40px !important; }
.pv3 .car a:nth-child(4n+4) { margin-top: 180px !important; }
.pv3 .car .tr3 { padding-left: min(400px, 29vw) !important; }
@media (max-width: 900px){
.pv3 .car { margin-top: 20px !important; }
.pv3 .car a:nth-child(n) { margin-top: 0px !important; }
.pv3 .car .tr3 { padding-left: var(--gl) !important; }
}
.pv3 .s-win { position: relative; height: 230vh; margin-top: 160px; clip-path: inset(0px); background: rgb(58, 47, 39); }
.pv3 .wbg { position: fixed; inset: 0px; z-index: 0; pointer-events: none; }
.pv3 .wbg img { position: absolute; left: 0px; right: 0px; top: calc(var(--hh0,70px) + 46px); width: 100%; height: auto; min-height: calc(100% - var(--hh0,70px) - 46px); object-fit: cover; will-change: transform; backface-visibility: hidden; }
.pv3 .wbg i { position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(26, 20, 16, 0.5) 0%, rgba(26, 20, 16, 0.2) 40%, rgba(26, 20, 16, 0) 65%); }
.pv3 .wtx { position: relative; z-index: 1; height: 100%; color: var(--carta); }
.pv3 .wb { position: absolute; left: calc(var(--side) + var(--ind,140px)); width: min(440px, 36vw); }
.pv3 .wb1 { top: 46vh; }
.pv3 .wb2 { top: 74vh; }
.pv3 .wb3 { top: 96vh; }
.pv3 .wb .kick2 { color: rgba(240, 232, 220, 0.8); }
.pv3 .wb h2 { font-family: var(--f-h); font-weight: 800; font-size: clamp(34px, 3.4vw, 54px); letter-spacing: -0.035em; line-height: 1.02; margin: 14px 0px 0px; }
.pv3 .wb p { margin: 0px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; color: rgba(240, 232, 220, 0.92); }
.pv3 .wb a { display: inline-flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 500; color: var(--carta); text-decoration: none; border-bottom: 1.5px solid rgba(240, 232, 220, 0.6); padding-bottom: 4px; }
.pv3 .wb a svg { width: 30px; height: 14px; fill: none; stroke: currentcolor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s; }
.pv3 .wb a:hover svg { transform: translateX(5px); }
@media (max-width: 900px){
.pv3 .s-win { margin-top: 100px; height: 170vh; }
.pv3 .wb { left: var(--gl); width: calc(100% - var(--gl) - var(--gr)); }
.pv3 .wb1 { top: 40vh; }
.pv3 .wb2 { top: 64vh; }
.pv3 .wb3 { top: 84vh; }
.pv3 .wbg i { background: linear-gradient(0deg, rgba(26, 20, 16, 0.55), rgba(26, 20, 16, 0.15)); }
}
.pv3 .flow { position: relative; overflow: clip; padding-bottom: 20px; }
.pv3 .kick2 { font-family: var(--f-h); font-weight: 600; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust); display: flex; align-items: center; gap: 12px; }
.pv3 .kick2::before { content: ""; width: 26px; height: 1px; background: currentcolor; }
.pv3 .disp { font-family: var(--f-disp); font-weight: 330; letter-spacing: -0.03em; line-height: 1.02; margin: 16px 0px 0px; font-size: clamp(38px, 4vw, 60px); }
.pv3 .disp i { color: var(--bx); }
.pv3 .txt { font-size: 16px; line-height: 1.7; color: var(--txt); max-width: 46ch; margin: 0px; }
.pv3 .shot { overflow: hidden; background: rgb(230, 220, 205); position: relative; }
.pv3 .shot img { width: 100%; height: 114%; object-fit: cover; margin-top: -7%; }
.pv3 .wrap { padding: 0 var(--sider) 0 calc(var(--side) + var(--ind,140px)); }
.pv3 .rv { opacity: 0; transform: translateY(24px); transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pv3 .rv.in { opacity: 1; transform: none; }
.pv3 .rv.d1 { transition-delay: 0.12s; }
.pv3 .rv.d2 { transition-delay: 0.24s; }
.pv3 .mk { display: block; overflow: hidden; padding-bottom: 0.06em; }
.pv3 .mk > span { display: block; transform: translateY(105%); transition: transform 1.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pv3 .in .mk > span, .pv3 .mk.in > span { transform: none; }
.pv3 .in .mk:nth-child(2) > span { transition-delay: 0.1s; }
.pv3 .idx2 { position: fixed; left: var(--side); top: 50%; transform: translateY(-50%); z-index: 30; display: grid; gap: 10px; font-size: 11.5px; color: var(--mid); opacity: 0; pointer-events: none; transition: opacity 0.6s; }
.pv3 .idx2.show { opacity: 1; pointer-events: auto; }
.pv3 .idx2 a { text-decoration: none; display: flex; align-items: center; gap: 10px; transition: color 0.4s; }
.pv3 .idx2 a::before { content: ""; width: 10px; height: 1px; background: currentcolor; transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.4s; }
.pv3 .idx2 a.on { color: var(--ink); }
.pv3 .idx2 a.on::before { width: 28px; background: var(--rust); }
.pv3 .idx2.lt { color: rgba(240, 232, 220, 0.7); }
.pv3 .idx2.lt a.on { color: var(--carta); }
@keyframes pv3-kb{ 
  0% { transform: scale(1.1); }
  100% { transform: scale(1.02); }
}
.pv3 .s-col { padding-top: 170px; }
.pv3 .tabs2 { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; font-size: 13.5px; }
.pv3 .tabs2 button { background: none; border: 0px; padding: 0px 0px 6px; cursor: pointer; color: var(--mid); position: relative; }
.pv3 .tabs2 button::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1.5px; background: var(--rust); transform: scaleX(0); transform-origin: left center; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pv3 .tabs2 button[aria-selected="true"] { color: var(--ink); }
.pv3 .tabs2 button[aria-selected="true"]::after { transform: none; }
.pv3 .tabs2 sup { font-size: 9.5px; margin-left: 2px; }
.pv3 .rail2 { overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--sider)); padding-right: var(--sider); }
.pv3 .rail2::-webkit-scrollbar { display: none; }
.pv3 .rail2 .tr2 { display: flex; gap: 14px; width: max-content; padding: 6px 0px 10px; }
.pv3 .sm { position: relative; width: clamp(116px, 9.6vw, 148px); flex: 0 0 auto; display: grid; gap: 8px; font-size: 12.5px; color: var(--txt); background: none; border: 0px; padding: 0px; cursor: pointer; text-align: left; }
.pv3 .sm .im { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 3px; background: rgb(230, 220, 205); }
.pv3 .sm img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pv3 .sm:hover img { transform: scale(1.07); }
.pv3 .sm[aria-pressed="true"] .im { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.pv3 .sm .plus { position: absolute; top: -6px; right: -6px; }
.pv3 .tr2 .sm, .pv3 .mets .sm { opacity: 0; transform: translateY(28px) rotate(var(--r,-5deg)) scale(.9); transition: opacity .7s ease var(--d,0s),transform 1.1s cubic-bezier(.2,1.25,.35,1) var(--d,0s); }
.pv3 .tr2.in .sm, .pv3 .mets.in .sm { opacity: 1; transform: none; }
.pv3 .tr2 .sm .im, .pv3 .mets .sm .im { position: relative; }
.pv3 .tr2 .sm .im::after, .pv3 .mets .sm .im::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%); transform: translateX(-120%); pointer-events: none; }
.pv3 .tr2.in .sm .im::after, .pv3 .mets.in .sm .im::after { animation: pv3-glint 1.3s cubic-bezier(.4,0,.2,1) calc(var(--d,0s) + .55s) both; }
@keyframes pv3-glint{ 
  100% { transform: translateX(120%); }
}
.pv3 .colhd .kick2::before { width: 0px; transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s; }
.pv3 .colhd.in .kick2::before { width: 26px; }
.pv3 .mets { display: grid; grid-template-columns: auto auto; gap: 30px; margin-top: 46px; justify-content: start; }
.pv3 .mets h4 { margin: 0px 0px 12px; font-weight: 500; font-size: 13px; }
.pv3 .mets .ex h4 { color: var(--rust); }
.pv3 .mets .g { display: flex; gap: 12px; flex-wrap: wrap; }
.pv3 .mets .sm { width: 96px; }
.pv3 .s-col .ft2 { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font-size: 13.5px; color: var(--mid); }
.pv3 .s-col .ft2 a { color: var(--ink); font-weight: 500; border-bottom: 1.5px solid var(--bx); text-decoration: none; }
.pv3 .s-sim { padding-top: 160px; }
.pv3 .s-sim .hd { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 30px; }
.pv3 .arw { display: flex; gap: 8px; }
.pv3 .arw button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--carta); cursor: pointer; display: grid; place-items: center; box-shadow: 3px 3px 0 var(--ink); transition: transform 0.15s, box-shadow 0.15s; }
.pv3 .arw button:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.pv3 .arw svg { width: 20px; height: 12px; fill: none; stroke: currentcolor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pv3 .car { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--sider)); }
.pv3 .car::-webkit-scrollbar { display: none; }
.pv3 .car .tr3 { display: flex; gap: 18px; width: max-content; padding-right: var(--sider); }
.pv3 .car a { width: clamp(230px, 21vw, 310px); scroll-snap-align: start; text-decoration: none; display: grid; gap: 10px; }
.pv3 .car .shot { aspect-ratio: 4 / 5; }
.pv3 .car .shot img { height: 100%; margin: 0px; transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pv3 .car a:hover .shot img { transform: scale(1.05); }
.pv3 .car span { font-size: 14.5px; font-weight: 500; }
.pv3 .car small { display: block; color: var(--mid); font-weight: 400; font-size: 12.5px; }
@media (max-width: 900px){
.pv3 .idx2 { display: none; }
.pv3 .wrap { padding: 0 var(--gr) 0 var(--gl); }
.pv3 .s-col, .pv3 .s-prj, .pv3 .s-sim { padding-top: 100px; }
.pv3 .mets { grid-template-columns: minmax(0px, 1fr); }
}
@media (prefers-reduced-motion: reduce){
.pv3 .rv, .pv3 .tr2 .sm, .pv3 .mets .sm { opacity: 1; transform: none; }
.pv3 .tr2 .sm .im::after, .pv3 .mets .sm .im::after { display: none; }
.pv3 .mk > span { transform: none; }
}
.pv3 section.s-sim { padding-top: 120px !important; }
.pv3 section.s-sim .hd { border-bottom: 1px solid var(--filo); display: flex !important; justify-content: space-between !important; align-items: flex-end !important; width: auto !important; background: none !important; box-shadow: none !important; margin-bottom: 34px !important; padding-bottom: 22px !important; }
.pv3 section.s-sim .car { margin-top: 0px !important; padding-top: 0px; }
.pv3 section.s-sim .car .tr3 { padding-left: 0px !important; gap: clamp(18px, 1.8vw, 28px) !important; }
.pv3 section.s-sim .car a { width: clamp(240px, 21vw, 300px); }
.pv3 section.s-sim .car a:nth-child(n) { margin-top: 0px !important; }
.pv3 section.s-sim .car a:nth-child(2n) { margin-top: 44px !important; }
.pv3 section.s-sim .arw { display: flex; gap: 4px; align-items: center; }
.pv3 section.s-sim .arw button { color: var(--ink); cursor: pointer; width: auto !important; height: auto !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important; background: none !important; padding: 8px 6px !important; transition: opacity 0.3s, transform 0.3s !important; }
.pv3 section.s-sim .arw button svg { width: 30px; height: 14px; stroke-width: 1.4; }
.pv3 section.s-sim .arw button:first-child:hover { transform: translateX(-3px) !important; }
.pv3 section.s-sim .arw button:last-child:hover { transform: translateX(3px) !important; }
.pv3 section.s-sim .arw button:disabled { opacity: 0.25; transform: none !important; }
.pv3 section.s-sim .arw::before { content: ""; order: 1; width: 1px; height: 18px; background: var(--filo); margin: 0px 6px; }
.pv3 section.s-sim .arw button:last-child { order: 2; }
@media (max-width: 900px){
.pv3 section.s-sim .car a:nth-child(2n) { margin-top: 0px !important; }
.pv3 section.s-sim { padding-top: 80px !important; }
}
.pv3 .rq2 .btn2, .pv3 .rq2 .wa2, .pv3 .btn2, .pv3 .wa2 { border: 0px !important; box-shadow: none !important; border-radius: 3px !important; height: 58px !important; }
.pv3 .btn2 { background: var(--bx) !important; }
.pv3 .btn2:hover { background: rgb(122, 39, 43) !important; }
.pv3 .rq2 .wa2, .pv3 .wa2 { background: transparent !important; border: 1px solid rgb(205, 191, 172) !important; }
.pv3 .rq2 .wa2:hover, .pv3 .wa2:hover { border-color: rgb(169, 155, 136) !important; }
.pv3 .wa2::after { background: rgba(227, 239, 230, 0.6) !important; }
.pv3 .btn2:active, .pv3 .wa2:active { transform: translateY(1px) !important; }
.pv3 .btn2, .pv3 .wa2, .pv3 .rq2 .btn2, .pv3 .rq2 .wa2 { transform: none !important; }
.pv3 .wa2:hover svg { animation: auto ease 0s 1 normal none running none !important; }
.pv3 .hl > .tags { margin: 16px 0px 7px !important; }
.pv3 .hl > .tags + .cfg { margin-top: 0px !important; }
.pv3 { --ind: 0px; }
.pv3 section.s-sim { padding-top: 130px !important; }
.pv3 .idx2, .pv3 .idx2.lt { position: fixed; left: 0px; right: 0px; top: var(--hh0,70px); transform: translateY(-12px); z-index: 30; display: grid; grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr); align-items: center; gap: 20px; height: 58px; padding: 0 var(--sider) 0 var(--side); background: rgba(240, 232, 220, 0.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--filo); color: var(--mid); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.45s, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pv3 .idx2.show, .pv3 .idx2.show.hide { opacity: 1; transform: none; pointer-events: auto; }
.pv3 .idx2 a::before, .pv3 .idx2 a.on::before { display: none; }
.pv3 .idx2 a { display: inline-flex; gap: 0px; color: inherit; }
.pv3 .ixm { display: flex; gap: clamp(16px, 2vw, 30px); justify-content: center; }
.pv3 .ixm a { position: relative; height: 58px; align-items: center; white-space: nowrap; }
.pv3 .ixm a::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: -1px; height: 1.5px; background: var(--rust); transform: scaleX(0); transform-origin: left center; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pv3 .ixm a.on { color: var(--ink); }
.pv3 .ixm a.on::after { transform: none; }
.pv3 .ixm a:hover { color: var(--ink); }
.pv3 .ixr { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.pv3 .ixb { align-items: center; height: 36px; padding: 0px 16px; border-radius: 3px; background: var(--bx); font-weight: 500; white-space: nowrap; transition: background 0.3s; color: rgb(255, 255, 255) !important; }
.pv3 .ixb:hover { background: rgb(122, 39, 43); }
@media (max-width: 1180px){
.pv3 .ixm { gap: 14px; font-size: 12.5px; }
}
@media (max-width: 900px){
.pv3 .idx2, .pv3 .idx2.lt { grid-template-columns: 1fr auto; height: 52px; padding: 0 var(--gr) 0 var(--gl); display: grid !important; }
.pv3 .ixm { display: none; }
}
.pv3 .s-pg { padding-top: 150px; text-align: center; }
.pv3 .pg-hd { display: grid; justify-items: center; gap: 10px; padding: 0 var(--sider) 0 var(--side); }
.pv3 .pg-hd .kick2::before { display: none; }
.pv3 .pg-t { font-family: var(--f-h); font-weight: 800; font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -0.03em; line-height: 1.08; margin: 0px; transition: opacity 0.5s; }
.pv3 .pg-m { margin: 0px; font-size: 13.5px; color: var(--mid); transition: opacity 0.5s; }
.pv3 .pg-out { opacity: 0 !important; }
.pv3 .pg-vp { margin-top: 54px; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }
.pv3 .pg-vp.dn { cursor: grabbing; }
.pv3 .pg-tr { display: flex; gap: clamp(28px, 3.6vw, 70px); align-items: flex-start; will-change: transform; }
.pv3 .pg-sl { flex: 0 0 auto; margin: 0px; display: grid; gap: 16px; opacity: 0.45; transition: opacity 0.9s; }
.pv3 .pg-sl.on { opacity: 1; }
.pv3 .pg-im { display: block; height: min(62vh, 600px); padding: 0px; border: 0px; background: rgb(230, 220, 205); overflow: hidden; cursor: inherit; }
.pv3 .pg-im img { height: 100%; width: auto; display: block; pointer-events: none; -webkit-user-drag: none; transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.pv3 .pg-sl.on .pg-im:hover img { transform: scale(1.025); }
.pv3 .pg-sl figcaption { display: grid; gap: 4px; text-align: center; justify-items: center; justify-self: center; max-width: 440px; transition: opacity 0.9s, transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.pv3 .pg-sl:not(.on) figcaption { opacity: 0; transform: translateY(6px); }
.pv3 .pg-sl figcaption b { font-family: var(--f-h); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust); }
.pv3 .pg-sl figcaption span { font-size: 14.5px; line-height: 1.55; color: var(--txt); }
.pv3 .pg-nav { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 30px; }
.pv3 .pg-dots { display: flex; gap: 11px; }
.pv3 .pg-dots button { width: 8px; height: 8px; padding: 0px; border-radius: 50%; border: 1px solid var(--ink); background: none; cursor: pointer; transition: background 0.4s; }
.pv3 .pg-dots button.on { background: var(--ink); }
.pv3 .pg-a { background: none; border: 0px; padding: 6px; cursor: pointer; color: var(--ink); transition: opacity 0.3s, transform 0.3s; }
.pv3 .pg-a svg { width: 30px; height: 14px; fill: none; stroke: currentcolor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; display: block; }
.pv3 .pg-a[data-d="-1"]:hover { transform: translateX(-3px); }
.pv3 .pg-a[data-d="1"]:hover { transform: translateX(3px); }
.pv3 .pg-a:disabled { opacity: 0.25; transform: none; cursor: default; }
.pv3 .pg-tx { max-width: 640px; margin: 40px auto 0px; padding: 0 var(--sider) 0 var(--side); display: grid; gap: 20px; justify-items: center; }
.pv3 .pg-tx p { margin: 0px; font-size: 16px; line-height: 1.75; color: var(--txt); transition: opacity 0.5s; }
.pv3 .pg-ln { display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; }
.pv3 .pg-all { font-size: 14px; color: var(--mid); border-bottom: 1px solid var(--filo); padding-bottom: 2px; }
.pv3 .pg-all:hover { color: var(--ink); }
@media (max-width: 900px){
.pv3 .s-pg { padding-top: 90px; }
.pv3 .pg-im { height: 50vh; }
.pv3 .pg-sl figcaption { max-width: 78vw; }
}
.pv3 .idx2.rs, .pv3 .idx2.rs.lt { justify-content: space-between; align-items: center; height: 46px; gap: 24px; background: var(--carta); backdrop-filter: none; display: flex !important; }
.pv3 .idx2.rs .ixm { justify-content: flex-start; gap: 28px; }
.pv3 .idx2.rs .ixm a { height: 46px; }
.pv3 .idx2.rs .ixr { gap: 18px; }
.pv3 .idx2.rs .ixn { font-family: var(--f-disp); font-weight: 400; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.pv3 .idx2.rs .ixb { height: auto; padding: 0px 0px 2px; border-radius: 0px; font-weight: 500; border-bottom: 1px solid currentcolor; background: none !important; color: var(--bx) !important; }
.pv3 .idx2.rs .ixb:hover { color: rgb(110, 33, 37) !important; }
@media (max-width: 900px){
.pv3 .idx2.rs, .pv3 .idx2.rs.lt { height: 44px; }
.pv3 .idx2.rs .ixm { display: none; }
.pv3 .idx2.rs .ixr { width: 100%; justify-content: space-between; }
}
.pv3 .pg-ln { margin-top: 4px; gap: 34px !important; }
.pv3 .pg-ln a { text-decoration: none !important; }
.pv3 .pg-b { position: relative; display: inline-flex; align-items: center; gap: 14px; height: 48px; padding: 0px 24px; border: 1px solid rgba(37, 37, 35, 0.28); border-radius: 2px; font-family: var(--f-h); font-weight: 600; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); overflow: hidden; z-index: 0; transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s; }
.pv3 .pg-b::before { content: ""; position: absolute; inset: 0px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); z-index: -1; }
.pv3 .pg-b:hover { color: var(--carta); border-color: var(--ink); }
.pv3 .pg-b:hover::before { transform: scaleX(1); }
.pv3 .pg-b svg { width: 26px; height: 12px; fill: none; stroke: currentcolor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.pv3 .pg-b:hover svg { transform: translateX(4px); }
.pv3 .pg-all { position: relative; font-family: var(--f-h); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; transition: color 0.4s; border: 0px !important; padding: 4px 0px !important; font-size: 11.5px !important; color: var(--mid) !important; }
.pv3 .pg-all::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background: currentcolor; transform: scaleX(0.35); transform-origin: left center; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.pv3 .pg-all:hover { color: var(--ink) !important; }
.pv3 .pg-all:hover::after { transform: scaleX(1); }
.pv3 .docs3 { grid-template-columns: minmax(0px, 1fr) !important; gap: 10px !important; }
.pv3 .docs3 .doc3 { padding: 12px 16px !important; }
.pv3 .cat3 .cvm { flex: 0 0 auto; width: 34px; height: 44px; overflow: hidden; border-radius: 1px; box-shadow: rgba(37, 37, 35, 0.25) 0px 2px 6px; display: block; }
.pv3 .cat3 .cvm img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8); }
@media (max-width: 900px){
.pv3 .docs3 { grid-template-columns: minmax(0px, 1fr) !important; }
}
.pv3 .facts.fx3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); border-top: 1px solid var(--filo); display: grid !important; gap: 0px !important; margin: 22px 0px 10px !important; padding: 18px 0px 4px !important; }
.pv3 .fx3 li { flex-direction: column; align-items: center; text-align: center; padding: 0px 10px; display: flex !important; gap: 8px !important; }
.pv3 .fx3 li + li { border-left: 1px solid var(--filo); }
.pv3 .fx3 svg { stroke: var(--ink); fill: none; width: 22px !important; height: 22px !important; stroke-width: 1.3 !important; }
.pv3 .fx3 span { display: grid; gap: 2px; }
.pv3 .fx3 b { font-weight: 500; font-size: 13.5px; color: var(--ink); }
.pv3 .fx3 small { font-size: 12px; color: var(--mid); line-height: 1.35; }
@media (max-width: 480px){
.pv3 .fx3 b { font-size: 12.5px; }
.pv3 .fx3 small { font-size: 11px; }
}
.pv3 .hl > .tt { margin-top: 44px !important; }
.pv3 .vwide { width: var(--vw,64vw); max-width: min(100vw, -227.556px + 177.778vh); margin: 56px auto 0px !important; max-height: none !important; transition: none !important; }
@media (max-width: 900px){
.pv3 .vwide { width: auto; margin: 24px var(--gr) 0 var(--gl) !important; }
}
.pv3 .lamp3 { padding-top: 70px !important; }
.pv3 .lamp3 { will-change: transform; }
.pv3 .dtx3 .w { opacity: 0.16; transition: opacity 0.5s; }
.pv3 .dtx3 .w.on { opacity: 1; }
@media (prefers-reduced-motion: reduce){
.pv3 .dtx3 .w { opacity: 1; }
}
@media (min-width: 901px){
.pv3 .hl { padding-left: clamp(60px, 8vw, 150px) !important; padding-right: clamp(40px, 5vw, 90px) !important; }
.pv3 .hl > .crumb { flex-wrap: nowrap; white-space: nowrap; margin-right: -50vw; position: relative; z-index: 2; }
}
@media (min-width: 901px){
.pv3 .lamp3 > .wrap, .pv3 section.s-col { padding-left: clamp(60px, 8vw, 150px) !important; }
.pv3 .lamp3 > .wrap { padding-right: clamp(60px, 8vw, 150px) !important; }
.pv3 section.s-col { padding-right: clamp(60px, 8vw, 150px) !important; padding-top: 24px !important; }
.pv3 .colhd { margin-top: clamp(70px, 6vw, 100px) !important; }
}
.pv3 .hl h1 { font-family: var(--f-h) !important; font-weight: 800 !important; font-size: clamp(64px, 6.6vw, 108px) !important; letter-spacing: -0.05em !important; line-height: 0.9 !important; }
.pv3 .idx2.rs .ixn { font-family: var(--f-h) !important; font-weight: 800 !important; font-size: 18px !important; letter-spacing: -0.03em !important; }
@media (max-width: 600px){
.pv3 .hl h1 { font-size: 64px !important; }
}
.pv3 section.s-sim .car .shot { border-radius: 12px; overflow: hidden; isolation: isolate; }
.pv3 section.s-sim .car .shot img { border-radius: 12px; }
.pv3 .pro4 { margin-top: 56px; order: 99; grid-template-columns: minmax(0px, 1fr) auto !important; }
.pv3 .p4b { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0px 18px; background: var(--bx); color: rgb(255, 255, 255); border-radius: 3px; font-weight: 500; font-size: 14px; text-decoration: none; transition: background 0.3s; }
.pv3 .p4b:hover { background: rgb(122, 39, 43); }
.pv3 .p4b svg { width: 22px; height: 11px; fill: none; stroke: currentcolor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s; }
.pv3 .p4b:hover svg { transform: translateX(3px); }
.pv3 .p4r { font-size: 13px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--filo); }
.pv3 .p4r:hover { border-color: var(--ink); }
@media (max-width: 560px){
.pv3 .pro4 { grid-template-columns: 1fr !important; }
}
.pv3 .pro4 { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; padding: 30px 24px 20px !important; }
.pv3 .p4h { font-family: var(--f-h); font-weight: 800; font-size: 19px; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); }
.pv3 .p4l { list-style: none; margin: 0px; padding: 0px; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; }
.pv3 .p4l li { display: flex; align-items: center; gap: 10px; }
.pv3 .p4l svg { flex: 0 0 auto; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgb(239, 230, 216); fill: none; stroke: var(--bx); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pv3 .p4l span { display: grid; font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.25; }
.pv3 .p4l small { font-weight: 400; font-size: 12px; color: var(--mid); }
.pv3 .p4f { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px dashed var(--filo); }
.pv3 .p4n { font-size: 13px; color: var(--mid); }
.pv3 .p4r { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; font-weight: 500; }
.pv3 .p4b { height: 40px !important; font-size: 13.5px !important; }
@media (max-width: 560px){
.pv3 .p4l { grid-template-columns: 1fr; }
.pv3 .p4f { flex-direction: column-reverse; align-items: flex-start; }
}
@media (min-width: 901px){
.pv3 .ph { min-height: 520px; aspect-ratio: auto !important; height: calc(100vh - var(--head,84px) - 48px) !important; }
}
@media (min-width: 901px){
.pv3 .hero { grid-template-columns: minmax(0px, 44fr) minmax(0px, 56fr) !important; }
.pv3 .hl { padding-left: clamp(48px, 6vw, 110px) !important; padding-right: clamp(32px, 3.6vw, 60px) !important; }
}
@media (min-width: 901px){
.pv3 .hl > .crumb { margin-left: calc(var(--side) - clamp(48px,6vw,110px)) !important; }
}
@media (min-width: 901px){
.pv3 .ph { margin-top: 16px; }
}
@media (min-width: 901px){
.pv3 .hl > :not(.crumb):not(.tt) { margin-left: -34px !important; }
}
.pv3 .l3in { order: 100; margin-top: clamp(110px, 14vh, 170px); display: grid; gap: 18px; }
.pv3 .l3in .dtx3 { max-width: none !important; }
.pv3 .lamp3 { padding-top: 40px !important; }
@media (max-width: 900px){
.pv3 .l3in { margin-top: 70px; }
}
.pv3 .ph { background: rgb(236, 228, 216) !important; }
.pv3 .ph > img { object-fit: contain !important; object-position: 50% 50% !important; }
.pv3 .ph::before { content: ""; position: absolute; inset: -40px; background: var(--phbg) center/cover no-repeat; filter: blur(36px) saturate(0.9); transform: scale(1.15); opacity: 0.95; transition: background-image 0.6s; }
.pv3 .ph > img { object-fit: contain !important; z-index: 1; }
.pv3 .dtx3 .w { opacity: 1 !important; transition: none !important; }
@media (min-width: 901px){
.pv3 .ph { transition: aspect-ratio 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); height: auto !important; min-height: 0px !important; aspect-ratio: var(--ar,4/5) !important; width: 100% !important; }
}
.pv3 .ph::before { display: none !important; }
.pv3 .ph > img { object-fit: cover !important; }

/* ==== 03/11/2026: adattamenti del prototipo approvato alla pagina vera del sito (intestazione, CSS del sito, dati reali) ==== */
/* le classi generiche del sito (app.css: .hero con overflow:hidden e padding, .btn maiuscolo) non devono toccare la scheda */
.pv3 .hero{overflow:visible;padding:0;position:static}
.pv3 .btn{text-transform:none;letter-spacing:normal;font-family:var(--f-ui);text-align:left}
.pv3 h1,.pv3 h2,.pv3 h4{text-transform:none}
.pv3{--head:var(--pv3-head,84px);display:block}
/* percorso allineato al MENU dell'intestazione */
/* (il margine sinistro del percorso lo calcola product-v3.js dalla posizione del MENU) */
html:has(.pv3[data-pv3]) body{background:#f0e8dc}
.pv3 .hl > .tags > * + *::before{content:"·";margin-right:16px;color:var(--filo)}
.pv3 .hl > .tags a{color:inherit;text-decoration:none}
.pv3 .hl > .tags a:hover{text-decoration:underline;text-underline-offset:3px}
/* foto: riquadro con le proporzioni della foto corrente anche da telefono (nessun taglio, nessuna banda) */
.pv3 .ph{aspect-ratio:var(--ar,4/5) !important;height:auto !important}
.pv3 .ph > img{object-fit:cover !important}
.pv3 .ph #pv2MainImg{filter:contrast(.88) brightness(1.04) saturate(.88)}
.pv3 .car .shot img{filter:contrast(.88) brightness(1.04) saturate(.88)}
.pv3 .ph .bvw-heart{z-index:3}
/* campioni di colore senza foto del vetro (colori composti o non in tavolozza): pallino dai colori governati */
.pv3 .pv3-sw{display:block;width:100%;height:100%;border-radius:2px;background:var(--c1,#d8cfc2)}
.pv3 .pv3-sw[style*="--c2"]{background:linear-gradient(135deg,var(--c1) 0 50%,var(--c2) 50% 100%)}
.pv3 .pv3-sw[style*="--c3"]{background:linear-gradient(135deg,var(--c1) 0 33%,var(--c2) 33% 66%,var(--c3) 66% 100%)}
.pv3 .sq span{display:flex}
.pv3 .sq span > img{flex:1 1 0;min-width:0}
.pv3 .acc .th{display:inline-flex;width:26px;height:26px;border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:10px;flex:0 0 auto}
.pv3 .acc .th img{width:100%;height:100%;object-fit:cover;flex:1 1 0;min-width:0}
.pv3 .acc .val span.th{display:inline-flex}
/* il video non e' mai piu' alto dello spazio libero sotto intestazione e barra (16:9, nessun taglio) */
.pv3 .vwide{max-width:min(100vw,calc((100vh - var(--pv3-head,84px) - 46px - 24px) * 16 / 9)) !important}
/* tavolozza: pannelli delle famiglie del vetro */
.pv3 .tr2[hidden]{display:none !important}
/* barra delle sezioni sotto l'intestazione vera */
.pv3 .idx2,.pv3 .idx2.lt{top:var(--hh0,70px)}
/* didascalie dei progetti assenti: niente spazio vuoto sotto le foto */
.pv3 .pg-sl{gap:0}
.pv3 .pg-m[hidden],.pv3 #pgX[hidden]{display:none}
/* collezione: titolo lungo su due righe al massimo */
.pv3 .wb h2{text-wrap:balance}
/* telefono */
@media (max-width:900px){
 .pv3 .hl > .crumb{margin-left:0 !important;white-space:normal;flex-wrap:wrap;margin-right:0}
 .pv3 .hr{padding-top:0}
 .pv3 .ph{position:relative;top:auto}
}
@media (max-width:600px){
 html:has(.pv3[data-pv3]) #siteHeader .brand .brand-wm{font-size:15px !important;letter-spacing:-.03em}
}
/* titolo: si va a capo solo tra le parole; nomi lunghi un po' piu' piccoli */
.pv3 .hl h1 .lw{display:inline-block;white-space:nowrap}
.pv3 .hl h1.long{font-size:clamp(46px,4.6vw,76px) !important;line-height:.95 !important}
@media (max-width:600px){.pv3 .hl h1.long{font-size:46px !important}}
@media (max-width:900px){
 .pv3 .hl > .tags{flex-direction:column;gap:6px}
 .pv3 .hl > .tags > * + *::before{content:none}
 /* la collezione da telefono: i testi scorrono in colonna sopra la foto, senza sovrapporsi */
 .pv3 .wtx{padding:38vh var(--gr) 30vh var(--gl);display:flex;flex-direction:column;gap:26px;height:auto}
 .pv3 .wb{position:static;width:auto}
 .pv3 .s-win{height:auto;min-height:150vh}
}
@media (hover:none){.pv3 .sgo{display:none}}
/* ==== 04/11/2026 (Franco, correzioni dopo la pubblicazione) ==== */
/* percorso breve da telefono, sopra la foto: una riga, scorre di lato senza barra */
.pv3 .crumb-m{display:none}
@media (max-width:900px){
 .pv3 .hl > .crumb{display:none !important}
 .pv3 .hero > .crumb-m{display:flex;order:-2;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none;margin:0;padding:12px var(--gr) 10px var(--gl);font-size:10px;letter-spacing:.14em}
 .pv3 .hero > .crumb-m::-webkit-scrollbar{display:none}
 .pv3 .crumb-m .sep{margin:0 8px}
}
/* nessun riquadro nero al clic; da tastiera un contorno sottile */
.pv3 :focus{outline:none}
.pv3 :focus-visible{outline:1px solid var(--filo);outline-offset:3px}
.pv3 .acc > button:focus-visible .sl{text-decoration:underline;text-underline-offset:4px}
.pv3 .acc > button:focus-visible{outline:none}
/* righe versione: l'etichetta non va mai a capo; se la versione e' una misura (senza luci) la colonna si allarga */
.pv3 .vr b{white-space:nowrap}
.pv3 .vr.vr-sz{grid-template-columns:max-content minmax(0,1fr) auto}
@media (max-width:960px){
 .pv3 .vr{grid-template-columns:minmax(64px,max-content) minmax(0,1fr) auto}
 .pv3 .vr small{grid-column:auto}
 .pv3 .vr.vr-sz{grid-template-columns:max-content minmax(0,1fr) auto}
}
/* tre fatti sotto i bottoni: le colonne presenti occupano tutta la larghezza */
.pv3 .facts.fx3{grid-template-columns:none !important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
/* documenti: nessuno stato "acceso" rimasto dopo il tocco */
.pv3 .doc3:hover{border-color:var(--filo);background:none;transform:none}
@media (hover:hover){.pv3 .doc3:hover{border-color:var(--ink);background:var(--panna);transform:translateY(-2px)}}
/* telefono: video -> fatti e documenti -> colori; griglia dei fatti in 2 colonne allineate in alto */
@media (max-width:900px){
 .pv3 .l3bot{display:flex !important;flex-direction:column}
 .pv3 .l3bot .lcol{display:contents}
 .pv3 .l3bot .dsub3{order:1}
 .pv3 .l3bot .rcol{order:2}
 .pv3 .l3bot .colhd{order:3;margin-top:40px !important}
 .pv3 .l3bot .facts3{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;align-items:start}
 .pv3 .l3bot .facts3 > div{align-content:start;gap:6px}
 .pv3 .l3bot .facts3 dd{line-height:1.4}
}
/* telefono: riquadro Pro */
@media (max-width:900px){
 .pv3 .pro4{margin-top:22px !important;margin-right:5px;padding:26px 18px 18px !important;gap:16px !important}
 .pv3 .p4h{font-size:17px}
 .pv3 .p4f{flex-direction:column-reverse !important;align-items:stretch !important;gap:12px}
 .pv3 .p4b{justify-content:center;width:100%}
 .pv3 .p4n{text-align:center}
}

/* 04/11 Franco: frecce foto discrete ai lati, contatore piccolo */
.pv3 .tg{inset:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;display:block;padding:0}
.pv3 .tg button{pointer-events:auto;position:absolute;top:min(45vh,50%);transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(248,243,235,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:rgba(37,37,35,.7);font-size:15px;transition:background .3s,color .3s}
.pv3 .tg button:hover{background:rgba(248,243,235,.8);color:#252523}
.pv3 .tg button[data-step="-1"]{left:16px}.pv3 .tg button[data-step="1"]{right:16px}
.pv3 .tg span{position:absolute;top:84px;right:26px;min-width:0;font-size:11.5px;letter-spacing:.12em;color:rgba(37,37,35,.62)}
.pv3 .tg span::after{content:" foto"}
@media (max-width:900px){.pv3 .tg button{width:34px;height:34px;top:50%}.pv3 .tg span{top:auto;bottom:14px;right:50%;transform:translateX(50%)}}