/* ===============================
   HEADER ICON
================================ */

.wc-cs-header-toggle {
    background: transparent;
    border: 0;
    padding: .5em;
    margin: 0 .25em;
    cursor: pointer;
    color: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.wc-cs-header-toggle:hover,
.wc-cs-header-toggle:focus {
    color: inherit;
    background: transparent;
    box-shadow: none;
    outline: 0;
}

.wc-cs-header-toggle .wc-cs-icon {
    display: block;
}

/* When panel is open, give the icon a subtle pressed state */
body.wc-cs-open .wc-cs-header-toggle {
    opacity: 0.6;
}

/* ===============================
   SLIDE-DOWN PANEL

   Rendered in wp_footer but docked into the visible header element
   by JS on open. That makes the panel a child of <header>, so it
   scrolls with the page natively — no fixed positioning, no JS
   scroll listener. Expansion is animated via max-height transition.

   No inner scroll: the panel grows to fit its content and the entire
   page scrolls as one unit. This avoids the nested-scroll problem
   where the user's scroll gestures get trapped inside the panel and
   they can't reach content below.

   Colour is a light grey, distinct from both the (dark) header above
   and the (white) page content below.
================================ */

.wc-cs-header-panel {
    width: 100%;
    flex: 0 0 100%;
    display: block;
    background: #f4f4f4;
    color: #222;
    border: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s ease, box-shadow .4s ease;
    box-sizing: border-box;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* When open, let the panel expand to whatever its content needs.
   A generous ceiling prevents runaway growth if the results HTML is
   malformed, but under normal conditions the panel sizes to content
   and the page scrolls naturally around it.

   Drop shadow on the bottom edge visually separates the panel from
   the page content below and reinforces that it's an overlay anchored
   to the header. */
body.wc-cs-open .wc-cs-header-panel {
    max-height: 4000px;
    box-shadow: 0 6px 12px -2px rgba(0,0,0,0.18);
}

/* Hidden attribute is managed by JS — override the UA default behaviour
   so the transition runs smoothly. */
.wc-cs-header-panel[hidden] {
    display: block !important;
    max-height: 0;
}

body.wc-cs-open .wc-cs-header-panel[hidden] {
    max-height: 4000px;
}

.wc-cs-header-inner {
    display: flex;
    align-items: center;
    gap: .75em;
    padding: 1em max(1em, 4vw);
    max-width: 1200px;
    margin: 0 auto;
}

.wc-cs-header-input-wrap {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.wc-cs-header-input {
    width: 100%;
    padding: .7em 1em;
    font-size: 1.05em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #222;
    box-sizing: border-box;
    outline: none;
}

.wc-cs-header-input::placeholder {
    color: #888;
}

.wc-cs-header-input:focus {
    border-color: #222;
}

.wc-cs-header-close {
    background: transparent;
    border: 0;
    font-size: 1.6em;
    line-height: 1;
    padding: .2em .5em;
    cursor: pointer;
    color: #666;
    box-shadow: none;
}

.wc-cs-header-close:hover,
.wc-cs-header-close:focus {
    color: #000;
    background: transparent;
    box-shadow: none;
    outline: 0;
}

/* ===============================
   RESULTS INSIDE PANEL

   Three columns: thumb / name / price.
================================ */

.wc-cs-header-results {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 max(1em, 4vw) 1em;
}

.wc-cs-header-results .wc-cs-status {
    color: #555;
    font-size: .9em;
    padding: 0 0 .5em;
    min-height: 1.4em;
}

.wc-cs-header-results .wc-cs-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    background: #fff;
}

.wc-cs-header-results .wc-cs-table tr {
    /* Horizontal separators only — no vertical lines between cells. */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.wc-cs-header-results .wc-cs-table tr:last-child {
    border-bottom: 0;
}

/* Make rows feel clickable on hover, since the whole row is essentially
   a link to the product page now. */
.wc-cs-header-results .wc-cs-table tr:hover {
    background: #fafafa;
}

.wc-cs-header-results .wc-cs-table td {
    padding: .5em;
    vertical-align: middle;
    border: 0;
}

.wc-cs-header-results .wc-cs-table td.thumb {
    width: 60px;
}

.wc-cs-header-results .wc-cs-table td.thumb img {
    display: block;
    max-width: 50px;
    height: auto;
}

.wc-cs-header-results .wc-cs-table td.name a {
    color: #222;
    text-decoration: none;
    font-weight: 600;
}

.wc-cs-header-results .wc-cs-table td.name a:hover {
    text-decoration: underline;
}

.wc-cs-header-results .wc-cs-table td.price {
    width: 25%;
    text-align: right;
    color: #444;
    white-space: nowrap;
}

.wc-cs-header-results .wc-cv-oos {
    margin-top: 4px;
    font-size: 12px;
    color: #a00;
    font-weight: 600;
}

.wc-cs-header-footer {
    padding: .75em 0 0;
    text-align: center;
    margin-top: .5em;
}

/* Only show the footer's separator when it actually contains content
   (i.e. the "View all N results" link). Otherwise it's just an empty div
   drawing a stray line under the results. */
.wc-cs-header-footer:not(:empty) {
    border-top: 1px solid #ddd;
}

.wc-cs-view-all {
    display: inline-block;
    padding: .4em 1em;
    color: #222;
    font-weight: 600;
    text-decoration: none;
}

.wc-cs-view-all:hover {
    text-decoration: underline;
    color: #222;
}

/* ===============================
   FULL-RESULTS PAGE (?wc_cs_search=…)
   Renders inside the shop's woocommerce_before_shop_loop area.
================================ */

.wc-cs-full-wrap {
    margin-bottom: 2em;
}

.wc-cs-full-heading {
    margin: 0 0 .25em;
}

.wc-cs-full-heading em {
    font-style: normal;
    color: #666;
}

.wc-cs-full-count {
    color: #555;
    margin: 0 0 1.5em;
}

.wc-cs-full-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
}

.wc-cs-full-table tr {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.wc-cs-full-table tr:last-child {
    border-bottom: 0;
}

.wc-cs-full-table tr:hover {
    background: #fafafa;
}

.wc-cs-full-table td {
    padding: .75em .5em;
    vertical-align: middle;
    border: 0;
}

.wc-cs-full-table td.thumb {
    width: 80px;
}

.wc-cs-full-table td.thumb img {
    display: block;
    max-width: 70px;
    height: auto;
}

.wc-cs-full-table td.name a {
    color: #222;
    text-decoration: none;
    font-weight: 600;
}

.wc-cs-full-table td.name a:hover {
    text-decoration: underline;
}

.wc-cs-full-table td.price {
    width: 20%;
    text-align: right;
    color: #444;
    white-space: nowrap;
}

.wc-cs-full-table .wc-cv-oos {
    margin-top: 4px;
    font-size: 12px;
    color: #a00;
    font-weight: 600;
}

/* When showing full results, hide the default product grid and any
   catalogue-views table so only the search results show. */
body.wc-cs-full-results ul.products,
body.wc-cs-full-results .wc-cv-table,
body.wc-cs-full-results .wc-cv-switch,
body.wc-cs-full-results nav.woocommerce-pagination,
body.wc-cs-full-results .woocommerce-result-count,
body.wc-cs-full-results .woocommerce-ordering,
body.wc-cs-full-results .woocommerce-notices-wrapper {
    display: none !important;
}

/* ===============================
   MOBILE
================================ */

@media (max-width: 768px) {

    .wc-cs-header-inner {
        padding: .75em 1em;
    }

    .wc-cs-header-input {
        font-size: 1em;
        padding: .6em 1em;
    }

    .wc-cs-header-results {
        padding: 0 1em 1em;
    }

    .wc-cs-header-results .wc-cs-table,
    .wc-cs-full-table {
        font-size: 0.85rem;
    }

    .wc-cs-header-results .wc-cs-table td.thumb img,
    .wc-cs-full-table td.thumb img {
        max-width: 40px;
    }

    body.wc-cs-open .wc-cs-header-panel {
        max-height: 100vh;
    }
}