/* ==========================================================================
   HVEA Series – HeveaBoard  (/2024/products/hvea.css)
   Used by /en/products/ and its 6 finishing-design pages.
   No banner: [hb_header banner="no"]. Navbar/footer come from global.css.
   ========================================================================== */

/* 'body' prefix so these win over global.css whatever the load order */
body .nymainbody { margin-top: 0; background-color: #fff; }
body .navbar-spacer { height: 66px; }
@media (min-width: 1600px) { body .navbar-spacer { height: 74px; } }
@media (max-width: 768px)  { body .navbar-spacer { height: 54px; } }

.hv-wrap, .hv-wrap * { box-sizing: border-box; }
.hv-wrap { margin: 0 8.333%; padding: 56px 0 4vw; color: #000; }

/* ── Heading ─────────────────────────────────────────────── */
body .hv-wrap .hv-title {
    margin: 0 0 32px;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
    text-transform: uppercase;
}

/* ── Tabs + search ───────────────────────────────────────── */
.hv-bar {
    display: flex;
    align-items: flex-start;
    gap: 2em;
    padding-top: 1em;
    border-top: 1px solid #dfdfdf;
}
.hv-tabs { flex: 1; display: flex; flex-wrap: wrap; gap: 1em 5px; margin: 0; padding: 0; list-style: none; }
.hv-tabs a {
    display: block;
    padding: 0 1em;
    line-height: 1.875em;
    color: #000;
    text-decoration: none;
    background-color: #eee;
    border-radius: 1.875em;
    transition: background-color .4s, color .4s;
}
.hv-tabs a:hover, .hv-tabs a.is-on { color: #fff; background-color: #333; }
.hv-tabs span { position: relative; display: block; padding-right: 1.5em; font-size: 18px; }
.hv-tabs span::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

.hv-search { position: relative; flex: 0 0 27.5%; margin: 0; }
.hv-search::before {               /* magnifier icon */
    content: '';
    position: absolute; left: 16px; top: 50%;
    width: 11px; height: 11px;
    border: 2px solid #888; border-radius: 50%;
    transform: translateY(-60%);
    pointer-events: none;
}
.hv-search::after {
    content: '';
    position: absolute; left: 28px; top: 50%;
    width: 2px; height: 6px;
    background: #888;
    transform: translateY(15%) rotate(-45deg);
    pointer-events: none;
}
.hv-search input {
    width: 100%;
    height: 2.1875em;
    padding: 0 16px 0 44px;
    font: inherit;
    color: #000;
    background: none;
    border: 1px solid #bdbdbd;
    border-radius: 2.1875em;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.hv-search input:focus { border-color: #333; }
.hv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Grid ────────────────────────────────────────────────── */
.hv-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.6vw 1.667%;
    margin: 2.6vw 0 0;
    padding: 0;
    list-style: none;
}
.hv-card[hidden] { display: none; }

.hv-media { position: relative; overflow: hidden; background: #f4f4f4; }
.hv-media img { display: block; width: 100%; height: auto; }
.hv-layer, .hv-case {
    position: absolute; inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.hv-layer { opacity: 0; transition: opacity .4s; }
.hv-layer.is-on { opacity: 1; z-index: 1; }
/* cabinet picture appears on hover */
.hv-case { z-index: 2; opacity: 0; transition: opacity 1.5s cubic-bezier(.215,.61,.355,1), transform 1.5s cubic-bezier(.215,.61,.355,1); }
.hv-media:hover .hv-case { opacity: 1; transform: scale(1.08); }

.hv-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 1em; }
body .hv-wrap .hv-name { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.4; color: #000; }
.hv-swatches { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex-shrink: 0; max-width: 120px; padding-top: 5px; }
.hv-swatch {
    width: 13px; height: 13px;
    padding: 0;
    cursor: pointer;
    background-position: center;
    background-size: cover;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
    transition: box-shadow .2s;
}
.hv-swatch.is-on, .hv-swatch:hover { box-shadow: 0 0 0 1px #fff, 0 0 0 2px #333; }
.hv-swatch:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
.hv-code { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #666; overflow-wrap: anywhere; }

.hv-empty { margin: 3em 0; color: #666; text-align: center; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1080px) {
    .hv-wrap { margin: 0 2.604%; }
    body .hv-wrap .hv-title { font-size: 36px; }
    .hv-tabs span { font-size: 16px; }
}
@media (max-width: 810px) {
    .hv-bar { flex-direction: column; gap: 1em; }
    .hv-search { flex: none; width: 100%; }
    .hv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 2%; }
    body .hv-wrap .hv-title { font-size: 28px; margin-bottom: 20px; }
}
@media (max-width: 640px) {
    .hv-wrap { margin: 0 16px; padding-top: 32px; }
    .hv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 2%; }
    .hv-info { flex-direction: column; gap: 6px; }
    .hv-swatches { justify-content: flex-start; max-width: none; padding-top: 0; }
    .hv-swatch { width: 18px; height: 18px; }      /* bigger tap target */
    .hv-tabs span { font-size: 14px; }
    body .hv-wrap .hv-name { font-size: 16px; }
    .hv-code { font-size: 13px; }
}