/*
 * Algolia site-search styling for Guild (WEB-4224).
 *
 * Ported from mycordoba/css/cordoba/2023/algolia.css -- NOT from ampeg's. Guild
 * is the closer sibling of the two: it shares Cordoba's #7A3A00 brown (Guild uses
 * it for add-to-cart buttons, price badges and the active nav underline) and its
 * search subnav is light (#fff, main.css #search-subnav-container), where Ampeg's
 * is black and needed a dark panel. So the accent is kept and only Cordoba's warm
 * neutrals are remapped to Guild's cool greys:
 *
 *   #7A3A00 accent        -> unchanged, Guild's brown too
 *   #4a4139 body text     -> #333333
 *   #6d6259 muted text    -> #4d4d4d
 *   #8a7f75 quiet text    -> #595959
 *   #a2988e faintest text -> #999999
 *   #d8cec4 border        -> #cccccc
 *   #e2dad2 / #ece5de     -> #e5e5e5
 *   #f1ece7 tint          -> #f2f2f2
 *   #faf7f4 hover         -> #f7f7f7
 *
 * Do NOT reach for #FF6828 as an accent: it looks like a Guild brand orange but
 * main.css only uses it for price and stock warnings (strikethrough reference
 * price, out-of-stock, low-stock), so borrowing it for search chrome would read
 * as an alert.
 *
 * Pairs with instantsearch.css reset-min (loaded via the page's css attr) --
 * the reset only normalises widget markup, it carries no theme of its own.
 *
 * Loaded globally from /autohandler, not just on /search/, because the topnav
 * type-ahead panel renders on every page.
 */

.ygg-search {
    padding: 30px 25px 60px;
}

.ygg-search-header {
    margin-bottom: 30px;
}

.ygg-search-header h1 {
    color: #7A3A00;
    font-size: 34px;
    margin: 0 0 18px;
}

/* --- search box --- */

.ygg-search .ais-SearchBox-form {
    display: flex;
    align-items: center;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #fff;
    max-width: 640px;
}

.ygg-search .ais-SearchBox-input {
    flex: 1 1 auto;
    border: 0;
    padding: 12px 14px;
    font-size: 17px;
    outline: none;
    background: transparent;
}

.ygg-search .ais-SearchBox-submit,
.ygg-search .ais-SearchBox-reset {
    border: 0;
    background: transparent;
    padding: 0 12px;
    cursor: pointer;
    color: #7A3A00;
}

.ygg-search .ais-SearchBox-submitIcon,
.ygg-search .ais-SearchBox-resetIcon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

#ais-stats {
    margin-top: 10px;
    color: #4d4d4d;
    font-size: 14px;
}

/* --- facets --- */

/* The counts are right-aligned to the facet column's edge (labelText takes the
   free space), so at md and up they land hard against the results column with
   only bootstrap's 15px gutter between them. Pull the whole facet column in from
   the right to open that seam up.
   Scoped to the breakpoint: below md the columns are stacked full width
   (col-xs-24), where a right inset would just push the counts away from nothing. */
@media (min-width: 992px) {
    .ygg-search-facets {
        padding-right: 60px;
    }
}

.ygg-search-facets h4 {
    color: #7A3A00;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 22px 0 10px;
}

.ygg-search-facets .ais-RefinementList-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ygg-search-facets .ais-RefinementList-item {
    margin-bottom: 6px;
}

.ygg-search-facets .ais-RefinementList-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    font-size: 15px;
    margin: 0;
    cursor: pointer;
}

.ygg-search-facets .ais-RefinementList-labelText {
    flex: 1 1 auto;
}

.ygg-search-facets .ais-RefinementList-count {
    color: #595959;
    font-size: 12px;
    background: #f2f2f2;
    border-radius: 10px;
    padding: 1px 8px;
}

.ygg-search-facets .ais-ClearRefinements-button {
    margin-top: 18px;
    border: 1px solid #cccccc;
    background: #fff;
    color: #7A3A00;
    padding: 7px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.ygg-search-facets .ais-ClearRefinements-button--disabled {
    opacity: 0.45;
    cursor: default;
}

.ygg-search-facets .ais-RefinementList-showMore {
    border: 0;
    background: transparent;
    color: #7A3A00;
    padding: 4px 0;
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
}

/* --- hits --- */

.ygg-search-results .ais-Hits-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ygg-search-results .ais-Hits-item {
    border-bottom: 1px solid #e5e5e5;
}

.ygg-hit {
    display: flex;
    gap: 18px;
    padding: 18px 4px;
    color: inherit;
    text-decoration: none;
}

.ygg-hit:hover {
    background: #f7f7f7;
    text-decoration: none;
    color: inherit;
}

.ygg-hit-thumb {
    flex: 0 0 72px;
    width: 72px;
}

.ygg-hit-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.ygg-hit-thumb-empty {
    display: block;
    width: 72px;
    height: 72px;
    background: #f2f2f2;
}

.ygg-hit-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ygg-hit-type {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #595959;
    background: #f2f2f2;
    border-radius: 2px;
    padding: 2px 7px;
    margin-bottom: 6px;
}

.ygg-hit-type-product {
    color: #fff;
    background: #7A3A00;
}

.ygg-hit-title {
    font-size: 19px;
    margin: 0 0 4px;
    color: #7A3A00;
}

.ygg-hit-sku {
    font-size: 12px;
    color: #595959;
    margin-bottom: 4px;
}

.ygg-hit-snippet {
    font-size: 15px;
    color: #333333;
    margin: 0 0 5px;
    /* Snippets are one long line of page text -- clamp so a hit stays scannable. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ygg-hit-path {
    font-size: 12px;
    color: #999999;
}

/* Algolia's default highlight tag is <em>; our index settings ask for <mark>.
   Style both so highlighting shows whichever the index is configured with. */
.ygg-hit mark,
.ygg-hit em,
.ygg-navsearch-hit mark,
.ygg-navsearch-hit em {
    background: #fdf0b8;
    color: inherit;
    font-style: normal;
    padding: 0 1px;
}

.ygg-hit-empty {
    padding: 40px 4px;
    color: #4d4d4d;
}

/* --- pagination --- */

#ais-pagination {
    margin-top: 28px;
}

#ais-pagination .ais-Pagination-list {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#ais-pagination .ais-Pagination-link {
    display: block;
    min-width: 34px;
    text-align: center;
    padding: 6px 9px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    color: #7A3A00;
    text-decoration: none;
}

#ais-pagination .ais-Pagination-item--selected .ais-Pagination-link {
    background: #7A3A00;
    border-color: #7A3A00;
    color: #fff;
}

#ais-pagination .ais-Pagination-item--disabled .ais-Pagination-link {
    opacity: 0.4;
}

/* --- topnav type-ahead --- */

.search-desktop-form-container,
.search-mobile-form-container {
    position: relative;
}

.ygg-navsearch-results {
    position: absolute;
    top: 100%;
    /* Anchored RIGHT, not left. #search-subnav-container is positioned right:0 at
       the viewport edge, so a panel pinned left:0 that is wider than the search
       field grows rightward and runs off screen. Pinning right:0 and letting
       min-width push it leftward keeps it on screen, where there is room.
       max-width is the backstop for narrow viewports so it can never grow wider
       than the window itself. */
    left: auto;
    right: 0;
    max-width: calc(100vw - 40px);
    z-index: 1200;
    background: #fff;
    border: 1px solid #cccccc;
    border-top: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    max-height: 60vh;
    overflow-y: auto;
    /* Breathing room at the panel edges so the first and last rows are not
       jammed against the border. */
    padding: 8px 0;
    /* left/right:0 only makes the panel as wide as the search field, which is
       narrow enough that titles truncate to nothing useful. min-width lets it
       grow rightward past the field. #search-subnav-container has no width of its
       own (position:absolute; right:0; padding:20px) and the panel is out of
       flow, so the container will not stretch to match -- the panel deliberately
       overhangs its white box, which reads fine against a white panel with its
       own border and shadow. */
    min-width: 420px;
}

.ygg-navsearch-hit {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    /* Wide gap so the right-aligned type label never crowds a truncated title. */
    gap: 24px;
    padding: 16px 18px;
    line-height: 1.5;
    color: #333333;
    text-decoration: none;
    border-bottom: 1px solid #e5e5e5;
}

.ygg-navsearch-hit:hover {
    background: #f7f7f7;
    text-decoration: none;
}

.ygg-navsearch-hit-title {
    font-size: 15px;
    /* One line each, ellipsised, so a long title cannot make rows uneven.
       min-width is required for ellipsis to work in a flex child. */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ygg-navsearch-hit-type {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #595959;
}

.ygg-navsearch-all {
    display: block;
    margin: 8px -1px -9px;
    padding: 15px 18px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7A3A00;
    text-decoration: none;
    background: #f7f7f7;
}

.ygg-navsearch-empty {
    padding: 18px;
    font-size: 14px;
    color: #595959;
}


/* --- topnav overrides: #topnav-container beats every class rule above ---
 *
 * /common/_topnav.html wraps the whole topnav in #topnav-container, and the
 * type-ahead panel is injected inside the search form, so main.css's
 *
 *     #topnav-container a {
 *       color: #000; text-transform: uppercase; display: flex;
 *       align-items: center;
 *     }
 *     #topnav-container a:hover { color: #555555; }
 *
 * applies to every result link. At (1,0,1) it outranks anything class-based, so
 * the rules above lose outright. Without these overrides the panel renders every
 * result title in ALL CAPS and centres the type label against the title instead
 * of sitting it on the baseline.
 *
 * Guild's rule is much more aggressive than Cordoba's, which only sets colour and
 * padding -- so this block has no equivalent in the Cordoba original and must not
 * be "tidied up" to match it.
 */

#topnav-container .ygg-navsearch-results a.ygg-navsearch-hit {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    /* !important on the box metrics only. Something in the cascade was beating
       this rule's padding even at (1,2,1) -- the sibling .ygg-navsearch-all rule
       from this same block does apply, so the block is live and the winner is
       specific to these row anchors. It was not identifiable from the stylesheets
       alone; if you find it, drop the !importants and target it properly.
       main.css already uses !important in ~10 places, so this is in keeping. */
    gap: 24px !important;
    padding: 16px 18px !important;
    line-height: 1.5 !important;
    min-height: 0 !important;
    color: #333333;
    text-transform: none;
    text-decoration: none;
    border-bottom: 1px solid #e5e5e5;
}

#topnav-container .ygg-navsearch-results a.ygg-navsearch-hit:last-of-type {
    border-bottom: 0;
}

#topnav-container .ygg-navsearch-results a.ygg-navsearch-hit:hover {
    background: #f7f7f7;
    color: #333333;
    text-decoration: none;
}

#topnav-container .ygg-navsearch-results a.ygg-navsearch-all {
    display: block;
    margin: 8px -1px -9px;
    padding: 15px 18px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7A3A00;
    text-decoration: none;
    background: #f7f7f7;
    border-top: 1px solid #e5e5e5;
}

#topnav-container .ygg-navsearch-results a.ygg-navsearch-all:hover {
    background: #f2f2f2;
    color: #7A3A00;
    text-decoration: none;
}