/*==================================================
KOTHARI PLYWOOD — front end
Riviera Blue, Sand Linen, Soft Ivory, Terracotta -
the same site-wide palette used on every page except
the homepage.
==================================================*/

/* .kcp-vars carries ONLY the color/type tokens (no layout) - used on the
   compare tray/modal, which are printed into wp_footer and so are NOT
   nested inside the .kcp page wrapper below and would not otherwise
   inherit these custom properties. .kcp itself includes kcp-vars' tokens
   too, plus the full-bleed page layout for the actual catalog/single
   page content. */
.kcp-vars,
.kcp{
    --nv-950:#0e2032;
    --nv-900:#183451;
    --nv-800:#254a6e;
    --nv-700:#325d85;
    --cream:#f3ecde;
    --cream-100:#fbf8f1;
    --cream-200:#efe4cd;
    --line:#e3d2ac;
    --sand:#d4af83;
    --terracotta:#a9501c;
    --terracotta-dark:#7e3b14;
    --ink:#183451;
    --ink-soft:#5b6b7a;
    --radius-lg:20px;
    --radius-md:14px;
    --serif:"Fraunces","Playfair Display",Georgia,serif;
    --sans:"Inter","Segoe UI",Arial,sans-serif;
    --ease:cubic-bezier(.22,1,.36,1);
    --maxw:1440px;
    --pad:clamp(20px,4vw,64px);
    font-family:var(--sans);
}
.kcp-vars *,
.kcp *{ box-sizing:border-box; }

.kcp{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    background:var(--cream);
    color:var(--ink);
    line-height:1.6;
    box-sizing:border-box;
}
body:has(.kcp) .entry-header,
body:has(.kcp) .page-header,
body:has(.kcp) .page-title{ display:none !important; }

.kcp h1,.kcp h2,.kcp h3{
    font-family:var(--serif);
    font-weight:500;
    letter-spacing:-.01em;
    line-height:1.1;
    margin:0;
    color:var(--ink);
}
.kcp a{ color:inherit; text-decoration:none; }

.kcp-eyebrow{
    font-size:11px;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--terracotta);
    margin:0 0 10px;
}

/*==================================================
CATALOG PAGE
==================================================*/

.kcp-catalog{ padding:clamp(60px,9vw,110px) var(--pad) 100px; }

.kcp-head{
    max-width:720px;
    margin:0 auto 40px;
    text-align:center;
}
.kcp-head h1{ font-size:clamp(30px,4.2vw,50px); }
.kcp-sub{ margin-top:14px; color:var(--ink-soft); font-size:15px; }

.kcp-toolbar{
    max-width:var(--maxw);
    margin:0 auto 28px;
    display:flex;
    gap:14px;
    align-items:center;
}

.kcp-search-wrap{ flex:1; }
.kcp-search{
    width:100%;
    height:54px;
    padding:0 22px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--cream-100);
    font-size:15px;
    font-family:var(--sans);
    color:var(--ink);
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.kcp-search:focus{
    border-color:var(--terracotta);
    box-shadow:0 0 0 3px rgba(169,80,28,.12);
}

.kcp-filter-btn{
    position:relative;
    height:54px;
    padding:0 26px;
    border:0;
    border-radius:999px;
    background:var(--nv-900);
    color:#fff;
    font-size:14px;
    font-weight:600;
    letter-spacing:.02em;
    cursor:pointer;
    white-space:nowrap;
    transition:background .2s ease, transform .2s ease;
}
.kcp-filter-btn:hover{ background:var(--nv-800); transform:translateY(-1px); }

.kcp-filter-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 5px;
    margin-left:8px;
    border-radius:999px;
    background:var(--terracotta);
    font-size:11px;
    font-weight:700;
}
.kcp-filter-count[hidden]{ display:none; }

/*---- filter drawer ----*/

.kcp-filter-drawer{
    position:fixed;
    top:0; right:0;
    bottom:0;
    z-index:1001;
    width:min(360px,88vw);
    background:var(--nv-950);
    color:#fff;
    padding:28px 26px;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .35s var(--ease);
    overflow-y:auto;
}
.kcp-filter-drawer.is-open{ transform:translateX(0); }

.kcp-filter-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px;
}
.kcp-filter-drawer-head h2{ color:#fff; font-size:20px; }
.kcp-filter-drawer-head button{
    width:36px; height:36px;
    border-radius:50%;
    border:0;
    background:rgba(255,255,255,.1);
    color:#fff;
    font-size:20px;
    cursor:pointer;
}
.kcp-filter-drawer-head button:hover{ background:rgba(255,255,255,.2); }

.kcp-filter-list{
    display:flex;
    flex-direction:column;
    gap:4px;
    flex:1;
}
.kcp-filter-empty{ color:rgba(255,255,255,.6); font-size:13px; }

.kcp-filter-option{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 10px;
    border-radius:10px;
    cursor:pointer;
    font-size:14px;
    transition:background .15s ease;
}
.kcp-filter-option:hover{ background:rgba(255,255,255,.06); }
.kcp-filter-option input{
    width:18px; height:18px;
    accent-color:var(--terracotta);
}

.kcp-filter-clear{
    margin-top:18px;
    padding:13px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.3);
    background:transparent;
    color:#fff;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}
.kcp-filter-clear:hover{ background:rgba(255,255,255,.1); border-color:var(--terracotta); }

.kcp-filter-overlay{
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(14,32,50,.5);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
}
.kcp-filter-overlay.is-open{ opacity:1; pointer-events:auto; }

/*---- grid ----*/

.kcp-grid{
    max-width:var(--maxw);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:22px;
}

.kcp-empty,
.kcp-no-results{
    max-width:var(--maxw);
    margin:0 auto;
    text-align:center;
    color:var(--ink-soft);
    font-size:14px;
    padding:20px 0;
}
.kcp-no-results[hidden]{ display:none; }
.kcp-no-results button{
    margin-left:6px;
    border:0;
    background:none;
    color:var(--terracotta);
    font-weight:600;
    cursor:pointer;
    text-decoration:underline;
}

.kcp-card{
    position:relative;
    display:flex;
    flex-direction:column;
    aspect-ratio:3 / 4;
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:var(--nv-900);
    isolation:isolate;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.kcp-card:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 60px -28px rgba(24,52,81,.45);
}

.kcp-card-image{
    position:absolute; inset:0; z-index:0;
    background-size:cover;
    background-position:center;
    background-color:var(--nv-800);
    transition:transform .8s var(--ease);
}
.kcp-card:hover .kcp-card-image{ transform:scale(1.06); }

.kcp-card-shade{
    position:absolute; inset:0; z-index:1;
    background:
        linear-gradient(180deg, rgba(14,32,50,.55) 0%, rgba(14,32,50,0) 22%, rgba(14,32,50,0) 45%, rgba(14,32,50,.94) 100%);
}

/* Brand name owns the top strip on its own row - nothing else is ever
   placed here, so it can never be covered by a price badge no matter how
   long either piece of text is. */
.kcp-card-top{
    position:relative;
    z-index:2;
    padding:16px 18px 8px;
}

.kcp-card-brand{
    display:block;
    font-family:var(--serif);
    font-size:17px;
    line-height:1.25;
    color:#fff;
    text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.kcp-card-body{
    position:relative;
    z-index:2;
    margin-top:auto;
    padding:10px 18px 20px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.kcp-card-meta-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    margin-bottom:2px;
}

.kcp-card-price{
    background:var(--terracotta);
    color:#fff;
    font-size:12px;
    font-weight:700;
    padding:5px 10px;
    border-radius:999px;
    white-space:nowrap;
}

.kcp-card-grade{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--sand);
    padding:5px 10px;
    border:1px solid rgba(212,175,131,.5);
    border-radius:999px;
    white-space:nowrap;
}

.kcp-card-specs{
    font-size:12.5px;
    color:rgba(255,255,255,.82);
    padding-right:44px; /* keeps the compare "+" button from sitting over the last word */
}

.kcp-compare-toggle{
    position:absolute;
    bottom:16px; right:16px;
    z-index:3;
    width:34px; height:34px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.5);
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:17px;
    line-height:1;
    cursor:pointer;
    backdrop-filter:blur(4px);
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.kcp-compare-toggle:hover{ transform:scale(1.08); }
.kcp-compare-toggle.is-active{
    background:var(--terracotta);
    border-color:var(--terracotta);
}

@media(max-width:1100px){ .kcp-grid{ grid-template-columns:repeat(3, 1fr); } }
@media(max-width:760px){ .kcp-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; } .kcp-toolbar{ flex-wrap:wrap; } }
@media(max-width:480px){ .kcp-grid{ grid-template-columns:1fr; } }

/*==================================================
SINGLE PLYWOOD PAGE
==================================================*/

.kcp-single{ padding:clamp(40px,6vw,80px) var(--pad) 100px; max-width:var(--maxw); margin:0 auto; }

.kcp-back{
    display:inline-block;
    margin-bottom:28px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--terracotta);
}

.kcp-single-layout{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:clamp(28px,4vw,60px);
    align-items:start;
}

/*---- gallery: scrollable like a shopping app ----*/

.kcp-gallery{ position:sticky; top:24px; }

.kcp-gallery-stage{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    border-radius:var(--radius-lg);
    background:var(--nv-950);
    scrollbar-width:thin;
}
.kcp-gallery-stage::-webkit-scrollbar{ height:6px; }
.kcp-gallery-stage::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:99px; }

.kcp-gallery-slide{
    flex:0 0 100%;
    scroll-snap-align:start;
    aspect-ratio:4 / 3;
    display:flex;
    align-items:center;
    justify-content:center;
}

.kcp-gallery-image{
    width:100%; height:100%;
    object-fit:contain;
    display:block;
}

.kcp-gallery-video{
    width:100%; height:100%;
    display:block;
    background:#000;
}

.kcp-gallery-thumbs{
    display:flex;
    gap:10px;
    margin-top:14px;
    overflow-x:auto;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
}

.kcp-gallery-thumb-btn{
    position:relative;
    flex:0 0 auto;
    width:76px; height:76px;
    border-radius:12px;
    border:2px solid transparent;
    background:var(--nv-800) center/cover no-repeat;
    cursor:pointer;
    padding:0;
    transition:border-color .2s ease, transform .2s ease;
}
.kcp-gallery-thumb-btn:hover{ transform:translateY(-2px); }
.kcp-gallery-thumb-btn.is-active{ border-color:var(--terracotta); }

.kcp-gallery-thumb-video{
    position:absolute; inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:rgba(14,32,50,.35);
    border-radius:10px;
    font-size:14px;
}

/*---- details ----*/

.kcp-single-details h1{ font-size:clamp(26px,3.4vw,40px); margin-bottom:8px; }
.kcp-single-specs-line{ color:var(--ink-soft); font-size:14px; margin-bottom:18px; }

.kcp-single-mrp{
    font-family:var(--serif);
    font-size:30px;
    color:var(--ink);
    margin-bottom:24px;
}
.kcp-single-mrp span{
    display:inline-block;
    margin-left:8px;
    font-family:var(--sans);
    font-size:11px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    vertical-align:middle;
}

.kcp-rates-table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:24px;
    background:var(--cream-100);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    overflow:hidden;
}
.kcp-rates-table th{
    text-align:left;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    background:var(--cream-200);
    padding:10px 16px;
}
.kcp-rates-table td{
    padding:12px 16px;
    border-top:1px solid var(--line);
    font-size:14px;
    color:var(--ink);
}
.kcp-rates-table td:first-child{ color:var(--ink-soft); }
.kcp-rates-table td:last-child{ font-weight:700; text-align:right; }
.kcp-rates-table th:last-child{ text-align:right; }

.kcp-disclaimer{
    margin-top:22px;
    padding:14px 16px;
    background:var(--cream-100);
    border-left:3px solid var(--terracotta);
    border-radius:8px;
    font-size:12.5px;
    line-height:1.6;
    color:var(--ink);
}

.kcp-specs-table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:22px;
}
.kcp-specs-table th,
.kcp-specs-table td{
    text-align:left;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:14px;
}
.kcp-specs-table th{
    width:180px;
    font-weight:600;
    color:var(--ink-soft);
}
.kcp-specs-table td{ font-weight:600; color:var(--ink); }

.kcp-remarks{
    background:var(--cream-100);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:18px 20px;
    margin-bottom:26px;
}
.kcp-remarks h3{ font-size:14px; margin-bottom:8px; }
.kcp-remarks p{ font-size:13.5px; color:var(--ink-soft); margin:0; white-space:pre-line; }

.kcp-compare-toggle-large{
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:52px;
    padding:0 28px;
    border-radius:999px;
    border:1px solid var(--nv-900);
    background:var(--nv-900);
    color:#fff;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
    position:static;
    width:auto; height:52px;
}
.kcp-compare-toggle-large:hover{ transform:translateY(-2px); }
.kcp-compare-toggle-large.is-active{ background:var(--terracotta); border-color:var(--terracotta); }

@media(max-width:900px){
    .kcp-single-layout{ grid-template-columns:1fr; }
    .kcp-gallery{ position:static; }
}

/*==================================================
COMPARE TRAY
==================================================*/

.kcp-compare-tray{
    position:fixed;
    left:50%;
    bottom:22px;
    transform:translate(-50%, 140%);
    z-index:1002;
    width:min(720px, 92vw);
    background:var(--nv-950);
    color:#fff;
    border-radius:999px;
    box-shadow:0 24px 60px -20px rgba(14,32,50,.55);
    transition:transform .4s var(--ease);
}
.kcp-compare-tray.show{ transform:translate(-50%, 0); }

.kcp-compare-tray-inner{
    display:flex;
    align-items:center;
    gap:16px;
    padding:10px 10px 10px 18px;
}

.kcp-compare-tray-thumbs{
    display:flex;
    gap:6px;
}
.kcp-compare-tray-thumb{
    width:38px; height:38px;
    border-radius:10px;
    background:var(--nv-800) center/cover no-repeat;
    border:1px solid rgba(255,255,255,.2);
}

.kcp-compare-tray-text{
    flex:1;
    font-size:13px;
    color:rgba(255,255,255,.85);
    white-space:nowrap;
}

.kcp-compare-tray-actions{ display:flex; gap:8px; }

.kcp-compare-tray-clear{
    background:transparent;
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
    border-radius:999px;
    padding:11px 16px;
    font-size:13px;
    cursor:pointer;
}
.kcp-compare-tray-clear:hover{ background:rgba(255,255,255,.1); }

.kcp-compare-tray-open{
    background:var(--terracotta);
    border:1px solid var(--terracotta);
    color:#fff;
    border-radius:999px;
    padding:11px 20px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease;
}
.kcp-compare-tray-open:hover{ background:var(--terracotta-dark); }
.kcp-compare-tray-open:disabled{ opacity:.5; cursor:default; }

@media(max-width:640px){
    .kcp-compare-tray-text{ display:none; }
}

/*==================================================
COMPARE MODAL
==================================================*/

.kcp-compare-modal{
    position:fixed;
    inset:0;
    z-index:2000;
    background:rgba(14,32,50,.6);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
}
.kcp-compare-modal.show{ opacity:1; pointer-events:auto; }
.kcp-compare-modal[aria-hidden="true"]:not(.show){ display:none; }

body.kcp-modal-open{ overflow:hidden; }

.kcp-compare-modal-inner{
    background:var(--cream);
    border-radius:var(--radius-lg);
    max-width:min(1100px, 100%);
    width:100%;
    max-height:88vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transform:translateY(16px) scale(.98);
    transition:transform .25s ease;
}
.kcp-compare-modal.show .kcp-compare-modal-inner{ transform:translateY(0) scale(1); }

.kcp-compare-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    border-bottom:1px solid var(--line);
    background:var(--cream-100);
}
.kcp-compare-modal-header h2{ font-size:19px; }
.kcp-compare-modal-close{
    width:36px; height:36px;
    border-radius:50%;
    border:0;
    background:var(--cream-200);
    font-size:20px;
    cursor:pointer;
}
.kcp-compare-modal-close:hover{ background:var(--sand); color:#fff; }

.kcp-compare-modal-body{
    overflow:auto;
    padding:0;
}

.kcp-compare-table{
    display:grid;
    grid-template-columns:150px repeat(var(--kcp-compare-cols, 2), minmax(200px, 1fr));
}

.kcp-compare-col{ border-right:1px solid var(--line); }
.kcp-compare-col:last-child{ border-right:0; }

.kcp-compare-col-labels{ background:var(--cream-100); }
.kcp-compare-col-labels .kcp-compare-cell{
    font-size:12px;
    font-weight:600;
    color:var(--ink-soft);
}

.kcp-compare-cell{
    padding:14px 18px;
    border-bottom:1px solid var(--line);
    font-size:13.5px;
    color:var(--ink);
}

.kcp-compare-cell-photo{ padding:18px; }
.kcp-compare-cell-photo span{
    display:block;
    aspect-ratio:4 / 3;
    border-radius:12px;
    background:var(--nv-900) center/cover no-repeat;
}

.kcp-compare-cell-name{
    font-family:var(--serif);
    font-size:16px;
    font-weight:500;
}

@media(max-width:700px){
    .kcp-compare-table{ grid-template-columns:120px repeat(var(--kcp-compare-cols, 2), minmax(160px, 1fr)); }
}

/*==================================================
REDUCED MOTION
==================================================*/

@media(prefers-reduced-motion:reduce){
    .kcp *{ transition-duration:.001ms !important; }
}