/* v2.9 Configurator Experience Upgrade */

.product-hero{
max-width:1320px;
margin:34px auto 0;
padding:0 22px;
display:grid;
grid-template-columns:1.05fr .95fr;
gap:26px;
align-items:stretch;
}

.product-hero .visual{
position:relative;
overflow:hidden;
border-radius:34px;
padding:38px;
min-height:360px;
background:
radial-gradient(circle at top left, rgba(21,93,252,.18), transparent 34%),
radial-gradient(circle at bottom right, rgba(255,107,0,.16), transparent 28%),
linear-gradient(135deg,#ffffff,#f6f9ff);
border:1px solid #e5eaf1;
box-shadow:0 22px 60px rgba(15,23,42,.08);
display:flex;
flex-direction:column;
justify-content:flex-end;
}

.product-hero .visual:after{
content:"";
position:absolute;
right:-40px;
top:-40px;
width:220px;
height:220px;
border-radius:50%;
background:radial-gradient(circle, rgba(21,93,252,.14), transparent 70%);
}

.product-hero .visual strong{
position:relative;
z-index:2;
font-size:62px;
line-height:.92;
letter-spacing:-.06em;
color:#0f172a;
max-width:72%;
}

.product-hero .visual span{
position:relative;
z-index:2;
margin-top:16px;
display:inline-flex;
width:max-content;
padding:10px 14px;
border-radius:999px;
background:#eff6ff;
color:#155dfc;
font-size:12px;
font-weight:950;
letter-spacing:.14em;
text-transform:uppercase;
}

.product-hero>div:last-child{
background:#fff;
border:1px solid #e5eaf1;
border-radius:34px;
padding:34px;
box-shadow:0 22px 60px rgba(15,23,42,.06);
display:flex;
flex-direction:column;
justify-content:center;
}

.product-hero h1{
font-size:64px;
line-height:.9;
letter-spacing:-.065em;
margin:10px 0 18px;
color:#0f172a;
}

.product-hero p{
font-size:16px;
line-height:1.7;
color:#53657d;
max-width:92%;
margin:0;
}

.price-box{
margin-top:26px;
display:flex;
align-items:center;
gap:18px;
flex-wrap:wrap;
}

#live-total-price{
font-size:42px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
color:#0f172a;
}

.btn.primary{
height:56px;
padding:0 26px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
background:linear-gradient(135deg,#155dfc,#0b49d1);
color:#fff;
font-weight:950;
text-decoration:none;
box-shadow:0 16px 42px rgba(21,93,252,.24);
}

.configurator-shell{
margin-top:34px;
}

.configurator-header{
padding:22px 26px;
}

.configurator-header h2{
font-size:44px;
}

.configurator-layout{
grid-template-columns:300px 1fr;
gap:18px;
}

.sidebar-card{
padding:18px;
border-radius:24px;
}

.sidebar-card h3{
font-size:24px;
}

.summary-row{
padding:8px 0;
}

.summary-row strong{
font-size:13px;
}

.sidebar-total strong{
font-size:28px;
}

.config-btn{
height:52px;
font-size:15px;
}

.config-main{
gap:16px;
}

.config-area{
padding:20px;
border-radius:26px;
}

.config-area-head{
margin-bottom:14px;
padding-bottom:12px;
}

.config-area-head h3{
font-size:38px;
}

.config-groups{
gap:14px;
}

.config-group{
padding:16px;
border-radius:22px;
}

.group-top{
margin-bottom:12px;
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:14px;
}

.group-top h4{
font-size:28px;
margin:0;
}

.group-top p{
font-size:13px;
}

.option-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.config-option{
min-height:142px;
padding:16px;
border-radius:18px;
gap:10px;
}

.option-head{
padding-right:32px;
}

.option-head strong{
font-size:18px;
max-width:100%;
}

.price-tag{
font-size:13px;
padding:7px 10px;
}

.config-option p{
font-size:13px;
line-height:1.45;
}

.option-flags{
gap:6px;
}

.flag{
padding:6px 9px;
font-size:9px;
}

.config-option.selected{
transform:translateY(-1px);
}

.config-option.selected:after{
width:26px;
height:26px;
top:12px;
right:12px;
font-size:13px;
}

.rule-message,
.option-rule-message{
font-size:12px;
}

@media(max-width:1100px){
.product-hero{
grid-template-columns:1fr;
}
.product-hero .visual{
min-height:260px;
}
.product-hero .visual strong,
.product-hero h1{
font-size:48px;
}
.configurator-layout{
grid-template-columns:1fr;
}
}

@media(max-width:780px){
.product-hero{
padding:0 16px;
}
.product-hero .visual,
.product-hero>div:last-child{
padding:24px;
border-radius:24px;
}
.product-hero .visual strong,
.product-hero h1{
font-size:38px;
}
#live-total-price{
font-size:32px;
}
.price-box{
display:block;
}
.btn.primary{
margin-top:14px;
width:100%;
}
.configurator-shell{
padding:0 16px;
}
.option-grid{
grid-template-columns:1fr;
}
.configurator-header{
padding:18px;
}
.configurator-header h2{
font-size:34px;
}
.config-area-head h3{
font-size:30px;
}
.group-top{
display:block;
}
}