/*
 * Header live-search (Amasty Xsearch rich autocomplete) — Porto header.
 *
 * Renders Amasty's product autocomplete inside the standard Porto
 * `#search_autocomplete` popup WITHOUT changing the Porto header DOM.
 * Mirrors the compact, scrollable image+name+price+add-to-cart dropdown
 * the live store shows. Scoped to `#search_autocomplete` so it never
 * affects the rest of the page.
 */

/* The popup container itself: scrollable, white, bordered, anchored under the input. */
#search_autocomplete {
    background: #fff;
    border: 1px solid #ccc;
    border-top: 0;
    max-height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
    /* Match live: no drop shadow, rounded bottom corners (0 0 20px 20px). */
    box-shadow: none;
    border-radius: 0 0 20px 20px;
    z-index: 1000;
    box-sizing: border-box;
    text-align: right;
    direction: rtl;
    /* Match live's vertical breathing room around the result list. */
    padding: 2px 0;
}

/*
 * Loading spinner — replicates the live store's
 * `<div data-amsearch-js="loader" class="amasty-xsearch-loader">`.
 * Sits in the search `.control` next to the input (the popup's positioning
 * context). Same 16x11 ajaxload GIF + same hide class the live KO widget uses,
 * so it shows while the autocomplete request is in flight, then hides on render.
 * Positioned just inside the (RTL) right edge so it does NOT reflow the header.
 */
.block-search .control .amasty-xsearch-loader {
    position: absolute;
    top: 50%;
    right: 44px;
    width: 16px;
    height: 11px;
    margin-top: -6px;
    z-index: 1001;
    background: url("data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA") no-repeat center center;
    pointer-events: none;
}

.block-search .control .amasty-xsearch-loader.amasty-xsearch-hide {
    display: none;
}

/* The loader is absolutely positioned inside .control; make it the anchor.
   This does not change the header's width or position. */
.block-search .control {
    position: relative;
}

#search_autocomplete .amsearch-results {
    display: block;
    width: 100%;
}

/* Section that holds the product grid — enable Amasty's flex layout. */
#search_autocomplete .amsearch-products-section {
    display: block;
    width: 100%;
    border-top: 0;
    padding: 0;
}

/* Block header ("منتجات قد تبحث عنها"). Live renders it as a plain title:
   transparent background, no border, right-aligned, 15px padding. (Amasty 1.27
   default gives it a grey bar + flex layout for its count/view-all controls,
   which live never shows — those controls are hidden further below.) */
#search_autocomplete .amsearch-block-header,
#search_autocomplete .amasty-xsearch-block-header {
    display: block;
    margin: 0;
    padding: 15px;
    font-weight: 700;
    background: transparent;
    border-bottom: 0;
    text-align: right;
}

#search_autocomplete .amsearch-link.-view-all {
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

/* The product list as a single vertical, scrollable column of compact rows. */
#search_autocomplete .amsearch-product-list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

/* Each result: image on the (RTL) right, details beside it.
   Padding/row height matched to live (desktop 5px 15px → ~169px rows). */
#search_autocomplete .amsearch-item.product-item {
    display: flex;
    flex-direction: row;
    /* Live top-aligns the details column with the image (align-items:normal). */
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 5px 15px;
    border-top: 1px solid #ececec;
    background: #fff;
    cursor: pointer;
}

#search_autocomplete .amsearch-item.product-item:first-child {
    border-top: 0;
}

#search_autocomplete .amsearch-item.product-item:hover,
#search_autocomplete .amsearch-item.product-item.selected {
    background: #f3f3f3;
}

/* Thumbnail — sized to match live (mobile ~127px, desktop 148px).
   Base is 120px; the desktop media query below bumps it to 148px. */
#search_autocomplete .amsearch-item .amsearch-image {
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
    display: block;
    position: relative;
    overflow: hidden;
}

/* Amasty emits inline width:320px + padding-bottom:100% aspect boxes; pin to size. */
#search_autocomplete .amsearch-item .amsearch-product-image-container,
#search_autocomplete .amsearch-item .product-image-wrapper {
    width: 120px !important;
    height: 120px !important;
    padding-bottom: 0 !important;
    display: block;
    position: relative;
    overflow: hidden;
}

#search_autocomplete .amsearch-item img,
#search_autocomplete .amsearch-item .product-image-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px !important;
    height: 120px !important;
    max-width: 120px;
    max-height: 120px;
    /* Match live: object-fit:fill (live stretches to box; Amasty default is contain). */
    object-fit: fill;
    display: block;
    margin: 0;
}

/* Details column (name + price + actions) */
#search_autocomplete .amsearch-item .product-item-details,
#search_autocomplete .amsearch-item .amsearch-description {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

#search_autocomplete .amsearch-item .product-item-link {
    display: block;
    font-size: 13px;
    font-weight: 400;
    /* Match live: 24px line-height, pure black (Amasty default 1.35/#222). */
    line-height: 24px;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* Price — match live EXACTLY (computed-style measured, desktop + mobile).
 *
 * LIVE renders the price-box as a plain BLOCK that shrinks to its content and
 * sits right-aligned under the product name (block child of the flex
 * `.amsearch-wrapper-inner` row, so it sizes to content, NOT full width):
 *   .price-box      -> display:block; margin:0 10px 0 0; width auto/content
 *   .old-price      -> inline-block; 13px/400; #a7a7a7; line-height:24px;
 *                      margin:0 2.79px 0 0 (the only gap between the two prices)
 *   .special-price  -> inline-block; 13px/400; #000; line-height:24px; no margin
 *   .special .price -> 20px/600/#000             .old .price -> 12.8px/600/#808080 line-through
 * In the RTL inline flow this puts the big black SPECIAL price first (right) and
 * the small grey strikethrough OLD price tucked tight to its left — one line.
 *
 * The upgrade's earlier override made `.price-box` an inline-flex row-reverse
 * with gap:6px and forced the children to display:flex; as a flex item inside
 * the flex `.amsearch-wrapper-inner` it STRETCHED to 343px (full width) and
 * shoved the prices to the far-left edge, away from the name — the misalignment
 * QA flagged. We revert to live's block/inline-block layout. */
#search_autocomplete .amsearch-item .price-box {
    display: block;
    width: auto;
    margin: 0 10px 0 0;
    padding: 0;
}

/* Children: inline-block so they sit on one line in the RTL flow (special first
   = right, old tucked left), content-sized. Override any inherited flex/weight.
   line-height:24px + font-weight:400 match live's measured span values. */
#search_autocomplete .amsearch-item .price-box .special-price,
#search_autocomplete .amsearch-item .price-box .old-price {
    display: inline-block !important;
    width: auto !important;
    flex: 0 0 auto !important;
    vertical-align: baseline;
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    padding: 0;
}

#search_autocomplete .amsearch-item .price-box .price-container,
#search_autocomplete .amsearch-item .price-box .price-wrapper {
    display: inline !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

/* Special / current price: live = 20px, 600, black; no margin. */
#search_autocomplete .amsearch-item .special-price {
    margin: 0;
    color: #000;
}

#search_autocomplete .amsearch-item .special-price .price {
    display: inline;
    font-size: 20px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
}

/* Regular / old strikethrough price: live = 12.8px, 600, grey, line-through;
   the 2.79px right margin is the only space between old and special (matches live). */
#search_autocomplete .amsearch-item .old-price {
    margin: 0 2.7859px 0 0;
    color: #a7a7a7;
}

#search_autocomplete .amsearch-item .old-price .price {
    display: inline;
    font-size: 12.8px;
    color: #808080;
    font-weight: 600;
    text-decoration: line-through;
}

/* Hide the textual price labels ("السعر العادي" / "سعر خاص") live never shows
   in the suggest row — Amasty emits them inside .price-label. */
#search_autocomplete .amsearch-item .price-box .price-label {
    display: none;
}

/* Actions row — live renders `.product-item-actions` as a horizontal flex
   holding `.actions-secondary` (compare + wishlist icons) next to
   `.actions-primary` (the add-to-cart). On the (RTL) row the icons sit to the
   LEFT of the "أضف" button, matching live's [compare][wishlist][أضف] order. */
#search_autocomplete .amsearch-item .product-item-actions {
    margin-top: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* Add-to-cart button — match live EXACTLY. Live keeps the full server-rendered
   label "أضف إلى السلة" in the DOM but renders the button as a 40x40 square with
   `overflow:hidden` + `white-space:normal`, so the label wraps and only the first
   word "أضف" is visible (the rest is clipped below the 40px box). Matching live's
   `white-space:normal` (not nowrap) makes the clip land on the word boundary
   ("أضف") instead of mid-word ("أضف إل"). bg #a88144 / #fff / radius 2px / 700. */
/* Add-to-cart button — scope to the PRIMARY action only (NOT the bare
   `.amsearch-button`, which also classes the wishlist/compare icon links).
   Force static flow (Amasty defaults it to position:absolute) so it sits inline
   in the flex actions row beside the [compare][heart] icons on BOTH viewports. */
#search_autocomplete .amsearch-item .product-item-actions .tocart,
#search_autocomplete .amsearch-item .actions-primary .amsearch-button,
#search_autocomplete .amsearch-item button.action.tocart {
    /* Static flow so it sits inline in the flex actions row (Amasty defaults to
       absolute). Force inline-block (Amasty sets inline-flex+align-items:center,
       which vertically centers the 3-line wrapped label and reveals the 2nd line
       "إلى"). inline-block top-aligns the span so the first line "أضف" shows and
       overflow:hidden clips the rest — exactly how LIVE renders it. */
    position: static !important;
    display: inline-block !important;
    text-align: center;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    font-size: 15.7px;
    font-weight: 700;
    padding: 0;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    white-space: normal;
}

/* The button's label span: inline-block + top-aligned (matching live) so the
   wrapped 3-line text clips to its first word "أضف". */
#search_autocomplete .amsearch-item .product-item-actions .tocart > span,
#search_autocomplete .amsearch-item .actions-primary .amsearch-button > span,
#search_autocomplete .amsearch-item button.action.tocart > span {
    display: inline-block;
    vertical-align: top;
    line-height: 40px;
}

/* The actions-primary / form wrappers hold only the (now static) button — let
   them shrink to content so the flex row packs [أضف] tight beside the icons. */
#search_autocomplete .amsearch-item .product-item-actions .actions-primary,
#search_autocomplete .amsearch-item .product-item-actions form.amasty-xsearch-form {
    display: inline-block;
    position: static;
    width: auto;
    margin: 0;
}

/* Wishlist + compare (`.actions-secondary`). Per client spec these show on BOTH
   desktop AND mobile (intentional deviation from live, which hides them on
   mobile). Lay them out as a horizontal icon row [compare][heart] next to the
   "أضف" button. */
#search_autocomplete .amsearch-item .product-item-actions .actions-secondary,
#search_autocomplete .amsearch-item .actions-secondary {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* The two icon links — compact 32x32 icon buttons. */
#search_autocomplete .amsearch-item .actions-secondary > a,
#search_autocomplete .amsearch-item .actions-secondary .towishlist,
#search_autocomplete .amsearch-item .actions-secondary .tocompare,
#search_autocomplete .amsearch-item .actions-secondary .amsearch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0;
    background: none;
    border: 0;
}

/*
 * CONSISTENT ICON DESIGN (QA): render the wishlist heart + compare icons with
 * the SAME glyphs LIVE uses — the Porto icon font (`porto-icons`): heart \e889,
 * compare \f83b, 18px, colour #333. The upgrade's Amasty Xsearch markup
 * (`.amsearch-button.-wishlist.-icon` / `.-compare.-icon`) ships its OWN icon
 * (SVG background mask) that looks different from live's heart. We suppress
 * Amasty's icon background and draw live's exact porto glyph via ::before so the
 * icon is identical on desktop AND mobile. The <a> is empty server-side, so the
 * ::before is the only visible content.
 */
#search_autocomplete .amsearch-item .actions-secondary .amsearch-button.-wishlist,
#search_autocomplete .amsearch-item .actions-secondary .amsearch-button.-compare,
#search_autocomplete .amsearch-item .actions-secondary .towishlist,
#search_autocomplete .amsearch-item .actions-secondary .tocompare {
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    color: #333;
}

#search_autocomplete .amsearch-item .actions-secondary .amsearch-button.-wishlist::before,
#search_autocomplete .amsearch-item .actions-secondary .towishlist::before {
    font-family: 'porto-icons';
    content: '\e889';
    font-size: 18px;
    line-height: 1;
    color: #333;
    font-weight: normal;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

#search_autocomplete .amsearch-item .actions-secondary .amsearch-button.-compare::before,
#search_autocomplete .amsearch-item .actions-secondary .tocompare::before {
    font-family: 'porto-icons';
    content: '\f83b';
    font-size: 18px;
    line-height: 1;
    color: #333;
    font-weight: normal;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

/* Suppress any inner SVG/img Amasty might inject so only our porto glyph shows. */
#search_autocomplete .amsearch-item .actions-secondary .amsearch-button.-icon > svg,
#search_autocomplete .amsearch-item .actions-secondary .amsearch-button.-icon > img,
#search_autocomplete .amsearch-item .actions-secondary .amsearch-button.-icon .amsearch-icon {
    display: none;
}

/* Amasty product labels can overflow the thumbnail; keep them contained. */
#search_autocomplete .amsearch-item .amasty-label-container,
#search_autocomplete .amsearch-item .amasty-label-image {
    max-width: 120px;
    max-height: 120px;
}

/* Desktop: match live's larger 148px thumbnails / bigger rows. */
@media only screen and (min-width: 768px) {
    #search_autocomplete {
        min-width: 360px;
    }

    #search_autocomplete .amsearch-item .amsearch-image {
        flex: 0 0 148px;
        width: 148px;
        height: 148px;
    }

    #search_autocomplete .amsearch-item .amsearch-product-image-container,
    #search_autocomplete .amsearch-item .product-image-wrapper {
        width: 148px !important;
        height: 148px !important;
    }

    #search_autocomplete .amsearch-item img,
    #search_autocomplete .amsearch-item .product-image-photo {
        width: 148px !important;
        height: 148px !important;
        max-width: 148px;
        max-height: 148px;
    }

    #search_autocomplete .amsearch-item .amasty-label-container,
    #search_autocomplete .amsearch-item .amasty-label-image {
        max-width: 148px;
        max-height: 148px;
    }
}

/*
 * Mobile (<=767px). Per the client spec the mobile rows MIRROR desktop:
 * image + name + price + [compare][heart][أضف]. (This intentionally deviates
 * from live, which hides compare/wishlist on mobile.) So we do NOT hide
 * `.actions-secondary` here; instead we lay the whole actions out as a flex row
 * and take the "أضف" button out of Amasty's absolute positioning so it flows
 * inline beside the icons instead of escaping the (RTL) left edge of the popup.
 *
 * Root cause of the earlier mobile button clip (measured): Amasty's module CSS
 * renders `.tocart` as position:absolute anchored to the right of its (width-0)
 * form, so it landed at the popup's left edge clipped to "إلى". Forcing static
 * flow inside the flex actions row fixes it and keeps the price visible.
 */
@media only screen and (max-width: 767px) {
    #search_autocomplete .amsearch-item .product-item-actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
    }

    #search_autocomplete .amsearch-item .product-item-actions .actions-primary,
    #search_autocomplete .amsearch-item .product-item-actions form.amasty-xsearch-form {
        display: block;
        position: static;
        width: auto;
        margin: 0;
    }

    /* Add-to-cart: take it out of absolute flow so it sits inline in the row.
       inline-block (not flex) so the label clips to "أضف" (see base rule). */
    #search_autocomplete .amsearch-item .product-item-actions .tocart,
    #search_autocomplete .amsearch-item .actions-primary .amsearch-button,
    #search_autocomplete .amsearch-item button.action.tocart {
        position: static !important;
        display: inline-block !important;
    }

    /* Show compare + wishlist on mobile too (client spec). */
    #search_autocomplete .amsearch-item .product-item-actions .actions-secondary,
    #search_autocomplete .amsearch-item .actions-secondary {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    /* Keep the details column from collapsing so name/price/actions stay laid
       out within it. */
    #search_autocomplete .amsearch-item .product-item-details,
    #search_autocomplete .amsearch-item .amsearch-description {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* No-result notice — mirror live's `.amsearch-products.-waste` message
   ("Your search returned no products.") so the dropdown matches live instead
   of staying hidden. Scoped to #search_autocomplete. */
#search_autocomplete .amsearch-products.-waste {
    display: block;
    padding: 20px 15px;
    font-size: 13px;
    color: #222;
    text-align: center;
}

/* T14: Match live — the live Xsearch dropdown heading is title-only.
   The upgraded Xsearch 1.27 header.phtml adds a result-count span (e.g. "(1197)")
   and a "View All (1182+)" link that live never shows. Hide them so the
   autocomplete heading matches live exactly. Scoped to #search_autocomplete so
   the full search-results page header (if any) is unaffected. */
#search_autocomplete .amsearch-block-header .amsearch-count,
#search_autocomplete .amsearch-title .amsearch-count {
    display: none !important;
}

#search_autocomplete .amsearch-block-header .amsearch-link.-view-all {
    display: none !important;
}

/*
 * T14 (re-fix): HEADING TITLE "منتجات قد تبحث عنها" size.
 *
 * QA rejection root cause: Amasty Xsearch 1.27 renders the popup heading as
 *   <p class="amsearch-block-header amsearch-collapsible-title">
 *       <span class="amsearch-title"> … </span></p>
 * and its bundled stylesheet sets .amsearch-title to ~1.8rem => 28.8px.
 * Live's OLDER Xsearch markup is a bare <p class="amasty-xsearch-block-header">
 * the theme renders at 13px. The previous fix only touched product name/price
 * fonts and never overrode the heading font-size, so 28.8px leaked through.
 *
 * Match live EXACTLY: title 13px / weight 700 / line-height 24px / black,
 * with 15px padding on the header block (live puts the 15px padding on the
 * heading element itself). Scoped to #search_autocomplete only.
 */
#search_autocomplete .amsearch-block-header,
#search_autocomplete .amasty-xsearch-block-header,
#search_autocomplete .amsearch-collapsible-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    color: #000;
    margin: 0;
    padding: 15px;
}

#search_autocomplete .amsearch-block-header .amsearch-title,
#search_autocomplete .amsearch-collapsible-title .amsearch-title,
#search_autocomplete .amsearch-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    color: #000;
    /* span sits inside the already-padded <p>; no extra box. */
    padding: 0;
    margin: 0;
}

/* =========================================================================
 * MOBILE-MENU search autocomplete (`#search_menu_autocomplete`).
 *
 * The in-menu search reuses the SAME standard mini-search + amasty-rich-suggest
 * mixin as the header, so it must get the SAME flat product-list styling. We
 * re-apply every header rule to the menu container, then anchor the popup under
 * the in-menu input (absolute, full-width inside the menu) so it never renders
 * as a floating overlay jumbled on top of the open menu panel — matching live.
 * ========================================================================= */
#search_menu_autocomplete {
    background: #fff;
    border: 1px solid #ccc;
    border-top: 0;
    max-height: 70vh;
    overflow-x: hidden;
    overflow-y: auto;
    /* Match live: no drop shadow. */
    box-shadow: none;
    z-index: 1000;
    box-sizing: border-box;
    text-align: right;
    direction: rtl;
    padding: 2px 0;
    /* Anchor under the in-menu input (the .control is the positioning context,
       set position:relative in mobile-menu-search-styles.phtml). Horizontal
       inset/width is governed by the `.ninjamenus-mobile-wrapper .search-autocomplete`
       rules in mobile-menu-search-styles.phtml so both stay in sync. */
    position: absolute;
    top: 100%;
    margin-top: 4px;
    border-radius: 4px;
}

#search_menu_autocomplete .amsearch-results {
    display: block;
    width: 100%;
}

#search_menu_autocomplete .amsearch-products-section {
    display: block;
    width: 100%;
    border-top: 0;
    padding: 0;
}

#search_menu_autocomplete .amsearch-block-header,
#search_menu_autocomplete .amasty-xsearch-block-header,
#search_menu_autocomplete .amsearch-collapsible-title {
    display: block;
    margin: 0;
    padding: 15px;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    color: #000;
    background: transparent;
    border-bottom: 0;
    text-align: right;
}

#search_menu_autocomplete .amsearch-block-header .amsearch-title,
#search_menu_autocomplete .amsearch-collapsible-title .amsearch-title,
#search_menu_autocomplete .amsearch-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    color: #000;
    padding: 0;
    margin: 0;
}

/* Hide the result-count and view-all controls live never shows. */
#search_menu_autocomplete .amsearch-block-header .amsearch-count,
#search_menu_autocomplete .amsearch-title .amsearch-count,
#search_menu_autocomplete .amsearch-block-header .amsearch-link.-view-all,
#search_menu_autocomplete .amsearch-link.-view-all {
    display: none !important;
}

#search_menu_autocomplete .amsearch-product-list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

#search_menu_autocomplete .amsearch-item.product-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 5px 15px;
    border-top: 1px solid #ececec;
    background: #fff;
    cursor: pointer;
}

#search_menu_autocomplete .amsearch-item.product-item:first-child {
    border-top: 0;
}

#search_menu_autocomplete .amsearch-item.product-item:hover,
#search_menu_autocomplete .amsearch-item.product-item.selected {
    background: #f3f3f3;
}

#search_menu_autocomplete .amsearch-item .amsearch-image {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    display: block;
    position: relative;
    overflow: hidden;
}

#search_menu_autocomplete .amsearch-item .amsearch-product-image-container,
#search_menu_autocomplete .amsearch-item .product-image-wrapper {
    width: 100px !important;
    height: 100px !important;
    padding-bottom: 0 !important;
    display: block;
    position: relative;
    overflow: hidden;
}

#search_menu_autocomplete .amsearch-item img,
#search_menu_autocomplete .amsearch-item .product-image-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px !important;
    height: 100px !important;
    max-width: 100px;
    max-height: 100px;
    object-fit: fill;
    display: block;
    margin: 0;
}

#search_menu_autocomplete .amsearch-item .product-item-details,
#search_menu_autocomplete .amsearch-item .amsearch-description {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

#search_menu_autocomplete .amsearch-item .product-item-link {
    display: -webkit-box;
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* Price — same live-matched block/inline-block layout as the header (see the
   header block above for the full measured rationale: block price-box that
   shrinks to content + right-aligns under the name; special 20px/600/#000 first
   in RTL, old 12.8px/600/#808080 line-through tucked 2.79px to its left). */
#search_menu_autocomplete .amsearch-item .price-box {
    display: block;
    width: auto;
    margin: 0 10px 0 0;
    padding: 0;
}

#search_menu_autocomplete .amsearch-item .price-box .special-price,
#search_menu_autocomplete .amsearch-item .price-box .old-price {
    display: inline-block !important;
    width: auto !important;
    flex: 0 0 auto !important;
    vertical-align: baseline;
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    padding: 0;
}

#search_menu_autocomplete .amsearch-item .price-box .price-container,
#search_menu_autocomplete .amsearch-item .price-box .price-wrapper {
    display: inline !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

#search_menu_autocomplete .amsearch-item .special-price {
    margin: 0;
    color: #000;
}

#search_menu_autocomplete .amsearch-item .special-price .price {
    display: inline;
    font-size: 20px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
}

#search_menu_autocomplete .amsearch-item .old-price {
    margin: 0 2.7859px 0 0;
    color: #a7a7a7;
}

#search_menu_autocomplete .amsearch-item .old-price .price {
    display: inline;
    font-size: 12.8px;
    color: #808080;
    font-weight: 600;
    text-decoration: line-through;
}

#search_menu_autocomplete .amsearch-item .price-box .price-label {
    display: none;
}

/* The in-menu popup is mobile-only. Mirror the header mobile row: lay the actions
   out as a flex row [compare][heart][أضف], taking the absolutely-positioned "أضف"
   button out of absolute flow so it stays inside the row instead of escaping the
   (RTL) left edge. (Client spec: show compare/wishlist on mobile too.) */
#search_menu_autocomplete .amsearch-item .product-item-actions {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

#search_menu_autocomplete .amsearch-item .product-item-actions .actions-primary,
#search_menu_autocomplete .amsearch-item .product-item-actions form.amasty-xsearch-form {
    display: inline-block;
    position: static;
    width: auto;
    margin: 0;
}

#search_menu_autocomplete .amsearch-item .product-item-actions .tocart > span,
#search_menu_autocomplete .amsearch-item .actions-primary .amsearch-button > span,
#search_menu_autocomplete .amsearch-item button.action.tocart > span {
    display: inline-block;
    vertical-align: top;
    line-height: 40px;
}

#search_menu_autocomplete .amsearch-item .product-item-details,
#search_menu_autocomplete .amsearch-item .amsearch-description {
    flex: 1 1 auto;
    min-width: 0;
    /* Stack name / price / actions vertically in the narrow in-menu column so the
       أضف button + icon row sit on their own line BELOW the price (not overlapping
       it). */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* price-box on its own line (block, content-width) then the actions row below —
   matches live's block price-box; must NOT be flex or it stretches full-width. */
#search_menu_autocomplete .amsearch-item .amsearch-description .price-box,
#search_menu_autocomplete .amsearch-item .product-item-details .price-box {
    display: block;
    width: auto;
}

/* Add-to-cart button — compact 40x40 "أضف". Scope to PRIMARY action so the bare
   `.amsearch-button` icon links are not forced to 40x40. */
#search_menu_autocomplete .amsearch-item .product-item-actions .tocart,
#search_menu_autocomplete .amsearch-item .actions-primary .amsearch-button,
#search_menu_autocomplete .amsearch-item button.action.tocart {
    position: static !important;
    display: inline-block !important;
    text-align: center;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    font-size: 15.7px;
    font-weight: 700;
    padding: 0 !important;
    height: 40px !important;
    line-height: 40px;
    overflow: hidden;
    white-space: normal;
}

/* Show compare + wishlist on the in-menu rows (client spec), as a 32x32 icon row
   with the SAME porto-icons glyphs live uses (heart \e889, compare \f83b). */
#search_menu_autocomplete .amsearch-item .product-item-actions .actions-secondary,
#search_menu_autocomplete .amsearch-item .actions-secondary {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

#search_menu_autocomplete .amsearch-item .actions-secondary > a,
#search_menu_autocomplete .amsearch-item .actions-secondary .towishlist,
#search_menu_autocomplete .amsearch-item .actions-secondary .tocompare,
#search_menu_autocomplete .amsearch-item .actions-secondary .amsearch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0;
    background: none;
    border: 0;
}

#search_menu_autocomplete .amsearch-item .actions-secondary .amsearch-button.-wishlist,
#search_menu_autocomplete .amsearch-item .actions-secondary .amsearch-button.-compare,
#search_menu_autocomplete .amsearch-item .actions-secondary .towishlist,
#search_menu_autocomplete .amsearch-item .actions-secondary .tocompare {
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    color: #333;
}

#search_menu_autocomplete .amsearch-item .actions-secondary .amsearch-button.-wishlist::before,
#search_menu_autocomplete .amsearch-item .actions-secondary .towishlist::before {
    font-family: 'porto-icons';
    content: '\e889';
    font-size: 18px;
    line-height: 1;
    color: #333;
    font-weight: normal;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

#search_menu_autocomplete .amsearch-item .actions-secondary .amsearch-button.-compare::before,
#search_menu_autocomplete .amsearch-item .actions-secondary .tocompare::before {
    font-family: 'porto-icons';
    content: '\f83b';
    font-size: 18px;
    line-height: 1;
    color: #333;
    font-weight: normal;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

#search_menu_autocomplete .amsearch-item .actions-secondary .amsearch-button.-icon > svg,
#search_menu_autocomplete .amsearch-item .actions-secondary .amsearch-button.-icon > img,
#search_menu_autocomplete .amsearch-item .actions-secondary .amsearch-button.-icon .amsearch-icon {
    display: none;
}

#search_menu_autocomplete .amsearch-item .amasty-label-container,
#search_menu_autocomplete .amsearch-item .amasty-label-image {
    max-width: 100px;
    max-height: 100px;
}

#search_menu_autocomplete .amsearch-products.-waste {
    display: block;
    padding: 20px 15px;
    font-size: 13px;
    color: #222;
    text-align: center;
}