/* Page-specific redesign: /products/podokonniki/ */
.vo-sills {
    --sills-ink: #314743;
    --sills-muted: #667873;
    --sills-peach: #ffaa83;
    --sills-peach-soft: #fff1e8;
    --sills-milk: #fffdfa;
    overflow: hidden;
    background: var(--sills-milk);
    color: var(--sills-ink);
    font-family: 'MullerRegular', Arial, sans-serif;
}

.vo-sills *,
.vo-sills *::before,
.vo-sills *::after { box-sizing: border-box; }

.vo-sills .container { max-width: 1170px; }

.vo-sills h1,
.vo-sills h2,
.vo-sills h3,
.vo-sills p { color: inherit; }

.vo-sills h1,
.vo-sills h2,
.vo-sills h3 { font-family: 'MullerBold', 'MullerRegular', Arial, sans-serif; }

.vo-sills p { text-indent: 0 !important; text-align: left !important; }

.vo-sills-hero {
    position: relative;
    padding: 82px 0 72px;
    background:
        radial-gradient(circle at 10% 12%, rgba(255,255,255,.92) 0 7%, transparent 28%),
        radial-gradient(circle at 89% 85%, rgba(255,255,255,.45) 0 8%, transparent 28%),
        linear-gradient(116deg, #fff8f3 0%, #ffdfcd 47%, #ffb28e 100%);
}

.vo-sills-hero::before,
.vo-sills-hero::after {
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 50%;
    content: '';
    pointer-events: none;
}

.vo-sills-hero::before { top: -148px; right: 8%; }
.vo-sills-hero::after { bottom: -175px; left: 4%; width: 340px; height: 340px; }

.vo-sills-hero .container { position: relative; z-index: 1; }

.vo-sills-eyebrow,
.vo-sills-kicker {
    display: inline-block;
    margin-bottom: 16px;
    color: #9c6045;
    font-size: 12px;
    font-family: 'MullerBold', Arial, sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.vo-sills-hero h1 {
    max-width: 800px;
    margin: 0 0 18px;
    color: var(--sills-ink);
    font-size: 48px;
    line-height: 1.08;
    text-align: left;
    text-shadow: none;
    text-transform: none;
}

.vo-sills-lead {
    max-width: 690px;
    margin: 0;
    color: #4f625d !important;
    font-size: 19px;
    line-height: 1.55;
}

.vo-sills-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.vo-sills-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 14px 26px;
    border: 1px solid var(--sills-peach);
    border-radius: 4px;
    background: var(--sills-peach);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 10px 20px rgba(199,105,68,.16);
    color: #fff !important;
    font-family: 'MullerBold', Arial, sans-serif;
    font-size: 15px;
    text-decoration: none !important;
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.vo-sills-btn:hover,
.vo-sills-btn:focus { color: #fff !important; background: #f49872; transform: translateY(-2px); text-decoration: none !important; }

.vo-sills-btn--ghost { background: rgba(255,255,255,.5); border-color: rgba(80,104,96,.35); box-shadow: none; color: var(--sills-ink) !important; }
.vo-sills-btn--ghost:hover,
.vo-sills-btn--ghost:focus { background: #fff; color: var(--sills-ink) !important; }

.vo-sills-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 33px 0 0;
    padding: 0;
    list-style: none;
}

.vo-sills-hero-points li { display: flex; align-items: center; color: #52645f; font-size: 14px; }
.vo-sills-hero-points li::before { width: 20px; height: 20px; margin-right: 9px; border-radius: 50%; background: var(--sills-peach); color: #fff; content: '✓'; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; text-align: center; }

.vo-sills-intro { padding: 76px 0 42px; background: #fff; }
.vo-sills-heading { max-width: 780px; margin: 0 auto 37px; text-align: center; }
.vo-sills-heading h2 { margin: 0; color: var(--sills-ink); font-size: 33px; line-height: 1.18; text-align: center; text-transform: none; }
.vo-sills-heading h2::after { display: block; width: 54px; height: 3px; margin: 19px auto 17px; border-radius: 3px; background: var(--sills-peach); content: ''; }
.vo-sills-heading p { margin: 0; color: var(--sills-muted) !important; font-size: 16px; line-height: 1.5; text-align: center !important; }

.vo-sills-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vo-sills-feature { min-height: 188px; padding: 25px 21px 22px; border: 1px solid #f0d7c9; border-radius: 7px; background: linear-gradient(145deg, #fffdfb, #fff5ee); box-shadow: 0 10px 25px rgba(41,63,57,.05); }
.vo-sills-feature:nth-child(even) { background: linear-gradient(145deg, #fbfffd, #eef7f3); border-color: #d7e9e1; }
.vo-sills-feature b { display: block; margin-bottom: 17px; color: #e88960; font-family: 'MullerBold', Arial, sans-serif; font-size: 14px; letter-spacing: .08em; }
.vo-sills-feature h3 { margin: 0 0 9px; color: var(--sills-ink); font-size: 19px; line-height: 1.2; text-transform: none; }
.vo-sills-feature p { margin: 0; color: var(--sills-muted) !important; font-size: 14px; line-height: 1.48; }

.vo-sills-brands { padding: 76px 0; background: #f9f5f1; }
.vo-sills-brand { margin: 0 0 43px; padding: 43px 42px 39px; border: 1px solid #efd8ca; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(44,62,56,.06); }
.vo-sills-brand:last-child { margin-bottom: 0; }
.vo-sills-brand--danke { border-color: #d7e8e1; background: #fcfffd; }
.vo-sills-brand-header { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(250px, .8fr); gap: 44px; align-items: start; margin-bottom: 30px; }
.vo-sills-brand h2 { margin: 0 0 15px; color: var(--sills-ink); font-size: 32px; line-height: 1.12; text-align: left; text-transform: none; }
.vo-sills-brand h2::after { display: block; width: 46px; height: 3px; margin-top: 17px; border-radius: 3px; background: var(--sills-peach); content: ''; }
.vo-sills-brand p { margin: 0; color: var(--sills-muted) !important; font-size: 15px; line-height: 1.62; }
.vo-sills-brand-note { padding: 21px 23px; border-left: 3px solid var(--sills-peach); border-radius: 0 5px 5px 0; background: var(--sills-peach-soft); color: #61746e; font-size: 15px; line-height: 1.52; }
.vo-sills-brand--danke .vo-sills-brand-note { border-left-color: #6b9b87; background: #eff8f3; }
.vo-sills-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vo-sills-gallery .gal-item { min-width: 0; margin: 0; border: 1px solid #efd8ca; border-radius: 5px; background: #fff; box-shadow: none; overflow: hidden; }
.vo-sills-gallery .gal-item a { display: block; overflow: hidden; cursor: zoom-in; }
.vo-sills-gallery .gal-item img { display: block; width: 100%; height: 178px; object-fit: cover; transform: scale(1); transform-origin: center center; transition: transform 1.3s cubic-bezier(.22, 1, .36, 1) !important; will-change: transform; }
.vo-sills-gallery .gal-item:hover img { transform: scale(1.065) !important; }
.vo-sills-brand--danke .gal-item { border-color: #d7e8e1; }

.vo-sills-choice { padding: 76px 0; background: #fff; }
.vo-sills-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vo-sills-step { position: relative; min-height: 220px; padding: 28px 28px 25px; border-radius: 7px; background: var(--sills-ink); color: #fff; overflow: hidden; }
.vo-sills-step:nth-child(2) { background: #617a72; }
.vo-sills-step:nth-child(3) { background: #d38a68; }
.vo-sills-step::after { position: absolute; right: -12px; bottom: -48px; color: rgba(255,255,255,.1); content: attr(data-step); font-family: 'MullerBold', Arial, sans-serif; font-size: 150px; line-height: 1; }
.vo-sills-step b { position: relative; z-index: 1; display: block; margin-bottom: 26px; color: #ffe3d1; font-family: 'MullerBold', Arial, sans-serif; font-size: 12px; letter-spacing: .12em; }
.vo-sills-step h3 { position: relative; z-index: 1; margin: 0 0 12px; color: #fff; font-size: 22px; line-height: 1.18; text-transform: none; }
.vo-sills-step p { position: relative; z-index: 1; margin: 0; color: rgba(255,255,255,.88) !important; font-size: 14px; line-height: 1.52; }

.vo-sills-callout { padding: 61px 0; background: linear-gradient(110deg, #173b35, #315a50); }
.vo-sills-callout-inner { display: flex; gap: 35px; align-items: center; justify-content: space-between; }
.vo-sills-callout h2 { max-width: 640px; margin: 0 0 10px; color: #fff; font-size: 32px; line-height: 1.16; text-align: left; text-transform: none; }
.vo-sills-callout p { max-width: 660px; margin: 0; color: rgba(255,255,255,.76) !important; font-size: 16px; line-height: 1.5; }
.vo-sills-callout .vo-sills-btn { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 991px) {
    .vo-sills-hero { padding: 58px 0; }
    .vo-sills-hero h1 { font-size: 39px; }
    .vo-sills-features { grid-template-columns: repeat(2, 1fr); }
    .vo-sills-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vo-sills-brand-header { grid-template-columns: 1fr; gap: 20px; }
    .vo-sills-steps { grid-template-columns: 1fr; }
    .vo-sills-step { min-height: 178px; }
    .vo-sills-callout-inner { display: block; }
    .vo-sills-callout .vo-sills-btn { margin-top: 24px; }
}

@media (max-width: 767px) {
    .vo-sills-hero { padding: 46px 0; }
    .vo-sills-hero h1 { font-size: 31px !important; }
    .vo-sills-lead { font-size: 16px; }
    .vo-sills-hero-points { display: block; }
    .vo-sills-hero-points li { margin-bottom: 10px; }
    .vo-sills-intro,
    .vo-sills-brands,
    .vo-sills-choice { padding: 49px 0; }
    .vo-sills-heading h2,
    .vo-sills-brand h2,
    .vo-sills-callout h2 { font-size: 27px !important; }
    .vo-sills-features { grid-template-columns: 1fr; }
    .vo-sills-brand { padding: 30px 20px; }
    .vo-sills-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vo-sills-gallery .gal-item img { height: 138px; }
    .vo-sills-actions { display: block; }
    .vo-sills-actions .vo-sills-btn { width: 100%; margin-bottom: 10px; }
    .vo-sills-callout { padding: 45px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vo-sills-gallery .gal-item img,
    .vo-sills-btn { transition: none !important; }
}