/* ==========================================================================
   Amasty Advanced Search (Amasty_Xsearch) — PoceniPC design layer
   --------------------------------------------------------------------------
   Loaded after css/custom_pocenipc.css (see Magento_Theme/layout/
   default_head_blocks.xml), so it wins on equal specificity and supersedes the
   short "11-08-2026 Anand — Amasty Xsearch autocomplete" block in that file.

   Why this file exists as a separate stylesheet: custom_pocenipc.css on the
   test server currently carries ~1600 lines that were never committed to this
   repository, so overwriting it from git would destroy them. Keeping the search
   design here means it can be deployed on its own.

   Colours/typography follow .claude/skills/frontend (brand guidelines):
     Action Blue #0071dc · Dark Navy #284460 · Gold #f9bc1a
     Text #333 / #666 / #999 · Border #e1e1e1 · Background #f5f5f5

   Sizes are in px on purpose. The brand guide describes a 62.5% root, but the
   live bs_complex/pocenipc theme leaves <html> at the browser default of 16px,
   so rem values here would come out 1.6x too large.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header search field
   The theme centres everything inside .col-logo; the search markup inherits
   that and every label, product name and price in the dropdown ends up
   centred. Resetting it here fixes the whole subtree in one place.
   -------------------------------------------------------------------------- */

.amsearch-wrapper-block {
    text-align: left;
    position: relative;
    /* Lifts the whole search — field and dropdown — above the category bar,
       which otherwise paints over the top of the panel on mobile. */
    z-index: 1001;
}

/* custom_pocenipc.css sets .cms-page-view #maincontent { z-index: auto },
   which stops #maincontent from containing the dim overlay (styles-m.css
   .amsearch-overlay-block, z-index: 11). The overlay then escapes into the
   root stacking context and paints above .header-container (themes.css,
   z-index: 3), so clicks on the dropdown hit the overlay instead of the
   result link. Outrank it here — CMS pages only, other page types keep
   #maincontent's z-index: 1 and are unaffected. See issue #145. */
.cms-page-view .header-container {
    z-index: 12;
}

.header-container .header .col-logo .amsearch-wrapper-block {
    display: inline-block;
    vertical-align: middle;
    float: none;
    width: 100%;
    max-width: 620px;
    min-width: 240px;
    margin: 0 40px 0 15px;
    padding: 0;
}

/* Amasty widens .amsearch-form-block to the configured popup width (inline
   style) the moment the field gets focus. At 900px that pushed the field over
   the mini-cart and 95px past the right edge of a 1440px viewport. The field
   keeps its own width; only the dropdown below it is allowed to be wider. */
.amsearch-wrapper-block .amsearch-form-block {
    width: 100% !important;
    justify-content: flex-start;
    position: relative;
}

.amsearch-input-wrapper {
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* Three classes deep on purpose: themes.css and styles-m.css both style
   input[type="text"] (0,1,1), which outranks a bare .amsearch-input and was
   forcing height 35px, line-height 35px and border-radius 1px onto the field —
   that is the "boxy, not vertically centred" look. Font family is deliberately
   not set: Dolphin_Renting/css/homepage.css declares * { font-family: Outfit }
   with !important, so the field inherits the same face as the rest of the page. */
.amsearch-wrapper-block .amsearch-input-wrapper .amsearch-input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    padding: 0 110px 0 18px;
    background-color: #ffffff;
    font-size: 14px;
    /* height minus the two 1px borders, so the text sits on the centre line */
    line-height: 42px;
    color: #284460;
    text-align: left;
    box-shadow: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.amsearch-wrapper-block .amsearch-input-wrapper .amsearch-input::placeholder {
    color: #97a3b0;
    opacity: 1;
}

.amsearch-wrapper-block .amsearch-input-wrapper .amsearch-input:focus {
    border-color: #0071dc;
    box-shadow: 0 0 0 3px rgba(0, 113, 220, 0.12);
    outline: none;
}

/* The gold submit button is attached to the right of the field, full height,
   sharing its corner radius — the shape the live site uses.
   background-image has to be restated: the "11-08-2026 Anand" block in
   custom_pocenipc.css uses the `background:` shorthand, which reset Amasty's
   own magnifier to `initial` and left a bare yellow dot with no icon in it. */
.amsearch-input-wrapper .amsearch-button.-loupe,
.amsearch-button.-primary.-search {
    position: absolute;
    top: 0;
    right: 0;
    transform: none;
    width: 64px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0 6px 6px 0;
    background-color: #f9bc1a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23284460' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.5 20.5 16 16'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease-out;
}

.amsearch-input-wrapper .amsearch-button.-loupe:hover,
.amsearch-button.-primary.-search:hover {
    background-color: #edaa00;
}

/* Amasty marks the button -disabled until the query reaches min_chars. It is
   the only affordance in the field, so it stays legible rather than greyed out. */
.amsearch-input-wrapper .amsearch-button.-loupe.-disabled {
    opacity: 1;
    cursor: default;
}

/* background-color, not the shorthand — the X glyph is Amasty's background-image. */
.amsearch-input-wrapper .amsearch-button.-close {
    position: absolute;
    top: 50%;
    right: 78px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    color: #97a3b0;
    cursor: pointer;
}

.amsearch-input-wrapper .amsearch-button.-close:hover {
    color: #284460;
}

.amsearch-loader-block {
    right: 78px;
}

/* --------------------------------------------------------------------------
   2. The dropdown panel
   -------------------------------------------------------------------------- */

.amsearch-result-section {
    position: absolute;
    top: calc(100% + 10px);
    /* Anchored to the RIGHT edge of the search field so a panel wider than the
       field grows leftwards into the empty header space instead of off-screen. */
    left: auto;
    right: 0;
    width: 800px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 220px);
    box-sizing: border-box;
    padding: 0;
    overflow: hidden auto;
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(40, 68, 96, 0.16);
    z-index: 9999;
    font-size: 14px;
    color: #333333;
    text-align: left;
}

/* The theme centres list items and product tiles globally; undo it inside the
   panel so names, prices and suggestions read as a normal left-aligned list. */
.amsearch-result-section,
.amsearch-result-section .amsearch-item,
.amsearch-result-section .amsearch-item-container,
.amsearch-result-section .amsearch-block-header,
.amsearch-result-section .product-item,
.amsearch-result-section .product-item-details,
.amsearch-result-section .product-item-description,
.amsearch-result-section .price-box,
.amsearch-result-section .amsearch-description {
    text-align: left;
}

/* Suggestions rail (left) + products (right). */
.amsearch-result-section > .amsearch-items-section {
    flex: 0 0 240px;
    max-width: 240px;
    box-sizing: border-box;
    padding: 6px 0 10px;
    background: #f7f9fb;
    border-right: 1px solid #e1e1e1;
}

/* nowrap is not optional: Amasty ships flex-wrap: wrap on this section, and a
   wrapping *column* flex container breaks the product list into a second
   column that lands outside the panel, so the results look empty. */
/* Descendant, not child: on desktop the products block is a direct child of the
   panel, but below ~992px Amasty nests it inside .amsearch-items-section. */
.amsearch-result-section .amsearch-products-section {
    display: flex;
    /* !important: Amasty's own .amsearch-result-section .amsearch-products-section
       rule is one class more specific and forces row direction back. */
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 0 0;
}

/* --------------------------------------------------------------------------
   3. Section headers ("Priljubljena iskanja", "Izdelki", …)
   The theme applies text-transform: capitalize to block titles, which mangles
   Slovenian sentences ("Šola Je Tu! Čas Je Za Nagradne Igre!").
   -------------------------------------------------------------------------- */

.amsearch-result-section .amsearch-block-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 12px 16px 8px;
    text-transform: none;
}

.amsearch-result-section .amsearch-block-header .amsearch-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.4px;
    color: #284460;
    text-transform: uppercase;
}

.amsearch-result-section .amsearch-title .amsearch-count {
    margin-left: 6px;
    font-weight: 400;
    color: #666666;
}

.amsearch-result-section .amsearch-link.-view-all {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: #0071dc;
    text-transform: none;
    white-space: nowrap;
}

.amsearch-result-section .amsearch-link.-view-all:hover {
    color: #006bb4;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. Suggestion lists (popular / recent searches, categories, CMS pages)
   -------------------------------------------------------------------------- */

.amsearch-result-section .amsearch-item-container {
    margin: 0;
    padding: 0 0 6px;
}

.amsearch-result-section .amsearch-tab-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Block, not flex: category and CMS entries put the name and a description in
   the same row, and as flex siblings the name collapsed to its minimum width —
   "Računalniki" came out one letter per line. */
.amsearch-result-section .amsearch-tab-items .amsearch-item {
    display: block;
    margin: 0;
    padding: 6px 16px;
    line-height: 1.35;
    border: none;
    transition: background-color 0.15s ease-out;
}

.amsearch-result-section .amsearch-tab-items .amsearch-item:hover {
    background-color: #eaf2fb;
}

/* Four classes deep on purpose: Amasty ships
   .amsearch-item-container .amsearch-item .amsearch-link at 1.4rem, which on a
   16px root renders at 22px and dwarfs the product column next to it. */
.amsearch-result-section .amsearch-link,
.amsearch-result-section .amsearch-item-container .amsearch-item .amsearch-link {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: #333333;
    text-transform: none;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.amsearch-result-section .amsearch-link:hover {
    color: #0071dc;
    text-decoration: none;
}

.amsearch-result-section .amasty-xsearch-num-results {
    margin-left: 6px;
    font-size: 12px;
    color: #999999;
    white-space: nowrap;
}

/* CMS-page excerpts: one line is enough as a hint, the full text made the rail
   several screens tall. */
.amsearch-result-section .amsearch-item-container.-page .amsearch-item .amsearch-description,
.amsearch-result-section .amsearch-item-container.-category .amsearch-item .amsearch-description {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
    max-height: 3.2em;
    overflow: hidden !important;
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #666666;
    text-transform: none;
}

.amsearch-highlight {
    color: #0071dc;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. Product results — list rows
   Requires "Pop-Up Display = List" in the admin (see docs). The rules below
   also keep the grid variant readable if that setting is ever changed back.
   -------------------------------------------------------------------------- */

.amsearch-products-section .amsearch-product-list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The theme pins product tiles to a 300px grid cell; a dropdown row has to use
   the full width of the column instead. */
.amsearch-products-section .amsearch-item.product-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100% !important;
    max-width: none !important;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 10px 16px;
    border: none;
    border-bottom: 1px solid #f0f2f5;
    background: transparent;
    transition: background-color 0.15s ease-out;
}

.amsearch-products-section .amsearch-item.product-item:last-child {
    border-bottom: none;
}

.amsearch-products-section .amsearch-item.product-item:hover {
    background-color: #f5f8fc;
}

/* Thumbnail. Amasty writes an inline width of 320px on the image container
   (both a <style> block and a JS style assignment), hence !important. */
.amsearch-products-section .amsearch-image {
    flex: 0 0 68px;
    width: 68px;
    margin: 0;
    padding: 0;
}

.amsearch-products-section .amsearch-product-image-container,
.amsearch-products-section .amsearch-image .product-image-container {
    width: 68px !important;
    max-width: 68px;
    display: block;
}

.amsearch-products-section .amsearch-image .product-image-wrapper {
    padding-bottom: 100% !important;
    background: #ffffff;
    border: 1px solid #eef1f4;
    border-radius: 6px;
    overflow: hidden;
}

.amsearch-products-section .amsearch-image .product-image-photo {
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
}

/* Details column */
/* Amasty reserves min-height: 100px for the grid variant; a list row does not
   need it and it left ~70px of dead space under every result. */
/* Amasty reserves min-height: 100px for the grid variant; a list row does not
   need it and it left ~70px of dead space under every result.
   display: block matters too — as a flex container it blockifies the product
   link's display: -webkit-box, and the two-line clamp silently stops working. */
.amsearch-products-section .amsearch-description.product-item-details {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
}

/* Two lines, then an ellipsis. The theme sets overflow: visible and a fixed
   height on product links, which let a third line bleed across the price. */
.amsearch-products-section .amsearch-link.product-item-link {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    height: auto !important;
    /* Belt and braces: the theme wraps the details column in a flex container
       in some breakpoints, which blockifies -webkit-box and disables the clamp.
       An exact two-line max-height hides the third line cleanly either way. */
    min-height: 0 !important;
    max-height: 2.7em !important;
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #284460;
    text-transform: none;
    overflow-wrap: anywhere;
}

.amsearch-products-section .amsearch-link.product-item-link:hover {
    color: #0071dc;
}

/* The long technical description belongs on the product page, not in a
   dropdown row. Also switched off via desc_length in the admin. */
.amsearch-products-section .product-item-description,
.amsearch-products-section .product.description {
    display: none;
}

.amsearch-products-section .amsearch-wrapper-inner {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    padding: 0;
}

/* Price block: three short lines (incl. VAT, excl. VAT, struck-through old
   price) that Amasty and the theme together stretched to ~114px. */
.amsearch-products-section .price-box,
.amsearch-products-section .product-item [data-role="priceBox"] {
    margin: 0;
    padding: 0;
    line-height: 1.25;
}

.amsearch-products-section .price-box .special-price,
.amsearch-products-section .price-box .old-price,
.amsearch-products-section .price-box .price-container,
.amsearch-products-section .price-box .price-wrapper,
.amsearch-products-section .price-box .price-including-tax {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1.25;
}

.amsearch-products-section .price-box .price-label {
    display: none;
}

/* The theme hangs a padding-bottom: 5px on nearly every price element and
   renders the incl.-VAT wrapper at 28.8px/36px. Together that inflated a
   three-line price block to 127px. */
.amsearch-products-section .price-box,
.amsearch-products-section .price-box * {
    padding-bottom: 0 !important;
}

.amsearch-products-section .price-box {
    display: block !important;
}

.amsearch-products-section .price-box .price-wrapper.price-including-tax,
.amsearch-products-section .price-box .price-including-tax .price {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: #284460;
    white-space: nowrap;
}

.amsearch-products-section .price-box .price-wrapper.price-excluding-tax,
.amsearch-products-section .price-box .price-excluding-tax {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    color: #666666;
}

.amsearch-products-section .price-box .price-excluding-tax .price {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
}

.amsearch-products-section .price-box .old-price .price {
    font-size: 13px;
    font-weight: 400;
    color: #999999;
    text-decoration: line-through;
}

.amsearch-products-section .old-price .price-excluding-tax {
    display: none;
}

/* Review stars, if enabled, stay compact next to the price. */
.amsearch-products-section .product-reviews-summary {
    margin: 2px 0 0;
    transform: scale(0.85);
    transform-origin: left center;
}

/* Add-to-cart is switched off in the admin for the dropdown: our products are
   single-unit refurbished items, most of which carry required options. Hidden
   here as well so the rows stay clean if the setting is turned back on. */
.amsearch-products-section .amsearch-item .tocart,
.amsearch-products-section .amsearch-item .action.tocart,
.amsearch-products-section .amsearch-item .actions-secondary,
.amsearch-products-section .amsearch-item .towishlist,
.amsearch-products-section .amsearch-item .tocompare {
    display: none;
}

/* --------------------------------------------------------------------------
   6. "Nothing found" state inside the dropdown
   -------------------------------------------------------------------------- */

.amsearch-emptyresult-block,
.amsearch-message-block {
    padding: 24px 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #666666;
    text-align: center;
}

.amsearch-emptyresult-block .amsearch-title {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #284460;
}

/* --------------------------------------------------------------------------
   7. Tablet and mobile
   Below 992px the panel becomes a full-width sheet under the field: one column,
   products first, normal type sizes, and it may never flip above the field
   (Amasty writes bottom:100% inline when it thinks there is no room below).
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .header-container .header .col-logo .amsearch-wrapper-block,
    .header-container .header .amsearch-wrapper-block {
        display: block;
        /* Below 767px custom_pocenipc.css floats .logo left; without a clear
           here this block box sits at the same top offset as the float
           instead of starting below it, so the search field overlapped the
           logo and made it nearly untappable. */
        clear: both;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 10px 0 0;
    }

    .amsearch-input {
        height: 44px;
        font-size: 15px; /* >=16px effective, so iOS does not zoom on focus */
    }

    .amsearch-result-section {
        top: calc(100% + 8px) !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100%;
        max-height: calc(100vh - 180px);
        flex-direction: column !important;
        flex-wrap: nowrap !important; /* see the note on the products section above */
        border-radius: 8px;
        -webkit-overflow-scrolling: touch;
    }

    /* Below 992px Amasty puts the products block inside .amsearch-items-section,
       so that section is the whole panel here, not a rail: no grey background,
       no divider. Products come first through the "Position" settings in the
       admin (products 1, then popular/recent searches, categories, pages). */
    .amsearch-result-section .amsearch-products-section {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        padding: 0;
    }

    .amsearch-result-section > .amsearch-items-section {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        background: #ffffff;
        border-right: none;
    }

    .amsearch-result-section .amsearch-item-container {
        border-top: 1px solid #eef1f4;
    }

    .amsearch-result-section .amsearch-block-header {
        padding: 12px 14px 8px;
    }

    .amsearch-result-section .amsearch-link,
    .amsearch-products-section .amsearch-link.product-item-link {
        font-size: 14px;
    }

    .amsearch-products-section .amsearch-item.product-item {
        padding: 12px 14px;
    }

    .amsearch-products-section .price-box .price-including-tax .price {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .amsearch-products-section .amsearch-image,
    .amsearch-products-section .amsearch-product-image-container {
        flex-basis: 60px;
        width: 60px !important;
        max-width: 60px;
    }
}

/* --------------------------------------------------------------------------
   8. Search results page (catalogsearch/result)
   -------------------------------------------------------------------------- */

/* "Podobni iskalni izrazi" was rendered as "Podobni Iskalni Izrazi" by the
   theme's capitalize rule on block titles. */
.search.results .amsearch-related-terms .amsearch-title,
.search.results .amsearch-block-header .amsearch-title,
.amsearch-related-terms .amsearch-title {
    text-transform: none;
    font-size: 18px;
    font-weight: 700;
    color: #284460;
}

.amsearch-related-terms {
    margin: 0 0 20px;
}

.amsearch-related-terms .amsearch-item,
.amsearch-related-terms .amsearch-link {
    text-transform: none;
}

.amsearch-related-terms .amsearch-link {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 5px 12px;
    background: #eaf2fb;
    border: 1px solid #d4e4f7;
    border-radius: 14px;
    font-size: 13px;
    color: #1979c3;
    transition: all 0.2s ease-out;
}

.amsearch-related-terms .amsearch-link:hover {
    background: #0071dc;
    border-color: #0071dc;
    color: #ffffff;
    text-decoration: none;
}

/* Result-page tabs (Izdelki / Kategorije / Strani) */
.amsearch-result-tabs .amsearch-tab-item,
.search.results .amsearch-tab-item {
    text-transform: none;
    font-size: 14px;
}

.amsearch-result-tabs .amsearch-tab-item.-current,
.search.results .amsearch-tab-item.-current {
    color: #284460;
    font-weight: 700;
    border-bottom-color: #0071dc;
}

/* --------------------------------------------------------------------------
   9. Search results page — tab strip
   The stock markup is Magento's tabs widget: bordered boxes that read like a
   1990s desktop app next to the rest of the page. Restyled as a plain
   underlined strip. The float layout is kept, because the tab titles and the
   content panels are siblings inside the same container — turning the
   container into a flex row would drag the panels into the strip.
   -------------------------------------------------------------------------- */

.search.results .amsearch-result-tabs,
.amsearch-result-tabs {
    margin: 0 0 22px;
    padding: 0;
    border: none;
    border-bottom: 1px solid #e6eaee;
    background: transparent;
}

.amsearch-result-tabs > .data.item.title {
    float: left;
    margin: 0 4px 0 0;
    padding: 0;
    height: auto;
    background: transparent;
    border: none;
    border-radius: 0;
}

.amsearch-result-tabs > .data.item.title > .data.switch,
.amsearch-result-tabs > .data.item.title > a.switch {
    display: block;
    height: auto;
    margin: 0;
    padding: 11px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #7a8794;
    text-transform: none;
    text-decoration: none;
    transition: color 0.15s ease-out, border-color 0.15s ease-out;
}

.amsearch-result-tabs > .data.item.title > .data.switch:hover {
    color: #284460;
    border-bottom-color: #cfdae6;
}

.amsearch-result-tabs > .data.item.title.active > .data.switch,
.amsearch-result-tabs > .data.item.title.active > a.switch {
    color: #284460;
    background: transparent;
    border-bottom-color: #0071dc;
}

.amsearch-result-tabs .amsearch-results-count {
    margin-left: 4px;
    font-weight: 400;
    color: #97a3b0;
}

/* The panels are siblings of the titles, so they have to clear the float. */
.amsearch-result-tabs > .data.item.content {
    clear: both;
    float: none;
    width: 100%;
    margin: 0;
    padding: 18px 0 0;
    background: transparent;
    border: none;
}

/* --------------------------------------------------------------------------
   10. Search results page — trust banner
   Same design as the one on category pages. Those styles are scoped to
   .category-description and live only in custom_pocenipc.css on the server, so
   this is a self-contained copy rather than a dependency on that file.
   -------------------------------------------------------------------------- */

.catalogsearch-result-index .trust-banner {
    margin: 0 0 20px;
    padding: 15px 20px;
    background: #eef4fb;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.catalogsearch-result-index .trust-banner__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.catalogsearch-result-index .trust-banner__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1d72c2;
}

.catalogsearch-result-index .trust-banner__link {
    font-size: 13px;
    font-weight: 600;
    color: #1d72c2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease-out;
}

.catalogsearch-result-index .trust-banner__link:hover {
    color: #185fa3;
    text-decoration: none;
}

.catalogsearch-result-index .trust-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.catalogsearch-result-index .trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.catalogsearch-result-index .trust-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #ffffff;
    border-radius: 8px;
}

.catalogsearch-result-index .trust-item__icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #1d72c2;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.catalogsearch-result-index .trust-item__text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #1e293b;
}

@media (max-width: 767px) {
    .catalogsearch-result-index .trust-banner {
        padding: 14px 16px;
    }

    .catalogsearch-result-index .trust-items {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* --------------------------------------------------------------------------
   11. Keep the submit button on the right in every state
   Amasty moves .amsearch-button.-loupe to the left of the field once the input
   has a value (.-typed / .-match set `right: calc(...)`, one class more
   specific than section 1). That is what put a stray gold dot over the first
   characters of the query on the results page.
   -------------------------------------------------------------------------- */

.amsearch-wrapper-block .amsearch-input-wrapper .amsearch-button.-loupe,
.amsearch-wrapper-block .amsearch-input-wrapper.-typed .amsearch-button.-loupe,
.amsearch-wrapper-block .amsearch-input-wrapper.-match .amsearch-button.-loupe {
    right: 0;
    left: auto;
    top: 0;
    bottom: auto;
    width: 64px;
    height: 44px;
    transform: none;
}

/* Narrow screens: keep the tab strip on one line and let it scroll sideways
   rather than stacking one tab per row. */
@media (max-width: 767px) {
    .amsearch-result-tabs {
        display: block;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .amsearch-result-tabs::-webkit-scrollbar {
        display: none;
    }

    .amsearch-result-tabs > .data.item.title {
        display: inline-block;
        float: none;
        vertical-align: bottom;
    }

    .amsearch-result-tabs > .data.item.title > .data.switch {
        padding: 10px 12px;
        white-space: nowrap;
    }

    .amsearch-result-tabs > .data.item.content {
        display: block;
        white-space: normal;
    }
}