.breadcrumbs{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    color:#a8a29a;
    font-size:14px;
    line-height:1.4;
    font-family:"Manrope", sans-serif;
}

.breadcrumbs a{
    color:#d9b57a;
    text-decoration:none;
    transition:.2s ease;
}

.breadcrumbs a:hover{
    color:#f1dfc1;
}

.breadcrumbs-separator{
    color:#6f655a;
}

.breadcrumbs-current{
    color:#a8a29a;
}

.page-head{
    padding: 40px 0 0px;
}

.page-head h1{
    margin-top: 10px;
    font-family:"Cormorant Garamond", serif;
    font-weight:500;
    font-size: clamp(42px, 4vw, 80px);
    line-height:.92;
    letter-spacing:-.03em;
    text-wrap: balance;
    white-space: nowrap;
    color:#f5f0e8;
}



.page-head p{
    color: #a8a29a;
    max-width: 760px;
    line-height: 1.8;
    font-size:18px;
    font-family:"Manrope", sans-serif;
}

.section-title{
    margin: 0 0 22px;
    font-family:"Cormorant Garamond", serif;
    font-weight:500;
    font-size: clamp(28px, 2.8vw, 44px);
    line-height:.92;
    letter-spacing:-.03em;
    color:#f5f0e8;
}

.template-page-grid{
    display:grid;
    grid-template-columns: 1.4fr .6fr;
    gap:24px;
    align-items:start;
    padding-bottom: 30px;
}

.template-preview-big{
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    margin-bottom:20px;
}

.template-preview-big img{
    width:100%;
    display:block;
}

.template-info-block{
    background: rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:24px;
    margin-bottom:18px;
    color:#a8a29a;
    font-family:"Manrope", sans-serif;
    font-size:16px;
    line-height:1.8;
}

.template-info-block h2{
    font-family:"Cormorant Garamond", serif;
    font-weight:600;
    font-size: clamp(30px, 2.2vw, 48px);
    line-height:.95;
    letter-spacing:-.03em;
    margin-bottom: 12px;
    color:#f5f0e8;
}

.template-info-block p,
.template-info-block li,
.template-info-block span{
    color:#a8a29a;
    line-height:1.8;
    font-family:"Manrope", sans-serif;
    font-size:16px;
}

.template-full-description,
.template-full-description p,
.template-full-description li,
.template-full-description span{
    color:#a8a29a;
    line-height:1.8;
    font-family:"Manrope", sans-serif;
    font-size:16px;
}

.template-info-block a,
.template-full-description a{
    color:#d9b57a;
    text-decoration:none;
}

.template-info-block a:hover,
.template-full-description a:hover{
    color:#f1dfc1;
}

.template-info-block strong,
.template-info-block b,
.template-full-description strong,
.template-full-description b{
    color:#f5f0e8;
}

.template-info-block ul,
.template-full-description ul{
    margin: 0;
    padding-left: 20px;
}

.template-info-block li,
.template-full-description li{
    margin-bottom: 8px;
}

.template-sidebar{
    display:grid;
    gap:18px;
    position:sticky;
    top:90px;
}

.sidebar-box{
    background: rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:20px;
}

.sidebar-box h3{
    font-family:"Cormorant Garamond", serif;
    font-weight:600;
    font-size:28px;
    line-height:.95;
    letter-spacing:-.03em;
    margin-bottom:12px;
    color:#f5f0e8;
}

.sidebar-box p{
    color:#a8a29a;
    margin:0 0 10px;
    line-height:1.7;
    font-family:"Manrope", sans-serif;
    font-size:16px;
}

.template-order-form{
    display:grid;
    gap:14px;
}

.form-group{
    display:grid;
    gap:8px;
}

.form-group label{
    color:#f3efe7;
    font-family:"Manrope", sans-serif;
    font-size:14px;
}

.form-group input{
    width:100%;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.2);
    color:#fff;
    padding:14px 16px;
    outline:none;
    font-family:"Manrope", sans-serif;
    font-size:15px;
    transition:.2s ease;
}

.form-group input:focus{
    border-color:#d9b57a;
    box-shadow:0 0 0 3px rgba(217,181,122,.12);
}

.field-hint{
    margin-top:6px;
    font-family:"Manrope", sans-serif;
    font-size:13px;
    line-height:1.4;
    color:#a8a29a;
}

.field-hint.invalid{
    color:#ffb4b4;
}

.field-hint.valid{
    color:#f1dfc1;
}

.sidebar-actions{
    display:flex;
    gap:14px;
    align-items:stretch;
    margin-top:4px;
}

.sidebar-btn{
    flex:1;
    min-height:42px;
    padding:10px 18px;
    border-radius:14px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:10px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
    transition:.3s ease;
    white-space:nowrap;
    font-family:"Manrope", sans-serif;
    font-size:16px;
    line-height:1;
}

.sidebar-btn-order{
    border:none;
}

.sidebar-btn-demo{
    border:1px solid rgba(255,255,255,.12);
}

.sidebar-btn-order:hover,
.sidebar-btn-demo:hover{
    transform:translateY(-2px);
}

.sidebar-btn-order:hover{
    filter:brightness(1.03);
}

.sidebar-btn-demo:hover{
    border-color:rgba(217,181,122,.35);
}

.template-order-message{
    display:none;
    font-family:"Manrope", sans-serif;
    border-radius:14px;
    padding:12px 14px;
    margin-bottom:14px;
    border:1px solid rgba(217,181,122,.35);
    color:#f1dfc1;
    background:rgba(217,181,122,.08);
    line-height:1.6;
    font-size:15px;
}

.template-order-message.success{
    display:block;
    border-color: rgba(217,181,122,.35);
    color:#f1dfc1;
    background: rgba(217,181,122,.08);
}

.template-order-message.error{
    display:block;
    border-color: rgba(255, 99, 99, .35);
    color:#ffcccc;
    background: rgba(255, 99, 99, .08);
}

.hp-field{
    position:absolute;
    left:-9999px;
    top:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

@media (max-width: 1100px){
    .template-page-grid{
        grid-template-columns:1fr;
    }

    .template-sidebar{
        position:static;
    }
}

@media (max-width: 720px){
    .page-head h1{
        font-size: 42px;
        max-width: 100%;
        white-space: normal;
    }

    .page-head p{
        font-size:16px;
    }

    .template-info-block h2{
        font-size: 30px;
    }

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

    .sidebar-actions{
        flex-direction:column;
    }

    .sidebar-btn{
        width:100%;
    }
}