{"id":2394,"date":"2026-10-06T16:14:19","date_gmt":"2026-10-06T16:14:19","guid":{"rendered":"https:\/\/wallpanelfactory.com\/?page_id=2394"},"modified":"2026-10-06T16:14:21","modified_gmt":"2026-10-06T16:14:21","slug":"wall-panel-colors-finishes","status":"publish","type":"page","link":"https:\/\/wallpanelfactory.com\/es\/wall-panel-colors-finishes\/","title":{"rendered":"Wall Panel Colors &amp; Finishes"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* =====================================================\n   XURAN WALL PANEL\n   COLOR LIBRARY\n   SECTION 01 \u2014 HERO\n===================================================== *\/\n\n.xuran-color-hero {\n\n    --bg: #f2f0eb;\n    --text: #171717;\n    --soft: #686761;\n    --taupe: #898271;\n    --red: #b51f27;\n    --line: #cbc8c0;\n    --dark: #19191b;\n\n    width: 100%;\n\n    padding:\n        55px 6vw\n        80px;\n\n    background: var(--bg);\n\n    color: var(--text);\n\n    overflow: hidden;\n}\n\n\n.xuran-color-hero *,\n.xuran-color-hero *::before,\n.xuran-color-hero *::after {\n    box-sizing: border-box;\n}\n\n\n.xuran-color-hero__inner {\n\n    width: 100%;\n\n    max-width: 1600px;\n\n    margin: 0 auto;\n}\n\n\n\/* =====================================================\n   TOP META\n===================================================== *\/\n\n.xuran-color-hero__top {\n\n    display: flex;\n\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 30px;\n\n    padding-bottom: 20px;\n\n    border-bottom:\n        1px solid var(--line);\n\n    color: var(--soft);\n\n    font-size: 7px;\n    font-weight: 700;\n\n    letter-spacing: 2px;\n\n    text-transform: uppercase;\n}\n\n\n.xuran-color-hero__top span:first-child {\n    color: var(--red);\n}\n\n\n\/* =====================================================\n   INTRO\n===================================================== *\/\n\n.xuran-color-hero__intro {\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(0, 1.35fr)\n        minmax(300px, .65fr);\n\n    align-items: end;\n\n    gap:\n        clamp(60px, 9vw, 150px);\n\n    padding:\n        75px 0\n        65px;\n}\n\n\n\/* =====================================================\n   HEADING\n===================================================== *\/\n\n.xuran-color-hero__eyebrow {\n\n    display: block;\n\n    margin-bottom: 22px;\n\n    color: var(--red);\n\n    font-size: 7px;\n    font-weight: 700;\n\n    letter-spacing: 2.2px;\n\n    text-transform: uppercase;\n}\n\n\n.xuran-color-hero__heading h1 {\n\n    max-width: 1050px;\n\n    margin: 0;\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size:\n        clamp(64px, 6.5vw, 108px);\n\n    font-weight: 400;\n\n    line-height: .9;\n\n    letter-spacing: -.06em;\n}\n\n\n.xuran-color-hero__heading h1 em {\n\n    color: var(--taupe);\n\n    font-weight: 400;\n    font-style: italic;\n}\n\n\n\/* =====================================================\n   DESCRIPTION\n===================================================== *\/\n\n.xuran-color-hero__description {\n\n    max-width: 430px;\n\n    padding-left: 24px;\n\n    border-left:\n        2px solid var(--red);\n}\n\n\n.xuran-color-hero__mini {\n\n    display: block;\n\n    margin-bottom: 16px;\n\n    color: var(--red);\n\n    font-size: 7px;\n    font-weight: 700;\n\n    letter-spacing: 1.8px;\n\n    text-transform: uppercase;\n}\n\n\n.xuran-color-hero__description p {\n\n    max-width: 390px;\n\n    margin: 0;\n\n    color: var(--soft);\n\n    font-size: 14px;\n\n    line-height: 1.8;\n}\n\n\n\/* =====================================================\n   HERO LINK\n===================================================== *\/\n\n.xuran-color-hero__link {\n\n    position: relative;\n\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 14px;\n\n    margin-top: 27px;\n\n    padding-bottom: 6px;\n\n    color: var(--text);\n\n    font-size: 7px;\n    font-weight: 700;\n\n    letter-spacing: 1.5px;\n\n    text-decoration: none;\n    text-transform: uppercase;\n\n    transition:\n        color .3s ease;\n}\n\n\n.xuran-color-hero__link::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    left: 0;\n    bottom: 0;\n\n    width: 100%;\n    height: 1px;\n\n    background: var(--text);\n\n    transform-origin: left;\n\n    transition:\n        transform .35s ease,\n        background .35s ease;\n}\n\n\n.xuran-color-hero__link > span {\n\n    font-size: 14px;\n\n    transition:\n        transform .3s ease;\n}\n\n\n.xuran-color-hero__link:hover {\n    color: var(--red);\n}\n\n\n.xuran-color-hero__link:hover::after {\n\n    background: var(--red);\n\n    transform: scaleX(.58);\n}\n\n\n.xuran-color-hero__link:hover > span {\n\n    transform:\n        translateY(4px);\n}\n\n\n\/* =====================================================\n   HERO VISUAL\n===================================================== *\/\n\n.xuran-color-hero__visual {\n\n    position: relative;\n\n    width: 100%;\n\n    height:\n        clamp(520px, 56vw, 790px);\n\n    background: #d7d3cb;\n\n    overflow: hidden;\n}\n\n\n.xuran-color-hero__visual > img {\n\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n\n    transition:\n        transform 1.1s\n        cubic-bezier(.2,.7,.2,1);\n}\n\n\n.xuran-color-hero__visual:hover > img {\n\n    transform:\n        scale(1.018);\n}\n\n\n\/* SOFT OVERLAY *\/\n\n.xuran-color-hero__visual::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    pointer-events: none;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(0,0,0,.12) 0%,\n            transparent 40%,\n            transparent 100%\n        );\n}\n\n\n\/* =====================================================\n   IMAGE INFO\n===================================================== *\/\n\n.xuran-color-hero__image-info {\n\n    position: absolute;\n\n    z-index: 2;\n\n    left: 28px;\n    bottom: 28px;\n\n    display: flex;\n\n    align-items: flex-start;\n\n    gap: 17px;\n\n    max-width: 350px;\n\n    padding:\n        16px 19px;\n\n    background:\n        rgba(25,25,27,.78);\n\n    color: #fff;\n\n    backdrop-filter:\n        blur(8px);\n\n    -webkit-backdrop-filter:\n        blur(8px);\n}\n\n\n.xuran-color-hero__number {\n\n    margin-top: 3px;\n\n    color:\n        rgba(255,255,255,.55);\n\n    font-size: 7px;\n    font-weight: 700;\n}\n\n\n.xuran-color-hero__image-info small {\n\n    display: block;\n\n    margin-bottom: 5px;\n\n    color:\n        rgba(255,255,255,.58);\n\n    font-size: 6px;\n    font-weight: 700;\n\n    letter-spacing: 1.7px;\n\n    text-transform: uppercase;\n}\n\n\n.xuran-color-hero__image-info strong {\n\n    display: block;\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size: 18px;\n    font-weight: 400;\n\n    line-height: 1.25;\n}\n\n\n\/* =====================================================\n   FLOATING MATERIAL SAMPLE\n===================================================== *\/\n\n.xuran-color-hero__sample {\n\n    position: absolute;\n\n    z-index: 3;\n\n    top: 28px;\n    right: 28px;\n\n    width:\n        clamp(190px, 17vw, 270px);\n\n    padding:\n        11px;\n\n    background:\n        rgba(242,240,235,.96);\n\n    box-shadow:\n        0 15px 45px\n        rgba(0,0,0,.12);\n\n    transition:\n        transform .4s ease;\n}\n\n\n.xuran-color-hero__sample:hover {\n\n    transform:\n        translateY(-6px);\n}\n\n\n.xuran-color-hero__sample-label {\n\n    display: block;\n\n    padding:\n        4px 3px\n        11px;\n\n    color: var(--soft);\n\n    font-size: 6px;\n    font-weight: 700;\n\n    letter-spacing: 1.8px;\n\n    text-transform: uppercase;\n}\n\n\n\/* SAMPLE IMAGE *\/\n\n.xuran-color-hero__sample-image {\n\n    width: 100%;\n\n    aspect-ratio: 1 \/ 1.08;\n\n    overflow: hidden;\n\n    background: #cbc7bd;\n}\n\n\n.xuran-color-hero__sample-image img {\n\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n\n    transition:\n        transform .6s ease;\n}\n\n\n.xuran-color-hero__sample:hover\n.xuran-color-hero__sample-image img {\n\n    transform:\n        scale(1.035);\n}\n\n\n\/* SAMPLE BOTTOM *\/\n\n.xuran-color-hero__sample-bottom {\n\n    display: flex;\n\n    justify-content: space-between;\n\n    gap: 10px;\n\n    padding:\n        12px 3px\n        3px;\n\n    color: var(--soft);\n\n    font-size: 5px;\n    font-weight: 700;\n\n    letter-spacing: 1.2px;\n}\n\n\n\/* =====================================================\n   BOTTOM INFORMATION\n===================================================== *\/\n\n.xuran-color-hero__bottom {\n\n    display: grid;\n\n    grid-template-columns:\n        1.15fr\n        repeat(3, 1fr);\n\n    margin-top: 28px;\n\n    border-top:\n        1px solid var(--line);\n\n    border-bottom:\n        1px solid var(--line);\n}\n\n\n\/* LEFT LABEL *\/\n\n.xuran-color-hero__bottom-label {\n\n    display: flex;\n\n    align-items: center;\n\n    min-height: 105px;\n\n    padding-right: 25px;\n\n    color: var(--red);\n\n    font-size: 7px;\n    font-weight: 700;\n\n    letter-spacing: 2px;\n\n    border-right:\n        1px solid var(--line);\n}\n\n\n\/* FEATURE *\/\n\n.xuran-color-hero__feature {\n\n    position: relative;\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 17px;\n\n    min-height: 105px;\n\n    padding:\n        20px 25px;\n\n    border-right:\n        1px solid var(--line);\n\n    transition:\n        background .35s ease,\n        padding-left .35s ease;\n}\n\n\n.xuran-color-hero__feature:last-child {\n    border-right: 0;\n}\n\n\n.xuran-color-hero__feature::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    top: -1px;\n    left: 0;\n\n    width: 0;\n    height: 2px;\n\n    background: var(--red);\n\n    transition:\n        width .35s ease;\n}\n\n\n.xuran-color-hero__feature:hover {\n\n    padding-left: 31px;\n\n    background:\n        rgba(255,255,255,.28);\n}\n\n\n.xuran-color-hero__feature:hover::before {\n\n    width: 52px;\n}\n\n\n.xuran-color-hero__feature > span {\n\n    color: var(--red);\n\n    font-size: 7px;\n    font-weight: 700;\n}\n\n\n.xuran-color-hero__feature small {\n\n    display: block;\n\n    margin-bottom: 6px;\n\n    color: var(--soft);\n\n    font-size: 6px;\n    font-weight: 700;\n\n    letter-spacing: 1.5px;\n}\n\n\n.xuran-color-hero__feature strong {\n\n    display: block;\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size: 17px;\n    font-weight: 400;\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media (max-width: 1050px) {\n\n    .xuran-color-hero {\n\n        padding-left: 5vw;\n        padding-right: 5vw;\n    }\n\n\n    .xuran-color-hero__intro {\n\n        grid-template-columns:\n            minmax(0, 1.1fr)\n            minmax(280px, .9fr);\n\n        gap: 50px;\n    }\n\n\n    .xuran-color-hero__heading h1 {\n\n        font-size:\n            clamp(58px, 7vw, 82px);\n    }\n\n\n    .xuran-color-hero__visual {\n\n        height:\n            clamp(500px, 65vw, 680px);\n    }\n\n\n    .xuran-color-hero__bottom {\n\n        grid-template-columns:\n            repeat(3, 1fr);\n    }\n\n\n    .xuran-color-hero__bottom-label {\n\n        grid-column:\n            1 \/ -1;\n\n        min-height: 60px;\n\n        border-right: 0;\n\n        border-bottom:\n            1px solid var(--line);\n    }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media (max-width: 700px) {\n\n    .xuran-color-hero {\n\n        padding:\n            45px 24px\n            70px;\n    }\n\n\n    \/* TOP *\/\n\n    .xuran-color-hero__top {\n\n        align-items: flex-start;\n    }\n\n\n    .xuran-color-hero__top span:last-child {\n\n        max-width: 140px;\n\n        text-align: right;\n\n        line-height: 1.5;\n    }\n\n\n    \/* INTRO *\/\n\n    .xuran-color-hero__intro {\n\n        display: block;\n\n        padding:\n            52px 0\n            45px;\n    }\n\n\n    .xuran-color-hero__heading h1 {\n\n        font-size:\n            clamp(48px, 13vw, 65px);\n\n        line-height: .92;\n    }\n\n\n    .xuran-color-hero__description {\n\n        max-width: none;\n\n        margin-top: 37px;\n\n        padding-left: 17px;\n    }\n\n\n    \/* IMAGE \u2014 NATURAL RATIO *\/\n\n    .xuran-color-hero__visual {\n\n        height: auto;\n\n        overflow: visible;\n    }\n\n\n    .xuran-color-hero__visual > img {\n\n        width: 100%;\n        height: auto;\n\n        object-fit: contain;\n    }\n\n\n    .xuran-color-hero__visual::after {\n\n        bottom: auto;\n\n        height: 70%;\n    }\n\n\n    \/* FLOATING SAMPLE *\/\n\n    .xuran-color-hero__sample {\n\n        position: relative;\n\n        top: auto;\n        right: auto;\n\n        width: 55%;\n\n        margin:\n            -45px 18px\n            0 auto;\n\n        box-shadow:\n            0 12px 35px\n            rgba(0,0,0,.12);\n    }\n\n\n    \/* IMAGE INFO *\/\n\n    .xuran-color-hero__image-info {\n\n        left: 14px;\n        bottom: 14px;\n\n        max-width: 58%;\n\n        padding:\n            12px 13px;\n    }\n\n\n    .xuran-color-hero__image-info strong {\n\n        font-size: 14px;\n    }\n\n\n    \/* BOTTOM *\/\n\n    .xuran-color-hero__bottom {\n\n        display: block;\n\n        margin-top: 55px;\n    }\n\n\n    .xuran-color-hero__bottom-label {\n\n        min-height: 58px;\n\n        padding: 0;\n\n        border-right: 0;\n    }\n\n\n    .xuran-color-hero__feature {\n\n        min-height: 78px;\n\n        padding:\n            16px 4px;\n\n        border-right: 0;\n\n        border-bottom:\n            1px solid var(--line);\n    }\n\n\n    .xuran-color-hero__feature:last-child {\n\n        border-bottom: 0;\n    }\n\n\n    .xuran-color-hero__feature:hover {\n\n        padding-left: 4px;\n    }\n\n}\n\n\n\/* =====================================================\n   SMALL MOBILE\n===================================================== *\/\n\n@media (max-width: 420px) {\n\n    .xuran-color-hero {\n\n        padding-left: 20px;\n        padding-right: 20px;\n    }\n\n\n    .xuran-color-hero__heading h1 {\n\n        font-size:\n            clamp(43px, 12.5vw, 55px);\n    }\n\n\n    .xuran-color-hero__sample {\n\n        width: 61%;\n\n        margin-top: -30px;\n    }\n\n\n    .xuran-color-hero__image-info {\n\n        max-width: 66%;\n    }\n\n}\n\n\n\/* =====================================================\n   REDUCED MOTION\n===================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .xuran-color-hero__visual > img,\n    .xuran-color-hero__sample,\n    .xuran-color-hero__sample-image img,\n    .xuran-color-hero__link,\n    .xuran-color-hero__link::after,\n    .xuran-color-hero__link > span,\n    .xuran-color-hero__feature,\n    .xuran-color-hero__feature::before {\n\n        transition: none;\n    }\n\n}\n<\/style>\n\n<!-- =====================================================\n     XURAN WALL PANEL\n     COLOR LIBRARY\n     SECTION 01 \u2014 HERO\n====================================================== -->\n\n<section class=\"xuran-color-hero\" id=\"top\">\n\n    <div class=\"xuran-color-hero__inner\">\n\n        <!-- TOP META -->\n        <div class=\"xuran-color-hero__top\">\n\n            <span>COLOR LIBRARY<\/span>\n\n            <span>COLOR \u00b7 TEXTURE \u00b7 SURFACE<\/span>\n\n        <\/div>\n\n\n        <!-- INTRO -->\n        <div class=\"xuran-color-hero__intro\">\n\n            <!-- LEFT -->\n            <div class=\"xuran-color-hero__heading\">\n\n                <span class=\"xuran-color-hero__eyebrow\">\n                    EXPLORE THE COLLECTION\n                <\/span>\n\n                <h1>\n                    Find the surface<br>\n                    <em>that fits your vision.<\/em>\n                <\/h1>\n\n            <\/div>\n\n\n            <!-- RIGHT -->\n            <div class=\"xuran-color-hero__description\">\n\n                <span class=\"xuran-color-hero__mini\">\n                    XURAN SURFACE COLLECTION\n                <\/span>\n\n                <p>\n                    Explore Xuran decorative surface colors,\n                    patterns and finishes for wall panel projects.\n                <\/p>\n\n                <a href=\"#color-library\" class=\"xuran-color-hero__link\">\n                    Explore the Color Library\n\n                    <span>\u2193<\/span>\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- HERO VISUAL -->\n        <div class=\"xuran-color-hero__visual\">\n\n            <img decoding=\"async\" src=\"https:\/\/wallpanelfactory.com\/wp-content\/uploads\/2026\/10\/wall-panel-colors.png\" alt=\"Xuran decorative wall panel colors and surface finishes\">\n\n            <!-- IMAGE INFO -->\n            <div class=\"xuran-color-hero__image-info\">\n\n                <span class=\"xuran-color-hero__number\">\n                    01\n                <\/span>\n\n                <div>\n                    <small>SURFACE COLLECTION<\/small>\n\n                    <strong>\n                        Explore color, texture\n                        and character.\n                    <\/strong>\n                <\/div>\n\n            <\/div>\n\n\n            <!-- FLOATING SAMPLE -->\n            <div class=\"xuran-color-hero__sample\">\n\n                <span class=\"xuran-color-hero__sample-label\">\n                    MATERIAL DETAIL\n                <\/span>\n\n                <div class=\"xuran-color-hero__sample-image\">\n\n                    <img decoding=\"async\" src=\"https:\/\/wallpanelfactory.com\/wp-content\/uploads\/2026\/10\/Meta-Pixel\u4ecb\u7ecd-2026-09-30T123720.736.png\" alt=\"Close-up decorative wall panel surface\">\n\n                <\/div>\n\n                <div class=\"xuran-color-hero__sample-bottom\">\n\n                    <span>COLOR<\/span>\n                    <span>TEXTURE<\/span>\n                    <span>FINISH<\/span>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- BOTTOM -->\n        <div class=\"xuran-color-hero__bottom\">\n\n            <div class=\"xuran-color-hero__bottom-label\">\n                DISCOVER THE SURFACE\n            <\/div>\n\n\n            <div class=\"xuran-color-hero__feature\">\n\n                <span>01<\/span>\n\n                <div>\n                    <small>COLOR<\/small>\n                    <strong>Find your tone.<\/strong>\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"xuran-color-hero__feature\">\n\n                <span>02<\/span>\n\n                <div>\n                    <small>TEXTURE<\/small>\n                    <strong>Explore the detail.<\/strong>\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"xuran-color-hero__feature\">\n\n                <span>03<\/span>\n\n                <div>\n                    <small>CHARACTER<\/small>\n                    <strong>Define the space.<\/strong>\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ========================================================\n   XURAN COLOR LIBRARY\n   SECTION 02 \u2014 COMPLETE CSS\n======================================================== *\/\n\n.xuran-cl {\n  --xr-bg:#f2f0eb;\n  --xr-soft:#e8e5de;\n  --xr-text:#171717;\n  --xr-muted:#686761;\n  --xr-accent:#898271;\n  --xr-red:#b51f27;\n  --xr-line:#cbc8c0;\n  --xr-dark:#19191b;\n\n  background:var(--xr-bg);\n  color:var(--xr-text);\n\n  padding:110px 0 100px;\n\n  font-family:Arial,Helvetica,sans-serif;\n}\n\n.xuran-cl *,\n.xuran-cl *::before,\n.xuran-cl *::after {\n  box-sizing:border-box;\n}\n\n.xuran-cl button,\n.xuran-cl input {\n  font:inherit;\n}\n\n.xuran-cl button {\n  color:inherit;\n}\n\n.xuran-cl__container {\n  width:min(1440px,calc(100% - 96px));\n  margin:auto;\n}\n\n\n\/* ========================================================\n   HEADER\n======================================================== *\/\n\n.xuran-cl__header {\n  padding-bottom:70px;\n}\n\n.xuran-cl__eyebrow {\n  display:flex;\n  align-items:center;\n  gap:13px;\n\n  margin-bottom:36px;\n\n  color:var(--xr-red);\n\n  font-size:10px;\n  font-weight:700;\n  letter-spacing:.19em;\n}\n\n.xuran-cl__eyebrow span {\n  width:28px;\n  height:1px;\n\n  background:var(--xr-red);\n\n  transition:width .35s ease;\n}\n\n.xuran-cl__header:hover .xuran-cl__eyebrow span {\n  width:42px;\n}\n\n.xuran-cl__heading {\n  display:grid;\n  grid-template-columns:1.35fr .65fr;\n\n  gap:80px;\n  align-items:end;\n}\n\n.xuran-cl__heading h2 {\n  margin:0;\n\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:clamp(58px,6.3vw,96px);\n  font-weight:400;\n  line-height:.92;\n  letter-spacing:-.045em;\n}\n\n.xuran-cl__heading h2 em {\n  color:var(--xr-accent);\n  font-weight:400;\n}\n\n.xuran-cl__intro {\n  max-width:390px;\n}\n\n.xuran-cl__intro small {\n  display:block;\n\n  margin-bottom:17px;\n\n  font-size:9px;\n  font-weight:700;\n  letter-spacing:.18em;\n}\n\n.xuran-cl__intro p {\n  margin:0;\n\n  color:var(--xr-muted);\n\n  font-size:14px;\n  line-height:1.75;\n}\n\n\n\/* ========================================================\n   SEARCH\n======================================================== *\/\n\n.xuran-cl__search {\n  display:grid;\n  grid-template-columns:25px 1fr auto;\n\n  align-items:center;\n  gap:18px;\n\n  min-height:78px;\n\n  border-top:1px solid var(--xr-text);\n  border-bottom:1px solid var(--xr-line);\n}\n\n.xuran-cl__search svg {\n  width:21px;\n\n  fill:none;\n  stroke:currentColor;\n  stroke-width:1.35;\n}\n\n.xuran-cl__search input {\n  width:100%;\n  min-width:0;\n\n  padding:0;\n\n  border:0;\n  outline:0;\n\n  background:transparent;\n\n  color:var(--xr-text);\n\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:20px;\n}\n\n.xuran-cl__search input::placeholder {\n  color:#8e8b84;\n}\n\n.xuran-cl__search button {\n  border:0;\n  background:transparent;\n\n  padding:10px 0;\n\n  color:var(--xr-text);\n\n  font-size:9px;\n  font-weight:700;\n  letter-spacing:.15em;\n\n  cursor:pointer;\n\n  transition:color .25s ease;\n}\n\n.xuran-cl__search button:hover {\n  color:var(--xr-red);\n}\n\n\n\/* ========================================================\n   FILTERS\n======================================================== *\/\n\n.xuran-cl__filters {\n  border-bottom:1px solid var(--xr-line);\n}\n\n.xuran-cl-filter {\n  display:grid;\n  grid-template-columns:210px minmax(0,1fr);\n\n  gap:32px;\n\n  padding:28px 0;\n\n  border-bottom:1px solid var(--xr-line);\n}\n\n.xuran-cl-filter:last-child {\n  border:0;\n}\n\n.xuran-cl-filter__label {\n  display:flex;\n  align-items:center;\n\n  gap:17px;\n\n  font-size:10px;\n  font-weight:700;\n  letter-spacing:.13em;\n\n  text-transform:uppercase;\n}\n\n.xuran-cl-filter__label small {\n  color:var(--xr-red);\n  font-size:8px;\n}\n\n.xuran-cl-filter__buttons {\n  display:flex;\n  flex-wrap:wrap;\n\n  gap:9px;\n}\n\n.xuran-cl-pill {\n  min-height:39px;\n\n  padding:0 17px;\n\n  border:1px solid var(--xr-line);\n  border-radius:100px;\n\n  background:transparent;\n\n  color:var(--xr-muted);\n\n  font-size:11px;\n\n  cursor:pointer;\n\n  transition:\n    color .25s ease,\n    background .25s ease,\n    border-color .25s ease,\n    transform .25s ease;\n}\n\n.xuran-cl-pill:hover {\n  color:var(--xr-text);\n\n  border-color:#99958b;\n\n  transform:translateY(-1px);\n}\n\n.xuran-cl-pill.is-active {\n  background:var(--xr-dark);\n  border-color:var(--xr-dark);\n\n  color:#fff;\n}\n\n\n\/* ========================================================\n   COLOR FAMILY\n======================================================== *\/\n\n.xuran-cl-colors {\n  display:flex;\n  flex-wrap:wrap;\n\n  gap:23px 28px;\n}\n\n.xuran-cl-color {\n  display:inline-flex;\n  align-items:center;\n\n  gap:9px;\n\n  padding:3px 0;\n\n  border:0;\n  background:transparent;\n\n  color:var(--xr-muted);\n\n  font-size:11px;\n\n  cursor:pointer;\n\n  transition:\n    color .25s ease,\n    transform .25s ease;\n}\n\n.xuran-cl-color:hover {\n  color:var(--xr-text);\n  transform:translateY(-1px);\n}\n\n.xuran-cl-color i {\n  position:relative;\n\n  width:20px;\n  height:20px;\n\n  flex:0 0 20px;\n\n  border:1px solid rgba(0,0,0,.14);\n  border-radius:50%;\n\n  background:var(--swatch);\n}\n\n.xuran-cl-color i::after {\n  content:\"\";\n\n  position:absolute;\n  inset:-5px;\n\n  border:1px solid transparent;\n  border-radius:50%;\n}\n\n.xuran-cl-color.is-active {\n  color:var(--xr-text);\n}\n\n.xuran-cl-color.is-active i::after {\n  border-color:var(--xr-text);\n}\n\n.xuran-cl-swatch--all {\n  background:\n    conic-gradient(\n      #d8c7a8 0 60deg,\n      #795b45 60deg 120deg,\n      #97958f 120deg 180deg,\n      #687760 180deg 240deg,\n      #647789 240deg 300deg,\n      #a75f61 300deg\n    ) !important;\n}\n\n.xuran-cl-swatch--mixed {\n  background:\n    linear-gradient(\n      135deg,\n      #d7c2a0 0 25%,\n      #74726e 25% 50%,\n      #6f7b65 50% 75%,\n      #806b73 75%\n    ) !important;\n}\n\n\n\/* ========================================================\n   RESULTS TOOLBAR\n======================================================== *\/\n\n.xuran-cl__toolbar {\n  display:grid;\n  grid-template-columns:1fr auto auto;\n\n  align-items:center;\n  gap:35px;\n\n  min-height:96px;\n\n  border-bottom:1px solid var(--xr-text);\n}\n\n.xuran-cl__count {\n  display:flex;\n  align-items:baseline;\n\n  gap:10px;\n\n  font-size:9px;\n  font-weight:700;\n  letter-spacing:.16em;\n}\n\n.xuran-cl__count strong {\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:25px;\n  font-weight:400;\n}\n\n.xuran-cl__reset {\n  display:flex;\n\n  gap:8px;\n\n  padding:10px 0;\n\n  border:0;\n  background:transparent;\n\n  color:var(--xr-muted);\n\n  font-size:10px;\n\n  cursor:pointer;\n\n  transition:color .25s ease;\n}\n\n.xuran-cl__reset span {\n  transition:transform .25s ease;\n}\n\n.xuran-cl__reset:hover {\n  color:var(--xr-red);\n}\n\n.xuran-cl__reset:hover span {\n  transform:translate(3px,-3px);\n}\n\n\n\/* ========================================================\n   COMPARE COLORS BUTTON\n\n   NORMAL:\n   - transparent\n   - black border\n   - black text\n\n   HOVER:\n   - black background\n   - white text\n======================================================== *\/\n\n.xuran-cl__compare {\n  display:flex;\n  align-items:center;\n\n  gap:15px;\n\n  min-height:47px;\n\n  padding:0 8px 0 20px;\n\n  border:1px solid var(--xr-dark);\n\n  background:transparent;\n  color:var(--xr-dark);\n\n  font-size:10px;\n  font-weight:700;\n  letter-spacing:.08em;\n\n  text-transform:uppercase;\n\n  cursor:pointer;\n\n  transition:\n    background .3s ease,\n    color .3s ease,\n    border-color .3s ease,\n    transform .3s ease;\n}\n\n.xuran-cl__compare b {\n  display:grid;\n  place-items:center;\n\n  width:31px;\n  height:31px;\n\n  border-radius:50%;\n\n  background:var(--xr-dark);\n  color:#fff;\n\n  font-size:9px;\n\n  transition:\n    background .3s ease,\n    color .3s ease,\n    transform .3s ease;\n}\n\n.xuran-cl__compare:disabled {\n  opacity:.35;\n\n  background:transparent;\n  color:var(--xr-dark);\n\n  cursor:default;\n}\n\n.xuran-cl__compare:not(:disabled):hover {\n  background:var(--xr-dark);\n  color:#fff;\n}\n\n.xuran-cl__compare:not(:disabled):hover b {\n  background:#fff;\n  color:var(--xr-dark);\n\n  transform:translateX(2px);\n}\n\n\n\/* ========================================================\n   PRODUCT GRID\n======================================================== *\/\n\n.xuran-cl-grid {\n  display:grid;\n\n  grid-template-columns:repeat(4,minmax(0,1fr));\n\n  column-gap:18px;\n  row-gap:58px;\n\n  padding:48px 0 60px;\n}\n\n\n\/* ========================================================\n   PRODUCT CARD\n======================================================== *\/\n\n.xuran-cl-card {\n  min-width:0;\n}\n\n.xuran-cl-card__image {\n  position:relative;\n\n  display:block;\n\n  width:100%;\n  aspect-ratio:4 \/ 5;\n\n  padding:0;\n\n  overflow:hidden;\n\n  border:0;\n\n  background:var(--xr-soft);\n\n  cursor:pointer;\n}\n\n.xuran-cl-card__image img {\n  display:block;\n\n  width:100%;\n  height:100%;\n\n  object-fit:cover;\n\n  transform:scale(1.001);\n\n  transition:transform .65s cubic-bezier(.2,.65,.3,1);\n}\n\n.xuran-cl-card:hover .xuran-cl-card__image img {\n  transform:scale(1.025);\n}\n\n.xuran-cl-card__image::after {\n  content:\"\";\n\n  position:absolute;\n  inset:0;\n\n  background:\n    linear-gradient(\n      transparent 55%,\n      rgba(0,0,0,.20)\n    );\n\n  opacity:0;\n\n  transition:opacity .3s ease;\n}\n\n.xuran-cl-card:hover .xuran-cl-card__image::after {\n  opacity:1;\n}\n\n.xuran-cl-card__number {\n  position:absolute;\n\n  top:15px;\n  left:15px;\n\n  z-index:2;\n\n  padding:7px 9px;\n\n  background:rgba(242,240,235,.92);\n\n  color:var(--xr-text);\n\n  font-size:8px;\n  font-weight:700;\n  letter-spacing:.1em;\n}\n\n.xuran-cl-card__view {\n  position:absolute;\n\n  right:16px;\n  bottom:16px;\n\n  z-index:3;\n\n  color:#fff;\n\n  font-size:9px;\n  font-weight:700;\n  letter-spacing:.12em;\n\n  opacity:0;\n\n  transform:translateY(7px);\n\n  transition:\n    opacity .3s ease,\n    transform .3s ease;\n}\n\n.xuran-cl-card:hover .xuran-cl-card__view {\n  opacity:1;\n  transform:translateY(0);\n}\n\n.xuran-cl-card__info {\n  padding-top:18px;\n}\n\n.xuran-cl-card__head {\n  display:grid;\n  grid-template-columns:minmax(0,1fr) auto;\n\n  gap:15px;\n}\n\n.xuran-cl-card__category {\n  display:block;\n\n  margin-bottom:7px;\n\n  color:var(--xr-muted);\n\n  font-size:8px;\n  font-weight:700;\n  letter-spacing:.12em;\n\n  text-transform:uppercase;\n}\n\n.xuran-cl-card__code {\n  margin:0;\n\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:clamp(20px,1.6vw,27px);\n  font-weight:400;\n\n  letter-spacing:-.025em;\n\n  overflow-wrap:anywhere;\n}\n\n.xuran-cl-card__name {\n  margin:6px 0 0;\n\n  min-height:18px;\n\n  color:var(--xr-muted);\n\n  font-size:11px;\n  line-height:1.5;\n}\n\n\n\/* ========================================================\n   ADD TO COMPARE +\n======================================================== *\/\n\n.xuran-cl-card__add {\n  position:relative;\n\n  width:39px;\n  height:39px;\n\n  border:1px solid var(--xr-line);\n  border-radius:50%;\n\n  background:transparent;\n\n  cursor:pointer;\n\n  transition:\n    background .3s ease,\n    border-color .3s ease,\n    transform .3s ease;\n}\n\n.xuran-cl-card__add::before,\n.xuran-cl-card__add::after {\n  content:\"\";\n\n  position:absolute;\n\n  top:50%;\n  left:50%;\n\n  background:var(--xr-text);\n\n  transform:translate(-50%,-50%);\n}\n\n.xuran-cl-card__add::before {\n  width:11px;\n  height:1px;\n}\n\n.xuran-cl-card__add::after {\n  width:1px;\n  height:11px;\n}\n\n.xuran-cl-card__add:hover {\n  background:var(--xr-dark);\n  border-color:var(--xr-dark);\n\n  transform:rotate(90deg);\n}\n\n.xuran-cl-card__add:hover::before,\n.xuran-cl-card__add:hover::after {\n  background:#fff;\n}\n\n.xuran-cl-card__add.is-selected {\n  background:var(--xr-red);\n  border-color:var(--xr-red);\n}\n\n.xuran-cl-card__add.is-selected::before {\n  background:#fff;\n}\n\n.xuran-cl-card__add.is-selected::after {\n  display:none;\n}\n\n\n\/* ========================================================\n   CARD META\n======================================================== *\/\n\n.xuran-cl-card__meta {\n  display:flex;\n\n  margin-top:15px;\n  padding-top:11px;\n\n  border-top:1px solid var(--xr-line);\n\n  color:var(--xr-muted);\n\n  font-size:9px;\n  letter-spacing:.06em;\n\n  text-transform:uppercase;\n}\n\n.xuran-cl-card__meta span + span::before {\n  content:\"\";\n\n  display:inline-block;\n\n  width:3px;\n  height:3px;\n\n  margin:0 9px 2px;\n\n  border-radius:50%;\n\n  background:var(--xr-red);\n}\n\n\n\/* ========================================================\n   LOADING \/ ERROR\n======================================================== *\/\n\n.xuran-cl-message {\n  grid-column:1 \/ -1;\n\n  padding:80px 20px;\n\n  text-align:center;\n\n  color:var(--xr-muted);\n\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:24px;\n}\n\n\n\/* ========================================================\n   LOAD MORE\n======================================================== *\/\n\n.xuran-cl-load {\n  padding:30px 0 20px;\n\n  text-align:center;\n}\n\n.xuran-cl-load button {\n  display:inline-flex;\n  justify-content:space-between;\n  align-items:center;\n\n  gap:40px;\n\n  min-width:210px;\n  min-height:54px;\n\n  padding:0 18px 0 23px;\n\n  border:1px solid var(--xr-dark);\n\n  background:transparent;\n  color:var(--xr-dark);\n\n  font-size:10px;\n  font-weight:700;\n  letter-spacing:.1em;\n\n  text-transform:uppercase;\n\n  cursor:pointer;\n\n  transition:\n    background .3s ease,\n    color .3s ease;\n}\n\n.xuran-cl-load button:hover {\n  background:var(--xr-dark);\n  color:#fff;\n}\n\n.xuran-cl-load button i {\n  font-style:normal;\n\n  transition:transform .3s ease;\n}\n\n.xuran-cl-load button:hover i {\n  transform:translateY(4px);\n}\n\n.xuran-cl-load p {\n  margin:15px 0 0;\n\n  color:var(--xr-muted);\n\n  font-size:9px;\n  letter-spacing:.08em;\n}\n\n\n\/* ========================================================\n   EMPTY STATE\n======================================================== *\/\n\n.xuran-cl-empty {\n  padding:100px 20px;\n\n  text-align:center;\n}\n\n.xuran-cl-empty small {\n  color:var(--xr-red);\n\n  font-size:9px;\n  font-weight:700;\n  letter-spacing:.16em;\n}\n\n.xuran-cl-empty h3 {\n  margin:18px 0 30px;\n\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:clamp(38px,5vw,68px);\n  font-weight:400;\n  line-height:.98;\n}\n\n.xuran-cl-empty h3 em {\n  color:var(--xr-accent);\n}\n\n.xuran-cl-empty button {\n  padding:14px 23px;\n\n  border:1px solid var(--xr-dark);\n\n  background:var(--xr-dark);\n  color:#fff;\n\n  cursor:pointer;\n\n  transition:\n    background .3s ease,\n    color .3s ease;\n}\n\n.xuran-cl-empty button:hover {\n  background:transparent;\n  color:var(--xr-dark);\n}\n\n\n\/* ========================================================\n   SELECTED COLORS BOTTOM BAR\n\n   CHANGED:\n   - warm beige background\n   - black text\n   - black border\n   - black controls\n======================================================== *\/\n\n.xuran-cl-tray {\n  position:fixed;\n\n  left:50%;\n  bottom:25px;\n\n  z-index:9990;\n\n  width:min(900px,calc(100% - 40px));\n\n  transform:translate(-50%,150%);\n\n  transition:transform .45s cubic-bezier(.2,.7,.3,1);\n}\n\n.xuran-cl-tray.is-visible {\n  transform:translate(-50%,0);\n}\n\n.xuran-cl-tray__inner {\n  position:relative;\n\n  display:grid;\n  grid-template-columns:auto 1fr auto;\n\n  gap:25px;\n  align-items:center;\n\n  min-height:90px;\n\n  padding:13px 60px 13px 20px;\n\n  background:var(--xr-bg);\n  color:var(--xr-dark);\n\n  border:1px solid var(--xr-dark);\n\n  box-shadow:0 20px 60px rgba(0,0,0,.15);\n}\n\n\n\/* SELECTED COLORS LABEL *\/\n\n.xuran-cl-tray__title small {\n  display:block;\n\n  margin-bottom:8px;\n\n  color:var(--xr-dark);\n\n  font-size:8px;\n  font-weight:700;\n  letter-spacing:.14em;\n}\n\n\n\/* SELECTED COUNT *\/\n\n.xuran-cl-tray__title strong {\n  color:var(--xr-dark);\n\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:19px;\n  font-weight:400;\n}\n\n\n\/* SELECTED PREVIEWS *\/\n\n.xuran-cl-tray__items {\n  display:flex;\n  gap:8px;\n}\n\n.xuran-cl-tray__item {\n  position:relative;\n\n  width:48px;\n  height:60px;\n\n  background:var(--xr-soft);\n\n  border:1px solid var(--xr-line);\n}\n\n.xuran-cl-tray__item img {\n  display:block;\n\n  width:100%;\n  height:100%;\n\n  object-fit:cover;\n}\n\n\n\/* REMOVE SELECTED COLOR *\/\n\n.xuran-cl-tray__item button {\n  position:absolute;\n\n  top:-5px;\n  right:-5px;\n\n  width:18px;\n  height:18px;\n\n  padding:0;\n\n  border:0;\n  border-radius:50%;\n\n  background:var(--xr-red);\n  color:#fff;\n\n  font-size:12px;\n  line-height:1;\n\n  cursor:pointer;\n\n  transition:\n    transform .25s ease,\n    background .25s ease;\n}\n\n.xuran-cl-tray__item button:hover {\n  transform:scale(1.1);\n}\n\n\n\/* ========================================================\n   SELECTED BAR COMPARE BUTTON\n\n   NORMAL:\n   - transparent\n   - black text\n   - black border\n\n   HOVER:\n   - black\n   - white text\n======================================================== *\/\n\n.xuran-cl-tray__compare {\n  min-height:45px;\n\n  padding:0 18px;\n\n  border:1px solid var(--xr-dark);\n\n  background:transparent;\n  color:var(--xr-dark);\n\n  font-size:9px;\n  font-weight:700;\n  letter-spacing:.1em;\n\n  text-transform:uppercase;\n\n  cursor:pointer;\n\n  transition:\n    background .3s ease,\n    color .3s ease,\n    transform .3s ease;\n}\n\n.xuran-cl-tray__compare:not(:disabled):hover {\n  background:var(--xr-dark);\n  color:#fff;\n}\n\n.xuran-cl-tray__compare:not(:disabled):hover span {\n  display:inline-block;\n\n  transform:translate(3px,-3px);\n}\n\n.xuran-cl-tray__compare span {\n  transition:transform .3s ease;\n}\n\n.xuran-cl-tray__compare:disabled {\n  opacity:.4;\n  cursor:default;\n}\n\n\n\/* SELECTED BAR CLOSE *\/\n\n.xuran-cl-tray__close {\n  position:absolute;\n\n  right:18px;\n  top:50%;\n\n  transform:translateY(-50%);\n\n  border:0;\n  background:transparent;\n\n  color:var(--xr-dark);\n\n  font-size:23px;\n\n  cursor:pointer;\n\n  transition:\n    color .3s ease,\n    transform .3s ease;\n}\n\n.xuran-cl-tray__close:hover {\n  color:var(--xr-red);\n\n  transform:\n    translateY(-50%)\n    rotate(90deg);\n}\n\n\n\/* ========================================================\n   DRAWER BACKDROP\n======================================================== *\/\n\n.xuran-cl-backdrop {\n  position:fixed;\n\n  inset:0;\n\n  z-index:9995;\n\n  background:rgba(20,20,20,.4);\n\n  opacity:0;\n  visibility:hidden;\n\n  transition:\n    opacity .35s ease,\n    visibility .35s ease;\n}\n\n.xuran-cl-backdrop.is-visible {\n  opacity:1;\n  visibility:visible;\n}\n\n\n\/* ========================================================\n   DETAIL DRAWER\n======================================================== *\/\n\n.xuran-cl-drawer {\n  position:fixed;\n\n  top:0;\n  right:0;\n\n  z-index:9996;\n\n  width:min(540px,100%);\n  height:100%;\n\n  overflow-y:auto;\n\n  background:var(--xr-bg);\n\n  transform:translateX(100%);\n\n  transition:transform .45s cubic-bezier(.2,.7,.3,1);\n}\n\n.xuran-cl-drawer.is-visible {\n  transform:translateX(0);\n}\n\n.xuran-cl-drawer__close {\n  position:absolute;\n\n  top:20px;\n  right:20px;\n\n  z-index:5;\n\n  width:42px;\n  height:42px;\n\n  border:0;\n  border-radius:50%;\n\n  background:rgba(242,240,235,.94);\n  color:var(--xr-dark);\n\n  font-size:25px;\n\n  cursor:pointer;\n\n  transition:\n    background .3s ease,\n    color .3s ease,\n    transform .3s ease;\n}\n\n.xuran-cl-drawer__close:hover {\n  background:var(--xr-dark);\n  color:#fff;\n\n  transform:rotate(90deg);\n}\n\n.xuran-cl-drawer__image {\n  aspect-ratio:4 \/ 4.3;\n\n  background:var(--xr-soft);\n}\n\n.xuran-cl-drawer__image img {\n  display:block;\n\n  width:100%;\n  height:100%;\n\n  object-fit:cover;\n}\n\n.xuran-cl-drawer__content {\n  padding:42px;\n}\n\n.xuran-cl-drawer__eyebrow {\n  color:var(--xr-red);\n\n  font-size:8px;\n  font-weight:700;\n  letter-spacing:.16em;\n}\n\n.xuran-cl-drawer h3 {\n  margin:12px 0 5px;\n\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:clamp(40px,5vw,60px);\n  font-weight:400;\n\n  overflow-wrap:anywhere;\n}\n\n.xuran-cl-drawer__name {\n  margin:0 0 28px;\n\n  color:var(--xr-accent);\n\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:20px;\n  font-style:italic;\n}\n\n.xuran-cl-drawer dl {\n  margin:0;\n\n  border-top:1px solid var(--xr-text);\n}\n\n.xuran-cl-drawer dl div {\n  display:grid;\n  grid-template-columns:1fr 1fr;\n\n  gap:20px;\n\n  padding:16px 0;\n\n  border-bottom:1px solid var(--xr-line);\n}\n\n.xuran-cl-drawer dt {\n  color:var(--xr-muted);\n\n  font-size:9px;\n  letter-spacing:.1em;\n\n  text-transform:uppercase;\n}\n\n.xuran-cl-drawer dd {\n  margin:0;\n\n  text-align:right;\n\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:15px;\n}\n\n\n\/* DRAWER COMPARE BUTTON *\/\n\n.xuran-cl-drawer__select {\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n\n  width:100%;\n\n  margin-top:30px;\n  padding:17px 20px;\n\n  border:1px solid var(--xr-dark);\n\n  background:var(--xr-dark);\n  color:#fff;\n\n  font-size:10px;\n  font-weight:700;\n  letter-spacing:.1em;\n\n  text-transform:uppercase;\n\n  cursor:pointer;\n\n  transition:\n    background .3s ease,\n    color .3s ease;\n}\n\n.xuran-cl-drawer__select:hover {\n  background:transparent;\n  color:var(--xr-dark);\n}\n\n.xuran-cl-drawer__select i {\n  font-size:20px;\n  font-style:normal;\n}\n\n\n\/* ========================================================\n   COMPARE MODAL\n======================================================== *\/\n\n.xuran-cl-modal {\n  position:fixed;\n\n  inset:0;\n\n  z-index:10000;\n\n  display:grid;\n  align-items:end;\n\n  padding:30px;\n\n  background:rgba(20,20,20,.65);\n\n  opacity:0;\n  visibility:hidden;\n\n  transition:\n    opacity .35s ease,\n    visibility .35s ease;\n}\n\n.xuran-cl-modal.is-visible {\n  opacity:1;\n  visibility:visible;\n}\n\n.xuran-cl-modal__panel {\n  max-height:calc(100vh - 60px);\n\n  overflow:auto;\n\n  padding:45px;\n\n  background:var(--xr-bg);\n}\n\n.xuran-cl-modal header {\n  display:flex;\n  justify-content:space-between;\n  align-items:flex-start;\n\n  margin-bottom:40px;\n}\n\n.xuran-cl-modal header small {\n  color:var(--xr-red);\n\n  font-size:9px;\n  font-weight:700;\n  letter-spacing:.16em;\n}\n\n.xuran-cl-modal h3 {\n  margin:10px 0 0;\n\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:clamp(40px,5vw,70px);\n  font-weight:400;\n  line-height:.95;\n}\n\n.xuran-cl-modal h3 em {\n  color:var(--xr-accent);\n}\n\n.xuran-cl-modal header button {\n  width:45px;\n  height:45px;\n\n  border:1px solid var(--xr-line);\n  border-radius:50%;\n\n  background:transparent;\n  color:var(--xr-dark);\n\n  font-size:25px;\n\n  cursor:pointer;\n\n  transition:\n    background .3s ease,\n    color .3s ease,\n    transform .3s ease;\n}\n\n.xuran-cl-modal header button:hover {\n  background:var(--xr-dark);\n  color:#fff;\n\n  transform:rotate(90deg);\n}\n\n.xuran-cl-modal__grid {\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n\n  gap:15px;\n}\n\n.xuran-cl-compare-item img {\n  display:block;\n\n  width:100%;\n  aspect-ratio:4 \/ 5;\n\n  object-fit:cover;\n\n  background:var(--xr-soft);\n}\n\n.xuran-cl-compare-item h4 {\n  margin:15px 0 5px;\n\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:22px;\n  font-weight:400;\n\n  overflow-wrap:anywhere;\n}\n\n.xuran-cl-compare-item strong {\n  display:block;\n\n  margin-bottom:8px;\n\n  color:var(--xr-accent);\n\n  font-family:Georgia,\"Times New Roman\",serif;\n  font-size:14px;\n  font-style:italic;\n  font-weight:400;\n}\n\n.xuran-cl-compare-item p {\n  margin:0;\n\n  color:var(--xr-muted);\n\n  font-size:9px;\n  line-height:1.7;\n\n  text-transform:uppercase;\n}\n\n\n\/* ========================================================\n   TABLET\n======================================================== *\/\n\n@media (max-width:1024px) {\n\n  .xuran-cl__container {\n    width:calc(100% - 56px);\n  }\n\n  .xuran-cl__heading {\n    grid-template-columns:1.15fr .85fr;\n\n    gap:45px;\n  }\n\n  .xuran-cl-filter {\n    grid-template-columns:155px 1fr;\n  }\n\n  .xuran-cl-grid {\n    grid-template-columns:repeat(3,1fr);\n  }\n\n  .xuran-cl-modal__grid {\n    grid-template-columns:repeat(2,1fr);\n  }\n\n}\n\n\n\/* ========================================================\n   MOBILE\n======================================================== *\/\n\n@media (max-width:767px) {\n\n  .xuran-cl {\n    padding:64px 0 80px;\n  }\n\n  .xuran-cl__container {\n    width:calc(100% - 36px);\n  }\n\n\n  \/* HEADER *\/\n\n  .xuran-cl__header {\n    padding-bottom:47px;\n  }\n\n  .xuran-cl__heading {\n    display:block;\n  }\n\n  .xuran-cl__heading h2 {\n    font-size:clamp(45px,13.3vw,62px);\n  }\n\n  .xuran-cl__intro {\n    margin-top:32px;\n  }\n\n\n  \/* SEARCH *\/\n\n  .xuran-cl__search {\n    grid-template-columns:20px minmax(0,1fr) auto;\n\n    gap:11px;\n\n    min-height:67px;\n  }\n\n  .xuran-cl__search input {\n    font-size:16px;\n  }\n\n\n  \/* FILTERS *\/\n\n  .xuran-cl-filter {\n    display:block;\n\n    padding:25px 0 28px;\n  }\n\n  .xuran-cl-filter__label {\n    margin-bottom:19px;\n  }\n\n  .xuran-cl-filter__buttons {\n    flex-wrap:nowrap;\n\n    overflow-x:auto;\n\n    padding:2px 0 7px;\n\n    scrollbar-width:none;\n    -webkit-overflow-scrolling:touch;\n  }\n\n  .xuran-cl-filter__buttons::-webkit-scrollbar {\n    display:none;\n  }\n\n  .xuran-cl-pill {\n    flex:0 0 auto;\n\n    min-height:37px;\n\n    padding:0 14px;\n\n    font-size:10px;\n  }\n\n\n  \/* COLOR FAMILY *\/\n\n  .xuran-cl-colors {\n    display:grid;\n\n    grid-template-columns:repeat(3,minmax(0,1fr));\n\n    gap:18px 10px;\n  }\n\n  .xuran-cl-color {\n    font-size:10px;\n  }\n\n\n  \/* TOOLBAR *\/\n\n  .xuran-cl__toolbar {\n    grid-template-columns:1fr auto;\n\n    gap:18px;\n\n    padding:20px 0;\n  }\n\n  .xuran-cl__compare {\n    grid-column:1 \/ -1;\n\n    width:100%;\n\n    justify-content:space-between;\n  }\n\n\n  \/* PRODUCT GRID *\/\n\n  .xuran-cl-grid {\n    grid-template-columns:repeat(2,minmax(0,1fr));\n\n    gap:38px 10px;\n\n    padding-top:32px;\n  }\n\n\n  \/* PRODUCT CARD *\/\n\n  .xuran-cl-card__info {\n    padding-top:13px;\n  }\n\n  .xuran-cl-card__head {\n    gap:7px;\n  }\n\n  .xuran-cl-card__category {\n    font-size:7px;\n  }\n\n  .xuran-cl-card__code {\n    font-size:clamp(16px,4.6vw,21px);\n  }\n\n  .xuran-cl-card__name {\n    font-size:9px;\n  }\n\n  .xuran-cl-card__add {\n    width:32px;\n    height:32px;\n  }\n\n  .xuran-cl-card__meta {\n    margin-top:11px;\n\n    font-size:7px;\n  }\n\n  .xuran-cl-card__number {\n    top:9px;\n    left:9px;\n\n    padding:5px 7px;\n\n    font-size:7px;\n  }\n\n  .xuran-cl-card__image::after {\n    opacity:.18;\n  }\n\n  .xuran-cl-card__view {\n    right:10px;\n    bottom:10px;\n\n    opacity:1;\n\n    transform:none;\n\n    font-size:7px;\n  }\n\n\n  \/* SELECTED COLORS BAR *\/\n\n  .xuran-cl-tray {\n    bottom:12px;\n\n    width:calc(100% - 24px);\n  }\n\n  .xuran-cl-tray__inner {\n    grid-template-columns:1fr auto;\n\n    gap:12px;\n\n    padding:14px 50px 14px 15px;\n  }\n\n  .xuran-cl-tray__items {\n    grid-column:1 \/ -1;\n  }\n\n  .xuran-cl-tray__item {\n    width:38px;\n    height:48px;\n  }\n\n\n  \/* DRAWER *\/\n\n  .xuran-cl-drawer__content {\n    padding:30px 22px 45px;\n  }\n\n\n  \/* COMPARE MODAL *\/\n\n  .xuran-cl-modal {\n    padding:10px;\n  }\n\n  .xuran-cl-modal__panel {\n    max-height:calc(100vh - 20px);\n\n    padding:25px 18px;\n  }\n\n  .xuran-cl-modal__grid {\n    grid-template-columns:repeat(2,1fr);\n\n    gap:10px;\n  }\n\n}\n\n\n\/* ========================================================\n   SMALL MOBILE\n======================================================== *\/\n\n@media (max-width:390px) {\n\n  .xuran-cl__container {\n    width:calc(100% - 28px);\n  }\n\n  .xuran-cl-colors {\n    grid-template-columns:repeat(2,1fr);\n  }\n\n}\n\n\n\/* ========================================================\n   ACCESSIBILITY\n======================================================== *\/\n\n.xuran-cl button:focus-visible,\n.xuran-cl input:focus-visible {\n  outline:2px solid var(--xr-red);\n  outline-offset:3px;\n}\n\n\n\/* ========================================================\n   REDUCED MOTION\n======================================================== *\/\n\n@media (prefers-reduced-motion:reduce) {\n\n  .xuran-cl *,\n  .xuran-cl *::before,\n  .xuran-cl *::after {\n    transition-duration:.01ms !important;\n    animation-duration:.01ms !important;\n    animation-iteration-count:1 !important;\n  }\n\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  \/* =====================================================\n     XURAN COLOR LIBRARY\n     COMPLETE INTERACTIVE SYSTEM\n  ===================================================== *\/\n\n\n  \/* =====================================================\n     1. FILE LOCATIONS\n\n     CHANGE THESE AFTER UPLOADING YOUR FILES TO WORDPRESS.\n  ===================================================== *\/\n\n  const DATA_URL =\n    \"\/wp-content\/uploads\/xuran-color-library\/Xuran_Color_Library_Coding_Data.json\";\n\n  const IMAGE_BASE =\n    \"\/wp-content\/uploads\/xuran-color-library\/images\/\";\n\n\n  \/* =====================================================\n     2. SETTINGS\n  ===================================================== *\/\n\n  const PER_PAGE = 12;\n  const MAX_COMPARE = 4;\n\n\n  \/* =====================================================\n     3. STATE\n  ===================================================== *\/\n\n  let products = [];\n  let filteredProducts = [];\n\n  let visibleCount = PER_PAGE;\n\n  let selectedProducts = [];\n\n  let activeProduct = null;\n\n  let filters = {\n    category: \"all\",\n    tone: \"all\",\n    color: \"all\",\n    search: \"\"\n  };\n\n\n  \/* =====================================================\n     4. ELEMENTS\n  ===================================================== *\/\n\n  const grid =\n    document.getElementById(\"xuranClGrid\");\n\n  const search =\n    document.getElementById(\"xuranClSearch\");\n\n  const clearSearch =\n    document.getElementById(\"xuranClClearSearch\");\n\n  const resultCount =\n    document.getElementById(\"xuranClResultCount\");\n\n  const resetButton =\n    document.getElementById(\"xuranClReset\");\n\n  const empty =\n    document.getElementById(\"xuranClEmpty\");\n\n  const emptyReset =\n    document.getElementById(\"xuranClEmptyReset\");\n\n  const loadArea =\n    document.getElementById(\"xuranClLoadArea\");\n\n  const loadMore =\n    document.getElementById(\"xuranClLoadMore\");\n\n  const showing =\n    document.getElementById(\"xuranClShowing\");\n\n\n  \/* Compare top *\/\n\n  const compareTop =\n    document.getElementById(\"xuranClCompareTop\");\n\n  const compareCount =\n    document.getElementById(\"xuranClCompareCount\");\n\n\n  \/* Tray *\/\n\n  const tray =\n    document.getElementById(\"xuranClTray\");\n\n  const trayCount =\n    document.getElementById(\"xuranClTrayCount\");\n\n  const trayItems =\n    document.getElementById(\"xuranClTrayItems\");\n\n  const trayCompare =\n    document.getElementById(\"xuranClTrayCompare\");\n\n  const trayClose =\n    document.getElementById(\"xuranClTrayClose\");\n\n\n  \/* Drawer *\/\n\n  const backdrop =\n    document.getElementById(\"xuranClBackdrop\");\n\n  const drawer =\n    document.getElementById(\"xuranClDrawer\");\n\n  const drawerClose =\n    document.getElementById(\"xuranClDrawerClose\");\n\n  const drawerImage =\n    document.getElementById(\"xuranClDrawerImage\");\n\n  const drawerCode =\n    document.getElementById(\"xuranClDrawerCode\");\n\n  const drawerName =\n    document.getElementById(\"xuranClDrawerName\");\n\n  const drawerCategory =\n    document.getElementById(\"xuranClDrawerCategory\");\n\n  const drawerColor =\n    document.getElementById(\"xuranClDrawerColor\");\n\n  const drawerTone =\n    document.getElementById(\"xuranClDrawerTone\");\n\n  const drawerCollection =\n    document.getElementById(\"xuranClDrawerCollection\");\n\n  const drawerSeries =\n    document.getElementById(\"xuranClDrawerSeries\");\n\n  const drawerSelect =\n    document.getElementById(\"xuranClDrawerSelect\");\n\n\n  \/* Modal *\/\n\n  const modal =\n    document.getElementById(\"xuranClModal\");\n\n  const modalClose =\n    document.getElementById(\"xuranClModalClose\");\n\n  const modalGrid =\n    document.getElementById(\"xuranClModalGrid\");\n\n\n  \/* =====================================================\n     5. HELPERS\n  ===================================================== *\/\n\n  function clean(value) {\n\n    return String(value || \"\").trim();\n\n  }\n\n\n  function normalize(value) {\n\n    return clean(value)\n      .toLowerCase()\n      .replace(\/\\s+\/g, \" \");\n\n  }\n\n\n  function escapeHTML(value) {\n\n    return String(value || \"\")\n      .replace(\/&\/g, \"&amp;\")\n      .replace(\/<\/g, \"&lt;\")\n      .replace(\/>\/g, \"&gt;\")\n      .replace(\/\"\/g, \"&quot;\")\n      .replace(\/'\/g, \"&#039;\");\n\n  }\n\n\n  function createImageURL(filename) {\n\n    if (!filename) {\n      return \"\";\n    }\n\n    \/*\n     * Encode every path segment separately so filenames\n     * containing spaces still work.\n     *\/\n\n    return IMAGE_BASE +\n      filename\n        .split(\"\/\")\n        .map(segment =>\n          encodeURIComponent(segment)\n        )\n        .join(\"\/\");\n\n  }\n\n\n  \/* =====================================================\n     6. NORMALIZE REAL DATA\n  ===================================================== *\/\n\n  function normalizeProduct(item, index) {\n\n    const code =\n      clean(item[\"Code\"]);\n\n\n    \/*\n     * IMPORTANT:\n     * Only use names that actually exist in the dataset.\n     * We do not invent missing color names.\n     *\/\n\n    const name =\n      clean(\n        item[\"Name\"] ||\n        item[\"Color Name\"] ||\n        item[\"Finish Name\"]\n      );\n\n\n    const id =\n      clean(item[\"Record ID\"]) ||\n      \"xuran-\" + (index + 1);\n\n\n    const category =\n      clean(\n        item[\"Website Category\"] ||\n        item[\"Category\"]\n      );\n\n\n    const tone =\n      clean(\n        item[\"Website Tone\"] ||\n        item[\"Tone\"]\n      );\n\n\n    const color =\n      clean(\n        item[\"Website Color Family\"] ||\n        item[\"Color Family\"]\n      );\n\n\n    const collection =\n      clean(item[\"Collection\"]);\n\n\n    const series =\n      clean(item[\"Series\"]);\n\n\n    const imageFile =\n      clean(item[\"Image File\"]);\n\n\n    const status =\n      clean(item[\"Publication Status\"]);\n\n\n    \/*\n     * Search index:\n     *\n     * CODE\n     * NAME\n     * CATEGORY\n     * COLOR FAMILY\n     * TONE\n     * COLLECTION\n     * SERIES\n     *\/\n\n    const searchIndex =\n      normalize([\n        code,\n        name,\n        category,\n        color,\n        tone,\n        collection,\n        series\n      ].filter(Boolean).join(\" \"));\n\n\n    return {\n\n      id: id,\n\n      code: code,\n\n      name: name,\n\n      category:\n        category || \"\u2014\",\n\n      tone:\n        tone || \"\u2014\",\n\n      color:\n        color || \"\u2014\",\n\n      collection:\n        collection || \"\u2014\",\n\n      series:\n        series || \"\u2014\",\n\n      status: status,\n\n      image:\n        createImageURL(imageFile),\n\n      searchIndex: searchIndex\n\n    };\n\n  }\n\n\n  \/* =====================================================\n     7. LOAD JSON\n  ===================================================== *\/\n\n  async function loadData() {\n\n    grid.innerHTML = `\n      <div class=\"xuran-cl-message\">\n        Loading Xuran surfaces...\n      <\/div>\n    `;\n\n\n    try {\n\n      const response =\n        await fetch(DATA_URL, {\n          cache: \"no-store\"\n        });\n\n\n      if (!response.ok) {\n\n        throw new Error(\n          \"HTTP \" + response.status\n        );\n\n      }\n\n\n      const json =\n        await response.json();\n\n\n      let records = [];\n\n\n      if (Array.isArray(json)) {\n\n        records = json;\n\n      }\n\n      else if (\n        Array.isArray(json.data)\n      ) {\n\n        records = json.data;\n\n      }\n\n      else if (\n        Array.isArray(json.finishes)\n      ) {\n\n        records = json.finishes;\n\n      }\n\n      else if (\n        Array.isArray(json.products)\n      ) {\n\n        records = json.products;\n\n      }\n\n\n      products =\n        records.map(\n          normalizeProduct\n        );\n\n\n      applyFilters();\n\n    }\n\n    catch (error) {\n\n      console.error(\n        \"Xuran Color Library:\",\n        error\n      );\n\n\n      grid.innerHTML = `\n        <div class=\"xuran-cl-message\">\n          Color Library data could not be loaded.\n        <\/div>\n      `;\n\n\n      resultCount.textContent = \"0\";\n\n      loadArea.hidden = true;\n\n    }\n\n  }\n\n\n  \/* =====================================================\n     8. SEARCH + FILTER\n  ===================================================== *\/\n\n  function applyFilters() {\n\n    const query =\n      normalize(filters.search);\n\n\n    filteredProducts =\n      products.filter(product => {\n\n\n        const categoryMatch =\n          filters.category === \"all\" ||\n          product.category ===\n            filters.category;\n\n\n        const toneMatch =\n          filters.tone === \"all\" ||\n          product.tone ===\n            filters.tone;\n\n\n        const colorMatch =\n          filters.color === \"all\" ||\n          product.color ===\n            filters.color;\n\n\n        \/*\n         * SEARCH CAN MATCH:\n         *\n         * 1. Product code\n         * 2. Actual color \/ finish name\n         * 3. Color family\n         * 4. Category\n         * 5. Tone\n         * 6. Collection\n         * 7. Series\n         *\/\n\n        const searchMatch =\n          !query ||\n          product.searchIndex.includes(query);\n\n\n        return (\n          categoryMatch &&\n          toneMatch &&\n          colorMatch &&\n          searchMatch\n        );\n\n      });\n\n\n    visibleCount = PER_PAGE;\n\n    renderProducts();\n\n  }\n\n\n  \/* =====================================================\n     9. PRODUCT CARD TEMPLATE\n  ===================================================== *\/\n\n  function cardTemplate(product, position) {\n\n    const isSelected =\n      selectedProducts.some(\n        selected =>\n          selected.id === product.id\n      );\n\n\n    const number =\n      String(position + 1)\n        .padStart(3, \"0\");\n\n\n    const displayCode =\n      product.code ||\n      \"Code pending\";\n\n\n    const nameHTML =\n      product.name\n        ? `\n          <p class=\"xuran-cl-card__name\">\n            ${escapeHTML(product.name)}\n          <\/p>\n        `\n        : `\n          <p class=\"xuran-cl-card__name\"><\/p>\n        `;\n\n\n    const imageHTML =\n      product.image\n        ? `\n          <img decoding=\"async\"\n            src=\"${escapeHTML(product.image)}\"\n            alt=\"${escapeHTML(\n              product.name ||\n              product.code ||\n              \"Xuran surface finish\"\n            )}\"\n            loading=\"lazy\"\n          >\n        `\n        : \"\";\n\n\n    return `\n\n      <article\n        class=\"xuran-cl-card\"\n        data-product-id=\"${escapeHTML(product.id)}\"\n      >\n\n        <button\n          class=\"xuran-cl-card__image\"\n          type=\"button\"\n          data-open=\"${escapeHTML(product.id)}\"\n          aria-label=\"View ${escapeHTML(displayCode)} details\"\n        >\n\n          ${imageHTML}\n\n          <span class=\"xuran-cl-card__number\">\n            ${number}\n          <\/span>\n\n          <span class=\"xuran-cl-card__view\">\n            VIEW \u2197\n          <\/span>\n\n        <\/button>\n\n\n        <div class=\"xuran-cl-card__info\">\n\n          <div class=\"xuran-cl-card__head\">\n\n            <div>\n\n              <span class=\"xuran-cl-card__category\">\n                ${escapeHTML(product.category)}\n              <\/span>\n\n              <h3 class=\"xuran-cl-card__code\">\n                ${escapeHTML(displayCode)}\n              <\/h3>\n\n              ${nameHTML}\n\n            <\/div>\n\n\n            <button\n              class=\"\n                xuran-cl-card__add\n                ${isSelected ? \"is-selected\" : \"\"}\n              \"\n              type=\"button\"\n              data-select=\"${escapeHTML(product.id)}\"\n              aria-label=\"${\n                isSelected\n                  ? \"Remove from comparison\"\n                  : \"Add to comparison\"\n              }\"\n              aria-pressed=\"${isSelected}\"\n            ><\/button>\n\n          <\/div>\n\n\n          <div class=\"xuran-cl-card__meta\">\n\n            <span>\n              ${escapeHTML(product.color)}\n            <\/span>\n\n            <span>\n              ${escapeHTML(product.tone)}\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n    `;\n\n  }\n\n\n  \/* =====================================================\n     10. RENDER\n  ===================================================== *\/\n\n  function renderProducts() {\n\n    const visible =\n      filteredProducts.slice(\n        0,\n        visibleCount\n      );\n\n\n    resultCount.textContent =\n      filteredProducts.length\n        .toLocaleString();\n\n\n    if (\n      filteredProducts.length === 0\n    ) {\n\n      grid.innerHTML = \"\";\n\n      grid.hidden = true;\n\n      empty.hidden = false;\n\n      loadArea.hidden = true;\n\n      return;\n\n    }\n\n\n    grid.hidden = false;\n\n    empty.hidden = true;\n\n    loadArea.hidden = false;\n\n\n    grid.innerHTML =\n      visible\n        .map(\n          (product, index) =>\n            cardTemplate(\n              product,\n              index\n            )\n        )\n        .join(\"\");\n\n\n    showing.textContent =\n      \"Showing \" +\n      visible.length.toLocaleString() +\n      \" of \" +\n      filteredProducts.length.toLocaleString() +\n      \" finishes\";\n\n\n    loadMore.hidden =\n      visible.length >=\n      filteredProducts.length;\n\n\n    bindCardEvents();\n\n  }\n\n\n  \/* =====================================================\n     11. CARD EVENTS\n  ===================================================== *\/\n\n  function bindCardEvents() {\n\n    grid\n      .querySelectorAll(\"[data-open]\")\n      .forEach(button => {\n\n        button.addEventListener(\n          \"click\",\n          function () {\n\n            const product =\n              findProduct(\n                this.dataset.open\n              );\n\n\n            if (product) {\n              openDrawer(product);\n            }\n\n          }\n        );\n\n      });\n\n\n    grid\n      .querySelectorAll(\"[data-select]\")\n      .forEach(button => {\n\n        button.addEventListener(\n          \"click\",\n          function () {\n\n            const product =\n              findProduct(\n                this.dataset.select\n              );\n\n\n            if (product) {\n              toggleSelection(product);\n            }\n\n          }\n        );\n\n      });\n\n  }\n\n\n  function findProduct(id) {\n\n    return products.find(\n      product =>\n        String(product.id) ===\n        String(id)\n    );\n\n  }\n\n\n  \/* =====================================================\n     12. FILTER BUTTONS\n  ===================================================== *\/\n\n  document\n    .querySelectorAll(\n      \".xuran-cl-filter__buttons\"\n    )\n    .forEach(group => {\n\n      group.addEventListener(\n        \"click\",\n        function (event) {\n\n          const button =\n            event.target.closest(\n              \".xuran-cl-pill\"\n            );\n\n\n          if (!button) {\n            return;\n          }\n\n\n          group\n            .querySelectorAll(\n              \".xuran-cl-pill\"\n            )\n            .forEach(item =>\n              item.classList.remove(\n                \"is-active\"\n              )\n            );\n\n\n          button.classList.add(\n            \"is-active\"\n          );\n\n\n          filters[\n            group.dataset.filterGroup\n          ] =\n            button.dataset.value;\n\n\n          applyFilters();\n\n        }\n      );\n\n    });\n\n\n  document\n    .querySelectorAll(\n      \".xuran-cl-colors\"\n    )\n    .forEach(group => {\n\n      group.addEventListener(\n        \"click\",\n        function (event) {\n\n          const button =\n            event.target.closest(\n              \".xuran-cl-color\"\n            );\n\n\n          if (!button) {\n            return;\n          }\n\n\n          group\n            .querySelectorAll(\n              \".xuran-cl-color\"\n            )\n            .forEach(item =>\n              item.classList.remove(\n                \"is-active\"\n              )\n            );\n\n\n          button.classList.add(\n            \"is-active\"\n          );\n\n\n          filters.color =\n            button.dataset.value;\n\n\n          applyFilters();\n\n        }\n      );\n\n    });\n\n\n  \/* =====================================================\n     13. SEARCH BY CODE OR NAME\n  ===================================================== *\/\n\n  let searchTimer;\n\n\n  search.addEventListener(\n    \"input\",\n    function () {\n\n      clearTimeout(searchTimer);\n\n\n      searchTimer =\n        setTimeout(\n          function () {\n\n            filters.search =\n              search.value;\n\n            applyFilters();\n\n          },\n          160\n        );\n\n    }\n  );\n\n\n  clearSearch.addEventListener(\n    \"click\",\n    function () {\n\n      search.value = \"\";\n\n      filters.search = \"\";\n\n      applyFilters();\n\n      search.focus();\n\n    }\n  );\n\n\n  \/* =====================================================\n     14. RESET FILTERS\n  ===================================================== *\/\n\n  function resetFilters() {\n\n    filters = {\n      category: \"all\",\n      tone: \"all\",\n      color: \"all\",\n      search: \"\"\n    };\n\n\n    search.value = \"\";\n\n\n    document\n      .querySelectorAll(\n        \".xuran-cl-pill, .xuran-cl-color\"\n      )\n      .forEach(button => {\n\n        button.classList.toggle(\n          \"is-active\",\n          button.dataset.value === \"all\"\n        );\n\n      });\n\n\n    applyFilters();\n\n  }\n\n\n  resetButton.addEventListener(\n    \"click\",\n    resetFilters\n  );\n\n\n  emptyReset.addEventListener(\n    \"click\",\n    resetFilters\n  );\n\n\n  \/* =====================================================\n     15. LOAD MORE\n  ===================================================== *\/\n\n  loadMore.addEventListener(\n    \"click\",\n    function () {\n\n      visibleCount += PER_PAGE;\n\n      renderProducts();\n\n    }\n  );\n\n\n  \/* =====================================================\n     16. SELECT COLORS\n  ===================================================== *\/\n\n  function toggleSelection(product) {\n\n    const index =\n      selectedProducts.findIndex(\n        selected =>\n          selected.id === product.id\n      );\n\n\n    if (index !== -1) {\n\n      selectedProducts.splice(\n        index,\n        1\n      );\n\n    }\n\n    else {\n\n      if (\n        selectedProducts.length >=\n        MAX_COMPARE\n      ) {\n\n        tray.classList.add(\n          \"is-visible\"\n        );\n\n        tray.setAttribute(\n          \"aria-hidden\",\n          \"false\"\n        );\n\n        return;\n\n      }\n\n\n      selectedProducts.push(\n        product\n      );\n\n    }\n\n\n    updateSelection();\n\n    renderProducts();\n\n    updateDrawerSelection();\n\n  }\n\n\n  function updateSelection() {\n\n    const count =\n      selectedProducts.length;\n\n\n    trayCount.textContent =\n      count;\n\n    compareCount.textContent =\n      count;\n\n\n    compareTop.disabled =\n      count < 2;\n\n    trayCompare.disabled =\n      count < 2;\n\n\n    if (count > 0) {\n\n      tray.classList.add(\n        \"is-visible\"\n      );\n\n      tray.setAttribute(\n        \"aria-hidden\",\n        \"false\"\n      );\n\n    }\n\n    else {\n\n      tray.classList.remove(\n        \"is-visible\"\n      );\n\n      tray.setAttribute(\n        \"aria-hidden\",\n        \"true\"\n      );\n\n    }\n\n\n    trayItems.innerHTML =\n      selectedProducts\n        .map(product => {\n\n          return `\n\n            <div\n              class=\"xuran-cl-tray__item\"\n              title=\"${escapeHTML(\n                product.code ||\n                product.name\n              )}\"\n            >\n\n              ${\n                product.image\n                  ? `\n                    <img decoding=\"async\"\n                      src=\"${escapeHTML(product.image)}\"\n                      alt=\"${escapeHTML(\n                        product.name ||\n                        product.code\n                      )}\"\n                    >\n                  `\n                  : \"\"\n              }\n\n              <button\n                type=\"button\"\n                data-remove=\"${escapeHTML(product.id)}\"\n                aria-label=\"Remove ${\n                  escapeHTML(\n                    product.code ||\n                    product.name\n                  )\n                }\"\n              >\n                \u00d7\n              <\/button>\n\n            <\/div>\n\n          `;\n\n        })\n        .join(\"\");\n\n\n    trayItems\n      .querySelectorAll(\n        \"[data-remove]\"\n      )\n      .forEach(button => {\n\n        button.addEventListener(\n          \"click\",\n          function () {\n\n            const product =\n              findProduct(\n                this.dataset.remove\n              );\n\n\n            if (product) {\n              toggleSelection(product);\n            }\n\n          }\n        );\n\n      });\n\n  }\n\n\n  trayClose.addEventListener(\n    \"click\",\n    function () {\n\n      tray.classList.remove(\n        \"is-visible\"\n      );\n\n      tray.setAttribute(\n        \"aria-hidden\",\n        \"true\"\n      );\n\n    }\n  );\n\n\n  \/* =====================================================\n     17. DETAIL DRAWER\n  ===================================================== *\/\n\n  function openDrawer(product) {\n\n    activeProduct = product;\n\n\n    drawerImage.src =\n      product.image || \"\";\n\n    drawerImage.alt =\n      product.name ||\n      product.code ||\n      \"Xuran surface\";\n\n\n    drawerCode.textContent =\n      product.code ||\n      \"Code pending\";\n\n\n    drawerName.textContent =\n      product.name || \"\";\n\n\n    drawerName.style.display =\n      product.name\n        ? \"block\"\n        : \"none\";\n\n\n    drawerCategory.textContent =\n      product.category;\n\n    drawerColor.textContent =\n      product.color;\n\n    drawerTone.textContent =\n      product.tone;\n\n    drawerCollection.textContent =\n      product.collection;\n\n    drawerSeries.textContent =\n      product.series;\n\n\n    updateDrawerSelection();\n\n\n    drawer.classList.add(\n      \"is-visible\"\n    );\n\n    backdrop.classList.add(\n      \"is-visible\"\n    );\n\n\n    drawer.setAttribute(\n      \"aria-hidden\",\n      \"false\"\n    );\n\n\n    document.body.style.overflow =\n      \"hidden\";\n\n  }\n\n\n  function closeDrawer() {\n\n    drawer.classList.remove(\n      \"is-visible\"\n    );\n\n    backdrop.classList.remove(\n      \"is-visible\"\n    );\n\n\n    drawer.setAttribute(\n      \"aria-hidden\",\n      \"true\"\n    );\n\n\n    document.body.style.overflow =\n      \"\";\n\n\n    activeProduct = null;\n\n  }\n\n\n  function updateDrawerSelection() {\n\n    if (!activeProduct) {\n      return;\n    }\n\n\n    const selected =\n      selectedProducts.some(\n        product =>\n          product.id ===\n          activeProduct.id\n      );\n\n\n    drawerSelect\n      .querySelector(\"span\")\n      .textContent =\n        selected\n          ? \"Remove from Compare\"\n          : \"Add to Compare\";\n\n\n    drawerSelect\n      .querySelector(\"i\")\n      .textContent =\n        selected\n          ? \"\u2212\"\n          : \"+\";\n\n  }\n\n\n  drawerSelect.addEventListener(\n    \"click\",\n    function () {\n\n      if (activeProduct) {\n\n        toggleSelection(\n          activeProduct\n        );\n\n      }\n\n    }\n  );\n\n\n  drawerClose.addEventListener(\n    \"click\",\n    closeDrawer\n  );\n\n\n  backdrop.addEventListener(\n    \"click\",\n    closeDrawer\n  );\n\n\n  \/* =====================================================\n     18. COMPARE MODAL\n  ===================================================== *\/\n\n  function openCompare() {\n\n    if (\n      selectedProducts.length < 2\n    ) {\n\n      return;\n\n    }\n\n\n    closeDrawer();\n\n\n    modalGrid.innerHTML =\n      selectedProducts\n        .map(product => {\n\n          return `\n\n            <article\n              class=\"xuran-cl-compare-item\"\n            >\n\n              ${\n                product.image\n                  ? `\n                    <img decoding=\"async\"\n                      src=\"${escapeHTML(product.image)}\"\n                      alt=\"${escapeHTML(\n                        product.name ||\n                        product.code\n                      )}\"\n                    >\n                  `\n                  : \"\"\n              }\n\n              <h4>\n                ${escapeHTML(\n                  product.code ||\n                  \"Code pending\"\n                )}\n              <\/h4>\n\n              ${\n                product.name\n                  ? `\n                    <strong>\n                      ${escapeHTML(product.name)}\n                    <\/strong>\n                  `\n                  : \"\"\n              }\n\n              <p>\n                ${escapeHTML(product.category)}\n                <br>\n\n                ${escapeHTML(product.color)}\n                \u00b7\n                ${escapeHTML(product.tone)}\n                <br>\n\n                ${escapeHTML(product.collection)}\n              <\/p>\n\n            <\/article>\n\n          `;\n\n        })\n        .join(\"\");\n\n\n    modal.classList.add(\n      \"is-visible\"\n    );\n\n\n    modal.setAttribute(\n      \"aria-hidden\",\n      \"false\"\n    );\n\n\n    document.body.style.overflow =\n      \"hidden\";\n\n  }\n\n\n  function closeCompare() {\n\n    modal.classList.remove(\n      \"is-visible\"\n    );\n\n\n    modal.setAttribute(\n      \"aria-hidden\",\n      \"true\"\n    );\n\n\n    document.body.style.overflow =\n      \"\";\n\n  }\n\n\n  compareTop.addEventListener(\n    \"click\",\n    openCompare\n  );\n\n\n  trayCompare.addEventListener(\n    \"click\",\n    openCompare\n  );\n\n\n  modalClose.addEventListener(\n    \"click\",\n    closeCompare\n  );\n\n\n  modal.addEventListener(\n    \"click\",\n    function (event) {\n\n      if (\n        event.target === modal\n      ) {\n\n        closeCompare();\n\n      }\n\n    }\n  );\n\n\n  \/* =====================================================\n     19. ESCAPE KEY\n  ===================================================== *\/\n\n  document.addEventListener(\n    \"keydown\",\n    function (event) {\n\n      if (\n        event.key !== \"Escape\"\n      ) {\n\n        return;\n\n      }\n\n\n      if (\n        modal.classList.contains(\n          \"is-visible\"\n        )\n      ) {\n\n        closeCompare();\n\n        return;\n\n      }\n\n\n      if (\n        drawer.classList.contains(\n          \"is-visible\"\n        )\n      ) {\n\n        closeDrawer();\n\n      }\n\n    }\n  );\n\n\n  \/* =====================================================\n     20. INITIALIZE\n  ===================================================== *\/\n\n  loadData();\n\n});\n<\/script>\n\n<section class=\"xuran-cl\" id=\"color-library\">\n\n  <div class=\"xuran-cl__container\">\n\n    <!-- HEADER -->\n    <header class=\"xuran-cl__header\">\n\n      <div class=\"xuran-cl__eyebrow\">\n        <span><\/span>\n        FIND YOUR FINISH\n      <\/div>\n\n      <div class=\"xuran-cl__heading\">\n\n        <h2>\n          Explore the<br>\n          <em>Xuran collection.<\/em>\n        <\/h2>\n\n        <div class=\"xuran-cl__intro\">\n          <small>XURAN SURFACE LIBRARY<\/small>\n\n          <p>\n            Search by color code or finish name, or explore\n            the collection by surface category, tone and color family.\n          <\/p>\n        <\/div>\n\n      <\/div>\n\n    <\/header>\n\n\n    <!-- SEARCH -->\n    <div class=\"xuran-cl__search\">\n\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <circle cx=\"11\" cy=\"11\" r=\"6.5\"><\/circle>\n        <path d=\"M16 16L21 21\"><\/path>\n      <\/svg>\n\n      <input id=\"xuranClSearch\" type=\"search\" placeholder=\"Search by color code or name...\" autocomplete=\"off\" spellcheck=\"false\" aria-label=\"Search by color code or finish name\">\n\n      <button id=\"xuranClClearSearch\" type=\"button\">\n        CLEAR\n      <\/button>\n\n    <\/div>\n\n\n    <!-- FILTERS -->\n    <div class=\"xuran-cl__filters\">\n\n      <!-- CATEGORY -->\n      <div class=\"xuran-cl-filter\">\n\n        <div class=\"xuran-cl-filter__label\">\n          <small>01<\/small>\n          Category\n        <\/div>\n\n        <div class=\"xuran-cl-filter__buttons\" data-filter-group=\"category\">\n\n          <button class=\"xuran-cl-pill is-active\" data-value=\"all\">\n            All\n          <\/button>\n\n          <button class=\"xuran-cl-pill\" data-value=\"Wood\">\n            Wood\n          <\/button>\n\n          <button class=\"xuran-cl-pill\" data-value=\"Marble &amp; Stone\">\n            Marble &amp; Stone\n          <\/button>\n\n          <button class=\"xuran-cl-pill\" data-value=\"Fabric Texture\">\n            Fabric Texture\n          <\/button>\n\n          <button class=\"xuran-cl-pill\" data-value=\"Solid Color\">\n            Solid Color\n          <\/button>\n\n          <button class=\"xuran-cl-pill\" data-value=\"Decorative Texture\">\n            Decorative Texture\n          <\/button>\n\n          <button class=\"xuran-cl-pill\" data-value=\"Mirror Surface\">\n            Mirror Surface\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- TONE -->\n      <div class=\"xuran-cl-filter\">\n\n        <div class=\"xuran-cl-filter__label\">\n          <small>02<\/small>\n          Tone\n        <\/div>\n\n        <div class=\"xuran-cl-filter__buttons\" data-filter-group=\"tone\">\n\n          <button class=\"xuran-cl-pill is-active\" data-value=\"all\">\n            All\n          <\/button>\n\n          <button class=\"xuran-cl-pill\" data-value=\"Light\">\n            Light\n          <\/button>\n\n          <button class=\"xuran-cl-pill\" data-value=\"Medium\">\n            Medium\n          <\/button>\n\n          <button class=\"xuran-cl-pill\" data-value=\"Dark\">\n            Dark\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- COLOR FAMILY -->\n      <div class=\"xuran-cl-filter\">\n\n        <div class=\"xuran-cl-filter__label\">\n          <small>03<\/small>\n          Color Family\n        <\/div>\n\n        <div class=\"xuran-cl-colors\" data-filter-group=\"color\">\n\n          <button class=\"xuran-cl-color is-active\" data-value=\"all\">\n            <i class=\"xuran-cl-swatch--all\"><\/i>\n            All\n          <\/button>\n\n          <button class=\"xuran-cl-color\" data-value=\"White\">\n            <i style=\"--swatch:#f3f1eb\"><\/i>\n            White\n          <\/button>\n\n          <button class=\"xuran-cl-color\" data-value=\"Beige\">\n            <i style=\"--swatch:#d8c7a8\"><\/i>\n            Beige\n          <\/button>\n\n          <button class=\"xuran-cl-color\" data-value=\"Brown\">\n            <i style=\"--swatch:#795b45\"><\/i>\n            Brown\n          <\/button>\n\n          <button class=\"xuran-cl-color\" data-value=\"Gray\">\n            <i style=\"--swatch:#97958f\"><\/i>\n            Gray\n          <\/button>\n\n          <button class=\"xuran-cl-color\" data-value=\"Black\">\n            <i style=\"--swatch:#222222\"><\/i>\n            Black\n          <\/button>\n\n          <button class=\"xuran-cl-color\" data-value=\"Gold\">\n            <i style=\"--swatch:#b89a59\"><\/i>\n            Gold\n          <\/button>\n\n          <button class=\"xuran-cl-color\" data-value=\"Orange\">\n            <i style=\"--swatch:#c8753e\"><\/i>\n            Orange\n          <\/button>\n\n          <button class=\"xuran-cl-color\" data-value=\"Red \/ Pink\">\n            <i style=\"--swatch:#a75f61\"><\/i>\n            Red \/ Pink\n          <\/button>\n\n          <button class=\"xuran-cl-color\" data-value=\"Green\">\n            <i style=\"--swatch:#687760\"><\/i>\n            Green\n          <\/button>\n\n          <button class=\"xuran-cl-color\" data-value=\"Blue\">\n            <i style=\"--swatch:#647789\"><\/i>\n            Blue\n          <\/button>\n\n          <button class=\"xuran-cl-color\" data-value=\"Purple\">\n            <i style=\"--swatch:#756579\"><\/i>\n            Purple\n          <\/button>\n\n          <button class=\"xuran-cl-color\" data-value=\"Mixed\">\n            <i class=\"xuran-cl-swatch--mixed\"><\/i>\n            Mixed\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- RESULTS TOOLBAR -->\n    <div class=\"xuran-cl__toolbar\">\n\n      <div class=\"xuran-cl__count\">\n        <strong id=\"xuranClResultCount\">0<\/strong>\n        <span>FINISHES<\/span>\n      <\/div>\n\n      <button id=\"xuranClReset\" class=\"xuran-cl__reset\" type=\"button\">\n        Reset filters\n        <span>\u2197<\/span>\n      <\/button>\n\n      <button id=\"xuranClCompareTop\" class=\"xuran-cl__compare\" type=\"button\" disabled=\"\">\n        <span>Compare Colors<\/span>\n        <b id=\"xuranClCompareCount\">0<\/b>\n      <\/button>\n\n    <\/div>\n\n\n    <!-- PRODUCT GRID -->\n    <div class=\"xuran-cl-grid\" id=\"xuranClGrid\" aria-live=\"polite\"><\/div>\n\n\n    <!-- NO RESULTS -->\n    <div class=\"xuran-cl-empty\" id=\"xuranClEmpty\" hidden=\"\">\n\n      <small>NO MATCHING FINISHES<\/small>\n\n      <h3>\n        Try another code,<br>\n        <em>name or color.<\/em>\n      <\/h3>\n\n      <button id=\"xuranClEmptyReset\" type=\"button\">\n        Reset Filters\n      <\/button>\n\n    <\/div>\n\n\n    <!-- LOAD MORE -->\n    <div class=\"xuran-cl-load\" id=\"xuranClLoadArea\">\n\n      <button id=\"xuranClLoadMore\" type=\"button\">\n        <span>Load More<\/span>\n        <i>\u2193<\/i>\n      <\/button>\n\n      <p id=\"xuranClShowing\"><\/p>\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- SELECTED COLORS TRAY -->\n  <aside class=\"xuran-cl-tray\" id=\"xuranClTray\" aria-hidden=\"true\">\n\n    <div class=\"xuran-cl-tray__inner\">\n\n      <div class=\"xuran-cl-tray__title\">\n\n        <small>SELECTED COLORS<\/small>\n\n        <strong>\n          <span id=\"xuranClTrayCount\">0<\/span>\n          \/ 4\n        <\/strong>\n\n      <\/div>\n\n      <div class=\"xuran-cl-tray__items\" id=\"xuranClTrayItems\"><\/div>\n\n      <button id=\"xuranClTrayCompare\" class=\"xuran-cl-tray__compare\" type=\"button\" disabled=\"\">\n        Compare\n        <span>\u2197<\/span>\n      <\/button>\n\n      <button id=\"xuranClTrayClose\" class=\"xuran-cl-tray__close\" type=\"button\" aria-label=\"Close selected colors\">\n        \u00d7\n      <\/button>\n\n    <\/div>\n\n  <\/aside>\n\n\n  <!-- DETAIL BACKDROP -->\n  <div class=\"xuran-cl-backdrop\" id=\"xuranClBackdrop\"><\/div>\n\n\n  <!-- DETAIL DRAWER -->\n  <aside class=\"xuran-cl-drawer\" id=\"xuranClDrawer\" aria-hidden=\"true\">\n\n    <button id=\"xuranClDrawerClose\" class=\"xuran-cl-drawer__close\" type=\"button\" aria-label=\"Close finish details\">\n      \u00d7\n    <\/button>\n\n\n    <div class=\"xuran-cl-drawer__image\">\n      <img decoding=\"async\" id=\"xuranClDrawerImage\" src=\"\" alt=\"\">\n    <\/div>\n\n\n    <div class=\"xuran-cl-drawer__content\">\n\n      <span class=\"xuran-cl-drawer__eyebrow\">\n        XURAN SURFACE\n      <\/span>\n\n      <h3 id=\"xuranClDrawerCode\"><\/h3>\n\n      <p class=\"xuran-cl-drawer__name\" id=\"xuranClDrawerName\"><\/p>\n\n\n      <dl>\n\n        <div>\n          <dt>Category<\/dt>\n          <dd id=\"xuranClDrawerCategory\"><\/dd>\n        <\/div>\n\n        <div>\n          <dt>Color Family<\/dt>\n          <dd id=\"xuranClDrawerColor\"><\/dd>\n        <\/div>\n\n        <div>\n          <dt>Tone<\/dt>\n          <dd id=\"xuranClDrawerTone\"><\/dd>\n        <\/div>\n\n        <div>\n          <dt>Collection<\/dt>\n          <dd id=\"xuranClDrawerCollection\"><\/dd>\n        <\/div>\n\n        <div>\n          <dt>Series<\/dt>\n          <dd id=\"xuranClDrawerSeries\"><\/dd>\n        <\/div>\n\n      <\/dl>\n\n\n      <button id=\"xuranClDrawerSelect\" class=\"xuran-cl-drawer__select\" type=\"button\">\n        <span>Add to Compare<\/span>\n        <i>+<\/i>\n      <\/button>\n\n    <\/div>\n\n  <\/aside>\n\n\n  <!-- COMPARE MODAL -->\n  <div class=\"xuran-cl-modal\" id=\"xuranClModal\" aria-hidden=\"true\">\n\n    <div class=\"xuran-cl-modal__panel\">\n\n      <header>\n\n        <div>\n          <small>COLOR COMPARISON<\/small>\n\n          <h3>\n            Compare your\n            <em>finishes.<\/em>\n          <\/h3>\n        <\/div>\n\n        <button id=\"xuranClModalClose\" type=\"button\" aria-label=\"Close comparison\">\n          \u00d7\n        <\/button>\n\n      <\/header>\n\n\n      <div class=\"xuran-cl-modal__grid\" id=\"xuranClModalGrid\"><\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ========================================================\n   XURAN COLOR LIBRARY\n   FINAL CTA SECTION\n======================================================== *\/\n\n.xuran-color-cta {\n  --cta-bg:#f2f0eb;\n  --cta-soft:#e8e5de;\n  --cta-text:#171717;\n  --cta-muted:#686761;\n  --cta-accent:#898271;\n  --cta-red:#b51f27;\n  --cta-line:#cbc8c0;\n  --cta-dark:#19191b;\n\n  width:100%;\n\n  background:var(--cta-bg);\n  color:var(--cta-text);\n\n  font-family:Arial,Helvetica,sans-serif;\n\n  overflow:hidden;\n}\n\n\n.xuran-color-cta *,\n.xuran-color-cta *::before,\n.xuran-color-cta *::after {\n  box-sizing:border-box;\n}\n\n\n\/* ========================================================\n   MAIN GRID\n======================================================== *\/\n\n.xuran-color-cta__wrap {\n  display:grid;\n\n  grid-template-columns:55% 45%;\n\n  width:100%;\n  min-height:760px;\n\n  border-top:1px solid var(--cta-line);\n  border-bottom:1px solid var(--cta-line);\n}\n\n\n\/* ========================================================\n   LEFT CONTENT\n======================================================== *\/\n\n.xuran-color-cta__content {\n  display:flex;\n  flex-direction:column;\n  justify-content:center;\n\n  padding:\n    clamp(70px,8vw,130px)\n    clamp(50px,7vw,120px);\n\n  position:relative;\n}\n\n\n\/* ========================================================\n   EYEBROW\n======================================================== *\/\n\n.xuran-color-cta__eyebrow {\n  display:flex;\n  align-items:center;\n\n  gap:14px;\n\n  margin-bottom:44px;\n\n  color:var(--cta-red);\n\n  font-size:9px;\n  font-weight:700;\n\n  letter-spacing:.19em;\n\n  text-transform:uppercase;\n}\n\n\n.xuran-color-cta__eyebrow span {\n  display:block;\n\n  width:31px;\n  height:1px;\n\n  background:var(--cta-red);\n\n  transition:width .4s ease;\n}\n\n\n.xuran-color-cta__content:hover\n.xuran-color-cta__eyebrow span {\n  width:48px;\n}\n\n\n\/* ========================================================\n   TITLE\n======================================================== *\/\n\n.xuran-color-cta__title {\n  margin:0;\n\n  max-width:720px;\n\n  font-family:\n    Georgia,\n    \"Times New Roman\",\n    serif;\n\n  font-size:\n    clamp(58px,6vw,104px);\n\n  font-weight:400;\n\n  line-height:.91;\n\n  letter-spacing:-.05em;\n}\n\n\n.xuran-color-cta__title em {\n  color:var(--cta-accent);\n\n  font-weight:400;\n}\n\n\n\/* ========================================================\n   BODY TEXT\n======================================================== *\/\n\n.xuran-color-cta__text {\n  max-width:520px;\n\n  margin:\n    clamp(35px,4vw,55px)\n    0\n    0;\n\n  color:var(--cta-muted);\n\n  font-size:14px;\n\n  line-height:1.8;\n}\n\n\n\/* ========================================================\n   ACTION BUTTONS\n======================================================== *\/\n\n.xuran-color-cta__actions {\n  display:flex;\n  flex-wrap:wrap;\n\n  gap:12px;\n\n  margin-top:43px;\n}\n\n\n.xuran-color-cta__button {\n  display:inline-flex;\n\n  align-items:center;\n  justify-content:space-between;\n\n  gap:40px;\n\n  min-height:56px;\n\n  padding:0 20px 0 24px;\n\n  text-decoration:none;\n\n  font-size:9px;\n  font-weight:700;\n\n  letter-spacing:.11em;\n\n  text-transform:uppercase;\n\n  transition:\n    background .3s ease,\n    color .3s ease,\n    border-color .3s ease,\n    transform .3s ease;\n}\n\n\n.xuran-color-cta__button i {\n  font-family:Arial,Helvetica,sans-serif;\n\n  font-size:16px;\n  font-style:normal;\n\n  transition:transform .3s ease;\n}\n\n\n\/* ========================================================\n   PRIMARY BUTTON\n======================================================== *\/\n\n.xuran-color-cta__button--primary {\n  min-width:265px;\n\n  border:1px solid var(--cta-dark);\n\n  background:var(--cta-dark);\n\n  color:#fff;\n}\n\n\n.xuran-color-cta__button--primary:hover {\n  background:transparent;\n\n  color:var(--cta-dark);\n}\n\n\n.xuran-color-cta__button--primary:hover i {\n  transform:translate(4px,-4px);\n}\n\n\n\/* ========================================================\n   SECONDARY BUTTON\n======================================================== *\/\n\n.xuran-color-cta__button--secondary {\n  min-width:190px;\n\n  border:1px solid var(--cta-dark);\n\n  background:transparent;\n\n  color:var(--cta-dark);\n}\n\n\n.xuran-color-cta__button--secondary:hover {\n  background:var(--cta-dark);\n\n  color:#fff;\n}\n\n\n.xuran-color-cta__button--secondary:hover i {\n  transform:translate(4px,-4px);\n}\n\n\n\/* ========================================================\n   BOTTOM META\n======================================================== *\/\n\n.xuran-color-cta__meta {\n  display:flex;\n  align-items:center;\n  flex-wrap:wrap;\n\n  gap:12px;\n\n  margin-top:65px;\n  padding-top:20px;\n\n  border-top:1px solid var(--cta-line);\n\n  color:var(--cta-muted);\n\n  font-size:8px;\n  font-weight:700;\n\n  letter-spacing:.12em;\n\n  text-transform:uppercase;\n}\n\n\n.xuran-color-cta__meta i {\n  display:block;\n\n  width:3px;\n  height:3px;\n\n  border-radius:50%;\n\n  background:var(--cta-red);\n}\n\n\n\/* ========================================================\n   RIGHT VISUAL\n======================================================== *\/\n\n.xuran-color-cta__visual {\n  position:relative;\n\n  min-height:760px;\n\n  overflow:hidden;\n\n  background:var(--cta-soft);\n}\n\n\n\/* ========================================================\n   IMAGE\n======================================================== *\/\n\n.xuran-color-cta__image {\n  position:absolute;\n\n  inset:0;\n\n  overflow:hidden;\n}\n\n\n.xuran-color-cta__image::after {\n  content:\"\";\n\n  position:absolute;\n\n  inset:0;\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(0,0,0,.02) 45%,\n      rgba(0,0,0,.25) 100%\n    );\n\n  pointer-events:none;\n}\n\n\n.xuran-color-cta__image img {\n  display:block;\n\n  width:100%;\n  height:100%;\n\n  object-fit:cover;\n\n  transform:scale(1.001);\n\n  transition:\n    transform 1s\n    cubic-bezier(.2,.65,.3,1);\n}\n\n\n.xuran-color-cta__visual:hover\n.xuran-color-cta__image img {\n  transform:scale(1.025);\n}\n\n\n\/* ========================================================\n   IMAGE LABEL\n======================================================== *\/\n\n.xuran-color-cta__image-label {\n  position:absolute;\n\n  left:30px;\n  bottom:30px;\n\n  z-index:3;\n\n  display:flex;\n  align-items:center;\n\n  gap:17px;\n\n  color:#fff;\n}\n\n\n.xuran-color-cta__image-label > span {\n  display:grid;\n  place-items:center;\n\n  width:39px;\n  height:39px;\n\n  border:1px solid rgba(255,255,255,.55);\n\n  border-radius:50%;\n\n  font-size:8px;\n  font-weight:700;\n}\n\n\n.xuran-color-cta__image-label div {\n  display:flex;\n  flex-direction:column;\n\n  gap:4px;\n}\n\n\n.xuran-color-cta__image-label small {\n  font-size:7px;\n  font-weight:700;\n\n  letter-spacing:.17em;\n}\n\n\n.xuran-color-cta__image-label strong {\n  font-family:\n    Georgia,\n    \"Times New Roman\",\n    serif;\n\n  font-size:17px;\n  font-weight:400;\n}\n\n\n\/* ========================================================\n   FLOATING EXPLORE TAG\n======================================================== *\/\n\n.xuran-color-cta__tag {\n  position:absolute;\n\n  top:28px;\n  right:28px;\n\n  z-index:4;\n\n  display:flex;\n\n  align-items:center;\n  justify-content:space-between;\n\n  gap:30px;\n\n  min-width:145px;\n  min-height:46px;\n\n  padding:0 14px 0 17px;\n\n  background:rgba(242,240,235,.94);\n\n  color:var(--cta-dark);\n\n  font-size:8px;\n  font-weight:700;\n\n  letter-spacing:.13em;\n\n  backdrop-filter:blur(8px);\n\n  transition:\n    background .3s ease,\n    color .3s ease;\n}\n\n\n.xuran-color-cta__tag i {\n  font-size:15px;\n  font-style:normal;\n\n  transition:transform .3s ease;\n}\n\n\n.xuran-color-cta__visual:hover\n.xuran-color-cta__tag {\n  background:var(--cta-dark);\n\n  color:#fff;\n}\n\n\n.xuran-color-cta__visual:hover\n.xuran-color-cta__tag i {\n  transform:translate(4px,-4px);\n}\n\n\n\/* ========================================================\n   TABLET\n======================================================== *\/\n\n@media (max-width:1024px) {\n\n  .xuran-color-cta__wrap {\n    grid-template-columns:52% 48%;\n\n    min-height:680px;\n  }\n\n\n  .xuran-color-cta__content {\n    padding:\n      80px\n      50px;\n  }\n\n\n  .xuran-color-cta__title {\n    font-size:\n      clamp(52px,7vw,76px);\n  }\n\n\n  .xuran-color-cta__visual {\n    min-height:680px;\n  }\n\n\n  .xuran-color-cta__actions {\n    display:block;\n  }\n\n\n  .xuran-color-cta__button {\n    width:100%;\n\n    margin-bottom:10px;\n  }\n\n}\n\n\n\/* ========================================================\n   MOBILE\n======================================================== *\/\n\n@media (max-width:767px) {\n\n  .xuran-color-cta__wrap {\n    display:flex;\n\n    flex-direction:column;\n\n    min-height:0;\n  }\n\n\n  \/* CONTENT *\/\n\n  .xuran-color-cta__content {\n    padding:\n      70px\n      18px\n      60px;\n  }\n\n\n  .xuran-color-cta__eyebrow {\n    margin-bottom:32px;\n\n    font-size:8px;\n  }\n\n\n  .xuran-color-cta__title {\n    max-width:100%;\n\n    font-size:\n      clamp(46px,13vw,64px);\n\n    line-height:.94;\n  }\n\n\n  .xuran-color-cta__text {\n    margin-top:30px;\n\n    font-size:13px;\n\n    line-height:1.75;\n  }\n\n\n  \/* BUTTONS *\/\n\n  .xuran-color-cta__actions {\n    display:block;\n\n    margin-top:34px;\n  }\n\n\n  .xuran-color-cta__button {\n    width:100%;\n\n    min-width:0;\n\n    min-height:54px;\n\n    margin:0 0 9px;\n\n    padding:0 18px;\n\n    gap:20px;\n  }\n\n\n  \/* META *\/\n\n  .xuran-color-cta__meta {\n    gap:9px;\n\n    margin-top:42px;\n\n    font-size:7px;\n\n    line-height:1.6;\n  }\n\n\n  \/* IMAGE *\/\n\n  .xuran-color-cta__visual {\n    min-height:0;\n\n    height:auto;\n\n    overflow:hidden;\n  }\n\n\n  .xuran-color-cta__image {\n    position:relative;\n\n    inset:auto;\n  }\n\n\n  .xuran-color-cta__image::after {\n    background:\n      linear-gradient(\n        180deg,\n        transparent 50%,\n        rgba(0,0,0,.28) 100%\n      );\n  }\n\n\n  .xuran-color-cta__image img {\n    width:100%;\n    height:auto;\n\n    aspect-ratio:auto;\n\n    object-fit:contain;\n  }\n\n\n  \/* LABEL *\/\n\n  .xuran-color-cta__image-label {\n    left:18px;\n    bottom:18px;\n  }\n\n\n  .xuran-color-cta__image-label strong {\n    font-size:14px;\n  }\n\n\n  \/* TAG *\/\n\n  .xuran-color-cta__tag {\n    top:16px;\n    right:16px;\n\n    min-width:120px;\n    min-height:41px;\n\n    gap:20px;\n  }\n\n}\n\n\n\/* ========================================================\n   SMALL MOBILE\n======================================================== *\/\n\n@media (max-width:390px) {\n\n  .xuran-color-cta__content {\n    padding-left:14px;\n    padding-right:14px;\n  }\n\n\n  .xuran-color-cta__title {\n    font-size:\n      clamp(42px,12.5vw,55px);\n  }\n\n\n  .xuran-color-cta__meta i {\n    display:none;\n  }\n\n\n  .xuran-color-cta__meta span {\n    width:100%;\n  }\n\n}\n\n\n\/* ========================================================\n   ACCESSIBILITY\n======================================================== *\/\n\n.xuran-color-cta a:focus-visible {\n  outline:2px solid var(--cta-red);\n\n  outline-offset:4px;\n}\n\n\n\/* ========================================================\n   REDUCED MOTION\n======================================================== *\/\n\n@media (prefers-reduced-motion:reduce) {\n\n  .xuran-color-cta *,\n  .xuran-color-cta *::before,\n  .xuran-color-cta *::after {\n    transition-duration:.01ms !important;\n  }\n\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  \/* =====================================================\n     XURAN COLOR LIBRARY\n     COMPLETE INTERACTIVE SYSTEM\n  ===================================================== *\/\n\n\n  \/* =====================================================\n     1. FILE LOCATIONS\n\n     CHANGE THESE AFTER UPLOADING YOUR FILES TO WORDPRESS.\n  ===================================================== *\/\n\n  const DATA_URL =\n    \"\/wp-content\/uploads\/xuran-color-library\/Xuran_Color_Library_Coding_Data.json\";\n\n  const IMAGE_BASE =\n    \"\/wp-content\/uploads\/xuran-color-library\/images\/\";\n\n\n  \/* =====================================================\n     2. SETTINGS\n  ===================================================== *\/\n\n  const PER_PAGE = 12;\n  const MAX_COMPARE = 4;\n\n\n  \/* =====================================================\n     3. STATE\n  ===================================================== *\/\n\n  let products = [];\n  let filteredProducts = [];\n\n  let visibleCount = PER_PAGE;\n\n  let selectedProducts = [];\n\n  let activeProduct = null;\n\n  let filters = {\n    category: \"all\",\n    tone: \"all\",\n    color: \"all\",\n    search: \"\"\n  };\n\n\n  \/* =====================================================\n     4. ELEMENTS\n  ===================================================== *\/\n\n  const grid =\n    document.getElementById(\"xuranClGrid\");\n\n  const search =\n    document.getElementById(\"xuranClSearch\");\n\n  const clearSearch =\n    document.getElementById(\"xuranClClearSearch\");\n\n  const resultCount =\n    document.getElementById(\"xuranClResultCount\");\n\n  const resetButton =\n    document.getElementById(\"xuranClReset\");\n\n  const empty =\n    document.getElementById(\"xuranClEmpty\");\n\n  const emptyReset =\n    document.getElementById(\"xuranClEmptyReset\");\n\n  const loadArea =\n    document.getElementById(\"xuranClLoadArea\");\n\n  const loadMore =\n    document.getElementById(\"xuranClLoadMore\");\n\n  const showing =\n    document.getElementById(\"xuranClShowing\");\n\n\n  \/* Compare top *\/\n\n  const compareTop =\n    document.getElementById(\"xuranClCompareTop\");\n\n  const compareCount =\n    document.getElementById(\"xuranClCompareCount\");\n\n\n  \/* Tray *\/\n\n  const tray =\n    document.getElementById(\"xuranClTray\");\n\n  const trayCount =\n    document.getElementById(\"xuranClTrayCount\");\n\n  const trayItems =\n    document.getElementById(\"xuranClTrayItems\");\n\n  const trayCompare =\n    document.getElementById(\"xuranClTrayCompare\");\n\n  const trayClose =\n    document.getElementById(\"xuranClTrayClose\");\n\n\n  \/* Drawer *\/\n\n  const backdrop =\n    document.getElementById(\"xuranClBackdrop\");\n\n  const drawer =\n    document.getElementById(\"xuranClDrawer\");\n\n  const drawerClose =\n    document.getElementById(\"xuranClDrawerClose\");\n\n  const drawerImage =\n    document.getElementById(\"xuranClDrawerImage\");\n\n  const drawerCode =\n    document.getElementById(\"xuranClDrawerCode\");\n\n  const drawerName =\n    document.getElementById(\"xuranClDrawerName\");\n\n  const drawerCategory =\n    document.getElementById(\"xuranClDrawerCategory\");\n\n  const drawerColor =\n    document.getElementById(\"xuranClDrawerColor\");\n\n  const drawerTone =\n    document.getElementById(\"xuranClDrawerTone\");\n\n  const drawerCollection =\n    document.getElementById(\"xuranClDrawerCollection\");\n\n  const drawerSeries =\n    document.getElementById(\"xuranClDrawerSeries\");\n\n  const drawerSelect =\n    document.getElementById(\"xuranClDrawerSelect\");\n\n\n  \/* Modal *\/\n\n  const modal =\n    document.getElementById(\"xuranClModal\");\n\n  const modalClose =\n    document.getElementById(\"xuranClModalClose\");\n\n  const modalGrid =\n    document.getElementById(\"xuranClModalGrid\");\n\n\n  \/* =====================================================\n     5. HELPERS\n  ===================================================== *\/\n\n  function clean(value) {\n\n    return String(value || \"\").trim();\n\n  }\n\n\n  function normalize(value) {\n\n    return clean(value)\n      .toLowerCase()\n      .replace(\/\\s+\/g, \" \");\n\n  }\n\n\n  function escapeHTML(value) {\n\n    return String(value || \"\")\n      .replace(\/&\/g, \"&amp;\")\n      .replace(\/<\/g, \"&lt;\")\n      .replace(\/>\/g, \"&gt;\")\n      .replace(\/\"\/g, \"&quot;\")\n      .replace(\/'\/g, \"&#039;\");\n\n  }\n\n\n  function createImageURL(filename) {\n\n    if (!filename) {\n      return \"\";\n    }\n\n    \/*\n     * Encode every path segment separately so filenames\n     * containing spaces still work.\n     *\/\n\n    return IMAGE_BASE +\n      filename\n        .split(\"\/\")\n        .map(segment =>\n          encodeURIComponent(segment)\n        )\n        .join(\"\/\");\n\n  }\n\n\n  \/* =====================================================\n     6. NORMALIZE REAL DATA\n  ===================================================== *\/\n\n  function normalizeProduct(item, index) {\n\n    const code =\n      clean(item[\"Code\"]);\n\n\n    \/*\n     * IMPORTANT:\n     * Only use names that actually exist in the dataset.\n     * We do not invent missing color names.\n     *\/\n\n    const name =\n      clean(\n        item[\"Name\"] ||\n        item[\"Color Name\"] ||\n        item[\"Finish Name\"]\n      );\n\n\n    const id =\n      clean(item[\"Record ID\"]) ||\n      \"xuran-\" + (index + 1);\n\n\n    const category =\n      clean(\n        item[\"Website Category\"] ||\n        item[\"Category\"]\n      );\n\n\n    const tone =\n      clean(\n        item[\"Website Tone\"] ||\n        item[\"Tone\"]\n      );\n\n\n    const color =\n      clean(\n        item[\"Website Color Family\"] ||\n        item[\"Color Family\"]\n      );\n\n\n    const collection =\n      clean(item[\"Collection\"]);\n\n\n    const series =\n      clean(item[\"Series\"]);\n\n\n    const imageFile =\n      clean(item[\"Image File\"]);\n\n\n    const status =\n      clean(item[\"Publication Status\"]);\n\n\n    \/*\n     * Search index:\n     *\n     * CODE\n     * NAME\n     * CATEGORY\n     * COLOR FAMILY\n     * TONE\n     * COLLECTION\n     * SERIES\n     *\/\n\n    const searchIndex =\n      normalize([\n        code,\n        name,\n        category,\n        color,\n        tone,\n        collection,\n        series\n      ].filter(Boolean).join(\" \"));\n\n\n    return {\n\n      id: id,\n\n      code: code,\n\n      name: name,\n\n      category:\n        category || \"\u2014\",\n\n      tone:\n        tone || \"\u2014\",\n\n      color:\n        color || \"\u2014\",\n\n      collection:\n        collection || \"\u2014\",\n\n      series:\n        series || \"\u2014\",\n\n      status: status,\n\n      image:\n        createImageURL(imageFile),\n\n      searchIndex: searchIndex\n\n    };\n\n  }\n\n\n  \/* =====================================================\n     7. LOAD JSON\n  ===================================================== *\/\n\n  async function loadData() {\n\n    grid.innerHTML = `\n      <div class=\"xuran-cl-message\">\n        Loading Xuran surfaces...\n      <\/div>\n    `;\n\n\n    try {\n\n      const response =\n        await fetch(DATA_URL, {\n          cache: \"no-store\"\n        });\n\n\n      if (!response.ok) {\n\n        throw new Error(\n          \"HTTP \" + response.status\n        );\n\n      }\n\n\n      const json =\n        await response.json();\n\n\n      let records = [];\n\n\n      if (Array.isArray(json)) {\n\n        records = json;\n\n      }\n\n      else if (\n        Array.isArray(json.data)\n      ) {\n\n        records = json.data;\n\n      }\n\n      else if (\n        Array.isArray(json.finishes)\n      ) {\n\n        records = json.finishes;\n\n      }\n\n      else if (\n        Array.isArray(json.products)\n      ) {\n\n        records = json.products;\n\n      }\n\n\n      products =\n        records.map(\n          normalizeProduct\n        );\n\n\n      applyFilters();\n\n    }\n\n    catch (error) {\n\n      console.error(\n        \"Xuran Color Library:\",\n        error\n      );\n\n\n      grid.innerHTML = `\n        <div class=\"xuran-cl-message\">\n          Color Library data could not be loaded.\n        <\/div>\n      `;\n\n\n      resultCount.textContent = \"0\";\n\n      loadArea.hidden = true;\n\n    }\n\n  }\n\n\n  \/* =====================================================\n     8. SEARCH + FILTER\n  ===================================================== *\/\n\n  function applyFilters() {\n\n    const query =\n      normalize(filters.search);\n\n\n    filteredProducts =\n      products.filter(product => {\n\n\n        const categoryMatch =\n          filters.category === \"all\" ||\n          product.category ===\n            filters.category;\n\n\n        const toneMatch =\n          filters.tone === \"all\" ||\n          product.tone ===\n            filters.tone;\n\n\n        const colorMatch =\n          filters.color === \"all\" ||\n          product.color ===\n            filters.color;\n\n\n        \/*\n         * SEARCH CAN MATCH:\n         *\n         * 1. Product code\n         * 2. Actual color \/ finish name\n         * 3. Color family\n         * 4. Category\n         * 5. Tone\n         * 6. Collection\n         * 7. Series\n         *\/\n\n        const searchMatch =\n          !query ||\n          product.searchIndex.includes(query);\n\n\n        return (\n          categoryMatch &&\n          toneMatch &&\n          colorMatch &&\n          searchMatch\n        );\n\n      });\n\n\n    visibleCount = PER_PAGE;\n\n    renderProducts();\n\n  }\n\n\n  \/* =====================================================\n     9. PRODUCT CARD TEMPLATE\n  ===================================================== *\/\n\n  function cardTemplate(product, position) {\n\n    const isSelected =\n      selectedProducts.some(\n        selected =>\n          selected.id === product.id\n      );\n\n\n    const number =\n      String(position + 1)\n        .padStart(3, \"0\");\n\n\n    const displayCode =\n      product.code ||\n      \"Code pending\";\n\n\n    const nameHTML =\n      product.name\n        ? `\n          <p class=\"xuran-cl-card__name\">\n            ${escapeHTML(product.name)}\n          <\/p>\n        `\n        : `\n          <p class=\"xuran-cl-card__name\"><\/p>\n        `;\n\n\n    const imageHTML =\n      product.image\n        ? `\n          <img decoding=\"async\"\n            src=\"${escapeHTML(product.image)}\"\n            alt=\"${escapeHTML(\n              product.name ||\n              product.code ||\n              \"Xuran surface finish\"\n            )}\"\n            loading=\"lazy\"\n          >\n        `\n        : \"\";\n\n\n    return `\n\n      <article\n        class=\"xuran-cl-card\"\n        data-product-id=\"${escapeHTML(product.id)}\"\n      >\n\n        <button\n          class=\"xuran-cl-card__image\"\n          type=\"button\"\n          data-open=\"${escapeHTML(product.id)}\"\n          aria-label=\"View ${escapeHTML(displayCode)} details\"\n        >\n\n          ${imageHTML}\n\n          <span class=\"xuran-cl-card__number\">\n            ${number}\n          <\/span>\n\n          <span class=\"xuran-cl-card__view\">\n            VIEW \u2197\n          <\/span>\n\n        <\/button>\n\n\n        <div class=\"xuran-cl-card__info\">\n\n          <div class=\"xuran-cl-card__head\">\n\n            <div>\n\n              <span class=\"xuran-cl-card__category\">\n                ${escapeHTML(product.category)}\n              <\/span>\n\n              <h3 class=\"xuran-cl-card__code\">\n                ${escapeHTML(displayCode)}\n              <\/h3>\n\n              ${nameHTML}\n\n            <\/div>\n\n\n            <button\n              class=\"\n                xuran-cl-card__add\n                ${isSelected ? \"is-selected\" : \"\"}\n              \"\n              type=\"button\"\n              data-select=\"${escapeHTML(product.id)}\"\n              aria-label=\"${\n                isSelected\n                  ? \"Remove from comparison\"\n                  : \"Add to comparison\"\n              }\"\n              aria-pressed=\"${isSelected}\"\n            ><\/button>\n\n          <\/div>\n\n\n          <div class=\"xuran-cl-card__meta\">\n\n            <span>\n              ${escapeHTML(product.color)}\n            <\/span>\n\n            <span>\n              ${escapeHTML(product.tone)}\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n    `;\n\n  }\n\n\n  \/* =====================================================\n     10. RENDER\n  ===================================================== *\/\n\n  function renderProducts() {\n\n    const visible =\n      filteredProducts.slice(\n        0,\n        visibleCount\n      );\n\n\n    resultCount.textContent =\n      filteredProducts.length\n        .toLocaleString();\n\n\n    if (\n      filteredProducts.length === 0\n    ) {\n\n      grid.innerHTML = \"\";\n\n      grid.hidden = true;\n\n      empty.hidden = false;\n\n      loadArea.hidden = true;\n\n      return;\n\n    }\n\n\n    grid.hidden = false;\n\n    empty.hidden = true;\n\n    loadArea.hidden = false;\n\n\n    grid.innerHTML =\n      visible\n        .map(\n          (product, index) =>\n            cardTemplate(\n              product,\n              index\n            )\n        )\n        .join(\"\");\n\n\n    showing.textContent =\n      \"Showing \" +\n      visible.length.toLocaleString() +\n      \" of \" +\n      filteredProducts.length.toLocaleString() +\n      \" finishes\";\n\n\n    loadMore.hidden =\n      visible.length >=\n      filteredProducts.length;\n\n\n    bindCardEvents();\n\n  }\n\n\n  \/* =====================================================\n     11. CARD EVENTS\n  ===================================================== *\/\n\n  function bindCardEvents() {\n\n    grid\n      .querySelectorAll(\"[data-open]\")\n      .forEach(button => {\n\n        button.addEventListener(\n          \"click\",\n          function () {\n\n            const product =\n              findProduct(\n                this.dataset.open\n              );\n\n\n            if (product) {\n              openDrawer(product);\n            }\n\n          }\n        );\n\n      });\n\n\n    grid\n      .querySelectorAll(\"[data-select]\")\n      .forEach(button => {\n\n        button.addEventListener(\n          \"click\",\n          function () {\n\n            const product =\n              findProduct(\n                this.dataset.select\n              );\n\n\n            if (product) {\n              toggleSelection(product);\n            }\n\n          }\n        );\n\n      });\n\n  }\n\n\n  function findProduct(id) {\n\n    return products.find(\n      product =>\n        String(product.id) ===\n        String(id)\n    );\n\n  }\n\n\n  \/* =====================================================\n     12. FILTER BUTTONS\n  ===================================================== *\/\n\n  document\n    .querySelectorAll(\n      \".xuran-cl-filter__buttons\"\n    )\n    .forEach(group => {\n\n      group.addEventListener(\n        \"click\",\n        function (event) {\n\n          const button =\n            event.target.closest(\n              \".xuran-cl-pill\"\n            );\n\n\n          if (!button) {\n            return;\n          }\n\n\n          group\n            .querySelectorAll(\n              \".xuran-cl-pill\"\n            )\n            .forEach(item =>\n              item.classList.remove(\n                \"is-active\"\n              )\n            );\n\n\n          button.classList.add(\n            \"is-active\"\n          );\n\n\n          filters[\n            group.dataset.filterGroup\n          ] =\n            button.dataset.value;\n\n\n          applyFilters();\n\n        }\n      );\n\n    });\n\n\n  document\n    .querySelectorAll(\n      \".xuran-cl-colors\"\n    )\n    .forEach(group => {\n\n      group.addEventListener(\n        \"click\",\n        function (event) {\n\n          const button =\n            event.target.closest(\n              \".xuran-cl-color\"\n            );\n\n\n          if (!button) {\n            return;\n          }\n\n\n          group\n            .querySelectorAll(\n              \".xuran-cl-color\"\n            )\n            .forEach(item =>\n              item.classList.remove(\n                \"is-active\"\n              )\n            );\n\n\n          button.classList.add(\n            \"is-active\"\n          );\n\n\n          filters.color =\n            button.dataset.value;\n\n\n          applyFilters();\n\n        }\n      );\n\n    });\n\n\n  \/* =====================================================\n     13. SEARCH BY CODE OR NAME\n  ===================================================== *\/\n\n  let searchTimer;\n\n\n  search.addEventListener(\n    \"input\",\n    function () {\n\n      clearTimeout(searchTimer);\n\n\n      searchTimer =\n        setTimeout(\n          function () {\n\n            filters.search =\n              search.value;\n\n            applyFilters();\n\n          },\n          160\n        );\n\n    }\n  );\n\n\n  clearSearch.addEventListener(\n    \"click\",\n    function () {\n\n      search.value = \"\";\n\n      filters.search = \"\";\n\n      applyFilters();\n\n      search.focus();\n\n    }\n  );\n\n\n  \/* =====================================================\n     14. RESET FILTERS\n  ===================================================== *\/\n\n  function resetFilters() {\n\n    filters = {\n      category: \"all\",\n      tone: \"all\",\n      color: \"all\",\n      search: \"\"\n    };\n\n\n    search.value = \"\";\n\n\n    document\n      .querySelectorAll(\n        \".xuran-cl-pill, .xuran-cl-color\"\n      )\n      .forEach(button => {\n\n        button.classList.toggle(\n          \"is-active\",\n          button.dataset.value === \"all\"\n        );\n\n      });\n\n\n    applyFilters();\n\n  }\n\n\n  resetButton.addEventListener(\n    \"click\",\n    resetFilters\n  );\n\n\n  emptyReset.addEventListener(\n    \"click\",\n    resetFilters\n  );\n\n\n  \/* =====================================================\n     15. LOAD MORE\n  ===================================================== *\/\n\n  loadMore.addEventListener(\n    \"click\",\n    function () {\n\n      visibleCount += PER_PAGE;\n\n      renderProducts();\n\n    }\n  );\n\n\n  \/* =====================================================\n     16. SELECT COLORS\n  ===================================================== *\/\n\n  function toggleSelection(product) {\n\n    const index =\n      selectedProducts.findIndex(\n        selected =>\n          selected.id === product.id\n      );\n\n\n    if (index !== -1) {\n\n      selectedProducts.splice(\n        index,\n        1\n      );\n\n    }\n\n    else {\n\n      if (\n        selectedProducts.length >=\n        MAX_COMPARE\n      ) {\n\n        tray.classList.add(\n          \"is-visible\"\n        );\n\n        tray.setAttribute(\n          \"aria-hidden\",\n          \"false\"\n        );\n\n        return;\n\n      }\n\n\n      selectedProducts.push(\n        product\n      );\n\n    }\n\n\n    updateSelection();\n\n    renderProducts();\n\n    updateDrawerSelection();\n\n  }\n\n\n  function updateSelection() {\n\n    const count =\n      selectedProducts.length;\n\n\n    trayCount.textContent =\n      count;\n\n    compareCount.textContent =\n      count;\n\n\n    compareTop.disabled =\n      count < 2;\n\n    trayCompare.disabled =\n      count < 2;\n\n\n    if (count > 0) {\n\n      tray.classList.add(\n        \"is-visible\"\n      );\n\n      tray.setAttribute(\n        \"aria-hidden\",\n        \"false\"\n      );\n\n    }\n\n    else {\n\n      tray.classList.remove(\n        \"is-visible\"\n      );\n\n      tray.setAttribute(\n        \"aria-hidden\",\n        \"true\"\n      );\n\n    }\n\n\n    trayItems.innerHTML =\n      selectedProducts\n        .map(product => {\n\n          return `\n\n            <div\n              class=\"xuran-cl-tray__item\"\n              title=\"${escapeHTML(\n                product.code ||\n                product.name\n              )}\"\n            >\n\n              ${\n                product.image\n                  ? `\n                    <img decoding=\"async\"\n                      src=\"${escapeHTML(product.image)}\"\n                      alt=\"${escapeHTML(\n                        product.name ||\n                        product.code\n                      )}\"\n                    >\n                  `\n                  : \"\"\n              }\n\n              <button\n                type=\"button\"\n                data-remove=\"${escapeHTML(product.id)}\"\n                aria-label=\"Remove ${\n                  escapeHTML(\n                    product.code ||\n                    product.name\n                  )\n                }\"\n              >\n                \u00d7\n              <\/button>\n\n            <\/div>\n\n          `;\n\n        })\n        .join(\"\");\n\n\n    trayItems\n      .querySelectorAll(\n        \"[data-remove]\"\n      )\n      .forEach(button => {\n\n        button.addEventListener(\n          \"click\",\n          function () {\n\n            const product =\n              findProduct(\n                this.dataset.remove\n              );\n\n\n            if (product) {\n              toggleSelection(product);\n            }\n\n          }\n        );\n\n      });\n\n  }\n\n\n  trayClose.addEventListener(\n    \"click\",\n    function () {\n\n      tray.classList.remove(\n        \"is-visible\"\n      );\n\n      tray.setAttribute(\n        \"aria-hidden\",\n        \"true\"\n      );\n\n    }\n  );\n\n\n  \/* =====================================================\n     17. DETAIL DRAWER\n  ===================================================== *\/\n\n  function openDrawer(product) {\n\n    activeProduct = product;\n\n\n    drawerImage.src =\n      product.image || \"\";\n\n    drawerImage.alt =\n      product.name ||\n      product.code ||\n      \"Xuran surface\";\n\n\n    drawerCode.textContent =\n      product.code ||\n      \"Code pending\";\n\n\n    drawerName.textContent =\n      product.name || \"\";\n\n\n    drawerName.style.display =\n      product.name\n        ? \"block\"\n        : \"none\";\n\n\n    drawerCategory.textContent =\n      product.category;\n\n    drawerColor.textContent =\n      product.color;\n\n    drawerTone.textContent =\n      product.tone;\n\n    drawerCollection.textContent =\n      product.collection;\n\n    drawerSeries.textContent =\n      product.series;\n\n\n    updateDrawerSelection();\n\n\n    drawer.classList.add(\n      \"is-visible\"\n    );\n\n    backdrop.classList.add(\n      \"is-visible\"\n    );\n\n\n    drawer.setAttribute(\n      \"aria-hidden\",\n      \"false\"\n    );\n\n\n    document.body.style.overflow =\n      \"hidden\";\n\n  }\n\n\n  function closeDrawer() {\n\n    drawer.classList.remove(\n      \"is-visible\"\n    );\n\n    backdrop.classList.remove(\n      \"is-visible\"\n    );\n\n\n    drawer.setAttribute(\n      \"aria-hidden\",\n      \"true\"\n    );\n\n\n    document.body.style.overflow =\n      \"\";\n\n\n    activeProduct = null;\n\n  }\n\n\n  function updateDrawerSelection() {\n\n    if (!activeProduct) {\n      return;\n    }\n\n\n    const selected =\n      selectedProducts.some(\n        product =>\n          product.id ===\n          activeProduct.id\n      );\n\n\n    drawerSelect\n      .querySelector(\"span\")\n      .textContent =\n        selected\n          ? \"Remove from Compare\"\n          : \"Add to Compare\";\n\n\n    drawerSelect\n      .querySelector(\"i\")\n      .textContent =\n        selected\n          ? \"\u2212\"\n          : \"+\";\n\n  }\n\n\n  drawerSelect.addEventListener(\n    \"click\",\n    function () {\n\n      if (activeProduct) {\n\n        toggleSelection(\n          activeProduct\n        );\n\n      }\n\n    }\n  );\n\n\n  drawerClose.addEventListener(\n    \"click\",\n    closeDrawer\n  );\n\n\n  backdrop.addEventListener(\n    \"click\",\n    closeDrawer\n  );\n\n\n  \/* =====================================================\n     18. COMPARE MODAL\n  ===================================================== *\/\n\n  function openCompare() {\n\n    if (\n      selectedProducts.length < 2\n    ) {\n\n      return;\n\n    }\n\n\n    closeDrawer();\n\n\n    modalGrid.innerHTML =\n      selectedProducts\n        .map(product => {\n\n          return `\n\n            <article\n              class=\"xuran-cl-compare-item\"\n            >\n\n              ${\n                product.image\n                  ? `\n                    <img decoding=\"async\"\n                      src=\"${escapeHTML(product.image)}\"\n                      alt=\"${escapeHTML(\n                        product.name ||\n                        product.code\n                      )}\"\n                    >\n                  `\n                  : \"\"\n              }\n\n              <h4>\n                ${escapeHTML(\n                  product.code ||\n                  \"Code pending\"\n                )}\n              <\/h4>\n\n              ${\n                product.name\n                  ? `\n                    <strong>\n                      ${escapeHTML(product.name)}\n                    <\/strong>\n                  `\n                  : \"\"\n              }\n\n              <p>\n                ${escapeHTML(product.category)}\n                <br>\n\n                ${escapeHTML(product.color)}\n                \u00b7\n                ${escapeHTML(product.tone)}\n                <br>\n\n                ${escapeHTML(product.collection)}\n              <\/p>\n\n            <\/article>\n\n          `;\n\n        })\n        .join(\"\");\n\n\n    modal.classList.add(\n      \"is-visible\"\n    );\n\n\n    modal.setAttribute(\n      \"aria-hidden\",\n      \"false\"\n    );\n\n\n    document.body.style.overflow =\n      \"hidden\";\n\n  }\n\n\n  function closeCompare() {\n\n    modal.classList.remove(\n      \"is-visible\"\n    );\n\n\n    modal.setAttribute(\n      \"aria-hidden\",\n      \"true\"\n    );\n\n\n    document.body.style.overflow =\n      \"\";\n\n  }\n\n\n  compareTop.addEventListener(\n    \"click\",\n    openCompare\n  );\n\n\n  trayCompare.addEventListener(\n    \"click\",\n    openCompare\n  );\n\n\n  modalClose.addEventListener(\n    \"click\",\n    closeCompare\n  );\n\n\n  modal.addEventListener(\n    \"click\",\n    function (event) {\n\n      if (\n        event.target === modal\n      ) {\n\n        closeCompare();\n\n      }\n\n    }\n  );\n\n\n  \/* =====================================================\n     19. ESCAPE KEY\n  ===================================================== *\/\n\n  document.addEventListener(\n    \"keydown\",\n    function (event) {\n\n      if (\n        event.key !== \"Escape\"\n      ) {\n\n        return;\n\n      }\n\n\n      if (\n        modal.classList.contains(\n          \"is-visible\"\n        )\n      ) {\n\n        closeCompare();\n\n        return;\n\n      }\n\n\n      if (\n        drawer.classList.contains(\n          \"is-visible\"\n        )\n      ) {\n\n        closeDrawer();\n\n      }\n\n    }\n  );\n\n\n  \/* =====================================================\n     20. INITIALIZE\n  ===================================================== *\/\n\n  loadData();\n\n});\n<\/script>\n\n<!-- ======================================================\n     XURAN COLOR LIBRARY \u2014 FINAL CTA\n====================================================== -->\n\n<section class=\"xuran-color-cta\" id=\"request-color-information\">\n\n  <div class=\"xuran-color-cta__wrap\">\n\n    <!-- =========================\n         LEFT \u2014 CONTENT\n    ========================== -->\n    <div class=\"xuran-color-cta__content\">\n\n      <div class=\"xuran-color-cta__eyebrow\">\n        <span><\/span>\n        READY FOR THE NEXT STEP?\n      <\/div>\n\n      <h2 class=\"xuran-color-cta__title\">\n        Found a finish<br>\n        <em>for your project?<\/em>\n      <\/h2>\n\n      <p class=\"xuran-color-cta__text\">\n        Tell us the colors, textures or surface codes you&#8217;re interested in.\n        Our team can help with product information, matching options and\n        project inquiries.\n      <\/p>\n\n\n      <!-- BUTTONS -->\n      <div class=\"xuran-color-cta__actions\">\n\n        <a href=\"https:\/\/api.whatsapp.com\/send?phone=8618688129406&#038;text=Hello!%20im%20interested%20in%20your%20products%20\" class=\"xuran-color-cta__button xuran-color-cta__button--primary\">\n          <span>Request Color Information<\/span>\n          <i>\u2197<\/i>\n        <\/a>\n\n        <a href=\"mailto:xuran01@wallpanelfactory.com\" class=\"xuran-color-cta__button xuran-color-cta__button--secondary\">\n          <span>Contact Xuran<\/span>\n          <i>\u2197<\/i>\n        <\/a>\n\n      <\/div>\n\n\n      <!-- BOTTOM META -->\n      <div class=\"xuran-color-cta__meta\">\n\n        <span>Color Selection<\/span>\n        <i><\/i>\n\n        <span>Product Information<\/span>\n        <i><\/i>\n\n        <span>Project Inquiry<\/span>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =========================\n         RIGHT \u2014 MATERIAL IMAGE\n    ========================== -->\n    <div class=\"xuran-color-cta__visual\">\n\n      <div class=\"xuran-color-cta__image\">\n\n        <!-- Replace with your real Xuran image -->\n        <img decoding=\"async\" src=\"https:\/\/wallpanelfactory.com\/wp-content\/uploads\/2026\/10\/home-decoration-wall-panels6-scaled.jpg\" alt=\"Xuran decorative surface color and material collection\" loading=\"lazy\">\n\n      <\/div>\n\n\n      <!-- IMAGE LABEL -->\n      <div class=\"xuran-color-cta__image-label\">\n\n        <span>01<\/span>\n\n        <div>\n          <small>XURAN<\/small>\n          <strong>Surface Collection<\/strong>\n        <\/div>\n\n      <\/div>\n\n\n      <!-- FLOATING TAG -->\n      <div class=\"xuran-color-cta__tag\">\n\n        <span>EXPLORE<\/span>\n\n        <i>\u2197<\/i>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>COLOR LIBRARY COLOR \u00b7 TEXTURE \u00b7 SURFACE EXPLORE THE COLLECTION Find the surface that fits your vision. XURAN SURFACE COLLECTION Explore Xuran decorative surface colors, patterns and finishes for wall panel projects. Explore the Color Library \u2193 01 SURFACE COLLECTION Explore color, texture and character. MATERIAL DETAIL COLOR TEXTURE FINISH DISCOVER THE SURFACE 01 COLOR&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-2394","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Wall Panel Colors &amp; Finishes - Xuran wallpanel factory<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wallpanelfactory.com\/es\/wall-panel-colors-finishes\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wall Panel Colors &amp; Finishes - Xuran wallpanel factory\" \/>\n<meta property=\"og:description\" content=\"COLOR LIBRARY COLOR \u00b7 TEXTURE \u00b7 SURFACE EXPLORE THE COLLECTION Find the surface that fits your vision. XURAN SURFACE COLLECTION Explore Xuran decorative surface colors, patterns and finishes for wall panel projects. Explore the Color Library \u2193 01 SURFACE COLLECTION Explore color, texture and character. MATERIAL DETAIL COLOR TEXTURE FINISH DISCOVER THE SURFACE 01 COLOR...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wallpanelfactory.com\/es\/wall-panel-colors-finishes\/\" \/>\n<meta property=\"og:site_name\" content=\"Xuran wallpanel factory\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-06T16:14:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wallpanelfactory.com\/wp-content\/uploads\/2026\/10\/wall-panel-colors.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wallpanelfactory.com\\\/wall-panel-colors-finishes\\\/\",\"url\":\"https:\\\/\\\/wallpanelfactory.com\\\/wall-panel-colors-finishes\\\/\",\"name\":\"Wall Panel Colors &amp; Finishes - Xuran wallpanel factory\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wallpanelfactory.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wallpanelfactory.com\\\/wall-panel-colors-finishes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wallpanelfactory.com\\\/wall-panel-colors-finishes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wallpanelfactory.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/wall-panel-colors.png\",\"datePublished\":\"2026-10-06T16:14:19+00:00\",\"dateModified\":\"2026-10-06T16:14:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wallpanelfactory.com\\\/wall-panel-colors-finishes\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wallpanelfactory.com\\\/wall-panel-colors-finishes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/wallpanelfactory.com\\\/wall-panel-colors-finishes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wallpanelfactory.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/wall-panel-colors.png\",\"contentUrl\":\"https:\\\/\\\/wallpanelfactory.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/wall-panel-colors.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wallpanelfactory.com\\\/wall-panel-colors-finishes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wallpanelfactory.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wall Panel Colors &amp; Finishes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wallpanelfactory.com\\\/#website\",\"url\":\"https:\\\/\\\/wallpanelfactory.com\\\/\",\"name\":\"Xuran wallpanel factory\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/wallpanelfactory.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wallpanelfactory.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wallpanelfactory.com\\\/#organization\",\"name\":\"Xuran wallpanel factory\",\"url\":\"https:\\\/\\\/wallpanelfactory.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/wallpanelfactory.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wallpanelfactory.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/cropped-wall-panel-logo-scaled-2.jpg\",\"contentUrl\":\"https:\\\/\\\/wallpanelfactory.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/cropped-wall-panel-logo-scaled-2.jpg\",\"width\":2556,\"height\":1609,\"caption\":\"Xuran wallpanel factory \"},\"image\":{\"@id\":\"https:\\\/\\\/wallpanelfactory.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wall Panel Colors &amp; Finishes - Xuran wallpanel factory","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wallpanelfactory.com\/es\/wall-panel-colors-finishes\/","og_locale":"es_ES","og_type":"article","og_title":"Wall Panel Colors &amp; Finishes - Xuran wallpanel factory","og_description":"COLOR LIBRARY COLOR \u00b7 TEXTURE \u00b7 SURFACE EXPLORE THE COLLECTION Find the surface that fits your vision. XURAN SURFACE COLLECTION Explore Xuran decorative surface colors, patterns and finishes for wall panel projects. Explore the Color Library \u2193 01 SURFACE COLLECTION Explore color, texture and character. MATERIAL DETAIL COLOR TEXTURE FINISH DISCOVER THE SURFACE 01 COLOR...","og_url":"https:\/\/wallpanelfactory.com\/es\/wall-panel-colors-finishes\/","og_site_name":"Xuran wallpanel factory","article_modified_time":"2026-10-06T16:14:21+00:00","og_image":[{"url":"https:\/\/wallpanelfactory.com\/wp-content\/uploads\/2026\/10\/wall-panel-colors.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wallpanelfactory.com\/wall-panel-colors-finishes\/","url":"https:\/\/wallpanelfactory.com\/wall-panel-colors-finishes\/","name":"Wall Panel Colors &amp; Finishes - Xuran wallpanel factory","isPartOf":{"@id":"https:\/\/wallpanelfactory.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wallpanelfactory.com\/wall-panel-colors-finishes\/#primaryimage"},"image":{"@id":"https:\/\/wallpanelfactory.com\/wall-panel-colors-finishes\/#primaryimage"},"thumbnailUrl":"https:\/\/wallpanelfactory.com\/wp-content\/uploads\/2026\/10\/wall-panel-colors.png","datePublished":"2026-10-06T16:14:19+00:00","dateModified":"2026-10-06T16:14:21+00:00","breadcrumb":{"@id":"https:\/\/wallpanelfactory.com\/wall-panel-colors-finishes\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wallpanelfactory.com\/wall-panel-colors-finishes\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wallpanelfactory.com\/wall-panel-colors-finishes\/#primaryimage","url":"https:\/\/wallpanelfactory.com\/wp-content\/uploads\/2026\/10\/wall-panel-colors.png","contentUrl":"https:\/\/wallpanelfactory.com\/wp-content\/uploads\/2026\/10\/wall-panel-colors.png"},{"@type":"BreadcrumbList","@id":"https:\/\/wallpanelfactory.com\/wall-panel-colors-finishes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wallpanelfactory.com\/"},{"@type":"ListItem","position":2,"name":"Wall Panel Colors &amp; Finishes"}]},{"@type":"WebSite","@id":"https:\/\/wallpanelfactory.com\/#website","url":"https:\/\/wallpanelfactory.com\/","name":"Xuran wallpanel factory","description":"","publisher":{"@id":"https:\/\/wallpanelfactory.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wallpanelfactory.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/wallpanelfactory.com\/#organization","name":"Xuran wallpanel factory","url":"https:\/\/wallpanelfactory.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wallpanelfactory.com\/#\/schema\/logo\/image\/","url":"https:\/\/wallpanelfactory.com\/wp-content\/uploads\/2026\/09\/cropped-wall-panel-logo-scaled-2.jpg","contentUrl":"https:\/\/wallpanelfactory.com\/wp-content\/uploads\/2026\/09\/cropped-wall-panel-logo-scaled-2.jpg","width":2556,"height":1609,"caption":"Xuran wallpanel factory "},"image":{"@id":"https:\/\/wallpanelfactory.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/wallpanelfactory.com\/es\/wp-json\/wp\/v2\/pages\/2394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wallpanelfactory.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wallpanelfactory.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wallpanelfactory.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wallpanelfactory.com\/es\/wp-json\/wp\/v2\/comments?post=2394"}],"version-history":[{"count":8,"href":"https:\/\/wallpanelfactory.com\/es\/wp-json\/wp\/v2\/pages\/2394\/revisions"}],"predecessor-version":[{"id":2404,"href":"https:\/\/wallpanelfactory.com\/es\/wp-json\/wp\/v2\/pages\/2394\/revisions\/2404"}],"wp:attachment":[{"href":"https:\/\/wallpanelfactory.com\/es\/wp-json\/wp\/v2\/media?parent=2394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}