/* ============================================================================
   AI Claude Search — custom look & feel override
   Repaints the predictive dropdown + "See all results" page to the PPE
   Dev-Pack design (navy / orange / teal, tight radii, light price pill).

   Loads LAST after acs-suggest.css, acs-theme.css and acs-results.css, so
   these rules win. Only colours, borders, radii, shadows and the price pill
   are changed — no layout, sizing or behaviour is touched, so search
   functionality is unaffected.

   INSTALL:  upload to  modules/aiclaudesearch/views/css/acs-custom.css
             (overwrite the existing file). No module re-install needed.
   ========================================================================== */

/* ---- 1. Design tokens ----------------------------------------------------
   The whole UI reads these custom properties, so redefining them here
   repaints most of both surfaces in one place. */
:root{
  /* Brand */
  --acs-accent:      #f47b20;   /* primary orange  (CTAs, badges, links)   */
  --acs-accent-deep: #d2620d;   /* orange hover                            */
  --acs-arrow:       #f47b20;   /* category-row chevrons                   */

  /* Ink */
  --acs-ink:         #16244a;   /* headings / navy structure               */
  --acs-ink-soft:    #48566d;   /* body / secondary text                   */
  --acs-ink-mute:    #6d7b91;   /* meta, counts, captions                  */

  /* Surfaces & lines */
  --acs-panel-bg:    #ffffff;
  --acs-cream:       #f4f8fb;   /* left-rail / section tint                */
  --acs-line:        #e5ecf3;   /* borders, dividers                       */
  --acs-line-2:      #cfdcea;   /* card hover border, chip border          */
  --acs-price-bg:    #f3faff;   /* light price pill (was navy)             */

  /* Radii — dev pack uses tight corners */
  --acs-radius-panel: 6px;
  --acs-radius-card:  8px;
  --acs-radius-pill:  6px;

  /* Depth */
  --acs-shadow: 0 24px 60px rgba(12,26,52,.28);

  /* Header search submit — teal */
  --acs-search-btn-bg: #2596ab;
}

/* ============================================================================
   2. PREDICTIVE DROPDOWN  (.acs-sg-*)
   ========================================================================== */

/* Panel shell */
.acs-sg-panel{
  border-radius: var(--acs-radius-panel) !important;
  box-shadow: var(--acs-shadow) !important;
  background: var(--acs-panel-bg) !important;
}

/* Left rail */
.acs-sg-panel .acs-sg-cats{
  background: var(--acs-cream) !important;
  border-right: 1px solid var(--acs-line) !important;
}
.acs-sg-panel .acs-sg-lbl{
  color: #273755;
  letter-spacing: .11em !important;
  font-size: 14px;
  font-weight: 600;
}
.acs-sg-panel .acs-sg-prods .acs-sg-lbl{
  padding: 0;
  font-size: 16px;
}
.acs-sg-panel .acs-sg-row.acs-sg-main{ color: var(--acs-ink) !important; }
.acs-sg-panel .acs-sg-th{ border-radius: 6px !important; background-color: #e7eef5 !important; }
.acs-sg-panel .acs-sg-row.acs-sg-sub{ border-left: 3px solid transparent !important; }
.acs-sg-panel .acs-sg-row.acs-sg-sub:hover,
.acs-sg-panel .acs-sg-row.acs-sg-sub.sel{
  background: #fff !important;
  border-left-color: var(--acs-accent) !important;
}
.acs-sg-panel .acs-sg-n{ color: var(--acs-ink-mute) !important; }

/* Product cards */
.acs-sg-panel .acs-sg-card{
  border: 1px solid #e9edf1 !important;
  border-radius: var(--acs-radius-card) !important;
  background: #fff !important;
}
.acs-sg-panel .acs-sg-card:hover,
.acs-sg-panel .acs-sg-card.sel{
  box-shadow: 0 10px 26px rgba(12,26,52,.12) !important;
  border-color: var(--acs-line-2) !important;
}

/* "Popular" badge */
.acs-sg-panel .acs-sg-badge{
  background: var(--acs-accent) !important;
  color: #fff !important;
  border-radius: 3px !important;
  letter-spacing: .08em !important;
}

/* Card title */
.acs-sg-panel .acs-sg-name b{ color: var(--acs-ink) !important; }
.acs-sg-panel .acs-sg-name .acs-sg-dim{ color: var(--acs-ink-mute) !important; }

/* Price pill — light box, navy figures, teal chevron */
.acs-sg-panel .acs-sg-price{
  background: #F3FAFF;
  border-radius: 3px;
  padding: 5px 6px;
}
.acs-sg-panel .acs-sg-price small{
  word-break: break-all;
  text-align: left;
  line-height: 1;
  font-weight: 500;
  font-size: 11px;
  color: #828692;
  width: 30px;
  white-space: unset;
  padding: 0;
  margin: 0;
  text-transform: none;
}
.acs-sg-panel .acs-sg-price .acs-sg-prow b,
.acs-sg-panel .acs-sg-price .acs-sg-prow b em{ color: #1a2e4a !important; }
.acs-sg-panel .acs-sg-price .acs-sg-dot{
  background: #22a2af !important;   /* teal chevron button */
  border-radius: 3px !important;
  width: 23px;
  height: 23px;
}
.acs-sg-panel .acs-sg-price .acs-sg-prow b {
  color: #333;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}


.acs-sg-panel .acs-sg-price .acs-sg-dot svg{ color: #fff !important; }

/* SKU */
.acs-sg-panel .acs-sg-sku{
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

/* Footer */
.acs-sg-panel .acs-sg-foot{
  background: #fbfdfe !important;
  border-top: 1px solid var(--acs-line) !important;
}
.acs-sg-panel .acs-sg-help{ color: var(--acs-ink-soft) !important; }
.acs-sg-panel .acs-sg-help a{ color: var(--acs-ink) !important; }
/* Ask-an-expert phone icon — navy rounded square */
.acs-sg-panel .acs-sg-ico{ background: var(--acs-ink) !important; border-radius: 10px !important; }
.acs-sg-panel .acs-sg-ico svg{ color: #fff !important; }

/* "See all results" CTA */
.acs-sg-panel .acs-sg-all{
  background: var(--acs-accent) !important;
  color: #fff !important;
  border-radius: 3px !important;
  font-weight: 500;
  font-size: 14px;
}
.acs-sg-panel .acs-sg-all:hover,
.acs-sg-panel .acs-sg-all.sel{ background: var(--acs-accent-deep) !important; }

/* ============================================================================
   3. RESULTS PAGE  (.acs-rp-*)  — "See all results" destination
   Matches the dev-pack Search Results page: teal banner, light price pill with
   a teal chevron, SKU below the pill. Rules are scoped under .acs-rp for
   specificity, so they win over the module's own results stylesheet.
   ========================================================================== */

/* Hero banner — light-teal plate with the dev-pack artwork + red ticks.
   The banner image is optional: upload results-banner-plate.png to
   modules/aiclaudesearch/views/img/ and it appears on the right; without it,
   the flat teal background still shows. */
.acs-rp .acs-rp-hero{
  background-color: #eaf8f9 !important;
  background-image: url(../img/bg-breadcrumb.jpg) !important;
  background-size: cover !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  min-height: 120px !important;
  text-align: left !important;          /* was center */
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
/* Desktop: keep the copy in the left column so it clears the banner artwork */
@media (min-width: 768px){
  .acs-rp .acs-rp-hero{ padding: 20px 30px 18px; }
}
/* Mobile: drop the artwork so text never sits on top of it */
@media (max-width: 767px){
  .acs-rp .acs-rp-hero{
    background-image: none !important;
    border-radius: 0 !important;
    margin-left: -20px;
    margin-right: -20px;
    min-height: unset !important;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
  }
  .acs-rp-trust span {
    gap: 0;
    font-size: 12px;
  }
  .acs-rp-trust {
    gap: 4px;
  }
}
.acs-rp .acs-rp-hero h1 em{ color: #e24b1b !important; font-style: normal !important; }
.acs-rp .acs-rp-sub{ color: var(--acs-ink-soft) !important; }
.acs-rp .acs-rp-trust span{ color: #1a2e28; }
.acs-rp .acs-rp-trust svg{ stroke: #e24b1b !important; }
/* The copy column. 580px used to cap this AND the auto margins centred it;
   left-aligning means the width is set by the text rules below instead, so the
   block starts hard against the left padding and still clears the artwork. */
.acs-rp .acs-rp-hero > div {
  max-width: 490px;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}
.acs-rp .acs-rp-heroin{
  width: 100%;
  max-width: 1280px;
  margin: 0;
}
.acs-rp .acs-rp-hero h1{
  text-transform: none;   /* "We found these products", not Title Case */
  font-size: 42px;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 7px;
  max-width: unset;
  color: #16244a;
  font-family: "Fira Sans Condensed",sans-serif;
}
.acs-rp .acs-rp-sub{
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 10px;
  max-width: unset;
}
.acs-rp .acs-rp-trust{
  justify-content: center;
  gap: 26px;
  font-size: 13px;
}
@media (max-width: 767px){
  .acs-rp .acs-rp-hero{ padding: 14px 16px 16px !important; min-height: 0 !important; }
  .acs-rp .acs-rp-hero h1{ font-size: 22px !important; max-width: 100% !important; }
  .acs-rp .acs-rp-sub{ font-size: 12px !important; max-width: 100% !important; }
  .acs-rp .acs-rp-trust{ gap: 14px !important; font-size: 12px !important; }
}
/* Related-search chips */
.acs-rp .acs-rp-chips a{
  padding: 5px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 12.5px;
  color: var(--text-m);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  font-family: 'Outfit',sans-serif;
  display: inline-block;
}
.acs-rp .acs-rp-chips a:hover{
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.acs-rp .acs-rp-count b{ color: var(--acs-ink) !important; }

/* "See full range" secondary button (when shown) */
.acs-rp .acs-rp-full{
  background: var(--acs-accent) !important;
  color: #fff !important;
  border-radius: 3px !important;
}
.acs-rp .acs-rp-full:hover{ background: var(--acs-accent-deep) !important; }

/* Product cards — dev-pack layout: name, then price pill, SKU centred last */
.acs-rp .acs-rp-card{
  border: 1px solid var(--acs-line) !important;
  border-radius: 6px !important;
  background: #fff !important;
}
.acs-rp .acs-rp-card:hover{
  box-shadow: 0 14px 30px rgba(12,26,52,.12) !important;
  border-color: var(--acs-line-2) !important;
}
.acs-rp .acs-rp-badge{
  background: var(--acs-accent) !important;
  color: #fff !important;
  border-radius: 6px 0 6px 0 !important;
}
.acs-rp .acs-rp-body{ display: flex !important; flex-direction: column !important; }
/*.acs-rp .acs-rp-name{ order: 1 !important; color: var(--acs-ink) !important; }*/
.acs-rp .acs-rp-foot{
  order: 2 !important;
  margin-top: auto !important;
  background: #F3FAFF;
  border-radius: 3px;
  padding: 7px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.acs-rp .acs-rp-code{
  order: 3 !important;
  text-align: center !important;
  margin-top: 11px !important;
  color: #333;
  font-weight: 500;
  font-size: 14px;
  font-family: "Fira Sans Condensed",sans-serif;
}
.acs-rp .acs-rp-price{
  display: flex !important;
  gap: 8px !important;
  flex: 1;
  flex-direction: unset;
  align-items: center;
}
.acs-rp .acs-rp-price small{
  color: #828692;
  font-weight: 500;
  font-size: 11px;
  word-break: break-all;
  text-transform: none;
  letter-spacing: unset;
  width: 32px;
}
.acs-rp .acs-rp-price b{
  color: #333;
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
}
/* "View product" button -> compact teal chevron (label hidden via font-size:0) */
.acs-rp .acs-rp-foot .acs-rp-view{
  background: #22a2af !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 3px !important;
  width: 32px !important; height: 32px !important;
  min-width: 32px !important; max-width: 32px !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  gap: 0 !important;
}
.acs-rp .acs-rp-foot .acs-rp-view span{
  background: transparent !important;
  font-size: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 3px;
}
.acs-rp .acs-rp-foot .acs-rp-view svg{ width: 18px !important; height: 18px !important; color: #fff !important; stroke: #fff !important; }

.acs-rp-name{
   min-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #333;
  font-size: 13.89px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 19px;
  text-align: center;
  font-family: "Fira Sans Condensed",sans-serif;
}

/* ============================================================================
   4. DROPDOWN SIZING  — keep the panel at full roomy width
   The panel defaults to the (narrow) search-box width, which squeezes the 5
   product cards down to ~68px. Anchor its left edge to the "Shop Branded
   Products" button and its right edge to the search box, so it spans the
   header row and the cards render full size. Desktop only — the mobile inline
   sheet is left untouched.
   ========================================================================== */
@media (min-width: 992px){
  .acs-sg-panel{
    left: -273px !important;    /* align left edge with the "Shop Branded Products" button */
    right: -353px !important;   /* align right edge with the "Contact an Expert" button (full nav width) */
    width: auto !important;     /* stretch across the whole header row */
    max-width: none !important;
  }
  .acs-sg-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .acs-sg-panel .acs-sg-card .acs-sg-img{ height: 150px !important; }
}