:root{
    --sand:#FFFFFF;
    --sand-line:#E2E8F0;
    --card:#FFFFFF;
    --ink:#1E211F;
    --ink-soft:#000;
    --teal-deep:#103F3D;
    --teal-mid:#1B5E5C;
    --aqua:#4CAEDC;
    --aqua-soft:#4CAEDC;
    --btn:#4CAEDC;
    /*--btn-hover:#3D8FB5;*/
    --btn-hover: #61b8e0;
    --black:  #000;
    --lightgray: #F8F7F7;
    --white:  #FFF;
  }

  /* Elementor & Theme Style Reset Scope */
  .splash-app-root, .splash-app-root * {
    box-sizing: border-box !important;
  }
  .splash-app-root {
    font-family: 'DM Sans', sans-serif;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000 !important;
    -webkit-font-smoothing: antialiased !important;
    line-height: 1.4 !important;
  }
  .splash-app-root button {
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    margin: 0 !important;
    outline: none !important;
  }
  .splash-app-root a {
    text-decoration: none !important;
    box-shadow: none !important;
    color: inherit;
  }
  .splash-app-root h1,
  .splash-app-root h2,
  .splash-app-root h3,
  .splash-app-root p,
  .splash-app-root ul,
  .splash-app-root li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-weight: normal !important;
  }


  .eyebrow{
    font-family: 'Kanit', serif;
    font-size:11px !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    color:#4caedc !important;
  }

  header.topbar{
    display:flex;
    align-items:center;
    gap:16px;
    padding:20px 28px;
    border-bottom:1px solid var(--sand-line);
    background:var(--sand);
    position:sticky;
    top:0;
    z-index:20;
  }

  .searchwrap{
    flex:1;
    position:relative;
  }
  .searchwrap svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    stroke: var(--ink-soft);
  }
  #searchInput{
    width:100%;
    padding:11px 14px 11px 40px !important;
    border:1px solid var(--sand-line) !important;
    border-radius:8px !important;
    background:#F8FAFC !important;

    font-size:14px !important;
    color:var(--ink) !important;
    outline: none !important;
  }
  #searchInput:focus{
    border-color:var(--btn) !important;
    background:#FFFFFF !important;
  }
  #searchInput::placeholder{color:#94A3B8;}

  .layout{
    display:flex;
    align-items:flex-start;
  }

  aside.sidebar{
    width:230px;
    flex-shrink:0;
    padding:24px 16px;
    border-right:1px solid var(--sand-line);
    position:sticky;
    top: 117px;
    align-self:flex-start;
    height:calc(100vh - 73px);
    overflow-y:auto;
  }

  .sidebar .eyebrow{padding:0 8px 10px !important;}

  .catlist{margin:0 0 28px !important;padding:0 !important;}
  .catlist li{margin-bottom:2px !important;}
  .catbtn{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
    padding:10px 14px !important;
    border:none !important;
    border-radius:999px !important;
    background:transparent !important;

    font-size:14px !important;
    color:var(--black) !important;
    cursor:pointer;
  }
  .catbtn:hover{background:#F1F5F9 !important;}
  .catbtn.active{
    background:var(--btn) !important;
    color:#FFFFFF !important;
  }

  .selpanel{
    border-top:1px solid var(--sand-line);
    padding-top:18px;
  }

  .splash-app-root main{
    flex:1;
    min-width:0;
    padding:0 28px 60px;
  }

  h1.catheading{
    font-family: 'Kanit', serif;
    font-size:24px !important;
    font-weight:700 !important;
    margin:0 0 8px !important;
    color:#000 !important;
  }
  p.catsub{
    font-size:14px !important;
    color:var(--ink-soft) !important;
    margin:0 0 20px !important;
  }

  .pills{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:24px;
  }
  .pill{
    padding:7px 15px !important;
    border-radius:20px !important;
    border:1px solid var(--sand-line) !important;
    background:#F8FAFC !important;

    font-size:13px !important;
    color:var(--ink) !important;
    cursor:pointer;
  }
  .pill.active{
    background:var(--btn) !important;
    border-color:var(--btn) !important;
    color:#FFFFFF !important;
  }
  .pillgroup{
    display:none;
    align-items:center;
    gap:14px;
    margin-bottom:24px;
    margin-top:-8px;
  }
  .pillgroup.show{
    display:flex;
  }
  .pillgroup-label{
    font-family: 'Kanit', serif;
    font-size:11px !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    color:var(--ink-soft) !important;
    flex-shrink:0;
  }
  .pills-brand{
    margin-bottom:0;
  }
  .pill.brand.active{
    background:#0F172A !important;
    border-color:#0F172A !important;
    color:#FFFFFF !important;
  }

  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:20px;
  }

  .card{
    background:#FFFFFF !important;
    border:1px solid #E2E8F0 !important;
    border-radius:14px !important;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:box-shadow .15s ease, border-color .15s ease;
  }
  .card.selected{
    border-color:var(--btn) !important;
    box-shadow:0 0 0 1px var(--aqua-soft) !important;
  }

  .swatchmosaic{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    grid-template-rows:repeat(3, 1fr);
    gap:2px;
    aspect-ratio:5/3;
    padding:2px;
    background:#F1F5F9;
    cursor:pointer;
  }
  .swatchmosaic div{width:100%;height:100%;}
  .herophoto{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
    background:#F1F5F9;
    transition:transform .35s ease;
    cursor:pointer;
  }
  .card:hover .herophoto{
    transform:scale(1.06);
  }

  .card-body{
    padding:16px 18px 18px;
    display:flex;
    flex-direction:column;
    flex:1;
  }

  .tagrow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
  }
  .tagrow .lefttags{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .cattag{
    font-size:10px !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    color:var(--ink-soft) !important;
  }

  .addbtn{
    width:30px;
    height:30px;
    border-radius:50% !important;
    border:1px solid var(--sand-line) !important;
    background:#F8FAFC !important;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
  }
  .addbtn.on{
    background:var(--btn) !important;
    border-color:var(--btn) !important;
  }
  .addbtn.on svg{stroke:#FFFFFF;}
  .addbtn svg {
    stroke:var(--ink-soft);
    width: 18px;
    height: 18px;
  }

  .splash-app-root .mfgline{
    font-size:12px !important;
    color:var(--aqua) !important;
    margin:0 0 2px !important;
    font-family: 'Kanit', serif;
  }
  .splash-app-root .prodname{
    font-family: 'Kanit', serif;
    font-size:18px !important;
    font-weight:600 !important;
    margin:0 0 10px !important;
    color:#0F172A !important;
  }
  .splash-app-root .proddesc{
    font-size:13px !important;
    line-height:1.6 !important;
    color:var(--ink-soft) !important;
    margin:0 0 16px !important;
    flex:1;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    min-height:calc(1.6em * 2) !important;
    max-height:calc(1.6em * 2) !important;
  }

  /* Keep product cards balanced. */
  .splash-app-root .card-body{
    min-height:0;
  }

  .splash-app-root .card-actions{
    margin-top:auto;
  }

  .splash-app-root .swatchrow-label{
    font-family: 'Kanit', serif;
    font-size:10px !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    color:var(--ink-soft) !important;
    margin-bottom:8px !important;
  }
  .splash-app-root .swatchrow{
    display:flex;
    gap:8px;
    margin-bottom:16px;
    align-items:center;
  }
  /* Circular Swatches with Image Thumbnails */
  .swatch{
    width:28px !important;
    height:28px !important;
    border-radius:50% !important;
    border:2px solid #CBD5E1 !important;
    cursor:pointer;
    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    transition:transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.1) !important;
  }
  .swatch:hover{
    transform:scale(1.15) !important;
  }
  .swatch.on{
    border-color:var(--btn) !important;
    box-shadow:0 0 0 2px var(--aqua-soft), 0 2px 4px rgba(0,0,0,0.15) !important;
  }

  /* "+N" chip shown on cards when there are more color/option swatches than fit in the row. */
  .swatch-more{
    width:28px !important;
    height:28px !important;
    flex:0 0 auto;
    border-radius:50% !important;
    border:1px solid var(--sand-line) !important;
    background:#F1F5F9 !important;
    color:var(--ink-soft) !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    font-family: 'Kanit', serif;
    font-size:10px !important;
    font-weight:600 !important;
    cursor:pointer;
    transition:transform 0.15s ease, background-color 0.15s ease !important;
  }
  .swatch-more:hover{
    background:#E2E8F0 !important;
    transform:scale(1.08) !important;
  }

  .card-actions{
    display:flex;
    gap:8px;
    padding-top:14px;
    border-top:1px solid var(--sand-line);
  }
  .viewbtn{
    flex:1;
    padding:10px !important;
    background:var(--btn) !important;
    color:#FFFFFF !important;
    border:none !important;
    border-radius:999px !important;

    font-size:13px !important;
    font-weight:500 !important;
    cursor:pointer;
    text-align:center;
  }
  .viewbtn:hover{background:var(--btn-hover) !important;}
  .productlinkbtn{
    flex:1;
    padding:10px !important;
    background:#FFFFFF !important;
    color:var(--btn) !important;
    border:1px solid var(--btn) !important;
    border-radius:999px !important;

    font-size:13px !important;
    font-weight:500 !important;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-decoration:none !important;
    white-space:nowrap;
  }
  .productlinkbtn:hover{background:var(--btn) !important; color:#FFFFFF !important;}
  .mfgbtn{
    flex:1;
    padding:10px !important;
    background:var(--lightgray) !important;
    color:#09141e !important;
    border:none !important;
    border-radius:999px !important;

    font-size:13px !important;
    font-weight:500 !important;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-decoration:none !important;
  }
  .mfgbtn:hover{border-color:var(--btn) !important; color:var(--aqua) !important;}
  .mfgbtn svg{flex-shrink:0;}

  /* Overlay Base */
  .overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index:100;
    align-items:center;
    justify-content:center;
    padding:20px;
    overflow-y:auto;
    box-sizing:border-box;
  }
  .overlay.open{display:flex;}
  @keyframes popupScale {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }.mfgbtn svg, .productlinkbtn svg, .addbtn svg{flex:0 0 auto;}

/* Detail Modal */
  .detailmodal{
    width:620px;
    max-width:100%;
    max-height:none;
    background:#FFFFFF !important;
    border-radius:16px !important;
    overflow:visible;
    overflow-x:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.22) !important;
    position:relative;
    top:auto;
    margin:0 auto;
    box-sizing:border-box;
  }
  .detail-close{
    position:absolute;
    top:12px;
    right:12px;
    float:none;
    margin:0;
    width:30px;
    height:30px;
    border-radius:50% !important;
    border:none !important;
    background:rgba(255,255,255,.96) !important;
    color:#1E211F !important;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:20;
    box-shadow:0 2px 8px rgba(0,0,0,.2) !important;
  }
  .detail-close:hover {
    opacity: 0.9;
  }
  .detail-media{
    width:100%;
    height:400px;
    overflow:hidden;
  }
  .detail-hero{
    width:100%;
    height:300px;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
  }
  .detail-media:hover .detail-hero{
    transform:scale(1.06);
  }
  .detail-mosaic{
    width:100%;
    height:280px;
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    grid-template-rows:repeat(3, 1fr);
    gap:2px;
  }
  .detail-body{
    padding:20px 22px 22px;
  }
  h2.detail-name{
    font-family: 'Kanit', serif;
    font-size:21px !important;
    font-weight:500 !important;
    margin:0 0 10px !important;
    color:var(--black) !important;
  }
  .splash-app-root .detail-desc{
    font-size:14px !important;
    line-height:1.6 !important;
    color:var(--ink-soft) !important;
    margin:0 0 18px !important;
  }
  .splash-app-root .detail-colorlabel{
    font-family: 'Kanit', serif;
    font-size:11px !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    color:var(--ink-soft) !important;
    margin:0 0 10px !important;
  }
  .detail-swatch-carousel{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    margin-bottom:20px;
  }
  .detail-swatch-viewport{
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
  }
  .detail-swatch-viewport::-webkit-scrollbar{display:none;}
  .detail-swatch-track{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    width:max-content;
    min-width:100%;
  }
  .detail-swatch-item{
    width:76px;
    flex:0 0 76px;
    cursor:pointer;
    text-align:center;
    scroll-snap-align:start;
  }
  .detail-swatch-nav{
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #D8E0E6 !important;
    border-radius:50% !important;
    background:#FFFFFF !important;
    color:var(--ink) !important;
    padding:0 !important;
    cursor:pointer;
    box-shadow:0 1px 3px rgba(0,0,0,.08);
    transition:background .15s ease, border-color .15s ease, opacity .15s ease;
  }
  .detail-swatch-nav:hover:not(:disabled){
    background:#F8FAFC !important;
    border-color:#B8C4CC !important;
  }
  .detail-swatch-nav:disabled{
    opacity:.35;
    cursor:default;
  }
  .detail-swatch-chip{
    width:76px;
    height:56px;
    border-radius:10px !important;
    border:2px solid transparent !important;
    margin-bottom:5px;
    background-size:cover !important;
    background-position:center !important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12) !important;
  }
  .detail-swatch-item.on .detail-swatch-chip{border-color:var(--btn) !important;}
  .detail-swatch-name{
    font-size:11px !important;
    color:var(--ink) !important;
    line-height:1.3 !important;
  }
  .detail-swatch-sku{
    font-family: 'Kanit', serif;
    font-size:9px !important;
    color:var(--ink-soft) !important;
  }
  .detail-swatch-toggle{
    display:inline-flex;
    align-items:center;
    background:none !important;
    border:none !important;
    padding:0 !important;
    margin:-10px 0 20px !important;
    color:var(--btn) !important;

    font-size:12px !important;
    font-weight:600 !important;
    text-decoration:underline !important;
    cursor:pointer;
  }
  .detail-swatch-toggle:hover{color:var(--btn-hover) !important;}
  .detail-actions{
    display:flex;
    gap:8px;
    padding-top:16px;
    border-top:1px solid var(--sand-line);
  }

  @media (max-width: 760px){
    .layout{flex-direction:column;}
    aside.sidebar{
      width:100%;
      position:static;
      height:auto;
      border-right:none;
      border-bottom:1px solid var(--sand-line);
    }
    .catlist{display:flex;flex-wrap:wrap;gap:6px;}
    .catlist li{margin:0;}
    header.topbar{flex-wrap:wrap;}
    .searchwrap{order:3; flex-basis:100%;}
  }

.scm-archive-page,.scm-single-page{width:100%;}.scm-single-page .scm-single{max-width:1200px;margin:40px auto;padding:0 24px;} .scm-single-media img{max-width:100%;height:auto;display:block;} .scm-colors{margin-top:24px;} .swatchrow{display:flex;gap:8px;flex-wrap:wrap;} .swatch{display:inline-block;width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.2);cursor:pointer;background-size:cover;background-position:center;}

/* Selection persistence / color swatch refinement */
.splash-app-root .swatch{
  background-image:none !important;
  background-color:var(--swatch-color, #CBD5E1) !important;
  position:relative;
  overflow:hidden;
}
.splash-app-root .swatch::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.14);
  pointer-events:none;
}
.splash-app-root .detail-swatch-chip{
  background-image:none !important;
  background-color:var(--swatch-color, #CBD5E1) !important;
  position:relative;
}
.splash-app-root .detail-swatch-chip::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.14);
  pointer-events:none;
}


/* Image-based options from the updated materials spreadsheet. These are options, not CSS color swatches. */
.splash-app-root .swatch.image-swatch{background-color:#e5e7eb !important;background-image:var(--swatch-image) !important;background-size:cover !important;background-position:center !important;}
.splash-app-root .detail-swatch-chip.image-swatch{background-color:#e5e7eb !important;background-image:var(--swatch-image) !important;background-size:cover !important;background-position:center !important;}

/* Override */
.splash-app-root svg {
    fill: none;
}

.detail-media img {
    height: 100% !important;
    width: auto;
    margin: 0 auto;
}

button.addbtn {
    padding: 0 !important;
}

.detail-close {
    padding: 0 !important;
}

.detail-close svg {
   width: 16px !important;
}

@media (max-width: 575px) {
  .pillgroup-label {
    display: block;
    margin-bottom: 10px;
  }

  .detail-actions {
    flex-direction: column;
  }
}

/* Product sharing */
.share-product-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
    border:none !important;
    background:#fff !important;
    color:var(--ink) !important;
    border-radius:50% !important;
    padding:9px 12px !important;
    font:600 12px/1 'DM Sans',sans-serif;cursor:pointer}
.share-product-btn:hover svg{
  /*background:#f7f5ef !important;*/
filter: brightness(0) saturate(100%) invert(82%) sepia(33%) saturate(4938%) hue-rotate(169deg) brightness(90%) contrast(91%);

}
.scm-social-menu{position:fixed;inset:0;z-index:100001;background:rgba(15,23,42,.58);display:flex;align-items:center;justify-content:center;padding:20px}
.scm-social-menu-inner{position:relative;width:min(420px,100%);background:#fff;border-radius:14px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.22)}
.scm-social-menu-inner strong{display:block;margin-bottom:16px;color:#111827;font-size:18px}
.scm-social-close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:28px;color:#64748b;cursor:pointer}
.scm-social-links{display:flex;gap:8px;flex-wrap:wrap}
.scm-social-links a,.scm-social-links button{border:1px solid #dbe2e8;background:#fff;color:#1f2937;border-radius:8px;padding:9px 12px;text-decoration:none;font:600 12px/1 'DM Sans',sans-serif;cursor:pointer}
.scm-social-links a:hover,.scm-social-links button:hover{background:#f8fafc}
.scm-social-status{display:block;min-height:18px;margin-top:12px;color:#64748b;font-size:12px}


/* 1300px content container */
.splash-app-root header.topbar,
.splash-app-root .layout{width:min(1300px,100%);margin-left:auto;margin-right:auto;}
.splash-app-root .layout{border-left:1px solid var(--sand-line);border-right:1px solid var(--sand-line);}

.scm-no-results{color:var(--ink-soft);font-size:14px;grid-column:1/-1;}


/* Detail modal viewport spacing */
.splash-app-root .detailoverlay{
  align-items:flex-start;
  justify-content:center;
  padding:40px 20px;
  overflow-y:auto;
  overflow-x:hidden;
  box-sizing:border-box;
}
.splash-app-root .detailmodal{
  max-height:none;
  overflow:visible;
  flex:0 0 auto;
}
@media (max-width:575px){
  .splash-app-root .detailoverlay{padding:24px 12px;}
  .splash-app-root .detailmodal{max-height:none;border-radius:12px !important;}
}


/* Product catalog UX updates */
.splash-app-root .topbar { display:none !important; }

/* Filterbar: search-first, compact controls, clear active-state feedback. */
.splash-app-root .ux-filterbar {
  position:sticky !important;
  top:var(--scm-header-offset, 80px) !important;
  z-index:30 !important;
  width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 0 24px;
  padding:14px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:rgba(255,255,255,.97);
  box-shadow:0 8px 24px rgba(15,23,42,.07);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.splash-app-root .ux-filterbar-main {
  display:flex;
  align-items:flex-end;
  gap:12px;
  width:100%;
}
.splash-app-root .ux-filterbar .searchwrap {
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.splash-app-root .ux-filterbar .searchwrap > label,
.splash-app-root .ux-filter-field > label {
  display:block;
  margin:0;
  font-size:10px !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
  letter-spacing:.07em !important;
  color:#64748b !important;
  font-weight:700 !important;
}
.splash-app-root .ux-filterbar .search-input-wrap { position:relative; width:100%; }
.splash-app-root .ux-filterbar .search-input-wrap > svg {
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:#64748b;
  pointer-events:none;
}
.splash-app-root .ux-filterbar #searchInput {
  width:100%;
  min-height:46px;
  box-sizing:border-box;
  padding:10px 42px 10px 42px !important;
  border:1px solid #dbe3ec !important;
  border-radius:10px !important;
  background:#f8fafc !important;
  color:#0f172a !important;
  font-size:14px !important;
  outline:0 !important;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.splash-app-root .ux-filterbar #searchInput:focus {
  border-color:var(--aqua) !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(76,174,220,.12) !important;
}
.splash-app-root .ux-filterbar #searchInput::placeholder { color:#94a3b8; opacity:1; }
.splash-app-root .ux-filterbar .ux-search-clear {
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  color:#64748b !important;
  cursor:pointer;
}
.splash-app-root .ux-filterbar .ux-search-clear:hover { background:#e2e8f0 !important; color:#0f172a !important; }
.splash-app-root .ux-filterbar .ux-search-clear[hidden] { display:none !important; }

.splash-app-root .ux-filterbar .ux-filters {
  display:flex;
  align-items:flex-end;
  gap:8px;
  width:100%;
}
.splash-app-root .ux-filter-field { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:5px; }
.splash-app-root .ux-filter-field select {
  width:100%;
  min-width:0;
  min-height:42px;
  box-sizing:border-box;
  padding:9px 34px 9px 12px;
  border:1px solid #dbe3ec !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#1e293b !important;
  font-size:13px !important;
  outline:0 !important;
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.splash-app-root .ux-filter-field select:hover { border-color:#cbd5e1 !important; background:#f8fafc !important; }
.splash-app-root .ux-filter-field select:focus {
  border-color:var(--aqua) !important;
  box-shadow:0 0 0 3px rgba(76,174,220,.10) !important;
}
.splash-app-root .ux-clear-filters {
  min-height:42px;
  white-space:nowrap;
  border:1px solid #dbe3ec !important;
  background:#fff !important;
  color:#475569 !important;
  border-radius:9px !important;
  padding:9px 13px !important;
  font-size:12px !important;
  font-weight:600 !important;
  cursor:pointer;
  transition:all .2s ease;
}
.splash-app-root .ux-clear-filters:hover:not(:disabled) { color:#0f172a !important; background:#f8fafc !important; border-color:#cbd5e1 !important; }
.splash-app-root .ux-clear-filters:disabled { opacity:.42; cursor:default; }

.splash-app-root .ux-filter-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:22px;
}
.splash-app-root .ux-active-filters { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.splash-app-root .ux-active-filter {
  display:inline-flex;
  align-items:center;
  gap:5px;
  max-width:240px;
  padding:5px 8px 5px 9px;
  border:1px solid rgba(76,174,220,.25);
  border-radius:999px;
  background:#f0f9ff;
  color:#155e75;
  font-size:11px;
  line-height:1;
}
.splash-app-root .ux-active-filter span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.splash-app-root .ux-active-filter button {
  width:17px;
  height:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  color:inherit !important;
  cursor:pointer;
}
.splash-app-root .ux-active-filter button:hover { background:rgba(21,94,117,.10) !important; }
.splash-app-root .ux-result-summary {
  flex:0 0 auto;
  color:#64748b;
  font-size:12px;
  white-space:nowrap;
}
.splash-app-root .ux-result-summary strong { color:#1e293b; font-size:13px; }

.splash-app-root .ux-filter-toggle {
  display:none;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:46px;
  border:1px solid #dbe3ec !important;
  background:#fff !important;
  color:#0f172a !important;
  border-radius:10px !important;
  padding:10px 14px !important;
  font-size:13px !important;
  font-weight:600 !important;
  cursor:pointer;
}
.splash-app-root .ux-filter-toggle svg { color:#475569; }
.splash-app-root .ux-filter-toggle b {
  display:inline-flex;
  min-width:20px;
  height:20px;
  padding:0 5px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#e2e8f0;
  color:#475569;
  font-size:10px;
  font-weight:700;
}
.splash-app-root .ux-filter-toggle.has-filters b { background:var(--aqua); color:#fff; }

.splash-app-root .pills,
.splash-app-root .pillgroup { display:none !important; }


/* Sticky filterbar: collapse after the user starts browsing products. */
.splash-app-root .ux-filterbar,
.splash-app-root .ux-filterbar * {
  transition-property:min-height,height,padding,margin,gap,border-radius,box-shadow,background-color,border-color,opacity,transform;
  transition-duration:.2s;
  transition-timing-function:ease;
}

@media(min-width:901px){
  .splash-app-root .ux-filterbar.is-compact {
    flex-direction:row;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    margin-bottom:16px;
    border-radius:11px;
    box-shadow:0 6px 18px rgba(15,23,42,.10);
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filterbar-main {
    flex:1 1 34%;
    min-width:220px;
    gap:8px;
  }
  .splash-app-root .ux-filterbar.is-compact .searchwrap,
  .splash-app-root .ux-filterbar.is-compact .ux-filter-field {
    gap:0;
  }
  .splash-app-root .ux-filterbar.is-compact .searchwrap > label,
  .splash-app-root .ux-filterbar.is-compact .ux-filter-field > label,
  .splash-app-root .ux-filterbar.is-compact .ux-active-filters,
  .splash-app-root .ux-filterbar.is-compact .ux-clear-filters {
    display:none !important;
  }
  .splash-app-root .ux-filterbar.is-compact #searchInput {
    min-height:40px;
    padding-top:7px !important;
    padding-bottom:7px !important;
    font-size:13px !important;
    border-radius:8px !important;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filterbar .search-input-wrap > svg,
  .splash-app-root .ux-filterbar.is-compact .search-input-wrap > svg {
    left:12px;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-search-clear {
    width:28px;
    height:28px;
    right:6px;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filters {
    flex:1 1 58%;
    gap:6px;
    align-items:center;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filter-field select {
    min-height:40px;
    padding-top:7px;
    padding-bottom:7px;
    border-radius:8px !important;
    font-size:12px !important;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filter-footer {
    flex:0 0 auto;
    min-height:40px;
    justify-content:flex-end;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-result-summary {
    display:flex;
    align-items:baseline;
    gap:4px;
    padding:0 4px;
    font-size:11px;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-result-summary strong {
    font-size:12px;
  }
}

@media(max-width:1100px){
  .splash-app-root .ux-filterbar-main { align-items:stretch; }
  .splash-app-root .ux-filterbar .searchwrap { flex:1 1 auto; }
  .splash-app-root .ux-filterbar .ux-filters { flex-wrap:wrap; }
  .splash-app-root .ux-filter-field { flex:1 1 180px; }
}
@media(max-width:900px){
  .splash-app-root .ux-filterbar { top:0; gap:9px; padding:10px; margin-bottom:18px; border-radius:12px; }
  .splash-app-root .ux-filterbar-main { gap:8px; }
  .splash-app-root .ux-filter-toggle { display:inline-flex; flex:0 0 auto; }
  .splash-app-root .ux-filterbar .ux-filters {
    display:none;
    padding:12px;
    border:1px solid #e2e8f0;
    border-radius:10px;
    background:#f8fafc;
    align-items:stretch;
  }
  .splash-app-root .ux-filterbar .ux-filters.is-open { display:flex; }
}
@media(max-width:560px){
  .splash-app-root .ux-filterbar { padding:8px; border-radius:11px; }
  .splash-app-root .ux-filterbar .searchwrap > label { display:none; }
  .splash-app-root .ux-filterbar #searchInput { min-height:44px; font-size:13px !important; }
  .splash-app-root .ux-filter-toggle { min-height:44px; padding:10px 11px !important; }
  .splash-app-root .ux-filterbar .ux-filters { flex-direction:column; padding:10px; }
  .splash-app-root .ux-filter-field { width:100%; flex:0 0 auto; }
  .splash-app-root .ux-filter-field select,
  .splash-app-root .ux-clear-filters { min-height:44px; }
  .splash-app-root .ux-clear-filters { width:100%; }
  .splash-app-root .ux-filter-footer { align-items:flex-start; }
  .splash-app-root .ux-active-filters { flex:1 1 auto; }
}


.scm-archive-page {
  padding: 0 !important;
  margin: 0 !important;
}

/* Product modal description: clamp to two lines. */
.splash-app-root .detail-desc{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;}

@media(max-width:900px){
  .splash-app-root .ux-filterbar.is-compact {
    gap:6px;
    padding:6px 8px;
    margin-bottom:14px;
    border-radius:10px;
    box-shadow:0 5px 16px rgba(15,23,42,.10);
  }
  .splash-app-root .ux-filterbar.is-compact .searchwrap > label,
  .splash-app-root .ux-filterbar.is-compact .ux-active-filters {
    display:none !important;
  }
  .splash-app-root .ux-filterbar.is-compact #searchInput,
  .splash-app-root .ux-filterbar.is-compact .ux-filter-toggle {
    min-height:38px;
  }
  .splash-app-root .ux-filterbar.is-compact #searchInput {
    padding-top:6px !important;
    padding-bottom:6px !important;
    font-size:12px !important;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filter-toggle {
    padding:7px 10px !important;
    border-radius:8px !important;
    font-size:12px !important;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filter-footer {
    min-height:16px;
    justify-content:flex-end;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-result-summary {
    font-size:10px;
    line-height:1.1;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-result-summary strong {
    font-size:11px;
  }
}

@media(max-width:560px){
  .splash-app-root .ux-filterbar.is-compact .ux-result-summary span {
    display:none;
  }
}

@media(min-width:901px) and (max-width:1100px){
  .splash-app-root .ux-filterbar.is-compact .ux-filters { flex-wrap:nowrap; }
  .splash-app-root .ux-filterbar.is-compact .ux-filter-field { flex:1 1 0; min-width:0; }
}

/* Desktop compact filterbar stability fix.
   Keep the sticky compact state in a predictable 3-column grid so the
   901-1100px responsive rules cannot force wrapping/reflow. */
@media (min-width:901px){
  .splash-app-root .ux-filterbar.is-compact{
    display:grid !important;
    grid-template-columns:minmax(240px,1.15fr) minmax(420px,2fr) auto;
    align-items:center !important;
    column-gap:8px !important;
    row-gap:0 !important;
    padding:7px 9px !important;
    min-height:54px;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filterbar-main{
    display:block !important;
    width:100%;
    min-width:0 !important;
  }
  .splash-app-root .ux-filterbar.is-compact .searchwrap{
    width:100%;
    min-width:0;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filters{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    min-width:0;
    gap:6px !important;
    flex-wrap:nowrap !important;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filter-field{
    width:100%;
    min-width:0 !important;
    flex:none !important;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filter-field select{
    width:100%;
    min-width:0;
    height:40px;
    text-overflow:ellipsis;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filter-footer{
    display:flex !important;
    width:auto;
    min-width:max-content;
    min-height:40px;
    align-items:center;
    justify-content:flex-end;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .splash-app-root .ux-filterbar.is-compact{
    grid-template-columns:minmax(200px,.9fr) minmax(390px,1.7fr) auto;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filterbar-main{
    align-items:initial !important;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filters{
    flex-wrap:nowrap !important;
  }
}


/* v12 desktop single-row filterbar refinement
   Desktop stays one row at all times; mobile retains the expandable filter approach. */
@media (min-width:901px){
  .splash-app-root .ux-filterbar,
  .splash-app-root .ux-filterbar.is-compact{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:8px !important;
    min-height:0 !important;
    padding:8px 10px !important;
    margin-bottom:18px !important;
    border-radius:12px !important;
  }

  .splash-app-root .ux-filterbar-main,
  .splash-app-root .ux-filterbar.is-compact .ux-filterbar-main{
    display:block !important;
    flex:1 1 32% !important;
    width:auto !important;
    min-width:210px !important;
  }

  .splash-app-root .ux-filterbar .searchwrap,
  .splash-app-root .ux-filterbar.is-compact .searchwrap{
    width:100% !important;
    min-width:0 !important;
    gap:0 !important;
  }

  .splash-app-root .ux-filterbar .searchwrap > label,
  .splash-app-root .ux-filterbar .ux-filter-field > label,
  .splash-app-root .ux-filterbar.is-compact .searchwrap > label,
  .splash-app-root .ux-filterbar.is-compact .ux-filter-field > label{
    display:none !important;
  }

  .splash-app-root .ux-filterbar #searchInput,
  .splash-app-root .ux-filterbar.is-compact #searchInput{
    min-height:40px !important;
    height:40px !important;
    padding:7px 38px 7px 38px !important;
    font-size:13px !important;
    border-radius:9px !important;
  }

  .splash-app-root .ux-filterbar .ux-filters,
  .splash-app-root .ux-filterbar.is-compact .ux-filters{
    display:grid !important;
    grid-template-columns:minmax(118px,1fr) minmax(135px,1.15fr) minmax(120px,1fr) auto !important;
    flex:1.7 1 58% !important;
    width:auto !important;
    min-width:430px !important;
    gap:6px !important;
    align-items:center !important;
  }

  .splash-app-root .ux-filterbar .ux-filter-field,
  .splash-app-root .ux-filterbar.is-compact .ux-filter-field{
    width:100% !important;
    min-width:0 !important;
    gap:0 !important;
  }

  .splash-app-root .ux-filterbar .ux-filter-field select,
  .splash-app-root .ux-filterbar.is-compact .ux-filter-field select,
  .splash-app-root .ux-filterbar .ux-clear-filters,
  .splash-app-root .ux-filterbar.is-compact .ux-clear-filters{
    min-height:40px !important;
    height:40px !important;
  }

  .splash-app-root .ux-filterbar .ux-filter-field select,
  .splash-app-root .ux-filterbar.is-compact .ux-filter-field select{
    padding-top:7px !important;
    padding-bottom:7px !important;
    font-size:12px !important;
    text-overflow:ellipsis;
  }

  .splash-app-root .ux-filterbar .ux-filter-footer,
  .splash-app-root .ux-filterbar.is-compact .ux-filter-footer{
    display:flex !important;
    flex:0 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    min-height:40px !important;
    align-items:center !important;
    justify-content:flex-end !important;
    overflow:hidden;
  }

  .splash-app-root .ux-filterbar .ux-active-filters,
  .splash-app-root .ux-filterbar.is-compact .ux-active-filters{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
    max-width:280px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    white-space:nowrap;
  }
  .splash-app-root .ux-filterbar .ux-active-filters::-webkit-scrollbar{ display:none; }

  .splash-app-root .ux-filterbar .ux-active-filter{
    flex:0 0 auto;
    max-width:170px;
    padding:5px 7px 5px 8px;
  }

  /* Desktop no longer needs a separate visual compact transformation. */
  .splash-app-root .ux-filterbar.is-compact{
    box-shadow:0 5px 16px rgba(15,23,42,.10) !important;
  }
}

@media (min-width:901px) and (max-width:1180px){
  .splash-app-root .ux-filterbar-main,
  .splash-app-root .ux-filterbar.is-compact .ux-filterbar-main{
    flex-basis:26% !important;
    min-width:180px !important;
  }
  .splash-app-root .ux-filterbar .ux-filters,
  .splash-app-root .ux-filterbar.is-compact .ux-filters{
    grid-template-columns:minmax(105px,1fr) minmax(120px,1.1fr) minmax(105px,1fr) auto !important;
    min-width:390px !important;
  }
  .splash-app-root .ux-filterbar .ux-active-filters,
  .splash-app-root .ux-filterbar.is-compact .ux-active-filters{
    max-width:190px;
  }
}

/* UX filterbar polish: unified controls, borderless clear action, no active-filter chips. */
.splash-app-root .ux-filter-footer,
.splash-app-root .ux-active-filters,
.splash-app-root .ux-active-filter {
  display:none !important;
}

.splash-app-root .ux-filterbar {
  --ux-control-h: 42px;
  --ux-control-radius: 10px;
  --ux-control-border: #d9e2ec;
  --ux-control-bg: #ffffff;
  --ux-control-text: #172033;
  --ux-control-muted: #7a8798;
  --ux-control-hover: #c5d0dc;
  --ux-control-focus: var(--aqua);
  gap:8px;
  padding:9px 10px;
  border-color:#e3e9ef;
  border-radius:13px;
  box-shadow:0 6px 20px rgba(15,23,42,.055);
}

/* Search and selects share the same visual language. */
.splash-app-root .ux-filterbar #searchInput,
.splash-app-root .ux-filterbar .ux-filter-field select {
  height:var(--ux-control-h) !important;
  min-height:var(--ux-control-h) !important;
  border:1px solid var(--ux-control-border) !important;
  border-radius:var(--ux-control-radius) !important;
  background:var(--ux-control-bg) !important;
  color:var(--black) !important;
  font-family: 'DM Sans', sans-serif;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  box-shadow:none !important;
  outline:none !important;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.splash-app-root .ux-filterbar #searchInput {
  padding:0 40px 0 39px !important;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  -webkit-appearance:none;
  appearance:none;
}
.splash-app-root .ux-filterbar #searchInput::-webkit-search-cancel-button,
.splash-app-root .ux-filterbar #searchInput::-webkit-search-decoration {
  -webkit-appearance:none;
  appearance:none;
}
.splash-app-root .ux-filterbar #searchInput::placeholder {
  color:var(--ux-control-muted) !important;
  opacity:1;
  text-overflow:ellipsis;
}

.splash-app-root .ux-filterbar .ux-filter-field select {
  padding:0 34px 0 12px !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.splash-app-root .ux-filterbar #searchInput:hover,
.splash-app-root .ux-filterbar .ux-filter-field select:hover {
  border-color:var(--ux-control-hover) !important;
  background:#fbfcfd !important;
}

.splash-app-root .ux-filterbar #searchInput:focus,
.splash-app-root .ux-filterbar .ux-filter-field select:focus {
  border-color:var(--ux-control-focus) !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(76,174,220,.12) !important;
}

.splash-app-root .ux-filterbar .search-input-wrap > svg {
  left:13px;
  color:#718096;
}
.splash-app-root .ux-filterbar .ux-search-clear {
  right:6px;
  width:30px;
  height:30px;
  color:#718096 !important;
}
.splash-app-root .ux-filterbar .ux-search-clear:hover {
  background:#f1f5f9 !important;
  color:#172033 !important;
}

/* Clear all is intentionally a lightweight text action, not another input. */
.splash-app-root .ux-clear-filters,
.splash-app-root .ux-filterbar.is-compact .ux-clear-filters {
  height:var(--ux-control-h) !important;
  min-height:var(--ux-control-h) !important;
  padding:0 7px !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#526173 !important;
  font-size:12px !important;
  font-weight:650 !important;
  text-decoration:none;
}
.splash-app-root .ux-clear-filters:hover:not(:disabled) {
  border:0 !important;
  background:#f3f6f9 !important;
  color:#172033 !important;
}
.splash-app-root .ux-clear-filters:focus-visible {
  outline:2px solid rgba(76,174,220,.45) !important;
  outline-offset:1px;
}
.splash-app-root .ux-clear-filters:disabled {
  border:0 !important;
  background:transparent !important;
  opacity:.35;
}

@media (min-width:901px){
  .splash-app-root .ux-filterbar,
  .splash-app-root .ux-filterbar.is-compact {
    gap:8px !important;
    padding:9px 10px !important;
  }
  .splash-app-root .ux-filterbar-main,
  .splash-app-root .ux-filterbar.is-compact .ux-filterbar-main {
    flex:1 1 38% !important;
    min-width:220px !important;
  }
  .splash-app-root .ux-filterbar .ux-filters,
  .splash-app-root .ux-filterbar.is-compact .ux-filters {
    grid-template-columns:minmax(120px,.92fr) minmax(145px,1.08fr) minmax(125px,.95fr) auto !important;
    flex:1.62 1 62% !important;
    min-width:465px !important;
    gap:7px !important;
  }
  .splash-app-root .ux-filterbar #searchInput,
  .splash-app-root .ux-filterbar.is-compact #searchInput,
  .splash-app-root .ux-filterbar .ux-filter-field select,
  .splash-app-root .ux-filterbar.is-compact .ux-filter-field select,
  .splash-app-root .ux-filterbar .ux-clear-filters,
  .splash-app-root .ux-filterbar.is-compact .ux-clear-filters {
    height:42px !important;
    min-height:42px !important;
  }
}

@media (max-width:900px){
  .splash-app-root .ux-filterbar #searchInput,
  .splash-app-root .ux-filterbar .ux-filter-field select {
    min-height:44px !important;
    height:44px !important;
  }
  .splash-app-root .ux-clear-filters {
    min-height:42px !important;
    height:42px !important;
  }
}


/* Sticky filterbar: stays directly below the visible site/theme header. */
.splash-app-root .ux-filterbar,
.splash-app-root .ux-filterbar.is-compact {
  --scm-header-offset: 80px;
  position:sticky !important;
  top:var(--scm-header-offset) !important;
  z-index:30 !important;
}


/* Shared sticky positioning: filterbar + category sidebar use the same live Elementor header offset. */
.splash-app-root {
  --scm-header-offset:80px;
  --scm-sticky-gap:8px;
  --scm-sticky-top:88px;
}

.splash-app-root .ux-filterbar,
.splash-app-root .ux-filterbar.is-compact {
  top:var(--scm-sticky-top, calc(var(--scm-header-offset, 80px) + 8px)) !important;
  z-index:30 !important;
}

@media (min-width:761px){
  .splash-app-root aside.sidebar {
    top:var(--scm-sidebar-top, var(--scm-sticky-top, 88px)) !important;
    height:calc(100vh - var(--scm-sidebar-top, var(--scm-sticky-top, 88px)) - 12px) !important;
  }
}

/* Clear all stays available in the desktop sticky/compact state. */
@media (min-width:901px){
  .splash-app-root .ux-filterbar.is-compact .ux-clear-filters {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    visibility:visible !important;
    opacity:1;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-clear-filters:disabled {
    opacity:.35;
  }
}

@media (max-width:760px){
  /* Turn the desktop sidebar into a compact, swipeable category rail. */
  .splash-app-root aside.sidebar{
    width:100% !important;
    padding:12px 24px 13px !important;
    border-right:0 !important;
    border-bottom:1px solid #e2e8f0 !important;
    background:#fff !important;
    overflow:visible !important;
  }

  .splash-app-root .sidebar .eyebrow{
    padding:0 2px 8px !important;
    font-size:10px !important;
    letter-spacing:.1em !important;
  }

  .splash-app-root .catlist{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:7px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 2px 5px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .splash-app-root .catlist::-webkit-scrollbar{display:none;}
  .splash-app-root .catlist li{
    flex:0 0 auto !important;
    margin:0 !important;
    scroll-snap-align:start;
  }
  .splash-app-root .catbtn{
    width:auto !important;
    min-height:40px !important;
    padding:9px 14px !important;
    border:1px solid #dbe4ea !important;
    border-radius:999px !important;
    background:#fff !important;
    color:#334155 !important;
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-shadow:0 1px 2px rgba(15,23,42,.03) !important;
  }
  .splash-app-root .catbtn:hover{
    background:#f8fafc !important;
    border-color:#cbd5e1 !important;
  }
  .splash-app-root .catbtn.active{
    background:var(--btn) !important;
    border-color:var(--btn) !important;
    color:#fff !important;
    box-shadow:0 3px 10px rgba(76,174,220,.22) !important;
  }

  /* Keep the chosen category visible after renderCategories() rebuilds the rail. */
  .splash-app-root .catbtn.active{
    scroll-margin-inline:16px;
  }


  .splash-app-root .selpanel{
    margin-top:9px !important;
    padding-top:9px !important;
    border-top:1px solid #eef2f6 !important;
  }
  .splash-app-root .selpanel > .eyebrow{
    display:none !important;
  }
}

@media (max-width:420px){
  .splash-app-root aside.sidebar{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .splash-app-root .catbtn{
    min-height:38px !important;
    padding:8px 12px !important;
    font-size:12.5px !important;
  }
}


@media (max-width:760px){
  .splash-app-root .selpanel{
    display: none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }
  .splash-app-root .layout{
    padding-bottom:76px;
  }
}

.scm-catalog-page,
.scm-product-archive {
  background: #fff !important;
}

.scm-catalog-page .ast-container,
.scm-product-archive .ast-container {
   max-width: 100vw !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
}

/* Mobile sticky filterbar refinement: compact, stable and below Elementor header. */
@media (max-width:900px){
  .splash-app-root .ux-filterbar,
  .splash-app-root .ux-filterbar.is-compact{
    top:var(--scm-sticky-top, 88px) !important;
    padding:6px 7px !important;
    gap:6px !important;
    margin-bottom:14px !important;
    border-radius:10px !important;
    background:#fff !important;
    box-shadow:0 5px 15px rgba(15,23,42,.09) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  .splash-app-root .ux-filterbar-main,
  .splash-app-root .ux-filterbar.is-compact .ux-filterbar-main{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
  }

  .splash-app-root .ux-filterbar .searchwrap,
  .splash-app-root .ux-filterbar.is-compact .searchwrap{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
  }

  .splash-app-root .ux-filterbar #searchInput,
  .splash-app-root .ux-filterbar.is-compact #searchInput{
    height:40px !important;
    min-height:40px !important;
    padding:6px 34px 6px 36px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    border-radius:9px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .splash-app-root .ux-filterbar .search-input-wrap > svg{
    left:12px !important;
    width:15px !important;
    height:15px !important;
  }

  .splash-app-root .ux-filterbar .ux-search-clear{
    right:5px !important;
    width:30px !important;
    height:30px !important;
  }

  .splash-app-root .ux-filter-toggle,
  .splash-app-root .ux-filterbar.is-compact .ux-filter-toggle{
    display:inline-flex !important;
    flex:0 0 92px !important;
    width:92px !important;
    height:40px !important;
    min-height:40px !important;
    padding:6px 8px !important;
    gap:5px !important;
    border-radius:999px !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }

  .splash-app-root .ux-filter-toggle svg{
    width:15px !important;
    height:15px !important;
    flex:0 0 15px;
  }

  .splash-app-root .ux-filter-toggle b{
    min-width:18px !important;
    height:18px !important;
    padding:0 4px !important;
    font-size:9px !important;
  }

  .splash-app-root .ux-filterbar .ux-filters{
    margin-top:0 !important;
  }
}

@media (max-width:420px){
  .splash-app-root .ux-filter-toggle,
  .splash-app-root .ux-filterbar.is-compact .ux-filter-toggle{
    flex-basis:86px !important;
    width:86px !important;
    padding-left:7px !important;
    padding-right:7px !important;
  }
}


/* Stable sticky filterbar: scrolling must never change typography or control sizing. */
@media (max-width:900px){
  .splash-app-root .ux-filterbar.is-compact{
    gap:8px !important;
    padding:8px 10px !important;
    margin-bottom:18px !important;
    border-radius:12px !important;
    box-shadow:0 6px 20px rgba(15,23,42,.055) !important;
  }
  .splash-app-root .ux-filterbar.is-compact .searchwrap > label{
    display:none !important;
  }
  .splash-app-root .ux-filterbar.is-compact #searchInput{
    height:40px !important;
    min-height:40px !important;
    padding:0 40px 0 39px !important;
    font-size:13px !important;
    line-height:1.2 !important;
    border-radius:10px !important;
  }
  .splash-app-root .ux-filterbar.is-compact .ux-filter-toggle{
    height:40px !important;
    min-height:40px !important;
    padding:0 10px !important;
    font-size:13px !important;
    line-height:1.2 !important;
    border-radius:10px !important;
  }
}

/* Mobile sticky correction: sit directly below Elementor header with no extra shadow gap. */
@media (max-width:900px){
  .splash-app-root{
    --scm-sticky-gap:0px;
  }
  .splash-app-root .ux-filterbar,
  .splash-app-root .ux-filterbar.is-compact{
    top:var(--scm-header-offset, 80px) !important;
  }
}


/* Desktop sticky alignment: filterbar and category sidebar share one stable header boundary + gap. */
@media (min-width:901px){
  .splash-app-root{
    --scm-sticky-gap:8px;
  }
  .splash-app-root .ux-filterbar,
  .splash-app-root .ux-filterbar.is-compact{
    top:var(--scm-sticky-top, calc(var(--scm-header-offset, 80px) + 8px)) !important;
  }
  .splash-app-root aside.sidebar{
    top:var(--scm-sticky-top, calc(var(--scm-header-offset, 80px) + 8px)) !important;
    height:calc(100vh - var(--scm-sticky-top, calc(var(--scm-header-offset, 80px) + 8px)) - 12px) !important;
  }
}


/* Elementor isolation ------------------------------------------------------
   Keep Elementor/theme header and footer styling intact, while normalizing
   the catalog application's own typography and form controls. */

/* Hidden anti-spam field for the public Email to Designer form. */
body .scm-email-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* Keep search text geometry stable on focus. */
.splash-app-root .ux-filterbar .search-input-wrap {
  min-width:0;
  overflow:visible;
}
.splash-app-root .ux-filterbar #searchInput,
.splash-app-root .ux-filterbar #searchInput:hover,
.splash-app-root .ux-filterbar #searchInput:focus {
  padding-left:39px !important;
  padding-right:40px !important;
  font-size:13px !important;
  line-height:1.2 !important;
  letter-spacing:normal !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.splash-app-root .ux-filterbar #searchInput:focus {
  text-indent:0 !important;
}
@media (max-width:900px) {
  .splash-app-root .ux-filterbar #searchInput,
  .splash-app-root .ux-filterbar #searchInput:hover,
  .splash-app-root .ux-filterbar #searchInput:focus {
    padding:6px 34px 6px 36px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    border-radius:9px !important;
  }
}

/* Stable custom search placeholder.
   A real overlay keeps ellipsis visible while the native input is focused. */
.splash-app-root .ux-filterbar .search-input-wrap {
  position: relative;
  min-width: 0;
}
.splash-app-root .ux-filterbar .search-placeholder {
  position: absolute;
  left: 39px;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ux-control-muted, #94a3b8);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  pointer-events: none;
  z-index: 2;
}
.splash-app-root .ux-filterbar .search-input-wrap.has-value .search-placeholder {
  display: none;
}
.splash-app-root .ux-filterbar #searchInput::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}
@media (max-width: 900px) {
  .splash-app-root .ux-filterbar .search-placeholder {
    left: 36px;
    right: 34px;
    font-size: 12px;
  }
}

/* SCM Catalog UI polish */
/* ==========================================================================
   Catalog UI polish
   Visual refinements only — intentionally avoids sticky/scroll/layout logic.
   ========================================================================== */

.splash-app-root {
  --scm-ui-border: #e2e8f0;
  --scm-ui-border-hover: #cbd5e1;
  --scm-ui-text: #0f172a;
  --scm-ui-muted: #64748b;
  --scm-ui-surface: #ffffff;
  --scm-ui-surface-soft: #f8fafc;
  --scm-ui-focus: rgba(15, 23, 42, .12);
  --scm-ui-radius: 10px;
}

/* Filterbar */
.splash-app-root .ux-filterbar {
  background: rgba(255,255,255,.98);
  border: 1px solid var(--scm-ui-border);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(15,23,42,.055);
}

.splash-app-root .ux-filterbar .search-input-wrap,
.splash-app-root .ux-filterbar select,
.splash-app-root .ux-filterbar .ux-filter-toggle {
  border-color: var(--scm-ui-border);
  background-color: var(--scm-ui-surface);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.splash-app-root .ux-filterbar .search-input-wrap:hover,
.splash-app-root .ux-filterbar select:hover,
.splash-app-root .ux-filterbar .ux-filter-toggle:hover {
  border-color: var(--scm-ui-border-hover);
}

.splash-app-root .ux-filterbar .search-input-wrap:focus-within,
.splash-app-root .ux-filterbar select:focus,
.splash-app-root .ux-filterbar .ux-filter-toggle:focus-visible {
  border-color: #94a3b8;
  outline: none;
}

.splash-app-root .ux-filterbar #searchInput,
.splash-app-root .ux-filterbar select,
.splash-app-root .ux-filterbar button {
  font-family: 'DM Sans', sans-serif;
}

.splash-app-root .ux-filterbar #searchInput {
  color: var(--scm-ui-text);
}

.splash-app-root .ux-filterbar .search-placeholder {
  color: #94a3b8;
  letter-spacing: -.01em;
}

.splash-app-root .ux-clear-filters {
  color: var(--scm-ui-muted);
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}

.splash-app-root .ux-clear-filters:hover {
  color: var(--scm-ui-text);
  background: var(--scm-ui-surface-soft);
}

.splash-app-root .ux-clear-filters:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 2px;
}

/* Category navigation */
.splash-app-root .category-btn {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}

.splash-app-root .category-btn:hover {
  transform: translateY(-1px);
}

.splash-app-root .category-btn:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 2px;
}

/* Product cards */
.splash-app-root .product-card {
  border-color: var(--scm-ui-border);
  box-shadow: 0 2px 10px rgba(15,23,42,.035);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.splash-app-root .product-card:hover {
  border-color: var(--scm-ui-border-hover);
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
  transform: translateY(-2px);
}

.splash-app-root .product-card img {
  transition: transform .35s ease;
}

.splash-app-root .product-card:hover img {
  transform: scale(1.015);
}

/* Modal / panels */
.splash-app-root .modal-content,
.splash-app-root .share-modal-content {
  border: 1px solid var(--scm-ui-border);
  box-shadow: 0 24px 70px rgba(15,23,42,.18);
}

.splash-app-root .modal-close,
.splash-app-root .share-close {
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.splash-app-root .modal-close:hover,
.splash-app-root .share-close:hover {
  background: var(--scm-ui-surface-soft);
}

.splash-app-root .modal-close:focus-visible,
.splash-app-root .share-close:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 2px;
}

/* Mobile: keep controls clean without changing their established dimensions. */
@media (max-width: 900px) {
  .splash-app-root .ux-filterbar {
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(15,23,42,.06);
  }

  .splash-app-root .category-btn:hover,
  .splash-app-root .product-card:hover {
    transform: none;
  }

  .splash-app-root .product-card:hover img {
    transform: none;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .splash-app-root *,
  .splash-app-root *::before,
  .splash-app-root *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Progressive viewport card rendering sentinel. */
.splash-app-root .scm-card-sentinel{
  grid-column:1 / -1;
  width:100%;
  height:1px;
  pointer-events:none;
  visibility:hidden;
}

/* SCM progressive card loader */
.splash-app-root .scm-card-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  margin: 12px 0 4px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events: none;
}

.splash-app-root .scm-card-loader.is-loading {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.splash-app-root .scm-card-loader__spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid rgba(76, 174, 220, .22);
  border-top-color: var(--scm-brand-blue, #4caedc);
  border-radius: 50%;
  animation: scm-card-spinner .7s linear infinite;
}

@keyframes scm-card-spinner {
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .splash-app-root .scm-card-loader {
    min-height: 40px;
    margin-top: 8px;
    font-size: 12px;
  }

}

.scm-email-submit:focus,
.scm-email-submit:hover {
  background: #fff!important;
  border: 1px solid #4CAEDC !important;
  color: #4CAEDC !important;
}
/* Custom filter dropdowns
   Native selects remain in the DOM as the filtering source of truth, while these
   controls provide a fully styleable dropdown that matches the original catalog UI. */
.splash-app-root .ux-filter-field .scm-custom-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.splash-app-root .ux-filter-field .scm-native-filter-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

.splash-app-root .scm-custom-select__button {
  width: 100%;
  min-height: 42px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 15px 9px 12px !important;
  border: 1px solid #d7dde3 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #000 !important;
  font: 600 12px/1.25 "DM Sans", sans-serif !important;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.splash-app-root .scm-custom-select__button:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}

.splash-app-root .scm-custom-select.is-open .scm-custom-select__button,
.splash-app-root .scm-custom-select__button:focus-visible {
  outline: none !important;
  border-color: #4caedc !important;
  box-shadow: 0 0 0 3px rgba(76, 174, 220, .14) !important;
}

.splash-app-root .scm-custom-select__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.splash-app-root .scm-custom-select__chevron {
  flex: 0 0 auto;
  margin-left: auto;
  transition: transform .16s ease;
}

.splash-app-root .scm-custom-select.is-open .scm-custom-select__chevron {
  transform: rotate(180deg);
}

.splash-app-root .scm-custom-select__menu {
  position: absolute;
  z-index: 10020;
  top: calc(100% + 6px);
  left: 0;
  width: max(100%, 190px);
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
}

.splash-app-root .scm-custom-select__menu[hidden] {
  display: none !important;
}

.splash-app-root .scm-custom-select__option {
  width: 100%;
  display: block;
  padding: 9px 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--black) !important;
  font: 500 12px/1.35 "DM Sans", sans-serif !important;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
}

.splash-app-root .scm-custom-select__option:hover,
.splash-app-root .scm-custom-select__option:focus-visible {
  outline: none !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.splash-app-root .scm-custom-select__option[aria-selected="true"] {
  /*background: rgba(76, 174, 220, .12) !important;*/
  background: var(--lightgray);
  color: #3d8fb5 !important;
  font-weight: 700 !important;
}

@media (max-width: 760px) {
  .splash-app-root .scm-custom-select__button {
    min-height: 44px;
  }
  .splash-app-root .scm-custom-select__menu {
    width: 100%;
    max-height: 230px;
  }
}

/* Image-backed color/finish options: use actual <img> elements so URL previews are reliable. */
.splash-app-root .swatch.image-swatch,
.splash-app-root .detail-swatch-chip.image-swatch {
  overflow: hidden !important;
  background-image: none !important;
  background-color: #fff !important;
}
.splash-app-root .swatch.image-swatch > img,
.splash-app-root .detail-swatch-chip.image-swatch > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}

@media (max-width: 767px) {
  .splash-app-root main {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (hover:none), (pointer:coarse) {
  .splash-app-root .swatch:focus::before,
  .splash-app-root .swatch:active::before {
    opacity:1;
    visibility:visible;
  }
}

/* Filter bar controls — pill shape */
.splash-app-root .ux-filterbar #searchInput,
.splash-app-root .ux-filterbar select,
.splash-app-root .ux-filterbar .scm-custom-select__button,
.splash-app-root .ux-filterbar .ux-search-input,
.splash-app-root .ux-filterbar input[type="search"],
.splash-app-root .ux-filterbar input[type="text"] {
  border-radius:999px !important;
}

/* Mobile responsiveness hardening */
@media (max-width:640px) {
  .splash-app-root,
  .splash-app-root main,
  .splash-app-root .ux-filterbar,
  .splash-app-root .grid,
  .scm-product-page,
  .scm-product-page .scm-product-wrap,
  .scm-product-page .scm-product-info,
  .scm-product-page .scm-product-gallery {
    min-width:0;
    max-width:100%;
  }

  .splash-app-root .ux-filterbar {
    overflow:visible;
  }

  .splash-app-root .ux-filterbar input,
  .splash-app-root .ux-filterbar select,
  .splash-app-root .ux-filterbar .scm-custom-select,
  .splash-app-root .ux-filterbar .scm-custom-select__button {
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  .scm-product-page .scm-product-action-row,
  .scm-product-page #detailColorBlock,
  .scm-product-page .detail-swatch-carousel,
  .scm-product-page .detail-swatch-viewport {
    max-width:100%;
    min-width:0;
  }

  .scm-review-share-overlay .sharemodal,
  .scm-email-modal {
    box-sizing:border-box;
  }
}


/* Filter search focus — no visible focus border or shadow. */
.splash-app-root .ux-filterbar #searchInput:focus,
.splash-app-root .ux-filterbar #searchInput:focus-visible,
.splash-app-root .ux-filterbar input[type="search"]:focus,
.splash-app-root .ux-filterbar input[type="search"]:focus-visible {
  border-color:#dbe3ec !important;
  box-shadow:none !important;
  outline:none !important;
}