/* ============================================================================
   AI CLAUDE SEARCH — predictive dropdown structure
   ----------------------------------------------------------------------------
   You normally DON'T need to edit this file. All colours, fonts, radii and the
   shadow come from acs-theme.css (the file you edit). This file is just layout.
   Class prefix: .acs-sg-  (namespaced so nothing leaks into your theme).
   ========================================================================== */

.acs-sg-panel{position:absolute;z-index:2000;background:var(--acs-panel-bg,#fff);border:1px solid var(--acs-line,#E3E8E8);border-radius:var(--acs-radius-panel,18px);box-shadow:var(--acs-shadow,0 30px 70px rgba(0,10,10,.28));overflow:hidden auto;max-height:calc(100vh - 96px);overscroll-behavior:contain;text-align:left;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .16s,transform .16s,visibility .16s;font-family:var(--acs-font-body,inherit)}
.acs-sg-panel.on{opacity:1;visibility:visible;transform:none}
.acs-sg-panel a{text-decoration:none}
.acs-sg-body{display:grid;grid-template-columns:288px 1fr}
.acs-sg-cats{border-right:1px solid var(--acs-line-2,#EAF3F3);padding:15px 0 12px;background:var(--acs-cream,#FBF7F2)}
.acs-sg-lbl{font-weight:800;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--acs-ink-mute,#7C8A88);margin:0 0 9px;padding:0 18px}
.acs-sg-none{font-size:13px;color:var(--acs-ink-mute,#7C8A88);margin:0;padding:0 18px}
.acs-sg-row{display:flex;align-items:center;gap:11px;padding:9px 16px;color:var(--acs-ink,#16282A);transition:background .12s}
.acs-sg-row:hover,.acs-sg-row.sel{background:var(--acs-panel-bg,#fff)}
.acs-sg-row.sel{box-shadow:inset 3px 0 0 var(--acs-accent,#D9542B)}
.acs-sg-th{width:38px;height:38px;border-radius:9px;overflow:hidden;flex-shrink:0;background:var(--acs-panel-bg,#fff);border:1px solid var(--acs-line,#E3E8E8)}
.acs-sg-th img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .18s ease}
.acs-sg-th img.rdy{opacity:1}
.acs-sg-th-empty{background:var(--acs-cream,#f7fafa)}
.acs-sg-rt{flex:1;min-width:0;font-size:14.5px;font-weight:700;line-height:1.3}
.acs-sg-rt b{font-weight:800}
.acs-sg-dim{font-weight:400;color:var(--acs-ink-mute,#7C8A88)}
.acs-sg-rt small{display:block;font-family:var(--acs-font-head,'Archivo',sans-serif);font-size:10.5px;font-weight:600;letter-spacing:.05em;color:var(--acs-ink-mute,#7C8A88);margin-top:2px}
.acs-sg-main .acs-sg-rt{font-size:15px}
.acs-sg-sub{padding:7px 16px 7px 65px;font-size:13.5px}
.acs-sg-sub .acs-sg-rt{font-weight:600;font-size:13.5px;color:var(--acs-ink-soft,#3E5557)}
.acs-sg-n{font-family:var(--acs-font-head,'Archivo',sans-serif);font-size:11px;font-weight:700;color:var(--acs-ink-mute,#7C8A88)}
.acs-sg-arr{width:14px;height:14px;color:var(--acs-arrow,var(--acs-accent,#D9542B));opacity:0;transition:opacity .12s;flex-shrink:0}
.acs-sg-arr svg{width:14px;height:14px;display:block}
.acs-sg-row:hover .acs-sg-arr,.acs-sg-row.sel .acs-sg-arr{opacity:1}
.acs-sg-prods{padding:15px 16px 16px}
.acs-sg-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,168px));justify-content:start;gap:11px}
.acs-sg-card{display:flex;flex-direction:column;border:1px solid var(--acs-line,#E3E8E8);border-radius:var(--acs-radius-card,13px);overflow:hidden;background:var(--acs-panel-bg,#fff);transition:border-color .13s,transform .13s,box-shadow .13s}
.acs-sg-card:hover,.acs-sg-card.sel{border-color:var(--acs-accent,#D9542B);transform:translateY(-2px);box-shadow:0 10px 22px rgba(14,36,38,.1)}
.acs-sg-img{position:relative;display:block;aspect-ratio:1/1;background:var(--acs-cream,#FBF7F2);overflow:hidden}
.acs-sg-img img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .18s ease}
.acs-sg-img img.rdy{opacity:1}
.acs-sg-badge{position:absolute;top:9px;left:9px;background:var(--acs-accent,#D9542B);color:#fff;border-radius:var(--acs-radius-pill,100px);padding:3px 9px;font-family:var(--acs-font-head,'Archivo',sans-serif);font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;z-index:2}
.acs-sg-name {
  display: block;
  padding: 11px 10px 6px;
  font-size: 13.89px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #333;
  text-align: center;
  height: 50px;
  overflow: hidden;
  margin-bottom: 10px;
}
.acs-sg-name b{font-weight:800}
.acs-sg-name .acs-sg-dim{font-weight:600}
.acs-sg-price{display:flex;align-items:center;gap:1px;min-width:0;max-width:100%;margin:auto 8px 0;padding:5px 5px 5px 9px;background:var(--acs-price-bg,#0E2426);border:0;border-radius:var(--acs-radius-pill,100px);overflow:hidden}
.acs-sg-prow{display:flex;flex: 1;align-items:center;gap:6px;min-width:0}
.acs-sg-price b{flex: 1;font-size:13.5px;font-weight:800;color:#fff;white-space:nowrap;min-width:0}
.acs-sg-price em{font-style:normal;font-size:8.5px;color:rgba(255,255,255,.6)}
.acs-sg-dot{width:20px;height:20px;border-radius:50%;background:var(--acs-arrow,var(--acs-accent,#D9542B));color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .13s,transform .13s}
.acs-sg-dot svg{width:11px;height:11px;display:block}
.acs-sg-card:hover .acs-sg-dot,.acs-sg-card.sel .acs-sg-dot{background:var(--acs-accent-deep,#B24523);transform:translateX(2px)}
.acs-sg-sku{display:block;padding:8px 10px 11px;text-align:center;font-size:10px;font-weight:600;letter-spacing:.07em;color:var(--acs-ink-mute,#7C8A88)}
.acs-sg-foot{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--acs-cream,#FBF7F2);border-top:1px solid var(--acs-line,#E3E8E8);padding:11px 14px 11px 18px}
.acs-sg-help{display:inline-flex;align-items:center;gap:11px;font-size:14px;color:var(--acs-ink-soft,#3E5557)}
.acs-sg-help a{font-weight:800;color:var(--acs-price-bg,#0E2426)}
.acs-sg-help a:hover{color:var(--acs-accent-deep,#B24523)}
.acs-sg-ico{width:30px;height:30px;border-radius:50%;background:var(--acs-panel-bg,#fff);border:1px solid var(--acs-line,#E3E8E8);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--acs-price-bg,#0E2426)}
.acs-sg-ico svg{width:13px;height:13px}
.acs-sg-all{display:inline-flex;align-items:center;gap:8px;background:var(--acs-accent,#D9542B);color:#fff;border-radius:var(--acs-radius-pill,100px);padding:10px 19px;font-weight:800;font-size:13.5px;white-space:nowrap;transition:background .13s}
.acs-sg-all:hover{background:var(--acs-accent-deep,#B24523)}
.acs-sg-all svg{width:14px;height:14px;flex-shrink:0}
.acs-sg-all.acs-sg-dark{background:var(--acs-price-bg,#0E2426)}
.acs-sg-all.acs-sg-dark:hover{background:var(--acs-ink,#16282A)}
.acs-sg-empty{padding:20px 22px 18px}
.acs-sg-e1{font-family:var(--acs-font-head,'Archivo',sans-serif);font-size:17px;font-weight:800;color:var(--acs-price-bg,#0E2426);margin:0 0 3px}
.acs-sg-e2{font-size:13.5px;color:var(--acs-ink-mute,#7C8A88);margin:0}
.acs-sg-dym{display:inline-flex;align-items:center;gap:9px;margin-top:14px;background:var(--acs-accent,#D9542B);color:#fff;border-radius:var(--acs-radius-pill,100px);padding:11px 20px;font-family:var(--acs-font-head,'Archivo',sans-serif);font-weight:800;font-size:14px}
.acs-sg-dym:hover{background:var(--acs-accent-deep,#B24523)}
.acs-sg-dym svg{width:14px;height:14px}
.acs-sg-e3{margin:18px 0 9px;padding:0}
.acs-sg-chips{display:flex;flex-wrap:wrap;gap:7px}
.acs-sg-chips a{border:1.5px solid var(--acs-line,#E3E8E8);border-radius:var(--acs-radius-pill,100px);padding:6px 14px;font-size:13px;font-weight:700;color:var(--acs-ink,#16282A)}
.acs-sg-chips a:hover{border-color:var(--acs-accent,#D9542B);color:var(--acs-accent-deep,#B24523)}
@media(max-width:1080px){.acs-sg-body{grid-template-columns:250px 1fr}}
@media(max-width:860px){.acs-sg-body{grid-template-columns:1fr}.acs-sg-cats{border-right:0;border-bottom:1px solid var(--acs-line-2,#EAF3F3)}.acs-sg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* inline mode: mobile sheet, flows under the input */
.acs-sg-panel.acs-sg-inline{position:static;opacity:1;visibility:visible;transform:none;border:0;border-radius:0;box-shadow:none;border-top:1px solid var(--acs-line-2,#EAF3F3);margin-top:12px}
.acs-sg-panel.acs-sg-inline[hidden]{display:none}
.acs-sg-panel.acs-sg-inline .acs-sg-body{grid-template-columns:1fr}
.acs-sg-panel.acs-sg-inline .acs-sg-cats{border-right:0;background:transparent;padding:14px 0 8px}
.acs-sg-panel.acs-sg-inline{max-height:none;overflow:visible}
.acs-sg-panel.acs-sg-inline .acs-sg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.acs-sg-panel.acs-sg-inline .acs-sg-foot{flex-direction:column;align-items:stretch}
.acs-sg-panel.acs-sg-inline .acs-sg-all{justify-content:center}

/* ============================================================================
   THE SEARCH BAR ITSELF (the module's own bar: .search-wrap / #q / .search-btn)
   Sizing lives here so the bar is styled in predictive mode. Colours come from
   acs-theme.css. Make it bigger/smaller by changing --acs-bar-* below, or add
   your own rules in acs-custom.css.
   ========================================================================== */
:root{
  --acs-bar-height: 52px;     /* overall bar height        */
  --acs-bar-max:    720px;    /* max width of the bar       */
  --acs-bar-font:   16px;     /* typed text size            */
}
.search-wrap{
  display: flex;
  align-items: center;
  border: 2px solid #009b98;
  border-radius: 100px;
  background: var(--white);
  padding: 0 6px 0 18px;
    padding-right: 6px;
  padding-right: 0;
}
.search-wrap .s-ico{display:flex;align-items:center;flex-shrink:0;color:var(--acs-ink-mute,#7c8a88)}
.search-wrap .s-ico svg{width:19px;height:19px}
.search-wrap #q{
  flex:1; min-width:0; border:0; background:transparent; outline:0;
  font-family:var(--acs-font-body,inherit);
  font-size:var(--acs-bar-font,16px); color:var(--acs-ink,#1a2e4a);
  padding:12px 0; line-height:1.2;
}
.search-wrap #q::placeholder{color:var(--acs-ink-mute,#9aa5a3)}
.search-wrap #total-count{font-size:12px;color:var(--acs-ink-mute,#7c8a88);white-space:nowrap;padding:0 6px}
/* Circular magnifying-glass submit button (change --acs-search-btn-bg to recolour) */
.search-wrap .search-btn{
  flex-shrink:0; cursor:pointer; border:0; color:#fff; padding:0;
  width:calc(var(--acs-bar-height,52px) - 12px);
  height:calc(var(--acs-bar-height,52px) - 12px);
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--acs-search-btn-bg, var(--acs-ink,#1a2e4a));
  margin-right: 4px;
}
.search-wrap .search-btn:hover{background:var(--acs-accent,#009b98)}
.search-wrap .search-btn svg{width:19px;height:19px;display:block}
/* Shift search suggestions panel left to align under "Shop Branded Products" */
.acs-sg-panel {
    left: -274px !important;
}