.vinyl-tiles-hero { isolation: isolate; background: #08264c; }
.vinyl-tiles-hero::after { background: linear-gradient(90deg, rgba(0, 19, 43, .88), rgba(0, 19, 43, .57)); opacity: 1; z-index: -1; }
.vinyl-tiles-hero__image { position: absolute; inset: 0; z-index: -2; }
.vinyl-tiles-hero__image picture, .vinyl-tiles-hero__image img { width: 100%; height: 100%; display: block; }
.vinyl-tiles-hero__image img { object-fit: cover; object-position: center 65%; }
.vinyl-tiles-hero .container { position: relative; }
.vinyl-tiles-hero h1, .vinyl-tiles-hero p { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
.vinyl-tiles-hero h1 { background: none; -webkit-text-fill-color: #fff; }
.vinyl-tiles-guide .technical-note, .vinyl-tiles-guide .warning-note { padding: clamp(18px, 3vw, 28px); margin: 28px 0; }
.vinyl-tiles-guide .warning-note { border-left: 5px solid #d39424; background: #fff9ef; }
.vinyl-tiles-guide .article-visual { margin: 28px 0; }
.vinyl-tiles-guide .article-visual picture { display: block; }
.vinyl-tiles-guide .article-visual img { display: block; width: 100%; height: auto; }
.vinyl-tiles-guide .article-visual__caption { padding: 16px 20px; font-size: .95rem; line-height: 1.6; }
.vinyl-tiles-guide .vinyl-table { table-layout: fixed; margin-bottom: 26px; }
.vinyl-tiles-guide .vinyl-table td, .vinyl-tiles-guide .vinyl-table th { text-align: left; overflow-wrap: anywhere; vertical-align: top; }
.vinyl-soft-cta, .vinyl-calculation { padding: clamp(20px, 3vw, 30px); border-radius: 16px; background: #08264c; border-top: 4px solid #94c11f; margin: 30px 0; color: #fff; }
.vinyl-soft-cta h3, .vinyl-soft-cta p, .vinyl-calculation h3, .vinyl-calculation p { color: #fff; }
.vinyl-calculation strong { color: #c1ea62; }
.vinyl-bathroom-zones, .vinyl-decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 26px 0; }
.vinyl-bathroom-zones > div, .vinyl-decisions > div { min-width: 0; padding: 24px; border: 1px solid #dce4ed; border-radius: 14px; background: #f5f8fc; }
.vinyl-label { display: block; margin-bottom: 12px; color: #08264c; font-size: .9rem; font-weight: 700; letter-spacing: .02em; }
.vinyl-tiles-guide .vinyl-layers { margin: 28px 0; padding: clamp(18px, 3vw, 28px); border-radius: 16px; border: 1px solid #cdd8e5; background: #f3f7fb; }
.vinyl-layers__row { margin: 0; min-height: 65px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid rgba(8, 38, 76, .2); color: #08264c; }
.vinyl-layers__row span { font-weight: 700; }
.vinyl-layers__row small { font-size: .88rem; line-height: 1.5; }
.vinyl-layers__row--wood { background: #dcb98d; border-radius: 9px 9px 0 0; }
.vinyl-layers__row--green { background: #d8e9b7; }
.vinyl-layers__row--grey { background: #dbe2e9; }
.vinyl-layers__row--tile { background: #eee7dc; }
.vinyl-layers__row--base { background: #bdc8d3; border-radius: 0 0 9px 9px; }
.vinyl-tiles-guide .vinyl-layers > p { margin: 18px 0 0; font-size: .95rem; line-height: 1.6; }
.vinyl-layers__variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.vinyl-tiles-guide .vinyl-layers__variant h4 { margin: 0 0 14px; padding: 14px; border-radius: 9px; background: #08264c; color: #fff; font-size: 1.05rem; line-height: 1.4; }
.vinyl-layers__variants .vinyl-layers__row { grid-template-columns: 1fr; gap: 6px; min-height: 104px; padding: 14px; }
.vinyl-layers__row--adhesive { background: #cadcf3; }
.vinyl-tiles-guide .vinyl-workflow { list-style: none; counter-reset: workflow; padding: 0; margin: 26px 0; }
.vinyl-workflow > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; position: relative; padding: 22px; margin: 0 0 18px; border: 1px solid #dce4ed; border-radius: 14px; background: #f5f8fc; }
.vinyl-workflow > li:not(:last-child)::after { content: ''; position: absolute; left: 43px; bottom: -19px; width: 2px; height: 18px; background: #8da4bd; }
.vinyl-workflow__number { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #08264c; color: #fff; font-weight: 700; font-size: 1.25rem; }
.vinyl-tiles-guide .vinyl-workflow h3 { margin: 0 0 8px; font-size: 1.2rem; line-height: 1.35; color: #08264c; }
.vinyl-tiles-guide .vinyl-workflow p { margin: 0; font-size: 1rem; line-height: 1.7; }
.vinyl-workflow > li.vinyl-workflow__pause { background: #fff9ec; border-color: #d5b36e; }
.vinyl-workflow__pause .vinyl-workflow__number { background: #76520b; }
.vinyl-workflow__note { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid #d5b36e; color: #624508; font-size: .95rem; font-weight: 600; line-height: 1.6; }
.vinyl-tiles-guide .article-key-points { margin-top: 30px; }
.vinyl-tiles-guide .article-section { padding: 28px 0; margin-bottom: 32px; scroll-margin-top: 155px; }
.vinyl-tiles-guide .table-of-contents li { margin: 0; padding: 0; line-height: 1.4; }
.vinyl-tiles-guide .table-of-contents a { min-height: 44px; padding: 8px 0; font-size: .95rem; }
.vinyl-tiles-guide .table-of-contents a.is-active { color: #16723d; border-bottom-color: #16723d; }
.vinyl-tiles-guide .article-content li { overflow-wrap: break-word; }
@media (min-width: 980.01px) {
    .vinyl-tiles-guide .article-sidebar { max-height: calc(100vh - 160px); }
}
@media (min-width: 768.01px) and (max-width: 980px) {
    .vinyl-tiles-guide .nav-container { flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 24px; }
    .vinyl-tiles-guide .logo { display: block; }
    .vinyl-tiles-guide .nav-cta { display: none; }
    .vinyl-tiles-guide .nav-links { flex-basis: 100%; justify-content: center; gap: 24px; }
    .vinyl-tiles-guide .nav-link { white-space: nowrap; }
    .vinyl-tiles-guide .dropdown-menu { position: fixed; top: 128px; left: 24px; right: 24px; width: auto; max-width: none; transform: none; }
    .vinyl-tiles-hero { padding: 80px 24px 60px; }
    .vinyl-tiles-hero h1 { font-size: 2.6rem; }
}
@media (max-width: 980px) {
    .vinyl-tiles-guide main.section { padding: 44px 16px; }
    .vinyl-tiles-guide .footer-contact-list li { flex-wrap: wrap; overflow-wrap: anywhere; }
    .vinyl-tiles-guide .article-sidebar .table-of-contents { margin-bottom: 26px; }
}
@media (max-width: 760px) {
    .vinyl-tiles-guide .vinyl-table, .vinyl-tiles-guide .vinyl-table tbody, .vinyl-tiles-guide .vinyl-table tr, .vinyl-tiles-guide .vinyl-table th, .vinyl-tiles-guide .vinyl-table td { display: block; width: 100%; }
    .vinyl-tiles-guide .vinyl-table { border: 0; table-layout: auto; background: transparent; overflow: visible; }
    .vinyl-tiles-guide .vinyl-table caption { display: block; width: 100%; border-radius: 12px; text-align: left; padding: 15px; }
    .vinyl-tiles-guide .vinyl-table thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
    .vinyl-tiles-guide .vinyl-table tbody tr { margin-top: 14px; border: 1px solid #dce4ed; border-radius: 12px; overflow: hidden; background: #fff; }
    .vinyl-tiles-guide .vinyl-table tbody th { background: #edf3f9; padding: 14px 16px; }
    .vinyl-tiles-guide .vinyl-table tbody td { padding: 14px 16px; border-top: 1px solid #e7ecf2; font-size: .95rem; }
    .vinyl-tiles-guide .vinyl-table td::before { content: attr(data-label); display: block; font-weight: 700; color: #08264c; margin-bottom: 7px; }
    .vinyl-bathroom-zones, .vinyl-decisions { grid-template-columns: 1fr; }
    .vinyl-layers__row { grid-template-columns: 1fr; gap: 5px; padding: 13px; }
    .vinyl-bathroom-zones > div, .vinyl-decisions > div { padding: 20px; }
    .vinyl-soft-cta .btn { width: 100%; white-space: normal; }
    .vinyl-layers__variants { grid-template-columns: 1fr; gap: 28px; }
    .vinyl-layers__variants .vinyl-layers__row { min-height: 0; }
    .vinyl-workflow > li { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 16px; }
    .vinyl-workflow__number { width: 34px; height: 34px; font-size: 1.05rem; }
    .vinyl-workflow > li:not(:last-child)::after { left: 32px; }
    .vinyl-tiles-guide .article-meta { gap: 14px; margin-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) { .vinyl-tiles-guide .reading-progress__bar { transition: none; } }
