.hmyt-ajax-search-wrapper { position: relative; font-family: inherit; width: 100%; } .hmyt-ajax-search-form { display: flex !important; align-items: center; overflow: hidden; padding: 15px; position: relative !important; z-index: 101; background: #fff; } .hmyt-ajax-search-input { flex-grow: 1; border: 1px solid #dee1e9ee; border-radius: 8px !important; padding: 10px 45px 10px 15px !important; font-size: 16px; outline: none; background: transparent; } .hmyt-ajax-search-input::-webkit-search-decoration, .hmyt-ajax-search-input::-webkit-search-cancel-button, .hmyt-ajax-search-input::-webkit-search-results-button, .hmyt-ajax-search-input::-webkit-search-results-decoration { -webkit-appearance:none; } .hmyt-ajax-search-button { position: absolute !important; top: 50% !important; transform: translateY(-50%); background-color: transparent !important; pointer-events: none; border: none !important; padding: 0 20px !important; cursor: pointer !important; display: flex !important; justify-content: center !important; height: 100%; color: #555; } .hmyt-ajax-search-clear svg { fill: #555; } .hmyt-ajax-search-results { background: #fff !important; border: 1px solid #e5e7eb; border-top: none; border-radius: 16px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01); max-height: 500px; overflow-y: auto; z-index: 102; display: none; padding: 8px 0; } .hmyt-results-list { list-style: none !important; margin: 0; padding: 0; } .hmyt-result-item { margin: 0; padding: 4px 8px; } .hmyt-result-card { display: flex; align-items: center; padding: 10px; text-decoration: none !important; color: #1f2937; border-radius: 10px; transition: background-color 0.15s ease; gap: 12px; border: none !important; } .hmyt-result-card:hover { opacity: .85; } .hmyt-card-thumbnail { flex-shrink: 0; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; position: relative; } .hmyt-card-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; } .hmyt-card-thumbnail:has(svg) { background-color: #e3e8ee; } .hmyt-card-placeholder { width: 100%; height: 100%; background-color: #e3e8ee; display: flex; align-items: center; justify-content: center; } .hmyt-card-placeholder svg { width: 20px; height: 20px; opacity: 0.9; } .hmyt-card-content { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; min-width: 0; gap: 2px; } .hmyt-card-title { font-size: 14px; font-weight: 500; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .hmyt-card-excerpt { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hmyt-card-price { flex-shrink: 0; margin: 0; display: flex; align-items: center; align-self: center; text-align: left; } .hmyt-card-price .woocommerce-Price-amount bdi, .hmyt-fs-card-price .woocommerce-Price-amount bdi, .hmyt-hp-price .woocommerce-Price-amount bdi { display: inline-flex; align-items: center; gap: 3px; } .hmyt-card-price .woocommerce-Price-currencySymbol, .hmyt-fs-card-price .woocommerce-Price-currencySymbol, .hmyt-hp-price .woocommerce-Price-currencySymbol { order: 9; } .hmyt-card-price .hmyt-hp-price, .hmyt-fs-card-price .hmyt-hp-price { align-items: flex-end; } .hmyt-view-all-item { padding: 8px; margin-top: 4px; border-top: 1px solid #fff; } .hmyt-view-all-link { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background-color: #e3e8ee; color: #4b5563; font-weight: 700; font-size: 14px; border-radius: 8px; text-decoration: none; transition: all 0.2s; } .hmyt-view-all-link:hover { background-color: #e5e7eb; color: #111827; } .hmyt-suggestions-loaded { padding: 15px; } .hmyt-suggestions-banner { margin-bottom: 15px; } .hmyt-suggestions-banner img { width: 100%; height: auto; border-radius: 8px !important; display: block; } .hmyt-suggestions-section { margin-bottom: 15px; } .hmyt-suggestions-section:last-child { margin-bottom: 0; } .hmyt-suggestions-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .hmyt-suggestions-title { font-size: 14px; font-weight: 600; color: #333; gap: 10px;} .hmyt-reset-recent { font-size: 12px; color: #6b7280; display: flex; cursor: pointer; align-items: center; justify-content: center; transition: all 0.2s ease; } .hmyt-reset-recent:hover { opacity: .6; } span.hmyt-suggestions-title > svg { width: 20px; height: 20px; color: #6b7280; } span.hmyt-suggestion-item > svg { width: 20px; height: 20px; color: #6b7280; } .hmyt-slider-nav > svg { width: 15px; height: 15px; } .hmyt-suggestions-section:last-child { padding-top: 10px; border-top: 1px solid #ececec; } .hmyt-suggestions-list { display: flex; flex-wrap: wrap; gap: 8px; } .hmyt-suggestion-item { color: #3c434a; padding: 4px 12px; background: #ebeef3; border: 1px solid #ebeef3; border-radius: 7px; font-size: 13px; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 5px; } .hmyt-suggestion-item svg { margin-right: auto; opacity: 0.7; width: 15px !important; } .hmyt-card-arrow { padding: 5px; border-radius: 50%; background: #e3e8ee70; } .hmyt-card-arrow > svg { opacity: .6; width: 14px; height: 14px; } .hmyt-ajax-search-submit { display: flex !important; flex-direction: column; justify-content: center !important; align-items: flex-end; } .hmyt-view-all-results a { display: block; text-align: center; padding: 12px 15px; background-color: #f8f9fa; color: #0073aa; font-weight: 600; text-decoration: none; font-size: 14px; } .hmyt-view-all-results a:hover { background-color: #f1f1f1; color: #005a87; } .hmyt-search-loader { display: flex; justify-content: center; align-items: center; padding: 30px 0; } body.hmyt-search-overlay-active { overflow: hidden !important; } .hmyt-search-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #00052a30; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); z-index: 2147483646; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; } .hmyt-ajax-search-wrapper.hmyt-modal-active .hmyt-search-overlay, .hmyt-search-overlay.hmyt-modal-active-teleport { opacity: 1; visibility: visible; pointer-events: auto; } .hmyt-ajax-search-results { text-align: right; } .hmyt-did-you-mean { padding: 15px; text-align: center; font-size: 14px; color: #555; border-bottom: 1px solid #eee; } .hmyt-as-skel-list { display: flex; flex-direction: column; padding: 0; margin: 0; border: 1px solid #e2e8f0; border-radius: 4px; overflow: hidden; background: #fff; } .hmyt-as-skel-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; } .hmyt-as-skel-row:not(:last-child) { border-bottom: 7px solid #f1f5f9; } .hmyt-as-skel-row.hmyt-as-skel-more { border-bottom: 7px solid #f1f5f9; list-style: none; pointer-events: none; } .hmyt-as-skel { display: block; background: #e6ebf2; border-radius: 6px; animation: hmytAjaxSearchSkelPulse 1.3s ease-in-out infinite; } .hmyt-as-skel-thumb { width: 46px; height: 46px; border-radius: 9px; flex-shrink: 0; } .hmyt-as-skel-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .hmyt-as-skel-title { width: 58%; height: 13px; } .hmyt-as-skel-meta { width: 34%; height: 11px; } .hmyt-as-skel-action { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; } @keyframes hmytAjaxSearchSkelPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hmyt-skeleton-list { padding: 0; margin: 0; list-style: none; } .hmyt-skeleton-item { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #eee; } .hmyt-skeleton-thumb { width: 50px; height: 50px; margin-left: 12px; background-color: #f0f0f0; border-radius: 4px; flex-shrink: 0; } .hmyt-skeleton-content { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; } .hmyt-skeleton-line { height: 10px; background-color: #f0f0f0; border-radius: 4px; } .hmyt-skeleton-line.title { width: 70%; height: 14px; } .hmyt-skeleton-line.meta { width: 40%; } .hmyt-skeleton-thumb, .hmyt-skeleton-line { background: #e6ebf2; animation: hmyt-skeleton-loading 1.3s ease-in-out infinite; } @keyframes hmyt-skeleton-loading { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hmyt-no-results { display: flex; justify-content: center; height: 60px; align-items: center; } .hmyt-card-arrow { display: flex; } .hmyt-search-trigger { position: relative; cursor: text; border: none; border-radius: 12px; background: #f0f0f0; display: flex; align-items: center; overflow: hidden; height: 46px; } .hmyt-search-trigger input { border: none; background: transparent; pointer-events: none; padding: 0 15px; padding-inline-end: 68px; width: 100%; color: #666; } .hmyt-trigger-icon { position: absolute; inset-block: 0; inset-inline-end: 0; padding: 0 15px; display: flex; align-items: center; justify-content: center; color: #555; pointer-events: none; opacity: 1; transition: opacity 0.22s ease; will-change: opacity; } .hmyt-trigger-shortcut { position: absolute; top: 50%; inset-inline-end: 10px; font-size: 10px; line-height: normal; white-space: normal; background-color: #e3e3e3; border-radius: 25px; padding: 4px 10px; color: #4b5563; font-weight: 700; letter-spacing: 0; pointer-events: none; opacity: 0; transform: translateY(-50%); transition: opacity 0.22s ease; will-change: opacity; } @media (min-width: 769px) { .hmyt-search-trigger:hover .hmyt-trigger-icon, .hmyt-search-trigger:focus-within .hmyt-trigger-icon { opacity: 0; } .hmyt-search-trigger:hover .hmyt-trigger-shortcut, .hmyt-search-trigger:focus-within .hmyt-trigger-shortcut { opacity: 1; } } .hmyt-search-modal-container { position: fixed; top: 15%; left: 50%; transform: translate(-50%, 10px) scale(0.95); width: 720px; max-width: 90%; background: #fff; z-index: 2147483647; border-radius: 10px; padding: 0; opacity: 0; visibility: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.15); display: flex; flex-direction: column; transition: opacity 0.25s ease-out, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); isolation: isolate; } .hmyt-ajax-search-wrapper.hmyt-modal-active .hmyt-search-modal-container, .hmyt-search-modal-container.hmyt-modal-active-teleport { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); } .hmyt-search-modal-container .hmyt-ajax-search-form { border: none; border-bottom: 1px solid #eee; border-radius: 16px 16px 0 0; box-shadow: none; } .hmyt-search-modal-container .hmyt-ajax-search-input { font-size: 16px; height: auto; } .hmyt-search-modal-container .hmyt-ajax-search-results { display: block !important; position: static; box-shadow: none; border: none; max-height: 65vh; border-radius: 0 0 16px 16px; padding-top: 0; opacity: 0; visibility: hidden; transition: opacity 0.15s ease-out, visibility 0.15s; } .hmyt-ajax-search-wrapper.hmyt-modal-active .hmyt-search-modal-container .hmyt-ajax-search-results, .hmyt-search-modal-container.hmyt-modal-active-teleport .hmyt-ajax-search-results { opacity: 1; visibility: visible; transition: opacity 0.3s ease-out 0.1s; } .hmyt-modal-close-btn { position: absolute; top: -40px; right: 0; color: #fff; cursor: pointer; background: rgb(235 238 243); border-radius: 50%; backdrop-filter: blur(4px); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: 0.2s; } .hmyt-modal-close-btn:hover { opacity: .65 } .hmyt-modal-close-btn svg { color: #54667a; width: 15px; height: 15px } .hmyt-modal-header-btns { position: absolute; top: -40px; right: 0; display: flex; gap: 8px; align-items: center; } .hmyt-modal-header-btns .hmyt-modal-close-btn { position: static; top: auto; right: auto; } .hmyt-modal-expand-btn { color: #fff; cursor: pointer; background: rgb(235 238 243); border-radius: 50%; width: 32px; height: 32px; display: flex; backdrop-filter: blur(4px); align-items: center; justify-content: center; transition: 0.2s; } .hmyt-modal-expand-btn:hover { opacity: .65 } .hmyt-modal-expand-btn svg { color: #54667a; width: 15px; height: 15px } @media (max-width: 768px) { .hmyt-search-modal-container { top: 10%; left: 50%; width: 90%; max-width: 90%; height: auto; border-radius: 12px; } .hmyt-search-modal-container .hmyt-ajax-search-results { max-height: 60vh; } .hmyt-modal-close-btn { top: -40px; right: 0; width: 30px; height: 30px; backdrop-filter: blur(4px); } .hmyt-modal-expand-btn { width: 30px; height: 30px; backdrop-filter: blur(4px); } } .hmyt-search-modal-container .hmyt-ajax-search-results::-webkit-scrollbar { width: 4px; } .hmyt-search-modal-container .hmyt-ajax-search-results::-webkit-scrollbar-track { background: transparent; } .hmyt-search-modal-container .hmyt-ajax-search-results::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.1); border-radius: 10px; transition: background-color 0.3s; } .hmyt-search-modal-container .hmyt-ajax-search-results::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.2); } .hmyt-search-modal-container .hmyt-ajax-search-results { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.1) transparent; } .hmyt-ajax-search-wrapper.hmyt-footer-instance { width: 0; height: 0; position: absolute; overflow: visible; } .hmyt-ajax-search-wrapper.hmyt-footer-instance .hmyt-search-trigger { display: none !important; } .hmyt-results-group { margin-bottom: 15px; } .hmyt-results-group:last-child { margin-bottom: 0; } .hmyt-group-header { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #9ca3af; padding: 8px 15px; background: #f9fafb; border-bottom: 1px solid #fff; border-top: 1px solid #fff; margin-bottom: 5px; } .hmyt-group-header svg { width: 15px; height: 15px; } .hmyt-results-group:first-child .hmyt-group-header { border-top: none; } .hmyt-view-all-wrapper { padding: 10px; border-top: 1px solid #e5e7eb; } .hmyt-view-all-item { border-top: none; margin-top: 0; padding: 0; } input.hmyt-ajax-search-input { font-family: inherit; } .hmyt-search-trigger input { font-family: inherit; } .hmyt-search-trigger > input { border: none !important; } .hmyt-suggested-section { margin-bottom: 20px; } .hmyt-slider-wrapper { position: relative; } .hmyt-slider-wrapper::before, .hmyt-slider-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 52px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.25s ease; } .hmyt-suggested-section .hmyt-slider-wrapper::before { right: 0; background: linear-gradient(to left, rgb(239 243 248) 8%, transparent); } .hmyt-slider-wrapper::after { left: 0; background: linear-gradient(to right, rgb(239 243 248) 8%, transparent); } .hmyt-slider-wrapper.has-prev::before { opacity: 1; } .hmyt-slider-wrapper.has-next::after { opacity: 1; } .hmyt-products-horizontal-list { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .hmyt-products-horizontal-list::-webkit-scrollbar { display: none; } .hmyt-horizontal-product-card { flex: 0 0 auto; width: 230px; border: 1px solid #ebeef3; border-radius: 20px; background: #ebeef3; scroll-snap-align: start; transition: all 0.2s ease; } .hmyt-horizontal-product-card:hover { border-color: #d1d5db; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .hmyt-hp-link { display: flex; align-items: center; padding: 10px 15px; text-decoration: none !important; gap: 12px; height: 100%; } .hmyt-hp-thumb { width: 50px; height: 50px; flex-shrink: 0; border-radius: 8px; overflow: hidden; } .hmyt-hp-thumb img { width: 100%; height: 100%; object-fit: cover; } .hmyt-hp-content { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .hmyt-hp-content > .hmyt-hp-title { font-size: 13px; font-weight: 500; color: #374151; margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .hmyt-hp-meta { font-size: 13px; font-weight: 700; color: #059669; } .hmyt-slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background-color: rgba(255, 255, 255, 0.92); border: 1px solid rgba(0, 0, 0, 0.07); color: #374151; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09) !important; z-index: 99; cursor: pointer; transition: all 0.2s; } .hmyt-slider-nav:hover { opacity: 1; transform: translateY(-50%) scale(1.1); } .hmyt-slider-next { left: 0; } .hmyt-slider-prev { right: 0; } .hmyt-slider-nav.hmyt-hidden { opacity: 0; visibility: hidden; pointer-events: none; display: none !important; } .hmyt-products-horizontal-list { overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; cursor: grab; } .hmyt-products-horizontal-list:active { cursor: grabbing; } .hmyt-products-horizontal-list { cursor: grab; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .hmyt-products-horizontal-list.hmyt-is-dragging { cursor: grabbing; } .hmyt-products-horizontal-list img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; pointer-events: none; } .hmyt-suggestions-section.hmyt-recent-searches { border-top: 1px solid #ececec; padding-top: 10px; } .hmyt-rich-placeholder { display: flex; align-items: center; justify-content: flex-start; width: 100%; padding-right: 15px; padding-inline-end: 68px; height: 100%; pointer-events: none; gap: 8px; } .hmyt-rp-text { font-size: 14px; color: #9ca3af; white-space: nowrap; } .hmyt-rp-logo-wrapper { display: flex; align-items: center; width: fit-content; } .hmyt-rp-logo-wrapper >.hmyt-rp-logo { height: 18px; width: auto; display: block; object-fit: contain; transition: all 0.3s ease; } @media (max-width: 480px) { .hmyt-rp-text { font-size: 13px; } } .hmyt-suggestion-item:hover { border-color: #d1d5db; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .hmyt-search-modal-container { user-select: none; } span.hmyt-hp-status { color: #9ca3af; font-size: 11px; background: #fff; padding: 2px 6px; border-radius: 4px; } .hmyt-hp-link > div .hmyt-card-placeholder { background: #fff; } body .hmyt-search-icon-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 4px; margin: 0; min-height: unset; cursor: pointer; color: inherit; line-height: 1; transition: opacity 0.2s ease; -webkit-tap-highlight-color: transparent; } body .hmyt-search-icon-btn:hover { opacity: 0.65; background: transparent; } body.dark .hmyt-ajax-search-form, body.dark .hmyt-ajax-search-results, body.dark .hmyt-search-modal-container { background: #262631 !important; border-color: #414150; } body.dark .hmyt-ajax-search-input { color: #fff; border-color: #414150; background: #353542; } body.dark .hmyt-view-all-wrapper { border-color: #585868; } body.dark .hmyt-search-trigger { background: #262631; border-color: #414150; } body.dark .hmyt-search-trigger input, body.dark .hmyt-trigger-icon { color: #bbb; } body.dark .hmyt-trigger-shortcut { background: #353542; color: #d1d5db; } body.dark .hmyt-ajax-search-button, body.dark .hmyt-ajax-search-clear svg, body.dark .hmyt-modal-close-btn { color: #ccc; fill: #ccc; } body.dark .hmyt-ajax-search-results, body.dark .hmyt-search-modal-container .hmyt-ajax-search-form, body.dark .hmyt-suggestions-section:last-child, body.dark .hmyt-view-all-item { border-color: #414150; } body.dark .hmyt-result-card { color: #e5e7eb; } body.dark .hmyt-card-title { color: #fff; } body.dark .hmyt-card-excerpt, body.dark .hmyt-card-price del, body.dark .hmyt-hp-price del { color: #9ca3af; } body.dark .hmyt-card-placeholder, body.dark .hmyt-hp-thumb, body.dark .hmyt-card-thumbnail { background-color: #353542; } body.dark .hmyt-card-arrow { background: #414150; } body.dark .hmyt-group-header { background: #353542; border-color: #353542; color: #ccc; } body.dark .hmyt-suggestions-section.hmyt-recent-searches { border-color: #414150; } body.dark .hmyt-suggestions-title { color: #fff; } body.dark .hmyt-suggestion-item { background: #353542; color: #e5e7eb; border-color: #353542; } body.dark .hmyt-suggestion-item:hover { background-color: #414150; } body.dark .hmyt-suggestions-loaded > div svg { color: #9ca3af; } body.dark .hmyt-horizontal-product-card { background: #353542; border-color: #353542; } body.dark .hmyt-horizontal-product-card:hover { border-color: #414150; background: #414150; } body.dark .hmyt-hp-title { color: #fff; } body.dark .hmyt-hp-link { color: #e5e7eb; } body.dark .hmyt-slider-nav { background: rgba(53, 53, 66, 0.92); color: #e5e7eb; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.07); } body.dark .hmyt-slider-wrapper::before { background: linear-gradient(to left, rgba(38, 38, 49, 0.95) 8%, transparent); } body.dark .hmyt-slider-wrapper::after { background: linear-gradient(to right, rgba(38, 38, 49, 0.95) 8%, transparent); } body.dark .hmyt-view-all-link { background-color: #353542; color: #fff; } body.dark .hmyt-view-all-link:hover { background-color: #414150; } body.dark .hmyt-search-modal-container .hmyt-ajax-search-results::-webkit-scrollbar-thumb { background-color: #414150; } body.dark .hmyt-search-modal-container .hmyt-ajax-search-results::-webkit-scrollbar-thumb:hover { background-color: #555; } body.dark .hmyt-skeleton-thumb, body.dark .hmyt-skeleton-line { background: #353542; } body.dark .hmyt-as-skel-list, body.dark .hmyt-as-skel-row { background: #1e1e27; } body.dark .hmyt-as-skel-list { border-color: #414150; } body.dark .hmyt-as-skel-row:not(:last-child) { border-bottom-color: #262631; } body.dark .hmyt-as-skel { background: #353542; } body.dark .hmyt-skeleton-item { border-bottom-color: #414150; } body.dark span.hmyt-hp-status { background: #262631; } body.dark .hmyt-hp-link > div .hmyt-card-placeholder { background-color: #262631; } .hmyt-hp-meta bdi, .hmyt-card-price bdi { display: inline-flex; align-items: center; gap: 4px; direction: rtl; } .hmyt-card-price del, .hmyt-card-price del .amount, .hmyt-card-price del bdi { text-decoration: line-through; } body .hmyt-hp-meta .amount { color: inherit; font-weight: inherit; } span.hmyt-card-price > del > .index-discount-pro { display: none; } .hmyt-hp-price { display: flex; flex-direction: column; gap: 2px; } .hmyt-variable-from { display: flex; align-items: center; gap: 4px; white-space: nowrap; } .hmyt-hp-old-price-wrapper { display: flex; align-items: center; gap: 5px; } .hmyt-hp-old-price-wrapper del.hmyt-hp-strike, .hmyt-hp-old-price-wrapper del.hmyt-hp-strike * { text-decoration: line-through !important; } .hmyt-hp-old-price-wrapper del.hmyt-hp-strike { font-size: 11px; color: #6b7280; display: inline-flex; align-items: center; } .hmyt-hp-old-price-wrapper del .woocommerce-Price-currencySymbol { display: none !important; } .hmyt-hp-discount-badge { background-color: var(--hmyt-ef-primary, #ee1844); color: #fff; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 4px; line-height: 1.6; display: inline-block; user-select: none; } body.dark .hmyt-hp-old-price-wrapper del.hmyt-hp-strike, body.dark .hmyt-hp-old-price-wrapper del.hmyt-hp-strike * { color: #9ca3af; text-decoration: line-through !important; } body.dark .hmyt-hp-discount-badge { background-color: #ff4f5d; } .hmyt-card-price .hmyt-hp-old-price-wrapper { gap: 4px; margin-inline-end: 6px; } .hmyt-card-price .hmyt-hp-old-price-wrapper del { margin: 0; opacity: 0.6; } .hmyt-rp-vslider { overflow: hidden; height: 22px; max-height: 22px; flex: 1; min-width: 0; } .hmyt-rp-vslider-track { display: flex; flex-direction: column; will-change: transform; width: 100%; } .hmyt-rp-vslider-item { height: 22px; min-height: 22px; max-height: 22px; display: flex; align-items: center; flex-shrink: 0; white-space: nowrap; overflow: hidden; } .hmyt-rp-vslider-item span { font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; display: block; } @media (max-width: 480px) { .hmyt-rp-vslider-item span { font-size: 13px; } } .hmyt-group-count { margin-inline-start: auto; flex-shrink: 0; font-size: 11px; font-weight: 600; color: #9ca3af; background: #fff; padding: 2px 9px; border-radius: 99px; line-height: normal; letter-spacing: 0.03em; } body.dark .hmyt-group-count { background: #414150; color: #9ca3af; } .hmyt-load-more-wrapper { padding: 10px 8px 12px; display: flex; align-items: center; justify-content: center; } .hmyt-search-modal-container .hmyt-load-more-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; min-width: fit-content; padding: 9px 15px; background: #fff; border: 1px solid #e2e8f0; border-radius: 30px; font-family: inherit; font-size: 13px; cursor: pointer; font-weight: 700; color: #334155; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease; line-height: 1.4; } .hmyt-search-modal-container .hmyt-load-more-btn svg { width: 16px; height: 16px; color: #64748b; transition: transform 0.25s ease, color 0.2s ease; } .hmyt-load-more-btn:hover:not(.hmyt-lm-loading) { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; } .hmyt-load-more-btn:hover:not(.hmyt-lm-loading) svg { color: #0f172a; } .hmyt-load-more-btn.hmyt-lm-loading { opacity: 0.72; cursor: wait; pointer-events: none; } .hmyt-load-more-btn.hmyt-lm-loading::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #e6ebf2; animation: hmytAjaxSearchSkelPulse 1.3s ease-in-out infinite; } .hmyt-lm-remaining { font-size: 11px; color: #94a3b8; font-weight: 600; margin-inline-end: 2px; } body.dark .hmyt-load-more-btn { border-color: #414150; color: #9ca3af; background: #1e1e27; box-shadow: none; } body.dark .hmyt-load-more-btn:hover:not(.hmyt-lm-loading) { background: #353542; border-color: #555568; color: #e5e7eb; } body.dark .hmyt-lm-remaining { color: #6b7280; } body.hmyt-fs-body-locked { overflow: hidden !important; } .hmyt-fs-overlay { --hmyt-fs-origin-x: 50%; --hmyt-fs-origin-y: 0%; position: fixed; inset: 0; z-index: 2147483647; background: rgb(239 243 248); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; transform: translate3d(0, 10px, 0) scale3d(0.985, 0.975, 1); transform-origin: center top; transition: opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.7s, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); direction: rtl; will-change: transform, opacity; contain: layout paint style; } .hmyt-fs-overlay.hmyt-fs-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateZ(0) scale3d(1, 1, 1); } .hmyt-fs-container { display: flex; flex-direction: column; height: 100%; max-width: 1600px; margin: 0 auto; padding: 0 24px; opacity: 0; transform: translate3d(0, 12px, 0) scale3d(0.995, 0.985, 1); transform-origin: center top; transition: opacity 0.2s ease, transform 0.3s ease; will-change: transform, opacity; } .hmyt-fs-overlay.hmyt-fs-active .hmyt-fs-container { animation: hmyt-fs-container-spring 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0.03s both; } @keyframes hmyt-fs-container-spring { 0% { opacity: 0; transform: translate3d(0, 12px, 0) scale3d(0.995, 0.985, 1); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .hmyt-fs-header { padding: 24px 0 16px; flex-shrink: 0; opacity: 0; transform: translate3d(0, -14px, 0) scaleX(0.94); transform-origin: center top; will-change: transform, opacity; } .hmyt-fs-overlay.hmyt-fs-active .hmyt-fs-header { animation: hmyt-fs-header-in 0.64s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both; } @keyframes hmyt-fs-header-in { 0% { opacity: 0; transform: translate3d(0, -14px, 0) scaleX(0.94); } 58% { opacity: 1; transform: translate3d(0, 1px, 0) scaleX(1.012); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scaleX(1); } } .hmyt-fs-search-bar { position: relative; display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid transparent; border-radius: 16px; padding: 6px 20px; padding-left: 10px; height: 60px; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; will-change: transform; } .hmyt-fs-overlay.hmyt-fs-active .hmyt-fs-search-bar { animation: hmyt-fs-searchbar-stretch 0.72s cubic-bezier(0.18, 1.16, 0.22, 1) 0.09s both; } @keyframes hmyt-fs-searchbar-stretch { 0% { transform: translate3d(0, -4px, 0) scale3d(0.88, 0.82, 1); border-radius: 24px; } 52% { transform: translate3d(0, 1px, 0) scale3d(1.018, 1.045, 1); border-radius: 18px; } 76% { transform: translate3d(0, 0, 0) scale3d(0.998, 0.992, 1); border-radius: 16px; } 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); border-radius: 16px; } } .hmyt-fs-search-bar:focus-within { background: #fff; border-color: #e5e7eb; border: 2px solid #e5e7eb; } .hmyt-fs-search-icon { color: #9ca3af; display: flex; align-items: center; flex-shrink: 0; } .hmyt-fs-search-input { flex: 1; border: none; box-shadow: none; outline: none; background: transparent; font-size: 17px; font-weight: 500; font-family: inherit; color: #0a0a0a; padding: 0; height: 100%; min-width: 0; } .hmyt-fs-search-input::-webkit-search-cancel-button, .hmyt-fs-search-input::-webkit-search-decoration { -webkit-appearance: none; } .hmyt-fs-container .hmyt-fs-close { display: inline-flex; align-items: center; gap: 5px; height: 37px; padding: 0 10px; background: #eff3f8; border-radius: 12px; cursor: pointer; color: #4b5563; font-family: inherit; border: navajowhite; font-size: 13px; font-weight: 500; flex-shrink: 0; min-height: fit-content; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; line-height: normal; } .hmyt-fs-close:hover { opacity: .85; } .hmyt-fs-close-kbd { font-family: inherit; font-size: 10.5px; font-weight: 600; padding: 3px 7px; background: #ffffff; border-radius: 5px; color: #6b7280; line-height: 1; } .hmyt-fs-close-x { display: none; width: 18px; height: 18px; } .hmyt-fs-clear { display: none !important; } .hmyt-fs-rich-placeholder { position: absolute; top: 0; bottom: 0; right: 50px; left: 130px; display: flex; align-items: center; pointer-events: none; gap: 8px; overflow: hidden; } .hmyt-fs-rich-placeholder .hmyt-rp-text { font-size: 15px; color: #9ca3af; } .hmyt-fs-rich-placeholder .hmyt-rp-logo { height: 20px; width: auto; } .hmyt-fs-rich-placeholder .hmyt-rp-vslider { height: 22px; max-height: 22px; flex: 1; min-width: 0; overflow: hidden; } .hmyt-fs-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0 80px; scrollbar-width: none; -ms-overflow-style: none; opacity: 0; transform: translate3d(0, 18px, 0); will-change: transform, opacity; } .hmyt-fs-body::-webkit-scrollbar { display: none; width: 0; height: 0; } .hmyt-fs-overlay.hmyt-fs-active .hmyt-fs-body { animation: hmyt-fs-body-in 0.58s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both; } @keyframes hmyt-fs-body-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: reduce) { .hmyt-fs-overlay, .hmyt-fs-container, .hmyt-fs-header, .hmyt-fs-search-bar, .hmyt-fs-body { animation: none !important; transition-duration: 0.01ms !important; transform: none !important; clip-path: none !important; } .hmyt-fs-overlay.hmyt-fs-active, .hmyt-fs-overlay.hmyt-fs-active .hmyt-fs-container, .hmyt-fs-overlay.hmyt-fs-active .hmyt-fs-header, .hmyt-fs-overlay.hmyt-fs-active .hmyt-fs-body { opacity: 1; } } .hmyt-fs-content { overflow: hidden; } .hmyt-fs-results-body { display: flex; gap: 16px; align-items: flex-start; } .hmyt-fs-results-body > .hmyt-fs-content { flex: 1; min-width: 0; } .hmyt-fs-sidebar { display: none; width: 210px; flex-shrink: 0; position: sticky; top: 0; background: #fff; border-radius: 16px; padding: 16px 18px; } .hmyt-fs-sidebar.is-visible { display: block; } .hmyt-fs-sidebar-title { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 12px; display: flex; align-items: center; gap: 6px; } .hmyt-fs-sidebar-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 10px 0; border-top: 1px solid #f0f0f0; user-select: none; gap: 10px; } .hmyt-fs-sidebar-toggle:first-of-type { border-top: none; padding-top: 0; } .hmyt-fs-sidebar-toggle-label { font-size: 13px; font-weight: 500; color: #374151; flex: 1; } @media (max-width: 768px) { .hmyt-fs-sidebar { display: none !important; } .hmyt-fs-results-body { gap: 0; } } .hmyt-fs-tabs-wrapper { margin-bottom: 22px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .hmyt-fs-tabs-wrapper::-webkit-scrollbar { display: none; width: 0; height: 0; } .hmyt-fs-tabs { position: relative; display: inline-flex; gap: 2px; background: #fff; padding: 5px; border-radius: 14px; min-width: max-content; } .hmyt-fs-tabs::before { content: ''; position: absolute; top: 5px; height: calc(100% - 10px); right: var(--hmyt-fs-tab-x, 5px); width: var(--hmyt-fs-tab-w, 0); background: #eff3f8; border-radius: 10px; transition: right 0.36s cubic-bezier(0.5, 0.05, 0.2, 1), width 0.36s cubic-bezier(0.5, 0.05, 0.2, 1), opacity 0.2s ease; z-index: 0; opacity: 0; pointer-events: none; } .hmyt-fs-tabs.has-indicator::before { opacity: 1; } .hmyt-fs-container .hmyt-fs-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: unset; padding: 4px 14px; background: transparent; border: none; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 500; line-height: normal; color: #6b7280; cursor: pointer; white-space: nowrap; transition: color 0.22s ease; } .hmyt-fs-tab:hover:not(.is-active) {color: #111827;background: transparent;} .hmyt-fs-tab.is-active { color: #0a0a0a; font-weight: 600; } .hmyt-fs-tab-count { font-size: 11px; font-weight: 500; height: 20px; border-radius: 10px; padding: 0 8px; background: #eff3f8; color: #262631; display: flex; font-family: inherit; transition: color 0.22s ease; align-items: center; justify-content: center; } .hmyt-fs-tab.is-active .hmyt-fs-tab-count {color: #ffffff;background: #0d59f1;} .hmyt-fs-tabs-skel { display: inline-flex; gap: 6px; background: #fff; padding: 5px; border-radius: 14px; } .hmyt-fs-tab-skel { width: 88px; height: 34px; border-radius: 10px; } .hmyt-fs-product-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; min-height: 38px; } .hmyt-fs-tabs-filter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; overflow-x: auto; overflow-y: visible; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .hmyt-fs-tabs-filter-row::-webkit-scrollbar { display: none; } .hmyt-fs-tabs-filter-row .hmyt-fs-tabs-wrapper { margin-bottom: 0; flex: none; flex-shrink: 0; min-width: max-content; overflow-x: visible; overflow-y: visible; } .hmyt-fs-tabs-filter-row .hmyt-fs-product-filters { margin-bottom: 0; min-height: auto; flex-wrap: nowrap; flex-shrink: 0; } @media (max-width: 768px) { .hmyt-fs-tabs-filter-row { flex-wrap: nowrap; gap: 8px; } .hmyt-fs-tabs-filter-row .hmyt-fs-product-filters { width: auto; min-height: auto; flex-shrink: 0; } } .hmyt-fs-filter-label { font-size: 13px; font-weight: 500; color: #6b7280; display: inline-flex; align-items: center; gap: 6px; } .hmyt-fs-filters-desktop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .hmyt-fs-sort-options { display: inline-flex; align-items: center; gap: 2px; background: #fff; padding: 5px 10px; border-radius: 14px; } .hmyt-fs-container .hmyt-fs-sort-opt { display: inline-flex; align-items: center; padding: 3px 13px; background: transparent; border: none; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 500; color: #6b7280; min-height: unset; cursor: pointer; transition: color 0.18s ease, background 0.18s ease; white-space: nowrap; line-height: normal; } .hmyt-fs-sort-opt:hover:not(.is-active) { color: #111827; background: rgba(0, 0, 0, 0.03); } .hmyt-fs-sort-opt.is-active { color: #0d59f1; background: rgba(13, 89, 241, 0.09); font-weight: 600; } .hmyt-fs-filter-sep { width: 1px; height: 22px; background: #e5e7eb; } .hmyt-fs-stock-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 13px; color: #374151; font-weight: 500; } .hmyt-fs-stock-toggle input { display: none; } .hmyt-fs-stock-sw { width: 32px; height: 18px; background: transparent; border: 2px solid #9ca3af; border-radius: 99px; position: relative; transition: background 0.2s ease; flex-shrink: 0; } .hmyt-fs-stock-sw::after { content: ''; position: absolute; width: 8px; height: 8px; background: #9ca3af; border-radius: 15px; top: 3px; right: calc(100% - 12px); transition: right 0.24s cubic-bezier(0.4, 0, 0.2, 1), background 0.22s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } .hmyt-fs-stock-toggle input:checked + .hmyt-fs-stock-sw { background: #0d59f1; } .hmyt-fs-stock-toggle input:checked + .hmyt-fs-stock-sw::after { right: 3px; background: #fff; } .hmyt-fs-stock-sw.is-on { background: #0d59f1; border-color: #0d59f1; } .hmyt-fs-stock-sw.is-on::after { right: 3px; background: #fff; } body.dark .hmyt-fs-stock-sw.is-on { background: #4d8bff; } .hmyt-fs-filters-mobile { display: none; gap: 10px; width: 100%; } .hmyt-fs-mobile-footer .hmyt-fs-mobile-filter-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: #fff; border: 2px solid #e5e7eb; border-radius: 12px; font-family: inherit; font-size: 13px; font-weight: 600; color: #374151; min-height: unset; cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease; position: relative; } .hmyt-fs-mobile-filter-btn svg { width: 16px; height: 16px; opacity: 0.75; } .hmyt-fs-mobile-filter-btn:hover { border-color: #d1d5db; } .hmyt-fs-mobile-filter-btn.has-value { border-color: #0d59f1; color: #0d59f1; } .hmyt-fs-mobile-filter-btn.has-value svg { opacity: 1; } .hmyt-fs-mobile-filter-btn .hmyt-fs-mfb-dot { min-width: 15px; height: 15px; padding: 0 3px; background: #0d59f1; border-radius: 99px; display: none; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; line-height: 1; box-sizing: border-box; z-index: 2; font-family: inherit; pointer-events: none; } .hmyt-fs-mobile-filter-btn.has-value .hmyt-fs-mfb-dot { display: flex; } .hmyt-fs-mobile-filter-btn.has-value .hmyt-fs-mfb-dot:empty { min-width: 7px; height: 7px; padding: 0; top: 5px; right: 5px; border-radius: 50%; background-color: #0d59f1; font-size: 0; } @media (max-width: 768px) { .hmyt-fs-filters-desktop { display: none; } } .hmyt-fs-mobile-footer { display: none; flex-shrink: 0; gap: 8px; background: rgb(239, 243, 248); border-top: 1px solid rgba(0, 0, 0, 0.06); padding: 10px 14px 14px; } @keyframes hmyt-fs-footer-in { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (max-width: 768px) { .hmyt-fs-mobile-footer.is-visible { display: flex; animation: hmyt-fs-footer-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) both; } .hmyt-fs-mobile-footer .hmyt-fs-mobile-filter-btn { flex: 1; height: 46px; border-radius: 12px; font-size: 13px; gap: 7px; } } body.dark .hmyt-fs-mobile-footer { background: rgba(13, 13, 17, 0.98); border-top-color: #2e2e3a; } @keyframes hmyt-fs-pop-in { 0% { opacity: 0; transform: scale(0.97); } 55% { opacity: 1; transform: scale(1.012); } 100% { opacity: 1; transform: scale(1); } } .hmyt-fs-product-filters.hmyt-animating { animation: none; } .hmyt-fs-sheet-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42); opacity: 0; visibility: hidden; transition: opacity 0.26s ease, visibility 0.26s; z-index: 10; display: flex; align-items: flex-end; justify-content: center; } .hmyt-fs-sheet-overlay.is-open { opacity: 1; visibility: visible; } .hmyt-fs-sheet { width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 12px 20px 28px; transform: translateY(100%); transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1); direction: rtl; max-height: 75vh; overflow-y: auto; scrollbar-width: none; } .hmyt-fs-sheet::-webkit-scrollbar { display: none; } .hmyt-fs-sheet-overlay.is-open .hmyt-fs-sheet { transform: translateY(0); } .hmyt-fs-sheet-handle { width: 40px; height: 4px; background: #d1d5db; border-radius: 99px; margin: 0 auto 18px; } .hmyt-fs-sheet-title { font-size: 16px; font-weight: 700; color: #0a0a0a; margin: 0 0 16px; } .hmyt-fs-sheet-options { display: flex; flex-direction: column; gap: 8px; } .hmyt-fs-sheet-options .hmyt-fs-sheet-option { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: transparent; border: 1.5px solid #ececec; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 500; color: #0a0a0a; cursor: pointer; text-align: right; transition: border-color 0.18s ease, background 0.18s ease; } .hmyt-fs-sheet-option:hover { border-color: #d1d5db; } .hmyt-fs-sheet-option.is-active { border-color: #0d59f1; background: rgba(13, 89, 241, 0.05); color: #0d59f1; font-weight: 600; } .hmyt-fs-sheet-option .hmyt-fs-check { width: 18px; height: 18px; color: #0d59f1; opacity: 0; transition: opacity 0.18s; } .hmyt-fs-sheet-option.is-active .hmyt-fs-check { opacity: 1; } .hmyt-fs-sheet-filter-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px; border: 1.5px solid #ececec; border-radius: 12px; } .hmyt-fs-sheet-filter-row > span:first-child { font-size: 14px; font-weight: 500; color: #0a0a0a; } .hmyt-fs-section { margin-bottom: 38px; } .hmyt-fs-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; } .hmyt-fs-section-title { font-size: 18px; font-weight: 700; color: #0a0a0a; margin: 0; display: flex; align-items: baseline; gap: 10px; letter-spacing: -0.01em; } .hmyt-fs-section-count { font-size: 12px; font-weight: 500; color: #9ca3af; } .hmyt-fs-container .hmyt-fs-section-view-all { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #fff; border: none; border-radius: 10px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #374151; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; white-space: nowrap; line-height: normal; } .hmyt-fs-container .hmyt-fs-section-view-all:hover { opacity: .85; background: #fff; } .hmyt-fs-section-view-all svg { transition: transform 0.2s ease; } .hmyt-fs-section-view-all:hover svg { transform: translateX(-3px); } .hmyt-fs-h-scroll-wrap { margin: 0 -4px; padding: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .hmyt-fs-h-scroll-wrap::-webkit-scrollbar { display: none; width: 0; height: 0; } .hmyt-fs-h-list { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; } .hmyt-fs-h-list .hmyt-fs-card { flex: 0 0 200px; max-width: 200px; scroll-snap-align: start; } .hmyt-fs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: #eff3f8; border-radius: 12px; overflow: hidden; } @media (max-width: 1024px) { .hmyt-fs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .hmyt-fs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { } .hmyt-fs-card { position: relative; background: #fff; border: none; border-radius: 10px; overflow: visible; padding: 10px; display: flex; margin-bottom: 0; flex-direction: column; min-width: 0; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .hmyt-fs-card-title, .hmyt-fs-card-excerpt { overflow-wrap: anywhere; word-break: break-word; } .hmyt-fs-card:hover { opacity: .85; } .hmyt-fs-card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; flex: 1; } .hmyt-fs-card-thumb { width: 100%; aspect-ratio: 1 / 1; background: #fff; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .hmyt-fs-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .hmyt-fs-card:hover .hmyt-fs-card-thumb img { transform: scale(1.05); } .hmyt-fs-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #eff3f8; color: #d1d5db; } .hmyt-fs-card-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 2px; } .hmyt-fs-card-title { font-size: 13.5px; font-weight: 600; color: #0a0a0a; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.18s ease; } .hmyt-fs-card:hover .hmyt-fs-card-title { color: #000; } .hmyt-fs-card-excerpt { font-size: 12px; color: #6b7280; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hmyt-fs-card-footer { padding: 6px 2px 0; text-align: left; } .hmyt-fs-card-price { font-size: 14px; font-weight: 700; display: block; } .hmyt-fs-card-skel { animation: none; pointer-events: none; } .hmyt-fs-card-skel:hover { transform: none; } .hmyt-fs-card-img-skel { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; margin-bottom: 10px; } .hmyt-fs-card-line { height: 12px; border-radius: 6px; margin-bottom: 7px; } .hmyt-fs-card-line.title { width: 88%; height: 13px; } .hmyt-fs-card-line.title-sm { width: 60%; height: 13px; } .hmyt-fs-card-line.meta { width: 45%; height: 11px; margin-top: 4px; } .hmyt-skel { background: #e6ebf2; animation: hmytFsSkelPulse 1.3s ease-in-out infinite; border-radius: 6px; } @keyframes hmytFsSkelPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hmyt-fs-end { text-align: center; padding: 36px 0 16px; color: #9ca3af; font-size: 12px; letter-spacing: 0.04em; font-weight: 500; } .hmyt-fs-empty { text-align: center; padding: 80px 20px; color: #6b7280; } .hmyt-fs-empty svg { color: #d4d4d4; margin-bottom: 16px; } .hmyt-fs-empty p { font-size: 16px; font-weight: 600; color: #374151; margin: 0 0 6px; } .hmyt-fs-empty small { font-size: 13px; color: #9ca3af; } .hmyt-fs-suggestions .hmyt-suggestions-loaded { padding: 0; } .hmyt-fs-suggestions { padding: 8px 4px; } @media (max-width: 768px) { .hmyt-fs-container { padding: 0 14px; } .hmyt-fs-header { padding: 14px 0 12px; } .hmyt-fs-search-bar { height: 52px; padding: 5px 16px 5px 5px; gap: 12px; } .hmyt-fs-search-input { font-size: 15.5px; } .hmyt-fs-rich-placeholder { right: 44px; left: 60px; } .hmyt-fs-close { width: 42px; height: 42px; padding: 0; justify-content: center; gap: 0; } .hmyt-fs-close-label, .hmyt-fs-close-kbd { display: none; } .hmyt-fs-close-x { display: block; } .hmyt-fs-section-title { font-size: 15px; } .hmyt-fs-section-view-all { font-size: 11.5px; padding: 7px 11px; } .hmyt-fs-tab { padding: 8px 14px; font-size: 12.5px; } .hmyt-fs-tabs { padding: 4px; } .hmyt-fs-tabs::before { top: 4px; height: calc(100% - 8px); } } body.dark .hmyt-fs-overlay { background: rgba(13, 13, 17, 0.985); } body.dark .hmyt-fs-search-bar { background: #1a1a22; } body.dark .hmyt-fs-search-bar:focus-within { background: #20202b; border-color: #2e2e3a; box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 4px rgba(255,255,255,0.03); } body.dark .hmyt-fs-search-input { color: #fff; } body.dark .hmyt-fs-search-icon { color: #6b7280; } body.dark .hmyt-fs-rich-placeholder .hmyt-rp-text { color: #6b7280; } body.dark .hmyt-fs-close { background: #262631; border-color: #2e2e3a; color: #d1d5db; } body.dark .hmyt-fs-close:hover { background: #2e2e3a; border-color: #3a3a48; color: #fff; } body.dark .hmyt-fs-close-kbd { background: #1a1a22; color: #9ca3af; } body.dark .hmyt-fs-tabs { background: #1a1a22; } body.dark .hmyt-fs-tabs::before { background: #2e2e3a; box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04); } body.dark .hmyt-fs-tab { color: #9ca3af; } body.dark .hmyt-fs-tab:hover:not(.is-active) { color: #e5e7eb; } body.dark .hmyt-fs-tab.is-active { color: #fff; } body.dark .hmyt-fs-tab-count { color: #6b7280; } body.dark .hmyt-fs-tab.is-active .hmyt-fs-tab-count { color: #d1d5db; } body.dark .hmyt-fs-filter-label { color: #9ca3af; } body.dark .hmyt-fs-filters-desktop .hmyt-fs-sort-options { background: #1a1a22; } body.dark .hmyt-fs-sort-opt { color: #9ca3af; } body.dark .hmyt-fs-sort-opt:hover:not(.is-active) { color: #fff; background: rgba(255,255,255,0.04); } body.dark .hmyt-fs-sort-opt.is-active { color: #6ea1ff; background: rgba(110, 161, 255, 0.14); } body.dark .hmyt-fs-filter-sep { background: #2e2e3a; } body.dark .hmyt-fs-stock-toggle { color: #d1d5db; } body.dark .hmyt-fs-stock-sw { background: #2e2e3a; } body.dark .hmyt-fs-stock-toggle input:checked + .hmyt-fs-stock-sw { background: #4d8bff; } body.dark .hmyt-fs-mobile-filter-btn { background: #1a1a22; border-color: #2e2e3a; color: #d1d5db; } body.dark .hmyt-fs-mobile-filter-btn:hover { border-color: #3a3a48; } body.dark .hmyt-fs-mobile-filter-btn.has-value { border-color: #6ea1ff; color: #6ea1ff; } body.dark .hmyt-fs-mobile-filter-btn .hmyt-fs-mfb-dot { background: #6ea1ff; } body.dark .hmyt-fs-section-title { color: #fff; } body.dark .hmyt-fs-section-count { color: #6b7280; } body.dark .hmyt-fs-section-view-all { background: #1a1a22; color: #d1d5db; } body.dark .hmyt-fs-section-view-all:hover { background: #2e2e3a; color: #fff; } body.dark .hmyt-fs-card-thumb { background: #1a1a22; } .hmyt-fs-grid .hmyt-fs-card { border-radius: 0; } .hmyt-fs-grid .hmyt-fs-card:first-child { border-top-right-radius: 12px; } .hmyt-fs-grid .hmyt-fs-card:last-child { border-bottom-left-radius: 12px; } body.dark .hmyt-fs-grid { background: #1a1a22; } body.dark .hmyt-fs-card-placeholder { background: #1a1a22; color: #3a3a40; } body.dark .hmyt-fs-card-title { color: #fff; } body.dark .hmyt-fs-card:hover .hmyt-fs-card-title { color: #fff; } body.dark .hmyt-fs-card-excerpt { color: #9ca3af; } body.dark .hmyt-fs-end { color: #6b7280; } body.dark .hmyt-fs-empty p { color: #d1d5db; } body.dark .hmyt-skel { background: #353542; } body.dark .hmyt-fs-sheet { background: #1a1a22; } body.dark .hmyt-fs-sheet-title { color: #fff; } body.dark .hmyt-fs-sheet-option { border-color: #2e2e3a; color: #d1d5db; } body.dark .hmyt-fs-sheet-option:hover { border-color: #3a3a48; } body.dark .hmyt-fs-sheet-option.is-active { border-color: #6ea1ff; background: rgba(110, 161, 255, 0.1); color: #6ea1ff; } body.dark .hmyt-fs-sheet-option .hmyt-fs-check { color: #6ea1ff; } body.dark .hmyt-fs-sheet-filter-row { border-color: #2e2e3a; } body.dark .hmyt-fs-sheet-filter-row > span:first-child { color: #fff; } body.dark .hmyt-fs-sheet-handle { background: #3a3a48; } body.dark .hmyt-fs-sidebar { background: #1a1a22; } body.dark .hmyt-fs-sidebar-title { color: #6b7280; } body.dark .hmyt-fs-sidebar-toggle { border-top-color: #2e2e3a; } body.dark .hmyt-fs-sidebar-toggle-label { color: #d1d5db; } .hmyt-fs-brands-section { margin-bottom: 22px; } .hmyt-fs-brands-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .hmyt-fs-brand-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fff; border: none; border-radius: 14px; text-decoration: none !important; color: #374151; font-size: 13px; font-weight: 500; transition: border-color 0.15s ease, background 0.15s ease; } .hmyt-fs-brand-chip:hover { border-color: #d1d5db; background: #f9fafb; opacity: 1; } .hmyt-fs-brand-chip svg { color: #9ca3af; flex-shrink: 0; } .hmyt-fs-brand-count { font-size: 11px; color: #262631; background: #eff3f8; padding: 2px 7px; border-radius: 99px; line-height: 1.5; } body.dark .hmyt-fs-brand-chip { background: #1a1a22; border-color: #2e2e3a; color: #d1d5db; } body.dark .hmyt-fs-brand-chip:hover { background: #2e2e3a; border-color: #3a3a48; } body.dark .hmyt-fs-brand-count { background: #2e2e3a; color: #6b7280; } .hmyt-fs-active-filter-inner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #0d59f1; border-radius: 14px; margin-bottom: 14px; } .hmyt-fs-active-filter-inner.hmyt-anim { transform-origin: center right; animation: hmyt-fs-pop-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; } .hmyt-fs-active-filter-icon { color: #0d59f1; display: flex; flex-shrink: 0; opacity: 0.75; } .hmyt-fs-active-filter-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hmyt-fs-active-filter-label { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; } .hmyt-fs-active-filter-name { font-size: 13px; font-weight: 600; color: #0d59f1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hmyt-fs-active-filter-inner .hmyt-fs-active-filter-clear { background: #e9f0fe; border: none; cursor: pointer; color: #0d59f1; display: flex; min-height: unset; align-items: center; justify-content: center; padding: 5px; border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; flex-shrink: 0; } .hmyt-fs-active-filter-clear:hover { color: #ef4444; background: rgba(239, 68, 68, 0.08); } body.dark .hmyt-fs-active-filter-inner { background: rgba(13, 89, 241, 0.12); border-color: rgba(78, 120, 255, 0.22); } body.dark .hmyt-fs-active-filter-name { color: #6ea1ff; } body.dark .hmyt-fs-active-filter-clear:hover { color: #f87171; background: rgba(239, 68, 68, 0.12); } .hmyt-fs-slider-wrapper { position: relative; } .hmyt-fs-slider-wrapper .hmyt-fs-h-scroll-wrap { margin: 0; } .hmyt-fs-slider-wrapper .hmyt-fs-slider-next { left: 0; } .hmyt-fs-slider-wrapper .hmyt-fs-slider-prev { right: 0; } .hmyt-fs-slider-wrapper::before, .hmyt-fs-slider-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.25s ease; } .hmyt-fs-slider-wrapper::before { right: 0; background: linear-gradient(to left, rgba(239, 243, 248, 0.85) 8%, transparent); } .hmyt-fs-slider-wrapper::after { left: 0; background: linear-gradient(to right, rgba(239, 243, 248, 0.85) 8%, transparent); } .hmyt-fs-slider-wrapper.has-prev::before { opacity: 1; } .hmyt-fs-slider-wrapper.has-next::after { opacity: 1; } body.dark .hmyt-fs-slider-wrapper::before { background: linear-gradient(to left, rgba(13, 13, 17, 0.82) 8%, transparent); } body.dark .hmyt-fs-slider-wrapper::after { background: linear-gradient(to right, rgba(13, 13, 17, 0.82) 8%, transparent); } @media (max-width: 768px) { .hmyt-fs-slider-wrapper .hmyt-slider-nav { display: none !important; } .hmyt-fs-slider-wrapper::before, .hmyt-fs-slider-wrapper::after { display: none; } } .hmyt-fs-card-footer .hmyt-pc-compact-item { flex-direction: column !important; align-items: flex-end !important; } .hmyt-fs-card-footer .hmyt-pc-action-box { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .hmyt-fs-card-footer .hmyt-qty-text-section { align-items: flex-end !important; } .hmyt-search-modal-container .hmyt-load-more-wrapper hr { height: 2px; background: #e3e8ee; opacity: 1; margin: 0; width: 100%; border: none; } .hmyt-fs-container .hmyt-horizontal-product-card { background: #fff; } .hmyt-fs-container span.hmyt-hp-status { background: #ebeef3; } .hmyt-fs-container .hmyt-hp-link > div .hmyt-card-placeholder { background: #ebeef3; } .hmyt-fs-container .hmyt-suggestion-item { background: #fff; } .hmyt-fs-container .hmyt-fs-search-bar > input { padding: 0; border: none; background: transparent; } button.hmyt-fs-tab.is-active:hover { background: none; } .hmyt-fs-container p.text-in-cart { font-size: 10px; } .hmyt-fs-container a.hmyt-trigger-mini-cart { font-size: 11px; } .hmyt-fs-container .hmyt-suggestions-banner { margin-bottom: 0; margin-top: 20px; } @media (max-width: 768px) { *:has(> .hmyt-ajax-search-wrapper:not(.hmyt-footer-instance)) { flex: 1 1 auto; min-width: 0 !important; } .hmyt-ajax-search-wrapper, .hmyt-search-trigger, .hmyt-rich-placeholder { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .hmyt-search-trigger { height: 40px; border-radius: 10px; } .hmyt-search-trigger > input:not(.hmyt-hidden-trigger-input) { height: 100% !important; min-width: 0; min-height: 0 !important; padding: 0 10px !important; font-size: clamp(10px, 3vw, 14px); line-height: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hmyt-rich-placeholder { padding: 0 10px !important; gap: 5px; overflow: hidden; } .hmyt-rp-text { min-width: 0; font-size: clamp(9px, 3vw, 13px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hmyt-rp-logo-wrapper { flex: 0 1 clamp(38px, 18vw, 64px); width: clamp(38px, 18vw, 64px); min-width: 0; overflow: hidden; align-items: center; justify-content: center; } .hmyt-rp-logo-wrapper > .hmyt-rp-logo { width: auto !important; max-width: 100% !important; height: 16px !important; min-height: 0 !important; object-fit: contain; } .hmyt-placeholder-vertical_slider .hmyt-rp-text { flex: 0 1 auto; } .hmyt-rp-vslider { flex: 1 1 0; min-width: 0; } .hmyt-rp-vslider-item span { max-width: 100%; font-size: clamp(9px, 3vw, 13px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hmyt-trigger-icon, .hmyt-trigger-shortcut { display: none !important; } .hmyt-search-modal-container .hmyt-suggestions-loaded { padding: 10px; } .hmyt-search-modal-container .hmyt-suggestions-banner, .hmyt-search-modal-container .hmyt-suggestions-section { margin-bottom: 10px; } .hmyt-search-modal-container .hmyt-suggestions-banner img { border-radius: 6px !important; } .hmyt-search-modal-container .hmyt-suggested-section { margin-bottom: 12px; } .hmyt-search-modal-container .hmyt-suggestions-header { margin-bottom: 6px; } .hmyt-search-modal-container .hmyt-suggestions-title { gap: 6px; font-size: 12px; } .hmyt-search-modal-container .hmyt-suggestions-title > svg, .hmyt-search-modal-container .hmyt-reset-recent svg { width: 16px; height: 16px; } .hmyt-search-modal-container .hmyt-suggestions-list { gap: 6px; } .hmyt-search-modal-container .hmyt-suggestion-item { gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 11px; } .hmyt-search-modal-container .hmyt-suggestion-item svg { width: 12px !important; height: 12px; } .hmyt-search-modal-container .hmyt-products-horizontal-list { gap: 8px; padding-bottom: 3px; } .hmyt-search-modal-container .hmyt-horizontal-product-card { width: 180px; border-radius: 12px; } .hmyt-search-modal-container .hmyt-hp-link { gap: 8px; padding: 8px 10px; } .hmyt-search-modal-container .hmyt-hp-thumb { width: 42px; height: 42px; border-radius: 7px; } .hmyt-search-modal-container .hmyt-hp-content > .hmyt-hp-title { font-size: 11.5px; } .hmyt-search-modal-container .hmyt-hp-meta, .hmyt-search-modal-container .hmyt-reset-recent { font-size: 11px; } .hmyt-search-modal-container .hmyt-slider-nav { display: none !important; } .hmyt-search-modal-container .hmyt-suggestions-section:last-child, .hmyt-search-modal-container .hmyt-suggestions-section.hmyt-recent-searches { padding-top: 8px; } }