.pezy-el-decision.pdp-pack {
--pdp-line: rgba(0,0,0,.12);
--pdp-ok: #1f7a4d;
--pdp-ok-bg: #e8f6ee;
--pdp-warn: #9a6700;
--pdp-warn-bg: #fff6e5;
--pdp-stage: #f3f3f1;
--pdp-card: #fff;
--pdp-blue: var(--awb-color6, #159cd8);
--pdp-fill: 6s;
font-family: inherit;
display: grid;
grid-template-columns: minmax(260px, .9fr) minmax(300px, 1.1fr);
gap: 40px 56px;
align-items: start;
width: 100%;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
overflow: visible;
}
.pezy-el-decision *,
.pezy-el-decision *::before,
.pezy-el-decision *::after { box-sizing: border-box; }
.pezy-el-decision .pdp-kicker {
margin: 0 0 18px;
letter-spacing: .02em;
text-transform: none;
}
.pezy-el-decision .pdp-copy > h2 { margin-top: 0; }
.pezy-el-decision .pdp-intro { max-width: 46ch; }
.pezy-el-decision .pdp-items { border-top: 1px solid var(--pdp-line); margin-top: 1.5em; }
.pezy-el-decision .pdp-item {
position: relative;
border-bottom: 1px solid var(--pdp-line);
margin: 0;
background: none;
}
.pezy-el-decision .pdp-item > summary {
list-style: none;
cursor: pointer;
padding: .9em 0 1em;
font: inherit;
font-size: 17px;
font-weight: 300;
line-height: 1.3;
letter-spacing: -.015em;
color: inherit;
opacity: .42;
transition: opacity .2s ease;
}
.pezy-el-decision .pdp-item > summary::-webkit-details-marker { display: none; }
.pezy-el-decision .pdp-item > summary::marker { content: ""; }
.pezy-el-decision .pdp-item > summary:hover,
.pezy-el-decision .pdp-item[open] > summary { opacity: 1; }
.pezy-el-decision .pdp-item[open] > summary { padding-bottom: .35em; }
.pezy-el-decision .pdp-item > .pdp-body {
margin: 0 0 1em;
max-width: 46ch;
color: #343231;
opacity: 1;
}
.pezy-el-decision .pdp-progress {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: var(--pdp-blue);
transform: scaleX(0);
transform-origin: left center;
pointer-events: none;
}
.pezy-el-decision .pdp-item[open] .pdp-progress {
animation: pdpGrow var(--pdp-fill) linear forwards;
}
.pezy-el-decision.is-paused .pdp-progress { animation-play-state: paused; }
@keyframes pdpGrow { to { transform: scaleX(1); } }
.pezy-el-decision .pdp-stage {
position: sticky;
top: var(--pezy-sticky-top, calc(var(--awb-header-sticky-height, 76px) + 20px));
align-self: start;
background: var(--pdp-stage);
border-radius: 20px;
padding: 18px;
min-height: 520px;
max-height: calc(100vh - var(--pezy-sticky-top, 96px) - 24px);
}
.pezy-el-decision .pdp-panel {
display: none;
background: var(--pdp-card);
border-radius: 14px;
box-shadow: 0 16px 40px rgba(0,0,0,.07);
padding: 16px 18px 18px;
min-height: 484px;
animation: pdpIn .28s ease;
}
.pezy-el-decision .pdp-panel.is-on { display: block; }
@keyframes pdpIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.pezy-el-decision .pdp-ui-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid var(--pdp-line);
font-size: 12px;
letter-spacing: .04em;
text-transform: uppercase;
}
.pezy-el-decision .pdp-ui-dots { display: flex; gap: 5px; }
.pezy-el-decision .pdp-ui-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ddd; display: block; }
.pezy-el-decision .pdp-ui-dots i:nth-child(1) { background: #eb8e8e; }
.pezy-el-decision .pdp-ui-dots i:nth-child(2) { background: #e2c36b; }
.pezy-el-decision .pdp-ui-dots i:nth-child(3) { background: #8dcfab; }
.pezy-el-decision .pdp-ui-name { opacity: .5; font-weight: 600; }
.pezy-el-decision .pdp-badge {
text-transform: uppercase;
letter-spacing: .04em;
font-size: 11px;
font-weight: 600;
padding: 4px 8px;
border-radius: 999px;
background: var(--pdp-ok-bg);
color: var(--pdp-ok);
}
.pezy-el-decision .pdp-badge.is-next { background: var(--pdp-warn-bg); color: var(--pdp-warn); }
.pezy-el-decision .pdp-split {
display: grid;
grid-template-columns: 150px 1fr;
gap: 8px 18px;
align-items: center;
}
.pezy-el-decision .pdp-hero { position: relative; text-align: center; }
.pezy-el-decision .pdp-hero svg {
width: 132px;
height: auto;
display: block;
margin: 0 auto;
}
.pezy-el-decision .pdp-caption {
display: block;
margin-top: 6px;
font-size: 11px;
opacity: .5;
}
.pezy-el-decision .pdp-data h3 {
margin: 0 0 10px;
font-size: 16px;
line-height: 1.25;
}
.pezy-el-decision .pdp-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 0 0 12px;
}
.pezy-el-decision .pdp-stat {
background: var(--pdp-stage);
border-radius: 10px;
padding: 10px 8px;
}
.pezy-el-decision .pdp-stat b { display: block; font-size: 16px; letter-spacing: -.02em; }
.pezy-el-decision .pdp-stat span { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .55; }
.pezy-el-decision .pdp-ticks { list-style: none; margin: 0; padding: 0; }
.pezy-el-decision .pdp-ticks li {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 0;
font-size: 13px;
line-height: 1.35;
border-bottom: 1px solid var(--pdp-line);
}
.pezy-el-decision .pdp-ticks li:last-child { border-bottom: 0; }
.pezy-el-decision .pdp-tick {
flex: 0 0 18px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #111;
color: #fff;
font-size: 10px;
line-height: 18px;
text-align: center;
margin-top: 1px;
}
.pezy-el-decision .pdp-tick.is-wait { background: #e6e6e6; color: #888; }
.pezy-el-decision .pdp-quote {
background: var(--pdp-stage);
border-radius: 10px;
padding: 10px 12px;
margin: 10px 0 0;
font-size: 13px;
line-height: 1.45;
}
.pezy-el-decision .pdp-quote small { display: block; margin-top: 6px; opacity: .5; font-size: 11px; }
.pezy-el-decision .pdp-row {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--pdp-line);
font-size: 13px;
}
.pezy-el-decision .pdp-row:last-child { border-bottom: 0; }
.pezy-el-decision .pdp-row span { opacity: .58; }
.pezy-el-decision .pdp-row strong { font-weight: 600; opacity: 1; text-align: right; }
.pezy-el-decision .pdp-ok { color: var(--pdp-ok) !important; opacity: 1 !important; font-weight: 600; }
.pezy-el-decision .pdp-bar {
height: 6px;
background: #ececec;
border-radius: 99px;
overflow: hidden;
margin-top: 5px;
}
.pezy-el-decision .pdp-bar i { display: block; height: 100%; background: #111; border-radius: 99px; }
.pezy-el-decision .pdp-dims { position: relative; padding: 8px 14px 0; }
.pezy-el-decision .pdp-dim {
position: absolute;
font-size: 10px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
opacity: .45;
white-space: nowrap;
}
.pezy-el-decision .pdp-dim-h { left: 0; top: 46%; writing-mode: vertical-rl; transform: rotate(180deg); }
.pezy-el-decision .pdp-dim-w { left: 50%; bottom: 18px; transform: translateX(-50%); }
.pezy-el-decision .pdp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.pezy-el-decision .pdp-step {
background: var(--pdp-stage);
border-radius: 10px;
padding: 10px 8px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: #0e3a44 !important;
}
.pezy-el-decision .pdp-step small {
display: block;
font-weight: 500;
color: #0e3a44 !important;
opacity: .55;
margin-top: 3px;
font-size: 11px;
}
.pezy-el-decision .pdp-step.is-now {
background: #0e3a44;
color: #fff !important;
}
.pezy-el-decision .pdp-step.is-now small {
color: #fff !important;
opacity: .72;
}
.pezy-el-decision .pdp-scan .pdp-hero::before {
content: "";
position: absolute;
left: 50%;
top: 18px;
width: 54px;
height: 54px;
margin-left: -27px;
border-radius: 50%;
border: 2px solid rgba(61, 180, 120, .7);
box-shadow: 0 0 0 6px rgba(61, 180, 120, .12);
animation: pdpPulse 1.6s ease-out infinite;
pointer-events: none;
}
@keyframes pdpPulse {
50% { transform: scale(1.08); opacity: .7; }
}
.pezy-el-decision .pdp-ce {
position: absolute;
right: 6px;
bottom: 36px;
background: #111;
color: #fff;
font-size: 9px;
font-weight: 700;
letter-spacing: .08em;
padding: 4px 6px;
border-radius: 4px;
}
@media (max-width: 900px) {
.pezy-el-decision.pdp-pack { grid-template-columns: 1fr; gap: 24px; }
.pezy-el-decision .pdp-stage,
.pezy-el-decision .pdp-panel { min-height: 0; }
.pezy-el-decision .pdp-stage {
position: relative;
top: auto;
max-height: none;
}
.pezy-el-decision .pdp-copy,
.pezy-el-decision .pdp-intro,
.pezy-el-decision .pdp-item > .pdp-body {
max-width: none;
}
.pezy-el-decision .pdp-item > summary,
.pezy-el-decision .pdp-item > .pdp-body {
overflow: visible;
white-space: normal;
text-overflow: unset;
}
.pezy-el-decision .pdp-split { grid-template-columns: 120px 1fr; }
.pezy-el-decision .pdp-hero svg { width: 108px; }
}
@media (max-width: 560px) {
.pezy-el-decision .pdp-split { grid-template-columns: 1fr; }
.pezy-el-decision .pdp-hero { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.pezy-el-decision .pdp-item[open] .pdp-progress,
.pezy-el-decision .pdp-panel,
.pezy-el-decision .pdp-scan .pdp-hero::before { animation: none; }
.pezy-el-decision .pdp-progress { transform: none; }
}