/* * Gooek Search Hub — structural styles. * * Every tunable value is a custom property with a fallback baked in, so this * file renders correctly on its own and dynamic-styles.php only has to emit the * handful of variables that were actually overridden. * * Scoping: rules are keyed off our own root classes (.gooek-searchhub / * .gooek-mobilesearch), NOT off Blocksy's `[data-id="..."]` attribute. * * That distinction matters. Blocksy's builder-renderer runs the item id through * shorten_id(), which returns the full id for a normal item but `substr($parts[1], * 0, 6)` -- a random six-character string -- for a CLONED one. Scoping on * [data-id="gooek-search-hub"] therefore silently matches nothing on a clone, * leaving a second instance completely unstyled. Our own class is always * present regardless. * * The FiboSearch suggestion block at the end is the exception to scoping * altogether -- that dropdown is appended to , outside our subtree, so a * descendant selector could never reach it. * * ## Panel surface provenance (2026-07-31) * * The panel's motion and surface follow anker.com's design system, read from * their live stylesheet rather than eyeballed: * * easing cubic-bezier(.4, 0, .2, 1) -- 28 uses, their one curve * durations .15s / .2s -- 24 and 11 uses; fast * shadow 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1) * radius 12px (--card-radius) * lines #dadce0 (--lines-color) * tile bg #f5f6f7 (--bg-color-0) * hover tint rgba(0,0,0,.075) (--hover) * scrim rgba(0,0,0,.6) (--masks-color-1) * type line-height 1.2, letter-spacing -0.02em * * What could NOT be read: their actual mega-menu rule. The nav is rendered * client-side and its CSS-module class names are hashed, so the panel geometry * here is ours -- only the design vocabulary above is theirs. * * Every value is a `var(--x, fallback)`, so a configured setting still wins. */ /* ========================================================================== Header column — why the bar could not be widened Blocksy sizes a three-column header row as #header [data-column-set="3"] > div { grid-template-columns: 1fr var(--middle-column-width, auto) 1fr; } and --middle-column-width is only ever set if the Customizer's own middle column option is used. It is NOT set on this site, so the middle column falls back to `auto` — meaning the column is sized to ITS CONTENT, which is our search bar. That makes the bar's own `width: 100%` circular: the column measures the bar, then the bar asks for 100% of the column. The result is that the bar always settled at its intrinsic width — roughly catalog + a default-size text input + button — and no width setting could move it. It is also why the clear button looked stranded in the middle: with the input stuck at its intrinsic size, the right-hand end of the field simply is not far right. So the track is given a definite size instead. The outer columns become `auto` (logo and icons only ever need their content) and the middle takes what is left, which is what makes `max-width` on the bar a real setting rather than a no-op. :has() scopes every rule here to the container that actually holds our search bar, so other header rows — and sites where this plugin's item is not placed in the middle column — keep Blocksy's own layout untouched. The selector is no more exotic than the :has() already used for the no-catalog bar below. ========================================================================== */ #header [data-column-set="3"] > div:has(.gooek-searchhub) { grid-template-columns: auto var(--gooek-sh-column, minmax(0, 1fr)) auto; } /* * The column and its items wrapper are flex boxes whose children are * content-sized by default, so widening the track alone is not enough — the * wrapper has to be told to take the space as well, or the bar keeps its * intrinsic width inside a now-wider column. */ #header [data-column="middle"]:has(.gooek-searchhub) { min-width: 0; } #header [data-column="middle"] > [data-items]:has(.gooek-searchhub) { flex: 1 1 auto; width: 100%; min-width: 0; } /* ========================================================================== Desktop search hub ========================================================================== */ /* * position: STATIC on this element and on __bar is load-bearing — do not * "tidy" either back to relative. * * The mega panel must hang from the header row, not from the search bar. It * used to be positioned against the bar, because these two roots were both * `relative` and so won as nearest positioned ancestor — which meant * `left: 50%` centred the panel on the BAR rather than on the page. That looked * correct only for as long as the bar was full width and therefore already * centred; the moment --gooek-sh-bar-width narrows it, the panel drifts. * * With all three roots static, Blocksy's `#header [data-row] { position: var( * --position, relative) }` makes the header row the containing block, which is * full width and page-centred, and measureDrop()'s `header.bottom - row.bottom` * becomes the correct distance rather than one short by the row's padding. */ .gooek-searchhub { position: static; display: flex; align-items: center; /* * Narrowing is done with max-width rather than width, on purpose. This is a * flex item with `flex-grow: 1`, so a `width` would simply be grown back to * full by the flex algorithm; max-width is the one bound flex-grow honours. * PHP composes the value from the percentage and the optional px cap -- * `60%`, `900px` or `min(60%, 900px)` -- because the two cannot both be * expressed as separate max-width declarations. * * This only became a working setting once the header column above was given * a definite size. While the column was `auto` it measured this element, * so a percentage here resolved against our own content and changed * nothing. Do not remove the column rules and expect this to still work. * * The free space that leaves is absorbed by the auto margins below, which * is what positions a narrowed bar. */ width: 100%; max-width: var(--gooek-sh-bar-max-width, 100%); min-width: 0; height: 100%; flex: 1 1 auto; margin: 0 auto; } /* Where a narrowed bar sits in its header column. Centred needs no override. */ .gooek-searchhub[data-gooek-bar-align="left"] { margin-left: 0; margin-right: auto; } .gooek-searchhub[data-gooek-bar-align="right"] { margin-left: auto; margin-right: 0; } .gooek-searchhub .gooek-searchhub__bar { position: static; display: grid; grid-template-columns: minmax(var(--gooek-sh-catalog-min, 196px), var(--gooek-sh-catalog-max, 224px)) minmax(0, 1fr) auto; width: 100%; min-width: 0; flex: 1 1 auto; min-height: var(--gooek-sh-bar-height, 56px); background: var(--gooek-sh-surface, var(--theme-palette-color-8, #fff)); border: var(--gooek-sh-border-width, 2px) solid var(--gooek-sh-border, var(--theme-border-color, #e2e8f0)); border-radius: var(--gooek-sh-radius, 0); box-shadow: 0 2px 6px rgba(17, 18, 20, 0.08); overflow: visible; } /* No category column when the trigger is switched off. */ .gooek-searchhub .gooek-searchhub__bar:not(:has(.gooek-searchhub__catalog)) { grid-template-columns: minmax(0, 1fr) auto; } /* * Ratio sizing — the three parts hold their proportions at every bar width, * instead of two of them being pinned to absolute pixel sizes while only the * input flexes. * * The whole track list arrives from PHP as one string rather than three * numbers combined here. `calc(var(--n) * 1fr)` is the obvious way to build a * track from a plain number and it is not reliably supported in * grid-template-columns, so composing server-side sidesteps the question * entirely and keeps the fallback readable. * * The submit button's min-width has to go, or it would hold that column wider * than its share and quietly break the ratio. */ .gooek-searchhub[data-gooek-sizing="ratio"] .gooek-searchhub__bar { grid-template-columns: var(--gooek-sh-grid, 2fr 7fr 2fr); --gooek-sh-submit-min: 0px; } .gooek-searchhub[data-gooek-sizing="ratio"] .gooek-searchhub__bar:not(:has(.gooek-searchhub__catalog)) { grid-template-columns: var(--gooek-sh-grid-notrigger, 7fr 2fr); } .gooek-searchhub .gooek-searchhub__bar:focus-within { border-color: var(--gooek-sh-border-focus, var(--theme-palette-color-1, #feb511)); box-shadow: 0 0 0 3px rgba(254, 181, 17, 0.18); } /* --- Category trigger --------------------------------------------------- */ /* * position: STATIC here too — the third of the three roots that must stay * unpositioned for the panel to reach the header row. See the note on * .gooek-searchhub above; this one alone was never enough, which is what the * comment that used to sit here got wrong. * * The row is not the header, so `top: 100%` lands under the MIDDLE row, not * under the bottom row. --gooek-sh-panel-drop closes that gap; search-hub.js * measures it. It defaults to 0, so with JS off the panel still appears in a * sane place, just higher up. */ .gooek-searchhub .gooek-searchhub__catalog { position: static; display: block; grid-column: 1; grid-row: 1; width: 100%; min-width: 0; height: 100%; align-self: stretch; z-index: 4; } .gooek-searchhub .gooek-searchhub__trigger { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; height: 100%; min-height: var(--gooek-sh-bar-height, 56px); padding: 0 20px; background: var(--gooek-sh-surface-alt, var(--theme-palette-color-7, #f9fafb)); border-right: var(--gooek-sh-border-width, 2px) solid var(--gooek-sh-border, var(--theme-border-color, #e2e8f0)); color: var(--gooek-sh-text, var(--theme-headings-color, #1a1d20)); font-family: var(--gooek-sh-font, var(--theme-button-font-family, var(--theme-font-family))); font-size: var(--gooek-sh-label-size, 14px); font-weight: var(--theme-button-font-weight, 700); letter-spacing: var(--theme-button-letter-spacing, 0.04em); text-transform: var(--gooek-sh-label-transform, uppercase); cursor: pointer; list-style: none; user-select: none; } /* Kill the native disclosure triangle in every engine. */ .gooek-searchhub .gooek-searchhub__trigger::-webkit-details-marker { display: none; } .gooek-searchhub .gooek-searchhub__trigger::marker { content: ""; } .gooek-searchhub .gooek-searchhub__triggerleft { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .gooek-searchhub .gooek-searchhub__triggerlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gooek-searchhub .gooek-searchhub__triggericon, .gooek-searchhub .gooek-searchhub__triggerarrow, .gooek-searchhub .gooek-searchhub__submiticon, .gooek-searchhub .gooek-searchhub__railicon, .gooek-searchhub .gooek-searchhub__cardicon { display: inline-flex; align-items: center; justify-content: center; flex: none; } .gooek-searchhub svg { width: var(--gooek-sh-icon-size, 20px); height: var(--gooek-sh-icon-size, 20px); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gooek-searchhub .gooek-searchhub__catalog:hover .gooek-searchhub__trigger, .gooek-searchhub .gooek-searchhub__catalog[open] .gooek-searchhub__trigger, .gooek-searchhub .gooek-searchhub__catalog.is-open .gooek-searchhub__trigger { background: var(--gooek-sh-accent, var(--theme-palette-color-1, #feb511)); border-right-color: var(--gooek-sh-accent, var(--theme-palette-color-1, #feb511)); color: var(--gooek-sh-accent-text, var(--theme-headings-color, #111214)); } .gooek-searchhub .gooek-searchhub__triggerarrow { transition: transform 0.2s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)); } .gooek-searchhub .gooek-searchhub__catalog[open] .gooek-searchhub__triggerarrow, .gooek-searchhub .gooek-searchhub__catalog.is-open .gooek-searchhub__triggerarrow { transform: rotate(180deg); } /* --- Search form -------------------------------------------------------- */ .gooek-searchhub .gooek-searchhub__form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-column: 2 / 4; grid-row: 1; align-items: stretch; min-width: 0; height: 100%; margin: 0; padding: 0; } .gooek-searchhub .gooek-searchhub__controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-column: 1 / 3; align-items: stretch; min-width: 0; height: 100%; } .gooek-searchhub .gooek-searchhub__inputwrap { position: relative; display: flex; align-items: center; grid-column: 1; min-width: 0; } .gooek-searchhub .gooek-searchhub__input { width: 100%; min-width: 0; height: 100%; min-height: var(--gooek-sh-bar-height, 56px); margin: 0; padding: 0 var(--gooek-sh-input-padding, 20px); border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--gooek-sh-text, var(--theme-headings-color, #1a1d20)); font-size: var(--gooek-sh-input-size, 16px); font-weight: 500; line-height: 1.6; } .gooek-searchhub .gooek-searchhub__input::placeholder { color: var(--gooek-sh-placeholder, var(--theme-text-color, #4a5568)); opacity: 1; } .gooek-searchhub .gooek-searchhub__input:focus, .gooek-searchhub .gooek-searchhub__input:hover { border: 0; outline: 0; background: transparent; box-shadow: none; } .gooek-searchhub .gooek-searchhub__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; grid-column: 2; min-width: var(--gooek-sh-submit-min, 160px); height: 100%; padding: 0 28px; border: 0; border-radius: 0; background: var(--gooek-sh-accent, var(--theme-palette-color-1, #feb511)); color: var(--gooek-sh-accent-text, var(--theme-headings-color, #111214)); font-family: var(--gooek-sh-font, var(--theme-button-font-family, var(--theme-font-family))); font-size: var(--gooek-sh-label-size, 14px); font-weight: var(--theme-button-font-weight, 700); letter-spacing: var(--theme-button-letter-spacing, 0.04em); text-transform: var(--gooek-sh-label-transform, uppercase); line-height: 1; cursor: pointer; transition: background 0.15s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow 0.15s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)); } .gooek-searchhub .gooek-searchhub__submit:hover { background: var(--gooek-sh-accent-hover, var(--theme-palette-color-2, #e5a30f)); box-shadow: 0 8px 24px rgba(254, 181, 17, 0.24); } /* --- Mega panel --------------------------------------------------------- */ .gooek-searchhub .gooek-searchhub__mega { position: absolute; /* * 100% = bottom of the header row we sit in * drop = distance from there to the bottom of the whole header (JS) * offset = the deliberate breathing gap, 0 for "tight underneath" */ top: calc(100% + var(--gooek-sh-panel-drop, 0px) + var(--gooek-sh-panel-offset, 0px)); left: 50%; right: auto; width: min( calc(100vw - 2 * var(--gooek-sh-panel-gutter, 16px)), var(--gooek-sh-panel-max-width, var(--theme-normal-container-max-width, var(--theme-container-width, 1440px))) ); z-index: 80; opacity: 0; visibility: hidden; pointer-events: none; /* * The horizontal placement lives in a variable so the open/closed states can * both compose it with the rise. Writing `translateX(-50%)` directly in one * state and forgetting it in the other slides the panel sideways as it * animates -- the classic centred-dropdown bug. */ transform: translate(var(--gooek-sh-panel-x, -50%), 6px); /* * The visibility delay on the way out is what keeps the panel clickable * during the fade; without it the pointer falls through mid-transition. */ transition: opacity 0.2s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)), transform 0.2s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)), visibility 0s linear 0.24s; background: var(--gooek-sh-panel-bg, var(--theme-palette-color-8, #fff)); /* * Anker-style surface: no top border (the panel reads as an extension of * the header, not a separate floating card), restrained side borders, and a * long soft shadow that falls downward only. A ring-shaped shadow makes the * panel look detached and hovering. */ border: 1px solid var(--gooek-sh-panel-border, var(--theme-border-color, #dadce0)); border-top: 0; border-radius: 0 0 var(--gooek-sh-panel-radius, 0px) var(--gooek-sh-panel-radius, 0px); /* * Two-layer shadow, both layers with a negative spread: a tight contact * shadow under the header edge plus a wide soft one. A single large blur * reads as a floating card, which is wrong for a panel attached to the * header. Values follow the same scale anker.com uses. */ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10); } /* * The bridge. An invisible strip spanning the gap between trigger and panel so * the pointer can travel across without leaving the hover subtree. Remove it * and the panel collapses the moment the cursor enters the dead zone. */ .gooek-searchhub .gooek-searchhub__mega::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; /* * Only as tall as the deliberate gap between header and panel. * * It used to be 104px tall and anchored to the trigger. Now that the panel * drops from the bottom of the whole header, a strip that size would lie * directly over the menu row and silently eat every menu click. Covering * just the gap is enough, because the long trigger-to-panel journey is * handled by the JS close delay, not by this element. */ height: var(--gooek-sh-panel-offset, 0px); /* Inert until the panel is actually open -- see the rule below. */ pointer-events: none; } .gooek-searchhub .gooek-searchhub__catalog[open] > .gooek-searchhub__mega::before, .gooek-searchhub .gooek-searchhub__catalog.is-open > .gooek-searchhub__mega::before { pointer-events: auto; } .gooek-searchhub .gooek-searchhub__catalog[open] > .gooek-searchhub__mega, .gooek-searchhub .gooek-searchhub__catalog.is-open > .gooek-searchhub__mega, .gooek-searchhub[data-gooek-hover="yes"] .gooek-searchhub__catalog:hover > .gooek-searchhub__mega, .gooek-searchhub[data-gooek-hover="yes"] .gooek-searchhub__catalog:focus-within > .gooek-searchhub__mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(var(--gooek-sh-panel-x, -50%), 0); transition-delay: 0s; } /* * Alignment. Centred is the default and needs no class. Left/right opt out of * the -50% shift entirely rather than fighting it, and --gooek-sh-panel-offset-x * nudges the panel in whichever direction it is anchored from. */ .gooek-searchhub[data-gooek-panel-align="center"] .gooek-searchhub__mega { left: calc(50% + var(--gooek-sh-panel-offset-x, 0px)); right: auto; --gooek-sh-panel-x: -50%; } .gooek-searchhub[data-gooek-panel-align="left"] .gooek-searchhub__mega { left: var(--gooek-sh-panel-offset-x, 0px); right: auto; --gooek-sh-panel-x: 0; } .gooek-searchhub[data-gooek-panel-align="right"] .gooek-searchhub__mega { left: auto; right: var(--gooek-sh-panel-offset-x, 0px); --gooek-sh-panel-x: 0; } /* Full-bleed opt-in: edge to edge, inner content still centred by the grid. */ .gooek-searchhub[data-gooek-panel-bleed="yes"] .gooek-searchhub__mega { width: 100vw; max-width: 100vw; left: 50%; right: auto; --gooek-sh-panel-x: -50%; border-left: 0; border-right: 0; border-radius: 0; } /* * Honour reduced-motion: keep the fade (it communicates state) but drop the * movement, and never animate the transform, or the panel appears to slide in * from the side for users who asked for less motion. */ @media (prefers-reduced-motion: reduce) { .gooek-searchhub .gooek-searchhub__mega { transition: opacity 0.01ms linear, visibility 0s linear 0.01ms; transform: translate(var(--gooek-sh-panel-x, -50%), 0); } } .gooek-searchhub .gooek-searchhub__megainner { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); min-height: 320px; } .gooek-searchhub .gooek-searchhub__megainner.has-promo { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(200px, 280px); } .gooek-searchhub .gooek-searchhub__block { width: 100%; max-width: none; margin: 0; padding: 0; } /* --- Category rail ------------------------------------------------------ */ .gooek-searchhub .gooek-searchhub__rail { display: flex; flex-direction: column; border-right: 1px solid var(--gooek-sh-panel-border, var(--theme-border-color, #e2e8f0)); background: var(--gooek-sh-surface-alt, var(--theme-palette-color-7, #f9fafb)); } .gooek-searchhub .gooek-searchhub__railitem { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--gooek-sh-panel-border, var(--theme-border-color, #e2e8f0)); color: var(--gooek-sh-text, var(--theme-headings-color, #1a1d20)); text-decoration: none; transition: background 0.15s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)), color 0.15s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)); } .gooek-searchhub .gooek-searchhub__railitem:last-child { border-bottom: 0; } /* * Hover and selection must not look the same. * * They used to share one rule, so on a panel where row 1 is already selected, * hovering row 3 gave two identically-styled rows and no way to tell which one * the panel is actually showing. Hover is now a quiet tint; selection keeps the * solid surface plus the accent bar below. */ .gooek-searchhub .gooek-searchhub__railitem:hover { background: var(--gooek-sh-hover-tint, rgba(0, 0, 0, 0.06)); color: var(--gooek-sh-text, var(--theme-headings-color, #1a1d20)); } .gooek-searchhub .gooek-searchhub__railitem.is-active { background: var(--gooek-sh-panel-bg, #fff); color: var(--gooek-sh-text, var(--theme-headings-color, #1a1d20)); font-weight: 600; } /* * Keyboard focus has to be visible even on the selected row, so the ring is * drawn with outline (which follows the border box) rather than another * background change that selection would swallow. */ .gooek-searchhub .gooek-searchhub__railitem:focus-visible, .gooek-searchhub .gooek-searchhub__card:focus-visible, .gooek-searchhub .gooek-searchhub__trigger:focus-visible { outline: 2px solid var(--gooek-sh-border-focus, var(--theme-palette-color-1, #feb511)); outline-offset: -2px; } .gooek-searchhub .gooek-searchhub__railitem.is-active { box-shadow: inset 3px 0 0 var(--gooek-sh-accent, var(--theme-palette-color-1, #feb511)); } .gooek-searchhub .gooek-searchhub__railtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .gooek-searchhub .gooek-searchhub__railname { font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gooek-searchhub .gooek-searchhub__railsub, .gooek-searchhub .gooek-searchhub__railindex { font-size: 12px; line-height: 1.3; color: var(--gooek-sh-placeholder, var(--theme-text-color, #4a5568)); } .gooek-searchhub .gooek-searchhub__railindex { flex: none; font-variant-numeric: tabular-nums; opacity: 0.6; } /* --- Panels + cards ----------------------------------------------------- */ .gooek-searchhub .gooek-searchhub__panels { position: relative; min-width: 0; padding: 22px 24px; } .gooek-searchhub .gooek-searchhub__panel[hidden] { display: none !important; } .gooek-searchhub .gooek-searchhub__paneltop { display: flex; align-items: flex-start; /* * No space-between: the "view more" link pins itself with margin-left:auto, * and space-between would additionally push the description away from the * heading it belongs to. */ gap: 24px; margin-bottom: 18px; } /* * Pinned to the far right of the panel, not tucked beside the heading. * `margin-left: auto` eats whatever space is left over, so the position holds * regardless of how long the heading or the description run. */ .gooek-searchhub .gooek-searchhub__panelmore { display: inline-flex; align-items: center; align-self: center; margin-left: auto; flex: none; gap: 4px; color: var(--gooek-sh-accent-hover, var(--theme-palette-color-2, #e5a30f)); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; } .gooek-searchhub .gooek-searchhub__panelmore:hover { text-decoration: underline; text-underline-offset: 3px; } .gooek-searchhub .gooek-searchhub__panelmorearrow { transition: transform 0.15s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)); } .gooek-searchhub .gooek-searchhub__panelmore:hover .gooek-searchhub__panelmorearrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .gooek-searchhub .gooek-searchhub__panelmore:hover .gooek-searchhub__panelmorearrow { transform: none; } } .gooek-searchhub .gooek-searchhub__eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gooek-sh-accent, var(--theme-palette-color-1, #feb511)); } .gooek-searchhub .gooek-searchhub__headline { margin: 0; font-size: 20px; line-height: 1.25; } .gooek-searchhub .gooek-searchhub__lede { margin: 0; max-width: 46ch; font-size: 13px; line-height: 1.5; color: var(--gooek-sh-placeholder, var(--theme-text-color, #4a5568)); } .gooek-searchhub .gooek-searchhub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .gooek-searchhub .gooek-searchhub__card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--gooek-sh-panel-border, var(--theme-border-color, #e2e8f0)); border-radius: var(--gooek-sh-radius, 0); color: var(--gooek-sh-text, var(--theme-headings-color, #1a1d20)); text-decoration: none; transition: border-color 0.15s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow 0.15s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)), transform 0.15s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)); } .gooek-searchhub .gooek-searchhub__card:hover { border-color: var(--gooek-sh-accent, var(--theme-palette-color-1, #feb511)); box-shadow: 0 6px 18px -6px rgba(26, 29, 32, 0.18); transform: translateY(-1px); } .gooek-searchhub .gooek-searchhub__cardthumb { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; } .gooek-searchhub .gooek-searchhub__cardthumb img { max-width: 48px; max-height: 48px; width: auto; height: auto; object-fit: contain; } .gooek-searchhub .gooek-searchhub__cardtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gooek-searchhub .gooek-searchhub__cardkicker { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--gooek-sh-accent-hover, var(--theme-palette-color-2, #e5a30f)); } .gooek-searchhub .gooek-searchhub__cardtitle { font-size: 14px; font-weight: 600; line-height: var(--gooek-sh-title-leading, 1.2); letter-spacing: var(--gooek-sh-title-tracking, -0.02em); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * Price block: current price first, original struck through after it. * * These are two elements rather than WooCommerce's flattened price_html, which * on a sale collapsed to "$100.00 $80.00" -- one long unstyled run that * overflowed the card. `flex-wrap` lets the pair drop to a second line on a * narrow card instead of pushing the grid wider. */ .gooek-searchhub .gooek-searchhub__cardprice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 2px; min-width: 0; } .gooek-searchhub .gooek-searchhub__pricewas { font-size: 12px; font-weight: 400; text-decoration: line-through; opacity: 0.55; color: var(--gooek-sh-placeholder, var(--theme-text-color, #4a5568)); } .gooek-searchhub .gooek-searchhub__pricenow { font-size: 13px; font-weight: 700; color: var(--gooek-sh-accent-hover, var(--theme-palette-color-2, #e5a30f)); } /* --- "View all" tails --------------------------------------------------- */ /* * Both tails read as a way OUT of the panel rather than as another item in it, * so they drop the numbering and the thumbnail slot and pick up an arrow and * the accent colour. Without that separation the last rail entry looks like a * category that happens to be called "View All Categories". */ .gooek-searchhub .gooek-searchhub__railmore, .gooek-searchhub .gooek-searchhub__cardmore { justify-content: space-between; color: var(--gooek-sh-accent-hover, var(--theme-palette-color-2, #e5a30f)); font-weight: 700; } .gooek-searchhub .gooek-searchhub__railmore { margin-top: auto; border-top: 1px solid var(--gooek-sh-panel-border, var(--theme-border-color, #dadce0)); border-bottom: 0; } .gooek-searchhub .gooek-searchhub__cardmore { align-items: center; justify-content: center; gap: 8px; border-style: dashed; } .gooek-searchhub .gooek-searchhub__railarrow, .gooek-searchhub .gooek-searchhub__cardarrow { flex: none; transition: transform 0.15s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)); } .gooek-searchhub .gooek-searchhub__railmore:hover .gooek-searchhub__railarrow, .gooek-searchhub .gooek-searchhub__cardmore:hover .gooek-searchhub__cardarrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .gooek-searchhub .gooek-searchhub__railmore:hover .gooek-searchhub__railarrow, .gooek-searchhub .gooek-searchhub__cardmore:hover .gooek-searchhub__cardarrow { transform: none; } } .gooek-searchhub .gooek-searchhub__cardmeta { font-size: 12px; line-height: 1.4; color: var(--gooek-sh-placeholder, var(--theme-text-color, #4a5568)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* --- Promo aside -------------------------------------------------------- */ .gooek-searchhub .gooek-searchhub__promo { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; border-left: 1px solid var(--gooek-sh-panel-border, var(--theme-border-color, #e2e8f0)); background: var(--gooek-sh-surface-alt, var(--theme-palette-color-7, #f9fafb)); } .gooek-searchhub .gooek-searchhub__promoeyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gooek-sh-accent, var(--theme-palette-color-1, #feb511)); } .gooek-searchhub .gooek-searchhub__promotitle { margin: 0; font-size: 17px; line-height: 1.3; } .gooek-searchhub .gooek-searchhub__promocopy { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gooek-sh-placeholder, var(--theme-text-color, #4a5568)); } .gooek-searchhub .gooek-searchhub__promocta { display: inline-flex; align-items: center; justify-content: center; margin-top: auto; padding: 10px 18px; border-radius: var(--gooek-sh-radius, 0); background: var(--gooek-sh-accent, var(--theme-palette-color-1, #feb511)); color: var(--gooek-sh-accent-text, var(--theme-headings-color, #111214)); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: var(--gooek-sh-label-transform, uppercase); text-decoration: none; } .gooek-searchhub .gooek-searchhub__promocta:hover { background: var(--gooek-sh-accent-hover, var(--theme-palette-color-2, #e5a30f)); } /* Narrow viewports: stack the panel instead of scrolling it sideways. */ @media (max-width: 1099.98px) { .gooek-searchhub .gooek-searchhub__megainner, .gooek-searchhub .gooek-searchhub__megainner.has-promo { grid-template-columns: minmax(0, 1fr); } .gooek-searchhub .gooek-searchhub__rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--gooek-sh-panel-border, var(--theme-border-color, #e2e8f0)); } .gooek-searchhub .gooek-searchhub__railitem { border-bottom: 0; white-space: nowrap; } .gooek-searchhub .gooek-searchhub__railindex { display: none; } .gooek-searchhub .gooek-searchhub__promo { border-left: 0; border-top: 1px solid var(--gooek-sh-panel-border, var(--theme-border-color, #e2e8f0)); } } @media (max-width: 767.98px) { .gooek-searchhub .gooek-searchhub__bar { grid-template-columns: minmax(0, 1fr) auto; } .gooek-searchhub .gooek-searchhub__catalog { display: none; } .gooek-searchhub .gooek-searchhub__form, .gooek-searchhub .gooek-searchhub__controls { grid-column: 1 / 3; } .gooek-searchhub .gooek-searchhub__submit { min-width: 0; padding: 0 16px; } .gooek-searchhub .gooek-searchhub__submitlabel { display: none; } } /* ========================================================================== FiboSearch bridge — desktop hub Neutralises FiboSearch's own form chrome so our grid owns the layout. ========================================================================== */ .gooek-searchhub .gooek-fibosearch-bridge.dgwt-wcas-search-wrapp { width: 100%; min-width: 0; max-width: none; margin: 0; color: inherit; line-height: inherit; text-align: inherit; } .gooek-searchhub .gooek-fibosearch-bridge.dgwt-wcas-search-form { width: auto; } .gooek-searchhub .gooek-fibosearch-bridge input[type="search"].dgwt-wcas-search-input { /* * flex rather than width:100%, so the clear button and mic beside it get * their space instead of being pushed past the end of the field. min-width:0 * is what actually allows the shrink -- a flex item's automatic minimum size * is its content, and an input's is its `size` attribute. */ order: 1; flex: 1 1 auto; width: auto; min-width: 0; height: 100%; min-height: var(--gooek-sh-bar-height, 56px); margin: 0; /* * Symmetric padding again: the clear button is a sibling now, not an overlay, * so no reserved gutter is needed to keep text out from under it. */ padding: 0 var(--gooek-sh-input-padding, 20px); border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--gooek-sh-text, var(--theme-headings-color, #1a1d20)); font-size: var(--gooek-sh-input-size, 16px); font-weight: 500; line-height: 1.6; } .gooek-searchhub .gooek-fibosearch-bridge input[type="search"].dgwt-wcas-search-input:focus, .gooek-searchhub .gooek-fibosearch-bridge input[type="search"].dgwt-wcas-search-input:hover { border: 0; outline: 0; background: transparent; box-shadow: none; } /* * The clear (X) button and the mic — laid out, not absolutely positioned. * * The X is FiboSearch's own .dgwt-wcas-preloader element: showCloseButton() * adds .dgwt-wcas-close to it and injects the icon. The same element also * carries the loading spinner. It is never moved in the DOM, so the only * question is where it lands. * * FiboSearch positions it with `position: absolute; right: `, which means * its resting place depends on which ancestor happens to be the containing * block, and on offsets tuned for THEIR wrapper (their submit button lives * inside it and needs 40px of clearance; ours is a grid sibling and needs * none). Every previous attempt here was an argument about that offset. * * So the absolute positioning is dropped entirely. .gooek-searchhub__inputwrap * is already a flex row, so making these two ordinary flex items and letting * the input take the remaining space puts the X at the end of the field by * layout — no containing block to reason about, no offset to tune, and nothing * that can drift if the bar's width changes. * * `order` puts the X last so it is the right-most control even when a mic is * present. A mic only renders where the browser supports speech recognition, * and display:none removes it from the flex flow entirely, so no space is * reserved for one that will never appear. * * `relative`, NOT `static`, and that distinction is load-bearing. FiboSearch * gives .dgwt-wcas-close a `:before` that is an absolutely positioned, * transparent, 100%x100% overlay -- a deliberate hack so a click landing on * the SVG icon can still be traced back to the button. That overlay sizes * itself against the nearest positioned ancestor. Take positioning off the * button and the button stops being that ancestor: the overlay escapes to * __inputwrap and blankets the entire field, so clicking anywhere in the * search box fires the clear handler. Relative keeps the element in the flex * flow (the whole point of the rules below) while still containing its own * overlay. `right`/`top` are neutralised because their offsets would now * shift the element instead of placing it. * * Making it positioned also switches z-index back on, and their base rule * parks the preloader at -1 to hide the idle spinner behind the input. That * has to be undone here or the loading spinner never shows. */ .gooek-searchhub .gooek-fibosearch-bridge .dgwt-wcas-preloader, .gooek-searchhub .gooek-fibosearch-bridge .dgwt-wcas-voice-search { position: relative; right: auto; top: auto; z-index: 1; flex: none; align-self: center; order: 2; width: 30px; height: 30px; margin: 0 2px 0 0; background-position: center; pointer-events: auto; } /* The X sits to the right of the mic, i.e. hard against the end of the field. */ .gooek-searchhub .gooek-fibosearch-bridge .dgwt-wcas-preloader { order: 3; margin-right: 8px; } /* * Their base rule hides the element behind the input with `z-index: -1` while * it is empty; it has to come forward once it is something you can click. */ .gooek-searchhub .gooek-fibosearch-bridge .dgwt-wcas-preloader.dgwt-wcas-close { z-index: 2; cursor: pointer; } .gooek-searchhub .gooek-fibosearch-bridge button.dgwt-wcas-search-submit { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; grid-column: 2; width: auto; min-width: var(--gooek-sh-submit-min, 160px); height: auto; padding: 0 28px; border: 0; border-radius: 0; background: var(--gooek-sh-accent, var(--theme-palette-color-1, #feb511)); color: var(--gooek-sh-accent-text, var(--theme-headings-color, #111214)); font-family: var(--gooek-sh-font, var(--theme-button-font-family, var(--theme-font-family))); font-size: var(--gooek-sh-label-size, 14px); font-weight: var(--theme-button-font-weight, 700); letter-spacing: var(--theme-button-letter-spacing, 0.04em); text-transform: var(--gooek-sh-label-transform, uppercase); line-height: 1; cursor: pointer; pointer-events: auto; } /* FiboSearch paints its own magnifier via ::before — ours is real markup. */ .gooek-searchhub .gooek-fibosearch-bridge button.dgwt-wcas-search-submit::before { display: none; content: none; } .gooek-searchhub .gooek-fibosearch-bridge button.dgwt-wcas-search-submit:hover { background: var(--gooek-sh-accent-hover, var(--theme-palette-color-2, #e5a30f)); box-shadow: 0 8px 24px rgba(254, 181, 17, 0.24); } /* ========================================================================== Suggestion dropdown geometry — shared by both backends Two problems, one cause and one fix. 1. The dropdown only spanned the input and the submit button, never the "All Categories" column. Both backends anchor to the

, and the form is `grid-column: 2 / 4` — it begins AFTER the catalog column, so no width value could ever make the dropdown reach back over it. 2. It sat flush on the bar's bottom edge, reading as part of the search box rather than as a list below it. ## Why this is structural rather than measured The first attempt measured the bar in JS and published the offset and width as custom properties. It was wrong in principle: it made a layout that is fixed by the grid depend on a measurement taken at one moment, so anything that changed the bar afterwards — a font swapping in, the header resizing, the dropdown opening before the listener bound — left it stale, and there was no way to tell from the markup whether it had run. The dropdown is now MOVED into .gooek-searchhub__suggestslot, which spans every grid column of the bar on a zero-height second row. "As wide as the bar" is then just `left: 0; right: 0` — true by construction, with nothing to recompute and nothing to get out of date. search-hub.js only relocates the node; it never positions it. --gooek-sh-suggest-gap (a setting) is the one value still passed in, because the gap is a preference rather than a consequence of the layout. The `!important` on the adopted rules is deliberate: FiboSearch writes `top` and `left` as INLINE styles on every keystroke, and inline beats any selector. They are scoped to the slot, so a dropdown that gets re-parented back to reverts to stock behaviour instead of breaking. ========================================================================== */ /* * The slot itself: every grid column of the bar, on a zero-height second row. * Because it spans the bar exactly, anything absolutely positioned inside it * with `left: 0; right: 0` is the width of the bar by construction. */ .gooek-searchhub .gooek-searchhub__suggestslot { grid-column: 1 / -1; grid-row: 2; position: relative; height: 0; min-width: 0; z-index: 60; } /* * Both backends' dropdowns, once adopted into the slot. * * `!important` is load-bearing here and is not laziness. FiboSearch's * fixPositionSuggestions() writes `top` and `left` as INLINE styles on every * keystroke and every resize; an inline style beats any selector, so these are * the only declarations that can hold. They are scoped to the slot, so if the * dropdown is ever re-parented back to -- which FiboSearch does when it * closes its mobile overlay -- these rules simply stop matching and it reverts * to stock behaviour rather than breaking. */ .gooek-searchhub .gooek-searchhub__suggestslot > .dgwt-wcas-suggestions-wrapp, .gooek-searchhub .gooek-searchhub__suggestslot > .ct-search-results { position: absolute !important; top: var(--gooek-sh-suggest-gap, 10px) !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: auto !important; max-width: none !important; margin: 0 !important; z-index: 70; padding-top: 0; border: 1px solid var(--gooek-sh-panel-border, var(--theme-border-color, #dadce0)); border-radius: 0 0 var(--gooek-sh-panel-radius, 0px) var(--gooek-sh-panel-radius, 0px); background: var(--gooek-sh-panel-bg, var(--theme-palette-color-8, #fff)); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10); pointer-events: auto; } /* * Fallback for the moment before adoption, or if it never happens: at least * detach the dropdown from the bar's bottom edge so it does not read as part * of the search box. Width and left stay FiboSearch's own in that state. */ .dgwt-wcas-suggestions-wrapp { margin-top: var(--gooek-sh-suggest-gap, 10px); } /* ========================================================================== Mobile folding search ========================================================================== */ .gooek-mobilesearch { position: relative; } .gooek-mobilesearch .gooek-mobilesearch__toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--gooek-ms-toggle-size, var(--mobile-trigger-size, 40px)); height: var(--gooek-ms-toggle-size, var(--mobile-trigger-size, 40px)); padding: 0; border: 0; background: transparent; color: var(--gooek-ms-toggle-color, currentColor); cursor: pointer; } .gooek-mobilesearch .gooek-mobilesearch__toggle:hover, .gooek-mobilesearch .gooek-mobilesearch.is-open > .gooek-mobilesearch__toggle { color: var(--gooek-ms-toggle-color-hover, var(--theme-palette-color-1, #feb511)); } .gooek-mobilesearch svg { width: var(--gooek-ms-icon-size, 20px); height: var(--gooek-ms-icon-size, 20px); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Icon swap. Both live in the DOM; only one is ever visible. */ .gooek-mobilesearch .gooek-mobilesearch__iconclose { display: none; } .gooek-mobilesearch .gooek-mobilesearch.is-open .gooek-mobilesearch__iconopen { display: none; } .gooek-mobilesearch .gooek-mobilesearch.is-open .gooek-mobilesearch__iconclose { display: inline-flex; } /* * The panel is anchored to the toggle but pulled back left so a 90vw panel * still fits inside the viewport when the toggle sits near the right edge. */ .gooek-mobilesearch .gooek-mobilesearch__panel { position: absolute; top: calc(100% + var(--gooek-ms-panel-gap, 8px)); left: calc(-1 * (var(--gooek-ms-toggle-size, var(--mobile-trigger-size, 40px)) + 28px)); right: auto; width: var(--gooek-ms-panel-width, 90vw); max-width: calc(100vw - 24px); z-index: 90; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity 0.2s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)), transform 0.2s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)), visibility 0s linear 0.24s; } .gooek-mobilesearch .gooek-mobilesearch.is-open .gooek-mobilesearch__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; } .gooek-mobilesearch .gooek-mobilesearch__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: var(--gooek-ms-bar-height, 52px); margin: 0; background: var(--gooek-ms-surface, var(--theme-palette-color-8, #fff)); border: var(--gooek-ms-border-width, 2px) solid var(--gooek-ms-border, var(--theme-border-color, #e2e8f0)); border-radius: var(--gooek-ms-radius, 0); box-shadow: 0 6px 18px -6px rgba(17, 18, 20, 0.18); } .gooek-mobilesearch .gooek-mobilesearch__form:focus-within { border-color: var(--gooek-ms-border-focus, var(--theme-palette-color-1, #feb511)); box-shadow: 0 0 0 3px rgba(254, 181, 17, 0.18); } .gooek-mobilesearch .gooek-mobilesearch__inputwrap { position: relative; display: flex; align-items: center; min-width: 0; width: 100%; height: 100%; } .gooek-mobilesearch .gooek-mobilesearch__input { width: 100%; min-width: 0; height: 100%; min-height: var(--gooek-ms-bar-height, 52px); margin: 0; padding: 0 16px; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--gooek-ms-text, var(--theme-headings-color, #1a1d20)); /* 16px minimum: iOS Safari zooms the viewport on focus below that. */ font-size: var(--gooek-ms-input-size, 16px); line-height: 1.5; } .gooek-mobilesearch .gooek-mobilesearch__input::placeholder { color: var(--gooek-ms-placeholder, var(--theme-text-color, #4a5568)); opacity: 1; } .gooek-mobilesearch .gooek-mobilesearch__submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: var(--gooek-ms-submit-min, 108px); height: 100%; min-height: var(--gooek-ms-bar-height, 52px); padding: 0 18px; border: 0; border-radius: 0; background: var(--gooek-ms-accent, var(--theme-palette-color-1, #feb511)); color: var(--gooek-ms-accent-text, var(--theme-headings-color, #111214)); font-family: var(--gooek-ms-font, var(--theme-button-font-family, var(--theme-font-family))); font-size: var(--gooek-ms-label-size, 14px); font-weight: var(--theme-button-font-weight, 700); letter-spacing: var(--theme-button-letter-spacing, 0.04em); text-transform: var(--gooek-ms-label-transform, uppercase); line-height: 1; cursor: pointer; } .gooek-mobilesearch .gooek-mobilesearch__submit:hover { background: var(--gooek-ms-accent-hover, var(--theme-palette-color-2, #e5a30f)); } /* FiboSearch bridge — mobile */ .gooek-mobilesearch .gooek-fibosearch-bridge.dgwt-wcas-search-wrapp { width: 100%; min-width: 0; max-width: none; margin: 0; color: inherit; line-height: inherit; text-align: inherit; } .gooek-mobilesearch .gooek-fibosearch-bridge input[type="search"].dgwt-wcas-search-input { order: 1; flex: 1 1 auto; width: auto; min-width: 0; height: 100%; min-height: var(--gooek-ms-bar-height, 52px); margin: 0; padding: 0 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--gooek-ms-text, var(--theme-headings-color, #1a1d20)); font-size: var(--gooek-ms-input-size, 16px); line-height: 1.5; } .gooek-mobilesearch .gooek-fibosearch-bridge input[type="search"].dgwt-wcas-search-input:focus, .gooek-mobilesearch .gooek-fibosearch-bridge input[type="search"].dgwt-wcas-search-input:hover { border: 0; outline: 0; background: transparent; box-shadow: none; } /* * Same treatment as the desktop bar: laid out at the end of the field rather * than absolutely positioned against whichever ancestor happens to be the * containing block. Applied here too so the mobile panel cannot drift into the * same problem the desktop one had. `relative` rather than `static` for the * reason spelled out on the desktop rule -- the .dgwt-wcas-close overlay has * to stay contained by the button, or the whole field becomes a clear button. */ .gooek-mobilesearch .gooek-fibosearch-bridge .dgwt-wcas-preloader, .gooek-mobilesearch .gooek-fibosearch-bridge .dgwt-wcas-voice-search { position: relative; right: auto; top: auto; z-index: 1; flex: none; align-self: center; order: 2; width: 28px; height: 28px; margin: 0; background-position: center; pointer-events: auto; } .gooek-mobilesearch .gooek-fibosearch-bridge .dgwt-wcas-preloader { order: 3; margin-right: 6px; } .gooek-mobilesearch .gooek-fibosearch-bridge .dgwt-wcas-preloader.dgwt-wcas-close { z-index: 2; cursor: pointer; } .gooek-mobilesearch .gooek-fibosearch-bridge button.dgwt-wcas-search-submit { position: relative; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: var(--gooek-ms-submit-min, 108px); height: 100%; min-height: var(--gooek-ms-bar-height, 52px); padding: 0 18px; border: 0; border-radius: 0; background: var(--gooek-ms-accent, var(--theme-palette-color-1, #feb511)); color: var(--gooek-ms-accent-text, var(--theme-headings-color, #111214)); font-family: var(--gooek-ms-font, var(--theme-button-font-family, var(--theme-font-family))); font-size: var(--gooek-ms-label-size, 14px); font-weight: var(--theme-button-font-weight, 700); letter-spacing: var(--theme-button-letter-spacing, 0.04em); text-transform: var(--gooek-ms-label-transform, uppercase); line-height: 1; cursor: pointer; } .gooek-mobilesearch .gooek-fibosearch-bridge button.dgwt-wcas-search-submit::before { display: none; content: none; } /* ========================================================================== FiboSearch suggestion dropdown NOT scoped to our item: FiboSearch appends this list to , outside our subtree, so a descendant selector would never match. These are the rules that are actually live upstream — the similarly-named autool-search-style.css is dead there (nothing enqueues it) and was deliberately not ported. ========================================================================== */ .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 64px; padding: 8px 12px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product:hover, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product.dgwt-wcas-suggestion-selected { background: var(--gooek-sh-suggestion-hover, #f9fafb); } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-si { grid-column: 1; display: flex; align-items: center; justify-content: center; width: 56px; height: 48px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-si img { max-width: 48px; max-height: 48px; object-fit: contain; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-content-wrapp { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, 124px); align-items: center; column-gap: 12px; width: 100%; min-width: 0; padding-left: 0; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-st, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-st-title { min-width: 0; max-width: 100%; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-st-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-sp { width: 100%; min-width: 0; padding-left: 0; line-height: 1.15; text-align: right; white-space: normal; overflow: visible; text-overflow: clip; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-meta { grid-column: 2; display: flex; justify-content: flex-end; width: 100%; min-width: 0; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .woocommerce-Price-amount { display: block; max-width: 100%; line-height: 1.1; white-space: normal; overflow-wrap: anywhere; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .screen-reader-text { display: none !important; } @media (max-width: 689.98px), (hover: none) and (pointer: coarse) { .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product { grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; padding-right: 10px; padding-left: 10px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-content-wrapp { grid-template-columns: minmax(0, 1fr) minmax(82px, 96px); column-gap: 10px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-si { width: 48px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-si img { max-width: 42px; max-height: 42px; } } /* Respect a reduced-motion preference: keep the state changes, drop the moves. */ @media (prefers-reduced-motion: reduce) { .gooek-searchhub .gooek-searchhub__mega, .gooek-searchhub .gooek-searchhub__card, .gooek-searchhub .gooek-searchhub__triggerarrow, .gooek-mobilesearch .gooek-mobilesearch__panel { transition-duration: 0.01ms; transform: none; } } /* ========================================================================== Dropdown panels (Header Kit → Dropdowns) ========================================================================== Panels are built from blocks, so this file styles only the chrome and the four blocks we ship. Anything the author drops in from core keeps its own styling — that is the point of using the block editor rather than a fixed template. The --gooek-dd-* variables are set per dropdown by Renderer::style_vars(), so a panel can be restyled without touching its blocks. ========================================================================== */ .gooek-dd { background: var(--gooek-dd-bg, transparent); } .gooek-dd__inner { max-width: var(--gooek-dd-max-width, 100%); margin: 0 auto; padding: var(--gooek-dd-padding, 24px); } .gooek-dd__title { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gooek-sh-placeholder, #4a5568); } /* --- Category menu block --- */ .gooek-dd__menulist { margin: 0; padding: 0; list-style: none; } .gooek-dd__menuitem > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 6px; color: var(--gooek-sh-text, inherit); text-decoration: none; transition: background 0.15s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)); } .gooek-dd__menuitem > a:hover { background: var(--gooek-sh-hover-tint, rgba(0, 0, 0, 0.06)); } .gooek-dd__menuitem > a:focus-visible { outline: 2px solid var(--gooek-sh-border-focus, #feb511); outline-offset: -2px; } .gooek-dd__menucount { font-size: 12px; opacity: 0.6; } /* --- Card grids (category + product blocks share the grid) --- */ .gooek-dd__grid { display: grid; /* * auto-fit + minmax rather than a hard column count: the author's chosen * --gooek-dd-cols is the maximum, but a narrow panel reflows instead of * overflowing. A fixed repeat(N, 1fr) is what makes mega menus break on * mid-size screens. */ grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; } @media (min-width: 900px) { .gooek-dd__grid { grid-template-columns: repeat(var(--gooek-dd-cols, 3), minmax(0, 1fr)); } } .gooek-dd__card, .gooek-dd__product { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--gooek-sh-text, inherit); text-decoration: none; } .gooek-dd__card:focus-visible, .gooek-dd__product:focus-visible { outline: 2px solid var(--gooek-sh-border-focus, #feb511); outline-offset: 3px; } .gooek-dd__cardmedia, .gooek-dd__productmedia, .gooek-dd__promomedia { display: block; overflow: hidden; border-radius: 8px; background: var(--gooek-dd-tile-bg, #f5f6f7); } .gooek-dd__cardmedia img, .gooek-dd__productmedia img, .gooek-dd__promomedia img { display: block; width: 100%; height: auto; transition: transform 0.25s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)); } .gooek-dd__card:hover .gooek-dd__cardmedia img, .gooek-dd__product:hover .gooek-dd__productmedia img { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .gooek-dd__cardmedia img, .gooek-dd__productmedia img, .gooek-dd__promomedia img { transition: none; } .gooek-dd__card:hover .gooek-dd__cardmedia img, .gooek-dd__product:hover .gooek-dd__productmedia img { transform: none; } } .gooek-dd__cardtitle, .gooek-dd__producttitle { font-size: 14px; font-weight: 600; line-height: 1.3; } .gooek-dd__card:hover .gooek-dd__cardtitle, .gooek-dd__product:hover .gooek-dd__producttitle { color: var(--gooek-sh-accent-hover, #e5a30f); } /* Same price rule as the search panel: current first, original after. */ .gooek-dd__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; } .gooek-dd__pricewas { font-size: 12px; text-decoration: line-through; opacity: 0.55; } .gooek-dd__pricenow { font-size: 13px; font-weight: 700; color: var(--gooek-sh-accent-hover, #e5a30f); } /* --- Promo block --- */ .gooek-dd__promo { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 10px; background: var(--gooek-sh-surface-alt, #f9fafb); } .gooek-dd__promoheading { font-size: 16px; font-weight: 700; } .gooek-dd__promotext { font-size: 13px; opacity: 0.8; } .gooek-dd__promolink { align-self: flex-start; margin-top: 4px; padding: 8px 14px; border-radius: 6px; background: var(--gooek-sh-accent, #feb511); color: var(--gooek-sh-accent-text, #111214); font-size: 13px; font-weight: 600; text-decoration: none; } .gooek-dd__promolink:hover { background: var(--gooek-sh-accent-hover, #e5a30f); } /* ========================================================================== Card layout templates ========================================================================== A template is a starting point, not a cage. Each `[data-card-layout]` block below sets sensible values; every one of them reads through a --gooek-dd-card-* variable first, so any control the author touches wins without the template needing to know about it. Read every declaration as: "unless overridden, use this". ========================================================================== */ .gooek-dd__cards, .gooek-dd__products { --gooek-dd-card-items: var(--gooek-dd-card-items, stretch); } .gooek-dd__grid { gap: var(--gooek-dd-card-gap, 16px); } .gooek-dd__card, .gooek-dd__product { padding: var(--gooek-dd-card-padding, 0); border-radius: var(--gooek-dd-card-radius, 0); border: var(--gooek-dd-card-border-width, 0) solid var(--gooek-dd-card-border-color, var(--gooek-sh-panel-border, #e2e8f0)); background: var(--gooek-dd-card-bg, transparent); text-align: var(--gooek-dd-card-align, inherit); } .gooek-dd__cardtitle, .gooek-dd__producttitle { font-size: var(--gooek-dd-card-title-size, 14px); line-height: var(--gooek-sh-title-leading, 1.2); letter-spacing: var(--gooek-sh-title-tracking, -0.02em); } .gooek-dd__cardmedia, .gooek-dd__productmedia { border-radius: var(--gooek-dd-card-image-radius, 12px); } .gooek-dd__cardmedia img, .gooek-dd__productmedia img { aspect-ratio: var(--gooek-dd-card-image-ratio, auto); object-fit: var(--gooek-dd-card-image-fit, cover); } /* --- stacked: the default, image above text --- */ [data-card-layout="stacked"] .gooek-dd__card, [data-card-layout="stacked"] .gooek-dd__product { flex-direction: column; align-items: var(--gooek-dd-card-items, stretch); } /* --- horizontal: image beside text --- */ [data-card-layout="horizontal"] .gooek-dd__card, [data-card-layout="horizontal"] .gooek-dd__product { flex-direction: row; align-items: center; gap: 12px; } [data-card-layout="horizontal"] .gooek-dd__cardmedia, [data-card-layout="horizontal"] .gooek-dd__productmedia { flex: 0 0 var(--gooek-dd-card-media-size, 72px); width: var(--gooek-dd-card-media-size, 72px); } [data-card-layout="horizontal"] .gooek-dd__cardmedia img, [data-card-layout="horizontal"] .gooek-dd__productmedia img { aspect-ratio: var(--gooek-dd-card-image-ratio, 1/1); } /* --- overlay: text sits on the image --- */ [data-card-layout="overlay"] .gooek-dd__card, [data-card-layout="overlay"] .gooek-dd__product { position: relative; justify-content: flex-end; min-height: var(--gooek-dd-card-min-height, 160px); overflow: hidden; border-radius: var(--gooek-dd-card-radius, 12px); } [data-card-layout="overlay"] .gooek-dd__cardmedia, [data-card-layout="overlay"] .gooek-dd__productmedia { position: absolute; inset: 0; border-radius: 0; } [data-card-layout="overlay"] .gooek-dd__cardmedia img, [data-card-layout="overlay"] .gooek-dd__productmedia img { width: 100%; height: 100%; aspect-ratio: auto; } /* * The scrim is what makes overlay text legible on an unknown image. Without it * a pale product photo renders white-on-white and the card looks empty. */ [data-card-layout="overlay"] .gooek-dd__card::after, [data-card-layout="overlay"] .gooek-dd__product::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--gooek-dd-scrim, rgba(0, 0, 0, 0.6)) 0%, transparent 62%); pointer-events: none; } [data-card-layout="overlay"] .gooek-dd__cardtitle, [data-card-layout="overlay"] .gooek-dd__producttitle, [data-card-layout="overlay"] .gooek-dd__price { position: relative; z-index: 1; padding: 0 12px; color: #fff; } [data-card-layout="overlay"] .gooek-dd__cardtitle, [data-card-layout="overlay"] .gooek-dd__producttitle { padding-bottom: 12px; } [data-card-layout="overlay"] .gooek-dd__price { padding-bottom: 12px; } [data-card-layout="overlay"] .gooek-dd__pricenow { color: #fff; } /* Hover colour-shift would be invisible on the scrim, so lift instead. */ [data-card-layout="overlay"] .gooek-dd__card:hover .gooek-dd__cardtitle, [data-card-layout="overlay"] .gooek-dd__product:hover .gooek-dd__producttitle { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* --- minimal: text only --- */ [data-card-layout="minimal"] .gooek-dd__cardmedia, [data-card-layout="minimal"] .gooek-dd__productmedia { display: none; } [data-card-layout="minimal"] .gooek-dd__card, [data-card-layout="minimal"] .gooek-dd__product { padding: var(--gooek-dd-card-padding, 10px 0); border-bottom: var(--gooek-dd-card-border-width, 1px) solid var(--gooek-dd-card-border-color, var(--gooek-sh-panel-border, #e2e8f0)); border-radius: 0; } /* --- compact: small image, tight text --- */ [data-card-layout="compact"] .gooek-dd__card, [data-card-layout="compact"] .gooek-dd__product { flex-direction: row; align-items: center; gap: 10px; } [data-card-layout="compact"] .gooek-dd__cardmedia, [data-card-layout="compact"] .gooek-dd__productmedia { flex: 0 0 var(--gooek-dd-card-media-size, 48px); width: var(--gooek-dd-card-media-size, 48px); border-radius: var(--gooek-dd-card-image-radius, 6px); } [data-card-layout="compact"] .gooek-dd__cardmedia img, [data-card-layout="compact"] .gooek-dd__productmedia img { aspect-ratio: var(--gooek-dd-card-image-ratio, 1/1); } [data-card-layout="compact"] .gooek-dd__cardtitle, [data-card-layout="compact"] .gooek-dd__producttitle { font-size: var(--gooek-dd-card-title-size, 13px); } /* Editor placeholder chrome. */ .gooek-dd-editor { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px dashed #c3c4c7; border-radius: 6px; background: #f6f7f7; } .gooek-dd-editor__label { font-size: 13px; } .gooek-dd-editor__note, .gooek-dd-editor__hint { font-size: 12px; color: #646970; } /* ========================================================================== Menu-item panels ========================================================================== Same geometry as the search panel: hangs from the bottom of the header row and centres on the container, so a menu panel and the All Categories panel line up with each other rather than each doing their own thing. ========================================================================== */ .gooek-menupanel { position: static; } .gooek-menupanel__panel { position: absolute; top: calc(100% + var(--gooek-sh-panel-drop, 0px) + var(--gooek-sh-panel-offset, 0px)); left: calc(50% + var(--gooek-sh-panel-offset-x, 0px)); width: min( calc(100vw - 2 * var(--gooek-sh-panel-gutter, 16px)), var(--gooek-sh-panel-max-width, var(--theme-normal-container-max-width, var(--theme-container-width, 1440px))) ); z-index: 80; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 6px); transition: opacity 0.2s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)), transform 0.2s var(--gooek-sh-ease, cubic-bezier(0.4, 0, 0.2, 1)), visibility 0s linear 0.24s; background: var(--gooek-sh-panel-bg, var(--theme-palette-color-8, #fff)); border: 1px solid var(--gooek-sh-panel-border, var(--theme-border-color, #dadce0)); border-top: 0; border-radius: 0 0 var(--gooek-sh-panel-radius, 0px) var(--gooek-sh-panel-radius, 0px); /* * Two-layer shadow, both layers with a negative spread: a tight contact * shadow under the header edge plus a wide soft one. A single large blur * reads as a floating card, which is wrong for a panel attached to the * header. Values follow the same scale anker.com uses. */ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10); } .gooek-menupanel.is-open > .gooek-menupanel__panel, .gooek-menupanel:focus-within > .gooek-menupanel__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; } @media (hover: hover) and (pointer: fine) { .gooek-menupanel:hover > .gooek-menupanel__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; } } @media (prefers-reduced-motion: reduce) { .gooek-menupanel__panel { transition: opacity 0.01ms linear, visibility 0s linear 0.01ms; transform: translate(-50%, 0); } }