html.ppvc2-lock,body.ppvc2-lock{overflow:hidden!important}
.ppvc2,.ppvc2 *{box-sizing:border-box}
.ppvc2{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.ppvc2__launch{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 20px;border:0;border-radius:999px;background:#151517;color:#fff;font:inherit;font-size:13px;font-weight:760;cursor:pointer}
.ppvc2__launch-icon{color:#44AD47}
.ppvc2__modal{position:fixed;inset:0;z-index:999990;width:100vw;height:100dvh;display:none;grid-template-rows:74px minmax(0,1fr);overflow:hidden;background:#f2f2f3;color:#202024}
.ppvc2__modal.is-open{display:grid}
.ppvc2__topbar{z-index:50;display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,auto) minmax(140px,1fr);align-items:center;gap:18px;padding:10px 18px;background:rgba(242,242,243,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.035)}
.ppvc2__top-left{display:flex;align-items:center;justify-self:start;gap:10px}
.ppvc2__close{width:46px;height:46px;border:0;border-radius:50%;background:#fff;color:#303035;font-size:27px;cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.05)}
.ppvc2__brand{display:flex;align-items:center;gap:7px;height:46px;padding:0 17px;border-radius:999px;background:#fff;font-size:13px;font-weight:800}
.ppvc2__brand-dot{width:9px;height:9px;border-radius:50%;background:#44AD47}
.ppvc2__toolbar{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;max-width:min(900px,66vw);padding:6px;border-radius:18px;background:#3f3f44;box-shadow:0 12px 34px rgba(0,0,0,.12);overflow:visible}
.ppvc2__toolbar>button{min-height:40px;padding:0 15px;border:0;border-radius:12px;background:transparent;color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.ppvc2__toolbar>button:hover{background:rgba(255,255,255,.09)}
.ppvc2__view-switcher{position:relative;flex:0 0 auto}
.ppvc2__view-current{min-height:40px;display:flex;align-items:center;gap:8px;padding:0 14px;border:0;border-radius:12px;background:rgba(255,255,255,.10);color:#fff;font:inherit;font-size:12px;font-weight:750;cursor:pointer}
.ppvc2__view-caret{font-size:15px;opacity:.72}
.ppvc2__view-menu{position:absolute;top:calc(100% + 9px);left:0;min-width:150px;padding:6px;border-radius:13px;background:#fff;box-shadow:0 18px 45px rgba(0,0,0,.16);opacity:0;visibility:hidden;transform:translateY(-5px) scale(.98);transform-origin:top left;transition:.18s ease;z-index:80}
.ppvc2__view-switcher.is-open .ppvc2__view-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.ppvc2__view-option{width:100%;min-height:38px;padding:0 11px;border:0;border-radius:9px;background:transparent;color:#27272b;text-align:left;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.ppvc2__view-option:hover,.ppvc2__view-option.is-active{background:#f0f0f1}
.ppvc2__color-switcher{
position:relative;
flex:0 0 auto;
}
.ppvc2__color-current{
min-height:40px;
display:flex;
align-items:center;
gap:8px;
padding:0 12px;
border:0;
border-radius:12px;
background:transparent;
color:#fff;
font:inherit;
font-size:12px;
font-weight:700;
cursor:pointer;
white-space:nowrap;
}
.ppvc2__color-current:hover{
background:rgba(255,255,255,.08);
}
.ppvc2__color-dot{
width:20px;
height:20px;
flex:0 0 20px;
border-radius:6px;
background:#111;
border:1px solid rgba(255,255,255,.22);
box-shadow:0 1px 3px rgba(0,0,0,.18) inset;
}
.ppvc2__color-caret{
opacity:.65;
font-size:14px;
}
.ppvc2__color-menu{
position:absolute;
top:calc(100% + 9px);
left:0;
min-width:190px;
max-height:280px;
overflow:auto;
padding:6px;
border-radius:13px;
background:#fff;
box-shadow:0 18px 45px rgba(0,0,0,.16);
opacity:0;
visibility:hidden;
transform:translateY(-5px) scale(.98);
transform-origin:top left;
transition:.18s ease;
z-index:80;
}
.ppvc2__color-switcher.is-open .ppvc2__color-menu{
opacity:1;
visibility:visible;
transform:translateY(0) scale(1);
}
.ppvc2__color-option{
width:100%;
min-height:40px;
display:flex;
align-items:center;
gap:9px;
padding:0 10px;
border:0;
border-radius:9px;
background:transparent;
color:#27272b;
font:inherit;
font-size:12px;
font-weight:700;
text-align:left;
cursor:pointer;
}
.ppvc2__color-option:hover,
.ppvc2__color-option.is-active{
background:#f0f0f1;
}
.ppvc2__color-option-dot{
width:18px;
height:18px;
flex:0 0 18px;
border-radius:5px;
border:1px solid rgba(0,0,0,.10);
}
.ppvc2__order-button{justify-self:end;align-self:center;min-height:46px;padding:0 21px;border:0;border-radius:999px;background:#27272b;color:#fff;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.ppvc2__workspace{position:relative;min-height:0;overflow:hidden;background-color:#f3f3f4;background-image:radial-gradient(circle,rgba(100,100,105,.12) 1px,transparent 1.15px);background-size:28px 28px}
.ppvc2__canvas{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;gap:10px;padding:10px 80px 18px}
.ppvc2__stage{position:relative;width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;overflow:visible;user-select:none;touch-action:none}
.ppvc2__product-image{width:auto;height:auto;display:block;object-fit:contain;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.08));transition:width .18s ease,height .18s ease,opacity .18s ease}
.ppvc2__print-zones{position:absolute;inset:0;z-index:3;pointer-events:none}
.ppvc2__print-zone{
position:absolute;
display:block;
padding:0;
border:1px solid rgba(95,95,100,.16);
outline:none;
border-radius:1px;
background:transparent;
color:#fff;
pointer-events:auto;
cursor:pointer;
transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.ppvc2__print-zone:hover{
border-color:rgba(80,80,85,.28);
background:rgba(255,255,255,.012);
}
.ppvc2__print-zone.is-active{
border-color:rgba(55,55,60,.30);
background:rgba(255,255,255,.018);
box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
}
.ppvc2__print-zone.has-design::after{
content:"";
position:absolute;
right:5px;
bottom:5px;
width:5px;
height:5px;
border-radius:50%;
background:rgba(80,80,85,.50);
}
.ppvc2__print-zone-name{
display:none !important;
}
.ppvc2__print-zone:hover .ppvc2__print-zone-name,.ppvc2__print-zone.is-active .ppvc2__print-zone-name{opacity:1;transform:translateY(0)}
.ppvc2__area-hint{
position:absolute;
z-index:4;
left:50%;
bottom:14px;
transform:translateX(-50%);
display:flex;
align-items:center;
gap:7px;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.88);
color:#77777c;
font-size:9px;
font-weight:700;
box-shadow:0 3px 12px rgba(0,0,0,.045);
pointer-events:none;
transition:.18s ease;
}
.ppvc2__area-hint.is-hidden{opacity:0;transform:translateX(-50%) translateY(5px)}
.ppvc2__area-hint-dot{
width:6px;
height:6px;
border-radius:50%;
background:#8b8b90;
}
.ppvc2__logo-layer{position:absolute;z-index:10;transform:translate(-50%,-50%);cursor:grab;touch-action:none}
.ppvc2__logo-layer:not(.is-visible){pointer-events:none}
.ppvc2__logo-layer:active{cursor:grabbing}
.ppvc2__logo{width:100%;height:auto;max-height:220px;display:none;object-fit:contain;pointer-events:none}
.ppvc2__logo.is-visible{display:block}
.ppvc2__logo-layer.is-visible::before{content:"";position:absolute;inset:-5px;border:2px solid #0879ff;pointer-events:none}
.ppvc2__handle{position:absolute;width:14px;height:14px;display:none;border:2px solid #0879ff;border-radius:50%;background:#fff;transform:translate(-50%,-50%);cursor:nwse-resize;touch-action:none}
.ppvc2__logo-layer.is-visible .ppvc2__handle{display:block}
.ppvc2__handle--tl{left:-5px;top:-5px}.ppvc2__handle--tr{left:calc(100% + 5px);top:-5px}.ppvc2__handle--bl{left:-5px;top:calc(100% + 5px)}.ppvc2__handle--br{left:calc(100% + 5px);top:calc(100% + 5px)}
.ppvc2__thumbbar{max-width:min(88vw,700px);display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:rgba(214,214,217,.94);overflow-x:auto;scrollbar-width:none;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.ppvc2__thumbbar::-webkit-scrollbar{display:none}
.ppvc2__thumb{width:50px;height:50px;flex:0 0 50px;padding:5px;border:0;border-radius:50%;background:transparent;cursor:pointer;transition:.16s ease}
.ppvc2__thumb.is-active{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.ppvc2__thumb img{width:100%;height:100%;display:block;object-fit:contain;border-radius:50%}
.ppvc2__zoom{position:absolute;left:18px;bottom:18px;display:flex;gap:8px;z-index:15}
.ppvc2__zoom button{width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#55555a;font-size:21px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.ppvc2__logo-panel{position:absolute;z-index:70;top:14px;bottom:14px;right:14px;width:min(410px,calc(100vw - 28px));padding:22px;border-radius:22px;background:#fff;box-shadow:0 25px 70px rgba(0,0,0,.16);transform:translateX(calc(100% + 32px));transition:transform .26s cubic-bezier(.2,.8,.2,1);overflow:auto}
.ppvc2__logo-panel.is-open{transform:translateX(0)}
.ppvc2__panel-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:#f0f0f1;color:#606065;font-size:20px;cursor:pointer}
.ppvc2__panel-eyebrow{color:#44AD47;font-size:9px;font-weight:800;letter-spacing:.1em}
.ppvc2__logo-panel h3{margin:8px 42px 6px 0;font-size:24px;letter-spacing:-.04em}
.ppvc2__logo-panel p{margin:0 0 18px;color:#77777c;font-size:12px;line-height:1.5}
.ppvc2__url-row{display:flex;gap:7px}.ppvc2__website{flex:1;min-width:0;height:45px;padding:0 12px;border:1px solid #d8d8db;border-radius:10px;font:inherit;font-size:12px}
.ppvc2__find-logo{height:45px;padding:0 14px;border:0;border-radius:10px;background:#111214;color:#fff;font:inherit;font-size:11px;font-weight:750;cursor:pointer}
.ppvc2__status{min-height:18px;margin-top:8px;color:#77777c;font-size:10px}
.ppvc2__results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:8px}
.ppvc2__choice{position:relative;aspect-ratio:1;padding:7px;border:1px solid #e3e3e5;border-radius:10px;background:#fafafa;overflow:hidden;cursor:pointer}
.ppvc2__choice.is-active{border-color:#44AD47;box-shadow:0 0 0 2px rgba(68,173,71,.12)}
.ppvc2__choice img{width:100%;height:100%;object-fit:contain}
.ppvc2__choice span{position:absolute;left:4px;right:4px;bottom:4px;padding:3px;border-radius:5px;background:rgba(255,255,255,.94);color:#66666b;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppvc2__divider{display:flex;align-items:center;gap:10px;margin:20px 0;color:#99999d;font-size:10px}
.ppvc2__divider::before,.ppvc2__divider::after{content:"";flex:1;height:1px;background:#ececee}
.ppvc2__upload{width:100%;min-height:45px;display:flex;align-items:center;justify-content:center;border:1px solid #d9d9dc;border-radius:10px;background:#fff;color:#1d1d1f;font-size:11px;font-weight:750;cursor:pointer}
.ppvc2__upload input{display:none}.ppvc2__range{display:grid;gap:8px;margin-top:20px;color:#69696d;font-size:10px}.ppvc2__size{width:100%;accent-color:#44AD47}
@media(max-width:900px){.ppvc2__modal{grid-template-rows:64px minmax(0,1fr)}.ppvc2__topbar{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:7px 9px}.ppvc2__brand{display:none}.ppvc2__close{width:40px;height:40px;font-size:24px}.ppvc2__toolbar{max-width:none;width:100%;overflow-x:auto;scrollbar-width:none}.ppvc2__toolbar::-webkit-scrollbar{display:none}.ppvc2__toolbar>button{min-height:36px;padding:0 10px;font-size:10px}.ppvc2__view-current{min-height:36px;padding:0 10px;font-size:10px}.ppvc2__order-button{min-height:40px;padding:0 13px;font-size:11px}.ppvc2__canvas{padding:8px 10px 14px}.ppvc2__logo-panel{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:78dvh;transform:translateY(calc(100% + 24px))}.ppvc2__logo-panel.is-open{transform:translateY(0)}}
@media(max-width:560px){.ppvc2__toolbar .ppvc2__center,.ppvc2__toolbar .ppvc2__remove-logo{display:none}.ppvc2__thumb{width:43px;height:43px;flex-basis:43px}.ppvc2__zoom{display:none}.ppvc2__results{grid-template-columns:repeat(2,minmax(0,1fr))}.ppvc2__url-row{flex-direction:column}.ppvc2__find-logo{width:100%}.ppvc2__print-zone-name{display:none}}
/* ORDINE REALE */
.promopak-builder .ppb-panel.ppvc2-real-order-open{
position:fixed!important;z-index:1000005!important;
top:max(14px,env(safe-area-inset-top))!important;
right:max(14px,env(safe-area-inset-right))!important;
bottom:max(14px,env(safe-area-inset-bottom))!important;left:auto!important;
width:min(430px,calc(100vw - 28px))!important;max-width:none!important;
height:auto!important;max-height:none!important;margin:0!important;padding:22px!important;
overflow-y:auto!important;overscroll-behavior:contain;
border:1px solid #e3e3e5!important;border-radius:22px!important;background:#fff!important;
box-shadow:0 25px 80px rgba(0,0,0,.20)!important;transform:none!important
}
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppb-kicker,
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppb-title,
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppb-minimum-card,
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppb-step,
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppb-order{display:block!important}
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppb-colors{display:flex!important;flex-wrap:wrap!important}
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppb-size-list,
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppb-personalization-options{display:grid!important}
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppb-order{
width:100%!important;max-width:none!important;margin-top:18px!important
}
/* RESPONSIVE */
@media(max-width:1100px){
}
@media(max-width:900px){
.ppvc2__modal{grid-template-rows:64px minmax(0,1fr)}
.ppvc2__topbar{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:7px 9px}
.ppvc2__brand{display:none}
.ppvc2__close{width:40px;height:40px;flex-basis:40px;font-size:24px}
.ppvc2__toolbar{max-width:none;width:100%}
.ppvc2__toolbar button{min-height:36px;padding:0 10px;font-size:10px}
.ppvc2__order-button{min-height:40px;padding:0 13px}
.ppvc2__canvas{padding:8px 10px max(14px,env(safe-area-inset-bottom))}
.ppvc2__logo-layer{width:24%;max-width:220px}
.ppvc2__logo-panel{
top:auto;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));width:auto;
max-height:min(78dvh,680px);transform:translateY(calc(100% + 24px))
}
.ppvc2__logo-panel.is-open{transform:translateY(0)}
.promopak-builder .ppb-panel.ppvc2-real-order-open{
top:auto!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;
left:8px!important;width:auto!important;max-height:min(82dvh,760px)!important;
padding:18px!important;border-radius:20px!important
}
}
@media(max-width:560px){
.ppvc2__topbar{min-height:58px;padding:6px 7px}
.ppvc2__close{width:36px;height:36px;flex-basis:36px;font-size:22px}
.ppvc2__toolbar .ppvc2__view,
.ppvc2__toolbar .ppvc2__center,
.ppvc2__toolbar .ppvc2__remove-logo{display:none}
.ppvc2__toolbar .ppvc2__find-toggle{width:100%}
.ppvc2__order-button{padding:0 11px;font-size:11px}
.ppvc2__thumb{width:42px;height:42px;flex-basis:42px}
.ppvc2__zoom{display:none}
.ppvc2__results{grid-template-columns:repeat(2,minmax(0,1fr))}
.ppvc2__url-row{flex-direction:column}
.ppvc2__find-logo{width:100%}
.promopak-builder .ppb-panel.ppvc2-real-order-open{max-height:88dvh!important;padding:15px!important}
}
}
/* V2.6 - zone di stampa */
@media(max-width:900px){
.ppvc2__zone-tabs{
max-width:55vw;
overflow-x:auto;
scrollbar-width:none;
}
.ppvc2__zone-tabs::-webkit-scrollbar{display:none}
.ppvc2__zone-tab{
min-height:36px;
padding:0 10px;
font-size:10px;
}
}
@media(max-width:560px){
.ppvc2__toolbar{
gap:2px;
}
.ppvc2__zone-tabs{
max-width:48vw;
}
.ppvc2__zone-tab{
padding:0 9px;
}
.ppvc2__toolbar .ppvc2__find-toggle{
min-width:105px;
}
}
/* V3.0 - griglia molto discreta, in stile editor professionale */
.ppvc2__print-zone[data-zone="chest"],
.ppvc2__print-zone[data-zone="back"]{
background-image:
linear-gradient(to right, rgba(80,80,85,.075) 1px, transparent 1px),
linear-gradient(to bottom, rgba(80,80,85,.075) 1px, transparent 1px);
background-size:33.333% 100%, 100% 50%;
}
.ppvc2__print-zone[data-zone="heart"],
.ppvc2__print-zone[data-zone="opposite"]{
background:rgba(255,255,255,.005);
}
/* niente verde nella selezione delle aree */
.ppvc2__print-zone.is-active::before{
display:none !important;
}
@media(max-width:900px){
.ppvc2__color-current{
min-height:36px;
padding:0 9px;
font-size:10px;
}
.ppvc2__color-dot{
width:17px;
height:17px;
flex-basis:17px;
}
.ppvc2__color-label{
max-width:72px;
overflow:hidden;
text-overflow:ellipsis;
}
}
@media(max-width:560px){
.ppvc2__color-label{
display:none;
}
.ppvc2__color-current{
padding:0 7px;
}
}
/* V3.2 - micro animazioni e allineamento */
.ppvc2__close,
.ppvc2__order-button,
.ppvc2__toolbar>button,
.ppvc2__view-current,
.ppvc2__color-current,
.ppvc2__zoom button,
.ppvc2__thumb,
.ppvc2__view-option,
.ppvc2__color-option,
.ppvc2__panel-close{
transition:
transform .16s cubic-bezier(.2,.8,.2,1),
background .16s ease,
color .16s ease,
box-shadow .16s ease,
opacity .16s ease;
will-change:transform;
}
@media(hover:hover){
.ppvc2__close:hover,
.ppvc2__order-button:hover,
.ppvc2__toolbar>button:hover,
.ppvc2__view-current:hover,
.ppvc2__color-current:hover,
.ppvc2__zoom button:hover,
.ppvc2__panel-close:hover{
transform:translateY(-2px);
}
.ppvc2__thumb:hover{
transform:translateY(-2px) scale(1.04);
}
.ppvc2__view-option:hover,
.ppvc2__color-option:hover{
transform:translateX(2px);
}
}
.ppvc2 .is-pressing{
transform:scale(.96) !important;
}
.ppvc2__toolbar>button:focus-visible,
.ppvc2__view-current:focus-visible,
.ppvc2__color-current:focus-visible,
.ppvc2__order-button:focus-visible,
.ppvc2__close:focus-visible,
.ppvc2__zoom button:focus-visible{
outline:2px solid rgba(68,173,71,.72);
outline-offset:3px;
}
/* separatori più ordinati */
.ppvc2__view-switcher,
.ppvc2__color-switcher{
display:flex;
align-items:center;
}
.ppvc2__view-switcher::after,
.ppvc2__color-switcher::after{
content:"";
width:1px;
height:26px;
margin-left:4px;
background:rgba(255,255,255,.10);
}
/* toolbar centrale più stabile visivamente */
.ppvc2__toolbar{
min-height:52px;
}
.ppvc2__toolbar>button,
.ppvc2__view-current,
.ppvc2__color-current{
height:40px;
}
/* zoom più leggibile */
.ppvc2__zoom{
gap:7px;
}
.ppvc2__zoom button{
width:44px;
height:44px;
font-size:23px;
font-weight:500;
}
/* stato attivo miniature */
.ppvc2__thumb.is-active{
transform:scale(1.03);
}
/* mobile: toolbar più compatta ma allineata */
@media(max-width:900px){
.ppvc2__topbar{
grid-template-columns:auto minmax(0,1fr) auto;
gap:10px;
}
.ppvc2__toolbar{
justify-content:flex-start;
padding-inline:5px;
}
.ppvc2__view-switcher::after,
.ppvc2__color-switcher::after{
height:22px;
}
}
@media(max-width:560px){
.ppvc2__toolbar{
gap:2px;
}
.ppvc2__toolbar>button,
.ppvc2__view-current,
.ppvc2__color-current{
height:36px;
min-height:36px;
}
}
/* ============================================================
V3.3 — CONTROLLI CENTRATI + CHIUSURA DRAWER ORDINE
============================================================ */
/* X principale: perfettamente centrata */
.ppvc2__close,
.ppvc2__panel-close,
.ppvc2__order-drawer-close{
padding:0 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
line-height:1 !important;
text-align:center !important;
font-family:Arial,Helvetica,sans-serif !important;
}
/* X principale leggermente più elegante */
.ppvc2__close{
font-size:28px !important;
font-weight:300 !important;
}
/* X pannello logo */
.ppvc2__panel-close{
font-size:21px !important;
font-weight:400 !important;
}
/* Nuova X del pannello Ordina */
.promopak-builder .ppb-panel.ppvc2-real-order-open{
position:fixed !important;
padding-top:58px !important;
}
.promopak-builder .ppb-panel .ppvc2__order-drawer-close{
display:none !important;
}
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppvc2__order-drawer-close{
position:absolute !important;
top:16px !important;
right:16px !important;
z-index:30 !important;
width:38px !important;
height:38px !important;
border:0 !important;
border-radius:50% !important;
background:#f1f1f2 !important;
color:#55555a !important;
cursor:pointer !important;
box-shadow:none !important;
font-size:22px !important;
font-weight:400 !important;
transition:
transform .16s cubic-bezier(.2,.8,.2,1),
background .16s ease !important;
}
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppvc2__order-drawer-close:hover{
background:#e7e7e9 !important;
transform:scale(1.05) !important;
}
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppvc2__order-drawer-close span{
display:block !important;
width:100% !important;
line-height:1 !important;
transform:translateY(-1px);
}
/* ------------------------------------------------------------
+ / − NEL MODULO ORDINE
Copriamo le varianti di classe usate dal Product Builder.
------------------------------------------------------------ */
.promopak-builder .ppb-panel.ppvc2-real-order-open
:is(
.ppb-size-row,
.ppb-size-item,
.ppb-qty-row,
.ppb-quantity-row
) button,
.promopak-builder .ppb-panel.ppvc2-real-order-open
:is(
.ppb-minus,
.ppb-plus,
.ppb-qty-minus,
.ppb-qty-plus,
.qty-minus,
.qty-plus
){
padding:0 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
line-height:1 !important;
min-width:44px !important;
width:44px !important;
height:44px !important;
min-height:44px !important;
font-size:22px !important;
font-weight:400 !important;
font-family:Arial,Helvetica,sans-serif !important;
border-radius:0 !important;
}
/* Primo e ultimo bottone dello stepper */
.promopak-builder .ppb-panel.ppvc2-real-order-open
:is(
.ppb-stepper,
.ppb-qty-stepper,
.ppb-qty-control,
.ppb-quantity-control
){
display:grid !important;
grid-template-columns:44px 58px 44px !important;
align-items:stretch !important;
overflow:hidden !important;
min-height:44px !important;
border:1px solid #dedee2 !important;
border-radius:12px !important;
background:#fff !important;
}
.promopak-builder .ppb-panel.ppvc2-real-order-open
:is(
.ppb-stepper,
.ppb-qty-stepper,
.ppb-qty-control,
.ppb-quantity-control
) button{
border:0 !important;
background:#fff !important;
color:#222226 !important;
border-radius:0 !important;
box-shadow:none !important;
}
.promopak-builder .ppb-panel.ppvc2-real-order-open
:is(
.ppb-stepper,
.ppb-qty-stepper,
.ppb-qty-control,
.ppb-quantity-control
) button:first-child{
border-right:1px solid #ededee !important;
}
.promopak-builder .ppb-panel.ppvc2-real-order-open
:is(
.ppb-stepper,
.ppb-qty-stepper,
.ppb-qty-control,
.ppb-quantity-control
) button:last-child{
border-left:1px solid #ededee !important;
}
.promopak-builder .ppb-panel.ppvc2-real-order-open
:is(
.ppb-stepper,
.ppb-qty-stepper,
.ppb-qty-control,
.ppb-quantity-control
) input{
width:58px !important;
min-width:58px !important;
height:44px !important;
min-height:44px !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:#fff !important;
text-align:center !important;
line-height:44px !important;
font-size:15px !important;
font-weight:750 !important;
box-shadow:none !important;
appearance:textfield !important;
}
/* Fallback: nel tuo builder lo stepper è spesso l'ultimo blocco della riga taglia */
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppb-size-row button,
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppb-size-list button{
vertical-align:middle !important;
}
/* Zoom in basso: simboli centrati */
.ppvc2__zoom button{
padding:0 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
line-height:1 !important;
text-align:center !important;
font-family:Arial,Helvetica,sans-serif !important;
}
/* Drawer ordine un po' più premium */
.promopak-builder .ppb-panel.ppvc2-real-order-open{
scrollbar-width:thin;
scrollbar-color:#d3d3d6 transparent;
}
.promopak-builder .ppb-panel.ppvc2-real-order-open::-webkit-scrollbar{
width:7px;
}
.promopak-builder .ppb-panel.ppvc2-real-order-open::-webkit-scrollbar-thumb{
background:#d3d3d6;
border-radius:99px;
}
@media(max-width:900px){
.promopak-builder .ppb-panel.ppvc2-real-order-open{
padding-top:56px !important;
}
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppvc2__order-drawer-close{
top:12px !important;
right:12px !important;
width:36px !important;
height:36px !important;
}
}
/* ============================================================
V3.4 — X ORDINE SEMPRE VISIBILE
============================================================ */
.promopak-builder .ppb-panel.ppvc2-real-order-open{
position:fixed !important;
padding-top:72px !important;
}
/* disattivata fuori dal drawer */
.promopak-builder .ppb-panel .ppvc2__order-drawer-close{
display:none !important;
}
/* quando il drawer è aperto DEVE essere visibile */
.promopak-builder .ppb-panel.ppvc2-real-order-open > .ppvc2__order-drawer-close,
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppvc2__order-drawer-close{
display:inline-flex !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:18px !important;
right:18px !important;
z-index:9999 !important;
width:42px !important;
height:42px !important;
min-width:42px !important;
min-height:42px !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:50% !important;
background:#f1f1f2 !important;
color:#444448 !important;
align-items:center !important;
justify-content:center !important;
line-height:1 !important;
font-size:24px !important;
font-family:Arial,Helvetica,sans-serif !important;
font-weight:400 !important;
cursor:pointer !important;
box-shadow:0 2px 8px rgba(0,0,0,.05) !important;
transform:none !important;
}
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppvc2__order-drawer-close:hover{
background:#e7e7e9 !important;
transform:scale(1.04) !important;
}
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppvc2__order-drawer-close span{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:100% !important;
line-height:1 !important;
transform:translateY(-1px);
}
/* Piccola fascia libera in alto per evitare che il titolo copra la X */
.promopak-builder .ppb-panel.ppvc2-real-order-open::before{
content:"";
display:block;
height:0;
}
@media(max-width:900px){
.promopak-builder .ppb-panel.ppvc2-real-order-open{
padding-top:66px !important;
}
.promopak-builder .ppb-panel.ppvc2-real-order-open .ppvc2__order-drawer-close{
top:14px !important;
right:14px !important;
width:40px !important;
height:40px !important;
min-width:40px !important;
min-height:40px !important;
}
}
/* ============================================================
V3.5 — FULLSCREEN REALE ANCHE SE LO SHORTCODE È NEL BUILDER
============================================================ */
body > .ppvc2__modal{
position:fixed !important;
inset:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
left:0 !important;
width:100vw !important;
max-width:none !important;
height:100vh !important;
height:100dvh !important;
min-height:100vh !important;
min-height:100dvh !important;
max-height:none !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
overflow:hidden !important;
z-index:2147483000 !important;
transform:none !important;
filter:none !important;
contain:none !important;
isolation:isolate;
}
body > .ppvc2__modal.is-open{
display:grid !important;
}
/* Evita che tema/Elementor/Woo applichino larghezze massime al fullscreen */
body > .ppvc2__modal,
body > .ppvc2__modal .ppvc2__workspace,
body > .ppvc2__modal .ppvc2__canvas,
body > .ppvc2__modal .ppvc2__stage{
max-width:none !important;
}
/* iOS / Safari */
@supports(height:100svh){
body > .ppvc2__modal{
height:100svh !important;
min-height:100svh !important;
}
}
@supports(height:100dvh){
body > .ppvc2__modal{
height:100dvh !important;
min-height:100dvh !important;
}
}
/* ============================================================
V3.6 — FULLSCREEN SOPRA L'HEADER DEL SITO
============================================================ */
/* Il configuratore deve essere il layer più alto della pagina. */
body > .ppvc2__modal{
z-index:2147483647 !important;
}
/*
* Nasconde SOLO l'header del sito mentre il configuratore è aperto.
* È il modo più robusto per evitare che header sticky/fixed del tema
* coprano toolbar e pulsanti del configuratore.
*/
html.ppvc2-fullscreen-active body > header,
body.ppvc2-fullscreen-active header,
body.ppvc2-fullscreen-active .site-header,
body.ppvc2-fullscreen-active #masthead,
body.ppvc2-fullscreen-active .main-header,
body.ppvc2-fullscreen-active .header-wrap,
body.ppvc2-fullscreen-active .sticky-header,
body.ppvc2-fullscreen-active .elementor-location-header,
body.ppvc2-fullscreen-active [data-elementor-type="header"]{
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
}
/* Anche eventuale barra admin WordPress non deve coprire il configuratore. */
html.ppvc2-fullscreen-active #wpadminbar{
display:none !important;
}
/* Blocca margini/top offset aggiunti dal tema quando esiste un header sticky. */
html.ppvc2-fullscreen-active,
body.ppvc2-fullscreen-active{
margin-top:0 !important;
padding-top:0 !important;
}
html.ppvc2-fullscreen-active body > .ppvc2__modal{
top:0 !important;
inset:0 !important;
}
/* Toolbar del configuratore sempre sopra il workspace. */
body > .ppvc2__modal .ppvc2__topbar{
position:relative !important;
z-index:2147483646 !important;
}
/* Il workspace parte sotto la toolbar del configuratore, non sotto l'header del sito. */
body > .ppvc2__modal .ppvc2__workspace{
position:relative !important;
z-index:1 !important;
}
/* ============================================================
V3.7 — FIX PULSANTE ORDINA
Il drawer ordine viene portato direttamente sotto .
============================================================ */
/* Il fullscreen resta sopra il sito, ma lascia uno strato libero all'ordine. */
body > .ppvc2__modal{
z-index:2147483000 !important;
}
/* Quando il pannello ordine viene portato sotto body non ha più
.promopak-builder come genitore: replichiamo quindi gli stili necessari. */
body > .ppb-panel.ppvc2-real-order-open{
display:block !important;
position:fixed !important;
z-index:2147483647 !important;
top:max(14px,env(safe-area-inset-top)) !important;
right:max(14px,env(safe-area-inset-right)) !important;
bottom:max(14px,env(safe-area-inset-bottom)) !important;
left:auto !important;
width:min(430px,calc(100vw - 28px)) !important;
max-width:none !important;
height:auto !important;
max-height:none !important;
margin:0 !important;
padding:62px 22px 22px !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
border:1px solid #e3e3e5 !important;
border-radius:22px !important;
background:#fff !important;
box-shadow:0 25px 80px rgba(0,0,0,.24) !important;
transform:none !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
}
/* Tutte le sezioni del vero Product Builder devono restare visibili. */
body > .ppb-panel.ppvc2-real-order-open .ppb-kicker,
body > .ppb-panel.ppvc2-real-order-open .ppb-title,
body > .ppb-panel.ppvc2-real-order-open .ppb-minimum-card,
body > .ppb-panel.ppvc2-real-order-open .ppb-step,
body > .ppb-panel.ppvc2-real-order-open .ppb-order{
display:block !important;
}
body > .ppb-panel.ppvc2-real-order-open .ppb-colors{
display:flex !important;
flex-wrap:wrap !important;
}
body > .ppb-panel.ppvc2-real-order-open .ppb-size-list,
body > .ppb-panel.ppvc2-real-order-open .ppb-personalization-options{
display:grid !important;
}
body > .ppb-panel.ppvc2-real-order-open .ppb-order{
width:100% !important;
max-width:none !important;
margin-top:18px !important;
}
/* X del drawer sempre visibile. */
body > .ppb-panel.ppvc2-real-order-open .ppvc2__order-drawer-close{
display:inline-flex !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:16px !important;
right:16px !important;
z-index:2147483647 !important;
width:40px !important;
height:40px !important;
min-width:40px !important;
min-height:40px !important;
padding:0 !important;
border:0 !important;
border-radius:50% !important;
align-items:center !important;
justify-content:center !important;
background:#f1f1f2 !important;
color:#444448 !important;
font-size:23px !important;
line-height:1 !important;
cursor:pointer !important;
}
/* Oscura leggermente il canvas ma senza bloccare il drawer. */
body.ppvc2-order-open > .ppvc2__modal::after{
content:"";
position:absolute;
inset:0;
z-index:100;
background:rgba(0,0,0,.055);
pointer-events:none;
}
@media(max-width:900px){
body > .ppb-panel.ppvc2-real-order-open{
top:auto !important;
right:8px !important;
bottom:max(8px,env(safe-area-inset-bottom)) !important;
left:8px !important;
width:auto !important;
max-height:min(88dvh,760px) !important;
padding:58px 16px 16px !important;
border-radius:20px !important;
}
body > .ppb-panel.ppvc2-real-order-open .ppvc2__order-drawer-close{
top:12px !important;
right:12px !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
min-height:38px !important;
}
}
/* ============================================================
V3.9 — CAROUSEL COLORI PREMIUM A 3 PRODOTTI
============================================================ */
.ppvc2__workspace{
position:relative!important;
overflow:hidden!important;
}
.ppvc2__color-carousel{
position:absolute;
inset:0;
z-index:7;
pointer-events:none;
overflow:hidden;
}
.ppvc2__color-preview{
position:absolute;
top:50%;
width:clamp(270px,29vw,520px);
height:min(68vh,690px);
padding:0;
border:0;
background:transparent;
transform:translateY(-50%);
pointer-events:auto;
cursor:pointer;
opacity:.90;
transition:
transform .34s cubic-bezier(.2,.8,.2,1),
opacity .25s ease,
filter .25s ease;
}
.ppvc2__color-preview--prev{
left:clamp(-235px,-12vw,-110px);
}
.ppvc2__color-preview--next{
right:clamp(-235px,-12vw,-110px);
}
.ppvc2__color-preview-stage{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:calc(100% - 58px);
}
.ppvc2__color-preview-product{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
}
.ppvc2__color-preview-product img{
display:block;
width:100%;
height:100%;
object-fit:contain;
opacity:.72;
filter:saturate(.92) contrast(.98);
transform:scale(.92);
transition:
opacity .22s ease,
transform .34s cubic-bezier(.2,.8,.2,1),
filter .22s ease;
}
.ppvc2__color-preview:hover .ppvc2__color-preview-product img{
opacity:.88;
transform:scale(.96);
filter:saturate(1) contrast(1);
}
.ppvc2__color-preview-arrow{
position:absolute;
top:50%;
display:flex;
align-items:center;
justify-content:center;
width:58px;
height:58px;
border-radius:50%;
background:rgba(255,255,255,.90);
color:#35353a;
font-size:28px;
font-weight:400;
line-height:1;
transform:translateY(-50%);
box-shadow:0 10px 26px rgba(0,0,0,.10);
backdrop-filter:blur(12px);
transition:transform .18s ease,background .18s ease;
}
.ppvc2__color-preview--prev .ppvc2__color-preview-arrow{
right:17%;
}
.ppvc2__color-preview--next .ppvc2__color-preview-arrow{
left:17%;
}
.ppvc2__color-preview:hover .ppvc2__color-preview-arrow{
transform:translateY(-50%) scale(1.07);
background:#fff;
}
.ppvc2__color-preview-footer{
position:absolute;
bottom:0;
left:50%;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
max-width:75%;
padding:10px 15px;
border-radius:999px;
background:rgba(216,216,219,.88);
color:#2a2a2e;
transform:translateX(-50%);
box-shadow:0 6px 18px rgba(0,0,0,.055);
backdrop-filter:blur(14px);
white-space:nowrap;
}
.ppvc2__color-preview-name{
display:block;
max-width:170px;
overflow:hidden;
text-overflow:ellipsis;
color:#2b2b30;
font-size:13px;
font-weight:800;
line-height:1;
}
.ppvc2__color-preview-swatch{
width:18px;
height:18px;
flex:0 0 18px;
border-radius:50%;
border:2px solid rgba(255,255,255,.95);
box-shadow:0 0 0 1px rgba(0,0,0,.11);
}
.ppvc2__current-color-caption{
position:absolute;
z-index:12;
left:50%;
bottom:78px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:9px 14px;
border-radius:999px;
background:rgba(255,255,255,.88);
color:#2a2a2f;
transform:translateX(-50%);
box-shadow:0 7px 20px rgba(0,0,0,.06);
backdrop-filter:blur(12px);
pointer-events:none;
}
.ppvc2__current-color-swatch{
width:19px;
height:19px;
border-radius:50%;
border:2px solid #fff;
box-shadow:0 0 0 1px rgba(0,0,0,.11);
}
.ppvc2__current-color-name{
font-size:12px;
font-weight:800;
white-space:nowrap;
}
/* Transizione centrale durante lo slide colore */
.ppvc2__workspace.is-color-next .ppvc2__product-image,
.ppvc2__workspace.is-color-next .ppvc2__logo-layer{
animation:ppvc2-color-next .40s cubic-bezier(.2,.8,.2,1);
}
.ppvc2__workspace.is-color-prev .ppvc2__product-image,
.ppvc2__workspace.is-color-prev .ppvc2__logo-layer{
animation:ppvc2-color-prev .40s cubic-bezier(.2,.8,.2,1);
}
@keyframes ppvc2-color-next{
0%{opacity:1;transform:translateX(0) scale(1)}
44%{opacity:.32;transform:translateX(-34px) scale(.97)}
55%{opacity:.30;transform:translateX(34px) scale(.97)}
100%{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes ppvc2-color-prev{
0%{opacity:1;transform:translateX(0) scale(1)}
44%{opacity:.32;transform:translateX(34px) scale(.97)}
55%{opacity:.30;transform:translateX(-34px) scale(.97)}
100%{opacity:1;transform:translateX(0) scale(1)}
}
@media(max-width:1350px){
.ppvc2__color-preview{
width:clamp(210px,24vw,330px);
height:min(58vh,540px);
}
.ppvc2__color-preview--prev{left:clamp(-175px,-11vw,-82px)}
.ppvc2__color-preview--next{right:clamp(-175px,-11vw,-82px)}
.ppvc2__color-preview-arrow{width:50px;height:50px;font-size:23px}
.ppvc2__color-preview-name{max-width:120px;font-size:11px}
}
@media(max-width:980px){
.ppvc2__color-preview{
width:150px;
height:310px;
}
.ppvc2__color-preview--prev{left:-92px}
.ppvc2__color-preview--next{right:-92px}
.ppvc2__color-preview-arrow{width:42px;height:42px;font-size:20px}
.ppvc2__color-preview--prev .ppvc2__color-preview-arrow{right:8px}
.ppvc2__color-preview--next .ppvc2__color-preview-arrow{left:8px}
.ppvc2__color-preview-footer{max-width:88%;padding:8px 10px}
.ppvc2__color-preview-name{max-width:72px;font-size:10px}
.ppvc2__current-color-caption{bottom:72px;padding:7px 10px}
}
/* Mobile: swipe resta attivo, laterali diventano controlli compatti */
@media(max-width:680px){
.ppvc2__color-preview{
top:auto;
bottom:90px;
width:auto;
height:auto;
transform:none;
}
.ppvc2__color-preview--prev{left:10px}
.ppvc2__color-preview--next{right:10px}
.ppvc2__color-preview-stage{height:auto}
.ppvc2__color-preview-product{display:none}
.ppvc2__color-preview-arrow{
position:static;
width:38px;
height:38px;
transform:none;
font-size:18px;
}
.ppvc2__color-preview:hover .ppvc2__color-preview-arrow{transform:scale(1.04)}
.ppvc2__color-preview-footer{
position:static;
max-width:none;
margin-top:5px;
padding:7px 9px;
transform:none;
}
.ppvc2__color-preview-name{max-width:54px;font-size:9px}
.ppvc2__color-preview-swatch{width:15px;height:15px;flex-basis:15px}
.ppvc2__current-color-caption{bottom:72px;font-size:10px}
}
/* ============================================================
V4.0 — CAROUSEL COLORI STABILE, STILE COMPETITOR
Override della V3.9
============================================================ */
/* il prodotto centrale deve restare il vero protagonista */
.ppvc2__canvas{
isolation:isolate;
}
.ppvc2__stage{
z-index:10 !important;
}
/* preview laterali: niente "card" o rettangoli visivi */
.ppvc2__color-carousel{
z-index:5 !important;
overflow:hidden !important;
}
.ppvc2__color-preview{
top:50% !important;
width:clamp(250px,26vw,440px) !important;
height:min(64vh,620px) !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
opacity:1 !important;
}
.ppvc2__color-preview--prev{
left:clamp(-220px,-12vw,-95px) !important;
}
.ppvc2__color-preview--next{
right:clamp(-220px,-12vw,-95px) !important;
}
.ppvc2__color-preview-stage{
height:calc(100% - 52px) !important;
background:transparent !important;
overflow:visible !important;
}
.ppvc2__color-preview-product{
background:transparent !important;
overflow:visible !important;
}
.ppvc2__color-preview-product img{
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center !important;
/* laterali visibili ma secondari */
opacity:.52 !important;
transform:scale(.84) !important;
/* evita che un'immagine non caricata produca blocchi */
background:transparent !important;
box-shadow:none !important;
transition:
opacity .24s ease,
transform .36s cubic-bezier(.2,.8,.2,1),
filter .24s ease !important;
}
.ppvc2__color-preview:hover .ppvc2__color-preview-product img{
opacity:.68 !important;
transform:scale(.88) !important;
}
/* se l'immagine è in caricamento, non mostrare rettangoli */
.ppvc2__color-preview.is-loading .ppvc2__color-preview-product img{
opacity:0 !important;
}
/* frecce come nel competitor: verso l'interno */
.ppvc2__color-preview-arrow{
width:54px !important;
height:54px !important;
background:rgba(255,255,255,.92) !important;
color:#3a3a3f !important;
box-shadow:0 8px 24px rgba(0,0,0,.09) !important;
}
.ppvc2__color-preview--prev .ppvc2__color-preview-arrow{
right:14% !important;
}
.ppvc2__color-preview--next .ppvc2__color-preview-arrow{
left:14% !important;
}
/* etichetta sotto semplice, non un grande pannello */
.ppvc2__color-preview-footer{
bottom:4px !important;
max-width:72% !important;
min-height:36px !important;
padding:8px 12px !important;
gap:7px !important;
background:rgba(224,224,226,.76) !important;
box-shadow:none !important;
}
.ppvc2__color-preview-name{
max-width:145px !important;
font-size:12px !important;
}
/* il colore centrale non deve coprire "Seleziona area di stampa" */
.ppvc2__current-color-caption{
bottom:28px !important;
padding:7px 11px !important;
background:rgba(255,255,255,.86) !important;
}
/* animazione centrale meno aggressiva e senza salti */
@keyframes ppvc2-color-next{
0%{opacity:1;transform:translateX(0) scale(1)}
46%{opacity:.55;transform:translateX(-28px) scale(.985)}
54%{opacity:.55;transform:translateX(28px) scale(.985)}
100%{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes ppvc2-color-prev{
0%{opacity:1;transform:translateX(0) scale(1)}
46%{opacity:.55;transform:translateX(28px) scale(.985)}
54%{opacity:.55;transform:translateX(-28px) scale(.985)}
100%{opacity:1;transform:translateX(0) scale(1)}
}
/* monitor medi */
@media(max-width:1350px){
.ppvc2__color-preview{
width:clamp(205px,23vw,320px) !important;
height:min(56vh,500px) !important;
}
.ppvc2__color-preview--prev{
left:clamp(-165px,-10vw,-75px) !important;
}
.ppvc2__color-preview--next{
right:clamp(-165px,-10vw,-75px) !important;
}
}
/* tablet: ancora preview prodotto, ma più discrete */
@media(max-width:980px){
.ppvc2__color-preview{
width:150px !important;
height:300px !important;
}
.ppvc2__color-preview--prev{left:-88px !important}
.ppvc2__color-preview--next{right:-88px !important}
.ppvc2__color-preview-product img{
opacity:.42 !important;
transform:scale(.82) !important;
}
.ppvc2__color-preview-footer{
max-width:84% !important;
padding:7px 9px !important;
}
}
/* smartphone: niente mini-foto laterali che rubano spazio.
Restano frecce + colore e soprattutto swipe. */
@media(max-width:680px){
.ppvc2__color-preview{
bottom:92px !important;
width:66px !important;
height:auto !important;
}
.ppvc2__color-preview--prev{left:10px !important}
.ppvc2__color-preview--next{right:10px !important}
.ppvc2__color-preview-product{
display:none !important;
}
.ppvc2__color-preview-footer{
max-width:none !important;
min-height:0 !important;
margin-top:5px !important;
padding:6px 8px !important;
}
.ppvc2__current-color-caption{
bottom:74px !important;
}
}
/* ============================================================
V4.1 — SYNC REALE + CAROUSEL RIPULITO
============================================================ */
/* Cambio colore centrale fluido e senza flash. */
.ppvc2__product-image{
transition:
width .18s ease,
height .18s ease,
opacity .16s ease,
transform .22s cubic-bezier(.2,.8,.2,1) !important;
}
.ppvc2__product-image.is-changing-color{
opacity:.55 !important;
transform:scale(.985);
}
/* Tolto il terzo indicatore colore sotto: resta la toolbar sopra. */
.ppvc2__current-color-caption{
display:none !important;
}
/* Le aree tecniche devono sparire finché non stai personalizzando. */
.ppvc2:not(.ppvc2-has-active-design) .ppvc2__print-zone{
border-color:transparent !important;
background:none !important;
background-image:none !important;
outline:0 !important;
}
.ppvc2:not(.ppvc2-has-active-design) .ppvc2__print-zone::before,
.ppvc2:not(.ppvc2-has-active-design) .ppvc2__print-zone::after{
display:none !important;
}
.ppvc2:not(.ppvc2-has-active-design) .ppvc2__area-hint{
opacity:.72;
}
/* Carousel: proporzioni più vicine al competitor. */
.ppvc2__color-preview{
width:clamp(230px,22vw,360px) !important;
height:min(56vh,530px) !important;
}
.ppvc2__color-preview--prev{
left:clamp(-155px,-8vw,-72px) !important;
}
.ppvc2__color-preview--next{
right:clamp(-155px,-8vw,-72px) !important;
}
.ppvc2__color-preview-product img{
opacity:.48 !important;
transform:scale(.86) !important;
}
.ppvc2__color-preview:hover .ppvc2__color-preview-product img{
opacity:.66 !important;
transform:scale(.90) !important;
}
/* Se WooCommerce usa la stessa immagine per due colori,
non mostriamo una preview palesemente sbagliata. */
.ppvc2__color-preview.has-duplicate-image .ppvc2__color-preview-product img{
opacity:.12 !important;
filter:grayscale(1) !important;
}
.ppvc2__color-preview.has-duplicate-image .ppvc2__color-preview-footer{
background:rgba(255,255,255,.93) !important;
}
/* Freccia attaccata visivamente alla preview. */
.ppvc2__color-preview--prev .ppvc2__color-preview-arrow{
right:10% !important;
}
.ppvc2__color-preview--next .ppvc2__color-preview-arrow{
left:10% !important;
}
/* Etichette sempre dentro lo schermo. */
.ppvc2__color-preview-footer{
max-width:82% !important;
}
.ppvc2__color-preview--prev .ppvc2__color-preview-footer{
left:max(48%,115px) !important;
}
.ppvc2__color-preview--next .ppvc2__color-preview-footer{
left:min(52%,calc(100% - 115px)) !important;
}
/* Thumbnail Fronte/Retro: separata dall'area hint. */
.ppvc2__thumbbar{
margin-bottom:4px !important;
}
.ppvc2__area-hint{
bottom:84px !important;
}
/* Su desktop grande il prodotto laterale resta visibile circa al 35-40%. */
@media(min-width:1400px){
.ppvc2__color-preview{
width:clamp(260px,24vw,400px) !important;
}
.ppvc2__color-preview--prev{
left:clamp(-170px,-9vw,-85px) !important;
}
.ppvc2__color-preview--next{
right:clamp(-170px,-9vw,-85px) !important;
}
}
@media(max-width:900px){
.ppvc2__area-hint{
bottom:76px !important;
}
}
@media(max-width:680px){
.ppvc2__color-preview-footer{
display:none !important;
}
.ppvc2__color-preview-arrow{
width:42px !important;
height:42px !important;
}
.ppvc2__area-hint{
bottom:68px !important;
}
}
/* V4.3 — transizione anche sui retro per colore */
.ppvc2__product-image.is-changing-color{
opacity:.58 !important;
transform:scale(.988);
}
/* ============================================================
V4.7 — MOBILE FIRST CONFIGURATORE
============================================================ */
@media(max-width:900px){
.ppvc2__modal{
grid-template-rows:58px minmax(0,1fr) !important;
}
.ppvc2__topbar{
min-height:58px !important;
height:58px !important;
padding:6px 8px !important;
grid-template-columns:42px minmax(0,1fr) auto !important;
gap:7px !important;
}
.ppvc2__close{
width:40px !important;
height:40px !important;
flex-basis:40px !important;
font-size:22px !important;
}
/* Toolbar davvero mobile: compatta e scrollabile, senza deformare. */
.ppvc2__toolbar{
width:100% !important;
max-width:none !important;
min-width:0 !important;
height:42px !important;
padding:4px !important;
gap:2px !important;
border-radius:14px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
justify-content:flex-start !important;
scrollbar-width:none !important;
-webkit-overflow-scrolling:touch !important;
}
.ppvc2__toolbar::-webkit-scrollbar{
display:none !important;
}
.ppvc2__toolbar>button,
.ppvc2__view-current,
.ppvc2__color-current{
min-height:34px !important;
height:34px !important;
padding:0 9px !important;
font-size:10px !important;
border-radius:10px !important;
flex:0 0 auto !important;
}
.ppvc2__order-button{
min-height:40px !important;
height:40px !important;
padding:0 13px !important;
font-size:11px !important;
white-space:nowrap !important;
}
.ppvc2__canvas{
padding:6px 8px max(12px,env(safe-area-inset-bottom)) !important;
gap:6px !important;
}
.ppvc2__stage{
min-height:0 !important;
overflow:visible !important;
}
.ppvc2__product-image{
filter:drop-shadow(0 12px 20px rgba(0,0,0,.07)) !important;
}
/* Bottom navigation Fronte/Retro più leggibile */
.ppvc2__thumbbar{
min-height:52px !important;
padding:5px !important;
gap:5px !important;
margin:0 0 2px !important;
border-radius:999px !important;
}
.ppvc2__thumb{
width:46px !important;
height:46px !important;
flex:0 0 46px !important;
padding:5px !important;
}
/* Il suggerimento non deve coprire le miniature */
.ppvc2__area-hint{
bottom:66px !important;
padding:6px 9px !important;
font-size:8.5px !important;
}
.ppvc2__logo-panel{
left:7px !important;
right:7px !important;
bottom:max(7px,env(safe-area-inset-bottom)) !important;
max-height:80dvh !important;
border-radius:20px !important;
}
}
@media(max-width:560px){
/* Su smartphone mostriamo solo le azioni realmente utili. */
.ppvc2__toolbar .ppvc2__center,
.ppvc2__toolbar .ppvc2__remove-logo{
display:none !important;
}
.ppvc2__toolbar .ppvc2__find-toggle{
width:auto !important;
min-width:max-content !important;
}
.ppvc2__view-switcher,
.ppvc2__color-switcher{
flex:0 0 auto !important;
}
/* Frecce colori più discrete e vicine ai bordi */
.ppvc2__color-preview{
bottom:76px !important;
width:52px !important;
height:auto !important;
pointer-events:auto !important;
}
.ppvc2__color-preview--prev{
left:6px !important;
}
.ppvc2__color-preview--next{
right:6px !important;
}
.ppvc2__color-preview-arrow{
width:40px !important;
height:40px !important;
font-size:18px !important;
box-shadow:0 4px 14px rgba(0,0,0,.08) !important;
}
.ppvc2__color-preview-product,
.ppvc2__color-preview-footer{
display:none !important;
}
/* Area tecnica quasi invisibile finché non c'è un logo. */
.ppvc2:not(.ppvc2-has-active-design) .ppvc2__area-hint{
opacity:.58 !important;
}
.ppvc2:not(.ppvc2-has-active-design) .ppvc2__print-zone{
border-color:transparent !important;
background:none !important;
}
.ppvc2__thumbbar{
min-height:50px !important;
}
.ppvc2__thumb{
width:44px !important;
height:44px !important;
flex-basis:44px !important;
}
}
@media(max-width:390px){
.ppvc2__topbar{
padding-left:6px !important;
padding-right:6px !important;
gap:5px !important;
}
.ppvc2__toolbar>button,
.ppvc2__view-current,
.ppvc2__color-current{
padding-left:8px !important;
padding-right:8px !important;
font-size:9.5px !important;
}
.ppvc2__order-button{
padding:0 10px !important;
}
.ppvc2__canvas{
padding-left:4px !important;
padding-right:4px !important;
}
}
/* ============================================================
V4.8 — MOBILE: FRONTE/RETRO + COLORI IN BASSO
============================================================ */
.ppvc2__mobile-bottom-controls{
display:none;
}
@media(max-width:560px){
/* In alto restano solo Aggiungi logo + Ordina.
Vista e colore vengono spostati sotto. */
.ppvc2__topbar .ppvc2__view-switcher,
.ppvc2__topbar .ppvc2__color-switcher{
display:none !important;
}
.ppvc2__toolbar{
justify-content:center !important;
}
.ppvc2__toolbar .ppvc2__find-toggle{
margin-inline:auto !important;
}
.ppvc2__mobile-bottom-controls{
display:grid !important;
gap:7px !important;
width:min(94vw,520px) !important;
margin:0 auto 4px !important;
z-index:20 !important;
}
.ppvc2__mobile-view-row{
display:flex !important;
justify-content:center !important;
gap:6px !important;
}
.ppvc2__mobile-view{
min-height:36px !important;
padding:0 16px !important;
border:1px solid rgba(0,0,0,.08) !important;
border-radius:999px !important;
background:rgba(255,255,255,.88) !important;
color:#6d6d72 !important;
font:inherit !important;
font-size:11px !important;
font-weight:800 !important;
box-shadow:0 3px 12px rgba(0,0,0,.04) !important;
}
.ppvc2__mobile-view.is-active{
background:#2f3034 !important;
color:#fff !important;
border-color:#2f3034 !important;
}
.ppvc2__mobile-color-row{
width:100% !important;
overflow-x:auto !important;
scrollbar-width:none !important;
-webkit-overflow-scrolling:touch !important;
padding:1px 0 2px !important;
}
.ppvc2__mobile-color-row::-webkit-scrollbar{
display:none !important;
}
.ppvc2__mobile-color-list{
display:flex !important;
justify-content:flex-start !important;
gap:6px !important;
width:max-content !important;
min-width:100% !important;
padding:0 6px !important;
}
.ppvc2__mobile-color{
min-height:36px !important;
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
padding:0 11px 0 8px !important;
border:1px solid rgba(0,0,0,.08) !important;
border-radius:999px !important;
background:rgba(255,255,255,.88) !important;
color:#4e4f54 !important;
font:inherit !important;
font-size:10px !important;
font-weight:800 !important;
white-space:nowrap !important;
box-shadow:0 3px 12px rgba(0,0,0,.04) !important;
}
.ppvc2__mobile-color.is-active{
border-color:#2f3034 !important;
box-shadow:0 0 0 2px rgba(47,48,52,.08) !important;
}
.ppvc2__mobile-color-swatch{
width:20px !important;
height:20px !important;
flex:0 0 20px !important;
border-radius:50% !important;
border:2px solid #fff !important;
box-shadow:0 0 0 1px rgba(0,0,0,.14) !important;
}
.ppvc2__mobile-color-name{
line-height:1 !important;
}
/* La vecchia thumbbar con immagini diventa ridondante su smartphone:
teniamo il nuovo selettore testuale Fronte/Retro. */
.ppvc2__thumbbar{
display:none !important;
}
.ppvc2__area-hint{
bottom:112px !important;
}
/* Le frecce colore laterali restano, ma più in alto per non coprire
i nuovi controlli inferiori. */
.ppvc2__color-preview{
bottom:130px !important;
}
}
@media(max-width:390px){
.ppvc2__mobile-bottom-controls{
width:96vw !important;
gap:6px !important;
}
.ppvc2__mobile-view{
min-height:34px !important;
padding:0 14px !important;
font-size:10px !important;
}
.ppvc2__mobile-color{
min-height:34px !important;
padding:0 10px 0 7px !important;
font-size:9.5px !important;
}
.ppvc2__mobile-color-swatch{
width:18px !important;
height:18px !important;
flex-basis:18px !important;
}
}
/* ============================================================
V4.9 — MOBILE DOCK COME BOZZA
============================================================ */
.ppvc2__mobile-dock{display:none}
@media(max-width:560px){
/* Topbar pulita: solo chiudi e ordina */
.ppvc2__toolbar{
display:none !important;
}
.ppvc2__topbar{
grid-template-columns:42px 1fr auto !important;
}
.ppvc2__brand{
display:block !important;
visibility:hidden !important;
pointer-events:none !important;
}
.ppvc2__mobile-bottom-controls{
display:none !important;
}
.ppvc2__mobile-dock{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
align-items:end !important;
gap:10px !important;
width:calc(100% - 24px) !important;
max-width:520px !important;
margin:0 auto max(8px,env(safe-area-inset-bottom)) !important;
padding:0 !important;
z-index:30 !important;
}
.ppvc2__mobile-dock-col{
min-width:0 !important;
}
.ppvc2__mobile-dock-col--colors{
justify-self:start !important;
width:100% !important;
}
.ppvc2__mobile-dock-col--views{
justify-self:center !important;
}
.ppvc2__mobile-dock-col--logo{
justify-self:end !important;
width:100% !important;
display:flex !important;
justify-content:flex-end !important;
}
.ppvc2__mobile-dock-label{
display:block !important;
margin:0 0 7px 2px !important;
color:#232428 !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
}
/* Colori */
.ppvc2__mobile-color-row{
width:100% !important;
overflow-x:auto !important;
scrollbar-width:none !important;
-webkit-overflow-scrolling:touch !important;
}
.ppvc2__mobile-color-row::-webkit-scrollbar{
display:none !important;
}
.ppvc2__mobile-color-list{
display:flex !important;
align-items:center !important;
gap:8px !important;
width:max-content !important;
min-width:0 !important;
padding:2px !important;
}
.ppvc2__mobile-color{
width:38px !important;
height:38px !important;
min-width:38px !important;
min-height:38px !important;
padding:0 !important;
display:grid !important;
place-items:center !important;
border:0 !important;
border-radius:50% !important;
background:transparent !important;
box-shadow:none !important;
}
.ppvc2__mobile-color-swatch{
width:31px !important;
height:31px !important;
flex:0 0 31px !important;
border-radius:50% !important;
border:2px solid #fff !important;
box-shadow:0 0 0 1px rgba(0,0,0,.18) !important;
transition:transform .18s ease, box-shadow .18s ease !important;
}
.ppvc2__mobile-color.is-active .ppvc2__mobile-color-swatch{
transform:scale(1.08) !important;
box-shadow:0 0 0 2px #fff,0 0 0 4px #2f3034 !important;
}
.ppvc2__mobile-color-name{
display:none !important;
}
/* Fronte/Retro centrale */
.ppvc2__mobile-view-row{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:2px !important;
min-height:54px !important;
padding:4px !important;
border-radius:999px !important;
background:rgba(213,213,216,.94) !important;
box-shadow:0 5px 16px rgba(0,0,0,.04) !important;
}
.ppvc2__mobile-view{
width:48px !important;
height:48px !important;
min-width:48px !important;
min-height:48px !important;
padding:5px !important;
display:grid !important;
place-items:center !important;
border:0 !important;
border-radius:50% !important;
background:transparent !important;
box-shadow:none !important;
}
.ppvc2__mobile-view.is-active{
background:#fff !important;
box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
}
.ppvc2__mobile-view-thumb{
width:100% !important;
height:100% !important;
display:block !important;
}
.ppvc2__mobile-view-thumb img{
width:100% !important;
height:100% !important;
display:block !important;
object-fit:contain !important;
}
/* CTA Inserisci logo */
.ppvc2__mobile-add-logo{
min-width:118px !important;
min-height:42px !important;
padding:0 16px !important;
border:0 !important;
border-radius:999px !important;
background:rgba(255,255,255,.94) !important;
color:#2b2c30 !important;
font:inherit !important;
font-size:12px !important;
font-weight:750 !important;
white-space:nowrap !important;
box-shadow:0 5px 16px rgba(0,0,0,.05) !important;
}
.ppvc2__mobile-add-logo:active{
transform:scale(.98) !important;
}
/* Non serve più la vecchia thumbbar */
.ppvc2__thumbbar{
display:none !important;
}
/* Posizioni rispetto al dock */
.ppvc2__area-hint{
bottom:96px !important;
}
.ppvc2__color-preview{
bottom:122px !important;
}
.ppvc2__canvas{
padding-bottom:6px !important;
}
}
@media(max-width:390px){
.ppvc2__mobile-dock{
width:calc(100% - 16px) !important;
gap:7px !important;
}
.ppvc2__mobile-add-logo{
min-width:104px !important;
padding:0 13px !important;
font-size:11px !important;
}
.ppvc2__mobile-view{
width:45px !important;
height:45px !important;
min-width:45px !important;
min-height:45px !important;
}
.ppvc2__mobile-color{
width:35px !important;
height:35px !important;
min-width:35px !important;
min-height:35px !important;
}
.ppvc2__mobile-color-swatch{
width:28px !important;
height:28px !important;
flex-basis:28px !important;
}
}
/* ============================================================
V5.0 — MOBILE POLISH
Layout più equilibrato, prodotto più alto, dock rifinito.
============================================================ */
@media(max-width:560px){
/* viewport reale mobile */
body > .ppvc2__modal{
width:100vw !important;
height:100dvh !important;
min-height:100dvh !important;
max-height:100dvh !important;
}
/* Header più compatto */
.ppvc2__modal{
grid-template-rows:54px minmax(0,1fr) !important;
}
.ppvc2__topbar{
min-height:54px !important;
height:54px !important;
padding:5px 8px !important;
border-bottom:1px solid rgba(0,0,0,.045) !important;
}
.ppvc2__close{
width:40px !important;
height:40px !important;
flex-basis:40px !important;
font-size:22px !important;
}
.ppvc2__order-button{
min-height:40px !important;
height:40px !important;
padding:0 15px !important;
border-radius:999px !important;
font-size:12px !important;
}
/* Canvas: meno aria inutile sopra, più spazio utile al prodotto */
.ppvc2__canvas{
grid-template-rows:minmax(0,1fr) auto !important;
gap:6px !important;
padding:4px 0 max(8px,env(safe-area-inset-bottom)) !important;
overflow:hidden !important;
}
.ppvc2__stage{
width:100% !important;
max-width:100% !important;
top:-4.2vh !important;
}
/* Prodotto importante ma non "esploso" */
.ppvc2__product-image{
max-width:96vw !important;
filter:drop-shadow(0 12px 22px rgba(0,0,0,.06)) !important;
}
/* Frecce: più leggere e più vicine alla scena */
.ppvc2__color-preview{
bottom:126px !important;
width:44px !important;
}
.ppvc2__color-preview--prev{
left:12px !important;
}
.ppvc2__color-preview--next{
right:12px !important;
}
.ppvc2__color-preview-arrow{
width:42px !important;
height:42px !important;
font-size:19px !important;
background:rgba(255,255,255,.94) !important;
box-shadow:0 5px 16px rgba(0,0,0,.065) !important;
}
/* Hint più discreto */
.ppvc2__area-hint{
bottom:96px !important;
padding:6px 9px !important;
font-size:8px !important;
font-weight:700 !important;
background:rgba(255,255,255,.88) !important;
box-shadow:0 3px 10px rgba(0,0,0,.035) !important;
}
/* Aree stampa: presenti ma molto più eleganti */
.ppvc2:not(.ppvc2-has-active-design) .ppvc2__print-zone{
opacity:.28 !important;
border-color:rgba(65,66,70,.18) !important;
background:none !important;
background-image:none !important;
box-shadow:none !important;
}
.ppvc2:not(.ppvc2-has-active-design) .ppvc2__print-zone::before,
.ppvc2:not(.ppvc2-has-active-design) .ppvc2__print-zone::after{
display:none !important;
}
/* Dock più solido: niente clipping del primo colore */
.ppvc2__mobile-dock{
grid-template-columns:minmax(108px,1fr) 102px minmax(116px,1fr) !important;
align-items:end !important;
gap:7px !important;
width:calc(100% - 20px) !important;
max-width:500px !important;
margin:0 auto max(7px,env(safe-area-inset-bottom)) !important;
}
.ppvc2__mobile-dock-col--colors{
min-width:108px !important;
overflow:hidden !important;
}
.ppvc2__mobile-dock-label{
margin:0 0 6px 4px !important;
font-size:12px !important;
font-weight:800 !important;
}
/* Colori: centrati, compatti e scorribili */
.ppvc2__mobile-color-row{
width:100% !important;
overflow-x:auto !important;
overflow-y:visible !important;
padding:3px 4px 5px !important;
scroll-padding-inline:4px !important;
}
.ppvc2__mobile-color-list{
gap:7px !important;
padding:0 !important;
}
.ppvc2__mobile-color{
width:34px !important;
height:34px !important;
min-width:34px !important;
min-height:34px !important;
}
.ppvc2__mobile-color-swatch{
width:28px !important;
height:28px !important;
flex-basis:28px !important;
border:2px solid #fff !important;
box-shadow:0 0 0 1px rgba(0,0,0,.14) !important;
}
.ppvc2__mobile-color.is-active .ppvc2__mobile-color-swatch{
transform:scale(1.04) !important;
box-shadow:
0 0 0 2px #fff,
0 0 0 3px rgba(38,39,43,.88) !important;
}
/* Fronte / Retro */
.ppvc2__mobile-view-row{
min-height:50px !important;
padding:4px !important;
gap:1px !important;
background:rgba(215,215,218,.92) !important;
box-shadow:0 4px 13px rgba(0,0,0,.035) !important;
}
.ppvc2__mobile-view{
width:44px !important;
height:44px !important;
min-width:44px !important;
min-height:44px !important;
padding:5px !important;
}
.ppvc2__mobile-view.is-active{
box-shadow:0 2px 7px rgba(0,0,0,.07) !important;
}
/* CTA logo: meno ingombrante e più premium */
.ppvc2__mobile-add-logo{
min-width:112px !important;
min-height:40px !important;
padding:0 14px !important;
font-size:11.5px !important;
font-weight:800 !important;
background:#fff !important;
box-shadow:0 4px 14px rgba(0,0,0,.045) !important;
}
}
/* iPhone stretti / piccoli Android */
@media(max-width:390px){
.ppvc2__stage{
top:-3.2vh !important;
}
.ppvc2__mobile-dock{
grid-template-columns:minmax(96px,1fr) 94px minmax(106px,1fr) !important;
width:calc(100% - 14px) !important;
gap:5px !important;
}
.ppvc2__mobile-dock-col--colors{
min-width:96px !important;
}
.ppvc2__mobile-add-logo{
min-width:104px !important;
padding:0 11px !important;
font-size:10.5px !important;
}
.ppvc2__mobile-view{
width:42px !important;
height:42px !important;
min-width:42px !important;
min-height:42px !important;
}
.ppvc2__mobile-color{
width:32px !important;
height:32px !important;
min-width:32px !important;
min-height:32px !important;
}
.ppvc2__mobile-color-swatch{
width:26px !important;
height:26px !important;
flex-basis:26px !important;
}
}
/* Telefoni molto bassi: recupera spazio verticale */
@media(max-width:560px) and (max-height:760px){
.ppvc2__stage{
top:-2.2vh !important;
}
.ppvc2__area-hint{
bottom:88px !important;
}
.ppvc2__color-preview{
bottom:112px !important;
}
.ppvc2__mobile-dock-label{
margin-bottom:4px !important;
}
}
/* ============================================================
V5.1 — DOCK ALLINEATO + POPUP COLORI ADATTIVO
============================================================ */
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-color-sheet{
display:none;
}
@media(max-width:560px){
/* Tre blocchi realmente allineati sulla stessa linea */
.ppvc2__mobile-dock{
grid-template-columns:minmax(102px,1fr) 102px minmax(112px,1fr) !important;
align-items:center !important;
min-height:58px !important;
gap:7px !important;
}
.ppvc2__mobile-dock-col{
height:58px !important;
display:flex !important;
align-items:center !important;
}
.ppvc2__mobile-dock-col--colors{
justify-content:flex-start !important;
overflow:visible !important;
}
.ppvc2__mobile-dock-col--views{
justify-content:center !important;
}
.ppvc2__mobile-dock-col--logo{
justify-content:flex-end !important;
}
/* 1-3 colori: pallini inline, centrati verticalmente */
.ppvc2__mobile-color-inline{
display:none !important;
width:100% !important;
}
.ppvc2__mobile-color-inline.is-visible{
display:block !important;
}
.ppvc2__mobile-color-row{
padding:2px 3px !important;
}
.ppvc2__mobile-color-list{
align-items:center !important;
gap:6px !important;
}
.ppvc2__mobile-color{
width:36px !important;
height:36px !important;
min-width:36px !important;
min-height:36px !important;
}
.ppvc2__mobile-color-swatch{
width:29px !important;
height:29px !important;
flex-basis:29px !important;
}
/* 4+ colori: un solo pulsante elegante che apre il mezzo popup */
.ppvc2__mobile-color-trigger{
width:100% !important;
max-width:132px !important;
min-height:46px !important;
padding:7px 9px 7px 10px !important;
display:none !important;
grid-template-columns:minmax(0,1fr) auto auto !important;
align-items:center !important;
gap:6px !important;
border:1px solid rgba(0,0,0,.07) !important;
border-radius:16px !important;
background:rgba(255,255,255,.94) !important;
box-shadow:0 4px 14px rgba(0,0,0,.045) !important;
color:#242529 !important;
font:inherit !important;
text-align:left !important;
}
.ppvc2__mobile-color-trigger.is-visible{
display:grid !important;
}
.ppvc2__mobile-color-trigger-main{
min-width:0 !important;
display:grid !important;
gap:3px !important;
}
.ppvc2__mobile-color-trigger-label{
color:#8a8a90 !important;
font-size:8px !important;
font-weight:800 !important;
letter-spacing:.07em !important;
text-transform:uppercase !important;
}
.ppvc2__mobile-color-trigger-current{
min-width:0 !important;
display:flex !important;
align-items:center !important;
gap:6px !important;
}
.ppvc2__mobile-color-trigger-dot{
width:19px !important;
height:19px !important;
flex:0 0 19px !important;
border-radius:50% !important;
border:2px solid #fff !important;
box-shadow:0 0 0 1px rgba(0,0,0,.15) !important;
}
.ppvc2__mobile-color-trigger-name{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
font-weight:800 !important;
}
.ppvc2__mobile-color-trigger-count{
white-space:nowrap !important;
color:#77777d !important;
font-size:8px !important;
font-weight:700 !important;
}
.ppvc2__mobile-color-trigger-arrow{
color:#74747a !important;
font-size:13px !important;
transform:translateY(1px) !important;
}
/* Fronte/Retro e Inserisci logo stessa altezza visiva */
.ppvc2__mobile-view-row{
min-height:50px !important;
height:50px !important;
}
.ppvc2__mobile-add-logo{
min-height:46px !important;
height:46px !important;
}
/* Bottom sheet colori */
.ppvc2__mobile-color-sheet{
position:fixed !important;
inset:0 !important;
z-index:2147483646 !important;
display:block !important;
pointer-events:none !important;
visibility:hidden !important;
}
.ppvc2__mobile-color-sheet.is-open{
pointer-events:auto !important;
visibility:visible !important;
}
.ppvc2__mobile-color-sheet-backdrop{
position:absolute !important;
inset:0 !important;
border:0 !important;
background:rgba(20,20,23,.26) !important;
opacity:0 !important;
transition:opacity .22s ease !important;
}
.ppvc2__mobile-color-sheet.is-open .ppvc2__mobile-color-sheet-backdrop{
opacity:1 !important;
}
.ppvc2__mobile-color-sheet-panel{
position:absolute !important;
left:8px !important;
right:8px !important;
bottom:max(8px,env(safe-area-inset-bottom)) !important;
max-height:min(58dvh,520px) !important;
padding:9px 14px 18px !important;
border-radius:24px !important;
background:#fff !important;
box-shadow:0 24px 70px rgba(0,0,0,.22) !important;
transform:translateY(calc(100% + 24px)) !important;
transition:transform .28s cubic-bezier(.2,.8,.2,1) !important;
overflow:hidden !important;
}
.ppvc2__mobile-color-sheet.is-open .ppvc2__mobile-color-sheet-panel{
transform:translateY(0) !important;
}
.ppvc2__mobile-color-sheet-handle{
width:38px !important;
height:4px !important;
margin:0 auto 11px !important;
border-radius:999px !important;
background:#dedee1 !important;
}
.ppvc2__mobile-color-sheet-head{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
margin-bottom:12px !important;
}
.ppvc2__mobile-color-sheet-kicker{
color:#44AD47 !important;
font-size:8px !important;
font-weight:900 !important;
letter-spacing:.08em !important;
}
.ppvc2__mobile-color-sheet-head h3{
margin:3px 0 0 !important;
color:#1d1e22 !important;
font-size:21px !important;
line-height:1 !important;
letter-spacing:-.035em !important;
}
.ppvc2__mobile-color-sheet-close{
width:36px !important;
height:36px !important;
border:0 !important;
border-radius:50% !important;
background:#f0f0f2 !important;
color:#55565b !important;
font-size:22px !important;
}
.ppvc2__mobile-color-sheet-grid{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:7px !important;
max-height:calc(min(58dvh,520px) - 92px) !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
padding-bottom:4px !important;
}
.ppvc2__mobile-color-sheet-item{
min-height:52px !important;
display:grid !important;
grid-template-columns:32px minmax(0,1fr) 22px !important;
align-items:center !important;
gap:9px !important;
padding:7px 9px !important;
border:1px solid #e7e7e9 !important;
border-radius:14px !important;
background:#fafafa !important;
color:#292a2e !important;
font:inherit !important;
text-align:left !important;
}
.ppvc2__mobile-color-sheet-item.is-active{
border-color:#2e2f33 !important;
background:#fff !important;
box-shadow:0 0 0 1px #2e2f33 !important;
}
.ppvc2__mobile-color-sheet-swatch{
width:30px !important;
height:30px !important;
border-radius:50% !important;
border:2px solid #fff !important;
box-shadow:0 0 0 1px rgba(0,0,0,.13) !important;
}
.ppvc2__mobile-color-sheet-name{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:11px !important;
font-weight:800 !important;
}
.ppvc2__mobile-color-sheet-check{
display:grid !important;
place-items:center !important;
width:20px !important;
height:20px !important;
border-radius:50% !important;
background:#2e2f33 !important;
color:#fff !important;
font-size:10px !important;
opacity:0 !important;
}
.ppvc2__mobile-color-sheet-item.is-active .ppvc2__mobile-color-sheet-check{
opacity:1 !important;
}
}
@media(max-width:390px){
.ppvc2__mobile-dock{
grid-template-columns:minmax(94px,1fr) 94px minmax(104px,1fr) !important;
}
.ppvc2__mobile-color-trigger{
max-width:120px !important;
padding-left:8px !important;
padding-right:7px !important;
}
.ppvc2__mobile-color-sheet-grid{
grid-template-columns:1fr !important;
}
}
/* ============================================================
V5.2 — ALLINEAMENTI + COLOR SHEET SOPRA TUTTO
============================================================ */
@media(max-width:560px){
/* Tutti i tre controlli inferiori hanno la stessa altezza e lo stesso asse. */
.ppvc2__mobile-dock{
grid-template-columns:minmax(104px,1fr) 104px minmax(118px,1fr) !important;
align-items:center !important;
min-height:54px !important;
height:54px !important;
gap:8px !important;
}
.ppvc2__mobile-dock-col{
height:54px !important;
min-height:54px !important;
display:flex !important;
align-items:center !important;
}
.ppvc2__mobile-dock-col--colors{
justify-content:flex-start !important;
}
.ppvc2__mobile-dock-col--views{
justify-content:center !important;
}
.ppvc2__mobile-dock-col--logo{
justify-content:flex-end !important;
}
/* Pulsante colori, pill viste e CTA logo perfettamente centrati. */
.ppvc2__mobile-color-trigger{
min-height:46px !important;
height:46px !important;
margin:0 !important;
}
.ppvc2__mobile-color-inline{
align-self:center !important;
}
.ppvc2__mobile-color-row{
display:flex !important;
align-items:center !important;
min-height:46px !important;
height:46px !important;
padding:3px !important;
}
.ppvc2__mobile-view-row{
min-height:50px !important;
height:50px !important;
margin:0 !important;
}
.ppvc2__mobile-add-logo{
min-height:46px !important;
height:46px !important;
margin:0 !important;
}
/* Evita che il primo/ultimo colore tocchino i bordi del dock. */
.ppvc2__mobile-color-list{
padding-inline:3px !important;
}
/* Sheet: essendo portaled sotto body non è più intrappolato dal canvas. */
body > .ppvc2__mobile-color-sheet{
position:fixed !important;
inset:0 !important;
z-index:2147483647 !important;
display:block !important;
transform:none !important;
isolation:isolate !important;
}
body > .ppvc2__mobile-color-sheet .ppvc2__mobile-color-sheet-backdrop{
z-index:1 !important;
}
body > .ppvc2__mobile-color-sheet .ppvc2__mobile-color-sheet-panel{
z-index:2 !important;
left:8px !important;
right:8px !important;
bottom:max(8px,env(safe-area-inset-bottom)) !important;
width:auto !important;
max-width:none !important;
}
/* Quando il popup colori è aperto le frecce spariscono:
non servono e non devono mai stare sopra il popup. */
html.ppvc2-mobile-color-sheet-open .ppvc2__color-preview,
body.ppvc2-mobile-color-sheet-open .ppvc2__color-preview{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
/* Il popup parte leggermente più alto e respira meglio. */
body > .ppvc2__mobile-color-sheet .ppvc2__mobile-color-sheet-panel{
max-height:min(62dvh,560px) !important;
padding:10px 14px max(18px,env(safe-area-inset-bottom)) !important;
}
body > .ppvc2__mobile-color-sheet .ppvc2__mobile-color-sheet-grid{
max-height:calc(min(62dvh,560px) - 96px) !important;
}
/* Migliore centratura delle card colore. */
.ppvc2__mobile-color-sheet-item{
min-height:54px !important;
align-items:center !important;
padding:8px 10px !important;
}
.ppvc2__mobile-color-sheet-swatch{
align-self:center !important;
}
.ppvc2__mobile-color-sheet-name{
align-self:center !important;
line-height:1.15 !important;
}
.ppvc2__mobile-color-sheet-check{
align-self:center !important;
}
}
@media(max-width:390px){
.ppvc2__mobile-dock{
grid-template-columns:minmax(96px,1fr) 96px minmax(108px,1fr) !important;
gap:6px !important;
}
.ppvc2__mobile-color-trigger{
max-width:118px !important;
}
body > .ppvc2__mobile-color-sheet .ppvc2__mobile-color-sheet-panel{
left:6px !important;
right:6px !important;
bottom:max(6px,env(safe-area-inset-bottom)) !important;
border-radius:22px !important;
}
}
/* ============================================================
V5.3 — ORDINA + X POPUP + ROTAZIONE LOGO
============================================================ */
.ppvc2__rotate-handle{
position:absolute;
left:50%;
top:-38px;
transform:translateX(-50%);
width:30px;
height:30px;
display:none;
align-items:center;
justify-content:center;
padding:0;
border:2px solid #0879ff;
border-radius:50%;
background:#fff;
color:#0879ff;
font-size:17px;
line-height:1;
font-weight:850;
cursor:grab;
touch-action:none;
user-select:none;
-webkit-user-select:none;
box-shadow:0 3px 10px rgba(0,0,0,.10);
z-index:6;
}
.ppvc2__logo-layer.is-visible .ppvc2__rotate-handle{
display:flex;
}
.ppvc2__logo-layer.is-rotating .ppvc2__rotate-handle{
cursor:grabbing;
}
.ppvc2__logo-layer.is-rotating::before{
border-style:dashed !important;
}
@media(max-width:560px){
/* ORDINA più importante */
.ppvc2__order-button{
min-width:122px !important;
min-height:50px !important;
height:50px !important;
padding:0 22px !important;
border-radius:999px !important;
font-size:14px !important;
font-weight:850 !important;
letter-spacing:-.01em !important;
}
/* X colori: tutta dentro al foglio, non deve uscire dal bordo */
body > .ppvc2__mobile-color-sheet
.ppvc2__mobile-color-sheet-head{
position:relative !important;
display:block !important;
min-height:68px !important;
padding:4px 54px 4px 0 !important;
margin-bottom:10px !important;
}
body > .ppvc2__mobile-color-sheet
.ppvc2__mobile-color-sheet-close{
position:absolute !important;
top:6px !important;
right:2px !important;
width:42px !important;
height:42px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 0 3px !important;
margin:0 !important;
border:0 !important;
border-radius:50% !important;
background:#f0f0f2 !important;
color:#5e5f64 !important;
font-size:27px !important;
font-weight:400 !important;
line-height:1 !important;
box-shadow:none !important;
transform:none !important;
overflow:hidden !important;
}
/* Maniglia di rotazione più grande per il dito */
.ppvc2__rotate-handle{
top:-44px;
width:36px;
height:36px;
font-size:19px;
border-width:2px;
}
}
@media(max-width:390px){
.ppvc2__order-button{
min-width:112px !important;
padding-inline:18px !important;
}
}
/* ============================================================
V5.4 — IMMAGINE MOBILE PIÙ GRANDE + FIX ZOOM IOS
============================================================ */
@media(max-width:560px){
/* Più visibilità del prodotto su smartphone */
.ppvc2__stage{
top:-5.1vh !important;
}
.ppvc2__product-image{
max-width:100vw !important;
max-height:82dvh !important;
}
/*
* iPhone/Safari effettua automaticamente zoom quando un input
* ha font-size inferiore a 16px.
* Tutti i campi editabili del configuratore vengono quindi
* portati ad almeno 16px su mobile.
*/
.ppvc2 input[type="text"],
.ppvc2 input[type="url"],
.ppvc2 input[type="search"],
.ppvc2 input[type="email"],
.ppvc2 input[type="tel"],
.ppvc2 input[type="number"],
.ppvc2 input[type="password"],
.ppvc2 textarea,
.ppvc2 select,
body > .ppvc2__modal input[type="text"],
body > .ppvc2__modal input[type="url"],
body > .ppvc2__modal input[type="search"],
body > .ppvc2__modal input[type="email"],
body > .ppvc2__modal input[type="tel"],
body > .ppvc2__modal input[type="number"],
body > .ppvc2__modal input[type="password"],
body > .ppvc2__modal textarea,
body > .ppvc2__modal select{
font-size:16px !important;
}
/* Campo sito nel pannello logo */
.ppvc2__website{
min-height:48px !important;
height:48px !important;
font-size:16px !important;
}
/* evita trasformazioni/zoom involontari durante focus */
.ppvc2__logo-panel input,
.ppvc2__logo-panel textarea,
.ppvc2__logo-panel select{
transform:none !important;
}
}
@media(max-width:390px){
.ppvc2__stage{
top:-4.2vh !important;
}
.ppvc2__product-image{
max-width:102vw !important;
}
}
/* ============================================================
V5.5 — FIT MOBILE ADATTIVO PER PRODOTTI VERTICALI
============================================================ */
@media(max-width:560px){
.ppvc2__stage{
top:-6.2vh !important;
}
.ppvc2__product-image{
max-width:104vw !important;
max-height:90dvh !important;
}
}
@media(max-width:390px){
.ppvc2__stage{
top:-5.2vh !important;
}
.ppvc2__product-image{
max-width:106vw !important;
max-height:88dvh !important;
}
}
/* ============================================================
V5.6 — UPLOAD LOGO PRIMARIO
============================================================ */
.ppvc2__upload--primary{
min-height:54px;
gap:9px;
border:0;
border-radius:12px;
background:#111214;
color:#fff;
font-size:12px;
font-weight:800;
box-shadow:0 7px 18px rgba(0,0,0,.10);
transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.ppvc2__upload--primary:hover{
background:#202124;
transform:translateY(-1px);
box-shadow:0 10px 22px rgba(0,0,0,.13);
}
.ppvc2__upload--primary:active{
transform:scale(.985);
}
.ppvc2__upload-icon{
width:25px;
height:25px;
display:grid;
place-items:center;
border-radius:50%;
background:rgba(255,255,255,.12);
font-size:18px;
line-height:1;
}
.ppvc2__divider--website{
margin:20px 0 16px;
}
.ppvc2__website-section{
padding:14px;
border:1px solid #e3e3e6;
border-radius:14px;
background:#fafafa;
}
.ppvc2__website-section-head{
display:grid;
gap:4px;
margin-bottom:10px;
}
.ppvc2__website-section-head strong{
color:#242529;
font-size:12px;
font-weight:800;
}
.ppvc2__website-section-head small{
color:#85858b;
font-size:10px;
line-height:1.45;
}
@media(max-width:560px){
.ppvc2__logo-panel h3{
margin-top:7px !important;
}
.ppvc2__upload--primary{
min-height:58px !important;
border-radius:14px !important;
font-size:14px !important;
}
.ppvc2__website-section{
padding:12px !important;
border-radius:14px !important;
}
.ppvc2__website-section-head strong{
font-size:13px !important;
}
.ppvc2__website-section-head small{
font-size:11px !important;
}
.ppvc2__divider--website{
margin:18px 0 14px !important;
}
}
/* ============================================================
V5.7 — MOBILE DOCK PIXEL ALIGNMENT
Colori | Fronte/Retro | Inserisci logo perfettamente centrati
============================================================ */
@media(max-width:560px){
/*
* La griglia inferiore è ora SIMMETRICA:
* lato sinistro e lato destro hanno esattamente la stessa larghezza.
* Il selettore Fronte/Retro resta matematicamente al centro.
*/
.ppvc2__mobile-dock{
width:calc(100% - 32px) !important;
max-width:480px !important;
min-height:54px !important;
height:54px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:0 !important;
grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr) !important;
column-gap:8px !important;
row-gap:0 !important;
align-items:center !important;
}
.ppvc2__mobile-dock-col{
width:100% !important;
min-width:0 !important;
height:54px !important;
min-height:54px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
}
/* Sinistra e destra sono centrate nella propria metà. */
.ppvc2__mobile-dock-col--colors{
justify-content:center !important;
justify-self:stretch !important;
overflow:visible !important;
}
.ppvc2__mobile-dock-col--views{
justify-content:center !important;
justify-self:center !important;
width:104px !important;
}
.ppvc2__mobile-dock-col--logo{
justify-content:center !important;
justify-self:stretch !important;
}
/* Swatch colori: niente offset laterali ereditati. */
.ppvc2__mobile-color-inline{
width:auto !important;
max-width:100% !important;
margin:0 auto !important;
}
.ppvc2__mobile-color-row{
width:auto !important;
max-width:100% !important;
min-height:46px !important;
height:46px !important;
margin:0 !important;
padding:3px 2px !important;
overflow-x:auto !important;
overflow-y:visible !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
}
.ppvc2__mobile-color-list{
width:max-content !important;
min-width:0 !important;
margin:0 auto !important;
padding:0 2px !important;
gap:6px !important;
}
/* Centro esatto */
.ppvc2__mobile-view-row{
width:104px !important;
min-width:104px !important;
max-width:104px !important;
height:50px !important;
min-height:50px !important;
margin:0 !important;
padding:4px !important;
}
/* CTA destra: contenuta nella sua colonna e centrata,
non più spinta contro il bordo dello schermo. */
.ppvc2__mobile-add-logo{
width:clamp(104px,29vw,116px) !important;
min-width:0 !important;
max-width:116px !important;
height:46px !important;
min-height:46px !important;
margin:0 auto !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:11.5px !important;
text-align:center !important;
line-height:1 !important;
}
/* Anche il trigger "molti colori" resta centrato nel lato sinistro. */
.ppvc2__mobile-color-trigger{
width:clamp(104px,29vw,116px) !important;
min-width:0 !important;
max-width:116px !important;
height:46px !important;
min-height:46px !important;
margin:0 auto !important;
}
}
@media(max-width:390px){
.ppvc2__mobile-dock{
width:calc(100% - 22px) !important;
grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr) !important;
column-gap:6px !important;
}
.ppvc2__mobile-dock-col--views,
.ppvc2__mobile-view-row{
width:96px !important;
min-width:96px !important;
max-width:96px !important;
}
.ppvc2__mobile-add-logo,
.ppvc2__mobile-color-trigger{
width:clamp(98px,28vw,108px) !important;
max-width:108px !important;
padding-left:10px !important;
padding-right:10px !important;
font-size:10.8px !important;
}
.ppvc2__mobile-color-list{
gap:5px !important;
}
}
/* ============================================================
V5.8 — DIMENSIONI MASSIME GRAFICHE
============================================================ */
.ppvc2__range-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.ppvc2__size-readout{
color:#202125;
font-size:11px;
font-weight:850;
white-space:nowrap;
}
.ppvc2__size-limit{
color:#8a8a90;
font-size:9px;
line-height:1.35;
}
@media(max-width:560px){
.ppvc2__size-readout{
font-size:12px;
}
.ppvc2__size-limit{
font-size:10px;
}
}
/* V5.9 - area print boxes more subtle */
.ppvc2__print-zone{
border-width:1px !important;
}
/* ============================================================
V6.1 — PREZZO LIVE IN ALTO
============================================================ */
.ppvc2__top-right{
justify-self:end;
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
min-width:0;
}
.ppvc2__live-price{
min-width:112px;
min-height:46px;
display:grid;
align-content:center;
gap:1px;
padding:6px 12px;
border:1px solid rgba(0,0,0,.055);
border-radius:15px;
background:rgba(255,255,255,.88);
box-shadow:0 4px 14px rgba(0,0,0,.04);
backdrop-filter:blur(10px);
}
.ppvc2__live-price-label{
color:#8a8a90;
font-size:8px;
font-weight:850;
line-height:1;
letter-spacing:.07em;
text-transform:uppercase;
}
.ppvc2__live-price-main{
display:flex;
align-items:baseline;
gap:3px;
color:#24252a;
line-height:1;
}
.ppvc2__live-price-value{
font-size:15px;
font-weight:900;
letter-spacing:-.035em;
white-space:nowrap;
}
.ppvc2__live-price-main small{
color:#77787e;
font-size:9px;
font-weight:750;
}
.ppvc2__live-price-note{
max-width:150px;
overflow:hidden;
color:#87888e;
font-size:7.5px;
font-weight:650;
line-height:1.15;
text-overflow:ellipsis;
white-space:nowrap;
}
.ppvc2__live-price.has-personalization{
border-color:rgba(68,173,71,.20);
background:rgba(247,253,247,.94);
}
.ppvc2__live-price.has-personalization .ppvc2__live-price-note{
color:#3c8e40;
}
@media(max-width:900px){
.ppvc2__top-right{
gap:7px !important;
}
.ppvc2__live-price{
min-width:96px !important;
min-height:40px !important;
height:40px !important;
padding:5px 9px !important;
border-radius:13px !important;
}
.ppvc2__live-price-label{
font-size:7px !important;
}
.ppvc2__live-price-value{
font-size:13px !important;
}
.ppvc2__live-price-main small{
font-size:8px !important;
}
.ppvc2__live-price-note{
max-width:110px !important;
font-size:6.8px !important;
}
}
@media(max-width:560px){
.ppvc2__topbar{
grid-template-columns:42px minmax(0,1fr) auto !important;
}
.ppvc2__top-right{
grid-column:2 / 4 !important;
justify-self:end !important;
gap:6px !important;
}
.ppvc2__live-price{
min-width:94px !important;
width:auto !important;
height:44px !important;
min-height:44px !important;
padding:5px 8px !important;
}
.ppvc2__live-price-value{
font-size:13px !important;
}
.ppvc2__live-price-note{
display:none !important;
}
.ppvc2__order-button{
min-width:116px !important;
}
}
@media(max-width:390px){
.ppvc2__live-price{
min-width:82px !important;
padding-inline:7px !important;
}
.ppvc2__live-price-value{
font-size:11.5px !important;
}
.ppvc2__live-price-main small{
font-size:7px !important;
}
.ppvc2__order-button{
min-width:104px !important;
padding-inline:15px !important;
}
}
/* ============================================================
V6.2 — UPSELL CUORE + SCHIENA
============================================================ */
.ppvc2__combo-offer{
position:absolute;
inset:0;
z-index:2147483200;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
visibility:hidden;
pointer-events:none;
}
.ppvc2__combo-offer.is-open{
visibility:visible;
pointer-events:auto;
}
.ppvc2__combo-offer-backdrop{
position:absolute;
inset:0;
border:0;
background:rgba(19,20,23,.32);
opacity:0;
transition:opacity .20s ease;
}
.ppvc2__combo-offer.is-open
.ppvc2__combo-offer-backdrop{
opacity:1;
}
.ppvc2__combo-offer-card{
position:relative;
z-index:2;
width:min(430px,calc(100vw - 32px));
padding:24px;
border-radius:22px;
background:#fff;
box-shadow:0 24px 70px rgba(0,0,0,.20);
transform:translateY(10px) scale(.985);
opacity:0;
transition:
transform .24s cubic-bezier(.2,.8,.2,1),
opacity .18s ease;
}
.ppvc2__combo-offer.is-open
.ppvc2__combo-offer-card{
transform:translateY(0) scale(1);
opacity:1;
}
.ppvc2__combo-offer-close{
position:absolute;
top:14px;
right:14px;
width:38px;
height:38px;
display:grid;
place-items:center;
padding:0 0 2px;
border:0;
border-radius:50%;
background:#f0f0f2;
color:#55565b;
font-size:24px;
line-height:1;
}
.ppvc2__combo-offer-kicker{
display:block;
margin:0 48px 8px 0;
color:#44AD47;
font-size:9px;
font-weight:900;
letter-spacing:.08em;
}
.ppvc2__combo-offer-card h3{
margin:0 46px 10px 0;
color:#1e1f23;
font-size:25px;
line-height:1.04;
letter-spacing:-.04em;
}
.ppvc2__combo-offer-text{
margin:0 0 16px;
color:#6f7076;
font-size:13px;
line-height:1.5;
}
.ppvc2__combo-offer-price{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 14px;
border:1px solid rgba(68,173,71,.20);
border-radius:14px;
background:#f4fbf4;
}
.ppvc2__combo-offer-price-label{
color:#397b3c;
font-size:12px;
font-weight:800;
}
.ppvc2__combo-offer-price-value{
color:#245d27;
font-size:16px;
font-weight:900;
white-space:nowrap;
}
.ppvc2__combo-offer-saving{
min-height:18px;
margin:8px 2px 0;
color:#6b6c71;
font-size:10px;
font-weight:700;
}
.ppvc2__combo-offer-actions{
display:grid;
grid-template-columns:1fr 1.25fr;
gap:8px;
margin-top:18px;
}
.ppvc2__combo-offer-actions button{
min-height:46px;
border-radius:999px;
font:inherit;
font-size:12px;
font-weight:850;
}
.ppvc2__combo-offer-no{
border:1px solid #dedee1;
background:#fff;
color:#55565b;
}
.ppvc2__combo-offer-yes{
border:1px solid #242529;
background:#242529;
color:#fff;
}
@media(max-width:560px){
.ppvc2__combo-offer{
position:fixed !important;
inset:0 !important;
z-index:2147483647 !important;
align-items:flex-end !important;
padding:8px !important;
}
.ppvc2__combo-offer-card{
width:100% !important;
max-width:none !important;
padding:20px 18px max(18px,env(safe-area-inset-bottom)) !important;
border-radius:24px !important;
transform:translateY(calc(100% + 20px)) !important;
}
.ppvc2__combo-offer.is-open
.ppvc2__combo-offer-card{
transform:translateY(0) !important;
}
.ppvc2__combo-offer-card h3{
font-size:23px !important;
}
.ppvc2__combo-offer-text{
font-size:12px !important;
}
.ppvc2__combo-offer-actions{
grid-template-columns:1fr !important;
}
.ppvc2__combo-offer-yes{
order:-1;
}
}
html.ppvc2-combo-offer-open
.ppvc2__color-preview,
body.ppvc2-combo-offer-open
.ppvc2__color-preview{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
/* ============================================================
V6.3 — SPOSTAMENTO TRA AREE + PREZZO DINAMICO
============================================================ */
.ppvc2__logo-layer.is-visible{
cursor:grab;
}
.ppvc2__logo-layer.is-visible:active{
cursor:grabbing;
}
/* Durante lo spostamento le aree diventano appena più leggibili */
.ppvc2__logo-layer:active ~ .ppvc2__print-zone{
opacity:.55;
}
/* ============================================================
V6.6 — ABBIGLIAMENTO LIBERO + POSIZIONI RAPIDE
============================================================ */
.ppvc2__quick-positions{
position:absolute;
left:50%;
bottom:86px;
transform:translateX(-50%);
z-index:18;
width:max-content;
max-width:calc(100% - 32px);
display:grid;
justify-items:center;
gap:6px;
}
.ppvc2__quick-positions-label{
color:#8a8a90;
font-size:8px;
font-weight:850;
letter-spacing:.06em;
text-transform:uppercase;
}
.ppvc2__quick-positions-front,
.ppvc2__quick-positions-back{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:4px;
border-radius:999px;
background:rgba(255,255,255,.88);
box-shadow:0 5px 18px rgba(0,0,0,.05);
backdrop-filter:blur(10px);
}
.ppvc2__quick-positions-front[hidden],
.ppvc2__quick-positions-back[hidden]{
display:none !important;
}
.ppvc2__quick-position{
min-height:34px;
padding:0 12px;
border:1px solid rgba(0,0,0,.065);
border-radius:999px;
background:#fff;
color:#333439;
font:inherit;
font-size:10px;
font-weight:800;
white-space:nowrap;
box-shadow:0 2px 8px rgba(0,0,0,.035);
}
.ppvc2__quick-position:hover{
border-color:#2f3034;
transform:translateY(-1px);
}
@media(max-width:560px){
.ppvc2__quick-positions{
bottom:72px !important;
max-width:calc(100% - 20px) !important;
}
.ppvc2__quick-positions-label{
display:none !important;
}
.ppvc2__quick-positions-front,
.ppvc2__quick-positions-back{
gap:4px !important;
padding:3px !important;
max-width:100% !important;
}
.ppvc2__quick-position{
min-height:32px !important;
padding:0 10px !important;
font-size:9px !important;
}
.ppvc2__area-hint{
bottom:116px !important;
}
.ppvc2__color-preview{
bottom:140px !important;
}
}
@media(max-width:390px){
.ppvc2__quick-position{
padding:0 8px !important;
font-size:8.5px !important;
}
}
/* ============================================================
V6.7 — LIMITI REALI AREA DI STAMPA
============================================================ */
.ppvc2__print-zone{
border:1px dashed rgba(45,47,52,.24) !important;
background:rgba(255,255,255,.025) !important;
}
.ppvc2__print-zone.is-active{
border-color:rgba(45,47,52,.34) !important;
}
.ppvc2__print-zone-name{
opacity:.42 !important;
}
/* ============================================================
V6.8 — MOBILE PREMIUM / PIXEL POLISH
============================================================ */
@media(max-width:560px){
/* ---- viewport / canvas ---- */
.ppvc2,
.ppvc2__modal{
--ppvc-mobile-safe-bottom:max(12px,env(safe-area-inset-bottom));
}
.ppvc2__modal{
background:#f4f4f5 !important;
}
.ppvc2__canvas{
padding-top:70px !important;
padding-bottom:126px !important;
}
.ppvc2__stage{
min-height:calc(100dvh - 196px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:8px 12px 18px !important;
}
.ppvc2__product-wrap{
width:min(94vw,560px) !important;
height:auto !important;
max-height:calc(100dvh - 250px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
transition:
transform .28s cubic-bezier(.2,.8,.2,1),
opacity .22s ease !important;
will-change:transform,opacity;
}
.ppvc2__product-image{
width:auto !important;
max-width:94vw !important;
max-height:calc(100dvh - 255px) !important;
object-fit:contain !important;
transform-origin:center center;
transition:
transform .28s cubic-bezier(.2,.8,.2,1),
filter .28s ease,
opacity .22s ease !important;
}
.ppvc2__stage.is-switching-view .ppvc2__product-wrap{
transform:scale(.985) translateY(2px) !important;
opacity:.92 !important;
}
/* ---- topbar ---- */
.ppvc2__topbar{
top:0 !important;
height:68px !important;
padding:
max(8px,env(safe-area-inset-top))
14px
8px !important;
grid-template-columns:52px 1fr auto !important;
gap:8px !important;
background:rgba(247,247,248,.88) !important;
border-bottom:1px solid rgba(0,0,0,.045) !important;
box-shadow:0 6px 24px rgba(0,0,0,.035) !important;
backdrop-filter:blur(18px) saturate(1.15) !important;
-webkit-backdrop-filter:blur(18px) saturate(1.15) !important;
}
.ppvc2__close{
width:50px !important;
height:50px !important;
border-radius:50% !important;
background:rgba(255,255,255,.92) !important;
box-shadow:0 8px 24px rgba(0,0,0,.055) !important;
transition:
transform .18s ease,
box-shadow .18s ease !important;
}
.ppvc2__close:active{
transform:scale(.94) !important;
}
.ppvc2__top-right{
gap:8px !important;
}
.ppvc2__live-price{
min-width:108px !important;
height:50px !important;
min-height:50px !important;
padding:7px 12px !important;
border-radius:17px !important;
background:rgba(255,255,255,.94) !important;
border:1px solid rgba(0,0,0,.045) !important;
box-shadow:0 8px 22px rgba(0,0,0,.045) !important;
}
.ppvc2__live-price-label{
font-size:7px !important;
letter-spacing:.10em !important;
}
.ppvc2__live-price-value{
font-size:14px !important;
letter-spacing:-.025em !important;
}
.ppvc2__order-button{
height:50px !important;
min-height:50px !important;
min-width:132px !important;
padding:0 20px !important;
border-radius:999px !important;
font-size:15px !important;
font-weight:850 !important;
box-shadow:0 8px 22px rgba(24,25,28,.13) !important;
transition:
transform .18s ease,
box-shadow .18s ease,
background .18s ease !important;
}
.ppvc2__order-button:active{
transform:scale(.97) !important;
box-shadow:0 4px 14px rgba(24,25,28,.10) !important;
}
/* ---- print area / logo ---- */
.ppvc2__print-zone{
border:1px dashed rgba(48,49,54,.22) !important;
border-radius:4px !important;
transition:
border-color .18s ease,
background .18s ease,
opacity .18s ease !important;
}
.ppvc2__print-zone.is-active{
border-color:rgba(48,49,54,.35) !important;
background:rgba(255,255,255,.018) !important;
}
.ppvc2__logo-layer{
transition:
opacity .16s ease,
filter .16s ease !important;
}
.ppvc2__selection{
transition:
box-shadow .16s ease,
border-color .16s ease !important;
}
/* ---- remove floating arrows on small screens: thumbnails are enough ---- */
.ppvc2__nav-arrow{
width:50px !important;
height:50px !important;
border-radius:50% !important;
background:rgba(255,255,255,.90) !important;
box-shadow:0 8px 24px rgba(0,0,0,.06) !important;
top:auto !important;
bottom:164px !important;
transform:none !important;
}
.ppvc2__nav-arrow--prev{
left:16px !important;
}
.ppvc2__nav-arrow--next{
right:16px !important;
}
.ppvc2__nav-arrow:active{
transform:scale(.94) !important;
}
/* ---- area hint ---- */
.ppvc2__area-hint{
bottom:148px !important;
padding:8px 13px !important;
border-radius:999px !important;
background:rgba(255,255,255,.88) !important;
box-shadow:0 5px 18px rgba(0,0,0,.045) !important;
backdrop-filter:blur(10px) !important;
-webkit-backdrop-filter:blur(10px) !important;
font-size:10px !important;
}
/* ---- quick positions: centered, never hidden behind dock ---- */
.ppvc2__quick-positions{
left:50% !important;
right:auto !important;
bottom:82px !important;
transform:translateX(-50%) !important;
width:auto !important;
max-width:calc(100vw - 28px) !important;
z-index:45 !important;
}
.ppvc2__quick-positions-front,
.ppvc2__quick-positions-back{
max-width:100% !important;
padding:4px !important;
gap:4px !important;
border:1px solid rgba(0,0,0,.045) !important;
background:rgba(255,255,255,.92) !important;
box-shadow:0 9px 26px rgba(0,0,0,.055) !important;
backdrop-filter:blur(14px) !important;
-webkit-backdrop-filter:blur(14px) !important;
}
.ppvc2__quick-position{
min-height:34px !important;
padding:0 10px !important;
font-size:9px !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
transition:
transform .16s ease,
background .16s ease,
color .16s ease !important;
}
.ppvc2__quick-position:hover,
.ppvc2__quick-position.is-selected{
background:#f1f1f3 !important;
transform:none !important;
}
.ppvc2__quick-position.is-pulsing{
animation:ppvcQuickTap .38s cubic-bezier(.2,.8,.2,1);
}
@keyframes ppvcQuickTap{
0%{transform:scale(1)}
45%{transform:scale(.94)}
100%{transform:scale(1)}
}
/* ---- bottom dock: three clean columns ---- */
.ppvc2__mobile-dock{
position:fixed !important;
left:12px !important;
right:12px !important;
bottom:var(--ppvc-mobile-safe-bottom) !important;
width:auto !important;
height:66px !important;
z-index:60 !important;
display:grid !important;
grid-template-columns:minmax(92px,1fr) 132px minmax(112px,1fr) !important;
align-items:center !important;
gap:8px !important;
padding:6px !important;
border:1px solid rgba(0,0,0,.045) !important;
border-radius:24px !important;
background:rgba(255,255,255,.91) !important;
box-shadow:0 14px 40px rgba(0,0,0,.09) !important;
backdrop-filter:blur(18px) saturate(1.12) !important;
-webkit-backdrop-filter:blur(18px) saturate(1.12) !important;
}
.ppvc2__mobile-colors,
.ppvc2__mobile-view,
.ppvc2__mobile-add-logo{
min-width:0 !important;
}
.ppvc2__mobile-colors{
height:54px !important;
border-radius:18px !important;
background:transparent !important;
padding:0 10px !important;
}
.ppvc2__mobile-colors-label{
font-size:9px !important;
letter-spacing:.08em !important;
}
.ppvc2__mobile-view{
width:132px !important;
height:54px !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
align-items:center !important;
justify-items:center !important;
padding:4px !important;
border-radius:18px !important;
background:#ededf0 !important;
overflow:hidden !important;
}
.ppvc2__mobile-view button,
.ppvc2__mobile-view-option{
width:58px !important;
height:46px !important;
min-width:58px !important;
border-radius:15px !important;
transition:
transform .18s ease,
background .18s ease,
box-shadow .18s ease !important;
}
.ppvc2__mobile-view button.is-active,
.ppvc2__mobile-view-option.is-active{
background:#fff !important;
box-shadow:0 5px 14px rgba(0,0,0,.08) !important;
transform:scale(1.02) !important;
}
.ppvc2__mobile-view img{
max-width:40px !important;
max-height:40px !important;
object-fit:contain !important;
}
.ppvc2__mobile-add-logo{
height:54px !important;
min-height:54px !important;
border-radius:18px !important;
padding:0 14px !important;
background:#fff !important;
box-shadow:none !important;
font-size:13px !important;
font-weight:850 !important;
white-space:nowrap !important;
transition:
transform .18s ease,
background .18s ease !important;
}
.ppvc2__mobile-add-logo:active,
.ppvc2__mobile-add-logo.is-pulsing{
transform:scale(.97) !important;
background:#f7f7f8 !important;
}
/* ---- color sheet ---- */
.ppvc2__mobile-color-sheet{
border-radius:26px 26px 0 0 !important;
box-shadow:0 -18px 50px rgba(0,0,0,.12) !important;
}
/* ---- logo panel ---- */
.ppvc2__logo-panel{
border-radius:26px 26px 0 0 !important;
box-shadow:0 -18px 50px rgba(0,0,0,.12) !important;
}
}
/* Smaller iPhones */
@media(max-width:390px){
.ppvc2__topbar{
grid-template-columns:46px 1fr auto !important;
padding-inline:10px !important;
}
.ppvc2__close{
width:44px !important;
height:44px !important;
}
.ppvc2__live-price{
min-width:94px !important;
height:46px !important;
min-height:46px !important;
padding:6px 9px !important;
}
.ppvc2__live-price-value{
font-size:12.5px !important;
}
.ppvc2__order-button{
min-width:112px !important;
height:46px !important;
min-height:46px !important;
padding-inline:16px !important;
font-size:14px !important;
}
.ppvc2__mobile-dock{
left:8px !important;
right:8px !important;
grid-template-columns:minmax(82px,1fr) 112px minmax(104px,1fr) !important;
gap:5px !important;
padding:5px !important;
}
.ppvc2__mobile-view{
width:112px !important;
}
.ppvc2__mobile-view button,
.ppvc2__mobile-view-option{
width:49px !important;
min-width:49px !important;
}
.ppvc2__mobile-add-logo{
padding-inline:10px !important;
font-size:12px !important;
}
.ppvc2__quick-position{
padding-inline:8px !important;
font-size:8.5px !important;
}
}
/* Respect users who disable animations */
@media(prefers-reduced-motion:reduce){
.ppvc2 *,
.ppvc2 *::before,
.ppvc2 *::after{
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}
}
/* ============================================================
V6.9 — MOBILE PRECISION PASS
Screenshot-driven refinements
============================================================ */
@media(max-width:560px){
/* More useful vertical composition: product slightly larger/lower,
less dead space between product and dock. */
.ppvc2__canvas{
padding-top:68px !important;
padding-bottom:104px !important;
}
.ppvc2__stage{
min-height:calc(100dvh - 172px) !important;
padding:0 10px 8px !important;
align-items:center !important;
}
.ppvc2__product-wrap{
width:min(98vw,610px) !important;
max-height:calc(100dvh - 215px) !important;
transform:translateY(8px);
}
.ppvc2__product-image{
max-width:98vw !important;
max-height:calc(100dvh - 220px) !important;
}
/* The free print-area frame should visually hug the printable torso,
not read like a huge rectangle around the garment. */
.ppvc2__print-zone{
border-color:rgba(46,47,52,.20) !important;
background:transparent !important;
}
.ppvc2__print-zone.is-active{
border-color:rgba(46,47,52,.30) !important;
}
/* One zone per view now: hide the redundant area-selection hint. */
.ppvc2__area-hint{
display:none !important;
}
/* Bring navigation closer to the actual product. */
.ppvc2__nav-arrow{
bottom:auto !important;
top:62% !important;
transform:translateY(-50%) !important;
width:48px !important;
height:48px !important;
z-index:34 !important;
}
.ppvc2__nav-arrow--prev{
left:14px !important;
}
.ppvc2__nav-arrow--next{
right:14px !important;
}
.ppvc2__nav-arrow:active{
transform:translateY(-50%) scale(.94) !important;
}
/* Quick-position presets always sit clearly above the dock. */
.ppvc2__quick-positions{
bottom:86px !important;
z-index:70 !important;
}
.ppvc2__quick-positions-front,
.ppvc2__quick-positions-back{
background:rgba(255,255,255,.95) !important;
box-shadow:0 8px 24px rgba(0,0,0,.07) !important;
}
.ppvc2__quick-position{
color:#4a4b50 !important;
}
.ppvc2__quick-position.is-selected{
background:#222327 !important;
color:#fff !important;
}
/* Bottom dock tighter and more balanced */
.ppvc2__mobile-dock{
left:14px !important;
right:14px !important;
height:62px !important;
grid-template-columns:minmax(90px,1fr) 126px minmax(116px,1fr) !important;
gap:6px !important;
padding:5px !important;
border-radius:22px !important;
}
.ppvc2__mobile-colors,
.ppvc2__mobile-view,
.ppvc2__mobile-add-logo{
height:52px !important;
min-height:52px !important;
}
.ppvc2__mobile-view{
width:126px !important;
}
.ppvc2__mobile-view button,
.ppvc2__mobile-view-option{
width:55px !important;
min-width:55px !important;
height:44px !important;
}
.ppvc2__mobile-add-logo{
border-radius:17px !important;
font-size:12.5px !important;
}
/* Softer topbar, slightly less bulky */
.ppvc2__topbar{
height:64px !important;
}
.ppvc2__close{
width:46px !important;
height:46px !important;
}
.ppvc2__live-price{
height:46px !important;
min-height:46px !important;
min-width:102px !important;
}
.ppvc2__order-button{
height:46px !important;
min-height:46px !important;
min-width:126px !important;
}
}
@media(max-width:390px){
.ppvc2__product-wrap{
width:100vw !important;
}
.ppvc2__mobile-dock{
left:8px !important;
right:8px !important;
grid-template-columns:minmax(80px,1fr) 108px minmax(102px,1fr) !important;
}
.ppvc2__mobile-view{
width:108px !important;
}
.ppvc2__quick-positions{
max-width:calc(100vw - 16px) !important;
}
}
/* ============================================================
V6.9.1 — QUICK POSITION PILLS ABOVE MOBILE DOCK
============================================================ */
@media(max-width:560px){
/* Keep the quick-position helper clearly ABOVE the bottom dock */
.ppvc2__quick-positions{
left:50% !important;
right:auto !important;
bottom:108px !important;
transform:translateX(-50%) !important;
width:min(calc(100vw - 28px), 420px) !important;
max-width:min(calc(100vw - 28px), 420px) !important;
display:grid !important;
justify-items:center !important;
gap:8px !important;
z-index:140 !important;
pointer-events:none !important;
}
.ppvc2__quick-positions-front,
.ppvc2__quick-positions-back{
width:100% !important;
max-width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex-wrap:nowrap !important;
gap:6px !important;
padding:6px !important;
border:1px solid rgba(0,0,0,.05) !important;
border-radius:22px !important;
background:rgba(255,255,255,.97) !important;
box-shadow:0 12px 28px rgba(0,0,0,.10) !important;
backdrop-filter:blur(16px) !important;
pointer-events:auto !important;
}
.ppvc2__quick-position{
flex:1 1 0 !important;
min-width:0 !important;
min-height:42px !important;
padding:0 10px !important;
font-size:9px !important;
font-weight:850 !important;
text-align:center !important;
justify-content:center !important;
display:inline-flex !important;
align-items:center !important;
letter-spacing:-0.01em !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
box-shadow:none !important;
border:1px solid transparent !important;
background:transparent !important;
color:#4a4b50 !important;
}
.ppvc2__quick-position.is-selected{
background:#222327 !important;
color:#fff !important;
box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}
/* Make sure the mobile dock sits BELOW and never visually covers the pills */
.ppvc2__mobile-dock{
z-index:100 !important;
overflow:visible !important;
}
}
@media(max-width:390px){
.ppvc2__quick-positions{
width:min(calc(100vw - 16px), 360px) !important;
max-width:min(calc(100vw - 16px), 360px) !important;
bottom:104px !important;
}
.ppvc2__quick-position{
min-height:40px !important;
padding:0 8px !important;
font-size:8.5px !important;
}
}
/* ============================================================
V6.9.2 — QUICK POSITION BAR PIÙ IN ALTO SU MOBILE
============================================================ */
@media(max-width:560px){
.ppvc2__quick-positions{
position:fixed !important;
left:50% !important;
right:auto !important;
bottom:188px !important;
transform:translateX(-50%) !important;
width:min(calc(100vw - 32px),420px) !important;
max-width:min(calc(100vw - 32px),420px) !important;
z-index:2147482000 !important;
}
.ppvc2__quick-positions-front,
.ppvc2__quick-positions-back{
margin:0 !important;
}
}
@media(max-width:390px){
.ppvc2__quick-positions{
bottom:180px !important;
width:min(calc(100vw - 20px),360px) !important;
max-width:min(calc(100vw - 20px),360px) !important;
}
}
/* ============================================================
V6.9.3 — POSIZIONI RAPIDE + RIPRISTINO DOCK MOBILE
============================================================ */
@media(max-width:560px){
/* Barra rapida più in basso, ma ancora separata dal dock */
.ppvc2__quick-positions{
position:fixed !important;
left:50% !important;
right:auto !important;
bottom:136px !important;
transform:translateX(-50%) !important;
width:min(calc(100vw - 28px),420px) !important;
max-width:min(calc(100vw - 28px),420px) !important;
z-index:90 !important;
pointer-events:none !important;
}
.ppvc2__quick-positions-front,
.ppvc2__quick-positions-back{
width:100% !important;
max-width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:4px !important;
padding:4px !important;
margin:0 !important;
border:1px solid rgba(0,0,0,.045) !important;
border-radius:999px !important;
background:rgba(255,255,255,.95) !important;
box-shadow:0 9px 26px rgba(0,0,0,.055) !important;
backdrop-filter:blur(14px) !important;
-webkit-backdrop-filter:blur(14px) !important;
pointer-events:auto !important;
}
.ppvc2__quick-position{
flex:1 1 0 !important;
min-width:0 !important;
min-height:34px !important;
padding:0 10px !important;
border:0 !important;
border-radius:999px !important;
background:transparent !important;
box-shadow:none !important;
color:#4a4b50 !important;
font-size:9px !important;
font-weight:800 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.ppvc2__quick-position.is-selected{
background:#222327 !important;
color:#fff !important;
box-shadow:none !important;
}
/* RIPRISTINO COMPLETO DEL DOCK V6.9 */
.ppvc2__mobile-dock{
position:fixed !important;
left:14px !important;
right:14px !important;
bottom:var(--ppvc-mobile-safe-bottom) !important;
width:auto !important;
height:62px !important;
z-index:60 !important;
display:grid !important;
grid-template-columns:minmax(90px,1fr) 126px minmax(116px,1fr) !important;
align-items:center !important;
gap:6px !important;
padding:5px !important;
overflow:visible !important;
border:1px solid rgba(0,0,0,.045) !important;
border-radius:22px !important;
background:rgba(255,255,255,.91) !important;
box-shadow:0 14px 40px rgba(0,0,0,.09) !important;
backdrop-filter:blur(18px) saturate(1.12) !important;
-webkit-backdrop-filter:blur(18px) saturate(1.12) !important;
}
.ppvc2__mobile-colors,
.ppvc2__mobile-view,
.ppvc2__mobile-add-logo{
height:52px !important;
min-height:52px !important;
min-width:0 !important;
}
.ppvc2__mobile-colors{
border-radius:18px !important;
background:transparent !important;
padding:0 10px !important;
}
.ppvc2__mobile-view{
width:126px !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
align-items:center !important;
justify-items:center !important;
padding:4px !important;
border-radius:18px !important;
background:#ededf0 !important;
overflow:hidden !important;
}
.ppvc2__mobile-view button,
.ppvc2__mobile-view-option{
width:55px !important;
min-width:55px !important;
height:44px !important;
border-radius:15px !important;
}
.ppvc2__mobile-view button.is-active,
.ppvc2__mobile-view-option.is-active{
background:#fff !important;
box-shadow:0 5px 14px rgba(0,0,0,.08) !important;
transform:scale(1.02) !important;
}
.ppvc2__mobile-view img{
max-width:40px !important;
max-height:40px !important;
object-fit:contain !important;
}
.ppvc2__mobile-add-logo{
border-radius:17px !important;
padding:0 14px !important;
background:#fff !important;
box-shadow:none !important;
font-size:12.5px !important;
font-weight:850 !important;
white-space:nowrap !important;
}
}
@media(max-width:390px){
.ppvc2__quick-positions{
bottom:130px !important;
width:min(calc(100vw - 16px),360px) !important;
max-width:min(calc(100vw - 16px),360px) !important;
}
.ppvc2__quick-position{
min-height:32px !important;
padding:0 8px !important;
font-size:8.5px !important;
}
.ppvc2__mobile-dock{
left:8px !important;
right:8px !important;
grid-template-columns:minmax(80px,1fr) 108px minmax(102px,1fr) !important;
gap:5px !important;
}
.ppvc2__mobile-view{
width:108px !important;
}
.ppvc2__mobile-view button,
.ppvc2__mobile-view-option{
width:49px !important;
min-width:49px !important;
}
.ppvc2__mobile-add-logo{
padding-inline:10px !important;
font-size:12px !important;
}
}
/* ============================================================
V6.9.4 — RESTORE BOTTOM CONTROLS AS SEPARATE FLOATING PILLS
============================================================ */
@media(max-width:560px){
/* The dock itself becomes transparent again. Each control is its own pill. */
.ppvc2__mobile-dock{
position:fixed !important;
left:18px !important;
right:18px !important;
bottom:var(--ppvc-mobile-safe-bottom) !important;
width:auto !important;
height:64px !important;
z-index:60 !important;
display:grid !important;
grid-template-columns:minmax(92px,1fr) 124px minmax(126px,1fr) !important;
align-items:center !important;
gap:10px !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
overflow:visible !important;
}
.ppvc2__mobile-dock-col{
min-width:0 !important;
height:64px !important;
padding:0 !important;
margin:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* COLORS — independent white card */
.ppvc2__mobile-dock-col--colors{
display:flex !important;
align-items:center !important;
justify-content:stretch !important;
}
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-colors{
width:100% !important;
height:60px !important;
min-height:60px !important;
padding:0 16px !important;
border:1px solid rgba(0,0,0,.05) !important;
border-radius:22px !important;
background:rgba(255,255,255,.96) !important;
box-shadow:0 10px 28px rgba(0,0,0,.07) !important;
backdrop-filter:blur(14px) !important;
-webkit-backdrop-filter:blur(14px) !important;
}
.ppvc2__mobile-color-trigger-main{
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:8px !important;
}
.ppvc2__mobile-color-trigger-label,
.ppvc2__mobile-colors-label{
font-size:10px !important;
font-weight:850 !important;
letter-spacing:.10em !important;
text-transform:uppercase !important;
}
/* FRONT / BACK — compact neutral pill in the center */
.ppvc2__mobile-dock-col--views{
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.ppvc2__mobile-view{
width:124px !important;
height:60px !important;
min-height:60px !important;
padding:4px !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
align-items:center !important;
justify-items:center !important;
gap:2px !important;
border:0 !important;
border-radius:22px !important;
background:rgba(226,226,229,.92) !important;
box-shadow:0 8px 24px rgba(0,0,0,.055) !important;
overflow:hidden !important;
}
.ppvc2__mobile-view button,
.ppvc2__mobile-view-option{
width:54px !important;
min-width:54px !important;
height:52px !important;
min-height:52px !important;
padding:0 !important;
border:0 !important;
border-radius:18px !important;
background:transparent !important;
box-shadow:none !important;
}
.ppvc2__mobile-view button.is-active,
.ppvc2__mobile-view-option.is-active{
background:#fff !important;
box-shadow:0 5px 14px rgba(0,0,0,.08) !important;
transform:none !important;
}
.ppvc2__mobile-view img{
max-width:42px !important;
max-height:42px !important;
object-fit:contain !important;
}
/* INSERT LOGO — independent white card */
.ppvc2__mobile-dock-col--logo{
display:flex !important;
align-items:center !important;
justify-content:stretch !important;
}
.ppvc2__mobile-add-logo{
width:100% !important;
height:60px !important;
min-height:60px !important;
padding:0 18px !important;
border:1px solid rgba(0,0,0,.05) !important;
border-radius:22px !important;
background:rgba(255,255,255,.96) !important;
box-shadow:0 10px 28px rgba(0,0,0,.07) !important;
font-size:13px !important;
font-weight:850 !important;
white-space:nowrap !important;
}
}
@media(max-width:390px){
.ppvc2__mobile-dock{
left:10px !important;
right:10px !important;
grid-template-columns:minmax(82px,1fr) 110px minmax(108px,1fr) !important;
gap:7px !important;
}
.ppvc2__mobile-view{
width:110px !important;
}
.ppvc2__mobile-view button,
.ppvc2__mobile-view-option{
width:48px !important;
min-width:48px !important;
}
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-colors,
.ppvc2__mobile-add-logo{
height:56px !important;
min-height:56px !important;
border-radius:20px !important;
}
.ppvc2__mobile-view{
height:56px !important;
min-height:56px !important;
border-radius:20px !important;
}
.ppvc2__mobile-view button,
.ppvc2__mobile-view-option{
height:48px !important;
min-height:48px !important;
border-radius:16px !important;
}
.ppvc2__mobile-add-logo{
font-size:12px !important;
padding-inline:12px !important;
}
}
/* ============================================================
V6.9.5 — POSIZIONE RAPIDA COME MOCKUP RIFERIMENTO
============================================================ */
@media(max-width:560px){
/* gruppo posizione rapida: label sopra + tre pillole separate */
.ppvc2__quick-positions{
position:fixed !important;
left:50% !important;
right:auto !important;
bottom:148px !important;
transform:translateX(-50%) !important;
width:min(calc(100vw - 32px),420px) !important;
max-width:min(calc(100vw - 32px),420px) !important;
display:grid !important;
justify-items:center !important;
gap:8px !important;
z-index:90 !important;
pointer-events:none !important;
}
.ppvc2__quick-positions-label{
display:block !important;
margin:0 !important;
color:#8f9095 !important;
font-size:9px !important;
line-height:1 !important;
font-weight:900 !important;
letter-spacing:.10em !important;
text-transform:uppercase !important;
}
.ppvc2__quick-positions-front,
.ppvc2__quick-positions-back{
width:100% !important;
max-width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
pointer-events:auto !important;
}
.ppvc2__quick-position{
flex:1 1 0 !important;
min-width:0 !important;
min-height:44px !important;
height:44px !important;
padding:0 12px !important;
border:1px solid rgba(0,0,0,.07) !important;
border-radius:999px !important;
background:rgba(255,255,255,.98) !important;
color:#34353a !important;
box-shadow:0 6px 16px rgba(0,0,0,.055) !important;
font-size:10px !important;
font-weight:850 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
transition:
transform .16s ease,
background .16s ease,
color .16s ease,
box-shadow .16s ease !important;
}
.ppvc2__quick-position.is-selected{
background:#222327 !important;
color:#fff !important;
border-color:#222327 !important;
box-shadow:0 8px 18px rgba(0,0,0,.14) !important;
}
.ppvc2__quick-position:active{
transform:scale(.97) !important;
}
/* il selettore fronte/retro resta subito sotto, centrato */
.ppvc2__mobile-dock-col--views{
position:relative !important;
z-index:75 !important;
}
.ppvc2__mobile-view{
background:rgba(221,221,224,.94) !important;
border-radius:999px !important;
padding:4px !important;
box-shadow:none !important;
}
.ppvc2__mobile-view button,
.ppvc2__mobile-view-option{
border-radius:999px !important;
}
.ppvc2__mobile-view button.is-active,
.ppvc2__mobile-view-option.is-active{
background:#fff !important;
box-shadow:0 5px 14px rgba(0,0,0,.08) !important;
}
}
@media(max-width:390px){
.ppvc2__quick-positions{
bottom:142px !important;
width:min(calc(100vw - 20px),360px) !important;
max-width:min(calc(100vw - 20px),360px) !important;
}
.ppvc2__quick-positions-front,
.ppvc2__quick-positions-back{
gap:6px !important;
}
.ppvc2__quick-position{
min-height:42px !important;
height:42px !important;
padding:0 9px !important;
font-size:9px !important;
}
}
/* ============================================================
V6.9.6 — MATCH RIFERIMENTO POSIZIONE RAPIDA
============================================================ */
@media(max-width:560px){
/* LABEL + CONTENITORE CENTRALE, COME NEL RIFERIMENTO */
.ppvc2__quick-positions{
position:fixed !important;
left:50% !important;
right:auto !important;
bottom:150px !important;
transform:translateX(-50%) !important;
width:min(calc(100vw - 118px),430px) !important;
max-width:min(calc(100vw - 118px),430px) !important;
display:grid !important;
justify-items:center !important;
gap:9px !important;
z-index:90 !important;
pointer-events:none !important;
}
.ppvc2__quick-positions-label{
display:block !important;
margin:0 !important;
color:#8d8e93 !important;
font-size:9px !important;
line-height:1 !important;
font-weight:900 !important;
letter-spacing:.11em !important;
text-transform:uppercase !important;
}
/* UN'UNICA PILLOLA ESTERNA BIANCA */
.ppvc2__quick-positions-front,
.ppvc2__quick-positions-back{
width:100% !important;
max-width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
padding:6px !important;
margin:0 !important;
border:1px solid rgba(0,0,0,.045) !important;
border-radius:999px !important;
background:rgba(255,255,255,.96) !important;
box-shadow:0 9px 24px rgba(0,0,0,.065) !important;
backdrop-filter:blur(14px) !important;
-webkit-backdrop-filter:blur(14px) !important;
pointer-events:auto !important;
}
/* TRE PULSANTI INTERNI, PIÙ PICCOLI E NON A TUTTA PAGINA */
.ppvc2__quick-position{
flex:1 1 0 !important;
min-width:0 !important;
height:42px !important;
min-height:42px !important;
padding:0 10px !important;
border:1px solid rgba(0,0,0,.07) !important;
border-radius:999px !important;
background:#fff !important;
color:#34353a !important;
box-shadow:0 2px 8px rgba(0,0,0,.035) !important;
font-size:10px !important;
font-weight:850 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
transform:none !important;
}
/* NEL RIFERIMENTO NON C'È IL BOTTONE NERO */
.ppvc2__quick-position.is-selected,
.ppvc2__quick-position:hover,
.ppvc2__quick-position:focus{
background:#fff !important;
color:#34353a !important;
border-color:rgba(0,0,0,.08) !important;
box-shadow:0 2px 8px rgba(0,0,0,.04) !important;
transform:none !important;
}
.ppvc2__quick-position:active{
transform:scale(.97) !important;
}
/* IL SELETTORE FRONTE/RETRO DEVE LEGGERSI COME PILLOLA GRIGIA CENTRATA */
.ppvc2__mobile-dock-col--views{
position:fixed !important;
left:50% !important;
bottom:74px !important;
transform:translateX(-50%) !important;
width:132px !important;
height:64px !important;
z-index:86 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
pointer-events:auto !important;
}
.ppvc2__mobile-view{
width:132px !important;
height:64px !important;
min-height:64px !important;
padding:5px !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
align-items:center !important;
justify-items:center !important;
gap:2px !important;
border:0 !important;
border-radius:999px !important;
background:rgba(216,216,220,.96) !important;
box-shadow:none !important;
overflow:hidden !important;
}
.ppvc2__mobile-view button,
.ppvc2__mobile-view-option{
width:57px !important;
min-width:57px !important;
height:54px !important;
min-height:54px !important;
padding:0 !important;
border:0 !important;
border-radius:999px !important;
background:transparent !important;
box-shadow:none !important;
transform:none !important;
}
.ppvc2__mobile-view button.is-active,
.ppvc2__mobile-view-option.is-active{
background:#fff !important;
box-shadow:0 5px 14px rgba(0,0,0,.08) !important;
transform:none !important;
}
.ppvc2__mobile-view img{
max-width:43px !important;
max-height:43px !important;
object-fit:contain !important;
}
/* Colori e Inserisci logo restano ai lati, ma non devono deformare il selettore centrale */
.ppvc2__mobile-dock{
grid-template-columns:minmax(96px,1fr) 132px minmax(128px,1fr) !important;
}
}
@media(max-width:390px){
.ppvc2__quick-positions{
width:min(calc(100vw - 70px),350px) !important;
max-width:min(calc(100vw - 70px),350px) !important;
bottom:146px !important;
}
.ppvc2__quick-position{
height:40px !important;
min-height:40px !important;
padding:0 8px !important;
font-size:8.8px !important;
}
.ppvc2__mobile-dock-col--views{
bottom:72px !important;
width:118px !important;
}
.ppvc2__mobile-view{
width:118px !important;
}
.ppvc2__mobile-view button,
.ppvc2__mobile-view-option{
width:50px !important;
min-width:50px !important;
}
}
/* ============================================================
V6.9.7 — MOBILE UGUALE AL RIFERIMENTO UTENTE
============================================================ */
@media (max-width:560px){
/* Barra posizione rapida: centrata, più stretta, stessa logica del riferimento */
.ppvc2__quick-positions{
position:fixed !important;
left:50% !important;
right:auto !important;
bottom:128px !important;
transform:translateX(-50%) !important;
width:min(calc(100vw - 92px), 470px) !important;
max-width:min(calc(100vw - 92px), 470px) !important;
display:grid !important;
justify-items:center !important;
gap:10px !important;
z-index:92 !important;
pointer-events:none !important;
}
.ppvc2__quick-positions-label{
margin:0 !important;
font-size:9px !important;
line-height:1 !important;
font-weight:900 !important;
letter-spacing:.14em !important;
text-transform:uppercase !important;
color:#8d8f96 !important;
}
.ppvc2__quick-positions-front,
.ppvc2__quick-positions-back{
width:100% !important;
max-width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
padding:6px !important;
border:1px solid rgba(0,0,0,.05) !important;
border-radius:999px !important;
background:rgba(255,255,255,.98) !important;
box-shadow:0 10px 26px rgba(0,0,0,.055) !important;
backdrop-filter:blur(14px) !important;
-webkit-backdrop-filter:blur(14px) !important;
pointer-events:auto !important;
}
.ppvc2__quick-position{
flex:1 1 0 !important;
min-width:0 !important;
height:44px !important;
min-height:44px !important;
padding:0 12px !important;
border:1px solid rgba(0,0,0,.07) !important;
border-radius:999px !important;
background:#fff !important;
color:#303238 !important;
box-shadow:0 2px 8px rgba(0,0,0,.03) !important;
font-size:10px !important;
font-weight:850 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
transform:none !important;
}
.ppvc2__quick-position.is-selected,
.ppvc2__quick-position:hover,
.ppvc2__quick-position:focus{
background:#fff !important;
color:#303238 !important;
border-color:rgba(0,0,0,.08) !important;
box-shadow:0 3px 10px rgba(0,0,0,.04) !important;
transform:none !important;
}
/* Dock inferiore: colori a sinistra, fronte/retro centrato, logo a destra */
.ppvc2__mobile-dock{
position:fixed !important;
left:22px !important;
right:22px !important;
bottom:26px !important;
width:auto !important;
max-width:none !important;
padding:0 !important;
margin:0 !important;
background:transparent !important;
box-shadow:none !important;
border:none !important;
display:grid !important;
grid-template-columns:108px 180px minmax(150px,1fr) !important;
gap:14px !important;
align-items:center !important;
z-index:90 !important;
}
.ppvc2__mobile-dock-col{
min-width:0 !important;
}
.ppvc2__mobile-dock-col--colors{
width:108px !important;
justify-self:start !important;
}
.ppvc2__mobile-dock-col--views{
position:relative !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:180px !important;
height:auto !important;
justify-self:center !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
z-index:auto !important;
}
.ppvc2__mobile-dock-col--logo{
min-width:150px !important;
justify-self:end !important;
}
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-add-logo{
width:100% !important;
height:72px !important;
min-height:72px !important;
border-radius:28px !important;
border:1px solid rgba(0,0,0,.045) !important;
background:rgba(255,255,255,.98) !important;
box-shadow:0 10px 24px rgba(0,0,0,.055) !important;
backdrop-filter:blur(14px) !important;
-webkit-backdrop-filter:blur(14px) !important;
}
.ppvc2__mobile-color-trigger{
padding:0 18px !important;
justify-content:space-between !important;
}
.ppvc2__mobile-color-trigger-label{
font-size:10px !important;
letter-spacing:.14em !important;
text-transform:uppercase !important;
font-weight:900 !important;
}
.ppvc2__mobile-color-trigger-current,
.ppvc2__mobile-color-trigger-count{
display:none !important;
}
.ppvc2__mobile-color-trigger-arrow{
font-size:18px !important;
line-height:1 !important;
transform:none !important;
}
.ppvc2__mobile-add-logo{
padding:0 26px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:15px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
/* Selettore fronte/retro, identico come peso visivo al riferimento */
.ppvc2__mobile-view-row{
width:180px !important;
height:72px !important;
min-height:72px !important;
padding:6px !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
align-items:center !important;
justify-items:center !important;
gap:0 !important;
border:none !important;
border-radius:999px !important;
background:rgba(215,215,219,.98) !important;
box-shadow:none !important;
overflow:hidden !important;
}
.ppvc2__mobile-view{
width:80px !important;
min-width:80px !important;
height:60px !important;
min-height:60px !important;
padding:0 !important;
border:0 !important;
border-radius:999px !important;
background:transparent !important;
box-shadow:none !important;
transform:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.ppvc2__mobile-view.is-active{
background:#fff !important;
box-shadow:0 5px 14px rgba(0,0,0,.085) !important;
}
.ppvc2__mobile-view-thumb,
.ppvc2__mobile-view img{
width:auto !important;
max-width:44px !important;
max-height:44px !important;
object-fit:contain !important;
}
}
@media (max-width:390px){
.ppvc2__quick-positions{
width:min(calc(100vw - 54px), 360px) !important;
max-width:min(calc(100vw - 54px), 360px) !important;
bottom:124px !important;
}
.ppvc2__quick-position{
height:42px !important;
min-height:42px !important;
font-size:9px !important;
padding:0 10px !important;
}
.ppvc2__mobile-dock{
left:16px !important;
right:16px !important;
bottom:20px !important;
grid-template-columns:96px 160px minmax(126px,1fr) !important;
gap:10px !important;
}
.ppvc2__mobile-dock-col--colors{
width:96px !important;
}
.ppvc2__mobile-dock-col--views{
width:160px !important;
}
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-add-logo,
.ppvc2__mobile-view-row{
height:68px !important;
min-height:68px !important;
}
.ppvc2__mobile-view-row{
width:160px !important;
padding:5px !important;
}
.ppvc2__mobile-view{
width:72px !important;
min-width:72px !important;
height:58px !important;
min-height:58px !important;
}
.ppvc2__mobile-add-logo{
font-size:14px !important;
padding:0 18px !important;
}
}
/* ============================================================
V6.9.8 — MOBILE BOTTOM CONTROLS PIXEL ALIGN
Colori / Fronte-Retro / Inserisci logo indipendenti.
============================================================ */
@media (max-width:560px){
/*
* Il dock non usa più una griglia con colonne che possono
* superare la larghezza del viewport.
* I tre controlli vengono ancorati separatamente.
*/
.ppvc2__mobile-dock{
position:fixed !important;
inset:auto 0 0 0 !important;
width:100vw !important;
height:0 !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
display:block !important;
overflow:visible !important;
pointer-events:none !important;
z-index:90 !important;
}
.ppvc2__mobile-dock-col{
position:fixed !important;
top:auto !important;
height:68px !important;
min-height:68px !important;
margin:0 !important;
padding:0 !important;
pointer-events:auto !important;
}
/* COLORI — allineato al margine sinistro */
.ppvc2__mobile-dock-col--colors{
left:18px !important;
right:auto !important;
bottom:max(18px,env(safe-area-inset-bottom)) !important;
width:104px !important;
min-width:104px !important;
transform:none !important;
}
.ppvc2__mobile-color-trigger{
width:104px !important;
min-width:104px !important;
height:68px !important;
min-height:68px !important;
padding:0 15px !important;
border-radius:25px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
}
.ppvc2__mobile-color-trigger-main{
min-width:0 !important;
flex:1 1 auto !important;
}
.ppvc2__mobile-color-trigger-label{
font-size:10px !important;
letter-spacing:.13em !important;
line-height:1 !important;
}
.ppvc2__mobile-color-trigger-arrow{
flex:0 0 auto !important;
margin-left:5px !important;
font-size:17px !important;
}
/* FRONTE / RETRO — centro geometrico del viewport */
.ppvc2__mobile-dock-col--views{
left:50% !important;
right:auto !important;
bottom:max(18px,env(safe-area-inset-bottom)) !important;
width:122px !important;
min-width:122px !important;
height:68px !important;
transform:translateX(-50%) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.ppvc2__mobile-view-row{
width:122px !important;
min-width:122px !important;
height:68px !important;
min-height:68px !important;
padding:5px !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
align-items:center !important;
justify-items:center !important;
gap:0 !important;
border-radius:999px !important;
background:rgba(216,216,220,.97) !important;
overflow:hidden !important;
}
.ppvc2__mobile-view{
width:55px !important;
min-width:55px !important;
height:58px !important;
min-height:58px !important;
padding:0 !important;
border-radius:999px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.ppvc2__mobile-view.is-active{
background:#fff !important;
box-shadow:0 5px 14px rgba(0,0,0,.08) !important;
}
.ppvc2__mobile-view-thumb,
.ppvc2__mobile-view img{
max-width:42px !important;
max-height:42px !important;
object-fit:contain !important;
}
/* INSERISCI LOGO — allineato al margine destro */
.ppvc2__mobile-dock-col--logo{
left:auto !important;
right:18px !important;
bottom:max(18px,env(safe-area-inset-bottom)) !important;
width:124px !important;
min-width:124px !important;
transform:none !important;
}
.ppvc2__mobile-add-logo{
width:124px !important;
min-width:124px !important;
height:68px !important;
min-height:68px !important;
padding:0 12px !important;
border-radius:25px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:13px !important;
line-height:1 !important;
font-weight:850 !important;
white-space:nowrap !important;
overflow:hidden !important;
}
/*
* Posizione rapida: manteniamo il layout approvato,
* ma la distanza dal gruppo inferiore è fissa e simmetrica.
*/
.ppvc2__quick-positions{
bottom:118px !important;
}
}
/* iPhone / viewport stretti */
@media (max-width:390px){
.ppvc2__mobile-dock-col{
height:64px !important;
min-height:64px !important;
}
.ppvc2__mobile-dock-col--colors{
left:10px !important;
width:92px !important;
min-width:92px !important;
bottom:max(14px,env(safe-area-inset-bottom)) !important;
}
.ppvc2__mobile-color-trigger{
width:92px !important;
min-width:92px !important;
height:64px !important;
min-height:64px !important;
padding:0 12px !important;
border-radius:23px !important;
}
.ppvc2__mobile-dock-col--views{
width:110px !important;
min-width:110px !important;
height:64px !important;
bottom:max(14px,env(safe-area-inset-bottom)) !important;
}
.ppvc2__mobile-view-row{
width:110px !important;
min-width:110px !important;
height:64px !important;
min-height:64px !important;
padding:5px !important;
}
.ppvc2__mobile-view{
width:49px !important;
min-width:49px !important;
height:54px !important;
min-height:54px !important;
}
.ppvc2__mobile-view-thumb,
.ppvc2__mobile-view img{
max-width:39px !important;
max-height:39px !important;
}
.ppvc2__mobile-dock-col--logo{
right:10px !important;
width:112px !important;
min-width:112px !important;
bottom:max(14px,env(safe-area-inset-bottom)) !important;
}
.ppvc2__mobile-add-logo{
width:112px !important;
min-width:112px !important;
height:64px !important;
min-height:64px !important;
padding:0 9px !important;
border-radius:23px !important;
font-size:12px !important;
}
.ppvc2__quick-positions{
bottom:108px !important;
}
}
/* ============================================================
V6.9.9 — MOBILE DOCK LAYOUT FIX
Migliora i pulsanti "Colori" e "Inserisci logo"
evitando sovrapposizioni sui viewport iPhone.
============================================================ */
@media (max-width: 560px){
/* Dock inferiore unico: 3 colonne reali e niente overlap */
.ppvc2__mobile-dock{
position: fixed !important;
left: 12px !important;
right: 12px !important;
bottom: max(16px, env(safe-area-inset-bottom)) !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
display: grid !important;
grid-template-columns: 92px 112px minmax(118px, 1fr) !important;
gap: 12px !important;
align-items: center !important;
justify-items: stretch !important;
overflow: visible !important;
z-index: 90 !important;
pointer-events: none !important;
}
.ppvc2__mobile-dock-col{
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: auto !important;
min-width: 0 !important;
height: 68px !important;
min-height: 68px !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: auto !important;
}
.ppvc2__mobile-dock-col--colors{ grid-column: 1 !important; }
.ppvc2__mobile-dock-col--views{ grid-column: 2 !important; }
.ppvc2__mobile-dock-col--logo{ grid-column: 3 !important; }
/* Bottone Colori */
.ppvc2__mobile-color-trigger{
width: 100% !important;
min-width: 0 !important;
height: 68px !important;
min-height: 68px !important;
padding: 0 14px !important;
border-radius: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.ppvc2__mobile-color-trigger-main{
min-width: 0 !important;
flex: 1 1 auto !important;
}
.ppvc2__mobile-color-trigger-label{
display: block !important;
font-size: 9px !important;
letter-spacing: .18em !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.ppvc2__mobile-color-trigger-arrow{
margin-left: 6px !important;
flex: 0 0 auto !important;
font-size: 16px !important;
}
/* Switch fronte/retro */
.ppvc2__mobile-view-row{
width: 100% !important;
min-width: 0 !important;
height: 68px !important;
min-height: 68px !important;
padding: 5px !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
align-items: center !important;
justify-items: center !important;
border-radius: 999px !important;
background: rgba(216,216,220,.97) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.ppvc2__mobile-view{
width: 49px !important;
min-width: 49px !important;
height: 58px !important;
min-height: 58px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
}
.ppvc2__mobile-view.is-active{
background: #fff !important;
box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
}
.ppvc2__mobile-view-thumb,
.ppvc2__mobile-view img{
max-width: 38px !important;
max-height: 38px !important;
object-fit: contain !important;
}
/* Bottone Inserisci logo */
.ppvc2__mobile-add-logo{
width: 100% !important;
min-width: 0 !important;
height: 68px !important;
min-height: 68px !important;
padding: 0 12px !important;
border-radius: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 13px !important;
font-weight: 850 !important;
line-height: 1.05 !important;
}
/* La barra "Posizione rapida" resta sopra con spazio costante */
.ppvc2__quick-positions{
bottom: 102px !important;
}
}
@media (max-width: 390px){
.ppvc2__mobile-dock{
left: 10px !important;
right: 10px !important;
bottom: max(14px, env(safe-area-inset-bottom)) !important;
grid-template-columns: 86px 104px minmax(104px, 1fr) !important;
gap: 10px !important;
}
.ppvc2__mobile-dock-col{
height: 64px !important;
min-height: 64px !important;
}
.ppvc2__mobile-color-trigger{
height: 64px !important;
min-height: 64px !important;
padding: 0 12px !important;
border-radius: 22px !important;
}
.ppvc2__mobile-color-trigger-label{
font-size: 8.5px !important;
letter-spacing: .16em !important;
}
.ppvc2__mobile-view-row{
height: 64px !important;
min-height: 64px !important;
padding: 5px !important;
}
.ppvc2__mobile-view{
width: 46px !important;
min-width: 46px !important;
height: 54px !important;
min-height: 54px !important;
}
.ppvc2__mobile-view-thumb,
.ppvc2__mobile-view img{
max-width: 35px !important;
max-height: 35px !important;
}
.ppvc2__mobile-add-logo{
height: 64px !important;
min-height: 64px !important;
padding: 0 10px !important;
border-radius: 22px !important;
font-size: 12px !important;
}
.ppvc2__quick-positions{
bottom: 96px !important;
}
}
/* ============================================================
V6.9.11 — RIPRISTINO BASE + SOLO ALLINEAMENTO CONTROLLI BASSI
============================================================ */
@media (max-width:560px){
/*
* RIGA 1 — POSIZIONE RAPIDA
* Mantiene il look approvato, centrato e indipendente.
*/
.ppvc2__quick-positions{
position:fixed !important;
left:50% !important;
right:auto !important;
bottom:112px !important;
transform:translateX(-50%) !important;
width:min(calc(100vw - 62px),352px) !important;
max-width:min(calc(100vw - 62px),352px) !important;
display:grid !important;
justify-items:center !important;
gap:8px !important;
z-index:95 !important;
pointer-events:none !important;
}
.ppvc2__quick-positions-label{
display:block !important;
margin:0 !important;
color:#8d8f95 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
}
.ppvc2__quick-positions-front,
.ppvc2__quick-positions-back{
width:100% !important;
max-width:100% !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
align-items:center !important;
gap:6px !important;
padding:5px !important;
margin:0 !important;
border:1px solid rgba(0,0,0,.045) !important;
border-radius:999px !important;
background:rgba(255,255,255,.97) !important;
box-shadow:0 9px 24px rgba(0,0,0,.055) !important;
pointer-events:auto !important;
box-sizing:border-box !important;
}
.ppvc2__quick-position{
width:100% !important;
min-width:0 !important;
height:44px !important;
min-height:44px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 8px !important;
border:1px solid rgba(0,0,0,.07) !important;
border-radius:999px !important;
background:#fff !important;
color:#34353a !important;
box-shadow:0 2px 8px rgba(0,0,0,.03) !important;
font-size:9.5px !important;
font-weight:850 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.ppvc2__quick-position.is-selected,
.ppvc2__quick-position:hover,
.ppvc2__quick-position:focus{
background:#fff !important;
color:#34353a !important;
transform:none !important;
}
/*
* RIGA 2 — COLORI | FRONTE/RETRO | INSERISCI LOGO
* Una vera griglia che entra SEMPRE nel viewport.
*/
.ppvc2__mobile-dock{
position:fixed !important;
left:14px !important;
right:14px !important;
bottom:max(18px,env(safe-area-inset-bottom)) !important;
width:auto !important;
height:68px !important;
display:grid !important;
grid-template-columns:108px 128px minmax(0,1fr) !important;
align-items:center !important;
gap:8px !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
overflow:visible !important;
z-index:94 !important;
}
.ppvc2__mobile-dock-col{
position:relative !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:0 !important;
height:68px !important;
min-height:68px !important;
transform:none !important;
margin:0 !important;
padding:0 !important;
}
/* COLORI */
.ppvc2__mobile-color-trigger{
width:100% !important;
min-width:0 !important;
height:68px !important;
min-height:68px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
padding:0 14px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,0,0,.045) !important;
border-radius:24px !important;
background:#fff !important;
box-shadow:0 9px 24px rgba(0,0,0,.055) !important;
overflow:hidden !important;
}
.ppvc2__mobile-color-trigger-main{
min-width:0 !important;
flex:1 1 auto !important;
}
.ppvc2__mobile-color-trigger-current,
.ppvc2__mobile-color-trigger-count{
display:none !important;
}
.ppvc2__mobile-color-trigger-label{
color:#8d8f95 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.14em !important;
text-transform:uppercase !important;
white-space:nowrap !important;
}
.ppvc2__mobile-color-trigger-arrow{
flex:0 0 auto !important;
margin-left:5px !important;
color:#73757c !important;
font-size:15px !important;
line-height:1 !important;
}
/* FRONTE / RETRO */
.ppvc2__mobile-view-row{
width:100% !important;
min-width:0 !important;
height:68px !important;
min-height:68px !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
align-items:center !important;
justify-items:center !important;
gap:0 !important;
padding:5px !important;
box-sizing:border-box !important;
border:0 !important;
border-radius:999px !important;
background:#d9d9de !important;
box-shadow:none !important;
overflow:hidden !important;
}
.ppvc2__mobile-view{
width:57px !important;
min-width:57px !important;
height:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
border:0 !important;
border-radius:999px !important;
background:transparent !important;
box-shadow:none !important;
}
.ppvc2__mobile-view.is-active{
background:#fff !important;
box-shadow:0 5px 14px rgba(0,0,0,.08) !important;
}
.ppvc2__mobile-view-thumb,
.ppvc2__mobile-view img{
max-width:39px !important;
max-height:39px !important;
object-fit:contain !important;
}
/* INSERISCI LOGO */
.ppvc2__mobile-add-logo{
width:100% !important;
min-width:0 !important;
height:68px !important;
min-height:68px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 12px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,0,0,.045) !important;
border-radius:24px !important;
background:#fff !important;
box-shadow:0 9px 24px rgba(0,0,0,.055) !important;
color:#22242a !important;
font-size:13px !important;
font-weight:850 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
}
/* iPhone stretti */
@media (max-width:390px){
.ppvc2__quick-positions{
bottom:106px !important;
width:min(calc(100vw - 40px),350px) !important;
max-width:min(calc(100vw - 40px),350px) !important;
}
.ppvc2__quick-position{
height:42px !important;
min-height:42px !important;
font-size:8.7px !important;
padding:0 6px !important;
}
.ppvc2__mobile-dock{
left:10px !important;
right:10px !important;
bottom:max(14px,env(safe-area-inset-bottom)) !important;
height:64px !important;
grid-template-columns:92px 116px minmax(0,1fr) !important;
gap:7px !important;
}
.ppvc2__mobile-dock-col,
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-view-row,
.ppvc2__mobile-add-logo{
height:64px !important;
min-height:64px !important;
}
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-add-logo{
border-radius:22px !important;
}
.ppvc2__mobile-color-trigger{
padding:0 11px !important;
}
.ppvc2__mobile-color-trigger-label{
font-size:8px !important;
letter-spacing:.12em !important;
}
.ppvc2__mobile-view{
width:51px !important;
min-width:51px !important;
height:54px !important;
min-height:54px !important;
}
.ppvc2__mobile-view-thumb,
.ppvc2__mobile-view img{
max-width:35px !important;
max-height:35px !important;
}
.ppvc2__mobile-add-logo{
padding:0 8px !important;
font-size:11.5px !important;
}
}
/* ============================================================
V6.9.12 — Bottom dock refined: slightly smaller + view switch fixed
============================================================ */
@media (max-width:560px){
/* quick actions row: a touch smaller and tighter */
.ppvc2__quick-positions{
bottom:102px !important;
width:min(calc(100vw - 66px),344px) !important;
max-width:min(calc(100vw - 66px),344px) !important;
gap:7px !important;
}
.ppvc2__quick-positions-front,
.ppvc2__quick-positions-back{
padding:4px !important;
gap:5px !important;
border-radius:999px !important;
}
.ppvc2__quick-position{
height:42px !important;
min-height:42px !important;
padding:0 8px !important;
font-size:9px !important;
border-radius:999px !important;
}
/* bottom dock smaller and cleaner */
.ppvc2__mobile-dock{
left:18px !important;
right:18px !important;
bottom:max(16px, env(safe-area-inset-bottom)) !important;
height:62px !important;
grid-template-columns:98px 122px minmax(0,1fr) !important;
gap:9px !important;
align-items:center !important;
}
.ppvc2__mobile-dock-col,
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-view-row,
.ppvc2__mobile-add-logo{
height:62px !important;
min-height:62px !important;
box-sizing:border-box !important;
}
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-add-logo{
border-radius:22px !important;
box-shadow:0 8px 22px rgba(0,0,0,.05) !important;
}
.ppvc2__mobile-color-trigger{
padding:0 12px !important;
}
.ppvc2__mobile-color-trigger-label{
font-size:8.5px !important;
letter-spacing:.14em !important;
}
.ppvc2__mobile-color-trigger-arrow{
font-size:13px !important;
margin-left:6px !important;
}
/* front/back switch restored and aligned */
.ppvc2__mobile-dock-col--views{
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-width:0 !important;
}
.ppvc2__mobile-view-row{
width:122px !important;
min-width:122px !important;
max-width:122px !important;
padding:4px !important;
grid-template-columns:1fr 1fr !important;
justify-items:center !important;
align-items:center !important;
border-radius:999px !important;
background:#d9d9de !important;
overflow:hidden !important;
}
.ppvc2__mobile-view{
width:55px !important;
min-width:55px !important;
max-width:55px !important;
height:54px !important;
min-height:54px !important;
margin:0 !important;
padding:0 !important;
border-radius:999px !important;
justify-self:center !important;
align-self:center !important;
}
.ppvc2__mobile-view.is-active{
background:#fff !important;
box-shadow:0 4px 12px rgba(0,0,0,.08) !important;
}
.ppvc2__mobile-view-thumb,
.ppvc2__mobile-view img{
max-width:34px !important;
max-height:34px !important;
object-fit:contain !important;
display:block !important;
margin:0 auto !important;
}
.ppvc2__mobile-add-logo{
padding:0 12px !important;
font-size:12.5px !important;
font-weight:850 !important;
}
}
@media (max-width:390px){
.ppvc2__quick-positions{
bottom:98px !important;
width:min(calc(100vw - 42px),336px) !important;
max-width:min(calc(100vw - 42px),336px) !important;
}
.ppvc2__quick-position{
height:40px !important;
min-height:40px !important;
font-size:8.6px !important;
}
.ppvc2__mobile-dock{
left:12px !important;
right:12px !important;
height:58px !important;
grid-template-columns:92px 112px minmax(0,1fr) !important;
gap:8px !important;
}
.ppvc2__mobile-dock-col,
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-view-row,
.ppvc2__mobile-add-logo{
height:58px !important;
min-height:58px !important;
}
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-add-logo{
border-radius:20px !important;
}
.ppvc2__mobile-view-row{
width:112px !important;
min-width:112px !important;
max-width:112px !important;
}
.ppvc2__mobile-view{
width:50px !important;
min-width:50px !important;
max-width:50px !important;
height:50px !important;
min-height:50px !important;
}
.ppvc2__mobile-view-thumb,
.ppvc2__mobile-view img{
max-width:31px !important;
max-height:31px !important;
}
.ppvc2__mobile-add-logo{
font-size:11.5px !important;
padding:0 10px !important;
}
}
/* ============================================================
V6.9.13 — CTA "Carica logo" più stretta sul mobile
============================================================ */
@media (max-width:560px){
.ppvc2__mobile-dock{
grid-template-columns:98px 122px auto !important;
justify-content:space-between !important;
}
.ppvc2__mobile-dock-col--logo{
display:flex !important;
justify-content:flex-end !important;
align-items:center !important;
}
.ppvc2__mobile-add-logo{
width:auto !important;
min-width:124px !important;
max-width:140px !important;
padding:0 16px !important;
justify-content:center !important;
}
}
@media (max-width:390px){
.ppvc2__mobile-dock{
grid-template-columns:92px 112px auto !important;
}
.ppvc2__mobile-add-logo{
min-width:112px !important;
max-width:128px !important;
padding:0 14px !important;
}
}
/* ============================================================
V6.9.14 — Bottone "Colori" come "Carica logo" (senza freccia)
============================================================ */
@media (max-width:560px){
.ppvc2__mobile-color-trigger{
justify-content:center !important;
padding:0 16px !important;
}
.ppvc2__mobile-color-trigger-main{
flex:0 1 auto !important;
min-width:auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.ppvc2__mobile-color-trigger-label{
color:#22242a !important;
font-size:13px !important;
font-weight:850 !important;
line-height:1 !important;
letter-spacing:0 !important;
text-transform:none !important;
white-space:nowrap !important;
}
.ppvc2__mobile-color-trigger-arrow,
.ppvc2__mobile-color-trigger-count,
.ppvc2__mobile-color-trigger-current{
display:none !important;
}
}
/* ============================================================
V6.9.15 — Colori + Carica logo con font/radius come Posizione rapida
============================================================ */
@media (max-width:560px){
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-add-logo{
border-radius:999px !important;
}
.ppvc2__mobile-color-trigger{
justify-content:center !important;
padding:0 14px !important;
}
.ppvc2__mobile-color-trigger-main{
flex:0 1 auto !important;
min-width:auto !important;
width:auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.ppvc2__mobile-color-trigger-label,
.ppvc2__mobile-add-logo{
color:#34353a !important;
font-size:9px !important;
font-weight:850 !important;
line-height:1 !important;
letter-spacing:0 !important;
text-transform:none !important;
}
.ppvc2__mobile-add-logo{
padding:0 14px !important;
}
}
@media (max-width:390px){
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-add-logo{
border-radius:999px !important;
}
.ppvc2__mobile-color-trigger-label,
.ppvc2__mobile-add-logo{
font-size:8.6px !important;
}
.ppvc2__mobile-add-logo{
padding:0 12px !important;
}
}
/* ============================================================
V6.9.16 — Rifinitura dimensioni Colori/Carica logo + Carica logo verde
============================================================ */
@media (max-width:560px){
.ppvc2__mobile-dock{
height:58px !important;
grid-template-columns:96px 124px minmax(112px,1fr) !important;
gap:8px !important;
align-items:center !important;
}
.ppvc2__mobile-dock-col,
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-view-row,
.ppvc2__mobile-add-logo{
height:58px !important;
min-height:58px !important;
}
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-add-logo{
border-radius:999px !important;
}
.ppvc2__mobile-color-trigger{
padding:0 12px !important;
}
.ppvc2__mobile-add-logo{
padding:0 16px !important;
background:#44AD47 !important;
border-color:#44AD47 !important;
color:#ffffff !important;
box-shadow:0 10px 24px rgba(68,173,71,.18) !important;
}
.ppvc2__mobile-add-logo:hover,
.ppvc2__mobile-add-logo:focus,
.ppvc2__mobile-add-logo:active{
background:#3d9a40 !important;
border-color:#3d9a40 !important;
color:#ffffff !important;
}
}
@media (max-width:390px){
.ppvc2__mobile-dock{
height:54px !important;
grid-template-columns:88px 112px minmax(100px,1fr) !important;
gap:7px !important;
}
.ppvc2__mobile-dock-col,
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-view-row,
.ppvc2__mobile-add-logo{
height:54px !important;
min-height:54px !important;
}
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-add-logo{
border-radius:999px !important;
}
.ppvc2__mobile-add-logo{
padding:0 14px !important;
}
}
/* ============================================================
V6.9.17 — Riduzione spazio interno pulsanti Colori / Carica logo
============================================================ */
@media (max-width:560px){
.ppvc2__mobile-dock{
grid-template-columns:92px 124px 114px !important;
justify-content:center !important;
gap:8px !important;
}
.ppvc2__mobile-dock-col--colors{
min-width:92px !important;
max-width:92px !important;
}
.ppvc2__mobile-dock-col--logo{
min-width:114px !important;
max-width:114px !important;
}
.ppvc2__mobile-color-trigger{
padding:0 10px !important;
}
.ppvc2__mobile-add-logo{
padding:0 12px !important;
}
}
@media (max-width:390px){
.ppvc2__mobile-dock{
grid-template-columns:84px 112px 102px !important;
justify-content:center !important;
gap:7px !important;
}
.ppvc2__mobile-dock-col--colors{
min-width:84px !important;
max-width:84px !important;
}
.ppvc2__mobile-dock-col--logo{
min-width:102px !important;
max-width:102px !important;
}
.ppvc2__mobile-color-trigger{
padding:0 9px !important;
}
.ppvc2__mobile-add-logo{
padding:0 11px !important;
}
}
/* ============================================================
V6.9.19 — Soglia colori robusta + pulsanti laterali compatti
============================================================ */
@media (max-width:560px){
/* Con 1-2 colori il pulsante Colori deve sparire davvero. */
.ppvc2__mobile-color-trigger:not(.is-visible){
display:none !important;
}
.ppvc2__mobile-color-inline:not(.is-visible){
display:none !important;
}
.ppvc2__mobile-color-inline.is-visible{
display:block !important;
}
/* Dock più compatto: i due pulsanti laterali non devono sembrare enormi. */
.ppvc2__mobile-dock{
height:58px !important;
grid-template-columns:82px 124px 102px !important;
justify-content:center !important;
gap:9px !important;
}
.ppvc2__mobile-dock-col{
height:58px !important;
min-height:58px !important;
}
.ppvc2__mobile-dock-col--colors{
width:82px !important;
min-width:82px !important;
max-width:82px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:visible !important;
}
.ppvc2__mobile-dock-col--logo{
width:102px !important;
min-width:102px !important;
max-width:102px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-add-logo{
width:100% !important;
min-width:0 !important;
max-width:none !important;
height:44px !important;
min-height:44px !important;
padding:0 10px !important;
border-radius:999px !important;
box-sizing:border-box !important;
}
.ppvc2__mobile-color-trigger-label,
.ppvc2__mobile-add-logo{
font-size:9px !important;
font-weight:850 !important;
line-height:1 !important;
}
.ppvc2__mobile-add-logo{
background:#44AD47 !important;
border-color:#44AD47 !important;
color:#fff !important;
box-shadow:0 7px 18px rgba(68,173,71,.16) !important;
}
/* Con 1-2 colori: solo pallini, centrati nella colonna sinistra. */
.ppvc2__mobile-color-inline.is-visible{
width:auto !important;
max-width:82px !important;
margin:0 auto !important;
}
.ppvc2__mobile-color-list{
justify-content:center !important;
}
}
@media (max-width:390px){
.ppvc2__mobile-dock{
height:54px !important;
grid-template-columns:76px 112px 94px !important;
gap:8px !important;
}
.ppvc2__mobile-dock-col{
height:54px !important;
min-height:54px !important;
}
.ppvc2__mobile-dock-col--colors{
width:76px !important;
min-width:76px !important;
max-width:76px !important;
}
.ppvc2__mobile-dock-col--logo{
width:94px !important;
min-width:94px !important;
max-width:94px !important;
}
.ppvc2__mobile-color-trigger,
.ppvc2__mobile-add-logo{
height:42px !important;
min-height:42px !important;
padding:0 9px !important;
}
.ppvc2__mobile-color-trigger-label,
.ppvc2__mobile-add-logo{
font-size:8.6px !important;
}
.ppvc2__mobile-color-inline.is-visible{
max-width:76px !important;
}
}
/* ============================================================
V6.10.3 — Zoom prodotto +/- anche su mobile
============================================================ */
@media (max-width:560px){
.ppvc2__zoom{
position:fixed !important;
left:auto !important;
right:18px !important;
bottom:410px !important;
z-index:72 !important;
display:flex !important;
flex-direction:column !important;
gap:6px !important;
padding:5px !important;
border:1px solid rgba(0,0,0,.045) !important;
border-radius:999px !important;
background:rgba(255,255,255,.88) !important;
box-shadow:0 9px 24px rgba(0,0,0,.06) !important;
backdrop-filter:blur(14px) !important;
-webkit-backdrop-filter:blur(14px) !important;
}
.ppvc2__zoom button{
width:38px !important;
height:38px !important;
min-width:38px !important;
min-height:38px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
border:0 !important;
border-radius:50% !important;
background:#fff !important;
color:#26272b !important;
box-shadow:0 3px 10px rgba(0,0,0,.06) !important;
font-size:20px !important;
font-weight:700 !important;
line-height:1 !important;
touch-action:manipulation !important;
transition:transform .16s ease, box-shadow .16s ease !important;
}
.ppvc2__zoom button:active{
transform:scale(.93) !important;
box-shadow:0 1px 6px rgba(0,0,0,.05) !important;
}
}
@media (max-width:390px){
.ppvc2__zoom{
right:12px !important;
bottom:395px !important;
gap:5px !important;
padding:4px !important;
}
.ppvc2__zoom button{
width:36px !important;
height:36px !important;
min-width:36px !important;
min-height:36px !important;
font-size:19px !important;
}
}
/* ============================================================
V6.10.7 — Inquadratura prodotto configurabile per singolo prodotto
============================================================ */
.ppvc2__product-image{
transform-origin:center center !important;
transition:
width .18s ease,
height .18s ease,
transform .18s ease,
opacity .18s ease !important;
will-change:width,height,transform;
}
/* ============================================================
V6.10.16 — INFORMAZIONI PRODOTTO / RIEPILOGO / PDF
============================================================ */
.ppvc2__summary-open{
height:40px;
padding:0 14px;
display:inline-flex;
align-items:center;
gap:8px;
border:1px solid #e6e6e8;
border-radius:999px;
background:#fff;
color:#29292d;
font:inherit;
font-size:12px;
font-weight:750;
cursor:pointer;
white-space:nowrap;
}
.ppvc2__summary-open-icon{
width:20px;
height:20px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#f0f0f2;
color:#171719;
font-size:12px;
font-weight:850;
}
.ppvc2__summary{
position:fixed;
inset:0;
z-index:1000004;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .2s ease,visibility .2s ease;
}
.ppvc2__summary.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.ppvc2__summary-backdrop{
position:absolute;
inset:0;
background:rgba(20,20,22,.48);
backdrop-filter:blur(7px);
-webkit-backdrop-filter:blur(7px);
}
.ppvc2__summary-panel{
position:relative;
z-index:2;
width:min(980px,96vw);
max-height:min(860px,92vh);
overflow:auto;
border:1px solid #e4e4e6;
border-radius:28px;
background:#fff;
box-shadow:0 30px 90px rgba(0,0,0,.18);
}
.ppvc2__summary-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
padding:28px 30px 22px;
border-bottom:1px solid #ededee;
}
.ppvc2__summary-eyebrow{
display:block;
margin-bottom:7px;
color:#44AD47;
font-size:10px;
line-height:1;
font-weight:850;
letter-spacing:.11em;
}
.ppvc2__summary-head h2{
margin:0;
color:#19191c;
font-size:31px;
line-height:1.05;
font-weight:820;
letter-spacing:-.04em;
}
.ppvc2__summary-product-name{
margin:7px 0 0;
color:#8b8b90;
font-size:14px;
}
.ppvc2__summary-close{
width:42px;
height:42px;
flex:0 0 42px;
border:0;
border-radius:50%;
background:#f1f1f3;
color:#252529;
font-size:24px;
line-height:1;
cursor:pointer;
}
.ppvc2__summary-body{
display:grid;
grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);
gap:24px;
padding:26px 30px;
}
.ppvc2__summary-previews{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.ppvc2__summary-previews:has(.ppvc2__summary-preview:only-child){
grid-template-columns:minmax(0,1fr);
}
.ppvc2__summary-preview{
min-width:0;
}
.ppvc2__summary-preview-title{
margin-bottom:8px;
color:#333338;
font-size:12px;
font-weight:750;
}
.ppvc2__summary-preview-stage{
position:relative;
aspect-ratio:1 / 1.08;
overflow:hidden;
border-radius:20px;
background:#f1f1f3;
}
.ppvc2__summary-preview-product{
position:absolute;
inset:8%;
width:84%;
height:84%;
object-fit:contain;
}
.ppvc2__summary-preview-logo{
position:absolute;
z-index:3;
height:auto;
max-width:none;
transform-origin:center center;
object-fit:contain;
}
.ppvc2__summary-preview-status{
margin-top:8px;
color:#8b8b90;
font-size:10px;
font-weight:600;
}
.ppvc2__summary-data{
align-self:start;
padding:5px 0;
}
.ppvc2__summary-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
min-height:48px;
border-bottom:1px solid #ededee;
}
.ppvc2__summary-row span{
color:#8c8d92;
font-size:12px;
}
.ppvc2__summary-row strong{
color:#242428;
font-size:12px;
text-align:right;
}
.ppvc2__summary-total{
margin-top:16px;
padding:18px;
border-radius:18px;
background:#171719;
color:#fff;
}
.ppvc2__summary-total > span{
display:block;
color:#a9a9ad;
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em;
}
.ppvc2__summary-total > strong{
display:block;
margin-top:7px;
font-size:27px;
line-height:1;
font-weight:820;
letter-spacing:-.035em;
}
.ppvc2__summary-total > small{
display:block;
margin-top:9px;
color:#aaaab0;
font-size:9.5px;
line-height:1.35;
}
.ppvc2__summary-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
padding:18px 30px 24px;
border-top:1px solid #ededee;
}
.ppvc2__summary-pdf,
.ppvc2__summary-order{
min-height:48px;
padding:0 20px;
border-radius:999px;
font:inherit;
font-size:12px;
font-weight:800;
cursor:pointer;
}
.ppvc2__summary-pdf{
display:inline-flex;
align-items:center;
gap:8px;
border:1px solid #dddddf;
background:#fff;
color:#252529;
}
.ppvc2__summary-order{
border:0;
background:#171719;
color:#fff;
}
body.ppvc2-summary-open{
overflow:hidden;
}
@media(max-width:900px){
.ppvc2__summary-open{
width:40px;
padding:0;
justify-content:center;
}
.ppvc2__summary-open-text{
display:none;
}
.ppvc2__summary-open-icon{
background:transparent;
}
.ppvc2__summary{
padding:10px;
align-items:flex-end;
}
.ppvc2__summary-panel{
width:100%;
max-height:92vh;
border-radius:24px 24px 16px 16px;
}
.ppvc2__summary-head{
padding:22px 18px 18px;
}
.ppvc2__summary-head h2{
font-size:26px;
}
.ppvc2__summary-body{
grid-template-columns:1fr;
padding:18px;
}
.ppvc2__summary-previews{
gap:10px;
}
.ppvc2__summary-preview-stage{
border-radius:16px;
}
.ppvc2__summary-actions{
padding:14px 18px 18px;
}
.ppvc2__summary-pdf,
.ppvc2__summary-order{
flex:1 1 50%;
padding:0 13px;
}
}
@media(max-width:560px){
.ppvc2__summary-previews{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.ppvc2__summary-row{
min-height:43px;
}
.ppvc2__summary-total > strong{
font-size:24px;
}
}
/* STAMPA / SALVATAGGIO PDF */
@media print{
body.ppvc2-summary-print *{
visibility:hidden !important;
}
body.ppvc2-summary-print .ppvc2__summary,
body.ppvc2-summary-print .ppvc2__summary *{
visibility:visible !important;
}
body.ppvc2-summary-print .ppvc2__summary{
position:absolute !important;
inset:0 !important;
display:block !important;
opacity:1 !important;
visibility:visible !important;
padding:0 !important;
background:#fff !important;
}
body.ppvc2-summary-print .ppvc2__summary-backdrop,
body.ppvc2-summary-print .ppvc2__summary-close,
body.ppvc2-summary-print .ppvc2__summary-actions{
display:none !important;
}
body.ppvc2-summary-print .ppvc2__summary-panel{
width:100% !important;
max-height:none !important;
overflow:visible !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
}
body.ppvc2-summary-print .ppvc2__summary-body{
grid-template-columns:1.4fr .8fr !important;
}
@page{
size:A4 landscape;
margin:12mm;
}
}
/* ============================================================
V6.10.17 — RIEPILOGO PRODOTTO STILE EDITOR
Fronte / Retro a sinistra + dettagli ordine a destra.
============================================================ */
.ppvc2__summary{
position:absolute !important;
inset:74px 0 0 !important;
z-index:10050 !important;
padding:0 !important;
align-items:stretch !important;
justify-content:stretch !important;
background:#fff !important;
}
.ppvc2__summary-backdrop{
display:none !important;
}
.ppvc2__summary-panel{
position:relative !important;
width:100% !important;
height:100% !important;
max-height:none !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 420px !important;
grid-template-rows:1fr !important;
overflow:hidden !important;
border:0 !important;
border-radius:0 !important;
background:#fff !important;
box-shadow:none !important;
}
/* Header becomes right sidebar header */
.ppvc2__summary-head{
grid-column:2 !important;
grid-row:1 !important;
position:relative !important;
z-index:3 !important;
display:block !important;
padding:26px 28px 0 !important;
border-left:1px solid #ececef !important;
border-bottom:0 !important;
background:#fff !important;
overflow:visible !important;
}
.ppvc2__summary-eyebrow{
display:none !important;
}
.ppvc2__summary-head h2{
display:inline !important;
margin:0 !important;
color:#171719 !important;
font-size:20px !important;
line-height:1.2 !important;
font-weight:800 !important;
letter-spacing:-.025em !important;
}
.ppvc2__summary-product-name{
display:inline !important;
margin:0 0 0 8px !important;
color:#85858b !important;
font-size:12px !important;
line-height:1.2 !important;
font-weight:500 !important;
}
.ppvc2__summary-description{
margin:22px 0 0 !important;
padding:22px 0 !important;
border-top:1px solid #ececef !important;
border-bottom:1px solid #ececef !important;
color:#77777d !important;
font-size:12px !important;
line-height:1.55 !important;
}
.ppvc2__summary-close{
position:absolute !important;
top:18px !important;
right:18px !important;
width:34px !important;
height:34px !important;
border-radius:50% !important;
background:transparent !important;
font-size:21px !important;
}
/* Body: previews left, data right */
.ppvc2__summary-body{
grid-column:1 / 3 !important;
grid-row:1 !important;
min-height:0 !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 420px !important;
gap:0 !important;
padding:0 !important;
pointer-events:none;
}
.ppvc2__summary-previews{
grid-column:1 !important;
min-width:0 !important;
height:100% !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
align-content:start !important;
gap:14px !important;
padding:22px !important;
overflow:auto !important;
background:#fff !important;
pointer-events:auto;
}
.ppvc2__summary-previews .ppvc2__summary-preview:only-child{
max-width:620px;
}
.ppvc2__summary-preview-title{
display:none !important;
}
.ppvc2__summary-preview-stage{
aspect-ratio:1 / .76 !important;
min-height:360px !important;
border-radius:16px !important;
background:#f1f1f3 !important;
}
.ppvc2__summary-preview-product{
inset:9% !important;
width:82% !important;
height:82% !important;
}
.ppvc2__summary-preview-status{
width:max-content !important;
margin:-43px auto 14px !important;
position:relative !important;
z-index:5 !important;
padding:7px 12px !important;
border-radius:999px !important;
background:#49494d !important;
color:#fff !important;
font-size:10px !important;
line-height:1 !important;
font-weight:700 !important;
}
.ppvc2__summary-preview[data-view="front"] .ppvc2__summary-preview-status{
font-size:0 !important;
}
.ppvc2__summary-preview[data-view="front"] .ppvc2__summary-preview-status::after{
content:"Fronte";
font-size:10px;
}
.ppvc2__summary-preview[data-view="back"] .ppvc2__summary-preview-status{
font-size:0 !important;
}
.ppvc2__summary-preview[data-view="back"] .ppvc2__summary-preview-status::after{
content:"Retro";
font-size:10px;
}
/* Right data starts lower, below header / description */
.ppvc2__summary-data{
grid-column:2 !important;
align-self:start !important;
margin-top:160px !important;
padding:0 28px !important;
background:#fff !important;
pointer-events:auto;
}
.ppvc2__summary-row{
min-height:49px !important;
}
.ppvc2__summary-row span{
font-size:11px !important;
}
.ppvc2__summary-row strong{
font-size:12px !important;
}
.ppvc2__summary-total{
margin-top:18px !important;
padding:18px 0 !important;
border-radius:0 !important;
border-top:1px solid #ececef !important;
border-bottom:1px solid #ececef !important;
background:transparent !important;
color:#171719 !important;
}
.ppvc2__summary-total > span{
color:#8a8a90 !important;
font-size:10px !important;
}
.ppvc2__summary-total > strong{
color:#171719 !important;
font-size:32px !important;
}
.ppvc2__summary-total > small{
color:#8a8a90 !important;
}
/* Actions fixed at bottom of sidebar */
.ppvc2__summary-actions{
grid-column:2 !important;
grid-row:1 !important;
align-self:end !important;
z-index:5 !important;
padding:18px 28px 24px !important;
border-top:1px solid #ececef !important;
border-left:1px solid #ececef !important;
background:#fff !important;
}
.ppvc2__summary-pdf,
.ppvc2__summary-order{
min-height:46px !important;
}
@media(max-width:900px){
.ppvc2__summary{
inset:64px 0 0 !important;
}
.ppvc2__summary-panel{
display:block !important;
overflow:auto !important;
}
.ppvc2__summary-head{
position:sticky !important;
top:0 !important;
padding:20px 18px 16px !important;
border-left:0 !important;
border-bottom:1px solid #ececef !important;
z-index:20 !important;
}
.ppvc2__summary-description{
margin-top:14px !important;
padding:14px 0 0 !important;
border-bottom:0 !important;
}
.ppvc2__summary-body{
display:block !important;
}
.ppvc2__summary-previews{
height:auto !important;
padding:14px !important;
gap:9px !important;
}
.ppvc2__summary-preview-stage{
min-height:220px !important;
aspect-ratio:1 / 1.06 !important;
}
.ppvc2__summary-data{
margin-top:0 !important;
padding:8px 18px 110px !important;
}
.ppvc2__summary-actions{
position:fixed !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
padding:12px 14px !important;
border-left:0 !important;
box-shadow:0 -8px 24px rgba(0,0,0,.06) !important;
}
}
@media(max-width:560px){
.ppvc2__summary-head h2{
font-size:18px !important;
}
.ppvc2__summary-product-name{
display:block !important;
margin:4px 40px 0 0 !important;
}
.ppvc2__summary-previews{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.ppvc2__summary-preview-stage{
min-height:180px !important;
}
}
/* ============================================================
V6.10.18 — SUMMARY FIX COMPLETO
============================================================ */
.ppvc2__summary-panel{
grid-template-columns:minmax(0,1fr) 430px !important;
grid-template-rows:auto minmax(0,1fr) auto !important;
}
.ppvc2__summary-body{display:contents !important}
.ppvc2__summary-head{
grid-column:2 !important;grid-row:1 !important;position:relative !important;
min-height:120px !important;padding:26px 64px 20px 28px !important;
border-left:1px solid #ececef !important;border-bottom:1px solid #ececef !important;
background:#fff !important;z-index:20 !important;
}
.ppvc2__summary-head h2{
display:block !important;margin:0 !important;color:#171719 !important;
font-size:22px !important;line-height:1.05 !important;font-weight:820 !important;letter-spacing:-.035em !important;
}
.ppvc2__summary-product-name{display:block !important;margin:6px 0 0 !important;color:#77777d !important;font-size:13px !important;font-weight:600 !important}
.ppvc2__summary-description{margin:13px 0 0 !important;padding:0 !important;border:0 !important;color:#8b8b90 !important;font-size:11px !important;line-height:1.45 !important}
.ppvc2__summary-close{
position:absolute !important;top:18px !important;right:18px !important;z-index:50 !important;
width:38px !important;height:38px !important;display:flex !important;align-items:center !important;justify-content:center !important;
border:1px solid #e5e5e7 !important;border-radius:50% !important;background:#fff !important;color:#202024 !important;
box-shadow:0 4px 14px rgba(0,0,0,.06) !important;font-size:24px !important;line-height:1 !important;cursor:pointer !important;
}
.ppvc2__summary-previews{grid-column:1 !important;grid-row:1 / 4 !important;height:100% !important;padding:22px !important;overflow:auto !important}
.ppvc2__summary-data{
grid-column:2 !important;grid-row:2 !important;min-height:0 !important;margin:0 !important;padding:18px 28px !important;
overflow:auto !important;border-left:1px solid #ececef !important;background:#fff !important;
}
.ppvc2__summary-price-block{padding:0 0 16px !important;margin-bottom:6px !important;border-bottom:1px solid #ececef !important}
.ppvc2__summary-price-block>span{display:block !important;color:#8c8d92 !important;font-size:10px !important;font-weight:650 !important;text-transform:uppercase !important;letter-spacing:.08em !important}
.ppvc2__summary-price-block>strong{display:block !important;margin-top:5px !important;color:#171719 !important;font-size:27px !important;line-height:1 !important;font-weight:850 !important;letter-spacing:-.035em !important}
.ppvc2__summary-characteristics{margin:0 0 16px !important;padding-bottom:14px !important;border-bottom:1px solid #ececef !important}
.ppvc2__summary-characteristics h3{margin:0 0 8px !important;color:#242428 !important;font-size:12px !important;font-weight:800 !important}
.ppvc2__summary-characteristic-row{display:flex !important;justify-content:space-between !important;gap:16px !important;padding:5px 0 !important;font-size:10px !important}
.ppvc2__summary-characteristic-row span{color:#8c8d92 !important}.ppvc2__summary-characteristic-row strong{color:#333338 !important;text-align:right !important}
.ppvc2__summary-actions{
grid-column:2 !important;grid-row:3 !important;position:relative !important;align-self:auto !important;padding:16px 28px 22px !important;
border-top:1px solid #ececef !important;border-left:1px solid #ececef !important;background:#fff !important;z-index:20 !important;
}
.ppvc2__summary-preview-logo{display:block !important;z-index:10 !important;max-height:none !important;opacity:1 !important}
@media(max-width:900px){
.ppvc2__summary-panel{display:block !important;overflow:auto !important}
.ppvc2__summary-head{min-height:0 !important;padding:20px 58px 16px 18px !important;border-left:0 !important}
.ppvc2__summary-previews,.ppvc2__summary-data,.ppvc2__summary-actions{border-left:0 !important}
.ppvc2__summary-data{padding:16px 18px 100px !important}
.ppvc2__summary-actions{position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important}
}
/* ============================================================
V6.10.19 — CONFERMA ANTEPRIMA + ORDINE NELLO STESSO PANNELLO
============================================================ */
.ppvc2__summary-order-slot{
display:none;
}
.ppvc2__summary.is-confirmation .ppvc2__summary-panel{
grid-template-columns:minmax(0,1fr) minmax(420px,490px) !important;
grid-template-rows:1fr auto !important;
}
.ppvc2__summary.is-confirmation .ppvc2__summary-head{
display:none !important;
}
.ppvc2__summary.is-confirmation .ppvc2__summary-body{
display:contents !important;
}
.ppvc2__summary.is-confirmation .ppvc2__summary-previews{
grid-column:1 !important;
grid-row:1 / 3 !important;
padding:22px !important;
display:block !important;
overflow:auto !important;
background:#fff !important;
}
.ppvc2__summary.is-confirmation .ppvc2__summary-data{
display:none !important;
}
.ppvc2__summary.is-confirmation .ppvc2__summary-order-slot{
display:block !important;
grid-column:2 !important;
grid-row:1 !important;
min-height:0 !important;
overflow:auto !important;
border-left:1px solid #ececef !important;
background:#fff !important;
}
.ppvc2__summary.is-confirmation .ppvc2__summary-actions{
grid-column:2 !important;
grid-row:2 !important;
display:flex !important;
justify-content:flex-end !important;
padding:14px 18px 18px !important;
border-left:1px solid #ececef !important;
background:#fff !important;
}
.ppvc2__summary.is-confirmation .ppvc2__summary-order{
display:none !important;
}
.ppvc2__summary.is-confirmation .ppvc2__summary-close{
display:flex !important;
position:fixed !important;
top:18px !important;
right:18px !important;
z-index:2147483647 !important;
}
/* Product Builder dentro il pannello di conferma */
.ppvc2__summary-order-slot > .ppb-panel.ppvc2-summary-order-panel{
position:relative !important;
inset:auto !important;
width:100% !important;
max-width:none !important;
min-height:100% !important;
height:auto !important;
max-height:none !important;
margin:0 !important;
padding:24px 24px 32px !important;
overflow:visible !important;
border:0 !important;
border-radius:0 !important;
background:#fff !important;
box-shadow:none !important;
transform:none !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
}
.ppvc2__summary-order-slot > .ppb-panel.ppvc2-summary-order-panel .ppb-kicker,
.ppvc2__summary-order-slot > .ppb-panel.ppvc2-summary-order-panel .ppb-title,
.ppvc2__summary-order-slot > .ppb-panel.ppvc2-summary-order-panel .ppb-step,
.ppvc2__summary-order-slot > .ppb-panel.ppvc2-summary-order-panel .ppb-order{
display:block !important;
}
.ppvc2__summary-order-slot > .ppb-panel.ppvc2-summary-order-panel .ppb-colors{
display:flex !important;
flex-wrap:wrap !important;
}
.ppvc2__summary-order-slot > .ppb-panel.ppvc2-summary-order-panel .ppb-size-list{
display:grid !important;
}
.ppvc2__summary-order-slot > .ppb-panel.ppvc2-summary-order-panel .ppvc2__order-drawer-close,
.ppvc2__summary-order-slot > .ppb-panel.ppvc2-summary-order-panel .ppb-visual-configurator{
display:none !important;
}
/* Ogni colore selezionato genera una coppia Fronte/Retro a sinistra */
.ppvc2__summary-color-group{
margin:0 0 28px;
}
.ppvc2__summary-color-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin:0 0 12px;
}
.ppvc2__summary-color-head strong{
color:#202024;
font-size:16px;
font-weight:800;
}
.ppvc2__summary-color-head span{
padding:6px 10px;
border-radius:999px;
background:#f0f0f2;
color:#77777d;
font-size:10px;
font-weight:700;
}
.ppvc2__summary-color-previews{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.ppvc2__summary-color-previews .ppvc2__summary-preview-stage{
position:relative;
aspect-ratio:1/.78;
min-height:300px !important;
overflow:hidden;
border-radius:18px !important;
background:#f1f1f3 !important;
}
.ppvc2__summary-preview-badge{
position:absolute;
left:50%;
bottom:14px;
z-index:20;
transform:translateX(-50%);
padding:7px 12px;
border-radius:999px;
background:#49494d;
color:#fff;
font-size:10px;
font-weight:750;
}
.ppvc2__summary-preview-empty{
display:flex;
align-items:center;
justify-content:center;
min-height:300px;
border:1px dashed #d9d9dd;
border-radius:20px;
color:#8b8b91;
font-size:13px;
text-align:center;
padding:24px;
}
/* CTA principale leggermente più larga per la nuova etichetta */
.ppvc2__order-button{
min-width:168px !important;
padding-left:20px !important;
padding-right:20px !important;
white-space:nowrap !important;
}
@media(max-width:900px){
.ppvc2__summary.is-confirmation .ppvc2__summary-panel{
display:block !important;
overflow:auto !important;
}
.ppvc2__summary.is-confirmation .ppvc2__summary-previews{
padding:12px !important;
}
.ppvc2__summary.is-confirmation .ppvc2__summary-order-slot{
border-left:0 !important;
border-top:1px solid #ececef !important;
}
.ppvc2__summary-order-slot > .ppb-panel.ppvc2-summary-order-panel{
padding:18px 14px 110px !important;
}
.ppvc2__summary.is-confirmation .ppvc2__summary-actions{
position:fixed !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
border-left:0 !important;
box-shadow:0 -8px 24px rgba(0,0,0,.06) !important;
}
.ppvc2__summary-color-previews{
gap:8px;
}
.ppvc2__summary-color-previews .ppvc2__summary-preview-stage{
min-height:190px !important;
border-radius:15px !important;
}
.ppvc2__order-button{
min-width:0 !important;
padding:0 15px !important;
font-size:12px !important;
}
}
@media(max-width:560px){
.ppvc2__summary-color-group{
margin-bottom:20px;
}
.ppvc2__summary-color-head strong{
font-size:14px;
}
.ppvc2__summary-color-previews .ppvc2__summary-preview-stage{
min-height:160px !important;
}
}
/* ============================================================
V6.10.20 — COLORI NEL RIEPILOGO TAGLIE
============================================================ */
.ppvc2__summary-open{display:none !important}
.ppvc2__summary-order-slot .ppb-order-line strong{
display:flex !important;
align-items:center !important;
gap:6px !important;
min-width:0 !important;
}
.ppvc2-order-color-dot{
width:10px !important;height:10px !important;flex:0 0 10px !important;
display:inline-block !important;border-radius:50% !important;
background:var(--ppvc2-order-color,#b8b8bd) !important;
border:1px solid rgba(0,0,0,.16) !important;
box-shadow:0 0 0 2px #fff !important;
}
.ppvc2-order-color-name{font-weight:800 !important}
.ppvc2-order-separator{color:#a0a0a5 !important;font-weight:500 !important}
/* ============================================================
V6.10.21 — LABEL ORDINE COLORE + TAGLIA FORZATE
============================================================ */
.ppvc2__summary-order-slot .ppb-order-line > strong{
display:flex !important;
align-items:center !important;
flex-wrap:wrap !important;
gap:6px !important;
color:#252529 !important;
}
.ppvc2-order-size-name{
font-weight:750 !important;
color:#252529 !important;
}
.ppvc2-order-color-name{
font-weight:800 !important;
color:#252529 !important;
}
/* ============================================================
V6.10.30 — ANTEPRIMA FEDELE: BASE + LOGO SEPARATI
============================================================ */
.ppvc2__summary-preview-stage--faithful{
min-height:0 !important;
height:auto !important;
}
.ppvc2__summary-preview-stage--faithful .ppvc2__summary-preview-product--rendered{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:contain !important;
}
.ppvc2__summary-preview-stage--faithful .ppvc2__summary-preview-logo--faithful{
position:absolute !important;
z-index:10 !important;
height:auto !important;
max-width:none !important;
object-fit:contain !important;
transform-origin:center center !important;
}