/* ==========================================================================
   Smart Search — frontend styles.

   Two consumers share this stylesheet:
     1. Header modal live-preview (.ss-live and children)
     2. /search results page (already styled inline in the .tpl — kept
        minimal there so this file only needs to handle the dropdown).

   Design tokens align with featured.tpl + the broader theme:
     ink:    #161412   (main text)
     ink-2:  #6e6a63   (muted)
     ink-3:  #a8a39a   (placeholder)
     accent: #b85a2e   (brand orange)
     line:   rgba(22,20,18,.10)
   ========================================================================== */

/* ------------------- HEADER VISIBLE SEARCH BAR ----------------------------*/

/* The host container (.super_nav) is `display: block` in the theme.
   We can't change that wholesale without risking layout shifts in
   other widgets, but on screens where the bar is welcome we promote
   the row to flex so the pill can occupy the leftover middle area
   between the catalogue link and the right-hand actions.
   The mobile breakpoint reverts to block so the bar wraps cleanly. */

/* Wrapper styles regardless of layout mode. */
.super_nav_right.ss-bar-wrap {
    box-sizing: border-box;
}

.ss-bar {
    position: relative;
    width: 100%;
    margin: 0;
}

.ss-bar__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #f0b400;          /* warm yellow accent — matches existing CTA */
    display: flex;
    align-items: center;
}

.ss-bar__input {
    width: 100%;
    padding: 10px 18px 10px 44px;
    background: #fff;
    border: 1.5px solid rgba(22, 20, 18, .10);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.4;
    color: #161412;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}
.ss-bar__input::placeholder {
    color: #a8a39a;
}
.ss-bar__input:hover {
    border-color: rgba(22, 20, 18, .25);
}
.ss-bar__input:focus {
    border-color: #b85a2e;
    box-shadow: 0 0 0 3px rgba(184, 90, 46, .10);
}

/* Mobile — bar takes the whole row. The header's flex container wraps
   it onto a second line below the logo + catalog link. */
@media (max-width: 991px) {
    .super_nav_right.ss-bar-wrap {
        flex: 1 1 100%;
        max-width: none;
        order: 99;             /* push to the end of flex order = own line */
        padding: 10px 0 0;
    }
}

/* ---- Autocomplete dropdown — full header-width panel ---- */
/* Anchored to the right edge of the bar, extending leftward across
   the whole viewport so it has room to show big product cards like
   the old modal did. position:fixed so it doesn't depend on the
   bar's narrow parent for sizing. */
.ss-headbar-dd {
    position: fixed;
    top: 110px;             /* sits below the header strip */
    left: 50%;
    transform: translateX(-50%);
    width: min(94vw, 1100px);
    max-height: calc(100vh - 130px);
    z-index: 1060;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(22, 20, 18, .22);
    padding: 28px 32px;
    overflow-y: auto;
    display: none;
}
.ss-headbar-dd.is-open {
    display: block;
}
/* No backdrop darkening — user must see that the header search input
   stays interactive and is the right place to keep typing. The drop-
   shadow on the panel itself provides enough visual layering. */

/* Mobile: take the whole viewport like the original modal did. */
@media (max-width: 700px) {
    .ss-headbar-dd {
        top: 0; left: 0; right: 0; bottom: 0;
        transform: none;
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        padding: 20px 16px;
    }
}
/* Re-use the same .ss-live__* visual atoms by aliasing them here.
   The JS renderDropdown() emits .ss-live__* classes which were
   originally styled for #searchmodal scope. Re-declare the rules
   under our dropdown selector so they apply without the modal. */
.ss-headbar-dd .ss-live__cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, #161412 0%, #2a2422 100%);
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ss-headbar-dd .ss-live__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(22,20,18,.18);
    color: #fff;
    text-decoration: none;
}
.ss-headbar-dd .ss-live__cta-icon {
    width: 40px; height: 40px;
    background: rgba(255,255,255,.12);
    border-radius: 50%;
    display: grid; place-items: center;
}
.ss-headbar-dd .ss-live__cta-text { flex: 1; font-size: 15px; }
.ss-headbar-dd .ss-live__cta-text strong { color: #f4ba9a; font-weight: 600; }
.ss-headbar-dd .ss-live__cta-arrow { font-size: 22px; color: rgba(255,255,255,.7); }

.ss-headbar-dd .ss-live__cta--skeleton {
    background: linear-gradient(90deg, #ebe9e6 0%, #f5f3ef 50%, #ebe9e6 100%);
    height: 72px;
    border-radius: 12px;
    margin-bottom: 22px;
    animation: ss-pulse 1.4s ease-in-out infinite;
}

.ss-headbar-dd .ss-live__products {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}
@media (max-width: 992px) {
    .ss-headbar-dd .ss-live__products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .ss-headbar-dd .ss-live__products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.ss-headbar-dd .ss-live__product {
    display: block; text-decoration: none; color: inherit;
    border: 1px solid rgba(22,20,18,.08);
    border-radius: 8px; overflow: hidden;
    background: #fff;
    transition: border-color .15s ease, transform .15s ease;
}
.ss-headbar-dd .ss-live__product:hover {
    border-color: #b85a2e;
    transform: translateY(-2px);
    color: inherit; text-decoration: none;
}
.ss-headbar-dd .ss-live__product-img {
    aspect-ratio: 1 / 1;
    background: #f5f3ef;
    overflow: hidden;
}
.ss-headbar-dd .ss-live__product-img img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}
.ss-headbar-dd .ss-live__product-meta { padding: 12px 14px 14px; }
.ss-headbar-dd .ss-live__product-name {
    font-size: 14px; line-height: 1.35; font-weight: 500;
    color: #161412;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 38px;
}
.ss-headbar-dd .ss-live__product-price { margin-top: 6px; font-size: 15px; font-weight: 600; color: #161412; }
.ss-headbar-dd .ss-live__product--skeleton {
    height: 240px;
    background: linear-gradient(90deg, #ebe9e6 0%, #f5f3ef 50%, #ebe9e6 100%);
    border-radius: 8px; border: 0;
    animation: ss-pulse 1.4s ease-in-out infinite;
}

.ss-headbar-dd .ss-live__cats-label {
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: #6e6a63; margin-bottom: 8px; font-weight: 500;
}
.ss-headbar-dd .ss-live__cats { display: flex; flex-wrap: wrap; gap: 10px; }
/* Inverted style — dark pill with white text draws the eye much more
   than the previous light-grey background, which got lost between
   product cards and ambient page chrome. Hover lights up the accent. */
.ss-headbar-dd .ss-live__cat {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: #161412;
    border: 1px solid #161412;
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    text-decoration: none; color: #fff;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.ss-headbar-dd .ss-live__cat:hover {
    background: #b85a2e;
    border-color: #b85a2e;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.ss-headbar-dd .ss-live__cat small {
    color: #161412;
    font-size: 11px; font-weight: 600;
    background: #f4ba9a;
    padding: 1px 8px;
    border-radius: 999px;
    line-height: 1.4;
}
.ss-headbar-dd .ss-live__cat:hover small {
    background: #fff;
    color: #b85a2e;
}

.ss-headbar-dd .ss-live__empty {
    text-align: center; padding: 30px 16px; color: #6e6a63;
}
.ss-headbar-dd .ss-live__empty svg { color: #a8a39a; margin-bottom: 8px; }
.ss-headbar-dd .ss-live__empty p { margin: 0; font-size: 14px; color: #161412; }

/* ------------------- HEADER MODAL LIVE PREVIEW ----------------------------*/

#searchmodal .ss-live {
    margin-top: 12px;
    color: #161412;
}

#searchmodal .ss-live:empty {
    /* No double padding when there's nothing to show. */
    margin-top: 0;
}

/* "View all results" CTA — sits at the top of the dropdown, large and
   obvious. Reads as a button-like banner. */
#searchmodal .ss-live__cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #161412 0%, #2a2422 100%);
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
#searchmodal .ss-live__cta:hover,
#searchmodal .ss-live__cta:focus {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(22,20,18,.18);
    color: #fff;
    text-decoration: none;
}
#searchmodal .ss-live__cta-icon {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.12);
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
#searchmodal .ss-live__cta-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.3;
}
#searchmodal .ss-live__cta-text strong {
    font-weight: 600;
    color: #f4ba9a;
}
#searchmodal .ss-live__cta-arrow {
    font-size: 22px;
    color: rgba(255,255,255,.7);
    transition: transform .2s ease;
}
#searchmodal .ss-live__cta:hover .ss-live__cta-arrow {
    transform: translateX(4px);
    color: #fff;
}

/* Loading skeleton variant — same height, no content, gentle pulse. */
#searchmodal .ss-live__cta--skeleton {
    background: linear-gradient(90deg, #ebe9e6 0%, #f5f3ef 50%, #ebe9e6 100%);
    height: 64px;
    margin-bottom: 18px;
    border-radius: 12px;
    animation: ss-pulse 1.4s ease-in-out infinite;
}

/* Product previews — grid of small cards. 4 per row desktop, 2 mobile. */
#searchmodal .ss-live__products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    #searchmodal .ss-live__products {
        grid-template-columns: repeat(2, 1fr);
    }
}

#searchmodal .ss-live__product {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(22,20,18,.08);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color .15s ease, transform .15s ease;
}
#searchmodal .ss-live__product:hover {
    border-color: #b85a2e;
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

#searchmodal .ss-live__product-img {
    aspect-ratio: 1 / 1;
    background: #f5f3ef;
    overflow: hidden;
}
#searchmodal .ss-live__product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

#searchmodal .ss-live__product-meta {
    padding: 8px 10px 10px;
}
#searchmodal .ss-live__product-name {
    font-size: 12px;
    line-height: 1.35;
    color: #161412;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 32px;
}
#searchmodal .ss-live__product-price {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #161412;
}

#searchmodal .ss-live__product--skeleton {
    height: 180px;
    background: linear-gradient(90deg, #ebe9e6 0%, #f5f3ef 50%, #ebe9e6 100%);
    border-radius: 8px;
    border: 0;
    animation: ss-pulse 1.4s ease-in-out infinite;
}

/* Matched categories label */
#searchmodal .ss-live__cats-label {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6e6a63;
    margin-bottom: 8px;
    font-weight: 500;
}

#searchmodal .ss-live__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#searchmodal .ss-live__cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #faf9f6;
    border: 1px solid rgba(22,20,18,.10);
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
    color: #161412;
    transition: all .15s ease;
}
#searchmodal .ss-live__cat:hover {
    background: #161412;
    color: #fff;
    border-color: #161412;
    text-decoration: none;
}
#searchmodal .ss-live__cat small {
    color: #a8a39a;
    font-size: 11px;
    background: #fff;
    padding: 1px 6px;
    border-radius: 999px;
}
#searchmodal .ss-live__cat:hover small {
    background: rgba(255,255,255,.15);
    color: #fff;
}

/* Empty-results state inside the modal — quiet, suggests scrolling
   down to the trending blocks which become visible again. */
#searchmodal .ss-live__empty {
    text-align: center;
    padding: 24px 16px 8px;
    color: #6e6a63;
}
#searchmodal .ss-live__empty svg {
    color: #a8a39a;
    margin-bottom: 8px;
}
#searchmodal .ss-live__empty p {
    margin: 0 0 4px;
    font-size: 15px;
    color: #161412;
}
#searchmodal .ss-live__empty small {
    font-size: 12px;
    color: #6e6a63;
}

@keyframes ss-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .65; }
}

/* Keyboard focus rings — visible only on :focus-visible so mouse users
   don't see them. Browser support is wide (incl. iOS Safari 15+). */
#searchmodal .ss-live a:focus-visible {
    outline: 2px solid #b85a2e;
    outline-offset: 3px;
    border-radius: 8px;
}
#searchmodal .ss-live__product:focus-visible {
    border-color: #b85a2e;
    transform: translateY(-2px);
}

/* Existing trending blocks — tighten typography to look intentional
   beside the new live preview (rather than dated). */
#searchmodal .trendingSearch li a,
#searchmodal .trendingCategory p {
    transition: color .15s ease;
}