/* Sale price reads as the price. The was-price stays quiet. */
body.single-product #brxe-qpppmp.brxe-product-price del,
body.single-product #brxe-qpppmp.brxe-product-price del .amount,
body.single-product #brxe-qpppmp.brxe-product-price del bdi,
body.single-product .brxe-qpppmp.brxe-product-price del,
body.single-product .brxe-qpppmp.brxe-product-price del .amount,
body.single-product .brxe-qpppmp.brxe-product-price del bdi {
color: #8a847b !important;
font-size: 14px !important;
font-weight: 400 !important;
text-decoration: line-through !important;
}
body.single-product #brxe-qpppmp.brxe-product-price ins,
body.single-product #brxe-qpppmp.brxe-product-price ins .amount,
body.single-product #brxe-qpppmp.brxe-product-price ins bdi,
body.single-product .brxe-qpppmp.brxe-product-price ins,
body.single-product .brxe-qpppmp.brxe-product-price ins .amount,
body.single-product .brxe-qpppmp.brxe-product-price ins bdi {
color: #a8503a !important;
font-size: 18px !important;
font-weight: 500 !important;
text-decoration: none !important;
}
/* Task 87 - Mobile PDP: wishlist label + "find my size" alignment
* WHY: Task 35's touch-target rule
* body:not(.pm-cols-10) a.tinvwl_add_to_wishlist_button::after (max-width:767px)
* also hits the full-width PDP wishlist button, whose ::after carries the text label
* ("select a length to save" / "add to wishlist"). It became a 44px absolute box, so
* the label stacked one word per line and overflowed onto the delivery estimate.
* That button is already 52px tall, so it doesn't need the extra hit area.
* Also: "find my size" kept its desktop 14px left indent on mobile.
* CANARY on admins 8 Oct 2026, promoted to LIVE same day.
* ROLLBACK: deactivate this snippet.
* Fold into the Task 35 selector next plugin release. */
@media (max-width:767px){
.single-product .tinv-wraper.tinvwl-woocommerce_after_add_to_cart_button a.tinvwl_add_to_wishlist_button.no-txt::after{
position:static;width:auto;height:auto;left:auto;top:auto;transform:none;white-space:nowrap}
.single-product td.value .abx-fit-open{display:inline-block;margin:0 0 12px;padding:6px 0}
}
/* Task 68 - Product page: one recently-viewed list on mobile, not two.
*
* Reported 16 Sept 2026 (and raised once before): on a phone an extra
* recommended-products row appears underneath the We're Cute Too /
* Recommended Products area.
*
* Cause: two owners for the same content. The Bricks tab block on the product
* page carries a "Recently Viewed" panel, and the mobile layer (WPCode 39192)
* separately injects a .abx-seen strip immediately above the footer. Nothing
* hides the tab block on mobile, so both render.
*
* The strip is the one that goes: the tab block is the section the client
* calls the existing area, and it is what the desktop shows too. The strip is
* kept everywhere else - on a collection page there is no Recently Viewed tab
* and it is the only recently-viewed there is.
*
* Shipped live rather than behind the preview gate: it was a defect a customer
* was looking at. DEACTIVATED 16 Sept 2026 when Task 66 was promoted - Task 66
* now owns the whole recommendations area and hides the strip itself, so this
* rule is redundant. Kept, not binned: if Task 66 is ever rolled back, turn
* this one back on at the same time or the duplicate returns.
*
* Rollback: deactivate this snippet.
*/
body.single-product .abx-seen {
display: none !important;
}
/* Task 63 - desktop mega menu reachability. Two defects, both of which read to a shopper as "the links do not work": (1) a dead gap between the nav row and the panel, so moving the pointer down closes the panel before the click lands; (2) panel links are inline-block and only 18px tall inside 33px rows, so roughly half the visible row does nothing when clicked. Desktop only - the mobile drawer is Task 62 and is untouched.
Revised 14 Sept 2026: the original bridge hung off .abx-mm-item::after and relied on that li being position:relative. Bricks forces position:static on megamenu parents, so the strip was positioned against the header and never covered the gap (measured: nav item ends 89px, panel starts 92px, li computed position:static). The bridge is now anchored to the panel itself, which is already positioned, and only exists while the panel is open. */
@media (min-width: 768px) {
#abx-mm::before{content:"";position:absolute;left:0;right:0;top:-4px;height:4px}
#abx-mm .abx-mm-col li{display:block}
#abx-mm .abx-mm-col li>a{display:block;width:100%;box-sizing:border-box;padding:6px 10px;margin-left:-10px;border-radius:2px;transition:background-color .12s ease,color .12s ease}
/* The only hover feedback was #abx-mm a:hover{text-decoration:underline} - a hairline in the
text colour, spanning the label rather than the row. The row is the click target now, so the
row is what should respond. */
#abx-mm .abx-mm-col li>a:hover,
#abx-mm .abx-mm-col li>a:focus-visible{background:rgba(26,24,21,.06);color:#000;text-decoration:none}
}
/* The open state rode on a CSS transition that included `visibility`. visibility is a
discrete property - it only flips when its transition finishes. Interrupt that
transition and the panel ends up class-open but computed visibility:hidden: it paints
no hover, takes no clicks, and hit-testing passes straight through to the page behind.
Sweeping across the nav toggles is-open off and on, which is exactly what happens on
the way to the departments further right, so Occasionwear and Sale hit it while the
ones near the left edge rarely did.
Measured on the live page: with the transition in place, is-open gave opacity 0 /
visibility hidden and all 11 panel links unhittable; with the transition removed, the
same class gave opacity 1 / visibility visible and all 11 hit. Flip visibility
instantly on open, delay it only on close, and leave opacity and transform animated.
`html` prefix because the panel's own CSS is injected at runtime, after this file. */
html #abx-mm{transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
html #abx-mm.is-open{transition:opacity .16s ease,transform .16s ease,visibility 0s linear 0s}
/**
* Task 57 - Header: search field overlapping the nav (desktop)
* WPCode snippet | CSS | Site Wide Header
*
* THE BUG THIS FIXES
*
* Measured on the live site at 1114px wide:
*
* Sale link x 596 -> 626
* Search input x 595 -> 785 (.dgwt-wcas-search-input, FiboSearch)
*
* document.elementFromPoint() at the centre of the Sale link returned the
* search input, not the link. Sale could not be clicked or hovered, so the
* dropdown Task 46 builds for it never opened. Nothing was wrong with the
* menu itself.
*
* WHAT THIS VERSION DOES, AND WHAT IT DELIBERATELY DOES NOT
*
* Stacking order only. The nav column is lifted above the search column, so
* a nav link can never be covered by it whatever the widths do.
*
* The first version of this snippet also tried to stop the flex row
* overflowing - display:flex, a gap, a shrinkable nav column, a clamp() on
* the search width. That broke the mega menu outright: with those rules
* applied the panel stopped populating on hover (0 links, every department,
* not just Sale). Verified by disabling the snippet in the page and
* re-testing - 19 links with it off, 0 with it on. #brxe-iosesi is the nav's
* own wrapper, not the row holding nav and search, so making it a flex
* container changed geometry Task 26 depends on.
*
* So the layout half is gone. What remains is the part that fixes the
* reported bug and cannot break anything, because it changes no boxes.
*
* STILL OPEN: around 1100-1200px the search field visually overlaps the tail
* of the nav. The links all work now, but it looks crowded. Fixing that
* properly means measuring the real breakpoint and either collapsing the
* search to an icon or giving the row somewhere to put the extra width -
* and testing the mega menu after every change, which is the lesson here.
*
* Scope: min-width 768px. The mobile layer (body.abx-m) is untouched.
*/
@media ( min-width: 768px ) {
header#brx-header .brxe-div:has( > nav.brxe-nav-nested ) {
position: relative;
z-index: 3;
}
header#brx-header .brxe-div:has( .dgwt-wcas-search-form ) {
position: relative;
z-index: 2;
}
}
/**
* Sale archive notice (Task 56).
*/
.abx-sale-notice {
margin: 0 0 1.25rem;
font-size: 0.8125rem;
letter-spacing: 0.02em;
text-transform: lowercase;
opacity: 0.75;
}
.abx-sale-notice a {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Task 44 (T7) - size variations span the full Add to Bag width.
*
* The swatch list already matches the button's 408px, but each swatch is
* pinned at 60px, so five sizes leave ~68px of dead space on the right and
* the row reads as ragged next to a full-width button.
*
* Letting the swatches share the row solves it at any count: they grow to
* fill, and wrap onto a second line rather than shrinking below a legible
* 56px when a product has many lengths.
*
* Promoted live on 16 Sept 2026 (client request, 16 Sept list item 3).
* The body.abx-preview gate from Task 43 has been removed - this now
* applies to every visitor. Rollback: deactivate this snippet.
*
* Still scoped to >=768px so the mobile layer built in the ABX Till
* plugin is untouched.
*/
@media (min-width: 768px) {
body .bricks-variation-swatches.bricks-swatch-label {
flex-wrap: wrap;
}
body .bricks-variation-swatches.bricks-swatch-label > li {
/* !important: Bricks sets flex: 0 0 auto on the swatch later in the
cascade, which pins each one at its base width. */
flex: 1 1 0 !important;
width: auto !important;
min-width: 56px;
}
/* A single size should stay a button, not stretch across the whole row. */
body .bricks-variation-swatches.bricks-swatch-label > li:only-of-type {
flex: 0 0 60px !important;
min-width: 60px;
}
/* The sold-out strike comes from notify-me.css as a 1px line the width of
the swatch, rotated 45deg. That only lines up while the swatch is square-
ish: at 60px wide it read as a corner-to-corner cross, and now that the
swatches fill the row it is ~103px wide and 48px tall, so the rotated
line overshoots top and bottom. A gradient draws the diagonal from the
real corners instead, so it stays exact at any width. */
body .bricks-variation-swatches.bricks-swatch-label > li.nm-oos::after {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
background: linear-gradient(to top right,
transparent calc(50% - 0.5px),
#555 calc(50% - 0.5px),
#555 calc(50% + 0.5px),
transparent calc(50% + 0.5px)) !important;
}
}
/* =====================================================================
* Mobile PDP: gallery gutters + image fill
* =====================================================================
* Two defects on a 390px phone, both visible in one screenshot of the
* Kyoto product page.
*
* 1. THE GALLERY WAS OFF-CENTRE. wp-custom-css carries, at <=767px,
*
* body.single-product #brxe-bqxhwn, #brxe-uzabsm, ... {
* width: calc(100vw - 10px) !important;
* max-width: calc(100vw - 10px) !important;
* }
*
* which is 380px on a 390px screen - the intent being a 5px gutter
* each side, matching .ab-safe-product-main's `margin: 0 5px`. But
* that container also carries `padding: 14px 14px 46px`, so its
* content box is 352px and a 380px child overflows it by 28px. The
* container's own overflow-x:hidden then clipped 9px off the right
* and left 19px of gutter on the left. Measured 19..399, clipped to
* 19..385: a 10px lean that reads as a crooked photo.
*
* Fixed by pulling the gallery back out of that padding - and only
* the gallery, so the title, price and description keep their 14px
* text inset. Result 5..385: symmetric, inside the container's
* border box, so nothing is clipped. Not touched: the ID rule above.
* It is someone's deliberate 5px gutter and it is not wrong; it was
* only ever measured against the wrong box.
*
* 2. THE IMAGE DID NOT FILL ITS FRAME. .sgg-item is aspect-ratio
* 800/1067 (3:4) = 507px tall at this width. The ![]()
inside carries
* object-fit:cover but no height, so it sized to its own intrinsic
* 819/1024 and came out 475px - leaving a 32px band of the frame's
* rgba(0,0,0,.03) showing as a grey strip under every photo. cover
* had nothing to cover. Giving the image the frame's height lets
* object-fit do the job it was already asked to do.
*
* Phones only. Above 767px the gallery is a 60% column with none of
* this geometry, and both rules are inert.
*
* ROLLBACK: deactivate this snippet. It adds rules and removes none.
*/
@media (max-width: 767px) {
body.single-product .ab-safe-product-gallery {
margin-left: -14px !important;
margin-right: -14px !important;
}
body.single-product .ab-safe-product-gallery .sgg-item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
}
/*
* Task 35 - Mobile: touch targets and price legibility.
*
* MEASURED at 390px on live templates. Four controls a shopper is expected to
* hit with a thumb, against the WCAG 2.2 AA minimum of 24x24:
*
* header search icon .dgwt-wcas-search-icon 20 x 24
* filter toggle .ab-safe-filterbar .brxe-toggle 20 x 18
* Sort By .abx-sort-toggle 65 x 14
* find my size .abx-fit-open 65 x 13
*
* A 13px-tall control is not a control, it is a dare.
*
* HOW THIS FIXES THEM. Not by making them bigger - the design is fine and
* enlarging the icons would change the header. Each gets an invisible,
* absolutely-positioned pseudo-element centred on it, 44px in the short
* dimension. The tap area grows; nothing moves and nothing looks different.
*
* WHICH PSEUDO-ELEMENT, AND WHY IT MATTERS. .dgwt-wcas-search-icon and
* .brxe-toggle already use ::after for their own decoration, so those two get
* ::before. The other two have neither in use, so they use ::after. Picking
* the wrong one here silently deletes an icon - the kind of breakage that does
* not throw and never shows up in a console.
*
* Breadcrumb links (22x22) are deliberately left alone: they use ::after for
* their separators, and 22 against 24 is not worth risking the separator for.
*
* PRICE. Card price was 11px, the smallest text on a product card - smaller
* than the title above it. Now 12px, matching the title. Still restrained;
* simply no longer the thing you squint at when comparing two products.
*
* Phones and small tablets only. Desktop is untouched.
*
* Reversible: deactivate snippet.
*/
@media (max-width: 991px) {
/* --- header search: 20x24 --------------------------------------------- */
/* ::after is taken by the widget itself, so this uses ::before */
.dgwt-wcas-search-icon { position: relative; }
.dgwt-wcas-search-icon::before {
content: ""; position: absolute; left: 50%; top: 50%;
width: 44px; height: 44px; transform: translate(-50%, -50%); z-index: 0;
}
/* --- filter toggle in the archive toolbar: 20x18 ---------------------- */
.ab-safe-filterbar .brxe-toggle { position: relative; }
.ab-safe-filterbar .brxe-toggle::before {
content: ""; position: absolute; left: 50%; top: 50%;
width: 44px; height: 44px; transform: translate(-50%, -50%); z-index: 0;
}
/* --- Sort By: 65x14 --------------------------------------------------- */
.abx-sort-toggle { position: relative; }
.abx-sort-toggle::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 100%; min-width: 44px; height: 44px;
transform: translate(-50%, -50%); z-index: 0;
}
/* --- find my size (product page): 65x13 ------------------------------- */
.abx-fit-open { position: relative; }
.abx-fit-open::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 100%; min-width: 44px; height: 44px;
transform: translate(-50%, -50%); z-index: 0;
}
/* --- mobile menu rows: 22px links inside 50px rows -------------------- */
/* The offcanvas menu builds each row as
.brx-submenu-toggle (350x50, padding 14/14)
a (60x22) <- the only tappable part
button (30x15) <- expands the submenu
so a 350x50 row offered a 60x22 target and 29px of dead space above and
below it. These are the primary navigation links on a phone.
Padding on the anchor does not work here - something already pins its
height, and adding negative margins only collapsed the row. Instead the
link is stretched over the row with an absolutely-positioned ::after,
stopping 56px short of the right edge so the submenu arrow keeps its own
target rather than being swallowed by the link. Both pseudo-elements were
confirmed unused before being claimed.
Verified: nav height unchanged at 425px, a tap mid-row now lands on the
anchor, and a tap on the arrow still lands on the button. */
.brxe-offcanvas .brx-submenu-toggle { position: relative; }
.brxe-offcanvas .brx-submenu-toggle > a::after {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 56px;
}
.brxe-offcanvas .brx-submenu-toggle > button { position: relative; }
.brxe-offcanvas .brx-submenu-toggle > button::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 48px; height: 48px; transform: translate(-50%, -50%);
}
/* --- header hairline: removed on mobile ------------------------------ */
/* .ab-mobile-header carried border-bottom:1px solid #000 - a hard black
rule directly under the logo row. Removed on phones only; the desktop
header is untouched. */
#brxe-uehuid.ab-mobile-header { border-bottom: 0 !important; }
/* --- search overlay: the magnifier was sitting on the text ------------ */
/* The mobile search overlay positions its submit button absolutely at
left:23px / top:21px inside a 45px bar. At 40x40 that puts the magnifier
on top of the placeholder AND 22px below the bar, crossing the underline.
Moved to the right end and centred vertically, at 44x44 so it also stops
being an undersized target. Centred with margin-top rather than
transform: translateY(-50%) - something else already owns transform on
this element and the translate silently did nothing. */
.dgwt-wcas-om-bar .dgwt-wcas-search-submit {
left: auto !important;
right: 2px !important;
top: 50% !important;
bottom: auto !important;
margin-top: -22px !important;
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* --- card price: NOT changed here, deliberately ----------------------- */
/* The price is 11px and it should probably be larger. It is not changed
because font-size on .ab-safe-product-price already has five competing
declarations, four of them !important:
.ab-safe-product-price, .ab-safe-product-price * 11px !important
same, @media (max-width:767px) 10px !important
.ab-safe-product-card .ab-safe-product-price 13px !important
.brxe-cvqllw .brxe-qccobv.brxe-heading 10px (9px <478)
plus another in wp-custom-css
A plain rule loses; winning needs a sixth !important aimed over the top
of the other five. That buys 1px and makes the next person's job worse.
The fix is to delete four of those five, which is a decision about which
snippet owns the product card - not something to smuggle in here. */
}
@media (max-width: 767px) {
/* PRODUCT PAGE COLOUR SWATCHES. Nine 32x32 dots, laid out flex with a 12px
gap - so 44px centre to centre, horizontally and vertically both. A 44x44
hit area therefore tiles exactly: it eats the gaps and stops dead on the
neighbour's boundary, no overlap to argue about and no dead strip left
between dots. Verified by scanning elementFromPoint a pixel at a time
across a row (13-56, 57-100, 101-144, ...) and down a column (167-210,
then the second row from 211). Tap area goes from 1024px2 to 1936px2 and
nothing moves on screen.
::before, not ::after - .color-swatch already uses ::after for its 20px
inner disc. */
body.single-product .color-swatch-container .color-swatch::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
}
/* WISHLIST HEART ON PRODUCT CARDS. 30x30, and there are twenty of them on
a collection page - the most repeated undersized target on the site. It
sits alone in the card's top-right corner with no other control near it,
so the 44px area only ever takes space from the card link behind it, and
near the heart the heart is what you meant. Verified: HEART at 21px from
centre, CARDLINK at 23px - a clean boundary, no bleed.
Excluded at three-up. There the card is 115px wide, so 44px would be a
quarter of it and people reaching for the product would get the heart.
At that density the dot stays 30px, which is the honest trade: the
guideline exists to stop mis-taps, and applying it there would cause them.
::after, not ::before - the heart glyph is already drawn in ::before. */
body:not(.pm-cols-10) a.tinvwl_add_to_wishlist_button::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
}
/* NOT DONE: the length buttons (ul.bricks-variation-swatches li) measure
50x42 - two pixels under the 44px guideline. Expanding them upward runs
straight into the "find my size" button, which sits directly above and
already carries its own expander from this file; elementFromPoint at the
boundary returns .abx-fit-open, not the length. Two pixels on a target
that is already 50px wide is not worth making two controls fight over the
same row. Left as measured. */
}
/*
* Task 34 - Footer wordmark: vector mask instead of a 1024px raster.
*
* The footer mark is a masked block. Its mask was
* cropped-Abayas-Boutique-logo-2-1024x229-1.webp - 1024px wide, stretched to
* 1789 CSS px, which on a 2x screen is 3578 device pixels: a 3.49x upscale,
* and the reason the edges looked feathered. No larger copy of the wordmark
* exists in the media library; the file in use is itself a WordPress
* derivative that was re-uploaded as though it were an original.
*
* A mask only carries alpha, so the shape could be recovered rather than
* redrawn: the alpha channel was traced with marching squares at sub-pixel
* interpolation - 24 closed contours, simplified to 1081 points. Rasterised
* back to 1024x229 and diffed against the original, ink area agrees to within
* 0.22%, and the only disagreement is a sub-pixel band along the edges.
* Same letterforms, now with hard edges at any size.
*
* The path sits in a custom property so the prefixed and unprefixed masks
* share one copy of it rather than embedding it twice.
*
* Served as a FILE, not inline: these pages already carry 619KB of duplicated
* inline CSS and JS on every view, and this should not add to it.
*
* Still a trace of a 1024px source, not the original artwork. If the real
* vector ever turns up, swap the data URI below and change nothing else.
*
* Reversible: deactivate snippet. The original mask rule is left untouched.
*/
html body footer#brx-footer::after{
--abx-wordmark:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%20229%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23000%22%20d%3D%22M596.7%200L607%20-0.3L614%200.7L622%202.9L626%204.6L631%207.6L634%209.8L638.9%2015L642.3%2020L644.3%2025L645.5%2030L645.7%2033L645.5%2039L644.4%2044L642.4%2049L640.1%2053L635.5%2058L631%2061.3L625%2064.1L618%2065.4L611%2065.3L603%2063.3L597%2060.1L592.6%2056L589.9%2052L588.6%2049L588%2046L588%2043L588.8%2040L591%2037.2L596%2034.9L598%2034.8L602%2035.9L605%2038.4L606.3%2041L607.5%2050L608.9%2054L611.2%2057L615%2059.5L618%2060.3L620%2060.3L624%2059.1L627%2057.4L631.2%2053L634.3%2047L635.5%2041L635.2%2035L634.3%2031L632.5%2027L628.8%2022L625%2018.9L618%2015.6L614%2014.6L604%2013.7L594%2014.6L588%2015.8L574%2019.8L563%2023.8L544%2031.7L485%2059L483.9%2060L488.4%2071L491.4%2083L493.1%2098L493.3%20114L493.8%20115L501%20112.5L505%20111.8L511%20111.8L519%20113.6L524%20116L528%20118.7L534.2%20125L538.4%20132L540.4%20137L541.4%20141L542.1%20147L542.1%20151L541.3%20157L540.3%20161L538.3%20166L535.4%20171L533.2%20174L529%20178.2L525%20181.1L521%20183.2L514%20185.4L503%20185.5L498%20184.3L489%20179.7L485%20178.6L483%20178.8L480.4%20180L478%20181.7L474.9%20185L474.3%20183L474.1%2095L473.3%2084L472.2%2076L470%2066.4L469%2065.6L459%2069.2L452%2071.2L437%2074.3L432%2074.6L424%2074.3L416%2072.3L412%2070.4L408%2067.6L404.8%2064L402.6%2060L401.6%2056L401.7%2050L402.9%2046L404.7%2043L409%2038.5L415%2034.8L422%2032.6L428%2031.8L435%2031.7L449%2033.6L459%2036.8L465%2039.9L469%2042.6L473%2046.1L474%2046.4L522%2023.8L550%2011.9L564%206.9L579%202.7L589%200.8L596.7%200ZM423.8%2038L430%2037.2L438%2037.5L448%2039.8L452%2041.6L457%2044.9L461.3%2049L462.3%2051L451%2055.4L437%2059L428%2060L425%2060L420%2059.1L416%2057.3L412.8%2054L411.7%2051L411.8%2047L413.5%2044L416%2041.5L419%2039.6L423.8%2038ZM87.1%2071L90%2070.6L93%2070.7L95.5%2072L97.4%2075L98.3%2082L98.3%20114L98.7%20115L105%20112.8L111%20111.7L116%20111.8L120%20112.5L127%20115L133%20118.7L138.3%20124L142.4%20130L145.3%20137L146.3%20141L147.2%20149L146.3%20157L143.3%20166L140.4%20171L135%20177.2L128%20182.2L123%20184.4L120%20185.3L116%20185.7L107%20185.4L103%20184.3L94%20179.8L90%20178.6L88%20178.8L84%20180.7L80%20184.7L79.2%20184L79.1%2094L78.2%2089L76.5%2086L73%2083.3L69%2082L68.5%2081L68.5%2078L69%2076.8L77%2073.8L87.1%2071ZM770.6%2082L775%2081.6L778%2082.5L781%2084.5L783.5%2088L784.2%2090L784.5%2093L783.5%2097L781.4%20100L778%20102.4L775%20103.2L773%20103.2L769%20102.3L765.6%20100L762.8%2095L762.6%2091L764%2087.2L767%2083.7L770.6%2082ZM725.7%2098L728%2097.5L731%2097.9L733.7%20100L735.3%20104L735.5%20111L736%20111.6L750%20111.7L750.8%20113L750.8%20116L750%20116.6L737%20116.6L735.8%20117L735.5%20118L735.9%20173L737%20175.6L739%20177.3L743%20177L748%20173.8L749.9%20175L750.5%20176L748%20179.2L744%20182.4L740%20184.5L735%20185.7L727%20185.4L724%20184.3L720%20181.3L718%20178L716.8%20174L716.5%20171L716.3%20117L715%20116.6L707%20116.6L705.7%20116L705.8%20112L706.5%20111L717%20102.7L722%2099.7L725.7%2098ZM25.5%20112L35%20112L42%20113.6L47%20115.7L51%20118.4L56%20123.5L59.4%20130L60.4%20133L61.4%20141L61.5%20180L62.7%20196L64.9%20208L66.5%20213L68.9%20218L72%20221.5L75%20223.2L77%20223.6L81%20223.3L84%20220.9L86.4%20217L87.5%20213L88.1%20207L89.8%20203L92%20200.8L94%20199.6L99%20199.3L101%20199.7L103%20200.8L105.2%20203L106.6%20206L106.9%20210L105.3%20215L103.2%20218L97%20223.2L90%20226.4L81%20228.3L75%20228.2L70%20227.3L65%20225.4L61%20223.2L55.1%20218L52%20214L48.6%20208L45.8%20201L44.7%20197L43.5%20191L42.4%20180L42%20179.7L35%20183.3L29%20185.3L19%20185.7L15%20185.3L9%20183.2L5.5%20181L1.7%20177L-0.4%20172L-0.3%20165L1.5%20160L5.3%20155L11%20150.7L17%20147.8L27%20144.5L40%20141.3L42.3%20140L42.2%20133L41.3%20126L39.4%20121L36%20117.7L33%20117.2L30%20117.7L28%20119.3L26.5%20122L25.2%20130L24%20132L21%20134.5L18%20135.5L14%20135.3L10%20133.2L7.6%20130L6.8%20127L6.9%20125L7.7%20122L10%20118.8L14%20115.7L18%20113.7L25.5%20112ZM176.6%20112L182%20111.9L187%20112.5L194%20114.6L198%20116.7L202%20119.7L205.1%20123L207.1%20126L209.4%20131L210.5%20136L211.1%20142L211.1%20165L211.8%20172L212.6%20175L215%20178.8L217%20180.3L221%20181.2L221.6%20182L221.6%20185L221%20185.7L193%20185.8L191.8%20185L191.8%20181L191%20179.8L185%20183.2L179%20185.2L174%20185.8L166%20185.4L161%20184.1L157%20182.2L153.1%20179L150.9%20176L149.5%20172L149.7%20164L151.8%20159L156%20154.1L161%20150.6L167%20147.7L176%20144.6L190%20141.2L191.8%20140L191.4%20129L190.3%20124L188.3%20120L187%20118.7L185%20117.6L181%20117.5L178%20119L175.8%20123L175.4%20128L174.3%20131L171%20134.3L168%20135.5L163%20135.2L160%20133.5L157.8%20131L156.5%20127L156.7%20124L158%20121L159.6%20119L163.4%20116L166%20114.6L171%20112.8L176.6%20112ZM224.2%20112L263.5%20112L263.9%20113L263.8%20116L259.1%20118L257.7%20120L257.7%20126L259.8%20134L269%20157.7L270.2%20156L278.3%20134L280.6%20125L280.7%20121L279.9%20119L279%20117.8L274.3%20116L274.6%20112L298%20111.7L299.1%20113L299%20116L294%20117.6L292%20118.9L290%20121.1L286.9%20126L281.8%20138L260.3%20196L252.4%20213L249.2%20218L244.7%20223L240%20226.3L236%20227.4L233%20227.3L230%20226.2L226.7%20223L225.7%20221L225.3%20218L225.6%20215L226.6%20213L230%20209.5L232%20208.6L238%20208.1L241%20207.3L245%20205.3L248%20203.1L251.1%20200L255.2%20194L258.2%20188L258.8%20186L251.2%20165L237.4%20129L234.3%20123L231%20119L229%20117.6L224%20116.2L223.8%20113L224.2%20112ZM328.7%20112L335%20111.9L340%20112.6L347%20115L352%20117.9L355%20120.4L359.4%20126L362.2%20133L363.1%20138L363.4%20165L363.9%20171L365%20175L367.4%20179L369%20180.1L373%20181.2L373.9%20182L373.9%20185L373%20185.8L345%20185.8L344.3%20185L344%20179.8L337%20183.3L331%20185.3L327%20185.7L319%20185.5L314%20184.4L311%20183.2L307.5%20181L303.7%20177L301.7%20172L301.7%20165L302.6%20162L304.7%20158L309%20153.5L313%20150.8L319%20147.8L328%20144.7L342%20141.2L344.2%20140L343.4%20127L342.3%20123L340%20119.4L337%20117.6L334%20117.4L332%20117.9L329.5%20120L328.5%20122L327.1%20130L325%20132.8L323%20134.5L319%20135.6L315%20135L312%20133.3L309.6%20130L308.7%20127L308.8%20125L309.7%20122L312%20118.8L315.6%20116L318%20114.7L324%20112.7L328.7%20112ZM401.5%20112L410%20111.7L417%20112.6L428%20115.7L432.4%20118L432.5%20136L432%20137.4L430%20136.9L428%20131L424%20124.4L419%20119.7L415%20117.8L409%20116.6L406%20116.6L402%20117.8L398.6%20121L397.6%20123L397.5%20126L398.7%20130L400.8%20133L404%20136.1L424%20149.7L429.8%20155L433.5%20160L434.3%20162L435.4%20167L435.1%20171L433.3%20175L430.8%20178L427%20181.2L423%20183.3L417%20185.4L413%20186.3L406%20187.2L394%20186.4L389%20185.3L379%20182.1L377%20181L376.7%20180L376.7%20161L377%20159.9L378%20159.7L379%20160.2L380.7%20166L384.5%20173L388.1%20177L393%20180.3L399%20182.1L406%20182.2L412%20180.3L415%20177.6L416.3%20175L416.2%20171L415%20168.4L412.4%20165L407%20160.7L393%20151.3L386%20145.5L381.6%20140L379.7%20136L378.9%20133L378.7%20128L379.5%20125L383%20119.5L385%20117.7L390%20114.8L396%20112.8L401.5%20112ZM575%20112L582%20111.7L588%20112.9L593%20114.8L600%20119.4L605.3%20125L610.1%20133L612.4%20140L613.1%20145L613.2%20152L612.3%20158L610.4%20164L607.3%20170L602.4%20176L596%20181.2L590%20184.1L585%20185.4L577%20185.8L572%20185.1L566%20183L560%20179.4L554.3%20174L550.6%20169L547.8%20163L545.7%20155L545.5%20144L546.6%20138L548.9%20132L551.7%20127L556.7%20121L562%20116.8L568%20113.7L575%20112ZM615.7%20112L655.5%20112L656%20113L655.9%20116L655%20116.6L651%20117.7L649%20119.4L647.7%20121L645.8%20127L645.4%20133L645.4%20163L646%20168L648.5%20174L651%20176.5L653%20177.6L655%20178.3L658%20178.5L663%20177.4L667%20175.3L672.5%20171L673.4%20170L673.5%20169L673.5%20134L672.4%20125L671.4%20122L669%20118.6L667%20117.4L662.8%20116L663%20112.1L664%20111.7L703%20111.9L703.3%20116L698%20117.8L695.7%20120L693.7%20124L692.9%20128L692.5%20133L692.5%20163L693.6%20168L695.5%20171L699%20173.5L703.3%20175L703.3%20179L701%20180.3L693%20183.2L686%20185.2L682%20185.8L678%20185.5L676%20184.3L674.9%20183L673.6%20179L673%20178.2L669%20181.1L665%20183.3L659%20185.3L656%20185.7L646%20185.3L640%20183.2L636.4%20181L632.9%20178L629.9%20174L627.6%20169L626.8%20166L626.4%20162L626.2%20132L625.2%20125L624.2%20122L622%20118.8L620%20117.5L616%20116.6L615.6%20116L615.7%20112ZM774.5%20112L777%20111.9L779%20112.5L781.1%20114L782.3%20116L783.3%20124L783.3%20165L783.7%20171L784.8%20175L786.5%20178L789%20180.2L793%20181.2L793.8%20182L793.8%20185L793%20185.8L754%20185.8L753.4%20185L753.4%20182L754%20181.2L758%20180.3L760%20178.6L762.2%20175L763.4%20171L764.1%20161L764.1%20137L763.4%20131L762.4%20129L760%20125.9L758%20124.6L753.7%20123L753.5%20119L755%20117.7L763%20114.8L770%20112.7L774.5%20112ZM825.7%20112L834%20112L844%20114.7L851%20112.6L857%20111.9L860%20112.5L862.5%20115L863.5%20118L863.8%20123L863.8%20207L864.6%20213L865.7%20217L867.6%20220L869%20221.1L874.4%20223L874.5%20226L874%20227.2L835%20227.3L834.4%20227L834.3%20223L839%20221.4L840.7%20220L842.3%20218L844%20212.9L844.8%20203L844.7%20183L844%20182.5L840%20184.4L836%20185.4L832%20185.8L824%20185.4L817%20183.3L813%20181.2L806.6%20176L802.6%20171L798.7%20164L796.6%20157L796%20152L796%20146L796.8%20140L798.7%20134L800.6%20130L804%20124.6L811%20117.8L816%20114.8L819%20113.6L825.7%20112ZM870.8%20112L910.6%20112L911.1%20113L911%20116L906%20117.7L904%20119.4L902.8%20121L900.7%20128L900.4%20163L900.8%20167L902.4%20172L903.6%20174L906%20176.4L908%20177.5L910%20178.3L913%20178.5L918%20177.4L922%20175.4L927.5%20171L928.4%20170L928.5%20169L928.5%20134L928.1%20128L927.2%20124L925.3%20120L923%20117.8L917.9%20116L918%20112.4L919%20111.7L958%20111.9L958.3%20116L958%20116.5L954%20117.4L952%20118.6L950%20121.2L948.6%20125L947.5%20133L947.5%20163L948.6%20168L950.6%20171L954%20173.5L958.4%20175L958.3%20179L956%20180.3L948%20183.2L941%20185.2L937%20185.8L933%20185.5L931%20184.3L929.9%20183L928.7%20179L928%20178.2L924%20181.2L920%20183.3L914%20185.3L911%20185.7L901%20185.3L895%20183.2L891.4%20181L888%20178L885.6%20175L883.8%20172L881.8%20166L881.4%20162L881.3%20132L880.3%20125L879.3%20122L877%20118.7L875%20117.5L871%20116.5L870.6%20116L870.8%20112ZM989.3%20112L996%20111.7L1001%20112.6L1005%20113.7L1011%20116.7L1016%20120.8L1019.3%20125L1021.3%20129L1023%20136L1023.3%20139L1022.5%20142L1021%20143.3L1020%20143.6L980%20144L979.9%20150L980.7%20157L981.7%20161L984.7%20168L986.7%20171L990%20174.2L993%20176L996%20177.2L1002%20177.7L1005%20177.4L1008%20176.4L1010%20175.4L1015%20171.1L1019.3%20173L1018%20175.5L1013%20180.4L1008%20183.3L1001%20185.4L992%20185.7L988%20185.3L982%20183.3L975%20179.1L969.7%20174L966.8%20170L963.6%20164L961.5%20157L960.7%20152L960.7%20146L961.6%20140L963.8%20133L966.8%20127L971.6%20121L977%20116.5L982%20113.8L989.3%20112ZM111%20117L114%20116.6L117%20117.7L119.7%20120L122.1%20123L124.5%20128L126.2%20133L127.3%20138L128.2%20148L127.2%20160L125.2%20168L124%20171L121.2%20176L118.5%20179L116%20180.5L113%20181.2L110%20180.4L108%20179.3L103.7%20174L101.7%20170L99.8%20164L98.8%20159L98.3%20153L98.6%20140L100.6%20131L102.5%20126L105.6%20121L109%20117.8L111%20117ZM505.7%20117L509%20116.5L511%20117L514.1%20119L517.3%20123L520.2%20129L521.4%20133L522.3%20137L523.3%20146L523.3%20152L522.4%20160L521.3%20165L519.2%20171L516.4%20176L514.7%20178L512%20180.1L509%20181.2L505%20180.4L503%20179.1L498.9%20174L496.6%20169L494.8%20163L493.5%20154L493.8%20140L494.7%20135L496.8%20128L500.6%20121L503%20118.6L505.7%20117ZM577.3%20117L580%20116.6L583%20117.6L586%20120L588.3%20123L590.4%20127L592.2%20132L593.2%20136L594.3%20145L594.3%20153L593.3%20161L590.3%20171L588.2%20175L585.7%20178L583%20180.2L580%20181.2L578%20181.1L574%20179L570%20174L566.6%20166L564.9%20158L564.5%20153L564.7%20141L566.8%20131L568.7%20126L571.8%20121L574%20118.8L577.3%20117ZM827.6%20117L831%20116.7L834%20117.9L837.4%20121L839.4%20124L841.3%20128L843.2%20134L844.4%20140L844.8%20146L844.2%20159L842.3%20167L840.4%20172L837.2%20177L835.3%20179L833%20180.4L830%20181.2L827%20180.5L825%20179.4L821.7%20176L819.9%20173L816.6%20164L815.6%20159L814.8%20150L815.7%20138L817.6%20130L819.8%20125L822%20121.5L825%20118.4L827.6%20117ZM990.9%20117L994%20116.7L997%20117.6L999%20119.3L1001.2%20122L1003.3%20127L1004.2%20131L1004.6%20138L1004%20138.9L981%20138.9L980.4%20138L981.7%20130L984.5%20123L987%20119.5L989%20117.8L990.9%20117ZM39.4%20147L42%20146.4L42.3%20147L42.2%20173L41%20174.4L38%20176.4L33%20178.2L28%20178.1L23%20176.3L20.5%20174L19%20171L18.6%20166L20%20162.1L23.8%20157L28.6%20153L34%20149.6L39.4%20147ZM189.4%20147L191%20146.5L191.8%20147L191.8%20173L188%20176.2L183%20178.1L178%20178.2L173%20176.5L170.1%20174L168.6%20171L168.3%20166L169.7%20162L170.8%20160L176%20154.7L183.1%20150L189.4%20147ZM341.7%20147L343%20146.5L344.3%20147L344.2%20173L340%20176.4L335%20178.2L331%20178.3L325%20176.4L321.7%20173L320.6%20170L320.7%20165L322.6%20161L327%20155.9L331%20152.7L336%20149.6L341.7%20147Z%22%2F%3E%3C%2Fsvg%3E");
-webkit-mask-image:var(--abx-wordmark);
mask-image:var(--abx-wordmark);
-webkit-mask-size:100%;
mask-size:100%;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:50% 0%;
mask-position:50% 0%;
}
/*
* Abayas Boutique — quick add trigger: bar, not circle
*
* WHAT WENT WRONG: quick add v2 (snippet 39086) shipped its own trigger as a
* 44px white circle with a "+" in it, pinned bottom-right of the image. The
* card design already had a trigger — a full-width white bar reading QUICK ADD
* across the bottom of the image (.abx-qa-btn). I introduced a second visual
* language on the same component instead of matching the one that was there.
*
* WHAT THIS DOES: reshapes the v2 trigger into that same bar. Purely visual —
* the button, its behaviour and the size picker are untouched, so nothing
* about how quick add works changes.
*
* THE LABEL: the button's text node is "+" and lives in the JS. Rather than
* edit the working script to change one string, the glyph is collapsed and the
* word is drawn with ::after. The button already carries aria-label="Quick
* add", so what a screen reader announces is unchanged and correct.
*
* ROLLBACK: deactivate. The circle comes back.
*/
/* The bar sits flush across the bottom of the image, not floating in a corner. */
html body .ab-safe-product-card .abg-qa-btn {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
padding: 14px 10px !important;
border: 0 !important;
border-radius: 0 !important;
background: rgba(255, 255, 255, .94) !important;
color: #141310 !important;
display: block !important;
text-align: center !important;
transform: none !important;
/* Collapse the "+" glyph without removing it from the accessibility tree. */
font-size: 0 !important;
line-height: 0 !important;
}
html body .ab-safe-product-card .abg-qa-btn::after {
content: "Quick add";
display: block;
font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: .16em;
line-height: 1;
text-transform: uppercase;
}
html body .ab-safe-product-card .abg-qa-btn:hover {
background: #fff !important;
}
/* Keep the existing reveal: hidden until the card is hovered or focused. */
html body .ab-safe-product-card .abg-qa-btn {
opacity: 0;
transition: opacity 180ms ease, background 180ms ease;
}
html body .ab-safe-product-card:hover .abg-qa-btn,
html body .ab-safe-product-card:focus-within .abg-qa-btn,
html body .ab-safe-product-card .abg-qa-btn:focus-visible {
opacity: 1;
}
/*
* Touch devices have no hover, so the bar would never appear. Show it always.
* A full-width bar is also a far easier tap target than a 44px circle sitting
* in the corner next to the wishlist heart.
*/
@media (hover: none) {
html body .ab-safe-product-card .abg-qa-btn {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
html body .ab-safe-product-card .abg-qa-btn {
transition: none;
}
}
/*
* ONE OWNER PER COMPONENT.
*
* Two quick-add systems were rendering on the same card at the same time:
* the legacy .abx-qa block (a lowercase "quick add" label plus an always-
* expanded size row) and the v2 trigger above. On hover they drew on top of
* each other, which is what you saw.
*
* The legacy block is hidden rather than deleted. Reasons for keeping v2 as
* the survivor: it mounts on all 36 cards where the legacy one reached only
* 24, and it reads live stock per size instead of pre-selecting one.
*
* Hidden with CSS, not removed, so this is reversible in one toggle and no
* working script is edited to make it happen.
*/
/*
* Repeated class selectors, not decoration: the legacy block is revealed by
* a :hover rule that already carries !important, and a pseudo-class counts
* the same as a class for specificity. Matching it once was not enough to
* win, so the class is repeated to outrank it without resorting to editing
* the rule that puts it there.
*/
html body .ab-safe-product-card .abx-qa.abx-qa.abx-qa,
html body .ab-safe-product-card:hover .abx-qa.abx-qa.abx-qa,
html body .ab-safe-product-card:focus-within .abx-qa.abx-qa.abx-qa {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ---------------------------------------------------------------------------
* TEMPORARY — quick add held off, 24 Aug 2026.
*
* WHY: the quick-add scripts were flagging multi-length abayas as one-size and
* pre-picking the SHORTEST length. 10 of 10 products checked were 4-5 lengths
* (52/54/56/58/60) and every one had the shortest pre-selected, so a tap on a
* phone added the wrong size silently.
*
* Snippets 38284 (ABX - Homepage Quick Add to Basket) and 38632 (quick add for
* one-size items) are now DEACTIVATED, which removes the add mechanism.
* Snippet 38637 (quick add on touch devices) is left active because it styles
* other parts of the product card, but its @media (hover: none) rules would
* still reveal the now-inert trigger on phones. This rule keeps it hidden.
*
* REMOVE THIS SNIPPET when the size-picker quick add ships.
* ------------------------------------------------------------------------- */
html body .ab-safe-quick-trigger {
display: none !important;
}
/* ---------------------------------------------------------------------------
* Abayas Boutique — homepage hero text entrance
* Scope: the hero copy block (#brxe-rrxdit) only.
*
* Continues the wordmark's entrance so the hero resolves as one movement
* rather than one animated element sitting above three static ones:
*
* wordmark ............ 150ms (existing, in the hero wordmark snippet)
* "summer occasions" .. 350ms
* "wedding season." ... 490ms
* "shop the collection" 630ms
*
* Same 18-22px rise, same cubic-bezier(.16,.84,.44,1) soft landing, same
* ~900ms duration. The whole sequence settles inside 1.6s.
*
* fill-mode is BACKWARDS, not both, on purpose. Backwards holds the opening
* keyframe only during the delay; once the animation ends the elements revert
* to their own styles. So if the animation never runs — CSS arrives late, an
* odd browser, print — the copy is simply visible. Nothing can leave the hero
* text stuck at opacity 0.
*
* The children are unclassed divs inside a Bricks rich-text field, so they are
* addressed by position. If the hero copy is re-ordered in Bricks the stagger
* order follows the new order, which is the behaviour you want anyway.
*
* Rollback: deactivate this snippet. CSS only, no layout change — measured
* heights are identical with and without it (54 / 14.5 / 26.6px).
* ------------------------------------------------------------------------- */
@keyframes abg-rise-in {
from {
opacity: 0;
transform: translateY(18px);
}
}
html body #brxe-rrxdit > div > *:nth-child(1) {
animation: abg-rise-in 900ms cubic-bezier(.16, .84, .44, 1) 350ms backwards;
}
html body #brxe-rrxdit > div > *:nth-child(2) {
animation: abg-rise-in 900ms cubic-bezier(.16, .84, .44, 1) 490ms backwards;
}
html body #brxe-rrxdit > div > *:nth-child(3) {
animation: abg-rise-in 900ms cubic-bezier(.16, .84, .44, 1) 630ms backwards;
}
@media (prefers-reduced-motion: reduce) {
html body #brxe-rrxdit > div > * {
animation: none !important;
}
}
/* ---------------------------------------------------------------------------
* Abayas Boutique — homepage hero wordmark
* Scope: the homepage hero section (#brxe-igxabf) only.
*
* WHAT WAS WRONG
* The wordmark is a ::before on the hero section, painted white by
* filter: brightness(0) invert(1). It was positioned at top:-13px / left:-8px
* with 163px of slack on the right — so it hung off the top and left edges
* (clipped by the hero's overflow:hidden) and sat lopsided.
*
* The bigger cause: the hero used background-size:100%, which fits the photo
* to the width and letterboxes it vertically. Measured at a 1004px viewport,
* the photo was 484px tall inside an 865px hero, leaving a 190px WHITE band
* across the top — and all 197.8px of the white wordmark sat inside that
* band. White on white: the wordmark was completely invisible, and what
* looked like an empty gap above the hero was the logo.
* At 1414px roughly the top 40% of it was still lost in the white band,
* which is why the visible remnant looked jammed into the corner.
*
* WHAT THIS DOES
* 1. background-size: cover — the photo now fills the hero, so there is no
* white band and the whole wordmark lands on the image. This does crop
* the photo horizontally (about 190px each side at 1414px); the model
* stays centred and in frame.
* 2. Centres the wordmark with left:0 / right:0 / margin-inline:auto instead
* of the negative left offset, and caps it at min(78%, 1200px) so it
* cannot grow without limit on wide displays.
* 3. height:auto + aspect-ratio 1024/229 (the logo file's own ratio) so the
* box always matches the image exactly instead of being derived from a
* fixed top/bottom pair that stopped matching at other viewport sizes.
*
* Measured after, at 1414px / 865px hero: wordmark 1102.9 x 246.6, top 25.9,
* 155.5px clear on each side, 32.7px above the "summer occasions" heading,
* nothing clipped. At 1004px: 783 x 175, 110px each side, fully on the photo.
*
* The doubled #id and !important are required — Bricks emits its own
* !important rule for this pseudo-element in an inline