/* gustivo-extract 34510c84c4 */ :root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-color]){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}} /*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */ /* gustivo-extract 6af5dfad05 */ :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}:where(body) { margin: 0; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} /*# sourceURL=global-styles-inline-css */ /* gustivo-extract f12c82a456 */ @media(max-width:768px){ /* row compaction (GGM: logo row 50 / search 44) */ .site-header__inner{row-gap:4px !important;padding-top:7px !important;padding-bottom:7px !important} /* 2026-08-07 (the site owner): "you shall make the logo a little bit smaller for mobile...it will look better". 24px -> 20px. The logo row is now permanently pinned on mobile (it travels with the tab bar), so every pixel here is paid for on every screen of every product page — 4px off the mark and 4px off the row height. GUSTIVO is a plain wordmark, so it stays legible small. */ /* branding size moved to its own <=900px block below — see the breakpoint note there */ .site-header__search{margin-top:2px !important} /* 2026-08-10 (the site owner): "for me just make mobile 36" — mobile search bar 42px -> 36px. ⚠ The height had to move to the FORM, not the input. The visible grey pill IS the form: it carries background:#ededed, while .bc-search-input is transparent (measured rgba(0,0,0,0)). So the pre-existing `input{height:40px}` never set the bar's height at all — the bar was 42px, inherited from theme.css `.site-header__search .bc-search-form{height:42px}`, and an input-only change would have produced ZERO visible difference. Measured live before the change: form 42px / input 40px. After: form 36px / input 34px (36 - 1px border-top - 1px border-bottom = 34px of inner space, so the input fills it exactly and the placeholder stays vertically centred — both verified in-browser before deploy). Desktop is deliberately untouched and stays 42px. */ .site-header__search .bc-search-form{height:36px !important} .bc-search-form input{height:34px !important;min-height:34px !important} .site-tools{height:36px !important} /* swipeable top-level menu strip (GGM anthracite menu row) */ /* 2026-08-07 (the site owner: "the gap on top is less than the gap below...I want the top categories vertically centered"). It was not a centering problem — the values were simply asymmetric: `padding:0 14px 9px` + `margin:2px 0 0` gave 2px above (margin only, ZERO top padding) against 9px below. Now an even 6px top and bottom with no margin, so the row is genuinely centred in its band. Band height is effectively unchanged (was 2+9=11px of spacing, now 6+6=12px). */ .gmh-strip{display:flex;gap:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:none; padding:6px 14px;margin:0;white-space:nowrap; /* 2026-08-07 (the site owner): "depending on the device may be understood by people as if it is not sliding. ggm gastro has a similar topmenu slider that had a shadow on the right side, or makes blurry... ggm is dark, ours is light." A MASK, not an overlay: it fades the row's own pixels to transparent at the edge, so the header colour behind shows through automatically — no hard-coded shade to keep in sync with the palette, and it cannot intercept the swipe the way a positioned overlay would. --fl / --fr are driven by JS so the hint appears only on the side that actually has more content: at rest only the RIGHT edge fades, mid-scroll both, at the end only the left. A permanent fade on a fully-scrolled row would be a lie about there being more to see. -webkit- prefix first: iOS Safari is the device this was reported on. */ --fl:0px; --fr:34px; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)} .gmh-strip::-webkit-scrollbar{display:none} .gmh-strip a{flex:0 0 auto;font-size:13.5px;font-weight:600;color:#2a2f36;text-decoration:none;line-height:24px} .gmh-strip a:active{opacity:.6} .gmh-strip a.gmh-on{color:#0d1b2e;font-weight:800} /* breadcrumb: one swipeable line on every page (category/product/blog/brand share these classes) */ .gcp-crumb,.woocommerce-breadcrumb,.gustivo-blog-crumb{flex-wrap:nowrap!important;white-space:nowrap!important;overflow-x:auto!important;max-width:100%!important;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x} /* -webkit-overflow-scrolling:touch RESTORED 2026-08-19 (the site owner: "when sliding you can still drag it up and down", spotted by comparing against the working .gv5-tabs pills row, which has always had this property). The ORIGINAL removal note said it broke "position:sticky children (the pinned home icon)" — but the pin was later re-architected (see .gmh-crumbwrap below) to be an ABSOLUTE overlay on a SIBLING wrapper element, no longer a child of this scroller at all, so that old conflict no longer applies; verified live, the pin still renders correctly with this restored. touch-action:pan-x added alongside it to lock the gesture to the horizontal axis only, same root cause. overscroll-behavior-x:contain (added earlier the same night) stops a drag past the strip's own edge from chaining to the page. */ .gcp-crumb::-webkit-scrollbar,.woocommerce-breadcrumb::-webkit-scrollbar,.gustivo-blog-crumb::-webkit-scrollbar{display:none} /* home icon as an ABSOLUTE overlay on a wrapper OUTSIDE the scroller — iOS refuses horizontal position:sticky inside overflow-x containers, so the pin lives outside it */ /* overflow:hidden added 2026-08-19 alongside the overscroll-behavior fix above — a hard clip boundary around both the scrolling strip and the absolute-positioned pin, so a touch-drag rubber-band bounce (native iOS elastic overscroll at the strip's own start/end, independent of the page-level scroll-chaining fixed above) cannot visibly bleed past this wrapper's own box. Safe: the pin is positioned inside these same bounds (left:0, sized to its own width), so nothing inside this wrapper is meant to render outside it. */ .gmh-crumbwrap{position:relative;overflow:hidden} /* 2026-08-08 (the site owner): "only the first > after home is to far away why?" — 37px there against 8px everywhere else. Three separate things were stacking up, which is why it looked so lopsided: 1. the pin's 12px right padding, 2. a 31px indent on the crumb to clear the pin, 3. the ORIGINAL home icon, which the JS only sets to visibility:hidden — invisible, but still occupying its full 15px in the flow, 4. and then the chevron's own 8px left margin on top of all of it. Now the pin's width is the ONE thing that sets this gap: pin = 2 + 15 icon + 4 = 21px, the indent matches it exactly at 21px, the dead original is taken out of the flow, and the first chevron's left margin is dropped so it is not counted twice. Trimmed 8px -> 4px on his follow-up ("make it less the gap is still to big"). 8px measured equal to the other gaps but READ larger, because the two glyphs either side are inset within their own boxes: the house occupies about x=4..20 of a 24 viewBox and the chevron starts at x=9, so roughly 8px of drawn-in whitespace is added to whatever the box gap is. Optical spacing, not box spacing, is what the eye judges here. */ .gmh-crumbwrap > .gcp-crumb,.gmh-crumbwrap > .woocommerce-breadcrumb{padding-left:21px !important} /* == pin width (2+15+4), so the first crumb starts exactly clear of the mask */ /* :not(.gmh-homepin) matters — the pin is a cloneNode of this element and still carries .gcp-home, so an unqualified rule here would hide the pin itself along with the original. */ .gmh-crumbwrap .gcp-home:not(.gmh-homepin){display:none} .gmh-crumbwrap .gcp-home + .gcp-sep{margin-left:0} /* RTL (Arabic): this whole home-pin subsystem is built with physical left/right values, and this inline