:root{--wp--custom--spacing--small:var(--wp--preset--spacing--30, clamp(1.5rem, 5vw, 2rem));--wp--custom--spacing--medium:var(--wp--preset--spacing--50, clamp(2.5rem, 8vw, 4rem));--wp--custom--spacing--large:var(--wp--preset--spacing--60, clamp(2.5rem, 8vw, 6rem));--wp--custom--spacing--outer:max(1.25rem, 4vw);--wp--preset--spacing--80:min(8rem, 12vw)}html{scroll-behavior:smooth}body{-moz-osx-font-smoothing:var(--wp--custom--typography--font-smoothing--moz,auto);-webkit-font-smoothing:var(--wp--custom--typography--font-smoothing--webkit,auto)}a{text-decoration-style:var(--wp--custom--elements--link--static--text-decoration-style,solid);text-decoration-thickness:var(--wp--custom--elements--link--text-decoration-thickness,1px);text-underline-offset:var(--wp--custom--elements--link--text-underline-offset,.25ch)}a:hover,a:focus{text-decoration-style:var(--wp--custom--elements--link--interactive--text-decoration-style,dashed)}:where(.wp-site-blocks *:focus){outline-width:1px;outline-style:solid}a:active{text-decoration:none}@media (min-width:600px){.site-logo-title{display:none}.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-page-list{align-items:flex-start!important}}@media (max-width:600px){.has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation-item,.has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-page-list{align-items:flex-start!important}}.wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title{display:flex;flex-wrap:nowrap;max-width:100%;align-items:center;gap:.5rem;padding-bottom:var(--wp--preset--spacing--30);position:relative;padding-inline-end:52px}.wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title::after{content:"";position:absolute;left:calc(-1 * var(--wp--preset--spacing--30));right:calc(-1 * var(--wp--preset--spacing--30));bottom:0;height:1px;background:#8080801d}.wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title img{max-height:42px!important;height:auto!important;width:auto!important}.wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title .site-title{font-size:1.25rem;font-weight:700;color:var(--wp--preset--color--foreground);text-transform:uppercase;letter-spacing:-.02em;box-sizing:border-box;line-height:1.15}.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content{padding-top:var(--wp--preset--spacing--30)}.has-modal-open .wp-block-navigation__responsive-container-close{background-color:var(--wp--preset--color--tertiary);padding:.625rem;border-radius:100%;top:-2.5px!important}.has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__container{gap:0!important;width:100%}.has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navrigation__containe,.has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__container ul{row-gap:0.75rem!important;width:-webkit-fill-available;max-width:100%}.has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content>ul.wp-block-navigation__container>li.wp-block-navigation-item:not(.wp-block-navigation__submenu-container){border-bottom:1px solid #8080801d;padding-top:.75rem;padding-bottom:.75rem;width:-webkit-fill-available;max-width:100%}.has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{padding:.75rem .75rem 0 0.75rem!important;gap:0.75rem!important}.has-modal-open .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container>li:not(.wp-block-navigation__submenu-container)>a.wp-block-navigation-item__content{font-size:1.25rem;font-weight:600}.has-modal-open .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__submenu-container{padding-top:0.75rem!important}.has-modal-open .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation-item a{font-size:1rem!important}html.has-modal-open header.wp-block-template-part,html.has-modal-open header.wp-block-template-part :has(.wp-block-navigation__responsive-dialog){backdrop-filter:none!important;transform:none!important;translate:none!important;filter:none!important;animation:none!important}html.has-modal-open body:has(.entry-content>.ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass,html.has-modal-open body:not(:has(.entry-content>.ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass{animation:none!important;backdrop-filter:none!important;translate:none!important}@media (max-width:781px){body:not(:has(.wp-block-navigation__responsive-container.disable-default-overlay)) header.wp-block-template-part :is(.ext-nav-extras-phone,.ext-nav-extras-btn,.ext-nav-extras-social):not(.ext-nav-extras-mobile *){display:none}header.wp-block-template-part .ext-nav-extras:not(:has(nav,.wp-block-navigation)){display:none}}.ext-nav-extras-mobile{display:none}.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile{display:flex;flex-direction:column;align-items:stretch;gap:var(--wp--preset--spacing--20);margin-top:var(--wp--preset--spacing--30)}.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-button{width:100%}.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-button__link{display:block;text-align:center;width:100%}.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone,.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone a,.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone p{font-size:1.25rem!important;font-weight:600!important}.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-social-link{width:32px;height:32px}.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-social-link svg{width:28px;height:28px}.wp-block-navigation .wp-block-navigation-item a:hover,.wp-block-navigation .wp-block-navigation-item a:focus{text-decoration:underline;text-decoration-style:solid}nav .wp-block-pages-list__item.wp-block-navigation-item.menu-item-home{display:none}.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)}.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){padding-top:clamp(1rem, var(--wp--style--root--padding-top), 20rem);padding-right:clamp(1rem, var(--wp--style--root--padding-right), 20rem);padding-bottom:clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);padding-left:clamp(1rem, var(--wp--style--root--padding-left), 20rem)}.wp-element-button{transition:background-color 0.15s ease}.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background):hover,.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover{background-color:rgb(159 159 159 / .2)}.wp-block-table.is-style-stripes tbody tr:nth-child(odd){background-color:var(--wp--custom--blocks--core-table--variant-stripes--color--background,var(--wp--preset--color--tertiary))}footer.wp-block-template-part:not([style*="margin-top"]){margin-top:0}blockquote:is(.is-style-plain){border:none;padding-left:0}:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper){border-color:var(--wp--custom--elements--input--border--color);border-radius:var(--wp--custom--elements--button--border--radius);border-width:var(--wp--custom--elements--input--border--width)}:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input{border-color:#fff0}.wp-block-search .wp-block-search__input{border-radius:var(--wp--custom--elements--button--border--radius)}.wp-block-image[style*="-radius"]:not([style*="overflow"]){overflow:hidden}.block-editor-block-list__block.wp-block.is-default-size.wp-block-site-logo .components-resizable-box__container,.wp-block-site-logo.is-default-size img{max-height:42px!important;height:auto!important;width:auto!important}.wp-block-site-logo img[src*="extendify-demo-"],.wp-block-site-logo img[src*="ext-custom-logo-"]{filter:var(--wp--preset--duotone--primary-foreground);min-width:40px}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}input,textarea{caret-color:inherit;outline-color:inherit}:where(.wp-block-post-comments-form) input:not([type="submit"]),:where(.wp-block-post-comments-form) textarea{background-color:var(--wp--preset--color--background);color:var(--wp--preset--color--foreground);border-color:inherit}.woocommerce-Tabs-panel--description h2,.woocommerce-Reviews-title{font-size:var(--wp--preset--font-size--medium)}.wp-block-button.wc-block-components-product-button{flex-direction:row;flex-wrap:wrap;justify-content:start;gap:1rem}.wp-block-button.wc-block-components-product-button a.added_to_cart{margin-top:0}.woocommerce-checkout.woocommerce-page header.wp-block-template-part nav.wp-block-navigation{visibility:hidden}.wp-site-blocks .wp-block-group.woocommerce.product{margin-top:0;margin-bottom:0}.wc-block-product-template__responsive{grid-row-gap:2rem}.wc-block-components-product-button__button{z-index:1}.sticky-header-offset-container .entry-content>.wp-block-group{scroll-margin-top:var(--wp--preset--spacing--60)}:not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--group--"][class*="item-card-1"]:not(.has-background){background-color:var(--wp--preset--color--background)}:not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--group--"][class*="item-card-1"]:not(.has-background)::before{background-color:var(--wp--preset--color--background)!important}:not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--image--"]:not(.has-background)::before{background-color:var(--wp--preset--color--tertiary)!important}:not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--group--"][class*="item-card-1"]::before,:not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--media-text--"]::before{background-color:var(--wp--preset--color--background)!important}.block-editor-block-preview__content-iframe [class*="is-style-ext-preset--group--natural-1"][class*="item-card-1"]{background-color:transparent!important}:root{--grid-vector-bg:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQ0MCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIG9wYWNpdHk9IjAuMDkiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utb3BhY2l0eT0iMC43IiBzdHJva2Utd2lkdGg9IjEuMjYwNyI+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI2MjQuOTk1IiB4Mj0iMTQ2MC45NiIgeTI9IjYyNC45OTUiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI5NDcuNzMzIiB4Mj0iMTQ2MC45NiIgeTI9Ijk0Ny43MzMiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIzMDIuMjU2IiB4Mj0iMTQ2MC45NiIgeTI9IjMwMi4yNTYiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI0NjMuNjI0IiB4Mj0iMTQ2MC45NiIgeTI9IjQ2My42MjQiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI3ODYuMzYyIiB4Mj0iMTQ2MC45NiIgeTI9Ijc4Ni4zNjIiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIxNDAuODg1IiB4Mj0iMTQ2MC45NiIgeTI9IjE0MC44ODUiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI1NDQuMzExIiB4Mj0iMTQ2MC45NiIgeTI9IjU0NC4zMTEiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI4NjcuMDQ5IiB4Mj0iMTQ2MC45NiIgeTI9Ijg2Ny4wNDkiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIyMjEuNTczIiB4Mj0iMTQ2MC45NiIgeTI9IjIyMS41NzMiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIzODIuOTQiIHgyPSIxNDYwLjk2IiB5Mj0iMzgyLjk0IiAvPgogICAgPGxpbmUgeDE9Ii01MC42MTcyIiB5MT0iNzA1LjY4MiIgeDI9IjE0NjAuOTYiIHkyPSI3MDUuNjgyIiAvPgogICAgPGxpbmUgeDE9Ii01MC42MTcyIiB5MT0iNjAuMjAxNyIgeDI9IjE0NjAuOTYiIHkyPSI2MC4yMDE3IiAvPgogICAgPGxpbmUgeDE9IjY0Mi4xMzgiIHkxPSItNDguODQ3NyIgeDI9IjY0Mi4xMzgiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjMxOS4zOTgiIHkxPSItNDguODQ3NyIgeDI9IjMxOS4zOTgiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9Ijk2NC44NzQiIHkxPSItNDguODQ3NyIgeDI9Ijk2NC44NzQiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjEyODcuNjEiIHkxPSItNDguODQ3NyIgeDI9IjEyODcuNjEiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjE1OC4wMjgiIHkxPSItNDguODQ3NyIgeDI9IjE1OC4wMjgiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjgwMy41MDQiIHkxPSItNDguODQ3NyIgeDI9IjgwMy41MDQiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjQ4MC43NjgiIHkxPSItNDguODQ3NyIgeDI9IjQ4MC43NjgiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjExMjYuMjQiIHkxPSItNDguODQ3NyIgeDI9IjExMjYuMjQiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9Ijc3LjM0NTIiIHkxPSItNDguODQ3NyIgeDI9Ijc3LjM0NTEiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjcyMi44MjIiIHkxPSItNDguODQ3NyIgeDI9IjcyMi44MjIiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjQwMC4wODEiIHkxPSItNDguODQ3NyIgeDI9IjQwMC4wODEiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjEwNDUuNTYiIHkxPSItNDguODQ3NyIgeDI9IjEwNDUuNTYiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjEzNjguMyIgeTE9Ii00OC44NDc3IiB4Mj0iMTM2OC4zIiB5Mj0iMTExOC41NiIgLz4KICAgIDxsaW5lIHgxPSIyMzguNzE1IiB5MT0iLTQ4Ljg0NzciIHgyPSIyMzguNzE1IiB5Mj0iMTExOC41NiIgLz4KICAgIDxsaW5lIHgxPSI4ODQuMTkyIiB5MT0iLTQ4Ljg0NzciIHgyPSI4ODQuMTkyIiB5Mj0iMTExOC41NiIgLz4KICAgIDxsaW5lIHgxPSI1NjEuNDUxIiB5MT0iLTQ4Ljg0NzciIHgyPSI1NjEuNDUxIiB5Mj0iMTExOC41NiIgLz4KICAgIDxsaW5lIHgxPSIxMjA2LjkzIiB5MT0iLTQ4Ljg0NzciIHgyPSIxMjA2LjkzIiB5Mj0iMTExOC41NiIgLz4KICA8L2c+CiAgPGcgb3BhY2l0eT0iMC41IiBmaWxsPSJjdXJyZW50Q29sb3IiPgogICAgPHJlY3QgeD0iODAzLjU2MyIgeT0iNzg2LjMwNSIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iODAuMjI2MiIgZmlsbC1vcGFjaXR5PSIwLjQiIC8+CiAgICA8cmVjdCB4PSI0MDAuMTQiIHk9Ijc4Ni4zMDUiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9IjExMjYuNzYiIHk9IjIyMi40MyIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iNzkuMDgwMSIgZmlsbC1vcGFjaXR5PSIwLjA4IiAvPgogICAgPHJlY3QgeD0iNDgwLjM2NyIgeT0iNDY0LjIwMyIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iNzkuMDgwMSIgZmlsbC1vcGFjaXR5PSIwLjEzIiAvPgogICAgPHJlY3QgeD0iMTA0NS4zOSIgeT0iMzAyLjY1NiIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iNzkuMDgwMSIgZmlsbC1vcGFjaXR5PSIwLjAzIiAvPgogICAgPHJlY3QgeD0iMzk5Ljk5NCIgeT0iMjIyLjQzIiB3aWR0aD0iODAuMjI2MiIgaGVpZ2h0PSI3OS4wODAxIiBmaWxsLW9wYWNpdHk9IjAuMTMiIC8+CiAgICA8cmVjdCB4PSIxMDQ1LjM5IiB5PSIyMjIuNDMiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9Ijc5LjA4MDEiIGZpbGwtb3BhY2l0eT0iMC4wOCIgLz4KICAgIDxyZWN0IHg9IjM5OS45OTQiIHk9IjQ2NC4yMDMiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9Ijc5LjA4MDEiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICAgIDxyZWN0IHg9IjMxOS45MTQiIHk9Ijc4Ni4zMDUiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9IjMxOS45MTQiIHk9Ijg2Ni41MzEiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgxLjM3MjMiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9IjE1OC4zMTUiIHk9IjcwNi4wNzgiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9Ijk2NS4xNjIiIHk9IjYwLjgzMiIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iODAuMjI2MiIgZmlsbC1vcGFjaXR5PSIwLjEzIiAvPgogICAgPHJlY3QgeD0iODg0LjA1OSIgeT0iLTE5Ljg1NTUiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9Ijc5LjUwNjIiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICAgIDxyZWN0IHg9Ijg4NC4wNTkiIHk9IjYwLjQwMjMiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjAyODUiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICAgIDxyZWN0IHg9IjE1OC4zMTUiIHk9IjEzOS45MSIgd2lkdGg9IjgxLjM3MjMiIGhlaWdodD0iODIuNTE4NCIgZmlsbC1vcGFjaXR5PSIwLjE4IiAvPgogICAgPHJlY3QgeD0iNzYuOTQzNCIgeT0iNTkuNjgzNiIgd2lkdGg9IjgxLjM3MjMiIGhlaWdodD0iODAuMjI2MiIgZmlsbC1vcGFjaXR5PSIwLjE4IiAvPgogICAgPHJlY3QgeD0iLTMuMjgzMiIgeT0iNjAuODI4MSIgd2lkdGg9IjgxLjM3MjMiIGhlaWdodD0iODAuMjI2MiIgZmlsbC1vcGFjaXR5PSIwLjE4IiAvPgogICAgPHJlY3QgeD0iNzYuOTQzNCIgeT0iMTM5LjkxIiB3aWR0aD0iODEuMzcyMyIgaGVpZ2h0PSI4Mi41MTg0IiBmaWxsLW9wYWNpdHk9IjAuMTgiIC8+CiAgICA8cmVjdCB4PSI0MDAuMTQxIiB5PSItMjAuNTQzIiB3aWR0aD0iODEuMzcyMyIgaGVpZ2h0PSI4MC4yMjYyIiBmaWxsLW9wYWNpdHk9IjAuMiIgLz4KICAgIDxyZWN0IHg9IjE1OC4zMTUiIHk9IjMwMS41MDgiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgxLjM3MjMiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9IjExMjYuNzYiIHk9IjcwNi4wNzgiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICAgIDxyZWN0IHg9IjEyMDYuOTkiIHk9Ijc4Ni4zMDUiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICA8L2c+Cjwvc3ZnPg==); } /* * CSS related to prism vibe */ /* * CSS related to wave vibe */ [class*="is-style-ext-preset--group--"][class*="--section"].has-tertiary-background-color:has( + .has-background-background-color > .wp-block-cover.alignfull )::after { content: none !important; } [class*="is-style-ext-preset--group--"][class*="--section"].has-tertiary-background-color:has( + .has-background-background-color > .wp-block-cover.alignfull ) { margin-bottom: 0 !important; } [class*="is-style-ext-preset--group--"][class*="--section"].has-background-background-color:has(.wp-block-cover.alignfull) + .has-tertiary-background-color::before { content: none !important; } [class*="is-style-ext-preset--group--"][class*="--section"].has-background-background-color:has(.wp-block-cover.alignfull) + .has-tertiary-background-color { margin-top: 0 !important; } /* * utilities */ .m-0 { margin: 0 !important; } .z-0 { z-index: 0 !important; } .z-10 { z-index: 10 !important; } .z-20 { z-index: 20 !important; } .z-30 { z-index: 30 !important; } .d-none { display: none; } .d-block { display: block; } @media (min-width: 640px) { .sm-d-none { display: none; } .sm-d-block { display: block; } } @media (min-width: 768px) { .md-d-none { display: none; } .md-d-block { display: block; } } @media (min-width: 1024px) { .lg-d-none { display: none; } .lg-d-block { display: block; } } /* RTL-only fix for Gutenberg Group left justification */ [dir="rtl"] [class*="wp-container-core-group-is-layout-"].ext-is-logical-start.is-content-justification-left > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { margin-inline-start: 0 !important; margin-inline-end: auto !important; } .no-underline, .no-underline a { text-decoration: none; } /* CSS for extendify-agent vibe previews */ .extendify-agent .preview-is-style-ext-preset--group--matrix-1--section .preview-is-style-ext-preset--group--matrix-1--item-card-1--align-center { border: solid 6px color-mix(in oklab, var(--wp--preset--color--foreground) 10%, transparent) !important; } .extendify-agent .preview-is-style-ext-preset--group--wave-1--section { --wave-ratio: 1440 / 80; overflow: visible; } .extendify-agent .preview-is-style-ext-preset--group--wave-1--section .preview-is-style-ext-preset--group--wave-1--item-card-1--align-center { position: relative; overflow: visible; } .extendify-agent .preview-is-style-ext-preset--group--wave-1--section .preview-is-style-ext-preset--group--wave-1--item-card-1--align-center::after { content: ""; position: absolute; width: 150%; left: 50%; transform: translateX(-35%); aspect-ratio: var(--wave-ratio); background-color: var(--wp--preset--color--background); -webkit-mask: var(--wave-mask) no-repeat center / 100% 100%; mask: var(--wave-mask) no-repeat center / 100% 100%; bottom: -1px; pointer-events: none; z-index: 1; } .extendify-agent .preview-is-style-ext-preset--group--wave-1--section .preview-is-style-ext-preset--group--wave-1--item-card-1--align-center::before { content: ""; position: absolute; width: 150%; left: 50%; transform: translateX(-65%) scale(-1, -1); aspect-ratio: var(--wave-ratio); background-color: var(--wp--preset--color--background); -webkit-mask: var(--wave-mask) no-repeat center / 100% 100%; mask: var(--wave-mask) no-repeat center / 100% 100%; top: -1px; pointer-events: none; z-index: 1; } /* * -------------------------------------------------------- * Modular Header System * -------------------------------------------------------- * * Layout (positioning): * - .ext-header-sticky → position: sticky + admin-bar handling * - .ext-header-overlay → hero section overlap (negative margin) * * Appearance: * - .ext-header-glass → static glassmorphism (bg + blur + radius) * - .ext-header--dark → dark color scheme: white text + dark scrim/glass tint * * Behavior: * - .ext-header-sticky--floating-pill → scroll-driven intensification of glass + layout shift * * Compositions: * - ext-header-sticky → just sticky, theme bg * - ext-header-overlay → overlay, transparent * - ext-header-overlay ext-header--dark → overlay + dark scrim + white text * - ext-header-sticky ext-header-glass → static glass header * - ext-header-sticky ext-header-glass ext-header--dark → static dark glass * - ext-header-sticky ext-header-overlay ext-header-glass ext-header-sticky--floating-pill → animated glass over hero * - + ext-header--dark on the above → animated DARK glass over hero */ :root { --ext-header-height: 96px; --ext-header-offset: 1rem; --ext-header-blur-start: 4px; --ext-header-blur-end: 12px; --ext-header-bg-opacity-start: 0.75; --ext-header-bg-opacity-end: 0.95; --ext-header-padding: 1.5rem; --ext-header-animation-distance: 100px; --ext-header-glass-tint-dark: #ffffff; --ext-header-glass-tint-dark-end: #101010; --ext-header-dark-logo-filter: brightness(0) invert(1); } body { timeline-scope: --ext-hero-timeline; } /* =========================================================== Layout: ext-header-sticky =========================================================== */ header.wp-block-template-part:has(.ext-header-sticky) { position: sticky; top: 0; z-index: 12; } /* Default bg for sticky headers without glass. Glass headers leave the wrapper transparent so the inner glass element shows through. */ header.wp-block-template-part:has(.ext-header-sticky):not(:has(.ext-header-glass)):not(.has-background) { background-color: var(--wp--preset--color--background); } body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) { top: var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px)); } @media (max-width: 782px) { body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) { top:0; } } html:has(.ext-header-sticky) { scroll-padding-top: var(--ext-header-height); } /* =========================================================== Layout: ext-header-overlay (hero overlap) =========================================================== */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-overlay):not(:has(.ext-header-sticky)) { position: relative; top: 0; z-index: 12; } body:has(.ext-header-overlay) .entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child { margin-top: calc(-1 * var(--ext-header-height)) !important; position: relative; z-index: 0; } /* Overlay over hero: wrapper goes transparent so the hero shows through. Reverts to default theme bg once .is-past-hero is added or on subpages without a hero. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-overlay):not(.is-past-hero):not(:has(.ext-header-glass)) { background-color: transparent; } /* =========================================================== Appearance: ext-header-glass (static glassmorphism) - --ext-header-glass-color-start: tint during the frosted/initial state - --ext-header-glass-color-end: tint at the solid/scrolled state - Static glass shows the end state (most readable) =========================================================== */ .ext-header-glass { --ext-header-glass-color-start: var(--wp--preset--color--background); --ext-header-glass-color-end: var(--wp--preset--color--background); } header.wp-block-template-part:has(.ext-header-glass) .ext-header-glass { background-color: oklch(from var(--ext-header-glass-color-end) l c h / var(--ext-header-bg-opacity-end)); backdrop-filter: blur(var(--ext-header-blur-end)); border-radius: 1rem; } /* =========================================================== Color: ext-header--dark - Sets shared scrim/glass color variable - Wrapper gets white text when used with overlay or glass - Inner blocks reset their colors to inherit =========================================================== */ /* Dark variant only takes effect on pages with a fullscreen hero. On subpages, dark+glass falls back to the light glass defaults. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) .ext-header-glass.ext-header--dark { --ext-header-glass-color-start: var(--ext-header-glass-tint-dark); --ext-header-glass-color-end: var(--ext-header-glass-tint-dark-end); --ext-header-bg-opacity-start: 0.06; --ext-header-bg-opacity-end: 0.85; --ext-header-blur-start: 16px; --ext-header-blur-end: 24px; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .ext-header-glass { border: 1px solid rgb(255 255 255 / 0.12); } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) { color: #fff; } /* Top-fade scrim on the hero's cover block — softer falloff than a header-bound gradient. Flat (non-nested) :has() check on body so the rule reliably matches on hero pages that use an overlay+dark header. Fades out via opacity once the smart-sticky JS adds .is-past-hero on the header, in sync with the header reverting to its default theme appearance. */ body:has(.ext-header-overlay.ext-header--dark) .ext-hero-section--full-screen .wp-block-cover::after { content: ""; position: absolute; inset: 0 0 auto 0; height: calc(var(--ext-header-height) * 3); transition: opacity 300ms ease; background: linear-gradient( to bottom, rgb(0 0 0 / 0.50) 0%, rgb(0 0 0 / 0.25) 50%, rgb(0 0 0 / 0.05) 80%, rgb(0 0 0 / 0) 100% ); pointer-events: none; z-index: 1; } /* Past-hero: fade the scrim out so the hero image returns to its natural look, matching the header reverting to default theme bg + colors. */ body:has(header.wp-block-template-part.is-past-hero) .ext-hero-section--full-screen .wp-block-cover::after { opacity: 0; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) { color: #fff; } /* Inner-block dark overrides — fire only on hero pages with a dark backdrop. Overlay+dark drops out at .is-past-hero (header has reverted to default theme). Glass+dark keeps firing past-hero because the glass stays dark via its own animation. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link, .cloned-for-mobile, .cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link, .cloned-for-mobile, .cloned-for-mobile *) { color: inherit; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .wp-social-link:not(.cloned-for-mobile, .cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .wp-social-link:not(.cloned-for-mobile, .cloned-for-mobile *) { color: #fff !important; } /* Phone CTA: force white over the dark hero. Needed because the paragraph carries WP's wp-elements-* link-color rule (preset primary), which beats .has-text-color inheritance on the inner . Drops out at .is-past-hero so the phone reverts to theme. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :is(.ext-nav-extras-phone, .ext-nav-extras-phone a):not(.cloned-for-mobile, .cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :is(.ext-nav-extras-phone, .ext-nav-extras-phone a):not(.cloned-for-mobile, .cloned-for-mobile *) { color: #fff !important; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) svg:not(.cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) svg:not(.cloned-for-mobile *) { fill: currentColor; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :is(.wp-block-site-logo, .wp-duotone-primary-foreground):not(.cloned-for-mobile, .cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :is(.wp-block-site-logo, .wp-duotone-primary-foreground):not(.cloned-for-mobile, .cloned-for-mobile *) { filter: var(--ext-header-dark-logo-filter); } /* Nav-extras CTA: white pill + dark text for contrast against the dark hero scrim. Drops out at .is-past-hero so the button returns to its preset styling. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .ext-nav-extras-btn:not(.cloned-for-mobile, .cloned-for-mobile *) .wp-block-button__link, body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .ext-nav-extras-btn:not(.cloned-for-mobile, .cloned-for-mobile *) .wp-block-button__link { background-color: #fefefe !important; color: #060606 !important; } /* Sticky non-glass headers: smooth shadow/bg transitions (toggle on .is-scrolled / .is-past-hero) */ header.wp-block-template-part:has(.ext-header-sticky):not(:has(.ext-header-glass)) { transition: background-color 300ms ease, box-shadow 300ms ease; } /* Floating-pill: smooth the top change when .is-scrolled toggles, so the header doesn't snap up when scrolling past the admin bar. */ header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { transition: top 300ms ease; } /* Subpage elevation shadow: appears when user scrolls (no hero on the page) */ body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part.is-scrolled:has(.ext-header-sticky):not(:has(.ext-header-glass)) { box-shadow: 0 4px 24px -8px rgb(0 0 0 / 0.08); } /* Smart sticky transitions: smooth color/filter changes when toggling .is-past-hero */ header.wp-block-template-part:has(.ext-header--dark) { transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, border-color 300ms ease; } header.wp-block-template-part:has(.ext-header--dark) :where(a, button, .wp-block-site-title, .wp-social-link) { transition: color 300ms ease; } header.wp-block-template-part:has(.ext-header--dark) .wp-block-site-logo { transition: filter 300ms ease; } /* Past-hero: any sticky+overlay gets solid theme bg + elevation shadow. Glass headers are excluded — they manage their own scroll visuals. */ header.wp-block-template-part.is-past-hero:has(.ext-header-sticky.ext-header-overlay):not(:has(.ext-header-glass)) { background-color: var(--wp--preset--color--background); box-shadow: 0 4px 24px -8px rgb(0 0 0 / 0.08); } /* Past-hero on dark variant: also revert white text / inverted logo / forced social color */ header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) { color: var(--wp--preset--color--foreground); } header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link) { color: inherit; } header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) .wp-social-link { color: var(--wp--preset--color--foreground) !important; } header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) .wp-block-site-logo { filter: brightness(1) invert(0); } /* =========================================================== Hero timeline (for scroll-driven animations) =========================================================== */ @supports (animation-timeline: scroll()) { .entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child { view-timeline: --ext-hero-timeline block; } } /* =========================================================== Behavior: ext-header-sticky--floating-pill - Layout shift: header wrapper goes transparent + constrained width - When combined with .ext-header-glass, animates glass intensity =========================================================== */ header.wp-block-template-part .ext-header-sticky--floating-pill.ext-animate { opacity: 1 !important; } header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { position: sticky; top: 0; z-index: 12; border-bottom: none; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { position: sticky; top: var(--ext-header-offset); max-width: var(--wp--style--global--wide-size); margin-left: auto; margin-right: auto; background-color: transparent; padding-inline: var(--wp--style--root--padding-right) var(--wp--style--root--padding-left); } /* Initial glass state (over hero): override static glass-end with start values */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass { background-color: oklch(from var(--ext-header-glass-color-start) l c h / var(--ext-header-bg-opacity-start)); backdrop-filter: blur(var(--ext-header-blur-start)); } body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px))); background-color: transparent; } @media (max-width: 782px) { body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 46px))); } body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part.is-scrolled:has(.ext-header-sticky.ext-header-sticky--floating-pill) { top:var(--ext-header-offset); } } @supports (animation-timeline: scroll()) { body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left)); margin-left: auto; margin-right: auto; } @media (prefers-reduced-motion: no-preference) { body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass { animation: ext-header-glass-intensify linear both !important; animation-timeline: --ext-hero-timeline !important; animation-range: exit 0% exit 80% !important; } body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass { animation: ext-header-glass-intensify-no-hero linear forwards !important; animation-timeline: scroll() !important; animation-range: 0 var(--ext-header-animation-distance) !important; } } } @keyframes ext-header-glass-intensify { from { background-color: oklch(from var(--ext-header-glass-color-start) l c h / var(--ext-header-bg-opacity-start)); backdrop-filter: blur(var(--ext-header-blur-start)); } to { background-color: oklch(from var(--ext-header-glass-color-end) l c h / var(--ext-header-bg-opacity-end)); backdrop-filter: blur(var(--ext-header-blur-end)); box-shadow: 0 14px 28px -10px rgb(0 0 0 / 0.14), 0 -14px 28px -10px rgb(0 0 0 / 0.14); } } @keyframes ext-header-glass-intensify-no-hero { from { background-color: oklch(from var(--ext-header-glass-color-start) l c h / var(--ext-header-bg-opacity-start)); backdrop-filter: blur(var(--ext-header-blur-start)); box-shadow: none; translate: 0 0; max-width: 100%; margin-inline: auto; } to { background-color: oklch(from var(--ext-header-glass-color-end) l c h / var(--ext-header-bg-opacity-end)); backdrop-filter: blur(var(--ext-header-blur-end)); box-shadow: 0 14px 28px -10px rgb(0 0 0 / 0.14), 0 -14px 28px -10px rgb(0 0 0 / 0.14); translate: 0 var(--ext-header-offset); max-width: var(--wp--style--global--wide-size); margin-inline: var(--wp--style--root--padding-right) var(--wp--style--root--padding-left); border-radius: 1rem; } } /* =========================================================== Vibe/gradient fix ----------------------------------------------------------- Vibe block-style variations (e.g. is-style-ext-preset--group--*--header-1--N) paint a background gradient on the header. That gradient fights every over-hero / glass-tint / dark-scrim treatment we apply to overlay or glass headers, because the glass and overlay rules set background-COLOR while the variation sets a background-IMAGE that paints on top. Override the variation's background-image specifically (not the whole `background:` shorthand). That lets each header keep working in its natural design: - overlay non-glass: gets transparent bg over hero, theme bg past hero - glass: gets the glass tint (light by default, dark when --dark is set) On non-overlay / non-glass headers the variation gradient stays as-is. =========================================================== */ .ext-header-overlay[class*="is-style-ext-preset--"], .ext-header-glass[class*="is-style-ext-preset--"] { background-image: none !important; } /* Temporary: a few template parts (e.g. no-title-sticky-header.html) wrap our header in another sticky
. Scope the fix to the three new headers (atlas-beacon, catalina-skyline, ceadar-peak) — they're the only ones using .ext-header-overlay, so older headers that intentionally rely on the wrapper's positioning aren't affected. display: contents removes the wrapper from layout entirely so its bg/border/sticky/box-shadow/ wp-container-* styles don't apply. Remove once the upstream template stops wrapping. */ header:has(> header.wp-block-template-part :where(.ext-header-overlay)) { display: contents; } /* * Frowse Homepage Foundation — v1.0.2 * Scoped to the front-page experience so existing WooCommerce/product templates remain unchanged. * -------------------------------------------------------------------------- */ .frowse-home-header { position: relative; z-index: 20; margin: 0 !important; padding: 0 28px; background: linear-gradient(90deg, #08249a 0%, #0b2fc7 48%, #081b7d 100%); color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); } .frowse-home-header__inner { min-height: 72px; gap: 28px; } .frowse-home-brand { position: relative; gap: 10px !important; flex-shrink: 0; } .frowse-home-brand__title { position: relative; margin: 0 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: -.04em !important; } .frowse-home-brand__title::after { content: ""; position: absolute; left: 14%; right: 10%; bottom: -10px; height: 8px; border-bottom: 4px solid #1ce2ff; border-radius: 0 0 70% 70%; transform: rotate(-2deg); opacity: .95; } .frowse-home-header a { color: #fff !important; text-decoration: none !important; } .frowse-home-nav, .frowse-home-tools { gap: 22px !important; } .frowse-home-nav p, .frowse-home-tools p { margin: 0; white-space: nowrap; } .frowse-home-nav a { font-weight: 700; font-size: .92rem; } .frowse-home-tool a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; font-weight: 700; font-size: .84rem; } .frowse-home-tool--ask a { background: #0b7cff; border-color: #3da2ff; box-shadow: 0 8px 24px rgba(0,128,255,.22); } .frowse-home-tool--amazon a { background: rgba(0,0,30,.16); } .frowse-homepage { --frowse-electric: #00dcff; --frowse-blue: #0c5cff; --frowse-navy: #07195f; --frowse-ink: #07134e; --frowse-white: #fff; margin: 0; background: #fff; color: var(--frowse-ink); overflow: clip; } .frowse-home-hero { position: relative; isolation: isolate; min-height: 610px; padding: 54px max(32px, 5vw) 92px; background: radial-gradient(circle at 72% 34%, rgba(35,224,255,.45) 0 4%, transparent 26%), radial-gradient(circle at 67% 23%, rgba(31,111,255,.55), transparent 35%), linear-gradient(118deg, #0a24a7 0%, #0839d7 44%, #07147b 100%); color: #fff; } .frowse-home-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(115deg, transparent 47%, rgba(32,225,255,.2) 47.3%, transparent 48%), linear-gradient(72deg, transparent 62%, rgba(255,255,255,.14) 62.2%, transparent 62.7%), linear-gradient(98deg, transparent 68%, rgba(19,225,255,.17) 68.3%, transparent 68.8%); opacity: .8; } .frowse-home-hero::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -44px; height: 90px; z-index: -1; background: #fff; border-radius: 50% 50% 0 0 / 75% 75% 0 0; } .frowse-home-hero__glow { position: absolute; width: 620px; height: 620px; right: 4%; top: -170px; z-index: -1; background: radial-gradient(circle, rgba(0,228,255,.26), rgba(28,92,255,.12) 42%, transparent 70%); filter: blur(2px); } .frowse-home-hero__inner { position: relative; width: min(1440px, 100%); min-height: 330px; margin: 0 auto; } .frowse-home-hero__copy { position: relative; z-index: 3; width: min(540px, 42%); padding-top: 18px; } .frowse-home-hero__copy h1 { margin: 0 0 18px; color: #fff; font-size: clamp(3.1rem, 5.2vw, 5.6rem); line-height: .92; letter-spacing: -.065em; font-weight: 900; } .frowse-home-hero__copy h1 span { color: var(--frowse-electric); } .frowse-home-hero__copy p { margin: 0; font-size: clamp(1.06rem, 1.5vw, 1.36rem); line-height: 1.38; font-weight: 550; color: rgba(255,255,255,.96); } .frowse-home-hero__visual { position: absolute; top: 0; right: 20%; width: min(520px, 42vw); height: 230px; z-index: 1; background: url(https://www.frowse.co/uk/wp-content/themes/frowse-theme/assets/images/frowse-home-hero-products-transparent.png) center / contain no-repeat; border-radius: 0; box-shadow: none; } .frowse-home-hero__proof { position: absolute; right: 3%; top: 92px; bottom: auto; display: grid; gap: 6px; font-weight: 750; font-size: .98rem; line-height: 1.22; z-index: 3; } .frowse-home-hero__proof span::first-letter { color: var(--frowse-electric); } .frowse-finder { position: relative; z-index: 8; width: min(1040px, calc(100% - 80px)); margin: -34px max(20px, calc((100% - 1540px) / 2)) 0 auto; transform: translateX(-90px); padding: 22px 30px 20px; border: 1px solid rgba(255,255,255,.8); border-radius: 26px; background: rgba(255,255,255,.98); color: var(--frowse-ink); box-shadow: 0 24px 55px rgba(4,20,95,.25); } .frowse-finder h2 { margin: 0 0 14px; font-size: clamp(1.65rem, 2.2vw, 2.2rem); line-height: 1.05; letter-spacing: -.035em; color: var(--frowse-ink); } .frowse-finder__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } .frowse-finder__modes button, .frowse-finder__modes a { min-height: 42px; border: 1px solid #d9e5ff; border-radius: 13px; background: #fff; color: #07134e; font: inherit; font-weight: 750; text-decoration: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .frowse-finder__modes .is-active { background: linear-gradient(90deg, #0b72ff, #0758ef); border-color: #0b72ff; color: #fff; } .frowse-finder__input { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 56px; padding: 5px 6px 5px 16px; border: 1.5px solid #9fc2ff; border-radius: 15px; background: #fff; } .frowse-finder__placeholder { color: #6f7ca6; font-size: .99rem; } .frowse-finder__input button { min-height: 44px; padding: 0 22px; border: 0; border-radius: 12px; background: linear-gradient(90deg, #0c64ff, #0648e9); color: #fff; font-weight: 800; cursor: default; } .frowse-finder__prompts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: .81rem; } .frowse-finder__prompts > span { font-weight: 750; } .frowse-finder__prompts a { padding: 7px 12px; border-radius: 999px; background: #eef4ff; color: #092072; font-weight: 700; text-decoration: none; } .frowse-home-next { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: min(1240px, calc(100% - 64px)); margin: 52px auto 70px; padding: 28px 32px; border: 1px solid #dbe5f7; border-radius: 22px; background: linear-gradient(135deg, #f6f9ff, #eef5ff); box-shadow: 0 14px 34px rgba(21,55,120,.08); } .frowse-home-next__eyebrow { margin: 0 0 5px; color: #0b5bdf; font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; } .frowse-home-next h2 { margin: 0 0 8px; font-size: clamp(1.65rem, 2.5vw, 2.25rem); color: #07134e; } .frowse-home-next p:not(.frowse-home-next__eyebrow) { max-width: 820px; margin: 0; color: #475274; } .frowse-home-next > a { flex: 0 0 auto; padding: 13px 18px; border-radius: 999px; background: #0a5bef; color: #fff; font-weight: 800; text-decoration: none; } @media (max-width: 1120px) { .frowse-home-nav { display: none !important; } .frowse-home-tools { gap: 8px !important; } .frowse-home-tool a { padding-inline: 11px; font-size: .76rem; } .frowse-home-hero__visual { right: 1%; width: 52vw; } .frowse-home-hero__proof { display: none; } .frowse-home-hero__copy { width: 48%; } } @media (max-width: 780px) { .frowse-home-header { padding-inline: 18px; } .frowse-home-header__inner { min-height: 62px; } .frowse-home-tools { display: none !important; } .frowse-home-hero { min-height: 0; padding: 38px 20px 70px; } .frowse-home-hero__inner { min-height: 470px; } .frowse-home-hero__copy { width: 100%; text-align: center; padding-top: 0; } .frowse-home-hero__copy h1 { font-size: clamp(3rem, 14vw, 4.4rem); } .frowse-home-hero__copy p br { display: none; } .frowse-home-hero__visual { position: relative; top: auto; right: auto; width: min(580px, 100%); height: 190px; margin: 28px auto 0; } .frowse-finder { width: calc(100% - 24px); margin: -28px auto 0; padding: 20px 16px 16px; border-radius: 20px; transform: none; } .frowse-finder__modes { grid-template-columns: 1fr; } .frowse-finder__input { grid-template-columns: auto 1fr; } .frowse-finder__input button { grid-column: 1 / -1; width: 100%; } .frowse-home-next { width: calc(100% - 32px); margin-top: 40px; flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .frowse-home-brand .wp-block-site-logo { display: none; } .frowse-home-brand__title { font-size: 1.55rem !important; } .frowse-home-hero__copy h1 { font-size: 3.05rem; } .frowse-finder h2 { font-size: 1.55rem; } .frowse-finder__placeholder { font-size: .86rem; } .frowse-home-next { padding: 24px 22px; } } /* -------------------------------------------------------------------------- * Frowse Homepage Robot — v1.0.20 * Presentation-only character positioned to point deliberately at Ask Frowse. * -------------------------------------------------------------------------- */ .frowse-home-hero__inner::after { content: ""; position: absolute; left: 2px; bottom: -365px; z-index: 10; width: 304px; height: 264px; background: url(https://www.frowse.co/uk/wp-content/themes/frowse-theme/assets/images/frowse-home-robot.png) center / contain no-repeat; pointer-events: none; filter: drop-shadow(0 20px 26px rgba(2, 18, 91, .24)); } @media (max-width: 1120px) { .frowse-home-hero__inner::after { left: -30px; bottom: -260px; width: 233px; height: 203px; } } @media (max-width: 780px) { .frowse-home-hero__inner::after { left: 2px; bottom: -112px; width: 164px; height: 143px; } } @media (max-width: 480px) { .frowse-home-hero__inner::after { left: 0; bottom: -92px; width: 132px; height: 115px; } } /* -------------------------------------------------------------------------- * Frowse Homepage desktop fold refinement — v1.0.28 * Desktop only: reclaim lower hero depth and raise Robbie slightly. * Mobile/tablet intentionally unchanged for separate responsive treatment. * -------------------------------------------------------------------------- */ @media (min-width: 1121px) { .frowse-home-hero { min-height: 510px; padding-bottom: 42px; } .frowse-home-hero__inner::after { bottom: -325px; } } /* -------------------------------------------------------------------------- * Frowse Homepage desktop fold balance — v1.0.29 * Desktop only: restore a little blue beneath the finder and raise Robbie so * his pointing gesture leads toward the finder heading. Responsive rules are * intentionally unchanged. * -------------------------------------------------------------------------- */ @media (min-width: 1121px) { .frowse-home-hero { min-height: 545px; padding-bottom: 62px; } .frowse-home-hero__inner::after { bottom: -275px; } } /* -------------------------------------------------------------------------- * Frowse Homepage mobile Robbie refinement — v1.0.30 * Mobile only: smaller and lower/left so the character points toward the * Ask Frowse control without obscuring the finder heading or input text. * Desktop/tablet >= 781px remains unchanged. * -------------------------------------------------------------------------- */ @media (max-width: 780px) { .frowse-home-hero__inner::after { left: -24px; bottom: -166px; width: 138px; height: 120px; } } @media (max-width: 480px) { .frowse-home-hero__inner::after { left: -18px; bottom: -158px; width: 108px; height: 94px; } } /* -------------------------------------------------------------------------- * Frowse Homepage Top Buys desktop lift — v1.0.31 * Desktop only: bring the next-section teaser higher into the viewport while * preserving the approved hero depth, curve, finder and Robbie composition. * -------------------------------------------------------------------------- */ @media (min-width: 1121px) { .frowse-home-next { margin-top: 18px; } } /* -------------------------------------------------------------------------- * Frowse Homepage desktop visual punch — v1.0.32 * Desktop only: stronger spotlight treatment, larger product trio and a tighter * transition into Top Buys. Existing hero/finder/Robbie geometry is preserved. * -------------------------------------------------------------------------- */ @media (min-width: 1121px) { .frowse-home-hero__inner::before { content: ""; position: absolute; top: -70px; right: 8%; width: 690px; height: 390px; z-index: 0; pointer-events: none; background: linear-gradient(104deg, transparent 0 31%, rgba(44,224,255,.28) 42%, transparent 53%), linear-gradient(76deg, transparent 0 45%, rgba(55,214,255,.23) 55%, transparent 65%), radial-gradient(ellipse at 55% 42%, rgba(0,224,255,.26), transparent 63%); filter: blur(.2px); } .frowse-home-hero__visual { top: -8px; right: 17.5%; width: min(620px, 49vw); height: 260px; transform: rotate(-1deg); transform-origin: 50% 75%; } .frowse-home-next { margin-top: -6px; padding-top: 22px; padding-bottom: 22px; } } /* -------------------------------------------------------------------------- * Frowse Homepage desktop polish — v1.0.34 * Desktop only: brighter spotlight beams and a tighter, non-overlapping * Top Buys lead-in. Hero geometry, Robbie, finder and products stay fixed. * -------------------------------------------------------------------------- */ @media (min-width: 1121px) { .frowse-home-hero__inner::before { background: linear-gradient(104deg, transparent 0 29%, rgba(56,232,255,.48) 41%, transparent 54%), linear-gradient(76deg, transparent 0 43%, rgba(67,223,255,.40) 55%, transparent 67%), linear-gradient(92deg, transparent 0 51%, rgba(114,238,255,.22) 58%, transparent 66%), radial-gradient(ellipse at 55% 42%, rgba(0,228,255,.38), transparent 64%); filter: blur(.15px); } .frowse-home-next { margin-top: -10px; padding-top: 4px; padding-bottom: 22px; } } /* -------------------------------------------------------------------------- * Frowse Homepage transition cleanup — v1.0.35 * Desktop only: remove excess white transition space below the approved hero * without changing hero depth/blue geometry. Pull Top Buys into that space. * -------------------------------------------------------------------------- */ @media (min-width: 1121px) { .frowse-home-next { position: relative; z-index: 2; margin-top: -34px; } } /* -------------------------------------------------------------------------- * Frowse Homepage transition + proof refinement — v1.0.37 * Desktop only: lower Top Buys from the over-lifted v1.0.35/36 position and * strengthen the now-independent proof block beside the product trio. * -------------------------------------------------------------------------- */ @media (min-width: 1121px) { .frowse-home-next { margin-top: -18px; } .frowse-home-hero__proof { gap: 9px; font-size: 1.12rem; line-height: 1.28; } } /* Frowse 1.0.39 — independent hero product composition. * Rendered entirely from CSS so it also works when WordPress has a saved * front-page template override from an earlier theme release. */ .frowse-home-hero__visual { background: url(https://www.frowse.co/uk/wp-content/themes/frowse-theme/assets/images/frowse-home-air-fryer.png) 3% 48% / 48% auto no-repeat; overflow: visible; } .frowse-home-hero__visual::before, .frowse-home-hero__visual::after { content: ""; position: absolute; display: block; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 15px 14px rgba(3,17,70,.22)); transform-origin: 50% 82%; } .frowse-home-hero__visual::before { background-image: url(https://www.frowse.co/uk/wp-content/themes/frowse-theme/assets/images/frowse-home-iron.png); z-index: 2; } .frowse-home-hero__visual::after { background-image: url(https://www.frowse.co/uk/wp-content/themes/frowse-theme/assets/images/frowse-home-headphones.png); z-index: 4; } /* Hide v1.0.38's inline images when the PHP template itself is active. */ .frowse-home-hero__visual > .frowse-home-hero__product { display:none !important; } @media (min-width: 901px) { .frowse-home-hero__visual { top: -18px; right: 18.5%; width: min(600px, 47vw); height: 270px; background-position: 1% 52%; background-size: 48% auto; } .frowse-home-hero__visual::before { left: 38%; top: 20px; width: 33%; height: 230px; transform: rotate(5deg); } .frowse-home-hero__visual::after { left: 61%; top: 22px; width: 39%; height: 230px; transform: rotate(3deg); } } @media (max-width: 900px) { .frowse-home-hero__visual { background-position: 3% 50%; background-size: 46% auto; position: relative; overflow: visible; } .frowse-home-hero__visual::before { left: 39%; top: 16px; width: 30%; height: 82%; transform: rotate(5deg); } .frowse-home-hero__visual::after { left: 62%; top: 18px; width: 36%; height: 82%; transform: rotate(3deg); } } /* -------------------------------------------------------------------------- * Frowse 1.0.41 — clean independent product assets + Amazon Associate lock-up. * -------------------------------------------------------------------------- */ .frowse-home-brand::after { content: "an amazon associate"; position: absolute; left: 0; top: calc(100% + 3px); width: 100%; color: #fff; font-size: .61rem; font-weight: 500; line-height: 1; letter-spacing: .015em; text-align: center; text-transform: lowercase; white-space: nowrap; pointer-events: none; } @media (min-width: 781px) { .frowse-home-header__inner { min-height: 76px; } } @media (max-width: 780px) { .frowse-home-brand::after { font-size: .50rem; top: calc(100% + 2px); } } /* -------------------------------------------------------------------------- * Frowse 1.0.42 — final hero product cleanup + stronger Associate lock-up. * -------------------------------------------------------------------------- */ .frowse-home-brand::after { font-size: .95rem; font-weight: 500; top: calc(100% + 2px); } @media (max-width: 780px) { .frowse-home-brand::after { font-size: .72rem; top: calc(100% + 2px); } } /* -------------------------------------------------------------------------- * Frowse 1.0.43 — air-fryer balance + Associate lock-up spacing. * -------------------------------------------------------------------------- */ @media (min-width: 901px) { .frowse-home-hero__visual { background-position: 5% 52%; background-size: 39.5% auto; } } .frowse-home-brand::after { top: calc(100% + 12px); left: 50%; width: max-content; transform: translateX(-50%); text-align: center; } @media (max-width: 780px) { .frowse-home-brand::after { top: calc(100% + 11px); } } /* -------------------------------------------------------------------------- * Frowse 1.0.44 — Associate lock-up header containment. * Keeps the accepted hero composition unchanged. * -------------------------------------------------------------------------- */ @media (min-width: 781px) { .frowse-home-header__inner { min-height: 96px; } .frowse-home-brand::after { font-size: .92rem; } } /* -------------------------------------------------------------------------- * Frowse Homepage Top Buys — v1.0.48 * Six high-rated products on the white page canvas. No enclosing section card. * -------------------------------------------------------------------------- */ .frowse-top-buys { position: relative; z-index: 2; width: min(1440px, calc(100% - 64px)); margin: 8px auto 76px; padding: 18px 0 0; background: #fff; } .frowse-top-buys__heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 24px; } .frowse-top-buys__eyebrow { margin: 0 0 4px; color: #0b5bdf; font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; } .frowse-top-buys h2 { margin: 0 0 5px; color: #07134e; font-size: clamp(1.8rem, 2.5vw, 2.5rem); line-height: 1.05; letter-spacing: -.025em; } .frowse-top-buys__heading p:not(.frowse-top-buys__eyebrow) { margin: 0; color: #59637f; } .frowse-top-buys__heading > a { flex: 0 0 auto; color: #0a5bef; font-weight: 800; text-decoration: none; } .frowse-top-buys__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.45vw, 24px); } .frowse-top-buy, .frowse-top-buy__link { min-width: 0; } .frowse-top-buy__link { display: block; color: #07134e; text-decoration: none; } .frowse-top-buy__image { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 14px; overflow: hidden; border-radius: 16px; background: #f6f8fc; } .frowse-top-buy__image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; background: linear-gradient( to top, rgba(2,12,49,.72) 0%, rgba(2,12,49,.38) 42%, rgba(2,12,49,0) 100% ); } .frowse-top-buy__image img { width: 100%; height: 100%; object-fit: contain; transition: transform .22s ease; } .frowse-top-buy__link:hover .frowse-top-buy__image img, .frowse-top-buy__link:focus-visible .frowse-top-buy__image img { transform: scale(1.035); } .frowse-top-buy__price { position: absolute; left: 14px; bottom: 11px; z-index: 2; color: #fff; font-size: 1.08rem; font-style: italic; font-weight: 850; line-height: 1.1; text-shadow: 0 2px 8px rgba(0,0,0,.62); } .frowse-top-buy__price del { display: none; } .frowse-top-buy__price ins { color: inherit; text-decoration: none; } .frowse-top-buy__title { display: -webkit-box; min-height: 2.8em; margin: 11px 2px 7px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .95rem; font-weight: 760; line-height: 1.38; } .frowse-top-buy__rating { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px; color: #65708b; font-size: .72rem; font-weight: 700; } .frowse-top-buy__rating strong { color: #0a5bef; font-size: .98rem; font-weight: 850; } .frowse-top-buy__rating small { font-size: .68em; } @media (max-width: 1100px) { .frowse-top-buys__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 780px) { .frowse-top-buys { width: calc(100% - 32px); margin-bottom: 52px; padding-top: 14px; } .frowse-top-buys__heading { align-items: flex-start; flex-direction: column; gap: 12px; } .frowse-top-buys__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } /* -------------------------------------------------------------------------- * Frowse Homepage Top Buys desktop position correction — v1.0.50 * Desktop only: bring Section 2 into view sooner without changing the frozen * hero, finder, Robbie or curve geometry. * -------------------------------------------------------------------------- */ @media (min-width: 1121px) { .frowse-top-buys { margin-top: -14px; padding-top: 0; } } /* -------------------------------------------------------------------------- * Frowse Homepage Section 3 — v1.0.54 * Clear first-visit discovery routes. Presentation only: route destinations * will be wired when the corresponding Frowse navigation/data views exist. * -------------------------------------------------------------------------- */ .frowse-discovery-routes { width: min(1440px, calc(100% - 64px)); margin: 0 auto 84px; padding: 8px 0 0; } .frowse-discovery-routes__heading { margin-bottom: 24px; } .frowse-discovery-routes__eyebrow { margin: 0 0 5px; color: #0b5bdf; font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; } .frowse-discovery-routes h2 { margin: 0 0 7px; color: #07134e; font-size: clamp(1.8rem, 2.5vw, 2.5rem); line-height: 1.05; letter-spacing: -.025em; } .frowse-discovery-routes__intro { margin: 0; color: #59637f; } .frowse-discovery-routes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .frowse-discovery-route { position: relative; min-height: 150px; padding: 25px 26px 23px; border: 1px solid #dce5f3; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(9,32,88,.055); } .frowse-discovery-route::before { content: ""; position: absolute; top: 0; left: 26px; width: 42px; height: 3px; border-radius: 0 0 4px 4px; background: #12c9ff; } .frowse-discovery-route__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 10px; background: #edf8ff; color: #075fe7; font-size: 1.08rem; font-weight: 900; } .frowse-discovery-route h3 { margin: 0 0 6px; color: #07134e; font-size: 1.14rem; line-height: 1.2; } .frowse-discovery-route p { margin: 0; color: #65708b; line-height: 1.45; } @media (max-width: 900px) { .frowse-discovery-routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .frowse-discovery-routes { width: calc(100% - 32px); margin-bottom: 56px; } .frowse-discovery-routes__grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- * Frowse 1.0.55 — hero product scale/alignment + Section 3 compact cards. * Presentation-only refinement. Existing homepage behaviour is unchanged. * -------------------------------------------------------------------------- */ @media (min-width: 901px) { /* Smaller three-product composition; keep clear of the Ask Frowse panel. */ .frowse-home-hero__visual { top: -12px; right: 19.5%; width: min(535px, 42vw); height: 245px; background-image: url(https://www.frowse.co/uk/wp-content/themes/frowse-theme/assets/images/frowse-home-air-fryer.webp); background-position: 7% 52%; background-size: 35% auto; } .frowse-home-hero__visual::before { left: 35%; top: 25px; width: 31%; height: 205px; z-index: 5; /* iron deliberately overlaps both neighbouring products */ } .frowse-home-hero__visual::after { left: 61%; top: 27px; width: 36%; height: 202px; z-index: 4; } /* Treat logo + Associate line as one lock-up and centre it with navigation. */ .frowse-home-brand { transform: translateY(-5px); } } /* Section 3: retain the accepted 3 x 2 design, reduce card height only. */ .frowse-discovery-route { min-height: 118px; padding: 18px 26px 17px; } .frowse-discovery-route__icon { margin-bottom: 8px; } /* -------------------------------------------------------------------------- * Frowse 1.0.56 — restore hero product hierarchy and overlap. * Corrects only the desktop product composition from 1.0.55. Section 3 stays * frozen at its accepted compact height; finder/Robbie/Top Buys are unchanged. * -------------------------------------------------------------------------- */ @media (min-width: 901px) { .frowse-home-hero__visual { top: -10px; right: 18.5%; width: min(565px, 44vw); height: 250px; background-position: 0% 48%; background-size: 56% auto; } .frowse-home-hero__visual::before { left: 43%; top: 17px; width: 34%; height: 218px; z-index: 6; transform: rotate(5deg); } .frowse-home-hero__visual::after { left: 66%; top: 20px; width: 41%; height: 216px; z-index: 4; transform: rotate(3deg); } /* Centre the complete brand lock-up, not just the Frowse wordmark. */ .frowse-home-brand { transform: translateY(1px); } } /* -------------------------------------------------------------------------- * Frowse 1.0.57 — clean real-product hero trio. * Replaces the remaining generated iron/headphones with clean cut-outs and * tightens the desktop composition so the foreground iron overlaps both * neighbouring products. No homepage journey/behaviour changes. * -------------------------------------------------------------------------- */ @media (min-width: 901px) { .frowse-home-hero__visual { top: -10px; right: 18.5%; width: min(565px, 44vw); height: 250px; background-position: 0% 48%; background-size: 56% auto; } .frowse-home-hero__visual::before { left: 35%; top: 7px; width: 40%; height: 235px; z-index: 7; transform: rotate(4deg); } .frowse-home-hero__visual::after { left: 57%; top: 18px; width: 42%; height: 215px; z-index: 4; transform: rotate(1deg); } } /* -------------------------------------------------------------------------- * Frowse 1.0.58 — hero cleanup: brand alignment, headphone transparency, fryer scale. * -------------------------------------------------------------------------- */ @media (min-width: 901px) { /* Restore accepted logo + Associate lock-up alignment. */ .frowse-home-brand { transform: translateY(-5px); } /* Give the real Philips fryer slightly more visual weight without moving the trio. */ .frowse-home-hero__visual { background-size: 60% auto; background-position: -2% 48%; } } \n\n/* --------------------------------------------------------------------------\n * Frowse 1.0.59 — hero precision correction.\n * Logo lock-up centred against desktop navigation; enclosed headphone white\n * removed; Philips fryer given a modest additional scale increase.\n * -------------------------------------------------------------------------- */\n@media (min-width: 901px) {\n\t/* Align the visual centre of the complete two-line lock-up with the nav. */\n\t.frowse-home-brand { transform: translateY(-12px); }\n\n\t/* Slightly stronger fryer presence; preserve the accepted trio geometry. */\n\t.frowse-home-hero__visual {\n\t\tbackground-size: 64% auto;\n\t\tbackground-position: -4% 48%;\n\t}\n}\n /* -------------------------------------------------------------------------- * Frowse 1.0.60 — Section 4: data-driven popular category navigation. * -------------------------------------------------------------------------- */ .frowse-popular-categories { width: min(1440px, calc(100% - 64px)); margin: -20px auto 84px; } .frowse-popular-categories__heading { margin-bottom: 24px; } .frowse-popular-categories h2 { margin: 0 0 7px; color: #07134e; font-size: clamp(1.8rem, 2.5vw, 2.5rem); line-height: 1.05; letter-spacing: -.025em; } .frowse-popular-categories__heading p { margin: 0; color: #59637f; } .frowse-popular-categories__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .frowse-category-card { position: relative; display: block; min-width: 0; overflow: hidden; border: 1px solid #dce5f3; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(9,32,88,.055); color: #07134e; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; } .frowse-category-card:hover, .frowse-category-card:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(9,32,88,.10); } .frowse-category-card__media { display: flex; align-items: center; justify-content: center; height: 168px; background: linear-gradient(145deg,#f7fbff,#edf5ff); overflow: hidden; } .frowse-category-card__media img { width: 100%; height: 100%; object-fit: cover; } .frowse-category-card__fallback { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: #dff6ff; color: #075fe7; font-size: 2rem; font-weight: 900; } .frowse-category-card__name { display: block; padding: 17px 48px 18px 18px; font-size: 1.08rem; font-weight: 800; line-height: 1.2; } .frowse-category-card__arrow { position: absolute; right: 18px; bottom: 17px; color: #075fe7; font-weight: 900; } @media (max-width: 900px) { .frowse-popular-categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .frowse-popular-categories { width: calc(100% - 32px); margin: -8px auto 56px; } .frowse-popular-categories__grid { grid-template-columns: 1fr; } .frowse-category-card__media { height: 190px; } } /* -------------------------------------------------------------------------- * Frowse 1.0.61 — Section 4 container alignment only. * Match the established homepage content measure used by Top Buys / Section 3. * -------------------------------------------------------------------------- */ @media (min-width: 601px) { .frowse-popular-categories { width: min(1040px, calc(100% - 64px)); margin-left: auto; margin-right: auto; } } /* -------------------------------------------------------------------------- * Frowse 1.0.62 — shared lower-homepage content width. * Section 3 and Section 4 now use one wider desktop container so category * navigation aligns with the established homepage grid without going full-width. * -------------------------------------------------------------------------- */ :root { --frowse-home-content-wide: 1520px; } @media (min-width: 601px) { .frowse-discovery-routes, .frowse-popular-categories { width: min(var(--frowse-home-content-wide), calc(100% - 64px)); margin-left: auto; margin-right: auto; } } /* -------------------------------------------------------------------------- * Frowse 1.0.63 — wider shared lower-home container + Top Buys breathing room * + representative product imagery for category cards when categories do not * have their own WooCommerce thumbnail. * -------------------------------------------------------------------------- */ :root { --frowse-home-content-wide: 1600px; } @media (min-width: 901px) { .frowse-top-buys, .frowse-discovery-routes, .frowse-popular-categories { width: min(var(--frowse-home-content-wide), calc(100% - 64px)); margin-left: auto; margin-right: auto; } /* Give Section 2 a little more air beneath the hero curve/Robbie. */ .frowse-top-buys { margin-top: 38px; } } /* -------------------------------------------------------------------------- * Frowse 1.0.64 — consistent product-image containment. * Product-derived imagery should remain fully visible inside its allocated * frame rather than being cropped. This is presentation-only: no markup, * WooCommerce data or gallery behaviour is changed. * -------------------------------------------------------------------------- */ /* Homepage category cards: preserve the complete representative product. */ .frowse-category-card__media img { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; object-fit: contain; object-position: center; background: #fff; } /* WooCommerce catalogue/search product-image blocks. */ .wp-block-woocommerce-product-image img, .wc-block-components-product-image img, .wc-block-grid__product-image img, .woocommerce ul.products li.product img { max-width: 100%; max-height: 100%; object-fit: contain !important; object-position: center !important; } /* Single-product gallery: never crop the source product image to fill a box. */ .wp-block-woocommerce-product-image-gallery img, .woocommerce-product-gallery__image img, .wc-block-product-gallery-large-image img, .wc-block-product-gallery-large-image__image { max-width: 100%; max-height: 100%; object-fit: contain !important; object-position: center !important; } /* -------------------------------------------------------------------------- * Frowse 1.0.65 — single-product gallery scale constraint. * Portrait Amazon images can otherwise dominate the product page even when * correctly contained. Keep the full source visible, but cap the rendered * hero image height on larger screens and centre it within the gallery. * -------------------------------------------------------------------------- */ @media (min-width: 782px) { .single-product .wp-block-woocommerce-product-image-gallery img, .single-product .woocommerce-product-gallery__image img, .single-product .wc-block-product-gallery-large-image img, .single-product .wc-block-product-gallery-large-image__image { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 620px !important; margin-left: auto !important; margin-right: auto !important; object-fit: contain !important; object-position: center !important; } .single-product .woocommerce-product-gallery__image, .single-product .wc-block-product-gallery-large-image, .single-product .wp-block-woocommerce-product-image-gallery { text-align: center; } } /* -------------------------------------------------------------------------- * Frowse 1.0.66 — semantically stable homepage category visuals. * WooCommerce category thumbnails remain authoritative; when absent, use * category-specific bundled illustrations rather than arbitrary product images. * -------------------------------------------------------------------------- */ .frowse-category-card__media .frowse-category-card__semantic { width: 100%; height: 100%; padding: 18px; box-sizing: border-box; object-fit: contain; object-position: center; background: #fff; } /* -------------------------------------------------------------------------- * Frowse 1.0.67 — Section 4 compact category cards. * Reduce desktop category-card height only; preserve layout, visuals and links. * -------------------------------------------------------------------------- */ @media (min-width: 601px) { .frowse-category-card__media { height: 150px; } .frowse-category-card__name { padding: 14px 48px 15px 18px; } .frowse-category-card__arrow { bottom: 14px; } } /* -------------------------------------------------------------------------- * Frowse 1.0.68 — Sections 3/4 visual rhythm. * Presentation-only treatment: give the two lower-home navigation sections * distinct environments and stronger card depth while preserving all content, * routing, dimensions, shared container widths and responsive behaviour. * -------------------------------------------------------------------------- */ /* Section 3: cool Frowse-blue environment. Use a wide pseudo-band so the * existing shortcode markup and master content width remain untouched. */ .frowse-discovery-routes, .frowse-popular-categories { position: relative; isolation: isolate; } .frowse-discovery-routes::before, .frowse-popular-categories::before { content: ""; position: absolute; z-index: -1; top: -34px; bottom: -34px; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; } .frowse-discovery-routes::before { background: linear-gradient(180deg, #f3f9ff 0%, #edf7ff 100%); } .frowse-popular-categories::before { background: linear-gradient(180deg, #fffaf4 0%, #fffdf9 100%); } /* Stronger section titles, with one restrained Frowse-cyan phrase. */ .frowse-discovery-routes h2, .frowse-popular-categories h2 { font-weight: 850; letter-spacing: -.035em; } .frowse-heading-accent { color: #079fe8; } /* Section 3 cards: retain white clarity but add enough depth to feel active. */ .frowse-discovery-route { border-color: #d3e3f5; box-shadow: 0 12px 30px rgba(7, 42, 112, .075); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .frowse-discovery-route:hover { transform: translateY(-2px); border-color: #bcd9f5; box-shadow: 0 16px 36px rgba(7, 42, 112, .11); } .frowse-discovery-route__icon { background: #e7f6ff; box-shadow: inset 0 0 0 1px rgba(7, 95, 231, .04); } /* Section 4 remains quieter and warmer so it reads as category browsing rather * than another decision-tool grid. Existing pastel SVG artwork is unchanged. */ .frowse-category-card { border-color: #e3e1dd; box-shadow: 0 10px 26px rgba(36, 42, 65, .065); } .frowse-category-card:hover, .frowse-category-card:focus-visible { box-shadow: 0 15px 34px rgba(36, 42, 65, .105); } @media (max-width: 600px) { .frowse-discovery-routes::before, .frowse-popular-categories::before { top: -24px; bottom: -24px; } } /* -------------------------------------------------------------------------- * Frowse 1.0.69 — Sections 3/4 dynamic visual pass. * Presentation only. Increase homepage energy while preserving accepted * structure, routes, dimensions and all frozen header/hero/Top Buys behaviour. * -------------------------------------------------------------------------- */ .frowse-discovery-routes::before { top: -46px; bottom: -46px; background: radial-gradient(circle at 8% 15%, rgba(24,205,255,.38) 0, rgba(24,205,255,0) 27%), radial-gradient(circle at 92% 78%, rgba(0,88,232,.28) 0, rgba(0,88,232,0) 31%), linear-gradient(125deg, #d9f5ff 0%, #bde9ff 38%, #dce9ff 100%); } .frowse-discovery-routes::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -62px; width: 100vw; height: 34px; transform: translateX(-50%) skewY(-.65deg); transform-origin: left top; background: #fff4e8; pointer-events: none; } .frowse-discovery-routes h2, .frowse-popular-categories h2 { font-size: clamp(2rem, 2.75vw, 2.75rem); font-weight: 900; } .frowse-discovery-routes .frowse-heading-accent { color: #075fe7; text-shadow: 0 1px 0 rgba(255,255,255,.45); } .frowse-discovery-routes__intro { color: #334f77; font-weight: 600; } .frowse-discovery-route { border-color: rgba(255,255,255,.92); box-shadow: 0 16px 38px rgba(6,56,135,.15); } .frowse-discovery-route::before { width: 58px; height: 4px; background: linear-gradient(90deg,#075fe7,#16cfff); } .frowse-discovery-route__icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg,#dff7ff,#eef5ff); box-shadow: 0 7px 16px rgba(7,95,231,.10); font-size: 1.18rem; } .frowse-discovery-route:hover { transform: translateY(-4px); box-shadow: 0 21px 46px rgba(6,56,135,.20); } .frowse-popular-categories::before { top: -50px; bottom: -44px; background: radial-gradient(circle at 12% 70%, rgba(255,191,102,.18) 0, rgba(255,191,102,0) 27%), radial-gradient(circle at 88% 20%, rgba(255,133,176,.13) 0, rgba(255,133,176,0) 29%), linear-gradient(180deg,#fff4e8 0%,#fff8ef 52%,#fffdf8 100%); } .frowse-popular-categories .frowse-heading-accent { color: #075fe7; } .frowse-popular-categories__heading p { color: #665b68; font-weight: 600; } .frowse-category-card { border-color: rgba(208,216,231,.95); box-shadow: 0 13px 30px rgba(40,48,77,.10); } .frowse-category-card:hover, .frowse-category-card:focus-visible { transform: translateY(-4px); box-shadow: 0 19px 40px rgba(40,48,77,.16); } /* Let the semantic illustrations carry stronger pastel personality while * retaining their category-specific artwork and contained-image behaviour. */ .frowse-category-card:nth-child(4n+1) .frowse-category-card__media { background: linear-gradient(145deg,#e8f8ff,#dff2ff); } .frowse-category-card:nth-child(4n+2) .frowse-category-card__media { background: linear-gradient(145deg,#eef4ff,#e4f4ff); } .frowse-category-card:nth-child(4n+3) .frowse-category-card__media { background: linear-gradient(145deg,#fff0f6,#fff6ed); } .frowse-category-card:nth-child(4n+4) .frowse-category-card__media { background: linear-gradient(145deg,#eafbf3,#f4fae9); } .frowse-category-card__media .frowse-category-card__semantic { background: transparent; } .frowse-category-card__name { background: rgba(255,255,255,.94); } @media (max-width: 600px) { .frowse-discovery-routes::before, .frowse-popular-categories::before { top: -28px; bottom: -28px; } .frowse-discovery-routes::after { bottom: -39px; height: 22px; } } /* -------------------------------------------------------------------------- * Frowse 1.0.70 — Section 4 integrated semantic icons + cooler visual field. * Presentation only. Removes the baked-in white icon tiles, gives each * category a deeper semantic colour, cools Section 4 and softens its join * with the already accepted Section 3 treatment. * -------------------------------------------------------------------------- */ .frowse-popular-categories::before { top: -50px; bottom: -44px; background: radial-gradient(circle at 10% 72%, rgba(25,205,255,.16) 0, rgba(25,205,255,0) 28%), radial-gradient(circle at 90% 20%, rgba(111,96,255,.15) 0, rgba(111,96,255,0) 30%), linear-gradient(135deg,#eefbff 0%,#edf5ff 48%,#f3efff 100%); } .frowse-discovery-routes::after { background: linear-gradient(100deg,#eefbff 0%,#edf5ff 55%,#f3efff 100%); } .frowse-popular-categories__heading p { color: #4d5f7c; } /* The semantic SVGs are artwork, not mini cards. Keep their canvas fully * transparent and let the category card provide the colour field. */ .frowse-category-card__semantic { width: min(72%, 190px); height: auto; transform: scale(1.10); transform-origin: center; } .frowse-category-card:nth-child(8n+1) .frowse-category-card__media { background: linear-gradient(145deg,#dff5ff,#e9f7ff); } .frowse-category-card:nth-child(8n+2) .frowse-category-card__media { background: linear-gradient(145deg,#e6f0ff,#edf6ff); } .frowse-category-card:nth-child(8n+3) .frowse-category-card__media { background: linear-gradient(145deg,#ffe8f3,#fff0f7); } .frowse-category-card:nth-child(8n+4) .frowse-category-card__media { background: linear-gradient(145deg,#e3f8e9,#effbed); } .frowse-category-card:nth-child(8n+5) .frowse-category-card__media { background: linear-gradient(145deg,#fff0d8,#fff6e8); } .frowse-category-card:nth-child(8n+6) .frowse-category-card__media { background: linear-gradient(145deg,#e8e9ff,#f0f1ff); } .frowse-category-card:nth-child(8n+7) .frowse-category-card__media { background: linear-gradient(145deg,#ddf9f7,#eafcfb); } .frowse-category-card:nth-child(8n+8) .frowse-category-card__media { background: linear-gradient(145deg,#f5e8ff,#fbf0ff); } @media (max-width: 600px) { .frowse-popular-categories::before { top: -28px; bottom: -28px; } .frowse-category-card__semantic { transform: scale(1.05); } } /* -------------------------------------------------------------------------- * Frowse 1.0.71 — stronger Section 3 route cards + clearer card typography. * Presentation only. Large route symbols move to the right of each card; * titles in Sections 3 and 4 gain hierarchy. No routes or structure changed. * -------------------------------------------------------------------------- */ @media (min-width: 601px) { .frowse-discovery-route { min-height: 150px; padding: 31px 112px 27px 26px; overflow: hidden; } .frowse-discovery-route__icon { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); width: 72px; height: 72px; margin: 0; border-radius: 22px; background: transparent; box-shadow: none; font-size: 2.7rem; line-height: 1; opacity: .9; } .frowse-discovery-route:nth-child(1) .frowse-discovery-route__icon { color: #075fe7; } .frowse-discovery-route:nth-child(2) .frowse-discovery-route__icon { color: #0b83d9; } .frowse-discovery-route:nth-child(3) .frowse-discovery-route__icon { color: #087e9d; } .frowse-discovery-route:nth-child(4) .frowse-discovery-route__icon { color: #d26a13; } .frowse-discovery-route:nth-child(5) .frowse-discovery-route__icon { color: #6255cf; } .frowse-discovery-route:nth-child(6) .frowse-discovery-route__icon { color: #a63d91; } } .frowse-discovery-route h3 { font-size: 1.34rem; font-weight: 850; letter-spacing: -.018em; } .frowse-category-card__name { font-size: 1.22rem; font-weight: 850; letter-spacing: -.012em; } @media (max-width: 600px) { .frowse-discovery-route h3 { font-size: 1.22rem; } .frowse-category-card__name { font-size: 1.12rem; } } /* -------------------------------------------------------------------------- * Frowse 1.0.72 — splash route cards. * Presentation only. Carries the deep Frowse header blue into Section 3 and * turns route symbols into oversized, cropped colour splashes. Section 4 and * all established homepage behaviour remain unchanged. * -------------------------------------------------------------------------- */ @media (min-width: 601px) { .frowse-discovery-route { min-height: 150px; padding: 31px 148px 27px 26px; isolation: isolate; } .frowse-discovery-route::after { content: ""; position: absolute; z-index: -1; right: -48px; top: 50%; width: 190px; height: 190px; border-radius: 46% 54% 58% 42% / 43% 45% 55% 57%; transform: translateY(-50%) rotate(-12deg); background: linear-gradient(145deg,#06318f 0%,#0b46c5 55%,#16cfff 135%); box-shadow: 0 18px 38px rgba(4,43,124,.24); } .frowse-discovery-route:nth-child(2)::after { transform: translateY(-50%) rotate(13deg); background: linear-gradient(145deg,#062f8a,#087bd6 62%,#23d8ff); } .frowse-discovery-route:nth-child(3)::after { transform: translateY(-50%) rotate(-5deg); background: linear-gradient(145deg,#06318f,#087c99 70%,#27d7c8); } .frowse-discovery-route:nth-child(4)::after { transform: translateY(-50%) rotate(11deg); background: linear-gradient(145deg,#07348f,#b94d24 72%,#ffad3d); } .frowse-discovery-route:nth-child(5)::after { transform: translateY(-50%) rotate(-14deg); background: linear-gradient(145deg,#062f8a,#5549c9 67%,#a270ff); } .frowse-discovery-route:nth-child(6)::after { transform: translateY(-50%) rotate(8deg); background: linear-gradient(145deg,#07318d,#8c378f 68%,#e84ea9); } .frowse-discovery-route__icon { z-index: 2; right: 24px; width: 104px; height: 104px; font-size: 4.25rem; font-weight: 900; color: #fff !important; opacity: 1; text-shadow: 0 3px 14px rgba(0,24,80,.25); } .frowse-discovery-route:nth-child(4) .frowse-discovery-route__icon { font-size: 3.35rem; letter-spacing: -.08em; } .frowse-discovery-route:hover::after { box-shadow: 0 22px 46px rgba(4,43,124,.31); } } /* Frowse 1.0.73 — expanded route-card descriptions. Same typography; copy only. */ /* Frowse 1.0.74 — Section 5 + stronger hero proof typography. */ @media (min-width: 901px) { .frowse-home-hero__proof { font-size: 1.12rem; line-height: 1.28; gap: 7px; } } .frowse-why { position: relative; margin-top: 70px; padding: 76px 24px 82px; background: radial-gradient(circle at 12% 18%, rgba(23,207,255,.22), transparent 27%), radial-gradient(circle at 88% 80%, rgba(85,93,255,.24), transparent 30%), linear-gradient(135deg,#061d58 0%,#073b9d 52%,#075fe7 100%); color: #fff; overflow: hidden; } .frowse-why__inner { width: min(1180px, calc(100% - 24px)); margin: 0 auto; } .frowse-why__heading { max-width: 760px; margin-bottom: 34px; } .frowse-why__heading h2 { margin: 0 0 10px; color: #fff; font-size: clamp(2rem,3vw,3rem); line-height: 1.06; letter-spacing: -.035em; } .frowse-why__heading h2 span { color: #20d7ff; } .frowse-why__heading p { margin: 0; color: rgba(255,255,255,.84); font-size: 1.08rem; } .frowse-why__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; } .frowse-why-card { position: relative; min-height: 205px; padding: 30px 28px; border: 1px solid rgba(255,255,255,.22); border-radius: 22px; background: rgba(255,255,255,.10); box-shadow: 0 18px 45px rgba(0,17,66,.22); backdrop-filter: blur(8px); } .frowse-why-card__icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 24px; border-radius: 18px; background: linear-gradient(145deg,#20d7ff,#0a79f2); color: #fff; font-size: 1.8rem; font-weight: 900; box-shadow: 0 10px 24px rgba(0,208,255,.22); } .frowse-why-card h3 { margin: 0 0 10px; color: #fff; font-size: 1.38rem; letter-spacing: -.02em; } .frowse-why-card p { margin: 0; color: rgba(255,255,255,.82); line-height: 1.55; } .frowse-why__cta { display: inline-flex; align-items: center; margin-top: 30px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; color: #fff; font-weight: 800; text-decoration: none; background: rgba(255,255,255,.10); } .frowse-why__cta:hover { background: #fff; color: #073b9d; } @media (max-width: 780px) { .frowse-why { margin-top: 48px; padding: 58px 18px 62px; } .frowse-why__grid { grid-template-columns: 1fr; } .frowse-why-card { min-height: 0; } } /* Frowse 1.0.75 — Section 5 confidence cards: stronger desktop presence only. */ @media (min-width: 901px) { .frowse-why { padding-top: 76px; padding-bottom: 58px; } .frowse-why__inner { width: min(1180px, calc(100vw - 64px)); max-width: none; } .frowse-why__heading { margin-bottom: 32px; } .frowse-why__grid { gap: 24px; } .frowse-why-card { min-height: 245px; padding: 34px 34px 32px; } .frowse-why-card__icon { width: 72px; height: 72px; margin-bottom: 26px; border-radius: 21px; font-size: 2.2rem; } .frowse-why-card h3 { margin-bottom: 12px; font-size: 1.55rem; } .frowse-why-card p { font-size: 1.08rem; line-height: 1.58; } .frowse-why__cta { margin-top: 32px; padding: 14px 22px; font-size: 1.05rem; } } /* Frowse 1.0.76 — Hero supporting statement: stronger desktop typography only. */ @media (min-width: 1100px) { .frowse-home-hero__copy p { font-size: clamp(1.22rem, 1.72vw, 1.56rem); } } /* Frowse 1.0.77 — Discovery-route currency labels now follow WooCommerce site currency. */ /* Frowse 1.0.78 — Added a controlled thin visual gap between the currency symbol and 50 in the large Under 50 splash icon only. */ /* Frowse 1.0.79 — first public TDAI-backed Best Sellers discovery view. */ /* Frowse 1.0.85 — preserve the frozen six-card article grid; link Best Sellers from inside the card. */ .frowse-discovery-route--linked { cursor: pointer; } .frowse-discovery-route--linked:hover { transform: translateY(-3px); box-shadow: 0 22px 42px rgba(0,48,130,.18); } .frowse-discovery-route__link { position:absolute; inset:0; z-index:6; border-radius:inherit; } .frowse-discovery-route__link:focus-visible { outline:3px solid #12c9ff; outline-offset:3px; } .frowse-best-sellers-page { background: #f7fbff; color: #071b4b; } .frowse-best-sellers-hero { padding: 64px 24px 58px; background: radial-gradient(circle at 80% 25%,rgba(32,215,255,.28),transparent 28%),linear-gradient(135deg,#061d58,#073b9d 55%,#075fe7); color:#fff; } .frowse-best-sellers-hero__inner,.frowse-best-sellers-content { width:min(1180px,calc(100% - 32px)); margin:0 auto; } .frowse-best-sellers-hero__kicker { margin:0 0 10px; color:#63e7ff; font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; } .frowse-best-sellers-hero h1 { margin:0 0 14px; color:#fff; font-size:clamp(2.6rem,5vw,4.8rem); line-height:.98; letter-spacing:-.045em; } .frowse-best-sellers-hero h1 span { color:#20d7ff; } .frowse-best-sellers-hero p:last-child { max-width:760px; margin:0; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.5; color:rgba(255,255,255,.9); } .frowse-best-sellers-content { padding:38px 0 70px; } .frowse-best-sellers-filters { display:grid; grid-template-columns:1.4fr repeat(5,1fr) auto auto; gap:12px; align-items:end; padding:20px; margin-bottom:22px; border:1px solid #dbe7f7; border-radius:20px; background:#fff; box-shadow:0 12px 34px rgba(7,59,157,.07); } .frowse-best-sellers-filters label { display:grid; gap:6px; font-size:.78rem; font-weight:800; color:#24416d; } .frowse-best-sellers-filters select,.frowse-best-sellers-filters input { width:100%; min-height:42px; box-sizing:border-box; padding:8px 10px; border:1px solid #c8d7eb; border-radius:10px; background:#fff; color:#071b4b; } .frowse-best-sellers-filters button { min-height:42px; padding:8px 16px; border:0; border-radius:11px; background:#087bf0; color:#fff; font-weight:800; cursor:pointer; } .frowse-best-sellers-filters>a { min-height:42px; display:grid; place-items:center; padding:0 8px; color:#174b96; font-weight:700; } .frowse-best-sellers-summary { margin:0 0 20px; color:#49617f; } .frowse-best-sellers-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } .frowse-best-seller-card { min-width:0; overflow:hidden; border:1px solid #dbe7f7; border-radius:20px; background:#fff; box-shadow:0 10px 28px rgba(7,59,157,.07); } .frowse-best-seller-card__image { display:grid; place-items:center; height:230px; padding:18px; background:#fff; } .frowse-best-seller-card__image img { display:block; width:100%; height:100%; object-fit:contain; } .frowse-best-seller-card__body { display:flex; flex-direction:column; min-height:245px; padding:18px; border-top:1px solid #edf3fb; } .frowse-best-seller-card__signals { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; font-size:.75rem; color:#35577f; } .frowse-best-seller-card__signals span { padding:5px 8px; border-radius:999px; background:#eef7ff; } .frowse-best-seller-card h2 { margin:0 0 12px; font-size:1.04rem; line-height:1.28; } .frowse-best-seller-card h2 a { color:#071b4b; text-decoration:none; } .frowse-best-seller-card__best-for { margin:0 0 18px; color:#52677f; font-size:.88rem; line-height:1.45; } .frowse-best-seller-card__footer { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-top:auto; } .frowse-best-seller-card__price { color:#071b4b; font-weight:900; } .frowse-best-seller-card__footer>a { color:#076be0; font-size:.82rem; font-weight:800; text-decoration:none; text-align:right; } .frowse-best-sellers-pagination { display:flex; justify-content:center; gap:6px; margin-top:34px; } .frowse-best-sellers-pagination .page-numbers { display:inline-grid; place-items:center; min-width:40px; min-height:40px; padding:0 10px; border:1px solid #cbdcf0; border-radius:10px; background:#fff; color:#164a91; text-decoration:none; } .frowse-best-sellers-pagination .current { background:#087bf0; border-color:#087bf0; color:#fff; } .frowse-best-sellers-page__notice { width:min(1180px,calc(100% - 32px)); margin:30px auto; padding:22px; border-radius:14px; background:#fff; border:1px solid #dbe7f7; } @media(max-width:1100px){.frowse-best-sellers-filters{grid-template-columns:repeat(3,1fr)}.frowse-best-sellers-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:780px){.frowse-best-sellers-hero{padding:46px 18px}.frowse-best-sellers-content{padding-top:24px}.frowse-best-sellers-filters{grid-template-columns:1fr 1fr}.frowse-best-sellers-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.frowse-best-sellers-filters,.frowse-best-sellers-grid{grid-template-columns:1fr}.frowse-best-seller-card__image{height:250px}} /* -------------------------------------------------------------------------- * Frowse v1.0.81 — Best Sellers discovery shell integration * Keep the public TDAI-backed discovery view in the same wide visual system as * the homepage, even when rendered inside WordPress' constrained page content. * -------------------------------------------------------------------------- */ body.page-best-sellers .frowse-best-sellers-page, body.page-id-best-sellers .frowse-best-sellers-page, .frowse-best-sellers-page { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .frowse-best-sellers-hero__inner, .frowse-best-sellers-content { width: min(1320px, calc(100% - 64px)); } .frowse-best-sellers-hero { padding-top: 70px; padding-bottom: 64px; } .frowse-best-sellers-content { padding-top: 42px; } @media (max-width: 780px) { .frowse-best-sellers-hero__inner, .frowse-best-sellers-content { width: min(100% - 32px, 1320px); } } /* -------------------------------------------------------------------------- * Frowse v1.0.82 — Best Sellers discovery presentation refinement * Presentation only: retain four-column decision cards and all TDAI logic. * -------------------------------------------------------------------------- */ body.page-best-sellers, body.page-id-best-sellers { overflow-x: clip; } .frowse-best-sellers-hero { padding-top: 46px; padding-bottom: 42px; } .frowse-best-sellers-hero h1 { margin-bottom: 10px; } .frowse-best-sellers-content { padding-top: 30px; } .frowse-best-sellers-filters { gap: 14px; padding: 18px 20px; border-radius: 18px; box-shadow: 0 14px 34px rgba(7,59,157,.09); } .frowse-best-sellers-filters label { gap: 7px; font-size: .8rem; letter-spacing: .01em; } .frowse-best-sellers-filters select, .frowse-best-sellers-filters input { min-height: 46px; padding: 9px 12px; border-color: #bcd0e8; border-radius: 11px; font-size: .9rem; } .frowse-best-sellers-filters button { min-height: 46px; padding: 9px 18px; border-radius: 11px; box-shadow: 0 8px 18px rgba(8,123,240,.2); font-size: .9rem; } .frowse-best-sellers-filters > a { min-height: 46px; font-size: .88rem; } .frowse-best-seller-card__image { height: 190px; padding: 16px; } .frowse-best-seller-card__body { min-height: 220px; padding: 17px; } @media (max-width: 780px) { .frowse-best-sellers-hero { padding: 38px 18px 36px; } .frowse-best-seller-card__image { height: 210px; } } @media (max-width: 520px) { .frowse-best-seller-card__image { height: 230px; } } /* -------------------------------------------------------------------------- * Frowse v1.0.83 — Best Sellers card/UI finishing * Presentation only: remove residual horizontal overflow and strengthen the * two principal decision signals plus the Frowse-review action. * -------------------------------------------------------------------------- */ body.page-best-sellers .wp-block-post-content, body.page-id-best-sellers .wp-block-post-content { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } body.page-best-sellers .frowse-best-sellers-page, body.page-id-best-sellers .frowse-best-sellers-page, .frowse-best-sellers-page { width: 100%; max-width: none; margin-left: 0; margin-right: 0; } .frowse-best-seller-card__signals { gap: 8px; margin-bottom: 13px; font-size: .82rem; } .frowse-best-seller-card__signals span { padding: 6px 10px; border: 1px solid #d5e9fb; background: #eef8ff; line-height: 1.2; } .frowse-best-seller-card__signals span:first-child { background: #e2f5ff; border-color: #bfe8fb; color: #075497; font-weight: 700; } .frowse-best-seller-card__signals strong { font-weight: 900; } .frowse-best-seller-card__footer > a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 9px; border: 1px solid #b9dcfb; border-radius: 9px; background: #f2f9ff; color: #075fc7; font-size: .88rem; font-weight: 900; line-height: 1.15; white-space: nowrap; } .frowse-best-seller-card__footer > a:hover { background: #e5f3ff; border-color: #8fc8f5; } @media (max-width: 520px) { .frowse-best-seller-card__footer { align-items: flex-start; flex-direction: column; } .frowse-best-seller-card__footer > a { white-space: normal; } } /* -------------------------------------------------------------------------- * Frowse 1.0.105 — restore single-product gallery thumbnail containment. * * Retains v1.0.104 Discovery image-height containment while restoring the * proven v1.0.103 single-product gallery thumbnail sizing. This is scoped only * to WooCommerce single-product gallery thumbnails; the main product image, * Discovery cards, Top Buys and homepage imagery are unaffected. * -------------------------------------------------------------------------- */ .single-product .woocommerce-product-gallery .flex-control-thumbs li, .single-product .wc-block-product-gallery-thumbnails__thumbnail, .single-product .wc-block-product-gallery-thumbnails__thumbnail-wrapper { min-height: 96px; height: 96px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .single-product .woocommerce-product-gallery .flex-control-thumbs li img, .single-product .wc-block-product-gallery-thumbnails__thumbnail img, .single-product .wc-block-product-gallery-thumbnails__thumbnail-wrapper img { display: block; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 96px !important; object-fit: contain !important; object-position: center !important; margin: auto !important; } /* -------------------------------------------------------------------------- * Frowse 1.0.106 — larger, consistent single-product main gallery stage. * * Scope: the main WooCommerce product-gallery image only. Gallery thumbnails * keep the v1.0.105 containment rules above. The fixed stage allows unusually * small source images to upscale for a consistent product-page presentation, * while object-fit: contain keeps the complete product visible. * -------------------------------------------------------------------------- */ @media (min-width: 782px) { .single-product .woocommerce-product-gallery__image, .single-product .wc-block-product-gallery-large-image { height: 520px; min-height: 520px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .single-product .woocommerce-product-gallery__image > a, .single-product .woocommerce-product-gallery__image > a > img, .single-product .woocommerce-product-gallery__image > img, .single-product .wc-block-product-gallery-large-image img, .single-product .wc-block-product-gallery-large-image__image { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 520px !important; object-fit: contain !important; object-position: center !important; margin: 0 auto !important; } .single-product .woocommerce-product-gallery__image > a { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; } } /* Frowse 1.0.113 — compact shared Multisite country selector. ---------------------------------------------------------------------------- */ .frowse-country-selector { position: relative; z-index: 30; font-size: 0.84rem; line-height: 1.2; } .frowse-country-selector__details { position: relative; } .frowse-country-selector__summary { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 38px; padding: 0.38rem 0.58rem; border: 1px solid rgba(27, 59, 92, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.92); color: #173b5f; font-weight: 700; cursor: pointer; list-style: none; white-space: nowrap; } .frowse-country-selector__summary::-webkit-details-marker { display: none; } .frowse-country-selector__summary::marker { content: ''; } .frowse-country-selector__summary:focus-visible, .frowse-country-selector__option:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .frowse-country-selector__flag { display: block; width: 20px; height: 13px; flex: 0 0 20px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); object-fit: cover; } .frowse-country-selector__globe { display: inline-grid; place-items: center; width: 20px; height: 13px; font-size: 0.94rem; line-height: 1; } .frowse-country-selector__chevron { font-size: 0.94rem; line-height: 1; transition: transform 160ms ease; } .frowse-country-selector__details[open] .frowse-country-selector__chevron { transform: rotate(180deg); } .frowse-country-selector__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; min-width: 190px; padding: 0.3rem; border: 1px solid #d8e0e8; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(18, 43, 68, 0.16); } .frowse-country-selector__option, .frowse-home-header .frowse-country-selector__option { display: flex; align-items: center; gap: 0.65rem; min-height: 36px; padding: 0.45rem 0.55rem; border-radius: 7px; color: #173b5f !important; font-weight: 650; text-decoration: none !important; } .frowse-country-selector__option:hover, .frowse-country-selector__option:focus, .frowse-home-header .frowse-country-selector__option:hover, .frowse-home-header .frowse-country-selector__option:focus { background: #f1f5f8; color: #173b5f !important; text-decoration: none !important; } .frowse-country-selector__option.is-current { background: #eaf2f7; } .frowse-country-selector__tick { margin-left: auto; font-weight: 800; } .frowse-home-header .frowse-country-selector__summary { border-color: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.1); color: #fff; } .frowse-home-header .frowse-country-selector__summary:hover { background: rgba(255, 255, 255, 0.17); } .frowse-home-header .wp-block-shortcode { margin-block: 0; } @media (max-width: 1120px) { .frowse-country-selector__current { display: none; } .frowse-country-selector__summary { min-width: 44px; justify-content: center; padding-inline: 0.5rem; } } @media (max-width: 780px) { /* Keep the country control available when the other homepage tools collapse. */ .frowse-home-tools { display: flex !important; } .frowse-home-tools > p { display: none !important; } .frowse-home-header .frowse-country-selector { width: auto; } .frowse-home-header .frowse-country-selector__current { display: none; } } @media (max-width: 640px) { .frowse-country-selector__menu { right: 0; left: auto; width: min(280px, 88vw); } } /* Frowse 1.0.115 — separate, right-aligned homepage country selector. ---------------------------------------------------------------------------- */ .frowse-home-country-slot { margin-left: auto !important; flex: 0 0 auto; } .frowse-home-header .frowse-home-country-slot .frowse-country-selector__summary { min-height: 40px; padding: 0 15px; border-radius: 999px; font-size: .84rem; line-height: 1; } @media (max-width: 1120px) { .frowse-home-header .frowse-home-country-slot .frowse-country-selector__summary { min-height: 40px; padding-inline: 11px; font-size: .76rem; } } @media (max-width: 780px) { .frowse-home-country-slot { margin-left: auto !important; } } /* Frowse 1.0.116 — supported-market country suggestion. ---------------------------------------------------------------------------- */ .frowse-market-suggestion { position: relative; z-index: 45; margin: 0; background: #eef8ff; border-bottom: 1px solid rgba(16, 68, 126, 0.16); color: #0d315d; } .frowse-market-suggestion[hidden] { display: none !important; } .frowse-market-suggestion__inner { display: flex; align-items: center; justify-content: center; gap: 0.85rem; max-width: 1180px; min-height: 46px; margin: 0 auto; padding: 0.48rem 1.25rem; } .frowse-market-suggestion__flag { display: block; width: 22px; height: 14px; flex: 0 0 22px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); object-fit: cover; } .frowse-market-suggestion__text { margin: 0; font-size: 0.9rem; font-weight: 650; line-height: 1.35; } .frowse-market-suggestion__actions { display: flex; align-items: center; gap: 0.55rem; flex: 0 0 auto; } .frowse-market-suggestion__switch, .frowse-market-suggestion__stay { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.8rem; font-weight: 750; line-height: 1; text-decoration: none !important; white-space: nowrap; cursor: pointer; } .frowse-market-suggestion__switch { border: 1px solid #146be8; background: #146be8; color: #fff !important; } .frowse-market-suggestion__switch:hover, .frowse-market-suggestion__switch:focus { background: #0f59c3; border-color: #0f59c3; color: #fff !important; } .frowse-market-suggestion__stay { border: 1px solid rgba(13, 49, 93, 0.25); background: transparent; color: #0d315d; } .frowse-market-suggestion__stay:hover, .frowse-market-suggestion__stay:focus { background: rgba(13, 49, 93, 0.06); } .frowse-market-suggestion__switch:focus-visible, .frowse-market-suggestion__stay:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @media (max-width: 700px) { .frowse-market-suggestion__inner { align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 0.55rem 0.65rem; padding: 0.65rem 1rem; } .frowse-market-suggestion__text { flex: 1 1 calc(100% - 32px); } .frowse-market-suggestion__actions { width: 100%; padding-left: 32px; } } /* -------------------------------------------------------------------------- * Frowse 1.0.123 — balanced single-product title scale. * * The global H1 scale is intentionally large for editorial/page headings, but * product names need to sit comfortably beside the gallery and buying data. * Scope this adjustment to WooCommerce single-product pages only. * -------------------------------------------------------------------------- */ .single-product main .wp-block-post-title { font-size: clamp(1.75rem, 2.35vw, 2.125rem); line-height: 1.15; } @media (max-width: 781px) { .single-product main .wp-block-post-title { font-size: clamp(1.625rem, 7vw, 1.875rem); line-height: 1.18; } } /* Frowse 1.0.126 — Discovery route navigation and mobile refinements. */ .frowse-discovery-route-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1180px; margin: 22px auto 0; padding: 0 24px; } .frowse-discovery-route-nav a, .frowse-discovery-route-nav .is-inactive { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 16px; border: 1px solid rgba(18, 52, 86, 0.18); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; } .frowse-discovery-route-nav a:hover, .frowse-discovery-route-nav a:focus-visible { border-color: currentColor; } .frowse-discovery-route-nav a.is-active { background: #087bf0; border-color: #087bf0; color: #fff; } .frowse-discovery-route-nav .is-inactive { opacity: 0.48; cursor: default; } @media (max-width: 780px) { .frowse-home-header__inner { min-height: 76px; } .frowse-home-hero { padding-left: 6px; padding-right: 6px; } .frowse-home-hero__copy p { font-size: 0.92rem; line-height: 1.38; } .frowse-home-hero__copy p br { display: inline; } } @media (max-width: 700px) { .frowse-discovery-route-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 5px; row-gap: 6px; margin-top: 10px; padding: 0 12px 6px; } .frowse-discovery-route-nav a, .frowse-discovery-route-nav .is-inactive { box-sizing: border-box; width: 100%; min-width: 0; min-height: 32px; padding: 3px 2px; border-radius: 14px; white-space: normal; text-align: center; font-size: 11.5px; line-height: 1; } .frowse-discovery-route-nav .is-inactive { opacity: 0.48; background: #fff; color: #071b4b; border-color: rgba(18, 52, 86, 0.18); } } /* -------------------------------------------------------------------------- * Frowse v1.0.138 — product/category Frowse shell correction. * * Keep the structural Discovery separator proven in 1.0.136, make the blue * Frowse header sticky wherever that shell is used, reconnect product pages * to the six primary Discovery routes, and remove the obsolete category CTA. * WooCommerce/TDAI remain taxonomy and product-data owners. * -------------------------------------------------------------------------- */ .frowse-discovery-shell .frowse-home-header { margin-bottom: 10px !important; } .frowse-home-header { position: sticky; top: 0; z-index: 1000; } body.admin-bar .frowse-home-header { top: 32px; } .frowse-product-discovery-routes { justify-content: flex-start; max-width: none; margin: 0 0 24px; padding: 0; } .frowse-category-hero { width: 100vw; max-width: none; margin: 8px 0 34px calc(50% - 50vw); padding: 42px max(24px, calc((100vw - 1320px) / 2)); box-sizing: border-box; background: radial-gradient(circle at 80% 25%, rgba(32,215,255,.28), transparent 28%), linear-gradient(135deg,#061d58,#073b9d 55%,#075fe7); color: #fff; } .frowse-category-hero h1 { margin: 0; color: #fff; font-size: clamp(2.45rem, 4.5vw, 4.25rem); line-height: 1; letter-spacing: -.04em; } .frowse-category-hero__copy { max-width: 760px; margin: 12px 0 0; color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.5; } body.tax-product_cat .wp-block-woocommerce-product-results-count { color: #49617f; } @media (max-width: 782px) { body.admin-bar .frowse-home-header { top: 46px; } } @media (max-width: 780px) { .frowse-discovery-shell .frowse-home-header { margin-bottom: 7px !important; } .frowse-product-discovery-routes { margin: 0 0 18px; } .frowse-category-hero { margin-bottom: 26px; padding-top: 34px; padding-bottom: 34px; } } /* -------------------------------------------------------------------------- * Frowse v1.0.139 — align product discovery navigation with product content. * * The six discovery-route buttons belong to the same wide product composition * as the gallery and product summary. Keep the navigation left-aligned within * that shared wide container rather than centred in the narrower content lane. * -------------------------------------------------------------------------- */ .single-product .frowse-product-discovery-routes-row { width: 100%; } .single-product .frowse-product-discovery-routes-row > .frowse-product-discovery-routes { width: 100%; max-width: none; justify-content: flex-start; } /* -------------------------------------------------------------------------- * Frowse v1.0.140 — category archive discovery navigation. * * Reconnect native WooCommerce/TDAI product-category archives to the same six * Frowse discovery routes used on product pages. The taxonomy query, sorting, * pagination and TDAI/WooCommerce ownership remain unchanged. * -------------------------------------------------------------------------- */ body.tax-product_cat .frowse-category-discovery-routes-row { width: 100%; margin-top: -10px; margin-bottom: 22px; } body.tax-product_cat .frowse-category-discovery-routes-row > .frowse-product-discovery-routes { width: 100%; max-width: var(--wp--style--global--wide-size, 1320px); margin-left: auto; margin-right: auto; margin-bottom: 0; } @media (max-width: 780px) { body.tax-product_cat .frowse-category-discovery-routes-row { margin-top: -4px; margin-bottom: 18px; } } /* -------------------------------------------------------------------------- * Frowse v1.0.141 — category archive vertical rhythm and results toolbar. * * Remove the remaining generic archive-template air above breadcrumbs and give * the native WooCommerce results/sort row a restrained Frowse presentation. * Query, sorting and pagination behaviour remain native WooCommerce. * -------------------------------------------------------------------------- */ body.tax-product_cat .ext-animate--on.is-style-ext-preset--group--natural-1--template { padding-top: 20px !important; } body.tax-product_cat .woocommerce-breadcrumb { margin-top: 0; margin-bottom: 14px; } body.tax-product_cat .frowse-category-hero { margin-top: 0; margin-bottom: 24px; } body.tax-product_cat .frowse-category-discovery-routes-row { margin-top: 0; margin-bottom: 18px; } body.tax-product_cat .frowse-category-results-toolbar { margin-top: 0; margin-bottom: 20px; padding: 12px 14px; border: 1px solid rgba(7,95,231,.15); border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(9,32,88,.05); } body.tax-product_cat .frowse-category-results-toolbar .wp-block-woocommerce-product-results-count { margin: 0; color: #3f5878; font-weight: 600; } body.tax-product_cat .frowse-category-results-toolbar select { min-height: 42px; padding: 0 38px 0 12px; border: 1px solid rgba(7,95,231,.25); border-radius: 10px; background-color: #fff; color: #071b4b; font: inherit; } @media (max-width: 780px) { body.tax-product_cat .ext-animate--on.is-style-ext-preset--group--natural-1--template { padding-top: 14px !important; } body.tax-product_cat .frowse-category-results-toolbar { gap: 10px; align-items: stretch; flex-wrap: wrap !important; } } /* Frowse 1.0.142 — category archive sort vocabulary/control. */ body.tax-product_cat .frowse-category-sort { margin: 0; } body.tax-product_cat .frowse-category-sort label { display: flex; align-items: center; gap: 10px; font-weight: 700; } body.tax-product_cat .frowse-category-sort label > span { white-space: nowrap; } body.tax-product_cat .frowse-category-sort select { min-width: 220px; min-height: 44px; padding: 0 40px 0 14px; border: 1px solid #aac8ee; border-radius: 10px; background: #fff; font: inherit; font-weight: 500; } @media (max-width: 700px) { body.tax-product_cat .frowse-category-results-toolbar { align-items: stretch !important; } body.tax-product_cat .frowse-category-sort label { align-items: stretch; flex-direction: column; gap: 6px; } body.tax-product_cat .frowse-category-sort select { width: 100%; min-width: 0; } } /* Frowse 1.0.143 — canonical product cards in Woo category/search collections. */ body.tax-product_cat .wp-block-woocommerce-product-template > .wc-block-product, body.search.search-results .wp-block-woocommerce-product-template > .wc-block-product, body.woocommerce.search-results .wp-block-woocommerce-product-template > .wc-block-product { min-width: 0; padding: 0; background: transparent; } body.tax-product_cat .wp-block-woocommerce-product-template .frowse-best-seller-card, body.search.search-results .wp-block-woocommerce-product-template .frowse-best-seller-card, body.woocommerce.search-results .wp-block-woocommerce-product-template .frowse-best-seller-card { height: 100%; } /* Frowse 1.0.144 — canonical product-card rating row. * Keep Frowse and Amazon evidence on one desktop row across Discovery, * category archives and product search; permit natural wrapping on narrow screens. */ @media (min-width: 781px) { .frowse-best-seller-card__signals { flex-wrap: nowrap; gap: 6px; font-size: .72rem; } .frowse-best-seller-card__signals span { min-width: 0; padding: 5px 7px; white-space: nowrap; } } /* Frowse 1.0.146 — Search Frowse entry and result controls. */ .frowse-header-search { position: relative; margin: 0; } .frowse-header-search > summary { list-style: none; cursor: pointer; white-space: nowrap; } .frowse-header-search > summary::-webkit-details-marker { display: none; } .frowse-header-search__form { position: absolute; top: calc(100% + 12px); right: 0; z-index: 1200; display: flex; width: min(420px, calc(100vw - 32px)); padding: 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 14px; background: #fff; box-shadow: 0 14px 38px rgba(5,23,68,.24); } .frowse-header-search__form input[type="search"] { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #aac8ee; border-radius: 9px 0 0 9px; color: #071b4b; font: inherit; } .frowse-header-search__form button { width: 48px; height: 42px; border: 0; border-radius: 0 9px 9px 0; background: #087bf0; color: #fff; font: inherit; font-weight: 800; cursor: pointer; } body.search.search-results .frowse-search-results-toolbar { margin-top: 0; margin-bottom: 20px; padding: 12px 14px; border: 1px solid rgba(7,95,231,.15); border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(9,32,88,.05); } body.search.search-results .frowse-search-sort { margin: 0; } body.search.search-results .frowse-search-sort label { display: flex; align-items: center; gap: 10px; font-weight: 700; } body.search.search-results .frowse-search-sort label > span { white-space: nowrap; } body.search.search-results .frowse-search-sort select { min-width: 220px; min-height: 44px; padding: 0 40px 0 14px; border: 1px solid #aac8ee; border-radius: 10px; background: #fff; font: inherit; font-weight: 500; } @media (max-width: 780px) { .frowse-header-search__form { position: fixed; top: 92px; left: 16px; right: 16px; width: auto; } body.admin-bar .frowse-header-search__form { top: 138px; } body.search.search-results .frowse-search-results-toolbar { gap: 10px; align-items: stretch; flex-wrap: wrap !important; } body.search.search-results .frowse-search-sort label { align-items: stretch; flex-direction: column; gap: 6px; } body.search.search-results .frowse-search-sort select { width: 100%; min-width: 0; } } /* Frowse 1.0.148 — product-search UX correction. * Search results are a refinement context, so global discovery-route pills are * intentionally omitted here. Tighten the generic template space beneath the * Frowse header while preserving the search heading, result count, sort and cards. */ body.search.search-results main.frowse-product-search-main { padding-top: 24px !important; } body.search.search-results main.frowse-product-search-main > .wp-block-woocommerce-breadcrumbs { margin-top: 0; margin-bottom: 18px; } body.search.search-results main.frowse-product-search-main > .wp-block-query-title { margin-top: 0; margin-bottom: 24px; } body.search.search-results .frowse-search-results-toolbar { margin-top: 0; } @media (max-width: 780px) { body.search.search-results main.frowse-product-search-main { padding-top: 18px !important; } } /* Frowse 1.0.150 — useful Frowse 404 experience. */ body.error404 main.frowse-404-main { margin: 0; padding: 28px var(--wp--custom--spacing--outer) 56px; } .frowse-404-panel { max-width: 1180px; margin: 0 auto; padding: 42px 44px; border: 1px solid rgba(7,95,231,.14); border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(9,32,88,.06); text-align: center; } .frowse-404-panel h1 { margin: 0 0 12px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; color: #071b4b; } .frowse-404-panel > p { max-width: 760px; margin: 0 auto 26px; font-size: 1.08rem; line-height: 1.65; color: #40516f; } .frowse-404-search { display: flex; max-width: 680px; margin: 0 auto 28px; } .frowse-404-search input[type="search"] { flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 15px; border: 1px solid #aac8ee; border-right: 0; border-radius: 10px 0 0 10px; font: inherit; } .frowse-404-search button { height: 50px; padding: 0 22px; border: 0; border-radius: 0 10px 10px 0; background: #087bf0; color: #fff; font: inherit; font-weight: 800; cursor: pointer; } body.error404 .frowse-product-discovery-routes { justify-content: center; margin: 0 auto; } @media (max-width: 700px) { body.error404 main.frowse-404-main { padding-top: 18px; padding-bottom: 36px; } .frowse-404-panel { padding: 28px 18px; } .frowse-404-search { flex-direction: column; gap: 8px; } .frowse-404-search input[type="search"], .frowse-404-search button { width: 100%; border: 1px solid #aac8ee; border-radius: 10px; } .frowse-404-search button { border-color: #087bf0; } } /* Frowse 1.0.154 — reduced product-page Amazon action vertical padding. */ .tdai-amazon-product .tdai-purchase-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: stretch; } .tdai-amazon-product .tdai-affiliate-disclosure { flex: 0 0 100%; } .tdai-amazon-product.frowse-buy-now-eligible div.product form.cart .single_add_to_cart_button, .tdai-amazon-product.frowse-buy-now-eligible div.product form.cart .button.single_add_to_cart_button, .tdai-amazon-product .frowse-buy-now-button { flex: 0 1 200px; width: 200px; max-width: 100%; min-width: 0; min-height: 36px; padding: 5px 20px; border-radius: 10px; font-size: 1.0625rem; font-weight: 800; line-height: 1.4; text-align: center; text-decoration: none; box-shadow: none; } .tdai-amazon-product.frowse-buy-now-eligible div.product form.cart .single_add_to_cart_button, .tdai-amazon-product.frowse-buy-now-eligible div.product form.cart .button.single_add_to_cart_button { border: 2px solid #0b72ff; background: #ffffff; color: #0b5bdf; } .tdai-amazon-product.frowse-buy-now-eligible div.product form.cart .single_add_to_cart_button:hover, .tdai-amazon-product.frowse-buy-now-eligible div.product form.cart .single_add_to_cart_button:focus { background: #f4f8ff; color: #0b5bdf; opacity: 1; } .tdai-amazon-product .frowse-buy-now-button { display: inline-flex; align-items: center; justify-content: center; border: 2px solid #0b72ff; background: #0b72ff; color: #ffffff; } .tdai-amazon-product .frowse-buy-now-button:hover, .tdai-amazon-product .frowse-buy-now-button:focus { border-color: #0758ef; background: #0758ef; color: #ffffff; transform: translateY(-1px); } .tdai-amazon-product:not(.frowse-buy-now-eligible) div.product form.cart .single_add_to_cart_button, .tdai-amazon-product:not(.frowse-buy-now-eligible) div.product form.cart .button.single_add_to_cart_button { width: min(100%, 200px); margin-inline: auto; border: 2px solid #0b72ff; background: #0b72ff; color: #ffffff; } .tdai-amazon-product:not(.frowse-buy-now-eligible) div.product form.cart .single_add_to_cart_button:hover, .tdai-amazon-product:not(.frowse-buy-now-eligible) div.product form.cart .single_add_to_cart_button:focus { background: #0758ef; color: #ffffff; opacity: 1; } @media (max-width: 680px) { .tdai-amazon-product.frowse-buy-now-eligible div.product form.cart .single_add_to_cart_button, .tdai-amazon-product.frowse-buy-now-eligible div.product form.cart .button.single_add_to_cart_button, .tdai-amazon-product .frowse-buy-now-button { flex: 0 0 100%; width: 100%; } } /* Frowse 1.0.155 — marketplace-aware Search Amazon header control. */ .frowse-header-amazon-search { position: relative; margin: 0; } .frowse-header-amazon-search > summary { list-style: none; cursor: pointer; white-space: nowrap; } .frowse-header-amazon-search > summary::-webkit-details-marker { display: none; } .frowse-header-amazon-search__form { position: absolute; top: calc(100% + 12px); right: 0; z-index: 1200; display: flex; width: min(420px, calc(100vw - 32px)); padding: 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 14px; background: #fff; box-shadow: 0 14px 38px rgba(5,23,68,.24); } .frowse-header-amazon-search__form input[type="search"] { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #aac8ee; border-radius: 9px 0 0 9px; color: #071b4b; font: inherit; } .frowse-header-amazon-search__form button { height: 42px; padding: 0 14px; border: 0; border-radius: 0 9px 9px 0; background: #087bf0; color: #fff; font: inherit; font-weight: 800; white-space: nowrap; cursor: pointer; } @media (max-width: 782px) { .frowse-header-amazon-search__form { position: fixed; top: 92px; left: 16px; right: 16px; width: auto; } body.admin-bar .frowse-header-amazon-search__form { top: 138px; } } /* Frowse 1.0.156 — stronger, colour-accented header tool icons. * Presentation only: Search Frowse/Search Amazon behaviour and destinations * are unchanged. Icons remain text/SVG-independent so no external assets load. */ .frowse-home-tool--ask a, .frowse-header-search > summary, .frowse-header-amazon-search > summary { display: inline-flex; align-items: center; gap: 7px; } .frowse-header-tool-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 19px; font-weight: 900; line-height: 1; text-align: center; } .frowse-header-tool-icon--ask { font-size: 20px; color: #9cecff; text-shadow: 0 0 10px rgba(156,236,255,.34); } .frowse-header-tool-icon--frowse-search { font-size: 21px; color: #62ddff; transform: translateY(-1px); } .frowse-header-tool-icon--amazon { position: relative; width: 21px; height: 21px; border-radius: 50%; background: rgba(255,255,255,.12); color: #ffbf3f; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 800; line-height: 20px; text-transform: lowercase; } .frowse-header-tool-icon--amazon::after { content: ""; position: absolute; left: 4px; right: 3px; bottom: 2px; height: 4px; border-bottom: 2px solid #ffbf3f; border-radius: 0 0 70% 70%; transform: rotate(4deg); } .frowse-header-search > summary, .frowse-header-amazon-search > summary { color: #fff; } @media (max-width: 1180px) { .frowse-header-tool-icon { width: 18px; height: 18px; font-size: 18px; } .frowse-header-tool-icon--frowse-search { font-size: 19px; } .frowse-header-tool-icon--amazon { width: 19px; height: 19px; font-size: 18px; } } /* Frowse 1.0.161 — compact marketplace editorial footer layout. * Presentation only: shared editorial routes and destinations are unchanged. */ .frowse-site-footer { padding-top: 32px !important; padding-bottom: 18px !important; } .frowse-site-footer__top { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: flex-start !important; gap: clamp(36px, 6vw, 96px) !important; } .frowse-site-footer__brand { flex: 1 1 360px; min-width: 0; } .frowse-site-footer__brand > * { margin-block-start: 0; margin-block-end: 0; } .frowse-site-footer__nav { flex: 1.35 1 700px; max-width: 840px; min-width: 0; display: flex !important; flex-direction: column !important; gap: 16px !important; } .frowse-site-footer__nav-section { margin: 0 !important; } .frowse-site-footer__nav-heading { margin: 0 0 6px !important; } .frowse-site-footer__links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; column-gap: 24px !important; row-gap: 7px !important; margin: 0 !important; } .frowse-site-footer__links > * { margin: 0 !important; } .frowse-site-footer__separator { margin-top: 22px !important; margin-bottom: 12px !important; } .frowse-site-footer__copyright { margin-top: 0 !important; margin-bottom: 0 !important; } @media (max-width: 980px) { .frowse-site-footer__brand, .frowse-site-footer__nav { flex-basis: 100%; max-width: none; } } @media (max-width: 560px) { .frowse-site-footer { padding-top: 26px !important; padding-bottom: 18px !important; } .frowse-site-footer__links { column-gap: 16px !important; } } /* Frowse 1.0.163 — footer branding and desktop editorial-link refinement. */ @media (min-width: 981px) { .frowse-site-footer__nav { flex-basis: 760px; max-width: 900px; } .frowse-site-footer__nav-section--information .frowse-site-footer__links { flex-wrap: nowrap !important; column-gap: 20px !important; } } /* Ask Frowse v1 consultation modal — 1.0.164 */ body.frowse-ask-open { overflow: hidden; } .frowse-ask-modal[hidden] { display: none !important; } .frowse-ask-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 3vh 3vw; } .frowse-ask-modal__backdrop { position: absolute; inset: 0; background: rgba(13, 31, 49, .64); } .frowse-ask-modal__dialog { position: relative; width: min(1120px, 82vw); height: min(780px, 86vh); background: #fff; border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.28); overflow: hidden; display: flex; flex-direction: column; } .frowse-ask-modal__header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; border-bottom:1px solid #e1e7ed; } .frowse-ask-modal__title { margin:0; font-size:1.55rem; } .frowse-ask-modal__close { appearance:none; border:0; background:transparent; font-size:2rem; line-height:1; cursor:pointer; padding:4px 8px; color:#263746; } .frowse-ask-modal__body { flex:1; overflow:auto; padding:24px; background:#f7f9fb; } .frowse-ask-modal__intro { max-width:760px; margin:0 auto 20px; color:#405365; } .frowse-ask-messages { max-width:900px; margin:0 auto; display:grid; gap:16px; } .frowse-ask-message { max-width:82%; padding:14px 16px; border-radius:14px; line-height:1.5; white-space:pre-wrap; } .frowse-ask-message--shopper { justify-self:end; background:#183f63; color:#fff; } .frowse-ask-message--frowse { justify-self:start; background:#fff; border:1px solid #dce4eb; color:#263746; } .frowse-ask-products { max-width:900px; margin:16px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .frowse-ask-product { background:#fff; border:1px solid #dce4eb; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; } .frowse-ask-product img { width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; } .frowse-ask-product__content { padding:14px; display:grid; gap:8px; } .frowse-ask-product__title { margin:0; font-size:1rem; line-height:1.35; } .frowse-ask-product__price { font-size:1rem; font-weight:700; line-height:1.35; } .frowse-ask-product__meta { font-size:.9rem; color:#52687a; } .frowse-ask-product__reason { margin:0; font-size:.92rem; color:#344b5e; } .frowse-ask-product__link { font-weight:700; text-decoration:none; } .frowse-ask-modal__footer { padding:16px 24px 20px; border-top:1px solid #e1e7ed; background:#fff; } .frowse-ask-form { max-width:900px; margin:0 auto; display:flex; gap:10px; align-items:flex-end; } .frowse-ask-form textarea { flex:1; min-height:52px; max-height:150px; resize:vertical; border:1px solid #b9c6d1; border-radius:12px; padding:13px 14px; font:inherit; } .frowse-ask-form button { min-height:52px; border:0; border-radius:12px; padding:0 20px; font-weight:700; cursor:pointer; background:#183f63; color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:8px; } .frowse-ask-form button:disabled,.frowse-ask-form textarea:disabled { opacity:.58; cursor:not-allowed; } /* Frowse 1.0.175 — Ask Frowse visible working state. */ .frowse-ask-form button.is-working::before { content:""; width:14px; height:14px; box-sizing:border-box; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:frowse-ask-working-spin .8s linear infinite; flex:0 0 auto; } @keyframes frowse-ask-working-spin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .frowse-ask-form button.is-working::before { animation:none; } } .frowse-ask-status { max-width:900px; min-height:1.4em; margin:8px auto 0; font-size:.88rem; color:#617587; } .frowse-ask-status[aria-live] { display:block; } @media (max-width: 782px) { .frowse-ask-modal { padding:0; } .frowse-ask-modal__dialog { width:100vw; height:100dvh; max-height:none; border-radius:0; } .frowse-ask-modal__header,.frowse-ask-modal__body,.frowse-ask-modal__footer { padding-left:16px; padding-right:16px; } .frowse-ask-products { grid-template-columns:1fr; } .frowse-ask-message { max-width:94%; } .frowse-ask-form { align-items:stretch; } .frowse-ask-form button { padding:0 14px; } } /* Frowse 1.0.170 — Ask Frowse handoff to the existing Search Amazon control. */ .frowse-ask-amazon-offer { max-width: 900px; margin: 1rem auto 0; padding: 1rem; border: 1px solid rgba(18, 74, 112, .16); border-radius: 12px; background: rgba(18, 74, 112, .05); } .frowse-ask-amazon-offer[hidden] { display: none; } .frowse-ask-amazon-offer p { margin: 0 0 .75rem; } .frowse-ask-amazon-offer__button { border: 0; border-radius: 999px; padding: .7rem 1rem; font: inherit; font-weight: 700; color: #fff; background: #183f63; cursor: pointer; } /* Frowse 1.0.171 — integrated Ask Frowse Amazon continuation. */ .frowse-ask-message--frowse .frowse-ask-amazon-offer { max-width:none; margin:.85rem 0 0; padding:.85rem 0 0; border:0; border-top:1px solid rgba(18,74,112,.14); border-radius:0; background:transparent; } .frowse-ask-message--frowse .frowse-ask-amazon-offer__copy { margin:0 0 .7rem; } .frowse-header-amazon-search--handoff { position:relative; z-index:20; outline:4px solid rgba(0,119,255,.28); outline-offset:5px; border-radius:12px; box-shadow:0 0 0 10px rgba(255,255,255,.92),0 8px 28px rgba(9,44,83,.22); } /* Frowse 1.0.173 — Ask Frowse canonical recommendation cards. */ .frowse-best-seller-card__reason { margin:0 0 18px; color:#344b5e; font-size:.88rem; line-height:1.45; } .frowse-ask-products .frowse-best-seller-card { height:100%; } /* Frowse 1.0.176 — Ask Frowse completed-consultation restart. */ .frowse-ask-new-consultation { max-width:900px; margin:10px auto 0; } .frowse-ask-new-consultation[hidden] { display:none !important; } .frowse-ask-new-consultation__button { appearance:none; border:1px solid #b9c6d1; border-radius:10px; padding:9px 14px; background:#f7f9fb; color:#183f63; font:inherit; font-weight:700; cursor:pointer; } .frowse-ask-new-consultation__button:hover { background:#eef3f7; } .frowse-ask-new-consultation__button:focus-visible { outline:3px solid rgba(8,123,240,.28); outline-offset:2px; } /* Frowse 1.0.178 — Ask Frowse flagship workspace presentation. */ .frowse-ask-modal__dialog { border: 2px solid #1674d1; box-shadow: 0 28px 90px rgba(4, 28, 54, .34), 0 0 0 1px rgba(255,255,255,.65) inset; } .frowse-ask-modal__header { position: relative; padding: 22px 28px; border-bottom: 1px solid rgba(22,116,209,.22); background: linear-gradient(135deg, #ffffff 0%, #f5faff 58%, #e8f4ff 100%); overflow: hidden; } .frowse-ask-modal__header::after { content: ""; position: absolute; inset: auto -8% -42px 35%; height: 86px; background: linear-gradient(160deg, transparent 35%, rgba(22,116,209,.07) 36%, rgba(22,116,209,.02) 68%, transparent 69%); pointer-events: none; } .frowse-ask-modal__brand { display:flex; align-items:center; gap:14px; min-width:0; position:relative; z-index:1; } .frowse-ask-modal__spark { width: 42px; height: 42px; flex:0 0 42px; display:grid; place-items:center; color:#0f6fd4; font-size:2.15rem; line-height:1; } .frowse-ask-modal__heading { min-width:0; } .frowse-ask-modal__title { color:#145ca8; font-size:1.8rem; line-height:1.05; letter-spacing:-.025em; } .frowse-ask-modal__tagline { margin:5px 0 0; color:#536d87; font-size:.98rem; line-height:1.25; } .frowse-ask-modal__header-actions { display:flex; align-items:center; gap:16px; position:relative; z-index:1; } .frowse-ask-modal__badge { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; background:#e6f4ff; color:#0968c4; font-size:.84rem; font-weight:700; white-space:nowrap; } .frowse-ask-modal__badge::before { content:"✦"; font-size:1rem; } .frowse-ask-modal__close { border-radius:10px; transition:background-color .15s ease, color .15s ease; } .frowse-ask-modal__close:hover,.frowse-ask-modal__close:focus-visible { background:#eaf4fd; color:#0e67bd; } .frowse-ask-modal__body { padding:28px; background: linear-gradient(145deg, #fbfdff 0%, #f6faff 72%, #edf6ff 100%); } .frowse-ask-modal__intro { position:relative; max-width:900px; margin:0 auto 22px; padding:18px 20px 18px 68px; border:1px solid #d8e7f5; border-radius:16px; background:rgba(255,255,255,.88); box-shadow:0 8px 24px rgba(23,78,126,.05); color:#203d59; font-size:1.02rem; line-height:1.5; } .frowse-ask-modal__intro::before { content:"✦"; position:absolute; left:18px; top:50%; transform:translateY(-50%); width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#e4f3ff; color:#0f70d7; font-size:1.25rem; } .frowse-ask-suggestions { max-width:900px; margin:0 auto 24px; } .frowse-ask-suggestions__label { margin:0 0 10px; color:#61778c; font-size:.9rem; font-weight:600; } .frowse-ask-suggestions__list { display:flex; flex-wrap:wrap; gap:9px; } .frowse-ask-suggestion { appearance:none; border:1px solid #cfe2f4; border-radius:999px; background:rgba(255,255,255,.78); color:#174d7d; padding:9px 14px; font:inherit; font-size:.88rem; font-weight:650; cursor:pointer; transition:transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .frowse-ask-suggestion:hover,.frowse-ask-suggestion:focus-visible { transform:translateY(-1px); border-color:#65a9e7; background:#fff; box-shadow:0 5px 14px rgba(22,116,209,.10); } .frowse-ask-messages { max-width:900px; } .frowse-ask-message--frowse { border-color:#d4e4f2; box-shadow:0 5px 18px rgba(23,78,126,.05); } .frowse-ask-modal__footer { padding:17px 28px 18px; border-top:1px solid rgba(22,116,209,.22); background:linear-gradient(180deg,#fff 0%,#f9fcff 100%); } .frowse-ask-form { max-width:900px; } .frowse-ask-form textarea { border:2px solid #8fc3ef; border-radius:14px; background:#fff; box-shadow:0 0 0 3px rgba(22,116,209,0); transition:border-color .15s ease, box-shadow .15s ease; } .frowse-ask-form textarea:focus { outline:0; border-color:#1674d1; box-shadow:0 0 0 3px rgba(22,116,209,.12); } .frowse-ask-form button { min-width:96px; border-radius:14px; background:linear-gradient(135deg,#1769ad,#0f78d7); box-shadow:0 8px 18px rgba(18,105,177,.18); } .frowse-ask-form button:not(:disabled):hover { filter:brightness(1.04); transform:translateY(-1px); } .frowse-ask-status { max-width:900px; } .frowse-ask-modal__trust { max-width:900px; margin:8px auto 0; display:flex; justify-content:space-between; gap:16px; color:#718395; font-size:.76rem; line-height:1.3; } .frowse-ask-modal__trust span:first-child::before { content:"◇"; color:#1674d1; margin-right:6px; font-weight:800; } .frowse-ask-modal__trust span:last-child::before { content:"✦"; color:#1674d1; margin-right:6px; } @media (max-width: 782px) { .frowse-ask-modal__dialog { border:0; } .frowse-ask-modal__header { padding-top:16px; padding-bottom:16px; } .frowse-ask-modal__spark { width:34px; height:34px; flex-basis:34px; font-size:1.75rem; } .frowse-ask-modal__title { font-size:1.5rem; } .frowse-ask-modal__tagline { font-size:.84rem; } .frowse-ask-modal__badge { display:none; } .frowse-ask-modal__body { padding-top:20px; } .frowse-ask-modal__intro { padding:14px 14px 14px 54px; } .frowse-ask-modal__intro::before { left:12px; } .frowse-ask-suggestions { margin-bottom:18px; } .frowse-ask-suggestions__list { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; } .frowse-ask-suggestion { flex:0 0 auto; } .frowse-ask-modal__trust { flex-direction:column; gap:3px; } } /* Frowse 1.0.179 — Ask Frowse flagship empty state and shopper-controlled restart. */ .frowse-ask-modal__dialog { width:min(1120px, 90vw); } .frowse-ask-modal__header { padding:24px 34px; } .frowse-ask-modal__spark { width:48px; height:48px; flex-basis:48px; font-size:2.45rem; } .frowse-ask-modal__title { font-size:2rem; } .frowse-ask-modal__tagline { font-size:1rem; } .frowse-ask-modal__header-new { appearance:none; border:1px solid #b9d9f5; border-radius:999px; padding:8px 13px; background:rgba(255,255,255,.76); color:#145ca8; font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; } .frowse-ask-modal__header-new[hidden] { display:none !important; } .frowse-ask-modal__header-new:hover,.frowse-ask-modal__header-new:focus-visible { background:#fff; border-color:#69ace7; outline:0; box-shadow:0 0 0 3px rgba(22,116,209,.10); } .frowse-ask-modal__body { padding:30px 44px; } .frowse-ask-modal__intro { max-width:980px; margin-bottom:26px; padding:20px 24px 20px 76px; font-size:1.08rem; } .frowse-ask-modal__intro::before { left:20px; width:40px; height:40px; } .frowse-ask-empty-state { max-width:980px; margin:0 auto; } .frowse-ask-suggestions { max-width:none; margin:0 0 26px; } .frowse-ask-suggestions__label { margin-bottom:12px; font-size:1rem; } .frowse-ask-suggestions__list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .frowse-ask-suggestion { min-height:54px; display:flex; align-items:center; gap:10px; justify-content:flex-start; padding:10px 16px; border-radius:999px; font-size:.9rem; text-align:left; background:rgba(255,255,255,.72); } .frowse-ask-suggestion > span { width:25px; flex:0 0 25px; color:#0877e3; font-size:1.25rem; font-weight:800; text-align:center; } .frowse-ask-guidance { display:flex; align-items:center; gap:15px; max-width:820px; padding:17px 20px; border-radius:16px; background:linear-gradient(90deg,#eaf6ff 0%,#f1f9ff 100%); color:#4d6780; } .frowse-ask-guidance__icon { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#0877e3; font-size:1.1rem; } .frowse-ask-guidance strong { display:block; margin-bottom:2px; color:#0877e3; font-size:1rem; } .frowse-ask-guidance span { display:block; font-size:.92rem; line-height:1.4; } .frowse-ask-modal__footer { padding:18px 44px 20px; } .frowse-ask-form { max-width:980px; } .frowse-ask-form textarea { min-height:62px; padding:16px 18px; } .frowse-ask-form button { min-width:118px; min-height:62px; font-size:1rem; } .frowse-ask-status,.frowse-ask-modal__trust,.frowse-ask-new-consultation { max-width:980px; } .frowse-ask-modal--active .frowse-ask-modal__body { padding-top:28px; } .frowse-ask-modal--active .frowse-ask-messages,.frowse-ask-modal--active .frowse-ask-products { max-width:980px; } @media (max-width: 1050px) { .frowse-ask-suggestions__list { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 782px) { .frowse-ask-modal__header { padding:15px 16px; } .frowse-ask-modal__spark { width:34px; height:34px; flex-basis:34px; font-size:1.75rem; } .frowse-ask-modal__title { font-size:1.5rem; } .frowse-ask-modal__header-actions { gap:6px; } .frowse-ask-modal__header-new { padding:7px 10px; font-size:.75rem; } .frowse-ask-modal__body { padding:20px 16px; } .frowse-ask-modal__intro { padding:14px 14px 14px 54px; font-size:.98rem; } .frowse-ask-suggestions__list { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:9px; padding-bottom:5px; } .frowse-ask-suggestion { flex:0 0 auto; min-height:46px; } .frowse-ask-guidance { padding:14px; } .frowse-ask-modal__footer { padding:14px 16px 16px; } .frowse-ask-form textarea,.frowse-ask-form button { min-height:54px; } } /* Frowse 1.0.181 — compact Ask Frowse conversation typography. */ .frowse-ask-modal--active .frowse-ask-message { font-size:16px; line-height:1.55; padding:12px 15px; } .frowse-ask-modal--active .frowse-ask-message--shopper { font-size:16px; } @media (max-width: 782px) { .frowse-ask-modal--active .frowse-ask-message { font-size:15.5px; line-height:1.5; padding:11px 13px; } } /* Frowse 1.0.182 — place the shopper-controlled consultation restart beside the composer. */ .frowse-ask-form { align-items:stretch; } .frowse-ask-form__actions { display:flex; flex:0 0 150px; flex-direction:column; align-items:stretch; justify-content:flex-end; gap:8px; } .frowse-ask-form__actions .frowse-ask-new-consultation__button { min-width:0; min-height:0; padding:7px 10px; border:1px solid #b9d9f5; border-radius:10px; background:#fff; box-shadow:none; color:#145ca8; font-size:.78rem; font-weight:700; line-height:1.25; transform:none; } .frowse-ask-form__actions .frowse-ask-new-consultation__button:hover, .frowse-ask-form__actions .frowse-ask-new-consultation__button:focus-visible { background:#f4f9fe; border-color:#69ace7; filter:none; transform:none; outline:0; box-shadow:0 0 0 3px rgba(22,116,209,.10); } .frowse-ask-form__actions .frowse-ask-new-consultation__button[hidden] { display:none !important; } .frowse-ask-form__actions button[type="submit"] { width:100%; min-width:0; } @media (max-width: 782px) { .frowse-ask-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; } .frowse-ask-form__actions { flex-basis:auto; width:132px; } .frowse-ask-form__actions .frowse-ask-new-consultation__button { font-size:.72rem; padding:6px 8px; } } /* Frowse 1.0.183 — final composer proportion and restart-action polish. */ @media (min-width: 783px) { .frowse-ask-form textarea { min-height:96px; } .frowse-ask-form__actions { flex:0 0 150px; } .frowse-ask-form__actions .frowse-ask-new-consultation__button { width:100%; min-height:34px; padding:6px 10px; border:2px solid #1674d1; color:#145ca8; } .frowse-ask-form__actions button[type="submit"] { width:100%; min-height:54px; } } @media (max-width: 782px) { .frowse-ask-form textarea { min-height:82px; } .frowse-ask-form__actions .frowse-ask-new-consultation__button { width:100%; border-width:2px; border-color:#1674d1; } .frowse-ask-form__actions button[type="submit"] { width:100%; min-height:54px; } } /* Frowse 1.0.184 — make the homepage Search Frowse / Search Amazon modes functional. */ .frowse-finder__input--search { grid-template-columns:auto minmax(0,1fr) auto; } .frowse-finder__input--search input[type="search"] { width:100%; min-width:0; margin:0; padding:0; border:0; outline:0; background:transparent; color:var(--frowse-ink); font:inherit; font-size:.99rem; box-shadow:none; } .frowse-finder__input--search input[type="search"]::placeholder { color:#6f7ca6; opacity:1; } .frowse-finder__input:focus-within { border-color:#0b72ff; box-shadow:0 0 0 3px rgba(11,114,255,.12); } .frowse-finder__input button { cursor:pointer; } .frowse-finder__modes [aria-disabled="true"] { cursor:not-allowed; opacity:.55; } /* * Frowse 1.0.186 — shared editorial Frowse shell. * Root-owned editorial copy remains untouched; this is presentation only. */ body.frowse-shared-editorial { --frowse-editorial-navy:#07195f; --frowse-editorial-blue:#0b63ce; --frowse-editorial-cyan:#18c9f4; --frowse-editorial-ink:#10203f; --frowse-editorial-muted:#52617d; --frowse-editorial-width:960px; background:#fff; } /* The page template supplies a plain template-part header. Keep the established Frowse header visible as shoppers move through long editorial pages. */ body.frowse-shared-editorial > header.wp-block-template-part { position:sticky; top:0; z-index:100; } body.admin-bar.frowse-shared-editorial > header.wp-block-template-part { top:32px; } /* Branded title band: restrained enough for policy/legal content, but clearly part of the same product experience as the discovery and Ask Frowse UI. */ body.frowse-shared-editorial main.wp-block-group > .wp-block-group.alignfull:first-child { position:relative; margin:0 !important; padding:46px 24px 34px !important; background:linear-gradient(135deg,#f7fbff 0%,#eef6ff 62%,#f4fdff 100%) !important; border-bottom:1px solid #d7e8f8; } body.frowse-shared-editorial main.wp-block-group > .wp-block-group.alignfull:first-child::before { content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg,#0b63ce 0%,#17a9e7 58%,#19d4ee 100%); } body.frowse-shared-editorial .wp-block-post-title { width:min(var(--frowse-editorial-width),calc(100% - 40px)); max-width:var(--frowse-editorial-width) !important; margin:0 auto !important; color:var(--frowse-editorial-navy) !important; font-size:clamp(2.35rem,4.2vw,3.45rem) !important; font-weight:800 !important; line-height:1.06 !important; letter-spacing:-.035em; } /* One editorial measure across every shared page, regardless of historical block widths saved in the canonical root record. */ body.frowse-shared-editorial .wp-block-post-content { box-sizing:border-box; width:min(var(--frowse-editorial-width),calc(100% - 40px)) !important; max-width:var(--frowse-editorial-width) !important; margin:0 auto !important; padding:42px 0 76px; color:var(--frowse-editorial-ink); font-size:1.04rem; line-height:1.72; } body.frowse-shared-editorial .wp-block-post-content > * { max-width:none !important; margin-left:0 !important; margin-right:0 !important; } body.frowse-shared-editorial .wp-block-post-content p, body.frowse-shared-editorial .wp-block-post-content li { color:var(--frowse-editorial-ink); } body.frowse-shared-editorial .wp-block-post-content p { margin-top:0; margin-bottom:1.45em; } /* Editorial hierarchy: Frowse navy H1, vivid-but-professional blue section headings, and a cyan marker that carries the current brand language. */ body.frowse-shared-editorial .wp-block-post-content h2 { position:relative; margin:2.15em 0 .72em !important; padding-left:18px; color:var(--frowse-editorial-blue) !important; font-size:clamp(1.75rem,3vw,2.35rem) !important; font-weight:800 !important; line-height:1.14 !important; letter-spacing:-.025em; } body.frowse-shared-editorial .wp-block-post-content h2:first-child { margin-top:.15em !important; } body.frowse-shared-editorial .wp-block-post-content h2::before { content:""; position:absolute; left:0; top:.12em; bottom:.12em; width:5px; border-radius:999px; background:linear-gradient(180deg,var(--frowse-editorial-blue),var(--frowse-editorial-cyan)); } body.frowse-shared-editorial .wp-block-post-content h3 { margin:1.8em 0 .65em !important; color:var(--frowse-editorial-navy) !important; font-size:clamp(1.28rem,2.2vw,1.55rem) !important; font-weight:750 !important; line-height:1.22 !important; } body.frowse-shared-editorial .wp-block-post-content a { color:var(--frowse-editorial-blue); text-decoration-color:rgba(11,99,206,.42); text-decoration-thickness:1.5px; text-underline-offset:3px; } body.frowse-shared-editorial .wp-block-post-content a:hover, body.frowse-shared-editorial .wp-block-post-content a:focus-visible { color:#084fa9; text-decoration-color:currentColor; } body.frowse-shared-editorial .wp-block-post-content strong { color:#081c45; } @media (max-width:782px) { body.admin-bar.frowse-shared-editorial > header.wp-block-template-part { top:46px; } body.frowse-shared-editorial main.wp-block-group > .wp-block-group.alignfull:first-child { padding:32px 18px 26px !important; } body.frowse-shared-editorial .wp-block-post-title, body.frowse-shared-editorial .wp-block-post-content { width:calc(100% - 32px) !important; } body.frowse-shared-editorial .wp-block-post-title { font-size:clamp(2rem,10vw,2.65rem) !important; } body.frowse-shared-editorial .wp-block-post-content { padding:30px 0 58px; font-size:1rem; line-height:1.68; } body.frowse-shared-editorial .wp-block-post-content h2 { padding-left:15px; } } /* Frowse 1.0.187 — shared editorial vertical-rhythm polish. */ body.frowse-shared-editorial main.wp-block-group > .wp-block-group.alignfull:first-child { padding-top:34px !important; padding-bottom:26px !important; } body.frowse-shared-editorial .wp-block-post-content { padding-top:30px; padding-bottom:66px; } body.frowse-shared-editorial .wp-block-post-content p { margin-bottom:1.2em; } body.frowse-shared-editorial .wp-block-post-content h2 { margin-top:1.65em !important; margin-bottom:.62em !important; } body.frowse-shared-editorial .wp-block-post-content h3 { margin-top:1.45em !important; margin-bottom:.58em !important; } @media (max-width:782px) { body.frowse-shared-editorial main.wp-block-group > .wp-block-group.alignfull:first-child { padding-top:26px !important; padding-bottom:21px !important; } body.frowse-shared-editorial .wp-block-post-content { padding-top:24px; padding-bottom:50px; } body.frowse-shared-editorial .wp-block-post-content h2 { margin-top:1.45em !important; } } /* Frowse 1.0.188 — shared editorial compact spacing. */ body.frowse-shared-editorial main.wp-block-group > .wp-block-group.alignfull:first-child { padding-top:20px !important; padding-bottom:18px !important; } body.frowse-shared-editorial .wp-block-post-content { padding-top:20px; padding-bottom:58px; } body.frowse-shared-editorial .wp-block-post-content p { margin-bottom:1.05em; } body.frowse-shared-editorial .wp-block-post-content h2 { margin-top:1.35em !important; margin-bottom:.52em !important; } body.frowse-shared-editorial .wp-block-post-content h3 { margin-top:1.25em !important; margin-bottom:.5em !important; } @media (max-width:782px) { body.frowse-shared-editorial main.wp-block-group > .wp-block-group.alignfull:first-child { padding-top:18px !important; padding-bottom:16px !important; } body.frowse-shared-editorial .wp-block-post-content { padding-top:18px; padding-bottom:46px; } body.frowse-shared-editorial .wp-block-post-content h2 { margin-top:1.25em !important; } } /* Frowse 1.0.189 — Discovery population search and compact mobile filters. */ .frowse-best-sellers-filters { display: block; } .frowse-best-sellers-filters__search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 14px; } .frowse-best-sellers-filters__search { display: grid; gap: 7px; font-size: .8rem; font-weight: 800; letter-spacing: .01em; color: #24416d; } .frowse-best-sellers-filters__search input { min-height: 48px; font-size: .95rem; } .frowse-best-sellers-filters .frowse-best-sellers-filters__search-submit { min-height: 48px; } .frowse-best-sellers-filters__details > summary { display: none; } .frowse-best-sellers-filters__controls { display: grid; grid-template-columns: 1.4fr repeat(5,1fr) auto auto; gap: 14px; align-items: end; } @media (max-width: 1100px) { .frowse-best-sellers-filters__controls { grid-template-columns: repeat(3,1fr); } } @media (max-width: 780px) { .frowse-best-sellers-filters { padding: 14px; } .frowse-best-sellers-filters__search-row { margin-bottom: 10px; } .frowse-best-sellers-filters__details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 9px 12px; border: 1px solid #bcd0e8; border-radius: 11px; background: #f7fbff; color: #174b96; font-size: .9rem; font-weight: 800; cursor: pointer; } .frowse-best-sellers-filters__details > summary::after { content: '+'; font-size: 1.2rem; line-height: 1; } .frowse-best-sellers-filters__details[open] > summary::after { content: '−'; } .frowse-best-sellers-filters__details:not([open]) > .frowse-best-sellers-filters__controls { display: none; } .frowse-best-sellers-filters__details[open] > .frowse-best-sellers-filters__controls { display: grid; } .frowse-best-sellers-filters__controls { grid-template-columns: 1fr 1fr; margin-top: 12px; } } @media (max-width: 520px) { .frowse-best-sellers-filters__search-row { grid-template-columns: 1fr; } .frowse-best-sellers-filters__search-submit { width: 100%; } .frowse-best-sellers-filters__controls { grid-template-columns: 1fr; } } /* Frowse 1.0.191 — Discovery filter disclosure progressive enhancement. * The details element is rendered open server-side so desktop/no-JS users never lose filters. * discovery-filters.js only collapses it on narrow screens when no secondary filter is active. */ /* Frowse 1.0.198 — primary navigation parity and Frowse Insights index. */ .frowse-home-nav-link a { display: inline-flex; align-items: center; gap: 7px; font-size: 1rem !important; font-weight: 700; } .frowse-header-tool-icon--best-sellers { color: #62ddff; font-size: 18px; } .frowse-header-tool-icon--insights { color: #9cecff; font-size: 20px; transform: translateY(-1px); } .frowse-insights { width: min(1440px, calc(100% - 64px)); margin: 0 auto; padding: 38px 0 72px; color: #07134e; } .frowse-insights__hero { max-width: 820px; margin-bottom: 34px; } .frowse-insights-card__meta { margin: 0 0 8px; color: #0b63df; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .frowse-insights__hero h1 { margin: 0 0 12px; font-size: clamp(2.5rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.045em; } .frowse-insights__hero h1 span { color: #0b7cff; } .frowse-insights__hero > p:last-child { max-width: 720px; margin: 0; color: #475274; font-size: 1.08rem; line-height: 1.6; } .frowse-insights__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .frowse-insights-card { overflow: hidden; border: 1px solid #dbe5f7; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(21,55,120,.07); } .frowse-insights-card__image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #e9f9ff, #eef3ff); } .frowse-insights-card__image img { width: 100%; height: 100%; object-fit: cover; } .frowse-insights-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #0b5bdf; font-weight: 800; } .frowse-insights-card__body { padding: 20px; } .frowse-insights-card__body h2 { margin: 0 0 10px; font-size: 1.32rem; line-height: 1.18; } .frowse-insights-card__body h2 a, .frowse-insights-card__link { color: #07134e; text-decoration: none; } .frowse-insights-card__body > p:not(.frowse-insights-card__meta) { margin: 0 0 16px; color: #56617e; line-height: 1.55; } .frowse-insights-card__link { font-weight: 800; } .frowse-insights-card__link:hover, .frowse-insights-card__body h2 a:hover { color: #0b63df; } .frowse-insights__empty { padding: 30px; border: 1px solid #dbe5f7; border-radius: 18px; background: #f7faff; } .frowse-insights__empty h2 { margin-top: 0; } .frowse-insights__pagination { margin-top: 36px; } .frowse-insights__pagination .page-numbers { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; } .frowse-insights__pagination a, .frowse-insights__pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #cddcf2; border-radius: 10px; text-decoration: none; } .frowse-insights__pagination .current { background: #0b63df; color: #fff; border-color: #0b63df; } @media (max-width: 980px) { .frowse-insights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .frowse-insights { width: calc(100% - 28px); padding-top: 30px; } .frowse-insights__grid { grid-template-columns: 1fr; } } /* * Frowse 1.0.200 — Insights single-article presentation. * Match the established shared-editorial reading measure and keep Insights * focused on editorial content rather than publication chronology/comments. */ body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group.ext-animate--on, body.frowse-insights-shell.single-post .wp-block-post-content, body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group:last-of-type { box-sizing:border-box; width:min(960px,calc(100% - 40px)) !important; max-width:960px !important; margin-left:auto !important; margin-right:auto !important; } body.frowse-insights-shell.single-post .wp-block-post-content > * { max-width:none !important; } /* * Frowse 1.0.201 — Insights single-article presentation correction. * Give long-form Insights a wider reading canvas than the 1.0.200 trial while * preserving a bounded editorial measure and responsive gutters. */ body.frowse-insights-shell.single-post { --frowse-insights-article-width:1120px; } body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group.ext-animate--on, body.frowse-insights-shell.single-post .wp-block-post-content, body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group:last-of-type { width:min(var(--frowse-insights-article-width),calc(100% - 40px)) !important; max-width:var(--frowse-insights-article-width) !important; } body.frowse-insights-shell.single-post .wp-block-post-content > * { max-width:none !important; } @media (max-width: 700px) { body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group.ext-animate--on, body.frowse-insights-shell.single-post .wp-block-post-content, body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group:last-of-type { width:calc(100% - 28px) !important; } } /* * Frowse 1.0.202 — Insights editorial shell alignment. * Long-form Insights follow the established editorial proportions used by the * wider Frowse/Artisan editorial model while retaining Frowse typography and colour. */ body.frowse-insights-shell.single-post { --frowse-insights-article-width: 1200px; --frowse-insights-heading-blue: #075497; } body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group.ext-animate--on, body.frowse-insights-shell.single-post .wp-block-post-content, body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group:last-of-type { width: min(var(--frowse-insights-article-width), calc(100% - 40px)) !important; max-width: var(--frowse-insights-article-width) !important; } body.frowse-insights-shell.single-post .wp-block-post-title { width: min(var(--frowse-insights-article-width), calc(100% - 40px)) !important; max-width: var(--frowse-insights-article-width) !important; margin-left: auto !important; margin-right: auto !important; font-size: clamp(2.55rem, 3.45vw, 3.55rem) !important; line-height: 1.06 !important; letter-spacing: -0.035em; color: var(--frowse-insights-heading-blue) !important; } body.frowse-insights-shell.single-post .frowse-insights-breadcrumb { width: min(var(--frowse-insights-article-width), calc(100% - 40px)); max-width: var(--frowse-insights-article-width); margin: 28px auto 14px; font-size: 0.95rem; line-height: 1.4; font-weight: 700; } body.frowse-insights-shell.single-post .frowse-insights-breadcrumb a { color: var(--frowse-insights-heading-blue); text-decoration: none; } body.frowse-insights-shell.single-post .frowse-insights-breadcrumb a:hover, body.frowse-insights-shell.single-post .frowse-insights-breadcrumb a:focus { text-decoration: underline; } body.frowse-insights-shell.single-post .wp-block-post-content { font-size: 1.08rem; line-height: 1.72; } body.frowse-insights-shell.single-post .wp-block-post-content p, body.frowse-insights-shell.single-post .wp-block-post-content ul, body.frowse-insights-shell.single-post .wp-block-post-content ol { margin-top: 0; margin-bottom: 1.5em; } body.frowse-insights-shell.single-post .wp-block-post-content h2 { margin-top: 1.55em; margin-bottom: 0.62em; font-size: clamp(1.85rem, 2.4vw, 2.25rem) !important; line-height: 1.14 !important; letter-spacing: -0.025em; color: var(--frowse-insights-heading-blue) !important; } body.frowse-insights-shell.single-post .wp-block-post-content h3 { margin-top: 1.45em; margin-bottom: 0.55em; font-size: clamp(1.4rem, 1.85vw, 1.7rem) !important; line-height: 1.2 !important; color: var(--frowse-insights-heading-blue) !important; } body.frowse-insights-shell.single-post .wp-block-post-content li + li { margin-top: 0.34em; } @media (max-width: 700px) { body.frowse-insights-shell.single-post .wp-block-post-title, body.frowse-insights-shell.single-post .frowse-insights-breadcrumb, body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group.ext-animate--on, body.frowse-insights-shell.single-post .wp-block-post-content, body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group:last-of-type { width: calc(100% - 28px) !important; } body.frowse-insights-shell.single-post .wp-block-post-content { font-size: 1rem; line-height: 1.68; } } /* * Frowse 1.0.204 — Insights outer title-shell correction. * 1.0.203 accidentally shipped its final CSS block with escaped newline * characters, so the browser could not apply that correction. Apply the * actual constrained-group override here and keep the whole title/breadcrumb * shell on the same 1200px editorial canvas as the article body. */ body.frowse-insights-shell.single-post { --frowse-insights-article-width: 1200px; --frowse-insights-heading-blue: #075497; } body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group.ext-animate--on { box-sizing: border-box; width: min(var(--frowse-insights-article-width), calc(100% - 40px)) !important; max-width: var(--frowse-insights-article-width) !important; margin-left: auto !important; margin-right: auto !important; } body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group.ext-animate--on > .wp-block-group:first-child { box-sizing: border-box; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } body.frowse-insights-shell.single-post .frowse-insights-breadcrumb { box-sizing: border-box; width: 100% !important; max-width: none !important; margin: 0 0 14px !important; padding: 0 !important; text-align: left !important; } body.frowse-insights-shell.single-post .frowse-insights-breadcrumb span { color: #6b7280; font-weight: 500; } body.frowse-insights-shell.single-post .wp-block-post-title { box-sizing: border-box; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; font-size: clamp(2.45rem, 3vw, 3rem) !important; line-height: 1.08 !important; letter-spacing: -0.03em !important; color: var(--frowse-insights-heading-blue) !important; } @media (max-width: 700px) { body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group.ext-animate--on { width: calc(100% - 28px) !important; } body.frowse-insights-shell.single-post .wp-block-post-title { font-size: clamp(2rem, 9vw, 2.65rem) !important; } } /* Frowse 1.0.205 — primary header typography parity and homepage finder icon accents. */ .frowse-home-header .frowse-home-nav-link a, .frowse-home-header .frowse-home-tool--ask a, .frowse-home-header .frowse-header-search > summary, .frowse-home-header .frowse-header-amazon-search > summary { font-size: 1rem !important; font-weight: 700 !important; } .frowse-finder__mode-icon { display: inline-flex; align-items: center; justify-content: center; margin-right: 7px; font-weight: 900; line-height: 1; } .frowse-finder__mode-icon--frowse { color: #0b72ff; font-size: 1.15em; } .frowse-finder__mode-icon--amazon { position: relative; width: 1.15em; height: 1.15em; border-radius: 50%; background: rgba(7,19,78,.07); color: #f3a712; font-family: Arial, Helvetica, sans-serif; font-size: 1.08em; font-weight: 800; text-transform: lowercase; } .frowse-finder__mode-icon--amazon::after { content: ""; position: absolute; left: .22em; right: .16em; bottom: .08em; height: .22em; border-bottom: 2px solid #f3a712; border-radius: 0 0 70% 70%; transform: rotate(4deg); } /* Frowse 1.0.207 — Insights canonical shopper-action footer. */ .frowse-insights-action-footer { margin: 3rem 0 0; padding: 1.1rem 1.5rem; background: #0d3da8; color: #fff; } .frowse-insights-action-footer__inner { max-width: var(--wp--style--global--wide-size); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; } .frowse-insights-action-footer__ask, .frowse-insights-action-footer .frowse-header-search > summary, .frowse-insights-action-footer .frowse-header-amazon-search > summary { display: inline-flex; align-items: center; gap: .45rem; color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; } .frowse-insights-action-footer__ask:hover, .frowse-insights-action-footer .frowse-header-search > summary:hover, .frowse-insights-action-footer .frowse-header-amazon-search > summary:hover { color: #fff; text-decoration: underline; } .frowse-insights-action-footer details { position: relative; } .frowse-insights-action-footer details > summary { list-style: none; } .frowse-insights-action-footer details > summary::-webkit-details-marker { display: none; } .frowse-insights-action-footer .frowse-header-search__form, .frowse-insights-action-footer .frowse-header-amazon-search__form { z-index: 20; } @media (max-width: 700px) { .frowse-insights-action-footer__inner { gap: 1rem 1.5rem; } } /* Frowse 1.0.208 — centre the Insights action footer and widen desktop footer branding. */ .frowse-insights-action-footer { margin: 3rem auto 0; max-width: 860px; border-radius: 14px; text-align: center; } @media (min-width: 981px) { .frowse-site-footer__top, .frowse-site-footer__separator { width: min(100%, 1300px) !important; max-width: 1300px !important; } .frowse-site-footer__brand { flex: 0 1 470px; } .frowse-site-footer__nav { flex: 1 1 720px; max-width: none; } } /* Frowse 1.0.209 — final Insights/footer presentation polish. * Give the desktop brand copy enough natural width for both statements to * remain on one line at normal desktop sizes, while preserving responsive * wrapping below the existing breakpoint. Remove the now-redundant template * separator that follows the Insights action footer. */ @media (min-width: 981px) { .frowse-site-footer__brand { flex: 0 1 560px; } .frowse-site-footer__nav { flex: 1 1 640px; max-width: none; } } body.frowse-insights-shell.single-post main.wp-block-group > .wp-block-group:last-of-type > .wp-block-separator { display: none !important; } /* Frowse 1.0.210 — desktop footer balance correction. * Preserve the wider brand copy while preventing individual Information * labels from breaking across lines on desktop. Responsive wrapping remains * unchanged below the established desktop breakpoint. */ @media (min-width: 981px) { .frowse-site-footer__brand { flex: 0 1 520px; } .frowse-site-footer__nav { flex: 1 1 680px; max-width: none; } .frowse-site-footer__nav-section--information .frowse-site-footer__links > * { white-space: nowrap; } } /* Frowse 1.0.211 — full-width desktop footer balance. * Match the full-width visual span of the canonical header while retaining * responsive stacking below the established desktop breakpoint. */ @media (min-width: 981px) { .frowse-site-footer__top, .frowse-site-footer__separator { width: 100% !important; max-width: none !important; } .frowse-site-footer__brand { flex: 0 1 560px; } .frowse-site-footer__nav { flex: 1 1 760px; max-width: none; } .frowse-site-footer__nav-section--information .frowse-site-footer__links > * { white-space: nowrap; } } /* * Frowse 1.0.215 — shared editorial top-spacing refinement. * Presentation only: tighten the title area immediately below the marketplace * header while preserving shared editorial routing, content and form behaviour. */ body.frowse-shared-editorial main.wp-block-group { margin-top:0 !important; padding-top:0 !important; } body.frowse-shared-editorial main.wp-block-group > .wp-block-group.alignfull:first-child { margin-top:0 !important; padding-top:10px !important; padding-bottom:12px !important; } @media (max-width:782px) { body.frowse-shared-editorial main.wp-block-group > .wp-block-group.alignfull:first-child { padding-top:10px !important; padding-bottom:10px !important; } } /* Frowse 1.0.216 — contextual Amazon affiliate disclosure at direct Search Amazon handoffs. */ .frowse-header-amazon-search__form { flex-wrap: wrap; } .frowse-header-amazon-search__form .frowse-amazon-affiliate-disclosure { flex: 0 0 100%; margin: 7px 2px 0; color: #53627a; font-size: 11px; font-weight: 500; line-height: 1.35; } .frowse-finder__amazon-disclosure { margin: 8px 2px 0; color: #5c6984; font-size: 12px; line-height: 1.4; } .frowse-finder__amazon-disclosure[hidden] { display: none !important; } /* Frowse 1.0.219 — full-width centred footer publication notice. * Presentation only: allow the copyright/product-information line to use the * full available footer content width instead of the constrained text width. */ .frowse-site-footer__copyright { width: 100% !important; max-width: none !important; text-align: center !important; } /* Frowse 1.0.220 — Insights archive production polish. * Match Discovery catalogue width, remove archive chronology/eyebrow clutter, * and retain the narrower single-article editorial reading measure unchanged. */ /* Frowse 1.0.222 — Insights archive production-width correction. * The stable frowse-insights-shell body class is supplied by the Theme for the * Insights index; WordPress does not add a slug-based page-insights body class. * Override the page template's constrained post-content child rule directly so * the archive matches the Discovery catalogue canvas. Single articles are * intentionally excluded by requiring body.page. */ body.frowse-insights-shell.page main.wp-block-group { padding-top: 0 !important; } body.frowse-insights-shell.page .wp-block-post-content { box-sizing: border-box; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } body.frowse-insights-shell.page .wp-block-post-content > .frowse-insights, body.frowse-insights-shell.page .frowse-insights { box-sizing: border-box; width: min(1440px, calc(100% - 64px)) !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; padding-top: 24px; } body.frowse-insights-shell.page .frowse-insights__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } @media (max-width: 1200px) { body.frowse-insights-shell.page .frowse-insights__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { body.frowse-insights-shell.page .frowse-insights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { body.frowse-insights-shell.page .wp-block-post-content > .frowse-insights, body.frowse-insights-shell.page .frowse-insights { width: calc(100% - 28px) !important; padding-top: 20px; } body.frowse-insights-shell.page .frowse-insights__grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- * Frowse 1.0.224 — pre-API product presentation refinement. * * In pre-API mode, Amazon Product Advertising Content is deliberately absent. * Discovery uses compact Frowse recommendation rows; single products use a * neutral Frowse handoff panel instead of any stored/imported Amazon imagery. * Authorised API imagery may occupy the same slots later without exposing * legacy local images. * -------------------------------------------------------------------------- */ body.frowse-amazon-content-pre-api .frowse-best-sellers-grid { grid-template-columns: 1fr; gap: 12px; } body.frowse-amazon-content-pre-api .frowse-best-seller-card { display: block; border-radius: 14px; overflow: visible; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 18px; min-height: 0; padding: 0; border-top: 0; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__review-region { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 18px; min-width: 0; padding: 16px 0 16px 18px; border-radius: 14px 0 0 14px; color: inherit; text-decoration: none !important; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__review-region:hover, body.frowse-amazon-content-pre-api .frowse-best-seller-card__review-region:focus-visible { background: #f6fbff; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__review-region:focus-visible { outline: 3px solid #0b4d91; outline-offset: -3px; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__signals { display: block; margin: 0; font-size: inherit; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__signals > span:not(.frowse-best-seller-card__frowse-rating) { display: none; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__frowse-rating { display: grid; justify-items: start; gap: 0; padding: 0; border: 0; background: transparent; color: #071b4b; line-height: 1; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__frowse-rating strong { font-size: 1.8rem; font-weight: 900; letter-spacing: -.035em; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__frowse-rating em { margin-top: 5px; font-size: .68rem; font-style: normal; font-weight: 800; line-height: 1.2; color: #48627f; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__content { min-width: 0; } body.frowse-amazon-content-pre-api .frowse-best-seller-card h2 { margin: 0 0 5px; font-size: 1.05rem; } body.frowse-amazon-content-pre-api .frowse-best-seller-card h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #071b4b; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__chevron { flex: 0 0 auto; font-size: 1.45rem; font-weight: 500; line-height: 1; color: #0b4d91; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__reason, body.frowse-amazon-content-pre-api .frowse-best-seller-card__best-for { margin: 0; font-size: .87rem; line-height: 1.42; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__reason + .frowse-best-seller-card__best-for { margin-top: 4px; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__footer { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; margin: 0; min-width: 146px; padding: 16px 18px 16px 0; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__footer > a { min-height: 36px; padding: 7px 12px; text-align: center; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__amazon-link { border-color: #0b4d91; background: #0b4d91; color: #fff; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__amazon-link:hover, body.frowse-amazon-content-pre-api .frowse-best-seller-card__amazon-link:focus-visible { border-color: #073d76; background: #073d76; color: #fff; } body.frowse-amazon-content-pre-api.tax-product_cat .wp-block-woocommerce-product-template, body.frowse-amazon-content-pre-api.search.search-results .wp-block-woocommerce-product-template, body.frowse-amazon-content-pre-api.woocommerce.search-results .wp-block-woocommerce-product-template { grid-template-columns: 1fr !important; } .frowse-product-placeholder { width: 100%; max-width: 512px; margin: 0 auto; border-radius: 18px; background: #eaf6fc; box-shadow: 0 12px 30px rgba(7, 59, 157, .07); } .frowse-product-placeholder__link, .frowse-product-placeholder__panel { display: block; } .frowse-product-placeholder__link { border-radius: 18px; color: inherit; text-decoration: none !important; } .frowse-product-placeholder__panel { box-sizing: border-box; min-height: 0; padding: clamp(34px, 7vw, 74px) clamp(24px, 5vw, 54px) clamp(30px, 6vw, 58px); border-radius: 18px; background: #eaf6fc; text-align: center; } .frowse-product-placeholder__wordmark { display: inline-grid; justify-items: center; margin: 0 auto clamp(34px, 6vw, 54px); color: #06245c; } .frowse-product-placeholder__wordmark > span { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 900; line-height: .95; letter-spacing: -.045em; } .frowse-product-placeholder__wordmark > i { display: block; width: 76%; height: clamp(12px, 2vw, 20px); margin-top: 2px; border-bottom: clamp(6px, 1vw, 10px) solid #16a7e0; border-radius: 0 0 70% 55%; transform: skewX(-10deg) rotate(-2deg); } .frowse-product-placeholder__title { display: block; margin: 0 0 14px; color: #071b4b; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 900; line-height: 1.15; } .frowse-product-placeholder__copy { display: block; max-width: 31rem; margin: 0 auto clamp(24px, 4vw, 36px); color: #425b78; font-size: clamp(.98rem, 2vw, 1.18rem); line-height: 1.45; } .frowse-product-placeholder__button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px; padding: 14px 20px; border-radius: 12px; background: #08295d; color: #fff; font-size: clamp(1.05rem, 2.4vw, 1.35rem); font-weight: 800; line-height: 1.2; transition: background-color .16s ease, transform .16s ease; } .frowse-product-placeholder__destination { display: block; margin-top: 16px; color: #425b78; font-size: clamp(.86rem, 1.8vw, 1rem); line-height: 1.35; } .frowse-product-placeholder__link:hover .frowse-product-placeholder__button, .frowse-product-placeholder__link:focus-visible .frowse-product-placeholder__button { background: #061f49; } .frowse-product-placeholder__link:hover .frowse-product-placeholder__button { transform: translateY(-1px); } .frowse-product-placeholder__link:focus-visible { outline: 3px solid #0b4d91; outline-offset: 3px; } .frowse-authorised-product-image { display: grid; place-items: center; min-height: 430px; padding: 20px; border: 1px solid #e2e9f1; border-radius: 18px; background: #fff; } .frowse-authorised-product-image img { display: block; max-width: 100%; max-height: 520px; width: auto; height: auto; object-fit: contain; } @media (max-width: 780px) { body.frowse-amazon-content-pre-api .frowse-best-seller-card__body { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 14px; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__footer { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__footer > a { flex: 1 1 145px; } .frowse-authorised-product-image { min-height: 300px; } } @media (max-width: 700px) { body.frowse-amazon-content-pre-api .frowse-best-seller-card__body { grid-template-columns: 1fr; gap: 0; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__review-region { grid-template-columns: 72px minmax(0, 1fr); padding: 14px 14px 10px; border-radius: 14px 14px 0 0; } body.frowse-amazon-content-pre-api .frowse-best-seller-card__footer { min-width: 0; padding: 0 14px 14px; } } /* Frowse 1.0.225 — PRE_API editorial review takes centre stage. */ body.frowse-amazon-content-pre-api .frowse-pre-api-review{margin-top:2rem;margin-bottom:var(--wp--preset--spacing--50);padding:clamp(1.35rem,2.5vw,2rem);border:1px solid #dce7f3;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(20,55,90,.06)} body.frowse-amazon-content-pre-api .frowse-pre-api-review>h2{margin:0 0 1rem;color:#183b61;font-size:clamp(1.65rem,3vw,2.2rem)} body.frowse-amazon-content-pre-api .frowse-pre-api-review__copy{font-size:1.04rem;line-height:1.7;color:#34495e} body.frowse-amazon-content-pre-api .frowse-pre-api-review__lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.4rem} body.frowse-amazon-content-pre-api .frowse-pre-api-review__lists section{padding:1.1rem 1.2rem;border-radius:14px;background:#f7fafc} body.frowse-amazon-content-pre-api .frowse-pre-api-review__lists h3,body.frowse-amazon-content-pre-api .frowse-pre-api-review__verdict h3{margin:0 0 .7rem;color:#183b61;font-size:1.08rem} body.frowse-amazon-content-pre-api .frowse-pre-api-review__lists ul{margin:0;padding:0;list-style:none} body.frowse-amazon-content-pre-api .frowse-pre-api-review__lists li{position:relative;margin:.45rem 0;padding-left:1.45rem;line-height:1.5} body.frowse-amazon-content-pre-api .frowse-pre-api-review__pros li:before{content:"✓";position:absolute;left:0;color:#16845b;font-weight:700} body.frowse-amazon-content-pre-api .frowse-pre-api-review__cons li:before{content:"–";position:absolute;left:.15rem;color:#a14a57;font-weight:700} body.frowse-amazon-content-pre-api .frowse-pre-api-review__verdict{margin-top:1.4rem;padding:1rem 1.2rem;border-left:4px solid #2b78c5;background:#f3f8fd;border-radius:0 12px 12px 0} body.frowse-amazon-content-pre-api .frowse-pre-api-review__verdict p{margin:0;color:#34495e;line-height:1.6} @media(max-width:700px){body.frowse-amazon-content-pre-api .frowse-pre-api-review__lists{grid-template-columns:1fr}} /* Frowse 1.0.227 — PRE_API review occupies the product-summary position. */ body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review--hero{ margin:1rem 0 1.35rem; padding:1rem 1.15rem 1.15rem; border:1px solid #dce7f3; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(20,55,90,.05); } body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review--hero>h2{ margin:.65rem 0 .75rem; color:#183b61; font-size:clamp(1.45rem,2.25vw,1.9rem); } body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__best-for{ margin:0; padding:.7rem .85rem; border-radius:10px; background:#f7fbff; color:#29465f; line-height:1.5; } body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__copy{ font-size:1rem; line-height:1.65; color:#34495e; } body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__copy p:first-child{margin-top:0} body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__copy p:last-child{margin-bottom:0} body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__lists{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:1rem; } body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__lists:has(section:only-child){grid-template-columns:minmax(0,1fr)} body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__lists section{ padding:.9rem 1rem; border-radius:12px; background:#f7fafc; } body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__lists h3, body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__verdict h3{ margin:0 0 .55rem; color:#183b61; font-size:1rem; } body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__lists ul{margin:0;padding:0;list-style:none} body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__lists li{position:relative;margin:.35rem 0;padding-left:1.35rem;line-height:1.45} body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__pros li:before{content:"✓";position:absolute;left:0;color:#16845b;font-weight:700} body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__cons li:before{content:"–";position:absolute;left:.15rem;color:#a14a57;font-weight:700} body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__verdict{ margin-top:1rem; padding:.9rem 1rem; border-left:4px solid #2b78c5; background:#f3f8fd; border-radius:0 10px 10px 0; } body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__verdict p{margin:0;color:#34495e;line-height:1.55} /* The Amazon action follows the review naturally because the unchanged add-to-cart block remains directly after the post-excerpt slot in the preserved template. */ body.frowse-amazon-content-pre-api.single-product .wp-block-woocommerce-add-to-cart-form{margin-top:1.25rem} @media(max-width:700px){ body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__lists{grid-template-columns:1fr} } /* Frowse 1.0.228 — restore proprietary Frowse Rating in PRE_API hero. */ body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__rating{ display:flex;align-items:baseline;gap:.5rem;margin:0 0 .65rem;color:#183b61;line-height:1.2 } body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__rating span{font-weight:700} body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__rating strong{font-size:1.25rem;color:#0b806f} body.frowse-amazon-content-pre-api.single-product .frowse-pre-api-review__rating small{font-size:.7em;font-weight:700;color:#183b61} /* Frowse 1.0.230 — PRE_API homepage Top Buys without Amazon Product Advertising Content. */ body.frowse-amazon-content-pre-api .frowse-top-buys__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } body.frowse-amazon-content-pre-api .frowse-top-buy--pre-api{ display:flex; flex-direction:column; min-height:220px; padding:20px; border:1px solid #dce7f3; border-radius:16px; background:linear-gradient(145deg,#fff 0%,#f5f9fd 100%); box-shadow:0 8px 24px rgba(20,55,90,.06); } body.frowse-amazon-content-pre-api .frowse-top-buy__review-link{display:flex;flex:1;flex-direction:column} body.frowse-amazon-content-pre-api .frowse-top-buy--pre-api .frowse-top-buy__rating{justify-content:flex-start;gap:10px;margin:0 0 10px} body.frowse-amazon-content-pre-api .frowse-top-buy--pre-api .frowse-top-buy__rating strong{font-size:1.2rem;color:#0b806f} body.frowse-amazon-content-pre-api .frowse-top-buy--pre-api .frowse-top-buy__title{display:block;min-height:0;margin:0 0 10px;font-size:1.05rem;line-height:1.32;-webkit-line-clamp:unset} body.frowse-amazon-content-pre-api .frowse-top-buy__best-for{display:block;margin:0 0 14px;color:#52647a;font-size:.86rem;line-height:1.4} body.frowse-amazon-content-pre-api .frowse-top-buy__review-cue{margin-top:auto;color:#0a5bef;font-size:.84rem;font-weight:800} body.frowse-amazon-content-pre-api .frowse-top-buy__amazon-link{display:block;margin-top:15px;padding:10px 14px;border-radius:10px;background:#0d3568;color:#fff;font-size:.86rem;font-weight:800;text-align:center;text-decoration:none} body.frowse-amazon-content-pre-api .frowse-top-buy__amazon-link:hover,body.frowse-amazon-content-pre-api .frowse-top-buy__amazon-link:focus-visible{background:#124985} @media(max-width:900px){body.frowse-amazon-content-pre-api .frowse-top-buys__grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){body.frowse-amazon-content-pre-api .frowse-top-buys__grid{grid-template-columns:1fr}} /* Frowse 1.0.231 — current Amazon-content policy also governs homepage Discovery choices. */ .frowse-amazon-content-pre-api .frowse-discovery-routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Frowse 1.0.232 — PRE_API homepage review-card spacing refinement. */ body.frowse-amazon-content-pre-api .frowse-top-buy--pre-api{min-height:0} body.frowse-amazon-content-pre-api .frowse-top-buy__review-link{display:block;flex:0 0 auto} body.frowse-amazon-content-pre-api .frowse-top-buy__review-cue{margin-top:12px} /* Frowse 1.0.234 — PRE_API Ask Frowse recommendation rows. * The mode class is applied directly by the Ask Frowse renderer rather than * relying on the page body, so modal recommendations remain correct on every * template. AUTHORISED mode keeps the original three-card presentation. */ .frowse-ask-products--pre-api { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 980px; } .frowse-ask-products--pre-api .frowse-best-seller-card { display: block; height: auto; border-radius: 14px; overflow: visible; } .frowse-ask-products--pre-api .frowse-best-seller-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 18px; min-height: 0; padding: 0; border-top: 0; } .frowse-ask-products--pre-api .frowse-best-seller-card__review-region { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0; padding: 13px 0 13px 16px; border-radius: 14px 0 0 14px; color: inherit; text-decoration: none !important; } .frowse-ask-products--pre-api .frowse-best-seller-card__review-region:hover, .frowse-ask-products--pre-api .frowse-best-seller-card__review-region:focus-visible { background: #f6fbff; } .frowse-ask-products--pre-api .frowse-best-seller-card__signals { display: block; margin: 0; } .frowse-ask-products--pre-api .frowse-best-seller-card__signals > span:not(.frowse-best-seller-card__frowse-rating) { display: none; } .frowse-ask-products--pre-api .frowse-best-seller-card__frowse-rating { display: grid; justify-items: start; gap: 0; padding: 0; border: 0; background: transparent; color: #071b4b; line-height: 1; } .frowse-ask-products--pre-api .frowse-best-seller-card__frowse-rating strong { font-size: 1.7rem; font-weight: 900; letter-spacing: -.035em; } .frowse-ask-products--pre-api .frowse-best-seller-card__frowse-rating em { margin-top: 4px; font-size: .66rem; font-style: normal; font-weight: 800; line-height: 1.2; color: #48627f; } .frowse-ask-products--pre-api .frowse-best-seller-card__content { min-width: 0; } .frowse-ask-products--pre-api .frowse-best-seller-card h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 5px; font-size: .98rem; line-height: 1.3; color: #071b4b; } .frowse-ask-products--pre-api .frowse-best-seller-card__reason, .frowse-ask-products--pre-api .frowse-best-seller-card__best-for { margin: 0; font-size: .82rem; line-height: 1.4; } .frowse-ask-products--pre-api .frowse-best-seller-card__reason + .frowse-best-seller-card__best-for { margin-top: 3px; } .frowse-ask-products--pre-api .frowse-best-seller-card__footer { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; margin: 0; min-width: 138px; padding: 13px 16px 13px 0; } .frowse-ask-products--pre-api .frowse-best-seller-card__footer > a { min-height: 36px; padding: 7px 12px; text-align: center; } @media (max-width: 640px) { .frowse-ask-products--pre-api .frowse-best-seller-card__body { grid-template-columns: 1fr; gap: 0; } .frowse-ask-products--pre-api .frowse-best-seller-card__review-region { grid-template-columns: 72px minmax(0, 1fr); padding: 13px 16px; border-radius: 14px 14px 0 0; } .frowse-ask-products--pre-api .frowse-best-seller-card__footer { padding: 0 16px 14px; min-width: 0; } } /* Frowse 1.0.246 — marketplace-local category finder with stronger Level-1 hierarchy. */ .frowse-category-finder { position: relative; display: grid; gap: 7px; min-width: 0; font-size: .8rem; font-weight: 800; letter-spacing: .01em; color: #24416d; } .frowse-category-finder__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 9px 12px !important; border: 1px solid #bcd0e8 !important; border-radius: 11px !important; background: #fff !important; box-shadow: none !important; color: #071b4b !important; font-size: .9rem !important; font-weight: 500 !important; text-align: left; } .frowse-category-finder__toggle:hover, .frowse-category-finder__toggle:focus-visible { border-color: #087bf0 !important; } .frowse-category-finder__panel { position: absolute; z-index: 80; top: calc(100% + 8px); left: 0; width: min(820px, calc(100vw - 48px)); max-height: min(68vh, 680px); overflow: auto; padding: 18px; border: 1px solid #c8d9ef; border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(7,43,105,.2); color: #071b4b; } .frowse-category-finder__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; font-size: 1rem; } .frowse-category-finder__close { min-height: 36px !important; width: 36px; padding: 0 !important; border-radius: 50% !important; background: #eef6ff !important; box-shadow: none !important; color: #174b96 !important; font-size: 1.35rem !important; } .frowse-category-finder__search { display: block !important; margin-bottom: 14px; } .frowse-category-finder__search input { min-height: 44px !important; font-weight: 500; } .frowse-category-finder__groups { column-count: 2; column-gap: 28px; } .frowse-category-finder__all, .frowse-category-finder__group { break-inside: avoid; margin: 0 0 10px; } .frowse-category-finder__all button, .frowse-category-finder__group button { display: block; width: 100%; min-height: 0 !important; padding: 3px 7px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important; color: #164f8c !important; font-size: .86rem !important; font-weight: 600 !important; line-height: 1.35; text-align: left; } .frowse-category-finder__all button, .frowse-category-finder__group > .frowse-category-finder__root { color: #0872d9 !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0; } .frowse-category-finder__group:not(:first-child) > .frowse-category-finder__root { margin-top: 4px; } .frowse-category-finder__children { padding-top: 1px; padding-left: 20px; } .frowse-category-finder__children button { color: #164f8c !important; font-size: .84rem !important; font-weight: 500 !important; } .frowse-category-finder__group button:hover, .frowse-category-finder__group button:focus-visible, .frowse-category-finder__all button:hover, .frowse-category-finder__all button:focus-visible { background: #eef7ff !important; color: #0872d9 !important; } .frowse-category-finder__empty { margin: 8px 0 0; color: #657895; font-weight: 600; } @media (max-width: 780px) { .frowse-category-finder { position: static; } .frowse-category-finder__panel { position: fixed; z-index: 1000; inset: 12px; width: auto; max-height: none; padding: 16px; border-radius: 16px; overscroll-behavior: contain; } .frowse-category-finder__groups { column-count: 1; } .frowse-category-finder__all button, .frowse-category-finder__group button { min-height: 42px !important; padding: 9px 10px !important; font-size: .92rem !important; } .frowse-category-finder__group > .frowse-category-finder__root { font-size: 1rem !important; font-weight: 700 !important; } .frowse-category-finder__children { padding-left: 20px; } .frowse-category-finder__children button { font-size: .92rem !important; font-weight: 500 !important; } } /* Frowse 1.0.249 — compact mobile category-finder rhythm only. */ @media (max-width: 780px) { .frowse-category-finder__all, .frowse-category-finder__group { margin-bottom: 4px; } .frowse-category-finder__all button, .frowse-category-finder__group button { min-height: 40px !important; padding-top: 6px !important; padding-bottom: 6px !important; } .frowse-category-finder__group:not(:first-child) > .frowse-category-finder__root { margin-top: 1px; } .frowse-category-finder__children { padding-top: 0; } } /* Frowse 1.0.256 — Insights archive navigation refinement: independent * published-only search/topic browsing, compact controls and top/bottom pagination. */ .frowse-insights__tools { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, 1fr); gap: 28px; margin: -8px 0 22px; padding: 15px 18px; border: 1px solid #c9d9f1; border-radius: 14px; background: #eaf2fd; } .frowse-insights__search, .frowse-insights__topic { display: grid; gap: 6px; margin: 0; min-width: 0; color: #24416d; font-size: .82rem; font-weight: 800; } .frowse-insights__topic { padding-left: 28px; border-left: 1px solid #c4d4ec; } .frowse-insights__search input, .frowse-insights__topic select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid #bfd0e9; border-radius: 9px; background: #fff; color: #07134e; font: inherit; font-weight: 500; } .frowse-insights__search input:focus, .frowse-insights__topic select:focus { outline: 2px solid #1684ee; outline-offset: 1px; } .frowse-insights__tool-help { color: #617495; font-size: .78rem; font-weight: 500; line-height: 1.35; } .frowse-insights__results-nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 18px; } .frowse-insights__result-count { margin: 0; color: #536b91; font-size: .9rem; } .frowse-insights__pagination--top { margin: 0; } .frowse-insights__pagination--bottom { margin-top: 36px; } @media (max-width: 760px) { .frowse-insights__tools { grid-template-columns: 1fr; gap: 14px; margin-top: -4px; padding: 14px; } .frowse-insights__topic { padding-top: 14px; padding-left: 0; border-top: 1px solid #c4d4ec; border-left: 0; } .frowse-insights__results-nav { align-items: flex-start; flex-direction: column; gap: 10px; } } /* Frowse 1.0.258 — conditional Insights reset control. */ .frowse-insights__search-row { display: flex; align-items: center; gap: 10px; min-width: 0; } .frowse-insights__search-row input { min-width: 0; flex: 1 1 auto; } .frowse-insights__reset { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1px solid #bfd0e9; border-radius: 9px; background: #fff; color: #0b56a0; font-size: .82rem; font-weight: 800; text-decoration: none; white-space: nowrap; } .frowse-insights__reset:hover, .frowse-insights__reset:focus-visible { border-color: #1684ee; color: #07134e; } /* Frowse 1.0.260 — compact-header marketplace containment. * At the existing compact-header breakpoint, keep brand and marketplace on * row one and the primary tools on row two. This avoids the nowrap header * pushing the marketplace selector beyond the viewport while preserving the * accepted desktop header above 1120px. */ @media (max-width: 1120px) { .frowse-home-header { box-sizing: border-box; max-width: 100%; overflow: visible; } .frowse-home-header__inner { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "brand country" "tools tools";width:100%!important;max-width:100%!important;min-width:0!important;min-height:0;gap:8px 14px!important;padding-block:9px 10px;box-sizing:border-box}.frowse-home-brand{grid-area:brand;min-width:0;justify-self:start}.frowse-home-nav{display:none!important}.frowse-home-tools{grid-area:tools;display:flex!important;width:100%!important;max-width:100%;min-width:0;align-items:center;justify-content:center;flex-wrap:wrap!important;gap:6px 14px!important}.frowse-home-tools>*{min-width:0;margin-block:0!important}.frowse-home-tools>p{display:block!important}.frowse-home-country-slot{grid-area:country;display:flex!important;margin-left:0!important;justify-self:end;align-self:center;min-width:44px}}@media (max-width:780px){.frowse-home-header{padding-inline:12px}.frowse-home-header__inner{gap:7px 10px!important;padding-block:8px 9px}.frowse-home-tools{gap:5px 10px!important}.frowse-home-header .frowse-home-nav-link a,.frowse-home-header .frowse-home-tool--ask a,.frowse-home-header .frowse-header-search>summary,.frowse-home-header .frowse-header-amazon-search>summary{font-size:.78rem!important}}@media (max-width:780px){body.tax-product_cat .frowse-category-hero{width:100%;max-width:100%;margin-left:0;margin-right:0}}@media (max-width:780px){body.frowse-amazon-content-pre-api .frowse-best-seller-card{min-width:0;overflow:hidden}body.frowse-amazon-content-pre-api .frowse-best-seller-card__review-region,body.frowse-amazon-content-pre-api .frowse-best-seller-card__content,body.frowse-amazon-content-pre-api .frowse-best-seller-card h2{min-width:0}body.frowse-amazon-content-pre-api .frowse-best-seller-card h2>a{min-width:0;overflow-wrap:anywhere}body.frowse-amazon-content-pre-api .frowse-best-seller-card__chevron{max-width:1.5rem}}@media (max-width:780px){.frowse-finder{box-sizing:border-box;max-width:calc(100% - 24px);min-width:0}.frowse-finder__modes,.frowse-finder__input,.frowse-finder__prompts,.frowse-finder__placeholder{min-width:0}.frowse-finder__placeholder{overflow-wrap:anywhere}}@media (max-width:1120px){.frowse-home-header .frowse-home-tool--ask a{min-height:0;padding:0;border:0;border-radius:0;background:#fff0;box-shadow:none}}@media (max-width:1120px){.frowse-home-tools{margin-top:14px!important;padding-bottom:6px;box-sizing:border-box}}.frowse-discovery-loading{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:rgb(247 251 255 / .78);backdrop-filter:blur(2px)}.frowse-discovery-loading[hidden]{display:none}.frowse-discovery-loading__panel{display:flex;align-items:center;gap:12px;padding:15px 20px;border:1px solid #dbe7f7;border-radius:14px;background:#fff;box-shadow:0 12px 34px rgb(7 59 157 / .12);color:#071b4b;font-weight:800}.frowse-discovery-loading__spinner{width:20px;height:20px;border:3px solid #dbe7f7;border-top-color:#087bf0;border-radius:50%;animation:frowse-discovery-spin .7s linear infinite}@keyframes frowse-discovery-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.frowse-discovery-loading__spinner{animation:none}}body.single-product h1.wp-block-post-title+p{font-style:normal!important;font-weight:700!important}body.single-product .tdai-product-takeaway{margin:-.1rem 0 .85rem;color:#2563a6;font-size:clamp(.88rem,1vw,.98rem);font-style:normal!important;font-weight:700!important;line-height:1.35}body.single-product .tdai-purchase-panel{margin:.65rem 0 1.1rem!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}body.single-product .tdai-purchase-panel__variation{display:inline-flex;align-items:center;width:auto;margin:0!important;padding:.38rem .7rem!important;border:1px solid #e4eaf0!important;border-radius:999px!important;background:#f8fafc!important;color:#536577!important;font-size:.82rem!important;line-height:1.25!important}body.single-product .frowse-product-editorial{max-width:1120px;margin:clamp(1.15rem,2.5vw,2rem) auto 0}body.single-product .frowse-product-editorial .frowse-pre-api-review{margin:0;padding:0;border:0;border-radius:0;background:#fff0;box-shadow:none}body.single-product .frowse-product-editorial .frowse-pre-api-review__rating{display:none}body.single-product .frowse-product-editorial .frowse-pre-api-review>h2,body.single-product .frowse-product-editorial__details>h2{margin:0 0 1rem;color:#102f56;font-size:clamp(1.75rem,3vw,2.35rem);letter-spacing:-.02em}body.single-product .frowse-product-editorial .frowse-pre-api-review__best-for{display:inline-block;margin:0 0 1rem;padding:.38rem .7rem;border-radius:999px;background:#eef6fd;color:#183b61;font-size:.9rem;font-weight:500}body.single-product .frowse-product-editorial .frowse-pre-api-review__copy{max-width:860px;font-size:1.04rem;line-height:1.72;color:#263b50}body.single-product .frowse-product-editorial .frowse-pre-api-review__lists{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.35rem}body.single-product .frowse-product-editorial .frowse-pre-api-review__lists section{padding:1.05rem 1.2rem;border:1px solid #e6edf4;border-radius:16px;background:#fff;box-shadow:0 5px 18px rgb(20 55 90 / .045)}body.single-product .frowse-product-editorial .frowse-pre-api-review__verdict{margin-top:1.15rem;padding:.95rem 1.15rem;border-left:4px solid #2b78c5;border-radius:0 12px 12px 0;background:#f3f8fd}body.single-product .frowse-product-editorial__details{margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid #dce5ed}body.single-product .frowse-product-editorial__details-copy{max-width:900px;font-size:1.02rem;line-height:1.72;color:#263b50}body.single-product .frowse-product-editorial__details-copy h2,body.single-product .frowse-product-editorial .frowse-pre-api-review__lists h3,body.single-product .frowse-product-editorial .frowse-pre-api-review__verdict h3{margin:1.55rem 0 .55rem;color:#183b61;font-size:1.18rem;font-weight:700;line-height:1.3}body.single-product .frowse-product-editorial .frowse-pre-api-review__lists h3,body.single-product .frowse-product-editorial .frowse-pre-api-review__verdict h3{margin-top:0}body.single-product .frowse-product-editorial__details-copy h2:first-child{margin-top:0}body.single-product .frowse-product-editorial__details-copy ul{margin-top:.55rem;padding-left:1.35rem}body.single-product .frowse-product-editorial__details-copy li{margin:.38rem 0}body.single-product .frowse-product-editorial__handoff{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:clamp(2rem,4vw,3rem);padding:1.15rem 1.3rem;border:1px solid #e2ebf4;border-radius:16px;background:#f7fbff;text-align:center}body.single-product .frowse-product-editorial__handoff p{margin:0;color:#183b61;font-size:1.12rem;font-weight:700;line-height:1.35}body.single-product .frowse-product-editorial__amazon{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.7rem 1.15rem;border-radius:10px;background:#1677ee;color:#fff!important;font-weight:700;text-decoration:none;white-space:nowrap}@media (max-width:900px){body.single-product main>.wp-block-columns.alignwide{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:1.5rem!important}body.single-product main>.wp-block-columns.alignwide>.wp-block-column{flex-basis:auto!important;width:100%!important;min-width:0!important;max-width:none!important}body.single-product main>.wp-block-columns.alignwide>.wp-block-column:first-child{order:2!important}body.single-product main>.wp-block-columns.alignwide>.wp-block-column:last-child{order:1!important}body.frowse-amazon-content-pre-api.single-product main>.wp-block-columns.alignwide>.wp-block-column:first-child{display:none!important}body.single-product .frowse-product-editorial{margin-top:1rem}body.single-product .frowse-product-editorial .frowse-pre-api-review__copy,body.single-product .frowse-product-editorial__details-copy{font-size:1rem;line-height:1.65}}@media(max-width:700px){body.single-product .frowse-product-editorial__handoff{align-items:center;flex-direction:column;gap:.9rem}body.single-product .frowse-product-editorial__amazon{width:auto;min-width:180px}}.frowse-brand-finder [data-frowse-brand-results]>button{display:block;width:100%;border:0;background:#fff0;padding:9px 12px;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:8px}.frowse-brand-finder [data-frowse-brand-results]>button:hover,.frowse-brand-finder [data-frowse-brand-results]>button:focus-visible{background:rgb(8 123 240 / .08)}.frowse-brand-finder__index{display:flex;flex-wrap:nowrap;gap:4px;margin:10px 0 12px}.frowse-brand-finder__index button{flex:1 1 0%;min-width:0;padding:5px 2px;border:1px solid #d7e3f4;border-radius:7px;background:#fff;color:#0b3d82;font:inherit;font-weight:700;line-height:1.2;cursor:pointer}.frowse-brand-finder__index button:first-child{flex:1.65 1 0;white-space:nowrap}.frowse-brand-finder__index button:hover,.frowse-brand-finder__index button:focus-visible,.frowse-brand-finder__index button.is-active{border-color:#1789e8;background:#eaf5ff;color:#075da8}@media (max-width:780px){.frowse-brand-finder__index{flex-wrap:wrap;gap:5px}.frowse-brand-finder__index button{flex:0 0 auto;min-width:30px;padding:5px 7px}}.frowse-insights-topic-finder__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:2px}.frowse-insights-topic-finder__items button{display:block;width:100%;min-height:0!important;padding:5px 7px!important;border:0!important;border-radius:7px!important;background:transparent!important;box-shadow:none!important;color:#164f8c!important;font-size:.86rem!important;font-weight:600!important;line-height:1.35;text-align:left}.frowse-insights-topic-finder__items button:hover,.frowse-insights-topic-finder__items button:focus-visible{background:#eef7ff!important;color:#0872d9!important}@media (max-width:780px){.frowse-insights-topic-finder__items{grid-template-columns:1fr}.frowse-insights-topic-finder__items button{min-height:42px!important;padding:9px 10px!important;font-size:.92rem!important}}body.single-product .frowse-product-identifiers{display:grid;gap:.35rem;max-width:900px;margin:1.25rem 0 0;padding:0}body.single-product .frowse-product-identifiers__row{display:grid;grid-template-columns:max-content 1fr;gap:.55rem;margin:0}body.single-product .frowse-product-identifiers dt{margin:0;font-weight:700;color:#183b61}body.single-product .frowse-product-identifiers dd{margin:0;color:#263b50;overflow-wrap:anywhere}.frowse-related-products{margin-block:2.5rem 3rem}.frowse-related-products>h2{margin-bottom:1.25rem}body.single-product .frowse-related-products .frowse-best-sellers-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}body.single-product .frowse-related-products .frowse-best-seller-card{display:flex;flex-direction:column;min-width:0;height:100%;box-sizing:border-box;overflow:hidden}body.single-product .frowse-related-products .frowse-best-seller-card__body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;gap:0;padding:16px}body.single-product .frowse-related-products .frowse-best-seller-card__review-region{display:flex;flex-direction:column;align-items:stretch;flex:1 1 auto;min-width:0;padding:0;gap:10px;border-radius:0}body.single-product .frowse-related-products .frowse-best-seller-card__signals,body.single-product .frowse-related-products .frowse-best-seller-card__content{min-width:0;width:100%}body.single-product .frowse-related-products .frowse-best-seller-card__content h2,body.single-product .frowse-related-products .frowse-best-seller-card__content p{overflow-wrap:break-word;word-break:normal}body.single-product .frowse-related-products .frowse-best-seller-card__footer{width:100%;margin-top:16px}body.single-product .frowse-related-products .frowse-best-seller-card__footer>a{width:100%;box-sizing:border-box;text-align:center}@media (max-width:1024px){body.single-product .frowse-related-products .frowse-best-sellers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:600px){body.single-product .frowse-related-products .frowse-best-sellers-grid{grid-template-columns:minmax(0,1fr)}}body.single-product .frowse-related-products{width:min(1200px, calc(100vw - 48px));max-width:none;position:relative;left:50%;transform:translateX(-50%);margin-left:0;margin-right:0;box-sizing:border-box}@media (max-width:600px){body.single-product .frowse-related-products{width:calc(100vw - 32px)}}body.single-product .frowse-related-products{left:auto;transform:none;width:min(1200px, calc(100vw - 48px));max-width:none;margin:2rem auto 3rem;position:relative;box-sizing:border-box}body.single-product main.wp-block-group>.frowse-related-products{margin-left:50%!important;margin-right:0!important;transform:translateX(-50%)}body.single-product .frowse-related-products>h2{font-size:var(--wp--preset--font-size--large,1.75rem);line-height:1.25;font-weight:700;margin:0 0 1.25rem}body.single-product .frowse-related-products .frowse-best-seller-card__body{min-height:0}body.single-product .frowse-related-products .frowse-best-seller-card__review-region{flex:0 0 auto;gap:8px}body.single-product .frowse-related-products .frowse-best-seller-card__frowse-rating{display:inline-flex;align-items:baseline;gap:5px;line-height:1.3;margin-bottom:4px}body.single-product .frowse-related-products .frowse-best-seller-card__frowse-rating strong{font-size:.85rem;font-weight:700;letter-spacing:0}body.single-product .frowse-related-products .frowse-best-seller-card__frowse-rating em{margin:0;font-size:.7rem;font-weight:500}body.single-product .frowse-related-products .frowse-best-seller-card__footer{margin-top:12px}@media (max-width:600px){body.single-product .frowse-related-products{width:calc(100vw - 32px)}}body.single-product .frowse-related-products .frowse-best-seller-card{height:100%}body.single-product .frowse-related-products .frowse-best-seller-card__body{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;padding:14px 14px 12px}body.single-product .frowse-related-products .frowse-best-seller-card__review-region{flex:0 0 auto;padding:0;gap:6px}body.single-product .frowse-related-products .frowse-best-seller-card__footer{flex:0 0 auto;margin-top:auto;padding:12px 0 0;gap:0;min-width:0}body.single-product .frowse-related-products .frowse-best-seller-card__footer>a{min-height:36px}.frowse-home-header .frowse-home-tool--best-sellers-mobile{display:none!important}@media (max-width:1120px){.frowse-home-header .frowse-home-tools>.frowse-home-tool--best-sellers-mobile{display:block!important}}@media (max-width:780px){.frowse-home-header,body.admin-bar .frowse-home-header{position:static;top:auto}}.frowse-home-authority{padding:clamp(2rem, 5vw, 4.5rem) 1.25rem;background:#f5f8fd;color:#09245a}.frowse-home-authority__inner{width:100%;max-width:1440px;margin:0 auto}.frowse-home-authority h2{font-size:clamp(1.65rem, 3vw, 2.25rem);line-height:1.2;margin:0 0 1rem}.frowse-home-authority h3{font-size:1.2rem;margin:1.8rem 0 .65rem}.frowse-home-authority p,.frowse-home-authority li{font-size:1rem;line-height:1.75}.frowse-home-authority ul{padding-left:1.5rem}.frowse-home-authority li+li{margin-top:.45rem}.frowse-home-authority a{color:#064bb7;text-decoration:underline;text-underline-offset:.15em}.frowse-home-authority a:hover,.frowse-home-authority a:focus-visible{color:#002d7c}.frowse-more-insights{margin:2rem 0 2.25rem}.frowse-more-insights h2{margin:0 0 1rem}.frowse-more-insights ul{margin:0;padding-left:1.5rem}.frowse-more-insights li{margin:0 0 .5rem;line-height:1.6}