:where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick).poz-quick-aware{ --pozq-ink:#17232c; --pozq-muted:#4f606d; --pozq-line:rgba(49,72,88,.16); --pozq-glass-a:rgba(244,249,252,.76); --pozq-glass-b:rgba(218,230,238,.54); --pozq-shadow:rgba(29,48,61,.11); overflow:visible!important; background:transparent!important; /* The page layers put backdrop-filter on THIS element - which is the full-width, square, unclipped box. The blur then reaches past the rounded pane below and shows as a haze with hard corners outside the bar. The filter belongs on the pane, not on its wrapper. */ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; border-color:transparent!important; box-shadow:none!important; isolation:isolate; transition:color 190ms ease; } :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick).poz-quick-aware::before{ content:""; position:absolute; /* The bar's glass is TRIMMED TO THE HEADER CARD: same side inset, same corner radius, so the two stack as one family of surfaces. These two numbers must move together with .poz-header::before - when the header went from a 16px inset to 22px, this stayed behind and the quick bar became visibly wider than the menu above it. */ inset:3px 22px; backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); z-index:-1; pointer-events:none; border:1px solid rgba(255,255,255,.82)!important; border-radius:20px; background:linear-gradient(108deg,var(--pozq-glass-a),var(--pozq-glass-b))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.82),inset 0 -1px 0 var(--pozq-line),0 14px 36px var(--pozq-shadow)!important; transition:background-color 190ms ease,border-color 190ms ease,box-shadow 190ms ease!important; } :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick).poz-quick-aware.is-over-dark::before{ border-color:rgba(255,255,255,.16)!important; } :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick).poz-quick-aware.is-over-dark{ --pozq-ink:#f6f9fb; --pozq-muted:#c2ccd3; --pozq-line:rgba(255,255,255,.16); --pozq-glass-a:rgba(12,19,24,.78); --pozq-glass-b:rgba(28,40,49,.62); --pozq-shadow:rgba(0,0,0,.28); } .poz-quick-aware :where(.pztm-quick__model,.tm5-quick__model,.pzfam-quick__model,.pzfam-quick__index,.pzp3-quick__index,.pzbar-quick__index, .pztm-quick__model span,.tm5-quick__model span,.pztm-quick__links a,.tm5-quick__links a, .pzfam-quick__links a,.pzp3-quick__links a,.pzbar-quick__links a,.pztm-quick__cta,.tm5-quick__cta, .pzfam-quick__more,.pzp3-quick__quote,.pzbar-quick__models){ color:var(--pozq-ink)!important; border-color:var(--pozq-line)!important; transition:color 190ms ease,border-color 190ms ease,background-color 190ms ease!important; } .pzg-ribbon.poz-quick-aware :where(a,.pzg-ribbon__cta){color:var(--pozq-ink)!important;border-color:var(--pozq-line)!important;transition:color 190ms ease,border-color 190ms ease,background-color 190ms ease!important} .pzg-ribbon.poz-quick-aware>p{color:var(--pozq-muted)!important} .pzg-ribbon.poz-quick-aware::before{content:"";position:absolute;inset:3px 16px;border-radius:16px;z-index:-1;pointer-events:none} .pzg-ribbon.poz-quick-aware{background:transparent!important} .poz-quick-aware :where(.pztm-quick__links a,.tm5-quick__links a,.pzfam-quick__links a,.pzp3-quick__links a,.pzbar-quick__links a){color:var(--pozq-muted)!important} .poz-quick-aware :where(.pztm-quick__links a,.tm5-quick__links a,.pzfam-quick__links a,.pzp3-quick__links a,.pzbar-quick__links a):is(:hover,:focus-visible,.is-active,.is-current){color:var(--pozq-ink)!important} .poz-quick-aware.is-over-dark :where(.pztm-quick__model img,.tm5-quick__model img,.pzfam-quick__model img){filter:brightness(0) invert(1);opacity:.94} /* Component-family bars use the exact product-page logo rail and grid. */ .pzfam-quick.poz-quick-aware{position:fixed!important;inset-inline:0;top:var(--pozq-top,var(--poz-header-height,72px))!important;z-index:80;width:100%;height:54px} .pzfam-quick.poz-quick-aware .pzfam-quick__inner{ width:calc(100% - 36px); max-width:none; height:100%; margin-inline:auto; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:28px; padding-inline:22px; } .pzfam-quick.poz-quick-aware .pzfam-quick__model{ display:flex; align-items:center; gap:16px; min-width:0; color:#202c35; font:400 .63rem Michroma,sans-serif; white-space:nowrap; } .pzfam-quick.poz-quick-aware .pzfam-quick__model img{display:block;width:78px;height:25px;object-fit:contain;flex:0 0 auto} .pzfam-quick.poz-quick-aware .pzfam-quick__model span{ margin:0; padding-left:16px; border-left:1px solid var(--pozq-line); color:inherit; font:400 .63rem Michroma,sans-serif; letter-spacing:0; } .pzfam-quick.poz-quick-aware .pzfam-quick__links{display:flex;height:100%;justify-content:center;gap:0;min-width:0} .pzfam-quick.poz-quick-aware .pzfam-quick__links a{padding-inline:18px;font-size:.48rem;letter-spacing:.04em} .pzfam-quick.poz-quick-aware .pzfam-quick__links a, .pzfam-quick.poz-quick-aware .pzfam-quick__more{ font-family:Michroma,sans-serif!important; font-weight:400!important; line-height:1!important; text-transform:uppercase; white-space:nowrap; } .pzfam-quick.poz-quick-aware .pzfam-quick__more{ min-height:32px; display:inline-flex!important; align-items:center; justify-content:center; gap:18px; padding:0 14px; border:1px solid var(--pozq-line); border-radius:4px; background:rgba(255,255,255,.12); font-size:.48rem!important; letter-spacing:.045em!important; text-decoration:none; } .pzfam-quick.poz-quick-aware .pzfam-quick__more:hover, .pzfam-quick.poz-quick-aware .pzfam-quick__more:focus-visible{background:rgba(255,255,255,.38);outline:0} /* on dark bars the text is near-white - a strong white wash turns the hover light-on-light, so the dark theme gets a subtle lift instead */ .pzfam-quick.poz-quick-aware.is-over-dark .pzfam-quick__more:hover, .pzfam-quick.poz-quick-aware.is-over-dark .pzfam-quick__more:focus-visible{background:rgba(255,255,255,.16)} .pzfam-quick.poz-quick-aware .pzfam-quick__links a::after{left:18px;right:18px;bottom:0;height:2px;transform-origin:center} .pozq-model-trigger{position:relative;cursor:pointer} .pozq-model-trigger[aria-expanded="true"]{background:rgba(0,102,204,.08)!important;border-color:rgba(0,102,204,.3)!important} .pozq-model-panel{ position:absolute; z-index:20; top:calc(100% + 8px); right:18px; width:min(660px,calc(100vw - 36px)); padding:10px; border:1px solid rgba(255,255,255,.76); border-radius:18px; background:linear-gradient(125deg,rgba(250,253,255,.93),rgba(225,235,242,.88)); box-shadow:0 30px 90px rgba(18,34,46,.18),inset 0 1px 0 #fff; backdrop-filter:blur(28px) saturate(145%); -webkit-backdrop-filter:blur(28px) saturate(145%); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.985); transform-origin:calc(100% - 42px) 0; transition:opacity 210ms cubic-bezier(.23,1,.32,1),transform 210ms cubic-bezier(.23,1,.32,1),visibility 0s linear 210ms; } .pozq-model-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s} .pzfam-quick.poz-quick-aware .pzfam-quick__more:focus-visible, .pozq-system-panel :is(.pozq-model-panel__item,.pozq-model-panel__close):focus-visible{outline:2px solid currentColor;outline-offset:-3px} .pozq-model-panel__head{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 8px 8px 12px;border-bottom:1px solid rgba(48,70,86,.12)} .pozq-model-panel__head span{font:400 .58rem Michroma,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#304250} .pozq-model-panel__close{position:relative;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#263744;cursor:pointer} .pozq-model-panel__close::before,.pozq-model-panel__close::after{content:"";position:absolute;width:13px;height:1px;background:currentColor} .pozq-model-panel__close::before{transform:rotate(45deg)}.pozq-model-panel__close::after{transform:rotate(-45deg)} .pozq-model-panel__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding-top:8px} .pozq-model-panel__item{min-width:0;min-height:78px;display:grid;grid-template-columns:94px minmax(0,1fr) 22px;align-items:center;gap:13px;padding:8px 10px;border:1px solid transparent;border-radius:12px;color:#17232c!important;text-decoration:none!important;background:rgba(255,255,255,.26);transition:transform 150ms ease,background-color 150ms ease,border-color 150ms ease!important} .pozq-model-panel__item:hover,.pozq-model-panel__item:focus-visible{transform:translateY(-1px);background:rgba(255,255,255,.7);border-color:rgba(0,102,204,.2);outline:0} .pozq-model-panel__item.is-current{border-color:rgba(0,102,204,.3);background:rgba(255,255,255,.82)} .pozq-model-panel__thumb{height:60px;display:grid;place-items:center;overflow:hidden} .pozq-model-panel__thumb img{display:block;width:100%;height:100%;object-fit:contain;filter:none!important;opacity:1!important} .pozq-model-panel__copy{min-width:0;display:grid;gap:5px} .pozq-model-panel__copy strong{font:400 .76rem Michroma,sans-serif;letter-spacing:-.02em;color:#14232e} .pozq-model-panel__copy small{font:400 .67rem "IBM Plex Sans",sans-serif;line-height:1.35;color:#61717d;white-space:normal} .pozq-model-panel__item>svg{width:18px;stroke:#0066cc;fill:none;stroke-width:1.2} html.pozq-model-open .pozmm{pointer-events:none} @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .pozq-model-panel{background:#eef3f6} :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick).poz-quick-aware::before{background:#edf3f6!important} :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick).poz-quick-aware.is-over-dark::before{background:#17232c!important} } @media(max-width:1180px){.pozq-model-panel{width:min(580px,calc(100vw - 36px))}} @media(max-width:1100px){ .pzfam-quick.poz-quick-aware .pzfam-quick__inner{gap:18px} .pzfam-quick.poz-quick-aware .pzfam-quick__model{gap:0} .pzfam-quick.poz-quick-aware .pzfam-quick__model span{display:none} .pzfam-quick.poz-quick-aware .pzfam-quick__links a{padding-inline:clamp(10px,1.45vw,15px)} .pzfam-quick.poz-quick-aware .pzfam-quick__links a::after{left:clamp(10px,1.45vw,15px);right:clamp(10px,1.45vw,15px)} } @media(max-width:900px){ .pzfam-quick.poz-quick-aware .pzfam-quick__inner{gap:14px;padding-inline:22px} .pzfam-quick.poz-quick-aware .pzfam-quick__links{ justify-content:flex-start; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-inline:contain; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%); } .pzfam-quick.poz-quick-aware .pzfam-quick__links::-webkit-scrollbar{display:none} } @media(max-width:760px){.pozq-model-panel{display:none!important}} /* Data-driven category catalogues share the stage flyout, including on touch screens. */ .pozq-model-panel--category{max-height:calc(100dvh - var(--pozq-top,84px) - 78px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin} .pozq-model-panel--category .pozq-model-panel__thumb{position:relative} .pozq-model-panel--category .pozq-model-panel__thumb img{position:absolute;inset:0;height:100%;max-height:100%;width:100%;object-fit:contain} .pozq-model-panel--category .pozq-model-panel__close{width:44px;height:44px;flex:0 0 44px} .pozq-model-panel__overview{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;margin-top:8px;padding:8px 12px;border-top:1px solid rgba(48,70,86,.12);color:#304250!important;font:400 11px Michroma,sans-serif;text-decoration:none!important} .pozq-model-panel__overview:hover,.pozq-model-panel__overview:focus-visible{background:rgba(255,255,255,.55);outline:1px solid currentColor;outline-offset:-1px;border-radius:8px} .pozq-model-panel--category .pozq-model-panel__close:focus-visible{outline:1px solid currentColor;outline-offset:-3px} @media(max-width:760px){.pozq-model-panel.pozq-model-panel--category{display:block!important;right:12px;width:calc(100% - 24px)}} @media(max-width:480px){ .pozq-model-panel--category .pozq-model-panel__item{grid-template-columns:minmax(0,1fr);gap:4px;padding:8px;text-align:center} .pozq-model-panel--category .pozq-model-panel__thumb{height:64px} .pozq-model-panel--category .pozq-model-panel__copy{gap:3px} .pozq-model-panel--category .pozq-model-panel__item>svg{display:none} .pozq-model-panel--category .pozq-model-panel__head{padding-left:8px} .pozq-model-panel--category .pozq-model-panel__head span{font-size:9px;letter-spacing:.03em} .pozq-model-panel__overview{font-size:10px} } @media(prefers-reduced-motion:reduce){ .pozq-model-panel,.pozq-model-panel__item,:where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick).poz-quick-aware::before{transition:none!important} } /* ---- __inner alignment + the responsive trim ----------------------------- The pane edges are only half of it: the label inside should sit under the wordmark and the action under the quote button, so the content box takes the header's own padding. Desktop only - the narrow layouts have their own gutters and do not need disturbing. The pane insets below mirror .poz-header::before at each width. */ @media (min-width:1220px){ .poz-quick-aware :where(.pztm-quick__inner,.tm5-quick__inner,.pzfam-quick__inner,.pzp3-quick__inner,.pzbar-quick__inner,.pzcc-quick__inner){ width:100%!important; max-width:none!important; margin-inline:0!important; padding-inline:clamp(30px,3.2vw,52px)!important; } } @media (max-width:1219px){ :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick).poz-quick-aware::before{inset:3px 10px;border-radius:16px;} } @media (max-width:680px){ :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick).poz-quick-aware::before{inset:3px 6px;border-radius:15px;} } /* ============ THE QUICK BAR, DEFINED ONCE (2026-08-29) ============ Eleven page modules each drew this bar their own way: two font families, two weights, sizes from 7.7px to 16px, radii of 3/4/12, heights 30/32/77. This block is the whole design - geometry, skeleton, type, states - so there is exactly ONE place to read it and ONE place to change it. It reads as the header's quieter sibling: same face, same 1px hairline under the item you are on, same gutter. The header carries the one filled button on the page, so this bar's button is a ghost - two solid buttons stacked 54px apart is what made it look cheap. MICHROMA SHIPS ONE WEIGHT (400). Every `600` in here before was a browser faking the bold by smearing the outlines - the 'artificially bolded' text. Never weight this face, anywhere. Everything is !important because each page module styles its own bar after this file loads. Roles are addressed STRUCTURALLY (first/second/third child) rather than by the eleven sets of class names, so a new bar is styled correctly the moment it has the three blocks in the usual order. */ /* ---- 1 · the box ---- */ :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware{ top:var(--pozq-top,84px)!important; height:54px!important; min-height:54px!important; z-index:80!important; } /* ---- 2 · the skeleton: three columns, always ---- label | links | action. The MIDDLE column is the only one allowed to shrink (min-width:0), which is what stops a long link list from shoving the button off the right edge - /oprema-za-evente/ was overflowing by 18px before this. */ @media (min-width:1220px){ :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child{ display:grid!important; position:relative!important; grid-template-columns:auto 1fr!important; align-items:center!important; gap:clamp(14px,1.7vw,30px)!important; box-sizing:border-box!important; width:100%!important; max-width:none!important; margin-inline:0!important; padding-inline:clamp(30px,3.2vw,52px)!important; height:54px!important; min-height:0!important; } :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *{ min-width:0!important; } /* The links are taken OUT OF FLOW and centred on the header nav's own centre line (--pozq-nav-c, measured in the JS). In flow they sat between a label and an action whose widths differ per page - 266px here, 47px there - so every page centred them somewhere else: 754, 744, 625. Now they hang under the words above them on every page. */ :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(2){ position:absolute!important; left:var(--pozq-nav-c,50%)!important; top:50%!important; transform:translate(-50%,-50%)!important; justify-content:center!important; width:max-content!important; /* Spacing comes from the links' own padding, NEVER from a gap as well: one page set gap:38px on top of the padding, which made the row 190px wider than it needed to be and drove it straight into the label. */ gap:0!important; /* A hard stop so a future long list clips instead of printing over the brand: the row may use the space either side of the nav centre, less an allowance for the label. */ max-width:calc((var(--pozq-nav-c,50%) - 318px) * 2)!important; overflow:hidden!important; } :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(3){ justify-self:end!important; } } /* ---- 3 · one voice: the header's face, never weighted ---- */ :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(1), :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(2) a, :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(3), :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(3) a, :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(3) button{ font-family:Michroma,sans-serif!important; font-weight:400!important; text-transform:uppercase!important; line-height:1.2!important; } /* Keep the place-marker readable without competing with the active link. */ :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(1){ font-size:10px!important; letter-spacing:.14em!important; opacity:.85!important; white-space:nowrap!important; } /* the links shrink with the viewport rather than wrap or overflow */ :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(2) a{ position:relative!important; /* Michroma is a WIDE face. At 10px seven links plus a long label do not fit the middle column and the row clips. These two clamps are what make the bar fit its own content at every desktop width - they are not decoration, do not raise them without re-measuring the widest bar. */ font-size:clamp(9.5px,.7vw,10px)!important; letter-spacing:.09em!important; padding-inline:clamp(4px,.48vw,8px)!important; /* The muted ink already supplies hierarchy; opacity would mute it twice. */ opacity:1!important; white-space:nowrap!important; transition:opacity 200ms ease!important; } :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(2) a:is(:hover,:focus-visible,.is-active,.is-current,[aria-current]){ opacity:1!important; } /* ---- 4 · the same hairline the header nav uses ---- */ :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(2) a::after{ content:""!important; position:absolute!important; left:0!important; right:0!important; bottom:-7px!important; height:1px!important; background:currentColor!important; opacity:0!important; transform:scaleX(0)!important; transform-origin:center!important; transition:transform 260ms cubic-bezier(.16,1,.3,1),opacity 200ms ease!important; } :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(2) a:hover::after{ opacity:.34!important; transform:scaleX(1)!important; } :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(2) a:is(.is-active,.is-current,[aria-current])::after{ opacity:.85!important; transform:scaleX(1)!important; } /* ---- 5 · the action is a GHOST, because the header above owns the solid one ---- */ :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(3), :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(3) > a, :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(3) > button{ display:inline-flex!important; align-items:center!important; gap:9px!important; height:32px!important; min-height:32px!important; padding:0 15px!important; border:1px solid color-mix(in srgb,currentColor 26%,transparent)!important; border-radius:9px!important; background:transparent!important; box-shadow:none!important; font-size:10px!important; letter-spacing:.1em!important; opacity:.92!important; white-space:nowrap!important; transition:opacity 200ms ease,background-color 200ms ease!important; } /* a nested control must not draw a second pill inside the first */ :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(3) > :is(a,button){ border:0!important; padding:0!important; height:auto!important; min-height:0!important; } :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(3):hover{ opacity:1!important; background:color-mix(in srgb,currentColor 10%,transparent)!important; } /* ---- 6 · the brand mark in the label, sized once for all eleven ---- */ :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(1){ display:inline-flex!important; align-items:center!important; gap:11px!important; } :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware > *:first-child > *:nth-child(1) img{ height:22px!important; width:auto!important; max-width:96px!important; object-fit:contain!important; display:block!important; flex:0 0 auto!important; } :where(.pztm-quick,.tm5-quick,.pzfam-quick,.pzp3-quick,.pzg-ribbon,.pzbar-quick,.pzlt-quick,.pzco-quick,.pzcc-quick,.pzdef-quick,.pzev-quick).poz-quick-aware.is-over-dark > *:first-child > *:nth-child(1) img{ filter:brightness(0) invert(1)!important; opacity:.94!important; } /* ---- 7 · the crumb under the hero is a second copy of this bar's label ---- The quick bar already names the brand and the category, 54px above it, so the hero's own "Proizvodi / " row says it twice (Sven, 2026-08-29). It is hidden, not deleted: every page also emits a JSON-LD BreadcrumbList, so Google keeps its trail either way, and the markup stays in place for any page that later loses its quick bar. Matched by SHAPE, not by a list of eleven class names - a