/* Algolia Autocomplete styles - Task 5: Figma parity + panel positioning */ :root { --rac-gold: #C8962C; --rac-gold-figma: #C5973F; --rac-heading-gold: #D39528; --rac-dark: #1c1c1c; --rac-line: #ececec; --rac-soft-line: #f0f0f0; --rac-sidebar-bg: #fafaf8; --rac-product-border: #ece6d8; --rac-mobile-header-offset: 0px; } #regency-algolia-autocomplete { position: relative; width: 100%; } /* --- Input chrome (autocomplete-js form lives inside #regency-algolia-autocomplete) --- */ #regency-algolia-autocomplete .aa-Autocomplete { width: 100%; } #regency-algolia-autocomplete .aa-Form { display: flex; align-items: center; width: 100%; min-height: 48px; border: 1px solid #e1e1e1; border-radius: 10px; background: #fff; box-sizing: border-box; overflow: hidden; } #regency-algolia-autocomplete .aa-InputWrapperPrefix, #regency-algolia-autocomplete .aa-InputWrapperSuffix { display: flex; align-items: center; flex: 0 0 auto; align-self: stretch; } #regency-algolia-autocomplete .aa-InputWrapper { flex: 1 1 auto; min-width: 0; order: 1; align-self: stretch; } #regency-algolia-autocomplete .aa-Input { width: 100%; border: 0; outline: none; background: transparent; padding: 9px 17px; font-size: 16px; color: #222; appearance: none; box-shadow: none; letter-spacing: -0.02em; height: 100%; line-height: 1; padding-bottom: 12px; } form.regency-algolia-search input.no-autocomplete { min-height: 46px; } #regency-algolia-autocomplete .aa-Input::placeholder { color: #BBB; opacity: 1; } #regency-algolia-autocomplete .aa-InputWrapperPrefix { order: 3; min-width: 47px; justify-content: center; background: var(--rac-gold-figma); } #regency-algolia-autocomplete .aa-SubmitButton { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 46px; padding: 0 14px; border: 0; background: transparent; color: #fff; flex: 0 0 auto; cursor: pointer; transition: color .18s ease; } #regency-algolia-autocomplete .aa-ClearButton { display: none; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: #eceae4; color: #666; flex: 0 0 auto; cursor: pointer; } #regency-algolia-autocomplete .aa-InputWrapperSuffix { order: 2; justify-content: center; padding-right: 10px; } #regency-algolia-autocomplete .aa-SubmitButton svg, #regency-algolia-autocomplete .aa-ClearButton svg { width: 18px; height: 18px; stroke-width: 1.8; } #regency-algolia-autocomplete .rac-mobile-cancel { display: none; } #regency-algolia-autocomplete.rac-is-desktop .aa-ClearButton, #regency-algolia-autocomplete.rac-is-desktop .aa-InputWrapperSuffix { display: none !important; } /* --- Panel: portaled to , must be targeted unscoped --- */ .aa-Panel { position: absolute; z-index: 100000; right: auto !important; width: min(1049px, 95vw); margin-top: 6px; } .aa-Panel .aa-List { list-style: none; margin: 0; padding: 0; } .aa-InputWrapperPrefix .aa-Label { margin: 0; } /* --- Dropdown content (Task 4 markup) --- */ .rac-wrap { background: #fff; border: 1px solid #e0e0e0; box-shadow: 0 18px 54px rgba(0, 0, 0, .15); border-radius: 9px; overflow: hidden; position: relative; width: min(1049px, 95vw); } .rac-header { display: flex; justify-content: flex-end; padding: 0; border-bottom: 0; position: absolute; right: 20px; top: 18px; z-index: 2; } .rac-viewall { color: var(--rac-gold-figma); font-weight: 600; text-decoration: none; font-size: 12px; line-height: 1; } .rac-columns { display: grid; grid-template-columns: 279px 1fr; min-height: 603px; } .rac-left { background: var(--rac-sidebar-bg); border-right: 1px solid var(--rac-soft-line); display: flex; flex-direction: column; gap: 14px; padding: 8px 1px 16px 0; } .rac-right { padding: 17px 20px 16px; min-width: 0; } .rac-block h4 { border-bottom: 1px solid var(--rac-soft-line); box-sizing: border-box; color: var(--rac-heading-gold); text-transform: uppercase; font-family: Inter, Roboto, Arial, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0; line-height: 1.2; margin: 0; width: 100%; } .rac-left .rac-block { width: 100%; } .rac-left .rac-block h4 { padding: 11px 18px 9px; } @media (min-width: 1024px) { .rac-left .rac-block:nth-child(2) h4 { padding: 9px 18px; } } .rac-suggestion { align-items: center; color: #333; display: flex; font-family: Roboto, Arial, sans-serif; font-size: 14px; line-height: 1; min-height: 34px; padding: 0; text-decoration: none; transition: color .18s ease; } .rac-suggestion:first-child { min-height: 39px; padding-top: 1px; } .rac-suggestion::before { background: radial-gradient(circle, #333 0 1px, transparent 2px); border: 1px solid #333; border-radius: 50%; box-sizing: border-box; content: ""; flex: 0 0 auto; height: 8px; width: 8px; margin-right: 8px; } .aa-Panel .rac-suggestion mark { background: transparent; color: #111; font-weight: 700; transition: color .18s ease; } .rac-category { display: flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; color: #222; border-radius: 6px; transition: color .18s ease; } .rac-cat-icon { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #f0f0f0; flex: 0 0 auto; } .rac-cat-text { display: flex; flex-direction: column; } .rac-cat-name { color: #222; font-size: 14px; font-weight: 600; line-height: 1.2; transition: color .18s ease; } .rac-cat-count { font-size: 12px; color: #aaa; line-height: 1.2; transition: color .18s ease; } @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .aa-Panel .rac-suggestion:hover, .aa-Panel .rac-suggestion:focus-visible { outline: none; } .aa-Panel .rac-suggestion:hover mark, .aa-Panel .rac-suggestion:focus-visible mark { color: var(--rac-gold); } #regency-algolia-autocomplete.rac-is-desktop .aa-SubmitButton:hover, #regency-algolia-autocomplete.rac-is-desktop .aa-SubmitButton:focus-visible { color: #fff7e8; outline: none; } .rac-category:hover, .rac-category:focus-visible { color: var(--rac-gold); outline: none; } .rac-category:hover .rac-cat-name, .rac-category:focus-visible .rac-cat-name { color: var(--rac-gold); } .rac-category:hover .rac-cat-count, .rac-category:focus-visible .rac-cat-count { color: #8f7b55; } } .rac-blog { display: block; padding: 6px 0; color: #222; font-size: 14px; font-weight: 600; line-height: 18px; text-decoration: none; } .rac-blog-date { display: block; font-size: 11px; color: #bbb; font-weight: 400; line-height: 1.3; margin-top: 4px; } .rac-right .rac-block h4 { padding: 0 0 10px 2px; color: var(--rac-gold-figma); margin: 0; } .rac-right ul, .rac-left ul { list-style: none; margin: 0; padding: 0; } .rac-left .aa-List { padding-left: 18px; padding-right: 18px; } .rac-right .aa-List { display: grid; grid-template-columns: 1fr 1fr; column-gap: 29px; row-gap: 10px; margin-top: 12px; } .rac-product { display: flex; gap: 10px; align-items: flex-start; padding: 0; border-radius: 6px; text-decoration: none; color: #222; transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; } @media (hover: hover) and (pointer: fine) { .rac-product:hover { background: rgba(197, 151, 63, .06); box-shadow: inset 0 0 0 1px rgba(197, 151, 63, .14); } .rac-product:hover .rac-product-img-wrap { border-color: rgba(197, 151, 63, .36); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); } .rac-product:focus-visible { background: rgba(197, 151, 63, .08); box-shadow: inset 0 0 0 1px rgba(197, 151, 63, .24); outline: none; } } .rac-product-img-wrap { align-items: center; background: #fff; border: 1px solid var(--rac-product-border); border-radius: 6px; box-sizing: border-box; display: flex; flex: 0 0 auto; height: 80px; justify-content: center; overflow: hidden; padding: 1px; width: 80px; } .rac-product-img-wrap .rac-product-img { display: block; width: 80px; height: 80px; object-fit: contain; box-sizing: border-box; max-height: 100%; max-width: 100%; border-radius: 4px; } .rac-product-img-placeholder { background: transparent; } .rac-product-title { display: block; color: #222; font-size: 14px; font-weight: 500; line-height: 18.8px; } .rac-product-brand { display: block; font-size: 12px; color: #bbb; line-height: 1.25; text-transform: uppercase; } .rac-product-brand-label, .rac-product-brand-value { display: inline-block; } .rac-product-brand-label { text-transform: none; } .rac-product-brand-value { margin-left: .35em; } .rac-stars { color: var(--rac-gold-figma); font-size: 12px; letter-spacing: .56px; line-height: 1.2; } .rac-stars .rac-count { color: #bbb; letter-spacing: 0; } .rac-price { display: block; font-size: 14px; line-height: 1.2; margin-top: 1px; } .rac-price b { color: var(--rac-gold-figma); font-weight: 700; } .rac-price s { color: #ccc; font-size: 12px; margin-right: 6px; } .rac-wrap .rac-footer { align-items: center; display: flex; gap: .19px; justify-content: center; text-align: center; background: #1a1a1a; color: #fff; padding: 15px 22px; font-size: 13px; font-weight: 700; letter-spacing: .11em; line-height: 1; text-decoration: none; text-transform: uppercase; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; } .rac-wrap a.rac-footer { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important; } .rac-wrap .rac-footer:hover { background:var(--rac-gold-figma); box-shadow: none; color: #fff; } .rac-wrap .rac-footer:focus { background: #b78629; color: #fff; } .rac-wrap .rac-footer:focus-visible { outline: none; } .rac-footer-label, .rac-footer-separator, .rac-footer-count { display: inline-block; transition: color .18s ease; } .rac-footer-separator { margin: 0 5px; } .rac-footer-count { color: var(--rac-gold-figma); } .rac-footer-count-value, .rac-footer-count-label { display: inline-block; } .rac-footer-count-label { margin-left: .35em; } .rac-wrap .rac-footer:hover .rac-footer-label, .rac-wrap .rac-footer:hover .rac-footer-separator, .rac-wrap .rac-footer:focus .rac-footer-label, .rac-wrap .rac-footer:focus .rac-footer-separator { color: #fff; } .rac-wrap .rac-footer:hover .rac-footer-count { color: #000; } .rac-wrap .rac-footer:focus .rac-footer-count { color: #000; } @media (max-width: 1023px) { html.rac-mobile-search-open, body.rac-mobile-search-open { height: 100%; overflow: hidden; overscroll-behavior: none; } .elementor-location-header { border-bottom: 2px solid var(--rac-product-border); } #regency-algolia-autocomplete { background: #fff; } #regency-algolia-autocomplete .aa-Autocomplete { display: flex; align-items: center; gap: 3px; } #regency-algolia-autocomplete .aa-Form { min-height: 46px; border: 1px solid #e6e0d4; border-radius: 8px; flex: 1 1 auto; width: auto; overflow: visible; } #regency-algolia-autocomplete .aa-InputWrapper { align-self: auto; } #regency-algolia-autocomplete .aa-InputWrapperPrefix { order: 1; min-width: auto; background: transparent; padding-left: 13px; padding-right: 10px; } #regency-algolia-autocomplete .aa-InputWrapperSuffix { display: flex !important; order: 3; padding-right: 13px; } #regency-algolia-autocomplete .aa-SubmitButton { width: 18px; min-height: 18px; height: 18px; padding: 0; color: var(--rac-gold-figma); pointer-events: none; cursor: default; } #regency-algolia-autocomplete .aa-SubmitButton svg { width: 18px; height: 18px; } #regency-algolia-autocomplete .aa-Input { padding: 8px 2px 8px 0; font-size: 16px; line-height: normal; letter-spacing: 0; } #regency-algolia-autocomplete .aa-ClearButton { display: flex; } #regency-algolia-autocomplete.rac-is-empty .aa-ClearButton, #regency-algolia-autocomplete.rac-is-empty .rac-mobile-cancel { display: none !important; } #regency-algolia-autocomplete.rac-has-query .aa-ClearButton, #regency-algolia-autocomplete.rac-has-query .rac-mobile-cancel { display: flex !important; } #regency-algolia-autocomplete .rac-mobile-cancel { align-items: center; background: transparent; border: 0; color: #a87f2f; cursor: pointer; font-family: Inter, Roboto, Arial, sans-serif; font-size: 16px; font-weight: 700; justify-content: center; line-height: normal; padding: 4px 2px 5px; white-space: nowrap; } #regency-algolia-autocomplete.rac-is-mobile .aa-DetachedSearchButton { display: none !important; } .aa-Panel { background: #fff; border: 0; bottom: 0 !important; box-shadow: none; left: 0 !important; margin-top: 0; max-height: none !important; overflow: hidden; position: fixed !important; right: 0 !important; top: var(--rac-mobile-header-offset) !important; width: 100vw !important; margin-top: -2px; } .aa-Panel .aa-PanelLayout { height: 100%; } .rac-wrap { border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; height: 100%; overflow: hidden; width: 100vw; } .rac-header { display: none; } .rac-columns { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-y: auto; padding: 0 17px calc(87px + env(safe-area-inset-bottom, 0px)); } .rac-left { background: #fff; border-right: none; border-bottom: 0; display: contents; padding: 0; } .rac-right { display: contents; } .rac-block--suggestions { border-bottom: 1px solid var(--rac-product-border); order: 1; padding: 12px 0 11px; } .rac-block--products { border-bottom: 1px solid var(--rac-product-border); order: 2; padding: 14px 0 0; } .rac-block--categories { border-bottom: 1px solid var(--rac-product-border); order: 3; padding: 14px 0 10px; } .rac-block--blog { order: 4; padding: 14px 0 22px; } .rac-block h4, .rac-left .rac-block h4, .rac-right .rac-block h4 { border-bottom: 0; color: var(--rac-gold-figma); font-family: Inter, Roboto, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; margin: 0; padding: 0 0 9px; text-transform: uppercase; width: 100%; } .rac-block--suggestions h4 { display: none; } .rac-left .aa-List, .rac-right .aa-List { margin: 0; padding: 0; } .rac-right .aa-List { display: flex; flex-direction: column; gap: 0; } .rac-suggestion { font-size: 14px; line-height: 1; min-height: 27px; padding: 0; } .rac-suggestion:first-child { min-height: 27px; padding-top: 0; } .rac-suggestion::before { background: center / 18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='8' cy='8' r='4.75' stroke='%23999' stroke-width='1.5'/%3E%3Cpath d='M11.5 11.5L15 15' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); border: 0; border-radius: 0; height: 18px; width: 18px; } .rac-product { border-bottom: 1px solid var(--rac-product-border); gap: 6px; min-height: 84px; padding: 12px 0; } .aa-Item:last-child .rac-product { border-bottom: none; } .rac-product-img-wrap { height: 72px; width: 72px; } .rac-product-img { width: 72px; height: 72px; } .rac-product-body { min-width: 0; padding-top: 1px; } .rac-product-title { font-size: 14px; font-weight: 500; line-height: 18.843px; } .rac-product-brand { font-size: 12px; line-height: 1.2; } .rac-stars { display: block; font-size: 12px; line-height: 1.2; } .rac-price { font-size: 14px; line-height: 1.2; margin-top: 0; } .rac-price s { font-size: 12px; } .rac-category { gap: 7px; justify-content: space-between; padding: 4px 0; } .rac-cat-icon { display: none; } .rac-cat-text { align-items: center; display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; } .rac-cat-name { font-size: 16px; font-weight: 600; letter-spacing: -0.087px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rac-cat-count { color: #aaa; font-size: 14px; line-height: 1.2; text-align: right; white-space: nowrap; } .rac-blog { font-size: 14px; font-weight: 600; line-height: 18.084px; padding: 7px 0; } .rac-blog-date { font-size: 12px; line-height: 1.2; margin-top: 3px; } .rac-wrap .rac-footer { background: #222; border-radius: 8px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 0 0 10px #fff; font-size: 14px; justify-content: center; left: 10px; letter-spacing: 0; line-height: 1.2; padding: 19px 18px; position: fixed; right: 10px; text-transform: none; z-index: 100001; } .aa-Panel .rac-suggestion mark { text-decoration: none; } .algolia-autocomplete { display: none !important; } } .aa-Panel mark { background: transparent; color: var(--rac-gold-figma); text-decoration: none; }