:root{
  --navy:#1a2e4a;--teal:#009b98;--orange:#e8640c;--red:#e8392a;
  --text:#1a2e4a;--text-m:#4a5568;--text-l:#718096;--text-ll:#a0aec0;
  --border:#e2e8f0;--bg:#f4f5f7;--white:#fff;
  --shadow:0 1px 4px rgba(26,46,74,.07);--shadow-h:0 6px 20px rgba(26,46,74,.13);
}
#rs-bar-page {
    margin-bottom: 0 !important;
}
/* TOP BAR */
.topbar{background:var(--navy);color:rgba(255,255,255,.6);font-size:12px;text-align:center;padding:7px 24px;display:flex;justify-content:center;gap:40px}
.topbar strong{color:#fff}

/* HEADER */
header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(26,46,74,.05)}
.hdr{max-width:1400px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:20px}
.logo{font-size:17px;font-weight:700;color:var(--navy);white-space:nowrap;flex-shrink:0;line-height:1.2}
.logo span{color:var(--red)}
.logo small{display:block;font-size:10px;font-weight:400;color:var(--text-l);letter-spacing:.3px}
.search-wrap {
    position: relative; margin: 4px 0;
}
.s-ico{display: none;}
#q{-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex:1;border:none;background:#fff;border: none;width: 100%; border-radius: 4px;font-size:15px;color:var(--text);padding:7px 44px 7px 15px; height:38px;outline:2px solid #fff;}
#q::placeholder{color:var(--text-ll)}
#q:focus{
  outline: 2px solid #0991A1;
}
#total-count{display: none;}
.search-btn{background:var(--teal);color:#fff;border:none;border-radius:4px; position: absolute; top: 3px; right: 4px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;cursor:pointer;transition:background .2s;flex-shrink:0}
.search-btn:hover{background:#fa6f3a;}
.hdr-ph{color:var(--red);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;flex-shrink:0}

/* RELATED SEARCHES BAR (v4.6.14) — container is always present in the DOM.
   JS toggles display between 'none' (during loading) and 'block' (after render).
   Background transparent so it blends with whatever page container it's inside —
   user wants no visible boundary around the bar. */
#rs-bar,#rs-bar-page{background:transparent;display:none}
.rs-inner{max-width:1400px;margin:0 auto;padding:0 28px;display:flex;gap:8px;align-items:center;min-height:44px}
.rs-lbl{font-size:11px;font-weight:600;color:var(--text-l);white-space:nowrap;margin-right:4px;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}
.rs-chip{
  padding:8px 16px;background:#E0EEF3;
  border-radius:4px;
  font-size:13px;color:#273755;cursor:pointer;white-space:nowrap;
  transition:all .15s;display:inline-block;
  text-decoration:none;line-height:1;font-weight:400
}
.rs-chip:first-letter {
  text-transform: uppercase;
}
.rs-chip:hover{background:var(--teal);color:#fff;border-color:var(--teal);text-decoration:none}

/* MAIN CONTENT AREA */
.results-wrap{max-width:1400px;margin:0 auto;padding:0px}
#acs-main {
	
}
/* LANDING PAGE */
.landing{max-width:860px;margin:0 auto;padding:48px 0 72px;text-align:center}
.landing h2{font-size:30px;font-weight:800;color:var(--navy);line-height:1.2;margin-bottom:10px}
.landing h2 em{font-style:normal;color:var(--teal)}
.land-sub{font-size:15px;color:var(--text-m);max-width:500px;margin:0 auto 40px;line-height:1.6}
.land-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-ll);margin-bottom:14px}
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:40px;text-align:center}
.cat-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:18px 10px 14px;cursor:pointer;transition:all .18s}
.cat-card:hover{border-color:var(--teal);box-shadow:0 4px 14px rgba(0,155,152,.12);transform:translateY(-2px)}
.cat-ico{font-size:28px;margin-bottom:8px}
.cat-name{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:2px}
.cat-sub{font-size:10.5px;color:var(--text-l)}
.pop-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:40px}
.pop-chip{padding:7px 16px;background:var(--white);border:1.5px solid var(--border);border-radius:100px;font-size:13px;color:var(--text-m);cursor:pointer;transition:all .15s;font-family:'Outfit',sans-serif}
.pop-chip:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.trust-row{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--border)}
.trust-item{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-m);font-weight:500}

/* FOUND HEADING */
.found-hd{font-size:17px;font-weight:700;color:var(--text);margin-bottom:18px; padding-top: 28px;}
.found-sub{font-size:13px;color:var(--text-l);font-weight:400;margin-left:10px}

.lead-form{background:#f0f9f9;border:1px solid #c8ede8;border-radius:10px;padding:14px 16px;margin-top:4px;display:flex;flex-direction:column;gap:8px}
.lead-form p{font-size:13px;color:#374151;margin:0 0 4px}
.lead-form label{font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}
.lead-form input{width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;font-family:inherit;outline:none;transition:border .15s}
.lead-form input:focus{border-color:#009b98}
.lead-form .lf-btn{padding:9px 0;background:#009b98;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.lead-form .lf-btn:hover{background:#007f7c}
.lead-form .lf-skip{text-align:center;font-size:11px;color:#9ca3af;cursor:pointer;text-decoration:underline;margin-top:2px}
/* HYBRID LAYOUT */
/* HYBRID LAYOUT */
.layout-hb{display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:start}

/* CHAT PANEL */
.chat-panel{background:var(--white);border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow);display:flex;flex-direction:column;position:sticky;top:76px;max-height:calc(100vh - 96px)}
.chat-hdr{padding:15px 18px;background:var(--navy);border-radius:16px 16px 0 0;display:flex;align-items:center;gap:13px;flex-shrink:0}
.chat-av{width:40px;height:40px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-hdr-info h3{font-size:15px;font-weight:700;color:#fff;line-height:1.2}
.chat-hdr-info p{font-size:11px;color:rgba(255,255,255,.5);margin-top:1px}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;min-height:260px}
.cu{display:flex;flex-direction:column;align-items:flex-end}
.cb{display:flex;flex-direction:column;align-items:flex-start}
.clbl{font-size:10px;color:var(--text-ll);margin-bottom:3px;display:flex;align-items:center;gap:4px}
.cdot{width:5px;height:5px;border-radius:50%;background:var(--teal);display:inline-block}
.cbbl{padding:9px 13px;border-radius:12px;font-size:13px;line-height:1.6;max-width:90%}
.cu .cbbl{background:var(--teal);color:#fff;border-radius:12px 12px 2px 12px}
.cb .cbbl{background:#f0f2f5;color:var(--text);border-radius:2px 12px 12px 12px}
.cb .cbbl a{color:var(--teal);font-weight:600;text-decoration:underline}
.cb .cbbl p{margin:0 0 7px 0}
.cb .cbbl p:last-child{margin-bottom:0}
.typing{display:flex;gap:4px;padding:3px 0}
.typing span{width:7px;height:7px;background:var(--text-ll);border-radius:50%;animation:bnc 1.2s ease infinite}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes bnc{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
.chat-inp-row{padding:11px 13px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0}
.chat-inp{flex:1;border:1.5px solid var(--border);border-radius:8px;padding:8px 12px;font-family:'Outfit',sans-serif;font-size:13px;color:var(--text);outline:none;transition:border-color .2s}
.chat-inp:focus{border-color:var(--teal)}
.chat-snd{background:var(--orange);color:#fff;border:none;border-radius:8px;padding:8px 18px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.chat-snd:hover{background:#c45509}

/* RESULTS HEADER — chips left, count+view-all right */
.results-hdr{display:flex;align-items:center;justify-content:space-between;padding:20px 0 14px;border-bottom:1px solid var(--border);margin-bottom:0;flex-wrap:wrap;gap:8px}
.results-hdr-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.results-hdr-label{font-size:11px;font-weight:700;color:var(--text-l);text-transform:uppercase;letter-spacing:.5px;margin-right:2px;white-space:nowrap}
.results-count{display:flex;align-items:center;gap:8px;flex-shrink:0}
.results-view-all{display:inline-flex;align-items:center;gap:5px;background:var(--teal);color:#fff;border-radius:6px;padding:6px 14px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .15s}
.results-view-all:hover{background:var(--navy);color:#fff}
.results-view-all svg{flex-shrink:0}

/* PRODUCT GRID — 6 col, separated by 1px lines */
.pgrid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border)}
.pgrid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border)}
.pgrid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}

/* PRODUCT CARD */
.pcard{background:var(--white);overflow:hidden;cursor:pointer;transition:background .15s;text-decoration:none;display:flex;flex-direction:column}
.pcard:hover{background:#f5fffe}
.pcard-img-wrap{position:relative;width:100%;height:160px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.pcard-img-wrap img{width:100%;height:100%;object-fit:contain;padding:10px}
.pcard-img-wrap .ph{font-size:28px;opacity:.15}
.pcard-arrow{position:absolute;bottom:8px;right:8px;width:24px;height:24px;background:var(--teal);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.pcard:hover .pcard-arrow{opacity:1}
.pcard-arrow svg{stroke:#fff}
.pcard-body{padding:8px 10px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.pcard-name{font-size:10.5px;font-weight:700;color:var(--navy);line-height:1.35;text-transform:uppercase;letter-spacing:.2px}
.pcard-name mark{background:none;color:var(--teal);font-style:normal;font-weight:700}
.pcard-from-label{font-size:9.5px;color:var(--text-l);font-weight:500;margin-top:auto;padding-top:5px}
.pcard-price{font-size:13px;font-weight:700;color:var(--navy);line-height:1}
.pcard-price-star{font-size:9px;color:var(--text-l)}
.pcard-sku{font-size:9.5px;color:var(--text-ll);letter-spacing:.2px;margin-top:1px}

/* MORE PRODUCTS — full width teal bar */
.more-products-cta{display:block;width:100%;padding:16px 32px;background:var(--teal);color:#fff;border:none;font-size:15px;font-weight:600;cursor:pointer;text-align:center;transition:background .2s;text-decoration:none}
.more-products-cta:hover{background:#007f7c;color:#fff}

/* Keep old see-all for hybrid/chat mode */
.see-all-cta{display:block;width:100%;max-width:580px;margin:20px auto 0;padding:13px 32px;background:var(--teal);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;text-align:center;transition:background .2s;text-decoration:none}
.see-all-cta:hover{background:#007f7c}

/* BOTTOM PANELS — siblings/cross-sell */

.rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rec-col h4{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--teal)}
.rec-col ul{list-style:none;margin:0;padding:0}
.rec-col li{padding:5px 0;font-size:13px;color:var(--teal);cursor:pointer;border-bottom:1px solid #f0f4f8}
.rec-col li:hover{color:var(--navy)}
.rec-col li:last-child{border-bottom:none}
.rec-col li a{color:inherit;text-decoration:none}

/* STATES */
.state{text-align:center;padding:60px 20px;color:var(--text-m)}
.state .ico{font-size:40px;margin-bottom:14px}
.state h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:6px}
.spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}

/* RESPONSIVE */
@media(max-width:1200px){.pgrid-6{grid-template-columns:repeat(5,1fr)}.pcard-img-wrap{height:140px}}
@media(max-width:1000px){.pgrid-6,.pgrid-5{grid-template-columns:repeat(4,1fr)}.pgrid-4{grid-template-columns:repeat(3,1fr)}.pcard-img-wrap{height:130px}}
@media(max-width:768px){.layout-hb{grid-template-columns:1fr}.chat-panel{position:static;max-height:500px}.pgrid-6,.pgrid-5,.pgrid-4{grid-template-columns:repeat(3,1fr)}.rec-grid{grid-template-columns:1fr}.pcard-img-wrap{height:120px}}
@media(max-width:480px){.pgrid-6,.pgrid-5,.pgrid-4{grid-template-columns:repeat(2,1fr)}.pcard-img-wrap{height:140px}}
/* ──────────────────────────────────────────────────────────────────────────
   v4.5.5 — search results page styling (matches storefront look)
   ────────────────────────────────────────────────────────────────────────── */

/* Magnifying-glass search button — primary rule above already sized right */
.search-btn svg{display:block}

/* Top bar: related-search chips on left, "N Products Found - View All" on right */
.acs-top-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;
  padding-bottom:16px;
  flex-wrap:nowrap  /* v4.6.11: keep label + chips + counter on ONE line */
  /* v4.6.14: border-bottom removed — user wants the bar to blend with
     page background, no visible divider beneath it. */
}
/* v4.6.11: left side scrolls horizontally if chips overflow rather than wrapping to a new line.
   Prevents "Red non-woven bags" from jumping below while "5024 Products Found" sits far right. */
.acs-top-left{
  display:flex;align-items:center;gap:8px;
  flex:1;min-width:0;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch
}
.acs-top-left::-webkit-scrollbar{display:none}
.rs-label{
  font-size:14px;font-weight:700;color:#828692;
  line-height: 1;
  text-transform:uppercase;
  margin-right:4px;white-space:nowrap;
  flex-shrink:0
}
.acs-view-all{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  color: #273755;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s;
  line-height: 19px;
}
.acs-view-all:hover{text-decoration:none}
/* v4.6.15: pure-CSS chevron inside the orange box. Uses border hack
   (top+right borders on a rotated square) instead of SVG so theme
   CSS cannot strip the stroke. !important here is belt-and-braces
   in case Leo Ace has an <i> reset elsewhere. */
.acs-view-all-arrow i.acs-chevron,
.acs-view-all-arrow .acs-chevron{
  border-right:2.5px solid #ffffff !important;
  border-top:2.5px solid #ffffff !important;
  border-left:0 !important;
  border-bottom:0 !important;
  background:transparent !important;
  display:inline-block !important;
  margin-left: 12px;
}
/* v4.6.11: force orange on the arrow box — use !important to beat
   Leo Ace theme selectors that colour <a> descendant svgs. */
.acs-view-all-arrow{
  padding: 5px 12px;
  background: var(--orange);
  color: #fff !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  display: block;
}
.acs-view-all-arrow:hover{
  background: #FD8812;
}

.acs-view-all-arrow svg{
  fill: none !important;
  background: transparent !important;
  margin-left: 12px;
}
/* Legacy selector kept for old markup compatibility — same !important treatment */


/* Product card — matches storefront example exactly */
#pin .pgrid-6{gap:14px;background:transparent;padding:0;margin-top:0}
#pin .pcard{
  background:var(--white);border:1px solid var(--border);border-radius:6px;
  overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
  transition:box-shadow .15s,border-color .15s
}
#pin .pcard:hover{box-shadow: 0 0 0 2px #152B54}
#pin .pcard-img-wrap{
  position:relative;width:100%;height:160px;background:var(--white);
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
#pin .pcard-img-wrap img{width:100%;height:100%;object-fit:contain;padding:14px}
#pin .pcard-img-wrap .ph{font-size:32px;opacity:.15}

/* Product-card badges (brand / popular) — top-left of image */
.pcard-img-wrap .badge-brand,
.pcard-img-wrap .badge-pop{
  position:absolute;top:8px;left:8px;z-index:2;
  font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 8px;border-radius:100px;white-space:nowrap
}
.pcard-img-wrap .badge-brand{background:var(--navy);color:#fff}
.pcard-img-wrap .badge-pop{background:#fef3c7;color:#92400e}
#acs-search-page #wrapper {
    background: #F8F9FB;
}
/* Card body */
#pin .pcard-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:0}
#pin .pcard-name{
  font-size:14px;font-weight:500;color:#273755;
  text-transform:uppercase;text-align: center;
  line-height: 19px;
  margin-bottom:8px;
  /* v4.6.47: allow up to 2 lines so titles like "HIGH SIERRA ACCESS 17"
     wrap rather than truncate with ellipsis. Fixed min-height keeps card
     bottoms aligned across the row even when some titles are 1 line and
     others are 2 (38px = 2 * 19px line-height). */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
  min-height:38px;
  justify-content: center;
}
#pin .pcard-name mark{background:none;color:#FA6F3A;font-weight:500; padding: 0}

/* Price box — light blue/grey rounded pill — matches example exactly */
#pin .pcard-price-row{
  display:flex;align-items:center;gap:8px;
  background:#F3FAFF;border-radius:6px;padding:8px 4px 7px 10px;margin:0
}
#pin .pcard-price-row > div:first-child{flex-shrink:0}
/* v4.6.11: center-justify the price within its cell — matches storefront reference */
#pin .pcard-price-row > div:nth-child(2){flex:1;text-align:center;padding-left:0}
#pin .pcard-from-label{
  font-size:10px;color:#777777;font-weight:400;line-height:1.05;
  text-align:center;margin:0;padding:0
}
#pin .pcard-price{font-size:18px;font-weight:600;line-height: 1.1; color: #333333;}
#pin .pcard-price-star{font-size:9px;color:var(--text-l);vertical-align:top}
#pin .pcard-price-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;background:var(--teal);color:#fff;border-radius:4px;flex-shrink:0
}
#pin .pcard-price-arrow svg{
  width: 16px;
  height: 16px;
}
/* CE code — centred below price box */
#pin .pcard-sku{
  font-size:13px;color:#676767;letter-spacing:.5px;
  line-height: 23px;
  text-align:center;margin-top:8px;text-transform:uppercase;font-weight:500
}

/* "More Products to Consider" CTA — full-width teal bar matching storefront reference.
   v4.6.11: font bumped 14 → 17px, padding 16 → 20px — matches storefront weight. */
.see-all-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:18px 0;padding:10px 20px;
  background:#0991A1;color:#fff;
  font-size:20px;font-weight:500;
  line-height: 23px;
  text-decoration:none;border-radius:8px;transition:background .15s
}
.see-all-btn:hover{background:var(--navy);color:#fff}
.see-all-btn svg{width:16px;height:16px;stroke:#fff}

/* Recommendation section (3-col below product grid) */
.rec-head{
  line-height: 23px;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 16px;
  margin-bottom: 8px;
  background: #0991A1;
  color: #fff;
  text-align: center;
  border-radius: 8px;
}
.rec-link{
  display:block;line-height: 37px;font-size:16px;color:#273755;
  text-transform:capitalize;transition:color .15s
}
.rec-link:hover{color:var(--teal)}
.rec-count{color:var(--text-l);font-weight:400;font-size:12px;margin-left:2px}

/* Loading spinner used by loading() in acs_testpage.js */
.state .spin{
  width:32px;height:32px;margin:0 auto 14px;
  border:3px solid var(--border);border-top-color:var(--teal);
  border-radius:50%;animation:spin .7s linear infinite
}
.rec-col {
    background: #E9F3F7;
    padding: 24px;
    border-radius: 8px;
}
.rec-section {
  margin-top: 16px;
}