/* ==========================================================================
   Shopify Search — by Kafaf Studio
   Every visual value here reads from a CSS custom property that's injected
   inline from the admin dashboard (Shopify Search → Colors & Style /
   Layout & Sizing). Defaults below only apply if the dashboard hasn't set
   a value yet, so the plugin still looks right out of the box.
   ========================================================================== */

/* Trigger icon (the icon that opens the overlay, wherever it's placed in
   the theme header) */
.shopify-search-trigger {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    color: var(--ss-trigger-icon-color, #9a9186);
    box-sizing: border-box;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease;
}
.shopify-search-trigger:hover,
.shopify-search-trigger:focus-visible,
.shopify-search-trigger:active {
    background-color: var(--ss-trigger-hover-bg, rgba(0, 0, 0, 0.06));
}
.shopify-search-trigger:focus-visible {
    outline: 2px solid var(--ss-accent, #a05a3d);
    outline-offset: 2px;
}

/* ==========================================================================
   Overlay — a full-viewport click-catcher (needed for the dim backdrop and
   "click outside to close"). The VISIBLE white surface is the compact
   floating panel inside it, height-capped per the dashboard setting.
   ========================================================================== */
.shopify-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    box-sizing: border-box;
}
.shopify-search-overlay,
.shopify-search-overlay * {
    box-sizing: border-box;
}
/* .is-visible controls whether the overlay is in the layout at all
   (display). .is-active controls the animated "open" end-state. JS
   applies is-visible first, forces a reflow, then adds is-active on
   the next frame — that gap is what makes the transition actually
   play instead of snapping instantly from a display:none state. */
.shopify-search-overlay.is-visible {
    display: block;
    /* Click-through by default. Only the fully "open" (.is-active) state
       below re-enables interaction. Without this, the overlay still
       intercepts clicks/hover on the header trigger icon during the
       closing fade-out (it's display:block the whole time, even at
       opacity 0), making the icon look permanently unclickable. */
    pointer-events: none;
}
.shopify-search-overlay.is-active {
    pointer-events: auto;
}
body.shopify-search-open {
    overflow: hidden;
}

.shopify-search-backdrop {
    position: absolute;
    inset: 0;
    background: var(--ss-backdrop-color, rgba(20, 16, 13, 0.45));
    opacity: 0;
    transition: opacity var(--ss-anim-duration-close, 220ms) var(--ss-anim-easing, ease);
}
.shopify-search-overlay.is-active .shopify-search-backdrop {
    opacity: 1;
    transition-duration: var(--ss-anim-duration-open, 320ms);
}

/* The actual compact "dropdown" surface. Base (closed) state below;
   each [data-ss-anim] variant overrides the transform it animates from.
   .is-active always wins on specificity, so the "open" end-state
   (transform: none) applies regardless of which variant is active. */
.shopify-search-panel {
    position: relative;
    background: var(--ss-panel-bg, #fff);
    width: 100%;
    max-width: var(--ss-panel-max-width, 1200px);
    min-height: 200px;
    margin: 0 auto;
    border-radius: 0 0 var(--ss-panel-radius, 18px) var(--ss-panel-radius, 18px);
    box-shadow: var(--ss-panel-shadow, 0 16px 40px rgba(0, 0, 0, 0.16));
    max-height: var(--ss-panel-height-desktop, 50vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transition: transform var(--ss-anim-duration-close, 220ms) var(--ss-anim-easing, ease),
                opacity var(--ss-anim-duration-close, 220ms) var(--ss-anim-easing, ease);
}
.shopify-search-overlay.is-active .shopify-search-panel {
    opacity: 1;
    transform: none;
    transition-duration: var(--ss-anim-duration-open, 320ms);
}

/* Animation style variants — the "from" (closed) transform for each style.
   Chosen in Shopify Search → Animation → Animation style. */
[data-ss-anim="fade"] .shopify-search-panel {
    transform: none; /* opacity-only, no movement */
}
[data-ss-anim="slide-down"] .shopify-search-panel {
    transform: translateY(-24px);
}
[data-ss-anim="scale-fade"] .shopify-search-panel {
    transform: translateY(-10px) scale(0.97);
}
[data-ss-anim="slide-up"] .shopify-search-panel {
    transform: translateY(40px);
}

.shopify-search-overlay-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px 28px 24px;
}

/* Search bar */
.shopify-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    border-color: var(--ss-bar-border, #e6e1db);
    border-width: var(--ss-bar-border-width, 1px);
    border-style: var(--ss-bar-border-style, solid);
    border-radius: var(--ss-bar-radius, 30px);
    padding: 0 18px;
    height: var(--ss-bar-height, 54px);
    min-height: var(--ss-bar-height, 54px);
    background: var(--ss-bar-bg, #f7f5f2);
    flex-shrink: 0;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.shopify-search-bar:focus-within {
    border-color: var(--ss-accent, #a05a3d);
    background: var(--ss-panel-bg, #fff);
}
.shopify-search-bar input#shopify-search-input {
    all: unset;
    box-sizing: border-box;
    flex: 1;
    font-size: var(--ss-font-size, 16px);
    line-height: 1.3;
    color: #1f1b17;
    min-width: 0;
    cursor: text;
    -webkit-tap-highlight-color: transparent;
}
.shopify-search-bar input#shopify-search-input::placeholder {
    color: #a8a099;
}

/* The search icon/button — hard-reset so no theme-wide `button` styling
   (background, padding, border-radius) can leak in and break the pill. */
.shopify-search-bar button.shopify-search-bar-icon-btn {
    all: unset;
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background-color: var(--ss-button-bg, transparent);
    color: var(--ss-search-icon-color, #9a9186);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.shopify-search-bar button.shopify-search-bar-icon-btn:hover,
.shopify-search-bar button.shopify-search-bar-icon-btn:focus-visible {
    background-color: var(--ss-button-bg-hover, rgba(160, 90, 61, 0.08));
}
.shopify-search-bar button.shopify-search-bar-icon-btn svg {
    display: block;
    pointer-events: none;
    width: 18px;
    height: 18px;
}

#shopify-search-cancel {
    all: unset;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 600;
    color: var(--ss-accent, #a05a3d);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 4px 2px;
    -webkit-tap-highlight-color: transparent;
}
#shopify-search-cancel:hover {
    opacity: 0.75;
}

/* Live search results (inside the panel) — own scroll area, fills whatever
   space is left under the search bar within the capped panel. */
.shopify-search-results {
    margin-top: 18px;
    overflow-y: auto;
    min-height: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.shopify-search-results.is-visible {
    opacity: 1;
}
.shopify-search-results::-webkit-scrollbar {
    width: 6px;
}
.shopify-search-results::-webkit-scrollbar-thumb {
    background: #ddd6cf;
    border-radius: 6px;
}

.shopify-search-empty,
.shopify-search-loading {
    padding: 20px 4px;
    font-size: 14px;
    color: #7a7268;
    text-align: center;
}

/* Real product-card grid inside the dropdown — reuses the site's own
   .products li.product markup, just scaled down to stay compact. */
.ss-live-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--ss-cols-desktop, 4), 1fr);
    gap: 18px;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}
.ss-live-grid li.product {
    width: 100% !important;
    margin: 0 !important;
}
.ss-live-grid li.product img {
    height: 150px !important;
    width: 100% !important;
    object-fit: cover;
    border-radius: 6px;
}

/* Skeleton loading state — shown while a request is in flight */
.ss-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(var(--ss-cols-desktop, 4), 1fr);
    gap: 18px;
}
.ss-skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ss-skeleton-thumb,
.ss-skeleton-line {
    background: linear-gradient(90deg, #f0ede8 25%, #e6e1da 37%, #f0ede8 63%);
    background-size: 400% 100%;
    animation: ss-shimmer 1.4s ease infinite;
    border-radius: 6px;
}
.ss-skeleton-thumb {
    height: 150px;
    width: 100%;
}
.ss-skeleton-line {
    height: 11px;
}
.ss-skeleton-line-title {
    width: 85%;
}
.ss-skeleton-line-price {
    width: 40%;
}
@keyframes ss-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ss-skeleton-thumb,
    .ss-skeleton-line {
        animation: none;
    }
}

/* No-results state: message + suggested categories side by side */
.shopify-search-no-results-wrap {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    padding: 8px 4px 4px;
}
.shopify-search-no-results-message {
    flex: 1 1 240px;
    font-size: 16px;
    color: #2b2620;
    margin: 0;
}
.ss-suggested-categories {
    flex: 0 0 220px;
}
.ss-suggested-categories-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a8a099;
    margin: 0 0 10px;
}
.ss-suggested-categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ss-suggested-categories li {
    margin-bottom: 9px;
}
.ss-suggested-categories a {
    color: var(--ss-accent, #a05a3d);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}
.ss-suggested-categories a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Search results page — product grid
   ========================================================================== */
.ss-search-header {
    margin: 32px 0 24px;
}
.ss-search-title {
    font-size: 28px;
}

.ss-product-grid {
    display: grid;
    grid-template-columns: repeat(var(--ss-cols-desktop, 4), 1fr);
    gap: 24px;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}
.ss-product-grid li.product {
    width: 100% !important;
    margin: 0 !important;
}

.ss-search-no-results {
    padding: 60px 0;
    text-align: center;
    color: #777;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
    .ss-product-grid,
    .ss-live-grid,
    .ss-skeleton-grid {
        grid-template-columns: repeat(var(--ss-cols-laptop, 3), 1fr);
    }
}
@media (max-width: 992px) {
    .ss-product-grid,
    .ss-live-grid,
    .ss-skeleton-grid {
        grid-template-columns: repeat(var(--ss-cols-tablet, 3), 1fr);
    }
}
@media (max-width: 600px) {
    .ss-product-grid,
    .ss-live-grid,
    .ss-skeleton-grid {
        grid-template-columns: repeat(var(--ss-cols-mobile, 2), 1fr);
        gap: 14px;
    }
    .ss-live-grid li.product img,
    .ss-skeleton-thumb {
        height: 120px !important;
    }
    .shopify-search-panel {
        max-height: var(--ss-panel-height-mobile, 80vh);
        border-radius: 0 0 10px 10px;
    }
    .shopify-search-overlay-inner {
        padding: 14px 16px 18px;
    }
    .shopify-search-bar {
        padding: 0 14px;
    }
    .shopify-search-bar button.shopify-search-bar-icon-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }
    .shopify-search-results {
        margin-top: 14px;
    }
    .shopify-search-no-results-wrap {
        flex-direction: column;
        gap: 22px;
    }
    .ss-suggested-categories {
        flex: 0 0 auto;
    }
}