/* The shop's product grid in the filter panel's own language. The two sit in one viewport and narrow the same catalog, so they are dressed from one set of figures rather than two that happen to resemble each other. The panel states its figures as custom properties on :root, and every rule below reads those first and falls back to the palette entry of the same name, so retuning the panel moves the grid with it. What the panel says, measured on the page: its ground is #1a1a1a, anything that holds a value or answers a pointer is #2c3138, the ink is #e4e6ea, a pill is 6px around 6px by 14px at 16px/500, a section label is the UI font at 500 and 17px with 0.16px between the letters, its action buttons are the UI font at 17px and 500 with that same 0.16px, no case, and a pointer changes a fill in 0.15s. Those are the figures used here. ------------------------------------------ */ /* ---- The card ---- The template gives the card body the filter's chip surface, #2c3138, and that is the right surface for the thing that holds the values - but not for the card itself, because the card is what the chips inside it sit on. So the body is moved up one step to the palette's raised surface and the chips keep the chip colour, which is the panel's own hierarchy: a ground, and the surfaces that hold values on top of it. The ink is set on the cell, where everything inside inherits it unless it states a colour of its own - the placeholder, the slash beside a price, a badge's label. What reached them before was the page's #666666, which in the filter's language is a button's label on a light fill, not text on a dark one. */ .wp-block-woocommerce-product-collection li.wc-block-product { color: var(--woo-filter-dark-text, var(--wp--preset--color--filter-dark-text, #e4e6ea)); } /* The plate is written as a literal rather than read through --wp--preset--color--surface-raised, which is what it wore until now. That preset is defined in the site's global styles at #202020, so the fallback here was never the value in play, and the preset carries utility classes of its own in both the color and background-color forms - it has readers well outside this card, and retuning it would have carried every one of them. The value is the filter panel's own #202020 lifted one step, asked for by name: the card now stands a step above the sidebar it sits beside rather than on the same ground, and the two read as separate plates. The panel keeps its #202020. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group.has-background:has(.wc-block-components-product-image) { background-color: #252525 !important; } /* ---- The picture's zoom, held inside its own corners ---- The gallery's picture zooms under the pointer: WooCommerce marks it with its own `hoverZoom` class and scales it 1.05 about its centre - measured at matrix(1.05014) - which is a transform, so it moves nothing in the layout while the picture itself overhangs its box by 4.95px on each side and 2.79px at the top and bottom edges. That overhang is what the reader is seeing at the card's corners. Nothing in the theme or in Woo's own sheets clips this picture - the zoom class carries nothing but a zoom-in cursor - and the 10px the corners are drawn on lives on two elements that both move with the zoom: the picture's own radius is scaled with it, to 10.5px, and the picture paints outside the card's own 10px corner besides. So the shape at the corner stops being the card's. The clip goes on the box that does not move: the picture's wrapper, the element that already wears the card's 10px on its top corners and the same 198px by 111px box the picture fills. With `overflow: hidden` the corner draws at a fixed 10px whatever the picture's scale, and the zoom reads the way a zoom should - the picture growing into a still frame rather than out of one. The frame is this box whole, top and bottom, so the 2.8px of overhang at the bottom edge is held off the title row as well. The radius is not restated here: the block prints it inline on this element, and an inline figure is already the one in play. */ .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-image { overflow: hidden; } /* ---- The title, as the product search field ---- The search field states the card title's figures: the UI font at 17px and 500, 0.01rem between the letters, over 1.5 leading, in the ink the field itself writes in. A product name is the same kind of thing in this grid - a line of words set in that family - so it takes those figures, and the ink with it, since a title that is a link would otherwise be painted in the site's link colour rather than the card's. The family, the size and the ink were already the field's, since the field is where this rule was drawn from. The weight and the tracking were not: 600 and -0.17px came from the panel's section labels, which this rule was first written against, and they are the two figures the eye reads as a different face under the same words. Both are now the field's. Two of them are marked. The family, because the template prints the palette's Zalando Sans class beside the title and that class is declared !important, so a plain declaration never reaches it - the same argument the button has. The size, because a title block writes 1.05rem of its own into the markup. An ask then raised it a full step, 17px to 19px, putting the title on the price's own figure where it had stood 2px under it; two later asks each walked it back one step, 19px to 18px and then 18px to 17px, which returns it to its original figure. The figure under the price was 2px while the price stood at 19px, went to 3px when the price was asked back up to 20px, came to 1px when it was walked down to 18px, and is 2px again now that the price has been asked back up a single step to 19px, as the price's own note records. On the rows: the two-line wraps - "Block Patterns Pack", "Theme Export Add-On" - closed by halves as the size came down: the first now fits on one line at 17px, the second still breaks, so the rows stay uneven by a line. Levelling them wants a two-line min-height on the title rather than another size change. The leading needs no rule either: the field's 1.5 and the theme's are already the same 25.5px at this size, as they were 27px at 18 and 28.5px at 19. Neither do the weight and the tracking, both being plain declarations that nothing on a heading outranks - the theme states -0.025rem of tracking on its headings, and this replaces it with the body's own 0.01rem, the field's inherited value. The case stays as the template states it, capitalize, and that is a match rather than a compromise: the names are stored lowercase, so capitalize is what turns "yellow ear corn" into the Title Case the panel shows in "Locate" and "Sort". Matching the panel's own rule and setting none would print the raw stored name. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-post-title, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-post-title a { color: var(--woo-filter-dark-text, var(--wp--preset--color--filter-dark-text, #e4e6ea)); font-family: var(--woo-filter-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif) !important; font-size: 17px !important; font-weight: 500; letter-spacing: 0.01rem; line-height: 1.5; } /* ---- The badges, as a base ---- Every plate inside the card that is not the card itself: the category, the location, the unit and the price. They take the pill's shape and its weight - 6px corners, 500, 1.3 leading - and stop there. The panel draws a pill at 16px over 6px by 14px, which is a panel's scale: the price row in this card measures 167px and its unit is a single word, so a first pass at the panel's own figures pushed "HOUR" onto two lines mid-word. The corner is the one thing fought for here, because the markup carries its own inline. What remains is a base rather than a look. All four have since been asked for more and are dressed in the shared plate further down: the pill's fill and ink, its inset and its pointer step, worn by the price, the unit, the category, the location and the brand alike. Their palette fills went with them - the status colours the template had put on the wrappers, danger on the unit, warning behind the category and info behind the location - and so did the four section colours they wore for a while. Their wrappers still wear this rule's class, and their own rules reach the values inside. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group.has-background:not(:has(.wc-block-components-product-image)) { border-radius: 6px !important; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; } /* ---- The links inside the chips, unlined ---- A chip's value is a link into the shop - the category to its archive, the location to its own, the brand to the brand's, the unit to the filter it belongs to - and every one of them draws itself as a link, underlined, which is what a link is for in a sentence. A chip is not a sentence: it already reads as one object, and a line under four words inside one cuts it in two. So all four are named from here, and the blocks keep their own underline wherever else they are placed - the single product template among them. */ .wp-block-woocommerce-product-collection li.wc-block-product .woo-product-unit__link, .wp-block-woocommerce-product-collection li.wc-block-product .woo-product-location__link, .wp-block-woocommerce-product-collection li.wc-block-product .woo-product-brand__link, .wp-block-woocommerce-product-collection li.wc-block-product .taxonomy-product_cat a { text-decoration: none !important; } /* ---- The price, in the card's own voice ---- The price keeps what it borrows from the panel's pill - the panel's UI font, the ink, nowrap and the leading - and none of the pill's ground: its fill, its corners and its inset belonged to the five plates, and went off with them when the plates did, as the note further down records. The figures it is set in were the card title's - 17px and 500 with 0.01rem between the letters, so the price and the name above it read as one voice rather than two - and were taken a step above them, to 18px with the weight, when the size was first asked up. The size was then asked up a second time, to 20px and three above the name, was asked back down a single step to 19px, was put back at 20px when the previous figure was asked for again, came down that same single step once more, and was walked a rung further to 18px. It has now been asked back up that rung: the declaration reads 19px, which is what this sheet sets and what the card renders - two above the name. The size has been asked eight times, and this is its third stop at 19px: 17, 18, 20, 19, 20, 19, 18, 19. The two have never shared a size since the price left 17px, and at 19px the price reads as the figure the card states rather than as a line of the name - the 2px between them is what the title's own note records. The leading stays 1.3, which is 24.7px at this size, and 19px is the two above the 17px the unit beside it keeps. The weight has been asked down a step, from 600 to 500 - the weight the name above it and the unit beside it are set in, so the figure and the words it belongs to carry one weight again, one size apart. It was asked semi-bold when the size was first asked up, carried at 600 through the second ask, came down to 500 when the price was taken to 19px, went back to 600 with the size when the previous figure was asked for again, and comes down to 500 here. The price element carries font-weight: 400 in a style attribute of its own, so this declaration is what sets the figure at all - an important author rule outranks an inline declaration, which is why the weight has to be stated here and cannot be left to the markup. The mark stays on the declaration because the family, the size, the colour and the weight on it are all arguing with what the block wears, among them a palette class whose own declarations are important; if the inline style is ever moved, this is the one place left to hold the figure. THE REGRESSION, THE REPAIR, AND THE REVERSAL. The selector below asked for the price block as a direct child of its group - group > block - and that held until a later ask wrapped the price in an anchor of its own, which put the block one level down and made the test fail: group > a > block. The price then fell through to the theme's own 24px and 400 for the length of the failure, so none of the figures this note describes were reaching the element at all. The test was relaxed from a child to a descendant here, and in the three other places in this sheet that named the price the same way - the shared five-chip rule and the wrapper's two. That link has since been asked off, and the plugin behind it is deactivated, so the relaxation goes back with it: all four tests read as child tests again, which is how they were written. What is worth keeping in view is that the child form is correct only for as long as nothing wraps the price. The failure it had is a silent one - the price simply falls through to the theme's own 24px and 400, and nothing in this sheet reports it - so if a wrapper is ever put around the price block again, this rule and the three others have to be relaxed again in the same breath. The four chip rules are child tests as before, because nothing has ever wrapped those. The colour is the one figure of the four that had to be written out. It rode the panel's token chain - --woo-filter-dark-text, falling back to the preset - as the unit beside it did at the time, and there it lands on #e4e6ea. The unit has since left that chain with the brand and the location, which wear the admin menu's own sub-label grey; the price keeps #e4e6ea, which is what the ask was. On the price alone the chain did not deliver it: the price painted white while the family, the size and the weight on the same declaration were all honoured, which is how the rule was known to be reaching the element at all. The ask is that the price match the product title, and the title's ink is this same #e4e6ea, so the figure is stated here rather than borrowed - the one declaration in this sheet that could not be left to a token. Two things this rule leaves out on purpose, because they belong to a control rather than to a look: `cursor: pointer` and a focus ring. A pill in the panel is a button with an aria-pressed state to change; the price states a fact and cannot be pressed, so it should not promise either. The plate that once carried the rest of the pill is gone with the other four, so what parts the price from it now is the whole of its dress rather than these two figures alone. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .wp-block-woocommerce-product-price) .wc-block-components-product-price { color: #e4e6ea !important; font-family: var(--woo-filter-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif) !important; font-size: 19px !important; font-weight: 500 !important; line-height: 1.3; letter-spacing: 0.01rem; white-space: nowrap; } /* ---- The chip with nothing in it, gone ---- The brand is optional, so most products in a catalogue have none. The block still prints its own shell, marked `is-empty`, and the chip the template wraps around it is stepped out of the way on that mark rather than drawn as an empty box with no words in it. Nothing else moves: a location or a unit that has no value keeps whatever the template gives it, since neither of those blocks carries this class. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand.is-empty) { display: none !important; } /* ---- The five plates, taken off ---- The price, the unit, the category, the location and the brand wore one plate between them: the fill a pill and a field share, #2c3138, the pill's own 6px by 14px inset, its 6px corner, and a step lighter, #353a42, under the pointer. That dress was asked off, and all of it goes here rather than one value at a time - the price last of the five, having kept a plate of its own on a section fill and then on the admin menu's Products plate, and the four having worn section colours one at a time before they were asked onto the chip grey. Taking the plate off uncovered what it had been standing on. The template wraps every one of these five in a group carrying a status colour - the unit on danger's red, the category on warning's amber, the location on info's blue, the brand on success's green - and writes an inset of 0.15rem by 0.45rem on the group's own style attribute, so those grounds were under this rule the whole time and the uniform grey was reading through them. The ground is therefore taken off at the wrapper rather than left to the template, and the inset with it, which is what the rule below does. The corner radius the template also writes is left alone: with no fill and no border, it draws nothing. What is left is the words. Each value is text on the card's own surface, at the figure the family was brought to - the category chip at 15px, the brand and the location at 16px, the unit at 17px, and the price at 19px and 500, two above the card title it once matched. The ink has since come apart. The unit, the brand and the location are asked onto the grey the admin menu's own sub-labels wear, #888888, where the category and the price keep the panel's ink: the three chips naming a measure, a maker and a place read a step back from the figures either side of them. The unit travelled: asked onto that grey with the pair, asked back to the panel's chain, and now asked on again, so the card's grey is the whole of what tells a maker, a place and a measure from its figures. Two things the five still keep. The links inside them stay unlined, named in the rule above. And each chip is still found by its block at the top level of the wrapper rather than by a class of its own, so a rule written for a chip stays on the chip and not on the wrappers above it. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .wp-block-woocommerce-product-price), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .taxonomy-product_cat), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) { background-color: transparent !important; padding: 0 !important; } /* ---- The price, with no plate under it ---- The price's plate was the last of the five and the longest-lived. A step above the family's figure meant a step taller, so its inset came down to 5.35px above and below and its sides in to 12px, and the pair sat level at 32.8px. Its ground moved more than once: the Sort section's tile, #5a8a80, taken from the token that paints that icon; a run of greens asked for as inks and each measured against that ground, four of them a green on a green and none clearing the figure small text asks for; then the inbox drawer's action pill, stated as that button's own accent tokens, which this site rendered #265cd9; and last the admin menu's Products plate, #47634f, named by the palette token so a retune of the menu row carried the price with it. All of it goes with the plate. The price is a figure on the card's own surface now, at 19px and the title's own 500, two above the 17px the title is set in, and its ink has come down from white to the #e4e6ea the title above it wears. The size was asked down a step after the plate went and has since been asked back up to the 19px it wore then; the leading here is unitless, so it followed the size on its own rather than standing still. The ink was left white when the plate went, because white was chosen to stand on a coloured plate, and this note held the change open: if the price should read as one of the chips rather than as the card's loudest figure, it was a change worth asking for by name. It has been asked for by name, and the declaration below is the one it landed on, as the note said it would. The rule above states the same #e4e6ea for the same figure, so the two agree at last, and the price now reads with the title above it rather than louder than it. The ink is stated on the block and on everything inside it, since the price carries the palette's own text class and would otherwise keep its ink by that class. The inbox accent token this declaration borrowed goes back to the drawer it came from, which is the only place that needs it. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .wp-block-woocommerce-product-price) .wp-block-woocommerce-product-price, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .wp-block-woocommerce-product-price) .wp-block-woocommerce-product-price * { color: #e4e6ea !important; } /* ---- The row brand and location share ---- Those two chips sit in one row with the space between them spread, and the template states that row as nowrap. These cards are narrow - three to a row on the front page, and still two to a row on a phone, where a card is about 173px - so a name and a full address can ask for more width than the card has, and a nowrap row answers by painting the location past the card's edge. The row is allowed to wrap here instead: side by side with the gap between them when the two fit, one above the other when they do not, and never off the card. The row only wraps if the card is allowed to be narrower than the row's own content, which is what the min-width below is for. A grid item refuses to shrink past its content's minimum unless it is told otherwise, and the template's row is the widest thing in this card: 185px of two nowrap chips against a card of 173px on a phone, where the row simply sat proud of the card's right edge. With the floor lifted the row takes the card's width, and wraps within it. The pair may also wrap inside their own plates - the nowrap the chips share with the other three is lifted for these two - so that an address too long for the row on its own wraps at its spaces rather than running over the edge. On these cards the pair always stacks: at their narrowest the two want about 185px of one line, and a card offers about 166px of room between its own insets. The step between the two when they stack is the stack's own. The column above sets its rows apart by 0.75rem, while the row's gap is the theme's fluid block gap - 12px on a phone, but 15.6px on a wide screen, which left the wrapped pair standing further apart than every chip above it. The row takes the column's step instead, so the distance between brand and location reads as the distance between the category and the brand above them, at every width. The row is found by the chip two levels down rather than by a class of its own, for the reason the chips are: every wrapper here is the template's, and only this row holds a brand. */ .wp-block-woocommerce-product-collection li.wc-block-product { min-width: 0; } .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .wp-block-group > .woo-product-brand) { flex-wrap: wrap !important; row-gap: 0.75rem !important; } .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .wp-block-group > .woo-product-brand) .woo-product-brand, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .wp-block-group > .woo-product-brand) .woo-product-brand__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .wp-block-group > .woo-product-brand) .woo-product-location, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .wp-block-group > .woo-product-brand) .woo-product-location__link { white-space: normal !important; } .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .taxonomy-product_cat) .taxonomy-product_cat, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .taxonomy-product_cat) .taxonomy-product_cat a { color: var(--woo-filter-dark-text, var(--wp--preset--color--filter-dark-text, #e4e6ea)) !important; font-family: var(--woo-filter-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.3; letter-spacing: normal; white-space: nowrap; } /* ---- The brand and location, in the menu's grey ---- Two of the five chips are asked onto the grey the admin menu's own sub-labels wear, #888888 - the ink that menu states for the line under a section name, the one spelled 'Details'. Stated in a rule of its own rather than by editing the rule the four share, as the size rules further down are, because the category is not part of the ask and keeps the panel's ink. The unit stood here too: it was asked on, asked back off, asked on again, and has now been asked onto the price total's ink, which is the shared rule above - the one the category and the price wear. So the unit rests on #e4e6ea with those two, and this rule's remaining two chips name a maker and a place. The hex is written out rather than read from a token, because it is the admin menu's value and not the panel's - the panel has no grey of its own to borrow, and the one grey it does carry, #666666, is its control label's rather than its type's. The pair have since left this grey, asked onto the unit's dress: the value inside the wrapper, and the link inside that, are dressed in the section below, and this rule's #888888 is now the wrapper's own - the line a label is set on, and the box the value sits in. It stays written as it is, because the ask that dressed the pair did not change what an unlinked card, or one carrying a label, would wear. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__link { color: #888888 !important; } /* ---- The unit, a step up ---- The unit took the shared chip figure, 15px, and is asked back up to 16px - one step over the family, and the only chip below the price's own figure. The plate that came with the figure while the five wore one is off with it, so the figure is what is stated here, and the box it makes is the leading's rather than an inset's. Stated in a rule of its own rather than by editing the rule the four share, as the category's is. It has since been asked up once, back down a step, and up a step again, which stood it at 18px; a further ask has walked it back down one step to 17, where it comes level with the card's own name rather than the one above it the move was measured from - the name having been asked down two steps of its own in between. Against the row beside it the unit now stands one above the brand and the location, two above the category chip, and two below the price. Its ink left the panel's chain with the brand's and the location's and has since come back: the unit wears the panel's #e4e6ea again, stated in the shared rule above, where the pair beside it stay on the admin menu's sub-label grey. The size has come down one step more, onto the place's own 16px, on the ask that the unit sit at the place's size: the card's four figures are then one run - 19px for the price, and 16 for the unit, the maker and the place under it - where they had been two. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__link { font-size: 16px !important; } /* ---- The unit, in the Inbox's own label dress ---- The unit came onto the dress the Inbox drawer's type tag wears, because it is the same kind of figure: a short qualifier set beside a card's other lines, as the tag is set beside a row's. It took the tag's type - the panel's UI font, 12px, the strong 600, 0.04em between the letters, set in caps - and the tag's ink, #e4e6ea, over a ground of its own: the palette's control step, #303030, the plate the drawer's two footer buttons rest at, coming up to the control-hover step, #353535, under the pointer in the same 0.15s. The two steps were kept as the palette's tokens rather than written out, because the plate and those buttons are the drawer's own pair: a retune of the palette moved both together. The figure was set in px rather than in the tag's 0.75em, because a card is not the panel - that em resolves against the panel's 16px base, and a card carries no such base. The plate is off now, on the ask that the unit read as a plain quiet line. What this rule keeps of the dress is what a plain line still needs from it: a figure, the tag's 1.5 leading, and the inline-block the plate's box was measured by - which is also what holds a unit of two words on one line, three words having painted two plates at a line break while there was a box to paint. The strong 600 is down to the regular 500, the 0.04em tracking and the caps are gone, and the ink is the menu's sub-label grey, #888888, in place of the tag's near-white: quiet, and one step under the card's own lines rather than above them. Two later asks have moved both of those. The figure went up to 16px with the maker and the place when the three were asked onto the filter pills' own size, and then a step above them to 17px on the ask that the unit stand slightly larger than the two lines under it. The ink left the grey for the price's own #e4e6ea on the ask that the unit wear the price's colour, so the card's two loudest figures now speak in one ink: 19px for the price, 17px for the unit, and the maker and the place at the 16px below both. The grey stands in this note as the round it was asked in; what the rule states is the price's ink at 17px. The fill, the 7px corner and the 2px 7px inset went with the plate, and so did the fill's 0.15s step. The label and the separator are not part of the ask: they keep the line they were set on, still held back at the 0.6 opacity of the quiet half. The editor's placeholder is left out of the rule, so a dash standing in for a unit keeps the quiet step back it already had. The plate has since come back to this line, on the ask that took the unit and the place onto the maker's plate: the figures are the maker's own, they are not stated here, and the rule further down carries them for all three lines at once. What this rule held until the newest ask is the figure, now 16px with the place, the price's ink, and the box the plate and the two-word unit are measured by. The ink has left the price's figure on that newest ask, which took the unit onto the Inbox's actions selector: the drawer's faint, rgba(255, 255, 255, 0.55) - the figure --woo-inbox-panel-faint resolves to at this site, and what the actions chip on a notification row is set in, its words and the outline it draws round them both reading currentColor off that one declaration. The faint is read here through the same expression the brand's and the location's rules already carry - --wp--custom--woo-inbox--panel-faint, with the figure as its fallback - so the three lines under the price name one reading, and that expression does resolve on a card at this site, as the pair's own computed figures show. The drawer chip's outline is drawn in currentColor, so that one colour declaration dresses its words and its ring together - the ring needs no figure of its own and none is stated. The unit line drew no ring at the time of that ask, so the ink was the whole of what landed here; the ring has since come back onto it, stated in the geometry rule below and read from that same currentColor, so the words and the outline are one figure once more. The card's two loudest figures no longer speak in one ink: the price above keeps the #e4e6ea this line wore, and the unit takes the faint the drawer's own quiet controls wear instead. The plate the three lines share was not part of that ask, and it was not this rule's to move: it was the maker's, stated once for all three further down, so the unit's ground and its two neighbours' came with the same rule and stood as one. A later ask then took that shared ground off all three lines and put the drawer chip's outline on it instead: the reader asked the unit, the maker and the place onto the Inbox actions selector's text, its background and its outline alike, and the selector's dress was exactly that - words and a 1.5px ring drawn in currentColor over no ground at all. Each line's geometry rule read `background: none` and `box-shadow: inset 0 0 0 1.5px currentColor`, so the fill was declined by all three together and the ring the maker's chip once drew on the pointer stood at rest instead, at the figure the words are set in. The two controls - this chip and the drawer's actions selector - then read one dress rather than two that agreed: faint words, no ground, one ring, the 8px corner and the 2px 7px inset. The reader has since asked these three onto the sidebar filter's pills, and that ask brings the ground back: each geometry rule now reads `background-color: var(--wp--preset--color--control, #292929)` and `box-shadow: inset 0 0 0 1.5px transparent`, which is the pill's pair exactly - the control fill the pills rest on, and the 1.5px spread such a pill's own ring resolves to when no colour is named, so neither chip shows an outline at rest. The three hover rules that had stood struck since the no-hover ask draw again, each stating the pill's pointer figure, #303030, so a card's chips warm as the panel's do. The ink is not part of this ask and does not move: these words keep the drawer chip's faint on both grounds. The 8px corner, the 2px 7px inset and the plate's own figures are what they were, and the fill eases on the pill's 0.15s - declined, with the rest, for a reduced-motion reader by the file's foot block. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value:not(.is-placeholder), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value .woo-product-unit__link { color: var(--wp--custom--woo-inbox--panel-faint, rgba(255, 255, 255, 0.55)) !important; display: inline-block; font-size: 16px !important; font-weight: 500 !important; line-height: 1.5; white-space: nowrap; } /* The ground's other half: the step the plate takes under the pointer, the 0.15s the two footer buttons take theirs at. Stated on the value rather than on the link inside it, because the plate is the value's own box - on a card whose unit links, the link is inside that box, so the pointer reaches it over either - and the chip family has no hover to inherit, so the pair is written out here. */ /* The fill hover that stood here is gone, and so is the pair's twin of it further down: the three share one hover now, and it is stated at the end of the file, after every rule that sets the quiet grey they rise from. */ /* ---- Brand and location, a step down ---- The pair shares one row, so the two read as one line rather than two, and that row's own request was a smaller figure for each. Asked a step down twice, and then asked back up, the two stood at the 15px the chip family wears - the figure they were brought to while the plates were on, and the one they kept once the plates were off. The size has since been asked up a single step, to 16px: the pair now stands one above the chip family, one below the name and two below the unit, so the two lines carrying the brand and the place read louder than a category chip without rising to the figures above them. Their ink has left the panel's chain: the pair wear the admin menu's sub-label grey, #888888, stated in the rule above - the grey the unit also wore for a while, before it was asked back. The pair have since been asked onto the unit's dress, so the 16px this rule states is no longer what shows on a card: the value inside the wrapper, and the link inside that, are set at 12px in the section below, as the unit's are. What is left of this figure is the wrapper itself - and with it any label the block is set to render, which is the one line on a card this figure can still reach. The reader has since asked that step back: the maker and the place stand at the 16px this rule states again, one under the unit rather than level with it, which is the figure the pair wore for longer than they wore any other. The paragraph above is kept as the ask it was - the pair came onto the unit's own figure for a round, and the gap this rule's figure opens against the chip family went back to one step - and is not a figure the sheet still reads: what shows on a card is 16px, stated here as it stood before that round. The 1.3 the shared rule states above is unitless, so the line follows the figure on its own back down to 20.8px, as it followed it up. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__link { font-size: 16px !important; } /* ---- The brand and location, in the unit's dress ---- The maker and the place are asked onto the dress the unit now wears, so the three lines that qualify a card read as one family: the unit's type - the panel's UI font, 12px, the strong 600, 0.04em between the letters, set in caps - the unit's ink, #e4e6ea, and the unit's plate under them, the palette's control step, #303030, coming up to the control-hover step, #353535, under the pointer in the same 0.15s. It is the third place these two have been asked: they came to the chip family's figure while the five wore plates, were walked down and back up as plain lines once the plates were off, and are now asked back onto a plate - the unit's, itself taken up when that line was asked onto the Inbox drawer's type tag. The pair then came down a step of their own, on the ask that the maker and the place stand slightly smaller: 11px where the unit keeps its 12px. They have come back up to that same 12px on the ask that the pair read slightly larger, so the three chips stand on one figure again and the difference the smaller step opened is closed. The three share the face, the 600, the 0.04em, the caps, the ink and the plate, and now the figure with them, so the dress is one and nothing about the size is the pair's alone. 11px is the first figure this sheet carries below 12px, the floor it held until that ask, and it stands in this note as history rather than as a value: the two readings of "slightly smaller" were put to the reader together - the words down a step, or the plate's inset in from 2px to 1px a side - and the words are what was chosen, the inset staying where it is with the plate, which is what this step back leaves untouched. The words take the chips' own box with them, because the plate is measured by the line rather than by the font: at 12px the line is 18px and a plate stands 22px, the unit's plate's own figure, where the 11px round drew 16.5px and 20.5px. The line is the pair's alone and reaches no other row. The dress is stated on the value rather than on the block's own div, as the unit's is, for the reason the unit's is: the div is a flex item in the row its block sits in, so a plate on it would be stretched to the row's height rather than hugging the words, and a label the block is set to render would be swallowed into the plate with them. On the value the plate hugs the words, the label and its colon stay outside it on the wrapper's own grey, and the value is an inline-block so its plate is measured by its leading rather than by the font's content box - which is what puts the unit's plate and the Inbox tag's at the same 22px. The link is named as well as the value, because the two blocks build the visible words inside an anchor - the maker and the place are the two chips that link on a card - and the shared rule above states its own 15px, 500 and ink on that anchor with the mark, which the value's declarations alone would not reach. Placeholders are left out, as the unit's are: a dash standing in for a brand keeps the wrapper's quiet grey rather than arriving in caps on a plate. The nowrap above is the unit's, and the unit's is the only one that holds it: the pair are the two chips this sheet asks to wrap, in the rule further up the file that gives a row's words two lines to say themselves in, and that rule is marked where this one is not - a marked declaration wins whatever the two selectors weigh. So a place whose plate is wider than the column it sits in wraps inside its plate rather than spilling out of the card. Measured on the front grid at this 12px: the maker's plate stands 107px by 22px and holds one line at both widths, the place's 173px and 135px by 22px at the desktop width, and 141px by 40px in the phone's two-column card, which is its two 18px lines and its 4px of inset. The 11px round the pair took before this one measured 100px by 21px for the maker, at both widths; 161px and 126px by 21px for the place at the desktop width; and 141px by 37px in the phone's card. Each is the page's own box: the line is 18px inside 2px of inset top and bottom, which is 22px, and the box is reported whole. The unit's plate needs one line only - it measures 40px by 22px, its line 18px too - so the three are one dress, this figure included. The plate is off since. The paragraphs above describe that round - the ask they were written for is the one that put the maker and the place on the unit's dress. On the reader's later ask, the one the annotation in the report shows, the three read as plain quiet lines instead, and that ask is what the rule below this note states: the fill, the 7px corner and the 2px 7px inset are gone from both the unit's rule and the pair's, the strong 600 is down to the regular 500, the 0.04em tracking and the caps are gone, and the ink is the menu's sub-label grey, #888888 - the same figure the search field's placeholder takes further down this file. The one hover the three share is the ink lift stated at the end of the file, on each chip's value and on the link inside it: the ink rises to #e4e6ea in 0.15s, and no fill arrives. The measured boxes above stand as history too - they were the plates' boxes, and a plain line is measured by its own line and nothing else. The 12px those lines were set at has since been asked up to the figure the sidebar filter's pills are set at, 16px - the `woo-filter__chip` the Telex block draws, whose own 500 this sheet already had - so the three now read at the size of the filter's pills rather than under them, and their line is 24px where it was 18. The unit has since been asked a step above the pair, to 17px, and onto the price's ink, #e4e6ea, so the two noted here now stand one under it rather than beside it at one figure, and the same 500 they shared is the only thing the three still speak alike. That gap has since been asked open again: the pair return to the 16px this rule states, one step under the unit rather than level with it, so the three lines that qualify a card are told apart by their figures again as well as by their ink and their weight - and the maker and the place keep one figure between them, as the row they share should. The 17px round above is kept as the ask it was. The line follows the size on its own, the 1.5 stated below being unitless, so it draws at 24px again, and the wrapper's figure above moves with this one, so a label the block is set to render and the value beside it stay at one size. */ /* The pair's plate is off on the same ask, and with it the fill, the 7px corner and the 2px 7px inset that measured the words here rather than the line. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value:not(.is-placeholder), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value .woo-product-brand__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value:not(.is-placeholder), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value .woo-product-location__link { color: #888888 !important; display: inline-block; font-size: 16px !important; font-weight: 500 !important; line-height: 1.5; } /* The pair's twin of the fill hover, gone for the same reason the unit's is: the three's one hover is the ink lift stated further down the file. */ /* ---- The category, a step down ---- The category chip took the shared chip figure, 16px, and now stands one step under it at 15px - the step the pair takes above - and the figure is all that is left of the step, the plate it once carried being off with the other four. Stated in a rule of its own rather than by editing the rule the four share. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .taxonomy-product_cat) .taxonomy-product_cat, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .taxonomy-product_cat) .taxonomy-product_cat a { font-size: 15px !important; } /* The category is named again under the pointer so a theme's own hover ink does not reach inside it: the chip is held on the panel's ink, keeping under the pointer the figure it rests in. Two other holds stood here and are gone. The unit's was the only hover it had for a while - from the menu's grey to near-white under the pointer while the maker and the place beside it stayed put - and it went when the unit came to rest on the panel's own ink in an unconditional rule that is `!important` and knows no hover. The maker's and the place's was the same hold, kept while the three wore plates: a grey word on the plate's darker step would have been the one line on the card that could not be read. With the plates off on this ask there is no step to hold them against, and the three take one hover instead - the ink lift stated at the end of the file, which raises the grey they rest in rather than pinning it. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .taxonomy-product_cat):hover .taxonomy-product_cat a { color: var(--woo-filter-dark-text, var(--wp--preset--color--filter-dark-text, #e4e6ea)) !important; } /* ---- The place, in the ink asked for ---- The place has been asked onto an ink of its own, #d8dce1: a soft near-white, a step under the #e4e6ea the maker and the unit speak in and a long way above the #888888 the pair rested in together. Only the place was asked, so the maker keeps the grey the pair's rule gives it. The four selectors are the four that rule names for the place's half - the block, the anchor the words are built in, the value and the link inside it - so a label the block is set to render takes the ink with the value beside it; and the figure is stated after that grey and weighs the same as it, which is what makes it win wherever both reach. What it costs is the lift. The hover the three lines share rises to #e4e6ea, so the place now climbs from #d8dce1 rather than from the grey: a step of a step rather than a change of voice, still taken in the 0.15s the rest of the site changes in, and still snapped for a reduced-motion reader by the block at the foot of this file. On the plate's ground the figure reads at roughly 9.6:1 where the grey read at 3.7:1 - the quietest of the card's lines, and the one this ask lifts. The step that round opened has since been asked closed: the place is onto the maker's own ink, so the two lines of the pair speak in one figure and the place reads at the #e4e6ea the maker and the unit already stand in. The figure is not written out a second time - it is taken from the same `--woo-filter-dark-text` chain the maker's ink rule draws on, fallbacks and all, so a palette asked to move that colour moves the pair together rather than twice, which is what "match" is worth stating this way. What it costs is the hover the three lines share: that lift rises to #e4e6ea, which is where the place now rests, so the lift is a no-op there exactly as it already is on the unit, and the place joins the maker and the price in the one light figure. On the plate's ground the reading goes from roughly 9.6:1 to roughly 10.6:1. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value:not(.is-placeholder), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value .woo-product-location__link { color: var(--woo-filter-dark-text, var(--wp--preset--color--filter-dark-text, #e4e6ea)) !important; } /* ---- The three quiet lines, and their one hover ---- The unit, the maker and the place now read as one family of plain lines rather than three plates: the same 12px they were set at on the plates, the regular 500 in place of the strong 600, ordinary word spacing where the plates were tracked out at 0.04em, no caps, no fill, and the admin menu's sub-label grey, #888888 - the figure the maker and the place wore as plain lines before they were dressed as the unit, and the one the unit itself wore for a while as well. What the three gained in the same ask is a hover, which is what this pair of rules is: the ink rises to the cards' near-white, #e4e6ea, in the 0.15s the site's other controls change in. It is stated here, at the end of the file, rather than beside any of the three, because the quiet grey each of them rests in is declared with `!important` in a rule of its own - so a hover written above those rules would be the earlier of two equally weighted declarations and would lose to them, whatever order the pointer came in. The six selectors name each chip's value and the link inside it, so the hover holds whether the pointer is over the words or over the anchor that carries them on the two chips that link. The value is stated as the pair above; a placeholder is left out, so a dash standing in for a maker keeps the quiet grey its wrapper gives it rather than rising as though it were a name. All three have left this pair for the tag's own dress: the unit took the filter's type violet - stated in its own section below, in the resting ink and under the pointer alike - and the maker's and the place's chips took their own tints on the rounds that dressed them, so each rests in a figure this lift does not name and holds it under the pointer. The round in between, in which the three rested here and the tints moved onto the pointer, is written up in the unit's section note above; the reader has asked it back, so this lift paints nothing the three show and no chip reads its figure from here. All six selectors are left standing rather than narrowed to the pair a placeholder would want, because a line put back in the grey would take its lift again with no other edit - and because the six are what makes the family's behaviour one rule rather than two. Each chip's own hover stands in its own section below, at this rule's weight and later in the file. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value:not(.is-placeholder), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value .woo-product-unit__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value:not(.is-placeholder), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value .woo-product-brand__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value:not(.is-placeholder), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value .woo-product-location__link { /* This round: the lift is quicker than the panel's 0.15s and it carries the ring with it, so the violet words and the outline arrive together rather than the outline a step ahead of them. */ transition: color 0.1s ease, box-shadow 0.1s ease; } .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value:not(.is-placeholder):hover, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value .woo-product-unit__link:hover, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value:not(.is-placeholder):hover, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value .woo-product-brand__link:hover, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value:not(.is-placeholder):hover, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value .woo-product-location__link:hover { /* Struck, not moved. The reader has asked the pointer's lift off all three chips, so the quiet ink this rule put under a hand is gone from here: what the three wear now is their own section key's tint, stated in each chip's ink rule above. The six selectors stay standing, as the sheet's other struck rules do, so the lift can be given back to the family with one declaration rather than six - and so a line put back in the grey takes its lift again with no other edit. */ } /* ---- The brand, on a plate of its own ---- The maker's name was a quiet line, as the place's still is. It is asked onto a plate now: the fill a step up from the card's own #252525, in the pair the filter menus already keep - #303030 at rest, #353535 under the pointer - so a name reads as the way into a maker's other stock rather than as a second line of small print. The side inset is 10px, asked a little wider than the 8px the plate took on its first round - which was itself a step past the 7px this plate wore in the round that first dressed the pair - and the height was 3px above and below, asked up very slightly from the plate's own 2px: 30px where it measured 28. That step has since been asked back down on the same words the other way: the inset is 2px again and the three chips stand at 28px, the sides untouched at 10px, so the three lines are the height they wore before the round that asked them up. A chip is measured by its words, and these are the smallest steps out from them. The corner is that plate's 7px as well. A fill with square corners reads as a block behind the words; 7px is the round the pair's own plate was drawn with, and it is what makes the fill a chip rather than a highlight. The place beside the maker kept its quiet line in that round - only the brand was asked - and has since taken the plate with the unit: the three lines are one rule further down, and it is there the figures are stated once for all of them. The fill sits on the link rather than on the value or the wrapper, so every pixel of the plate is the target: the anchor is the one of the three whose padding a pointer can press. It also leaves a label, if a summary ever prints one beside the value, outside the plate as the quiet half it is. That reasoning holds for the unit and the place too, whose links are named in the same rule below. The hover is stated on the link for the same reason and carries :focus-visible with it, so the keyboard gets the lift the pointer gets. The fill changes in the 0.15s the site's other controls change in; the file's own reduced-motion block, at the foot of it, already names this link - for the ink's lift, on which that block's six selectors were written - so the plate's arrival is declined with the rest for a reader who has asked for less movement. The name is asked onto the unit's ink now, #e4e6ea, in the round that widened the plate. A maker reads at the figure the price, the unit and the place are read at, and the plate's own measure rises with it: about 3.6:1 in the quiet grey the line wore, about 10:1 on the #292929 fill the plate rule states now - which is the one thing the plate's first round left standing. The four selectors below name the line's wrapper, its value and the two links, because the quiet grey is stated on each of them, in two rules of its own, and a rule that is to stand over those two has to name what they name. The lift on this line becomes a no-op from here, as the unit's already was from the round that took the unit onto the price's ink, and the reader's last ask has brought the place onto the same figure: all three chips now rest on the near-white this lift carries, so the six selectors at the foot of the file name a rise that nothing on a card shows, and each chip's own tint is what answers the pointer instead. */ /* * The plate, stated once for the card's three lines. * * The maker took it first, on an ask of its own - the figures the note above gives are those. The round that * follows asks the unit and the place onto it in the same figures: the fill #303030, the 3px 10px inset, the * 7px corner, the #353535 the pointer brings, and the 0.15s the site's controls change in. The height has * since moved down that one step, to 2px 10px and 28px where the plate stood 30, on the same words the * widening round was asked with. The maker and the place * are one shape now, and this is one rule for them, in this file's habit for a family: the ink lift at the * foot of it is written for six selectors on the same reasoning, and the quiet grey the lines rise from is * stated for the run rather than line by line. A figure asked to change later changes here, once - though * the unit has since left this plate for the tag's own corner and a 2px 7px inset, and the third line's * figures are stated in its rule below. What the three share of this rule is the fill: the corner and the * inset are what part them, so the fill below is read three ways and the pair's figures above hold for the * maker and the place. * * Ink is not part of that ask and was left where each line had it; the rounds since have moved it twice. All * three chips rested on the price's #e4e6ea for a round - read from the `--woo-filter-dark-text` chain the * maker's rule states, so a palette asked to move that colour moved all three together rather than three * times - and each chip's own tint arrived with the pointer then: the unit's violet, the maker's #8e705f and * the place's #53708f. Both of those went the same way in the rounds that followed: the pointer's tints came * off the three, the unit was asked onto the Inbox panel's faint ink, and the newest ask brings the maker's * and the place's lines onto that same figure - so the three chips read one ink now, and it is the panel's, * not the price's. That ink is stated per chip in the sections below, each written as the token a panel row's * timestamp reads, and is not stated here. So the ground this rule carries is what the three rest on in both * states, and the fill is no longer the figure that parts them: the corner and the inset are. * * The fill sits on each line's link, as the maker's does, so every pixel of every plate is a target; a label * or a separator - which the unit's block can print beside its value, and the maker's too - stays outside the * plate as the quiet half it is. * * The step names both properties, because at the round it was written this was the later of the two rules * that state a transition on these links: the ink lift above asks 0.15s of the colour, and a rule naming only * the fill would leave the link's colour snapping while the value it sits in still eased. So the pair is * written out together here, and each chip's own geometry rule below states the step the fill is taken * on: the round that * added the ring to the step - a third property, so that the outline eased with the ink - has been asked * back, and with the ring in the resting tint there is nothing about it to ease. On a card the pair is what * the links and the values both read. The file's * foot block declines the lot for a reduced-motion reader - all three lines' values and links are named * there, and `transition: none` covers whatever properties they carry - so nothing new is needed for it. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value .woo-product-brand__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value .woo-product-unit__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value .woo-product-location__link { /* The palette's control step, asked for site-wide onto fields, selects, pills, links and buttons. The three tag links have since divided on it: the unit's own geometry rule below states this same figure, later in the file and more narrowly, so the plate and that chip agree, while the maker's and the place's rules state `none` against it and read as outlines on the card. The pointer moves the figure in none of the three cases. Both halves are kept here, so that a chip moved from one group to the other is one declaration and so that the three read as one family by what they share rather than by what they show. */ background-color: var(--wp--preset--color--control, #292929) !important; border-radius: 7px !important; padding: 2px 10px !important; transition: color 0.15s ease, background-color 0.15s ease; } /* The hover pair that stood here is asked away: the maker's and the place's tag links stepped to #303030 under the pointer, and to it under the keyboard with them. They now hold the ground they rest on in both states and only the words answer, which is the lift the three lines share further up this sheet - so a pointer still says which tag it is on, in the ink rather than in the fill. */ /* The unit, in the Inbox panel's "New" chip. The reader has asked this line's font, case, size, colours, corner, inset, outline, leading and nowrap onto that chip's, figure for figure, and the card's own control ground onto the pointer that finds it, so the card's shortest qualifier reads as the panel's newest one at rest and as the card's own control under a hand - and reads as the unit rather than as a status either way, since the words are still the unit's own: ear, 20 lb bag, hour. The reference is the panel's status tag for a form request: the feed gives it the slug pending and the label New, so it wears the tags' shared rule and that slug's tint. Read off the panel, the dress is 0.8125em of the panel's own 16px base, the strong 600, 0.04em between the letters, set in caps, the tint as its ink, nothing behind the words, a 1.5px inset ring of that same tint in the fill's place, and the 8px corner. On this card that is 13px, 600, 0.04em, uppercase, #6e5e7b, no fill, the same 1.5px ring and the same 8px corner. The purple is the palette's type tint - the one the filter's own Type tile wears, and the section this unit's filter belongs to - so the card, the panel and the sidebar read in one figure. The figure is stated in px rather than in the tag's 0.8125em, as the line's own figure already was: an em resolves against the panel's 16px base, and a card carries no such base. What the line left: the 16px it was asked down to with the maker and the place, the 500, the case as it was typed, the price's #e4e6ea ink and the 7px corner. The words wore the tag's violet while that round stood, wore the price's near-white through the rounds after it, and wear the violet again: the reader has restored the round that put the three chips' colours on the pointer, so the tint is the ink a card shows at rest, and #e4e6ea is worn above this line by the price rather than by it. The fill has moved through rounds since: from `none` to the card's control step on the round between, back to `none` on the restore, and onto the control step again on the newest ask - which is where this rule states it, as the palette's token with its literal behind it. The font is not restated, because the two sides already resolve to one figure. The panel's tag reads --woo-inbox-panel-font-family with inherit behind it, and no rule in the panel's own sheet declares that token; this card's unit inherits the page's font the same way, and the two measured as one and the same system list on both. If a retune ever parts them, this rule is where the unit's half is stated. The leading was named at 24px, the figure the plate's box was already measured by, and was the one figure of the dress the reader had not asked for. It has since been asked away: the 24px is gone, so the pill takes the 1.5 the rule above holds - 19.5px over 13px words, where a 16px line would make 24 of it - and the box follows its words down from 28px to about 23.5. That is the tag's own height rather than an oversight: the New chip states no leading either, so it sits on the panel's line the same way. The cost is the row it stands in: the maker and the place keep 28px beside a 23.5px pill, and this line is where the 24px goes back should the three be wanted level again. The plate is the rule the maker and the place take, stated once for all three - fill, corner and inset - so this rule takes the unit out of it by coming after it at the same weight. The three chips have since been dressed alike rather than in two figures: the tag's 8px corner and its 2px 7px inset stand in the maker's and the place's own geometry rules too, so what the plate gave them - a 7px corner and a 2px 10px measure - is read there rather than here, and this rule's copies of the two figures are the unit's own half of the same agreement. The fill is the third of the plate's figures, and the three chips divide on it: this rule states the plate's own control step, after the plate and more narrowly, so that ground and this line agree, while the maker's and the place's rules state `none` against it - so the unit reads as a plate and the other two as outlines on the card, and the three are told apart by their ground and their ink rather than by a corner or an inset, which all three share. The pointer has been asked onto the chip's own terms twice over: the round that moved the tints onto the pointer rested the words on the price's near-white, and the restore that followed put the violet back as the resting ink - which is the figure this chip's hover rule states as well, on the value and on the link inside it. Nothing on the chip answers a pointer beyond the ink the words already wear, so the two states are one figure, and the newest ask leaves that alone: it moves the ground and the ring, not the ink. The padding has since been asked onto the tag's, which is the figure the sentence above held out: 2px 7px where the plate insets 2px 10px, stated in this rule's own box. The maker and the place keep the wider measure; the unit's pill narrows by 3px a side and its words hold the 24px leading named above, so the box keeps its 28px height and gives up 6px of width. The tag's inset is the one figure of the chip's dress this rule had not stated. The 1.5px ring keeps the tag's width and keeps the tag's inset shadow drawn where a border would sit, and its colour is the words' own tint: the round that moved the ring onto the pointer, through the `--woo-product-chip-ring` token this sheet briefly stated and fell back to transparent, is asked back, so the ring is this rule's own box-shadow line in this rule's own tint again and no token stands behind it. The newest ask has since taken that line off this chip altogether - the outline goes rather than changing colour - so the unit carries no ring and the ink is the only edge it has, while the maker's and the place's keep theirs. Putting it back is that one line. The transition is the plate rule's pair of properties rather than the three the round added: with the ring off or in the resting tint there is nothing about it to ease. The newest ask of all then put a ring back on this chip, and took the ground off it: the reader asked the three lines under the price onto the Inbox actions selector's text, background and outline, which is the drawer chip's dress - faint words, no ground, and a 1.5px ring drawn in currentColor. So the outline this paragraph records as gone is back, at the words' own figure rather than a tint of its own, and the ground the round above put under this chip alone has left all three of them together. The ring's width, the corner and the inset are the figures this section already states; what moved is the ground and the ring's presence. The round itself, kept as the round it was: the reader asked that the colours these three chips wore be their hover instead, with the card's default ground and text as the rest - so the three inks rested at #e4e6ea, taken from the `--woo-filter-dark-text` chain, and the ground was the card's control step, #292929, in both states, while each chip answered a hand with its own tint and a ring that followed it. The reader asked that round back, and the tints are the resting ink and the resting ring again, one declaration apiece in the three sections below, with the ground `none` on the pair; the round after took the ground back onto the unit alone and its ring off, so half of that round stood on one chip of the three. The newest ask has since taken that ground off that chip as well and given all three the drawer chip's ring in place of a tint: the three lines under the price read one dress, and no chip of the three is a line's opposite any more. The corner, the inset and the figure were never part of it and are untouched. */ /* The unit, and the newest ask that takes it onto the drawer's chip: the reader asked this line, the maker's and the place's onto the Inbox actions selector - its text, its background and its outline - and the selector's dress is exactly those three: the panel's faint words, no ground at all, and a 1.5px ring drawn in currentColor. So the ground this comment records as the unit's alone has come off all three of the chips together, and the ring that left this one in an earlier round has come back - at the words' own figure this time rather than a tint of its own, since the one colour declaration the ink rule states is what the ring reads. The figure, the corner and the inset are not part of this ask: 12.5px, 8px and 2px 7px stay as the rules state them. The round recorded here, the one that put all three chips on the card's control ground and moved the tints onto the pointer, was asked back whole; what stands of it now is neither half - the ground is off all three and the tints are the faint. */ /* The round after it: the reader asked that the unit, the place and the maker wear the filter's Type pill colours - the quiet pill at rest and the tinted one under a hand - so the rules for the three chips below were brought onto one dress. At rest each carried the pill's own ground, the palette's control step, and the quiet ink #e4e6ea, the figure the pills' words wear until one is chosen; the maker's and the place's rings came off with it, so the unit was no longer the one chip of the three with no outline. Under the pointer all three lifted to the Type key's violet - `--woo-filter-dark-icon-type`, #6e5e7b - on the words and, through a 1.5px inset ring, on the outline: the same pair the block's Type section wears for a chosen pill. Ground, ink, corner and ring were one declaration apiece across the three, and the tints the maker's and the place's wore through their own rounds - the tag's and the locate key's - were off the card through that round. The reader has since asked two things of the same three: their figure up a half step, from 12.5px to 13px, so the lines read a touch larger on the card; and the lift quicker than the panel's 0.15s, with the ring carried by it, so the violet words and the outline arrive together rather than the outline a step ahead. The newest ask takes the same three figures up by the same half step: 13.5px, where the round above had put them at 13. It is the very slight this reader's steps are made of, and it is written in px on each of the three rules because a card carries no em base for it to resolve against - the note on the unit's own rule holds that reading. Nothing else moves with the figure: the 0.04em tracking is in em and rides on it, and the weight, the caps and the plates are where they were, so the three chips are one size still. The weight has since come down with them, on the same reading of the panel: its type is set at the medium token, 500 - the figure its titles, meta, text, time, number and badge all read, with only the little kind and status tags on the strong 600 this line's dress was borrowed from - so the three are stated at 500. The figure is written out because a property the drawer prints on itself is not readable from a card. The round before this one took the pointer off the three and put each chip's words back on its own section key's figure - the two the rounds before that had taken off the card. The unit read the Type key's violet, #6e5e7b; the maker the Class mark's, #8e705f; the place the Locate key's, #53708f. Each of the three was measured on the panel's own section icon rather than taken from the tokens: the classType token was the pair's one live trap, as the maker's section notes below, and the two keys that had not been exchanged were named with their literals behind them. The tints held as the resting ink of the chips and were held in every state, so a hand over any of the three moved nothing. The reader's newest ask brings the maker's and the place's lines onto the figure the unit holds - the Inbox panel's faint ink, the colour the timestamp on a panel row beside them is set in - so the three chips read one ink now, at the one 13px at 500, and the Class and Locate tints are off the card entirely. Both lines are written as the token that panel timestamp reads, with its figure behind it, as the unit's own ink is, so the three hold one colour by construction rather than by three values that happen to agree. The section notes below carry this round for each line. Two of the three pointer rules below, and the six-selector lift that stood with them, stood with their bodies struck rather than their selectors removed, so a pointer state could be given back to any chip with one declaration; the 0.1s transition the family shared was left standing on the same reading, and the unit's rule has since taken that declaration back for its ink - the filter's Type key - where the maker's and the place's two are still struck. The ground, the corner, the inset and the figure were not part of that ask and were untouched then; the ground has since come off this chip and the ring gone on in its place, as the rule's own note below records. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value .woo-product-unit__link { background-color: var(--wp--preset--color--control, #292929) !important; border-radius: 8px !important; box-shadow: inset 0 0 0 1.5px transparent !important; padding: 2px 7px !important; transition: background-color 0.15s ease; } /* The unit's figure, down one step on the reader's ask - the same step the panel's two tags took in the same round, which is the point of it. This line wears the Inbox drawer's type tag dress - the panel's UI font, the strong 600, 0.04em between the letters, set in caps - so when the tag comes down to 12px the unit comes with it rather than standing a step above the figure it borrows. 13px is the figure this line has worn since the last round that moved it, and the one the panel's tag wore through the same stretch; 12px is the figure the dress names for its own type, so what this round separates is the size and not the dress. The reader has since asked the two of them up by the half pixel this sheet's very slight steps are made of: the panel's tag to 0.78125em, 12.5px on its 16px base, and this line to that same figure - so the two are one size again, and this round is read as the round it was. The three chips then went up that same half step together, which put this line a half step above the tag again, and the reader has since asked all three back onto the tag's own 12.5px - so what this paragraph records stands again, and each rule's own note carries the round. Stated in px rather than in the tag's em, as the figure above is, because a card is not the panel: that em resolves against the panel's 16px base and a card carries no such base. The ink, the ring, the corner, the inset and the hover are not part of this ask, and the 16px the wrapper's own rule states is left alone: that figure is the wrapper's and any label's, where the rule below is what the reader sees. That violet held the resting ink for a round, and before it the ink had been away for a round of its own: the reader asked the chip's own tint onto the pointer for that stretch, with the price's near-white at rest, and asked the previous dress back after it, so the violet returned as the resting ink with no token standing between the two. The section note above carries both rounds. The reader has since asked these words onto another figure: the Inbox panel's own faint ink, the colour the timestamp on a row beside them is set in. It is written as the token that timestamp reads, with its figure as the fallback, so the two hold one colour by construction rather than by two values that happen to agree - a retune of the panel's faint in Global Styles moves the age on a row and this line together. The chip draws its ring at rest, in the same currentColor this declaration sets below, so the words and the outline are one figure by construction and any later change to the ink moves both; anything drawn in currentColor inside this rule follows it. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value:not(.is-placeholder), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value .woo-product-unit__link { /* The Inbox panel's faint ink - the figure a row's timestamp wears - read from the token that timestamp reads. The filter block's Type mark held these words for a round before this one, at rgb(110, 94, 123), measured on the panel; the ask has moved them onto the age that stands beside them on a panel row. The figure stood a half step up for those rounds - 13.5px, where all three stood at 13 - the tracking in em riding on it with the weight, the caps, the inset and the corner untouched. The reader has now asked the three chips onto the Inbox actions selector's own figure - 0.78125em, 12.5px on the panel's 16px base - so the chip and the tag that opens that section's panel are one size again, as they were a round before that one, and this line is back on the figure its note above names. */ color: var(--wp--custom--woo-inbox--panel-faint, rgba(255, 255, 255, 0.55)) !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important; } /* The unit under the pointer: the tag's composure in the words, the card's ground on the plate. The New chip is a label rather than a link and has no hover of its own - nothing in the panel's sheet names .woo-inbox__status in any state - so the words keep the figure they rest in, and that half of the dress is what this rule states: it stands after the three lines' shared lift, the same two selector shapes with one pseudo-class more, so at equal weight it is the later of the two and outranks the #e4e6ea the lift names. The ground is the other half, and it has had two asks of its own: the pill rests with no fill, the tag's own state, took the #303030 the card's controls are drawn in under the pointer for a round, and has now been asked back to no fill - so the unit holds the tag's state in every state and the words are what answers, as the maker's and the place's tags do. The plate's own hover rule no longer names the unit, so these declarations are the whole of the unit's hover: the words held so the tag's dress stays whole, and the corner. That third figure is its own round: the declarations land on the value span as well as on the link inside it, because the ink has to reach both, and the span is the box with no corner of its own - it rests at 0px. The measured hover had that span at 8px all the same, from somewhere outside this sheet, so stating the radius here pins the figure to the pill instead of to whatever rule happens to be hovering: both boxes are cut to the tag's 8px and one curve holds whichever of the two the pointer lands on. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value:not(.is-placeholder):hover, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value:not(.is-placeholder):focus-visible, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value .woo-product-unit__link:hover, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value .woo-product-unit__link:focus-visible { background-color: #303030 !important; border-radius: 8px !important; color: var(--woo-filter-dark-text, var(--wp--preset--color--filter-dark-text, #e4e6ea)) !important; /* The state this rule draws today is three declarations - the fill, the corner both boxes are cut to, and the ink the words answer with, on the reader's newest ask: the figure the price beside them reads in, taken from the chain the third chip's own hover already draws on - and the fuller state it carried for a while is recorded here as the round it was asked in: the reader had asked the pointer back onto these words, one figure deep, and the chip's ink came up to the filter's Type section key, --woo-filter-dark-icon-type, #6e5e7b - the violet this line rested in for a round, named the way the filter's own sheet names it, so a retune of that key moves the section's icon and this hover together wherever the token is in scope and the literal holds the figure where it is not. Read off the rendered panel, that key's icon stands at rgb(110, 94, 123), which is this literal exactly. The rest in the Inbox panel's faint and this change on the pointer were the whole of that state, and the three things a hand has worn here in earlier rounds stay off it: no plate, no ring, and no pinned corner - whichever of the two boxes the pointer lands on is cut to the chip's own 8px. The four selectors keep their shape, the value span and the link inside it under the hand and the keyboard alike, so the words answer on either box. The 0.1s colour step the value span carries is still the span's; this link states the fill's own 0.15s step in its geometry rule above, taken off the sidebar filter's pills, so the ground eases in under the pointer on either box. The words no longer keep their faint there: the declaration above lifts them to the price's figure in the same 0.1s step the span has always carried for its colour. */ /* Struck, not moved, on the reader's ask that the unit hold one dress in every state - and drawn again since, on the later ask that put these three chips onto the sidebar filter's pills, where the state is that pill's own pointer figure, #303030, taken on the fill and the corner together. What this rule had drawn was a lift of the words alone, and the note above records the rounds that figure took - a plate for a round of its own, a ring for another, an outside rule's corner pinned under the hand. All of that is off the chip now, with one exception the tail of this note records. The corner the chip draws is the 8px its own rule states, and the colour step the value span carries has the ink to ease. The four selectors stay standing, as the sheet's other struck rules do - and the lift has now been given back, in them: the reader's newest ask is the words' ink alone, taken on the hand and the keyboard alike, so the declaration above states it in the price's own figure and the violet the earlier round had lifted these words to stays off the chip. The rest of this note holds: no plate, no ring, no pinned corner. */ } /* The maker's name on the unit's ink - the figure the hover above already lifts it to, so resting there the lift has nothing left to do on this line. Written as the four the two quiet-grey rules name. The maker's name has since left this ink for the filter's Class tint, in the section below, so the four selectors here no longer paint the value a card shows. What still stands of the rule is the wrapper and the plain link - the ink a placeholder value inside the wrapper inherits, which is the quiet step the unit's own placeholder keeps - and the figure the hover lifts the place to, the place not being part of that ask. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value:not(.is-placeholder), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value .woo-product-brand__link { /* The unit's figure, on the reader's newest ask: the maker's words are asked onto the ink the unit's chip wears - the Inbox panel's faint, the colour a panel row's timestamp is set in - so the Class mark's #8e705f leaves this line as it left the unit's. The group keeps the wrapper and the plain link in it, so a label and a placeholder take the same ink the value a card shows does. Written as the token that panel timestamp reads, with its figure behind it, so the two hold one colour by construction rather than by two values that happen to agree. */ color: var(--wp--custom--woo-inbox--panel-faint, rgba(255, 255, 255, 0.55)) !important; } /* ---- The maker's name, onto the unit's chip ---- The maker's name has been asked onto the unit's own chip, with one figure of it exchanged. The two lines now share the chip's geometry: the unit's 8px corner, its 2px 7px inset, and its 1.5px ring, drawn as an inset shadow where a border would sit. The plate the maker and the place kept gives up its ground, its 7px corner and its 2px 10px measure to them, so this line stops being a plate the links sit on and becomes the tag the unit is - the tighter of the two figures. The tag's ground is `none`, stated by this line's own rule: the round that put the card's control step, #292929, under all three chips and rested the words on the price's near-white has been asked back, so the plate's fill is declined beside this line rather than shared with it - the unit, which took that ground back on the ask after, was the one chip of the three that showed it for those rounds, until the newest ask took the ground off all three together. The ink and the ring took the filter's Class mark: #8e705f, the figure the filter's own sheet re-declares for that mark on its dark panel, and the figure this chip wore at rest and under the pointer alike. The round in which it was the pointer's figure alone, with the price's near-white, #e4e6ea, at rest, is recorded in the unit's section above and has been asked back with the rest of it. The reader's newest ask then takes this line onto the unit's ink - the Inbox panel's faint, the colour a panel row's timestamp is set in - so #8e705f is off the chip in both states, and the ink rule below is the whole of what the line shows. The classType argument that follows stands as the record of the round that made the literal necessary; no literal is read here any more, so neither exchange can move this line again.The classType token is deliberately not named. On the filter's block root it holds this very figure, but at :root it still holds the one the mark wore before the reader exchanged the two - #966374, which is the Quality mark's now - and a card is not inside that block, so the token would hand this chip the wrong tint of the pair. The literal is what the mark shows; this is the one line to revisit if those two are ever exchanged again. The type is the unit's, figure and all: 12.5px since the newest ask, which is the half pixel this reader's very slight steps are made of - 12px on the round this line took the unit's dress - the strong 600, 0.04em between the letters and the caps, where this line sat at 16px and the regular 500 - the figure the pair was asked back up to after a round on the unit's own 12, and which this ask reverses for the maker alone, the place keeping it until the round below brought the place onto the same chip and reversed it there too. The wrapper keeps the figure it had, as the unit's wrapper does: that figure is a label's, where the value beside it is the line a card shows, and the wrapper keeps this section's ink for the same reason. The white-space is left alone - the pair was given the wrap so a long name would not run off a narrow card, and a maker's name is the longer of the two lines - so the chip takes the dress and not the row's measure. The pointer is the unit's: the words hold the chip's own tint, the figure they rest in since the tints came back off the pointer, and the ring holds that tint with them. The ground is `none` in this chip's own geometry rule and answers nothing in either state, the plate's own hover having been asked away in an earlier round. The corner is stated on both boxes as it is on the unit, so the span and the link inside it are cut to one curve whichever of the two the pointer lands on. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value:not(.is-placeholder), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value .woo-product-brand__link { /* The unit's figure - the Inbox panel's faint - on the reader's newest ask, which takes the Class mark's #8e705f off this line in both states. With the pointer's lift off this chip the two states this line used to tell apart were one again for those rounds; the newest ask puts the lift back on the words alone, in the price's figure, so the two part on the ink here as they do on the two chips either side. */ color: var(--wp--custom--woo-inbox--panel-faint, rgba(255, 255, 255, 0.55)) !important; } .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value:not(.is-placeholder), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value .woo-product-brand__link { /* The maker's figure, one half step up for those rounds: 13.5px, where all three chips stood at 13. It was the same half step the round that put the three at 13 took, and it is written in px rather than em because a card carries no em base to resolve - the note on the unit's rule above holds that reading. The 0.04em tracking is in em and rides on the figure; the weight, the caps and the chip's own plate are untouched. The reader has now asked all three chips down onto the Inbox actions selector's figure, 12.5px, so the family is one size still and that size is the selector's. */ font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value .woo-product-brand__link { background-color: var(--wp--preset--color--control, #292929) !important; border-radius: 8px !important; box-shadow: inset 0 0 0 1.5px transparent !important; padding: 2px 7px !important; transition: background-color 0.15s ease; } .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value:not(.is-placeholder):hover, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value:not(.is-placeholder):focus-visible, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value .woo-product-brand__link:hover, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value .woo-product-brand__link:focus-visible { background-color: #303030 !important; border-radius: 8px !important; color: var(--woo-filter-dark-text, var(--wp--preset--color--filter-dark-text, #e4e6ea)) !important; /* Drawn again by the round that put these three chips onto the sidebar filter's pills: this state is the pill's own pointer figure, #303030, and the reader's newest round adds the second half a hand sees there - the words come up off the Inbox panel's faint to the price's own figure, stated by the declaration above from the chain that chip is drawn with, on the value and the link inside it alike. It had been struck after the earlier ask, when the maker's chip no longer answered the pointer: the words then wore the unit's figure at rest, so there was nothing left for a hand to lift them to, and the 1.5px ring came off with the lift. The four selectors stay standing, as on the two chips either side, and the ring is still off it; the fill and the corner the declaration above states carry this state between them. */ } /* ---- The place, onto the maker's chip ---- The place's line has been asked onto the maker's chip with one figure exchanged, which is the round the maker's note above had already written ahead of it - "the plate the maker and the place kept gives up its ground, its 7px corner and its 2px 10px measure". Until now the maker alone had given them up. The two lines share the chip's geometry now: the unit's 8px corner, its 2px 7px inset, and its 1.5px ring, drawn as an inset shadow where a border would sit; the fill the ring stands in for is `none` - the round that put the card's control step, #292929, under all three chips was asked back, and the newest ask took it back onto the unit alone. The type comes down with them - 12.5px since the newest ask, 12px on the round that brought this line onto the maker's chip, the strong 600, 0.04em between the letters and the caps - where this line sat at 16px and the regular 500, the figure it kept when the maker's own ask ran and that note recorded the place as keeping it. The ink and the ring took the filter's Locate mark: #53708f, the tint the mark wears on the filter's dark panel and the one the locate pill already carries once a location filter is applied. This line wore it at rest and under the pointer alike - the round in which it was the pointer's figure alone, with the price's near-white, #e4e6ea, at rest, is recorded in the unit's section above and has been asked back with the rest of it. The reader's newest ask takes this line onto the unit's ink - the Inbox panel's faint - so the Locate key is off the chip in both states, and the token that carried that mark's figure to this line is no longer read here. The paragraph below, on why this mark's token was safe to name where the maker's was not, is left standing as the record of the round before this one. Unlike the maker's Class tint, this mark's token is safe to name on a card. The pair the reader exchanged - classType and quality - were re-declared on the filter block's root by its own sheet, which is what made a literal necessary for the maker's rule; locate was left alone, so --woo-filter-dark-icon-locate holds this figure at :root exactly as it holds it inside the block. The token is read here rather than written out, in the form the filter's own sheet reads it, so the chip follows the mark if the mark ever moves. The one move it would not follow is a re-declaration scoped to the block root, which a card sits outside - the classType round is the precedent - and the literal is this rule's one line if that happens. The wrapper and the placeholder are left as the maker's are: this section names the value and the link inside it, so a label the block prints in the wrapper, and a dash standing in for a place, keep the ink the place's own rule gave them, and only the value a card shows takes the tint. The white-space is left alone for the reason the maker's note gives - a place name is a place name, and it wraps. The pointer is the maker's. The words held the chip's own tint - the figure they rested in since the tints came back off the pointer - and the ring holds that tint with them; the newest ask lifts the words to the price's own figure, which is the declaration the rule below states. The corner is stated on both boxes so the span and the link inside it are cut to one curve whichever of the two the pointer lands on. That lift is what the six-selector hover at the foot of the quiet-lines section was written for; this rule is the later of the two at this weight, so a pointer that ever finds this line resting in the grey lands here. The six selectors stay standing, as their note says, so a line put back in the grey would take its lift again with no other edit. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value:not(.is-placeholder), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value .woo-product-location__link { /* The unit's figure, on the reader's newest ask, which takes the Locate key's #53708f off this line in both states: the Inbox panel's faint, read from the token a panel row's timestamp reads, the figure behind it being rgba(255, 255, 255, 0.55). The Locate key is no longer named here, so a retune of that mark no longer moves this chip; measured on the panel, the mark was rgb(83, 112, 143). The pointer's lift was off this chip already, so this ink was the whole of what the place's line showed for those rounds; the newest ask lifts the words off it under the hand and the keyboard, in the price's own figure. */ color: var(--wp--custom--woo-inbox--panel-faint, rgba(255, 255, 255, 0.55)) !important; } .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value:not(.is-placeholder), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value .woo-product-location__link { /* The place's figure, the same half step and the same ask as the two chips beside it: 13.5px for those rounds, where all three stood at 13, so the family stayed one size. Written in px for the reason the unit's note gives - a card carries no em base - and the 0.04em tracking rides on the figure while the weight, the caps and the chip's own plate stay where they were, the plate having been the maker's and the place's to keep until the newest ask took it off all three chips together, and gave the line the drawer chip's own ring in place of the tinted outline it had worn. All three are on the Inbox actions selector's own figure now, 12.5px, so the family is one size still and that size is the selector's. */ font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value .woo-product-location__link { background-color: var(--wp--preset--color--control, #292929) !important; border-radius: 8px !important; box-shadow: inset 0 0 0 1.5px transparent !important; padding: 2px 7px !important; transition: background-color 0.15s ease; } .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value:not(.is-placeholder):hover, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value:not(.is-placeholder):focus-visible, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value .woo-product-location__link:hover, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value .woo-product-location__link:focus-visible { background-color: #303030 !important; border-radius: 8px !important; color: var(--woo-filter-dark-text, var(--wp--preset--color--filter-dark-text, #e4e6ea)) !important; /* Drawn again by the round that put these three chips onto the sidebar filter's pills: this state is the pill's own pointer figure, #303030, taken on the ground, with the corner the declaration above states left as the rest figure has it. The newest round asks the ink back on the words, so they come up from the Inbox panel's faint to the price's own figure, stated by the declaration above from the chain that chip is drawn with, on the value and the link inside it alike. It had been struck after the earlier ask, when the place's chip no longer answered the pointer - its words rested in the unit's figure for those rounds, the Inbox panel's faint stated in the ink rule above, and what the line showed in both states, so the lift and its ring were both off it. The four selectors stay standing, as on the two chips above. */ } /* ---- The button, as the panel's own ---- It wore the sort mark's teal - a colour the filter keeps for the tile behind a section's icon - with the #666666 label colour on it, which measured about 1.7:1 and was the one place the grid was hard to read. It now wears the panel's chip: the fill a pill and a field share, the fill the panel's own sort trigger takes, the 46px floor, and the 0.15s change of fill - and the teal has since been asked back onto it in the two places that are not the fill, its ink and an outline it did not have before. Its hover was the panel's own, one step lighter, and has since been asked onto #353535, and then onto #303030 with the panel's sort trigger, its locate field, its chips and its two footer buttons - so this button and the panel warm to one figure again, and the figure is stated here outright rather than read from the palette's hover entry, which still holds #353535. --woo-filter-dark-apply-hover still holds #353a42 and has no reader now. Its type comes from further down the panel instead, from the Apply and Clear buttons on the footer band: the UI font at 17px and 500 with the 0.16px the title and the price are spaced by, and the panel's default leading and case. Those two are the panel's buttons, and so is this one - the control that carries out the action of the surface it sits on - where the small uppercase figures it wore first were the panel's label voice, the one its section headings and pills speak in. Four declarations are marked, for the two different things that argue back. The template writes the block's own style attributes into an inline style on the button itself - a font-size of 0.88rem, an uppercase and a 600 weight - and an inline declaration outranks an author rule that is not marked, so the size, the case and the weight are declared !important. The family is marked for the other argument: the template prints the palette's Zalando Sans class beside the button, that class is declared !important, and so only a marked declaration beats it, on specificity. Leading and case are written as the panel's defaults rather than left unsaid, so no theme rule can slip one in, and the tracking is stated as the card's own - and the leading is load-bearing here: a theme gives a button 1.5, which at 17px is 25.5px of line and pushed the band from its 46px floor up to 49.5px. At the panel's leading the label is about 20px inside 24px of padding, so the floor governs again and the band keeps the height it had. A first pass gave it the panel's ground instead, #1a1a1a, and that was wrong for a reason worth keeping: the page behind the grid is that same colour, so the band stopped reading as the card's foot and the label appeared to float under the card. The colour keeps it a surface, and it has since been asked for by name: #303030, a step off the chip onto the tone the product search box and the admin menu's hover wear. The corners were the card's own foot - square above, 10px below - so the band closed the plate rather than floating inside it. It has since been asked for a 10px radius all round, which lifts the band's top corners off the card's sides: it now reads as a figure standing on the plate rather than as its foot. The band is 168px wide inside a 200px card, 16px in from either side, so its top corners curve over that plate rather than at the card's edge, and they open two wedges of the card's own fill, #252525, above it; the plate is drawn on the same 10px, so the band's bottom corners still agree with it. The palette class the template prints carries !important, so these fills are declared with it too. The teal was asked onto this band for a round, in the two places that are not its fill, and is asked back off it: the label is the panel's near-white, #e4e6ea - the figure the Apply and Clear buttons on the panel's footer band are set in - and the band carries no outline at all. What stood there is kept here: the ink was the sort mark's own figure, #517c73, named through --woo-filter-dark-icon-sort rather than a literal for the reason the place's chip gives - the pair the reader exchanged, classType and quality, are the two the filter's sheet re-declares on its block root, and sort was left alone, so that token holds the figure at :root exactly as it holds it inside the block - and the edge was 1.5px, drawn as an inset shadow rather than a border, which is how the maker's chip and the place's chip wear their rings. The fill is where the teal never went and is left alone: the band is still the surface the earlier round asked it to be rather than the plate it was first, and the pointer still changes the ground alone. Both figures are one declaration from returning - the ink and the ring alike. */ .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-button__button { min-height: 2.875rem; border-radius: 10px !important; /* The palette's control step, asked for site-wide: the ground states no colour of its own, and the hover below takes the pointer's figure, #303030, which is the value that entry held before the reader moved it. */ background-color: var(--wp--preset--color--control, #292929) !important; /* The sort mark's teal stood here as this band's ink and as an outline it took on the ask that named the mark - the round the note above records. Both are asked back: the label is the panel's near-white again, the figure the Apply and Clear buttons on the panel's footer band are set in, and the band carries no ring at all, so its fill, its 10px corner and its box are the only edge it has. Both figures are kept in the note above, so an ask for either of them is one declaration. */ color: var(--woo-filter-dark-text, var(--wp--preset--color--filter-dark-text, #e4e6ea)) !important; font-family: var(--woo-filter-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif) !important; font-size: 17px !important; font-weight: 500 !important; line-height: normal; letter-spacing: 0.01rem; text-transform: none !important; transition: background-color 0.15s ease, color 0.15s ease; } .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-button__button:hover, .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-button__button:focus-visible { background-color: #303030 !important; } /* ---- The gallery's arrows, dressed as the Add new product button ---- The two arrows the gallery floats over each image arrive as a disc the block draws for itself: a 40px plate at #ccccccba - a translucent grey, and the only translucent thing on the card - with a #666666 chevron on it, both written inline, both the theme's greys rather than the header's. They wear the header's round plates' pair instead: #e4e6ea on #303030 at rest, one step up to #353535 under a pointer over the same 0.15s fade. Those are the figures the four header plates themselves wear, and the pair the Add to cart band wore until it was asked onto the sort mark's teal, so the arrows answer with the header's plates rather than with the chips the panel's pills are drawn on. The plate came out once, when the mark was read as a border around it, and comes back at this asking in the header's pair rather than the block's: the arrows read as two more of the header's round plates, which is what the card's other furniture is modelled on. The fill and the ink are stated on the button because that is where the header states them - its own rule is written on the group around its button, and the same two arrive here the same two ways: the fill inline from the block, the ink as a preset class. Both are marked for it. The fill is now written as a literal rather than through the palette token it used to name, because filter-dark-chip-bg is the fill the filter's own controls wear and retuning it to reach these arrows would have carried them. The radius needs no statement: the block writes 50px beside the fill, the header's own figure, and it is what makes its plates circles. The arrows keep the gallery's own 40px box; the header plate measures itself from its own type - 1.7em of glyph inside 0.3em of its padding - and the two are not forced to one figure. The chevron is a filled shape rather than a line, so its weight is set by stroking the shape in the ink it is already filled with: a stroke straddles the outline, so 0.8 fattens each arm from about 1.5 to about 2.3 of the frame's own units, in an 8 by 12 glyph. Heavier than the 0.4 it wore, which put the arms at about 1.9, and no longer the figure the header's cart glyph is stroked with, which is still 0.4. The join is round, so the elbow and the two tips carry the stroke's own rounding: a filled shape has no line ends to cap, and its tips are corners like any other, which is why the one stroke is the lever for both a heavier chevron and a softer one. The elbow was drawn sharp where everything else on the card is soft, and a rounded stroke is what softens it. The pointer step is held back while an arrow is disabled. The gallery does not remove the arrows at either end of the set - it marks them aria-disabled - and Woo fades the mark itself to 0.3 for that state. That fade was left alone while it was the state's own signal; it is lifted further down, where the inactive chevron is asked onto the product search box's placeholder grey and a 30% remainder of the live ink would not be that grey. The step is still signalled - by the ink now. */ /* Every arrow the gallery draws, wherever it draws one - the cards in the grid, the lightbox a card's image opens into, and any gallery a template adds later. The plate and its pointer step are the site's control pair, so they are stated once, unscoped, rather than per container: the rule was scoped to the grid's own cards while that was the only place an arrow appeared. They are named by the palette's own tokens here, which hold exactly the figures this rule shipped with. !important is load-bearing, and it is the reason the ink is stated further down rather than here. Woo writes the arrows' background inline, from the color attribute on the Next/Previous Buttons block, and that inline figure is a translucent light grey meant for a pale page. An inline style beats every selector, so only an !important rule can take the plate back. The block states its text colour the same way, as WordPress's own palette class - has-text-color has-custom-color-1-color - and core's !important rule for that class ties with this selector and wins on source order. So the button's colour cannot be settled here at all; the glyph below carries it instead. The plate these arrows stand on is the palette's control step, asked for site-wide onto fields, selects, pills, links and buttons: the preset resolves to #292929 and the literal it falls back to follows it, so the #303030 this section's notes name is the entry's old value. */ .wc-block-next-previous-buttons__button { background-color: var(--wp--preset--color--control, #292929) !important; transition: background-color 0.15s ease; } /* The chevron's ink. It is named on the glyph and not on the button because the button cannot hold it: the block's colour control lands there as has-custom-color-1-color, core's rule for that class carries !important, and the tie goes to the sheet that comes later. What that control paints from is a leftover of the pale theme this site was built on - custom-color-1, #666666, a grey for a light page, which measures about 2:1 on the #303030 plate. The glyph sidesteps the tie: the block's own rule for the icon is written :where(...) and so has no specificity to beat, and the chevron's path is filled with currentColor, so the colour set here is the colour it is drawn in. It is the product search box's own text token, so the field and the marks beside it read as one ink. Unscoped, like the plate above: every arrow the gallery draws is this same control, wherever it puts it - the grid's cards today, the lightbox and any later gallery with them. */ .wc-block-next-previous-buttons__icon, .wc-block-next-previous-buttons__icon path { color: var(--wp--preset--color--filter-dark-text, #e4e6ea) !important; } /* An inactive arrow's mark wears the placeholder's grey. The reader has asked the left chevron - the one an arrow shows while the gallery is at its first image - onto the grey the product search box's "search products..." line is set in: ink-muted, #888888, stated here in the same token and with the same opacity: 1 the placeholder carries, so the two greys are one figure rather than two that nearly meet. The rule is the placeholder's own, a few blocks up this sheet, read across to the marks beside it. The mark was drawn in the control's own ink, filter-dark-text, at rest and disabled alike, and Woo dimmed the disabled one to 30% of it. A fade is not a colour: the remainder over the #303030 plate reads far darker than the placeholder, so it could not be the figure asked for. The fade is lifted here and the step is carried by the ink instead - an inactive arrow is grey where a live one is near-white - and Woo's own cursor: not-allowed still tells the pointer the same thing. Only the ink and the fade change: the plate, its radius and the pointer step are the states' as they were. Written on the button's aria-disabled state rather than on a first or last child, because that is how the block marks an arrow with nowhere to go: the left arrow on the first image, the right one on the last. Woo's own rule for this state is wrapped in :where(...) and so has no specificity at all; this one carries a class, an attribute and a class, and the !important is there to hold the ink against the control's palette class, as it is on the two rules above. */ .wc-block-next-previous-buttons__button[aria-disabled="true"] .wc-block-next-previous-buttons__icon, .wc-block-next-previous-buttons__button[aria-disabled="true"] .wc-block-next-previous-buttons__icon path { color: var(--wp--preset--color--ink-muted, #888888) !important; opacity: 1; } /* The chevron's own drawing stays the grid's: this is a card's mark, sized and weighted for the 40px disc a card wears, and the rules above only settle what the disc is filled with and what the mark is drawn in, everywhere. */ .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-next-previous-buttons__icon path { stroke: currentColor; stroke-linejoin: round; stroke-width: 0.8; } .wc-block-next-previous-buttons__button:not([aria-disabled="true"]):hover, .wc-block-next-previous-buttons__button:focus-visible { background-color: #303030 !important; } /* ---- The gallery's arrows, inset by the band's own padding ---- The two discs sat at the gallery's own inset - 5px inside the image, which puts them 13px in from the card's edge at every width - and are asked here to carry the Add to cart band's left and right padding instead. That figure is 2vw: measured at three widths it is 20.8px at 1040, 25.6px at 1280 and 16.4px at 820, and the band's own padding measures exactly those three, so the two now read from one source rather than from two. The padding is stated on the row and not on the buttons, and that is a constraint rather than a choice: the block gives each button a fixed 40px box with box-sizing: border-box, so a 2vw inset on the button would leave 40px less 41.6px - a negative content box - and crush the chevron into nothing. The row is what positions them, its justify-content: space-between putting one disc on each edge of its content box, so padding on the row is the lever that moves both. box-sizing is stated because the block leaves this row content-box. Without it the row's 100% width would be measured on the content box and the 2vw added on top of it, running the row 4vw wider than the image it sits in and carrying the right-hand disc out past that image altogether. With it the row keeps the width it had and only its content box narrows, so both discs come in by the same figure and the pair stay symmetrical about the image. Nothing else in the row reads its box model - no border, no other padding - so this changes nothing that was already there. What this does not do is put the discs on the band's edge, and the ask that followed asked for exactly that instead: the discs' outer edges were to sit on the band's own. So the 2vw above is replaced by the figure that makes the two edges agree, and how that figure is arrived at is worth setting out, because it is not a step off the one it replaces but a different quantity altogether - the previous ask bought an inset, this one buys an alignment. The band's box is inset from the card by 8px plus a figure of its own group's: the card's own 8px, which the gallery image also stands on, and then whatever that group adds. Measured across five widths, the group's figure is 1vw above about 800px and a flat 8px below it - 10.39, 12.80 and 8.19 at 1040, 1280 and 820, and 8.00 at both 760 and 620 - so it is a clamp with an 8px floor, written here as max(8px, 1vw), and read off the page rather than assumed. The 8px the card contributes is confirmed independently of it: the image stands at 8.00 from the card at every width the page was measured at. The discs, left alone, sit at a fixed 13px - the card's 8px plus the row's own 5px - and that 13px does not move with the window. What the padding therefore has to supply is the difference between the band's inset and that fixed 13: max(8px, 1vw) less 5px. That is 5.4px at 1040, 7.8 at 1280, 3.2 at 820, and 3.0 at both 760 and 620, and at every one of those the discs land on the band's edges with nothing left over. A CORRECTION IS RECORDED HERE RATHER THAN ERASED. This rule first carried calc(1vw - 5px), which holds only while the group's figure is above its floor - above roughly an 800px window. Below that the band's inset pins at 16px while the row's padding went on shrinking, and the discs drifted inside the band's edges: 0.41px out at 760 and 1.81px out at 620, both measured rather than reasoned. Writing the floor into the expression is what puts the two edges back together at the widths that had come apart. The lower bound needs no guard of its own, and the block supplies the reason: 1vw falls through the group's 8px floor well before the row's padding could be squeezed to nothing, so the figure bottoms out at 3px and never reaches zero. At those widths the band's inset is a flat 16px, which is exactly what the discs' fixed 13px and that 3px add to. The alignment therefore holds for as long as the arrows are drawn at all, and not merely above some threshold. Below that the block stops drawing them, and its condition is narrower than "a narrow window": the rule is a max-width: 600px query that also asks for hover: none and pointer: coarse, and only inside the carousel layout. So the arrows go on a touch device at 600px and under, while a desktop pointer at the same width keeps them - and keeps the two edges meeting, on the same flat 16px. Measured in the shell this site is checked with, they are present at 620 and absent at 560, which is that query matching rather than the edges failing. */ .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-next-previous-buttons { box-sizing: border-box; padding-left: calc(max(8px, 1vw) - 5px); padding-right: calc(max(8px, 1vw) - 5px); } /* The product search above the grid. It read in the theme's Zalando Sans at its medium step; it now wears exactly what the admin menu's labels wear, which is what the Account row's own title states: the system stack, 500, and #e4e6ea. So the field a shopper types into stands at the same weight and ink as the section names in the menu beside it. Its size is the 17px the field carried before its step down: the reader asked for the 16px the catalogue's sort control reads, then asked for the previous size back, so the text reads level with the admin-menu labels named in the menu beside it again - one step over the sort row in the sidebar, the same row in the popup, and the clone of it in the row below this field. The declaration is stated `!important` for the reason the rest of this rule is: the theme's preset classes are, so a plain declaration would lose to them. The field's 48px height is untouched, since only the text was ever to change. The placeholder is given the same ink, because in an empty search the placeholder is the only text there is - matching the colour means matching it there. Its opacity is stated for Firefox, which otherwise fades placeholders of its own accord. What this overrides is the theme's has-medium-font-size and has-zalando-sans-font-family classes on the field; the search button beside it is left alone and keeps the step it had, since an icon button shows no type of its own and its magnifier is sized from its font. */ .wp-block-search .wp-block-search__input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; font-size: 17px !important; font-weight: 500 !important; color: var(--wp--preset--color--filter-dark-text, #e4e6ea) !important; } /* * The placeholder steps back from the ink: the brand/location grey, #888888 - the palette's ink-muted. * That is the value the cards' placeholder rule reads, and the figure the * place's own rule below still computes to; the maker's value has since left it for the filter's Class tint * and the place's for the filter's Locate tint, each in its own chip section above, and the pair's wrappers * - with any dash the block prints in them - are what keep it here. It read * filter-dark-text, the same value as the text typed into the field above it, which made an empty * search box look as full as a written one. The rule above keeps that ink for the typed text. */ .wp-block-search .wp-block-search__input::placeholder { color: var(--wp--preset--color--ink-muted, #888888) !important; opacity: 1; } @media (prefers-reduced-motion: reduce) { .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-button__button, .wc-block-next-previous-buttons__button, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location), .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand), /* The three quiet lines' ink lift is stated at the end of the file, on the value and the link inside it, so those six selectors are named here as well - a reduced-motion reader gets the lift, not the 0.1s. */ .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-unit) .woo-product-unit__value .woo-product-unit__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-brand) .woo-product-brand__value .woo-product-brand__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .woo-product-location) .woo-product-location__value .woo-product-location__link, .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .taxonomy-product_cat) { transition: none; } } /* ---- The stars, in the panel's own voice ---- The rating in these cards was Woo's own star block: five glyphs in the WooCommerce icon font with the hollow set laid under the filled one, so the score read as a score rather than as five characters. Its size and ink were the theme's rather than the card's - the palette's luminous-vivid-amber over the small step, 13px - which put this card's stars a step under the ones the inbox panel draws for the same reading, and in a different gold. The reader has since asked these five onto the panel's own stars outright, drawing and figures together: the hollow layer and the filled layer are star characters now - U+2606 and U+2605, five of each, written as escapes so the sheet stays plain ASCII - set in the UI stack the panel sets its own five in, which is the stack this card already carried, and taken off Woo's icon font by one declaration on the same element. The size and the step are the panel's own here, 15.5px and 0.12em, which is the figures the note below states; the box follows them onto the panel's pitch, and the leading stays this card's own, as it always has - what the ask names is the stars themselves. The ink is the panel's: #f0c675, the amber it prints its own five stars in. The size and the step were that round's: Woo's icon font draws its star nearer the edge of its box than a star character is drawn, so at one size and one step the card's five read larger and tighter than the panel's, and matching the panel's figure would not have matched its star. The card's were set at 13px with 0.2em between them, which brought the drawn star down and the step up. The size had been the theme's own small step, 13px, then 15px on an earlier ask, then 16px to match the panel's figure, then 14px to match its star, then 12px on an ask to bring the five down, and 13px on the ask back up a step: the run had moved from the 84px it measured at 14px, in to 72px at 12px, and out to 78px there, so those five stopped just under the width the panel's five ran rather than a clear step below it. The panel's five came onto this figure on the reader's ask - its sheet carries the round and the same 0.2em - and the 78px was then no longer a step under that run but the width both measured, at one pitch of 15.6px, with the pair parted on the drawing alone. That meeting has since been left behind: the panel's five were asked a size of their own and stood at 0.875em, so that run's 78px and 15.6px pitch were a step under the panel's 84px and 16.8px again, and the pair parted on the drawing and on the size. What is named here is this card's five; the panel's sheet carries its own round. colour is written as a literal because the panel's own property, --woo-inbox-status-warning-fg, is printed by the inbox block's theme.json - a page carrying this grid and no drawer never loads it, and a card cannot read a property that is not there. The tracking was 0.2em, and it was not the panel's 0.06em: at a smaller size the panel's step would have narrowed with the glyphs and left the stars closer together than they were, which was the opposite of the ask. What travelled was the panel's pitch - its advance plus its step, 16.9px, which is the distance the eye actually reads between two stars - carried onto glyphs drawn smaller; at 13px the same 0.2em gave each star a 15.6px advance, a step under the panel's figure, and the only thing those changes of size took with them. It is safe on this block - the filled layer is a span inside the same element, so it and the hollow ::before behind it inherit one tracking and the five glyphs keep their positions against each other. The leading does not travel: the panel sets its stars over 1.45 where this card keeps Woo's own 1.618, so each box follows its own size - 25.08px here at 15.5px, against the panel's 24 - and the pair agreed on the gold and on the shape rather than on the pitch. The glyphs themselves were drawn by two different hands, and that parting is what this round closes: the hollow five and the filled five are star characters now, the panel's two codepoints, in the UI stack, where they were Woo's icon font. What the pair still does not share is the leading - the panel sets its five over 1.45, this card over Woo's own 1.618 - so the two runs agree on the gold, on the drawing, on the size and on the step, and part on the box each is measured in. The size was then asked down very slightly, and the very slight step on this ladder - whose rounds above moved a whole pixel at a time, 12px to 13px and back - was the half pixel: 13px to 12.5px. It was one declaration, because the rule above names the container and the stars together, and the box below followed it on its own, being stated in em: 6.3em of 12.5px was 78.75px where it read 81.9, which is what the run measured. The step followed the size the same way, 0.2em computing 2.5px where it computed 2.6, so the glyphs and their spacing stayed in the relation the rounds above set; the ink, #f0c675, and the leading this card draws were untouched. Nothing was cut, the box still holding exactly five advances and their steps - the run is 3.15px narrower than the row's note below was built around. That round is undone, and this one goes further than restoring it. The reader's newest ask takes these five onto the panel's own stars: the drawing is the panel's, the figures are the panel's - 15.5px with 0.12em, the same pair the panel's sheet carries - and the run measures some 86.8px, which is the 86.8px the panel's five stand at, so the two places read one pitch at last. The size is px rather than em because this block's rating sits inside an inline 12px base, where an em figure would compute to something else again; the box below is what followed the size, and its own note states the figure. */ .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-rating, .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-rating__stars { color: #f0c675 !important; font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; font-size: 15.5px !important; letter-spacing: 0.12em !important; } /* * The hollow five, as the panel draws them: the panel's own codepoint for an unfilled star, five of them, * in the UI stack. Woo draws this layer with its icon font's 'S', so the drawing has to be replaced rather * than restyled - the letters are letters in any other font, and the panel's sheet keeps that lesson. The * ink is named on both layers rather than left to inherit: the panel paints all five of its characters from * one figure, and naming it here keeps the pair from drifting if the wrapper's colour is asked elsewhere. * * This layer's place is stated below with the box's own window rather than left to Woo's grid sheet, for the * reason the box's note there gives. */ .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-rating__stars::before { color: #f0c675 !important; content: "\2606\2606\2606\2606\2606" !important; font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; left: 0 !important; position: absolute !important; right: 0 !important; top: 0 !important; white-space: nowrap !important; } /* * The filled five, drawn over it: the panel's filled codepoint, five times, in the same stack. Woo's own sheet * positions this layer at the box's top-left and clips it to the span's width; both of those figures are stated * below with the box's window now, so the place this layer draws in is no longer Woo's to move. What * changes is only what it draws, so a score still reads as a width rather than as a count, and the fifth star of * a three-star card is still the hollow one behind it. The child combinator is Woo's own shape for this layer: * the box holds one span, and the score text inside that span carries two spans of its own which must not be * drawn on. */ .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-rating__stars > span::before { color: #f0c675 !important; content: "\2605\2605\2605\2605\2605" !important; font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; left: 0 !important; position: absolute !important; right: 0 !important; top: 0 !important; white-space: nowrap !important; } /* * The box the five glyphs stand in, widened to hold them at the smaller size and the wider step: set to * exactly one run of five stars, which is what a rating box has to be. Woo pins this element at 5.3em * of its own font size, and that figure scales down with the glyphs, so at 13px it lands at 69px while * five stars and their steps need 82. Shrinking the size and opening the step inside a box that * shrank with them would have run the fifth star off the end and clipped it, which is what the first * attempt at this did. * * Three classes carry the box, because the same card can be drawn by two of Woo's blocks: the product * collection renders the older wc-block-grid classes, whose rule lives in wc-blocks.css, and the new * component classes belong to the block that draws with them. All three are given one width. * * 6.3em was the exact figure for the icon font, and the 6em it replaced was one step short. That font's star * is 1.06em of advance, not one em, and Woo's own sheet is what said so: it pins the same five glyphs, "SSSSS", * in a 5.3em box while declaring no tracking at all. Five advances were 5.3em; the five 0.2em steps the rule * above set added 1em on top of them, one after each glyph; and the run needed 6.3em, which was 82px at 13px. * The 6em box cut 0.3em - 3.9px - off the fifth star's edge, which is what the reader was seeing, and the * earlier reading of this figure had taken the glyph for a full em wide and the box for exact on that count. * The trailing step follows the last glyph and is the only thing the box's end can fall on: nothing is cut, * and the box was exact against the run. * * The reader's newest ask moves the figure again, because the drawing it moved first changed the arithmetic * under it: a star character's advance is its own em, measured on the panel's five, where the icon font's * glyph was 1.06em. Five advances are therefore 5em and the five 0.12em steps add 0.6em on top of them, one * after each glyph, so the run needs 5.6em - 86.8px at the 15.5px the rule above now sets, which is the * panel's own run to the pixel. Stating it in em remains the point of the rule: it holds five advances and * their steps at whatever size the declaration above sets, so the change of both figures above and this one * below it needed one declaration each. * * An exact box matters here for more than tidiness. The filled layer is a span sized as a percentage of * this box, so at 100% for five stars the fill boundary falls at five times the pitch and lands on a * star's edge; a box wider than the run would slide it off for every rating that is not five. * * The window around that run is stated here with it, and so is the place the two layers draw in. The box is * 1.618em tall and clips what overflows it; the span inside it is pinned to its top-left with the score's * sentence pushed a 1.5em padding below the window; and each layer is pinned to the same top-left on one nowrap * line. Every one of those figures is Woo's own, taken from the grid sheet that draws this block, and they are * stated here because this sheet is enqueued for the block editor as well as the front end - and the editor is * where that sheet is not. There the sentence the block prints inside the box stood in the card beside the * stars, and the ask is that only the stars are displayed: with the window closed, the box holds the run and * nothing else, and the score is still read out by the box's own aria-label, which names the rating in words. * On the front end nothing shifts - 1.618em of the 15.5px the rule above sets is the 25.08px the box already * measured, and the clipping was already Woo's. The two declarations are worth keeping together for that * reason: clipping the window while leaving the span in flow would push the filled five out of sight with the * sentence, and the card would lose the score rather than gain a quieter line. */ .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-grid__product-rating__stars, .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-rating__stars, .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-rating-stars__stars { height: 1.618em !important; overflow: hidden !important; position: relative !important; width: 5.6em !important; } /* * The span the block prints inside that box, pushed out of the window: its own copy of the rating, in words, * which Woo keeps for a reader without the stars and which the window clips. Woo's figures are the span's own * shape too - pinned to the box's top-left, full width, and pushed down by 1.5em of padding - and the layer the * span carries is what the padding would carry off screen if the layer were left in flow, so the two go * together in one rule. */ .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-grid__product-rating__stars > span, .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-rating__stars > span, .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-rating-stars__stars > span { left: 0 !important; overflow: hidden !important; padding-top: 1.5em !important; position: absolute !important; right: 0 !important; top: 0 !important; } /* * The price row, kept whole on a card too narrow to hold it. At 390px the card's body offers 141px * after its own insets, and the row needed 174 to keep the price and five stars on one line: the price * block and its slash come to 82, the gap between them to 8, and the run to 84 - 174 with the five stars * set at 13px and the run measuring 82, half a step under the figure the row was first built for. The row is * set nowrap, * so the run was pushed 33px past the card and the card cut the last star in half - the run itself was * whole, which is why nothing showed in the block's own box and why the sheet's width rule was not the * problem it looked like. * * The row is therefore allowed to wrap, but only on a card that cannot hold it: the card is made a * query container and the wrap is asked for under 190px, the point at which the row's own insets and * its two items stopped fitting side by side. The threshold is left where it stood rather than moved to * meet a run that is itself still moving: it is a card's wrap point, not a property of the stars. Cards wider than that - every card at desktop width - keep * the single line they have always had, and the rating is held to the right edge of the line it lands * on, so a wrapped card still reads price, then stars, against the same edge as the title above. */ .wp-block-woocommerce-product-collection li.wc-block-product { container-type: inline-size; } @container (max-width: 190px) { .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(.wp-block-woocommerce-product-rating) { flex-wrap: wrap; } .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-group:has(> .wp-block-woocommerce-product-rating) { margin-left: auto; } } /* * The gap above the grid, named here rather than left to the block gap. * * The list carries the theme's block gap above it - 15.6px at the desktop width - and the collection's own * script takes that margin off again once it has hydrated: WooCommerce drops an empty notices block that * stands as the list's previous sibling, and a gap between two children goes with the child. The grid is * therefore at 119px on the first paint and at 104px a moment later, and the reader watches the collection * settle upward as the page finishes arriving - the reader's ask is that it stand where it will stand from * the start. * * Zeroing the margin here makes the two states one, and it changes nothing in the finished page: the margin * is already 0 there, so this rule only says out loud what the script was doing. It is written on the * collection's own box rather than on a card, because it belongs to the template and not to the product. */ .wp-block-woocommerce-product-collection .wc-block-product-template { margin-top: 0; }