/* ==========================================================================
PrimatePet — P3 SHOP / CATEGORY / SEARCH
--------------------------------------------------------------------------
Every value is MEASURED off the live source over CDP:
verify/p3-source-measure.json shop · shop/page/2 · root cat · nested cat ·
product search, each at 1440 / 820 / 390
verify/p3-source-deep.json component internals at 1440 (getBoundingClientRect
+ getComputedStyle on 70 nodes)
verify/p3-source-ladder.json every breakpoint edge, ONE FULL RELOAD per width
verify/p3-source-ladder2.json the 3->2 and 2->1 column edges
`_shots/*-1440.png` were NOT used — the overseer measured them stale/thin.
MEASURED LADDER (the CSS rules were then confirmed in source-cdp/merged.css,
because the rendered numbers disagreed at the exact edges: an emulated
viewport of 991.3px matches NEITHER `max-width:991px` NOR `min-width:992px`,
so 991 rendered 3-up and 575 fell through to Woo's own 48% fallback):
@media (min-width:768px) .columns-3 li {33.33%}
@media (min-width:576px) and (max-width:991px) li {50% !important}
@media (max-width:575px) li {100% !important}
columns >=992 : 3 576-991 : 2 <=575 : 1
container >=1200: 1330px 992-1199: 960px <=991 : 100%
sidebar >=1200: 25% SAME ROW, LEFT (row-reverse, last in the DOM)
992-1199: 100% below · 576-991: 50% below · <=575: 100% below
⛔ WHY THE SELECTORS ARE LONG.
WooCommerce's own `woocommerce-general.css` / `woocommerce-layout.css` are
NOT dequeued (the source kept them too), and they ship rules at (0,4,2) such as
.woocommerce ul.products.columns-3 li.product { width: 30.75% }
.woocommerce ul.products li.product .onsale { top:0; right:0; margin:-.5em -.5em 0 0 }
.woocommerce ul.products li.product a img { margin: 0 0 1em }
.woocommerce ul.products li.product .price { font-size:.857em; margin-bottom:.5em }
.woocommerce nav.woocommerce-pagination ul { border:1px solid #cfc8d8 }
A (0,1,0) or (0,3,1) rule of ours loses to those outright, and a (0,4,2) TIE
would be decided by source order — which is not safe here, because P1's
`pp_style()` INLINES this sheet into `wp_head` on the edge-cached temp host
(Hostinger's x-hcdn caches theme CSS by path and ignores `?ver`), so our
position in the cascade is not fixed. So the competing rules use
`body.pp-shop ul.products.pp-shop__grid li.product …` = (0,5,3) and win on
specificity alone, whatever the order. `!important` is used only on the three
column widths, where THE SOURCE USES IT TOO.
========================================================================== */
/* ==========================================================================
1. PAGE SHELL + THE SIDEBAR SPLIT
========================================================================== */
/* `.pp-container` already supplies the 15px gutters; the row cancels them so the
two columns can re-add their own, which is how the source lands #primary at
exactly 997.5 and #secondary at 332.5 inside a 1330 container. */
.pp-shop__page { padding-top: 60px; padding-bottom: 90px; }
.pp-shop__wrap {
display: flex;
flex-wrap: wrap;
margin-left: calc(var(--pp-gutter) * -1);
margin-right: calc(var(--pp-gutter) * -1);
}
.pp-shop__main,
.pp-shop__sidebar {
width: 100%;
min-width: 0;
padding-left: var(--pp-gutter);
padding-right: var(--pp-gutter);
}
/* MEASURED: 576-991 the source gives the stacked sidebar 50%. It is reproduced
rather than "improved" (work-from-source), and it is the one line to change if
the orchestrator would rather it span the row — see OPEN QUESTIONS. */
@media (min-width: 576px) and (max-width: 991px) {
.pp-shop__sidebar { width: 50%; }
}
/* ⚠️ CONTAINER WIDTH BELOW 992 — P1 NOW OWNS THIS. No rule here.
P3 measured the delta (build `.pp-container` 720 vs source `.container` 820 at
vw 820, which cascaded -100px into every child: card -50, sidebar -50,
widget -50) and shipped a local
`.pp-shop__page > .pp-container { max-width: 100% }`. P1 has since hoisted the
fix into `pp-tokens.css` as
`@media (max-width: 991px) { .pp-container { max-width: 100% } }`, with the
Bootstrap ladder preserved for `.pp-woo > .pp-container`. The local override
is REMOVED so there is exactly one owner and two rules are not fighting.
⚠️ P8 measured the same defect on content pages and found the 576-767 band
worse still (540px against a viewport-bound source). P3 re-measured the
archives in that band after this change — see the return. */
/* >=1200: side by side, and `row-reverse` puts the sidebar LEFT while it stays
LAST in the DOM — so the grid is first for crawlers, for reading order and for
the keyboard, exactly as the source does it. */
@media (min-width: 1200px) {
.pp-shop__wrap { flex-direction: row-reverse; align-items: flex-start; }
.pp-shop__main { width: 75%; }
.pp-shop__sidebar { width: 25%; }
}
/* ==========================================================================
2. TOOLBAR — result count + the 6-option sort pill
MEASURED @1440: bar 967.5x64, flex, align-items:center, margin 0 0 40px
count wrapper margin 0 30px 0 0, flex-grow 1
ordering 2px solid #FEDA46, radius 64px, min-height 64
select.orderby display:none (custom pill painted over it)
@390 the bar measured 114 tall: the two stack, count 100%
========================================================================== */
.pp-shop__topbar {
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
z-index: 11;
margin: 0 0 40px;
}
.pp-shop__topbar div.woocommerce-result-count {
flex-grow: 1;
margin: 0 30px 0 0;
}
.pp-shop__topbar p.woocommerce-result-count,
.pp-shop__topbar .woocommerce-result-count {
float: none;
margin: 0;
font-family: var(--pp-font);
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: var(--pp-primary);
text-transform: capitalize;
}
.pp-shop__topbar .woocommerce-topbar-ordering {
position: relative;
min-height: 64px;
border: 2px solid var(--pp-accent);
border-radius: 64px;
}
.pp-shop__topbar .woocommerce-ordering {
float: none;
margin: 0;
position: relative;
}
/* JS-off: the native control plus the real submit button in loop/orderby.php. */
.pp-orderby .orderby {
font-family: var(--pp-font);
font-size: 16px;
color: var(--pp-primary);
background: transparent;
border: 0;
padding: 17px 24px;
max-width: 100%;
cursor: pointer;
}
.pp-orderby__go {
font-family: var(--pp-font);
font-size: 14px;
font-weight: 700;
padding: 0 18px;
margin-right: 8px;
background: var(--pp-accent);
color: var(--pp-primary);
border: 0;
border-radius: 64px;
min-height: 40px;
cursor: pointer;
}
/* Once the custom dropdown is live, both of the above disappear. */
.pp-orderby--ready .orderby,
.pp-orderby--ready .pp-orderby__go { display: none; }
.pp-orderby__ui { position: relative; }
.pp-orderby__current {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 60px;
padding: 0 12px 0 28px;
background: transparent;
border: 0;
font-family: var(--pp-font);
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--pp-primary);
text-align: left;
white-space: nowrap;
cursor: pointer;
}
.pp-orderby__label { margin-right: 14px; }
/* MEASURED: 36px circle, #FEDA46, flex-centred, glyph 15px/700. The source used
the `Caseicon` font; this build ships Anybody + DynaPuff only, so the chevron
is drawn with borders. */
.pp-orderby__caret {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--pp-accent);
position: relative;
}
.pp-orderby__caret::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
border-right: 2px solid var(--pp-primary);
border-bottom: 2px solid var(--pp-primary);
transform: translate(-50%, -70%) rotate(45deg);
}
.pp-orderby__ui.is-open .pp-orderby__caret::before {
transform: translate(-50%, -30%) rotate(-135deg);
}
.pp-orderby__list {
position: absolute;
top: calc(100% + 14px);
left: -2px;
right: -2px;
margin: 0;
padding: 10px 0;
list-style: none;
background: #fff;
box-shadow: 0 1px 72px 0 rgba(0, 0, 0, 0.08);
z-index: 30;
display: none;
}
.pp-orderby__ui.is-open .pp-orderby__list { display: block; }
.pp-orderby__opt {
padding: 8px 28px;
font-family: var(--pp-font);
font-size: 16px;
line-height: 26px;
color: var(--pp-body);
white-space: nowrap;
cursor: pointer;
}
.pp-orderby__opt:hover,
.pp-orderby__opt:focus { color: var(--pp-brand); outline: none; }
.pp-orderby__opt.is-selected { color: var(--pp-brand); font-weight: 600; }
@media (max-width: 575px) {
.pp-shop__topbar div.woocommerce-result-count { width: 100%; margin: 0 0 20px; }
.pp-shop__topbar .woocommerce-topbar-ordering { width: 100%; }
}
/* ==========================================================================
3. THE GRID
MEASURED @1440: ul 1007.5 at x=377.5 inside a 967.5 content box -> margin 0 -20px
li 335.8 (33.33%), padding 0 15px, margin 0 0 47px
row tops 733 / 1300.1 / 1891.6 and the first card is 520.1 tall,
i.e. cards do NOT stretch to the row height -> align-items:flex-start
========================================================================== */
body.pp-shop ul.products.pp-shop__grid,
.pp-searchres ul.products.pp-shop__grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin: 0 -20px;
padding: 0;
list-style: none;
}
body.pp-shop ul.products.pp-shop__grid::before,
body.pp-shop ul.products.pp-shop__grid::after { content: none; display: none; }
body.pp-shop ul.products.pp-shop__grid li.product,
.pp-searchres ul.products.pp-shop__grid li.product {
display: block;
float: none;
clear: none;
width: 100% !important; /* <=575 — the source uses !important here too */
margin: 0 0 47px;
padding: 0 15px;
position: relative;
}
@media (min-width: 576px) {
body.pp-shop ul.products.pp-shop__grid li.product,
.pp-searchres ul.products.pp-shop__grid li.product { width: 50% !important; }
}
@media (min-width: 992px) {
body.pp-shop ul.products.pp-shop__grid li.product,
.pp-searchres ul.products.pp-shop__grid li.product { width: 33.3333% !important; }
}
/* ---- Woo base-CSS corrections inside a card (see the header note) ---- */
/* Woo adds `margin:0 0 1em` to any image in a product card; the measured source
frame is exactly image + 30px padding + border, with no extra gap. */
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__link img,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__link img { margin: 0; }
/* SALE BADGE — POSITION ONLY. The type is P1's again.
P3 measured the badge text painting at **13.712px** (= 16 x 0.857, i.e. Woo's
own `.woocommerce span.onsale { font-size:.857em }` at (0,2,1) beating
`.pp-card__badge { font-size: 18px }` at (0,1,0)) and over-rode the type here.
P1 has since fixed that in `pp-base.css` — 18px on `rgb(45,227,50)`, together
with `.button.alt` and a stray Woo card-image margin — so the type
declarations are REMOVED from this file.
What STAYS is the loop-specific POSITION fix, which P1 cannot out-specify from
a single-class rule: Woo pins the badge to the corner with
`.woocommerce ul.products li.product .onsale { top:0; right:0;
margin:-.5em -.5em 0 0 }` at (0,4,2). MEASURED target: top 20 / right 20,
68x68, radius 50%. Re-verified after the trim — see the return; had the badge
regressed to 13.712px the type rules would have come back. */
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__badge,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__badge {
top: 20px;
right: 20px;
left: auto;
bottom: auto;
margin: 0;
}
/* ==========================================================================
PRICE — THREE SELECTOR TRAPS, all three MEASURED on this build, all fixed.
--------------------------------------------------------------------------
TRAP 1 — THERE IS NO `.price` WRAPPER IN THE LOOP.
Caught by CDP-diffing the build against the source: the probe for
`.pp-card__price .price` reported `src=ok bld=-`. P1's card prints
`$product->get_price_html()` straight out, and that returns
…
…
with NO enclosing ``. The SOURCE has one only because its
theme wrapped the call itself (Woo's `woocommerce_template_loop_price()` does
that). So every `.pp-card__price .price …` rule was a silent no-op here.
TRAP 2 — THERE IS NO `` ON THE LOOP PATH IN WooCommerce 11.
Found by P1 and confirmed here: WC 11.2 emits `.woocommerce-Price-amount`
bare in the loop. (⚠️ It DOES still emit `` on the PDP price path — P4
measured that — so these are genuinely different markups from the same WC
version. The source runs WC 9.7.3, where BOTH paths have ``, which is why
a selector copied off the source capture looks right and does nothing.)
TRAP 3 — WooCommerce OUT-SPECIFIES A SHORT SELECTOR ON `del`.
`.woocommerce ul.products li.product .price del { color:inherit; opacity:.5 }`
is (0,4,3); a `body.pp-shop .pp-card__price del` rule is (0,2,2) and loses, so
the struck original would render at half opacity.
So the rules below (a) never REQUIRE `.price` or `bdi` but still match them if
present, (b) target `.woocommerce-Price-amount`, and (c) carry the full
`body.pp-shop ul.products.pp-shop__grid li.product …` prefix = (0,5,3)+ so
they win on specificity alone — our sheet is INLINED into wp_head on the
edge-cached temp host, so its position in the cascade is not ours to control.
⛔⛔ CORRECTION — MY EARLIER READING SAMPLED NON-PAINTING CONTAINERS.
P1 and P3 disagreed on the card price size. Neither mis-measured: we were
reading DIFFERENT NODES. Settled with P1's technique, adopted here — dump
every node in the price subtree with its computed style AND a `Range` glyph
box over its own direct text nodes, so you can see which element actually
paints characters. Run `scripts/pp_p3_price_paint.py`; data in
`verify/p3-price-paint.json`.
MEASURED on the live source, IDENTICAL on /shop/ and on
/pets-category/marmoset-monkey/ (so index and archive agree):
node computed paints
div.woocommerce-product--price 16px/400/#555 nothing
span.price 18px/700/#FA441D nothing
del 18px/500/#000 nothing
del > .woocommerce-Price-amount 18px/500/#000 nothing
del > ... > bdi 16px/700/rgb(130,130,130) "2,000.00"
ins 18px/700/#FA441D nothing
ins > .woocommerce-Price-amount 18px/700/#FA441D nothing
ins > ... > bdi 26px/700/rgb(250,68,29) "1,000.00"
So `span.price` IS 18px/700/#FA441D — that reading was correct — but it
governs only whitespace. The VISIBLE price is the `bdi` at **26px/700 brand**;
the VISIBLE strike is the `bdi` at **16px/700 rgb(130,130,130)**.
Consequences, stated plainly:
· P1's `--pp-fs-card-price: 26px` + brand is RIGHT, on BOTH surfaces. The
token stays. My "26 is just the row height" reading was half right: the
row is 26 tall BECAUSE the painting bdi is 26px.
· ⛔ I also owe the BRIEF a correction. I wrote that its "struck 16px
#828282 w500" was "wrong on all three counts". The painted strike is
**16px** and `rgb(130,130,130)` = **#828282** — the brief was right on
size AND colour; only the weight differs (painted 700, not 500).
`--pp-strike: #828282` is therefore the correct token, and it is used below.
WHY OUR SELECTORS CANNOT BE COPIED OFF THE SOURCE CAPTURE
The source runs WC 9.7.3 and wraps the call itself, so it has BOTH a
`span.price` and a ``. WC 11.2's LOOP path emits NEITHER: P1's card
prints `get_price_html()` straight out, giving
`...` with no
`.price` wrapper and no `bdi` — confirmed live, both counts are 0 on every
archive. ⚠️ WC 11.2 DOES still emit `` on the PDP price path (P4
measured that), so one WC version ships two different price markups. The rules
below set the PAINTING node in whichever markup is present: `bdi` when there
is one, `.woocommerce-Price-amount` when there is not.
⚠️ REFINEMENT TO THE GLYPH-BOX METHOD, worth knowing before reusing it:
a `Range` client rect is NOT clipped by `overflow`/`clip`, so a visually
hidden `.screen-reader-text` reports a 277x18 glyph box and reads as
"PAINTS". Its own `getBoundingClientRect()` is 1x1 — that is the
disambiguator. Measured here: Woo's two `.screen-reader-text` price duplicates
are correctly hidden at 1x1 by the clip rule further down.
========================================================================== */
/* ==========================================================================
1. PAGE SHELL + THE SIDEBAR SPLIT
========================================================================== */
/* `.pp-container` already supplies the 15px gutters; the row cancels them so the
two columns can re-add their own, which is how the source lands #primary at
exactly 997.5 and #secondary at 332.5 inside a 1330 container. */
.pp-shop__page { padding-top: 60px; padding-bottom: 90px; }
.pp-shop__wrap {
display: flex;
flex-wrap: wrap;
margin-left: calc(var(--pp-gutter) * -1);
margin-right: calc(var(--pp-gutter) * -1);
}
.pp-shop__main,
.pp-shop__sidebar {
width: 100%;
min-width: 0;
padding-left: var(--pp-gutter);
padding-right: var(--pp-gutter);
}
/* MEASURED: 576-991 the source gives the stacked sidebar 50%. It is reproduced
rather than "improved" (work-from-source), and it is the one line to change if
the orchestrator would rather it span the row — see OPEN QUESTIONS. */
@media (min-width: 576px) and (max-width: 991px) {
.pp-shop__sidebar { width: 50%; }
}
/* ⚠️ CONTAINER WIDTH BELOW 992 — P1 NOW OWNS THIS. No rule here.
P3 measured the delta (build `.pp-container` 720 vs source `.container` 820 at
vw 820, which cascaded -100px into every child: card -50, sidebar -50,
widget -50) and shipped a local
`.pp-shop__page > .pp-container { max-width: 100% }`. P1 has since hoisted the
fix into `pp-tokens.css` as
`@media (max-width: 991px) { .pp-container { max-width: 100% } }`, with the
Bootstrap ladder preserved for `.pp-woo > .pp-container`. The local override
is REMOVED so there is exactly one owner and two rules are not fighting.
⚠️ P8 measured the same defect on content pages and found the 576-767 band
worse still (540px against a viewport-bound source). P3 re-measured the
archives in that band after this change — see the return. */
/* >=1200: side by side, and `row-reverse` puts the sidebar LEFT while it stays
LAST in the DOM — so the grid is first for crawlers, for reading order and for
the keyboard, exactly as the source does it. */
@media (min-width: 1200px) {
.pp-shop__wrap { flex-direction: row-reverse; align-items: flex-start; }
.pp-shop__main { width: 75%; }
.pp-shop__sidebar { width: 25%; }
}
/* ==========================================================================
2. TOOLBAR — result count + the 6-option sort pill
MEASURED @1440: bar 967.5x64, flex, align-items:center, margin 0 0 40px
count wrapper margin 0 30px 0 0, flex-grow 1
ordering 2px solid #FEDA46, radius 64px, min-height 64
select.orderby display:none (custom pill painted over it)
@390 the bar measured 114 tall: the two stack, count 100%
========================================================================== */
.pp-shop__topbar {
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
z-index: 11;
margin: 0 0 40px;
}
.pp-shop__topbar div.woocommerce-result-count {
flex-grow: 1;
margin: 0 30px 0 0;
}
.pp-shop__topbar p.woocommerce-result-count,
.pp-shop__topbar .woocommerce-result-count {
float: none;
margin: 0;
font-family: var(--pp-font);
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: var(--pp-primary);
text-transform: capitalize;
}
.pp-shop__topbar .woocommerce-topbar-ordering {
position: relative;
min-height: 64px;
border: 2px solid var(--pp-accent);
border-radius: 64px;
}
.pp-shop__topbar .woocommerce-ordering {
float: none;
margin: 0;
position: relative;
}
/* JS-off: the native control plus the real submit button in loop/orderby.php. */
.pp-orderby .orderby {
font-family: var(--pp-font);
font-size: 16px;
color: var(--pp-primary);
background: transparent;
border: 0;
padding: 17px 24px;
max-width: 100%;
cursor: pointer;
}
.pp-orderby__go {
font-family: var(--pp-font);
font-size: 14px;
font-weight: 700;
padding: 0 18px;
margin-right: 8px;
background: var(--pp-accent);
color: var(--pp-primary);
border: 0;
border-radius: 64px;
min-height: 40px;
cursor: pointer;
}
/* Once the custom dropdown is live, both of the above disappear. */
.pp-orderby--ready .orderby,
.pp-orderby--ready .pp-orderby__go { display: none; }
.pp-orderby__ui { position: relative; }
.pp-orderby__current {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 60px;
padding: 0 12px 0 28px;
background: transparent;
border: 0;
font-family: var(--pp-font);
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--pp-primary);
text-align: left;
white-space: nowrap;
cursor: pointer;
}
.pp-orderby__label { margin-right: 14px; }
/* MEASURED: 36px circle, #FEDA46, flex-centred, glyph 15px/700. The source used
the `Caseicon` font; this build ships Anybody + DynaPuff only, so the chevron
is drawn with borders. */
.pp-orderby__caret {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--pp-accent);
position: relative;
}
.pp-orderby__caret::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
border-right: 2px solid var(--pp-primary);
border-bottom: 2px solid var(--pp-primary);
transform: translate(-50%, -70%) rotate(45deg);
}
.pp-orderby__ui.is-open .pp-orderby__caret::before {
transform: translate(-50%, -30%) rotate(-135deg);
}
.pp-orderby__list {
position: absolute;
top: calc(100% + 14px);
left: -2px;
right: -2px;
margin: 0;
padding: 10px 0;
list-style: none;
background: #fff;
box-shadow: 0 1px 72px 0 rgba(0, 0, 0, 0.08);
z-index: 30;
display: none;
}
.pp-orderby__ui.is-open .pp-orderby__list { display: block; }
.pp-orderby__opt {
padding: 8px 28px;
font-family: var(--pp-font);
font-size: 16px;
line-height: 26px;
color: var(--pp-body);
white-space: nowrap;
cursor: pointer;
}
.pp-orderby__opt:hover,
.pp-orderby__opt:focus { color: var(--pp-brand); outline: none; }
.pp-orderby__opt.is-selected { color: var(--pp-brand); font-weight: 600; }
@media (max-width: 575px) {
.pp-shop__topbar div.woocommerce-result-count { width: 100%; margin: 0 0 20px; }
.pp-shop__topbar .woocommerce-topbar-ordering { width: 100%; }
}
/* ==========================================================================
3. THE GRID
MEASURED @1440: ul 1007.5 at x=377.5 inside a 967.5 content box -> margin 0 -20px
li 335.8 (33.33%), padding 0 15px, margin 0 0 47px
row tops 733 / 1300.1 / 1891.6 and the first card is 520.1 tall,
i.e. cards do NOT stretch to the row height -> align-items:flex-start
========================================================================== */
body.pp-shop ul.products.pp-shop__grid,
.pp-searchres ul.products.pp-shop__grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin: 0 -20px;
padding: 0;
list-style: none;
}
body.pp-shop ul.products.pp-shop__grid::before,
body.pp-shop ul.products.pp-shop__grid::after { content: none; display: none; }
body.pp-shop ul.products.pp-shop__grid li.product,
.pp-searchres ul.products.pp-shop__grid li.product {
display: block;
float: none;
clear: none;
width: 100% !important; /* <=575 — the source uses !important here too */
margin: 0 0 47px;
padding: 0 15px;
position: relative;
}
@media (min-width: 576px) {
body.pp-shop ul.products.pp-shop__grid li.product,
.pp-searchres ul.products.pp-shop__grid li.product { width: 50% !important; }
}
@media (min-width: 992px) {
body.pp-shop ul.products.pp-shop__grid li.product,
.pp-searchres ul.products.pp-shop__grid li.product { width: 33.3333% !important; }
}
/* ---- Woo base-CSS corrections inside a card (see the header note) ---- */
/* Woo adds `margin:0 0 1em` to any image in a product card; the measured source
frame is exactly image + 30px padding + border, with no extra gap. */
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__link img,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__link img { margin: 0; }
/* SALE BADGE — POSITION ONLY. The type is P1's again.
P3 measured the badge text painting at **13.712px** (= 16 x 0.857, i.e. Woo's
own `.woocommerce span.onsale { font-size:.857em }` at (0,2,1) beating
`.pp-card__badge { font-size: 18px }` at (0,1,0)) and over-rode the type here.
P1 has since fixed that in `pp-base.css` — 18px on `rgb(45,227,50)`, together
with `.button.alt` and a stray Woo card-image margin — so the type
declarations are REMOVED from this file.
What STAYS is the loop-specific POSITION fix, which P1 cannot out-specify from
a single-class rule: Woo pins the badge to the corner with
`.woocommerce ul.products li.product .onsale { top:0; right:0;
margin:-.5em -.5em 0 0 }` at (0,4,2). MEASURED target: top 20 / right 20,
68x68, radius 50%. Re-verified after the trim — see the return; had the badge
regressed to 13.712px the type rules would have come back. */
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__badge,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__badge {
top: 20px;
right: 20px;
left: auto;
bottom: auto;
margin: 0;
}
/* ==========================================================================
PRICE — THREE SELECTOR TRAPS, all three MEASURED on this build, all fixed.
--------------------------------------------------------------------------
TRAP 1 — THERE IS NO `.price` WRAPPER IN THE LOOP.
Caught by CDP-diffing the build against the source: the probe for
`.pp-card__price .price` reported `src=ok bld=-`. P1's card prints
`$product->get_price_html()` straight out, and that returns
…
…
with NO enclosing ``. The SOURCE has one only because its
theme wrapped the call itself (Woo's `woocommerce_template_loop_price()` does
that). So every `.pp-card__price .price …` rule was a silent no-op here.
TRAP 2 — THERE IS NO `` ON THE LOOP PATH IN WooCommerce 11.
Found by P1 and confirmed here: WC 11.2 emits `.woocommerce-Price-amount`
bare in the loop. (⚠️ It DOES still emit `` on the PDP price path — P4
measured that — so these are genuinely different markups from the same WC
version. The source runs WC 9.7.3, where BOTH paths have ``, which is why
a selector copied off the source capture looks right and does nothing.)
TRAP 3 — WooCommerce OUT-SPECIFIES A SHORT SELECTOR ON `del`.
`.woocommerce ul.products li.product .price del { color:inherit; opacity:.5 }`
is (0,4,3); a `body.pp-shop .pp-card__price del` rule is (0,2,2) and loses, so
the struck original would render at half opacity.
So the rules below (a) never REQUIRE `.price` or `bdi` but still match them if
present, (b) target `.woocommerce-Price-amount`, and (c) carry the full
`body.pp-shop ul.products.pp-shop__grid li.product …` prefix = (0,5,3)+ so
they win on specificity alone — our sheet is INLINED into wp_head on the
edge-cached temp host, so its position in the cascade is not ours to control.
⛔ MEASURED TARGET — and it contradicts both the brief AND the homepage.
Captured in one CDP run over the live source at vw 1440:
/shop/ archive card .price 18px / 700 / #FA441D
del's amount 18px / 500 / #000 (full opacity)
the price ROW 305.8 x 26
homepage grid card .price 16px / 400 / #555
ins 16px / 600 / #000
del 16px / 400 / #555
The brief's "26px brand, struck 16px #828282 w500" matches NEITHER surface:
26 is the archive price ROW's height, the strike is 18px #000 on the archive
and 16px #555 on the homepage. P1's `--pp-fs-card-price: 26px` + brand is
therefore too large on the homepage as well — reported to the orchestrator
rather than patched from here, because the token and the homepage grid are
P1's files. This block sets only P3's surfaces, to the archive's 18px.
========================================================================== */
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price {
display: block;
min-height: 26px;
line-height: 26px;
font-family: var(--pp-font);
font-size: 18px;
font-weight: 700;
color: var(--pp-brand);
}
/* ---- NON-PAINTING CONTAINERS: `.price` and `ins` -> 18px / 700 / brand ----
These govern whitespace only (proved with a Range glyph box), but they are the
source's real computed values and they set the inherited colour. */
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price .price,
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price ins,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price .price,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price ins {
font-family: var(--pp-font);
font-size: 18px;
font-weight: 700;
color: var(--pp-brand);
text-decoration: none;
background: transparent;
}
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price .price,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price .price {
display: block;
float: none;
margin: 0;
}
/* ---- THE PAINTED EFFECTIVE PRICE -> 26px / 700 / brand --------------------
This is the node that actually holds the glyphs: the `` where WooCommerce
emits one (source, and WC 11's PDP path) and `.woocommerce-Price-amount` where
it does not (WC 11's LOOP path, which is what we render).
⚠️ `line-height` is deliberately NOT declared — it inherits the container's
26px, which is what gives the source's measured 26px row under a 26px glyph.
Setting 18px here is what squashed it before. */
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price > .woocommerce-Price-amount,
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price > bdi,
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price ins .woocommerce-Price-amount,
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price ins bdi,
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price .price > .woocommerce-Price-amount,
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price .price > bdi,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price > .woocommerce-Price-amount,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price > bdi,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price ins .woocommerce-Price-amount,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price ins bdi,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price .price > .woocommerce-Price-amount,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price .price > bdi {
font-family: var(--pp-font);
font-size: 26px;
font-weight: 700;
color: var(--pp-brand);
text-decoration: none;
background: transparent;
}
/* ---- the `del` CONTAINER -> 18px / 500 / #000 (paints nothing) ---- */
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price del,
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price .price del,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price del,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price .price del {
font-family: var(--pp-font);
font-size: 18px;
font-weight: 500;
color: var(--pp-primary);
opacity: 1;
}
/* ---- THE PAINTED STRIKE -> 16px / 700 / #828282 ---------------------------
MEASURED painted value on the source: `del … bdi` 16px / 700 /
rgb(130,130,130), i.e. `--pp-strike`. Woo dims `del` to `opacity:.5` from
(0,4,3), hence the long prefix. */
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price del .woocommerce-Price-amount,
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price del bdi,
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price .price del .woocommerce-Price-amount,
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price .price del bdi,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price del .woocommerce-Price-amount,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price del bdi,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price .price del .woocommerce-Price-amount,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price .price del bdi {
font-family: var(--pp-font);
font-size: 16px;
font-weight: 700;
color: var(--pp-strike);
opacity: 1;
}
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price del,
.pp-searchres ul.products.pp-shop__grid li.product .pp-card__price del {
display: inline-block;
margin-right: 8px;
}
/* Woo's own `.screen-reader-text` duplicates the price for assistive tech. It
must stay in the DOM and must never take part in the layout. */
body.pp-shop ul.products.pp-shop__grid li.product .pp-card__price .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
/* ⚠️ P1's CARD RESTRUCTURE — checked, nothing here depends on it.
`.pp-card__actions` has moved OUT of `.pp-card__media` and now sits last in
the DOM, and `.pp-card` is `display:flex; flex-direction:column` with explicit
`order` on its children (media 1, rail 2, body 3; rail 4 under `hover:none`).
This sheet never references `.pp-card__actions` or `.pp-card__media` at all
(re-grepped), and it adds NO extra child to `.pp-card` — so nothing of ours
can land at the implicit `order: 0` above the image. The only card internals
P3 touches are `.pp-card__badge`, `.pp-card__link img` and `.pp-card__price`,
and each only to undo a WooCommerce base-CSS rule, never to position it.
The grid also makes NO equal-height assumption: `ul.products` is
`align-items: flex-start`, so the ~68px that the rail adds on touch simply
makes that row taller. */
/* ==========================================================================
4. EMPTY STATE (⚠️ not measured — no source empty archive exists)
========================================================================== */
.pp-shop__empty { padding: 20px 0 40px; max-width: 620px; }
.pp-shop__empty-title {
margin: 0 0 14px;
font-family: var(--pp-font-display);
font-size: 34px;
font-weight: 600;
line-height: 1.25;
color: var(--pp-primary);
}
.pp-shop__empty-text {
margin: 0 0 26px;
font-family: var(--pp-font);
font-size: 18px;
line-height: 30px;
color: var(--pp-body);
}
.pp-shop__empty-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin: 0; }
.pp-shop__empty-clear {
font-family: var(--pp-font);
font-size: 16px;
font-weight: 600;
color: var(--pp-body);
text-decoration: underline;
}
.pp-shop__empty-clear:hover { color: var(--pp-brand); }
@media (max-width: 575px) {
.pp-shop__empty-title { font-size: 26px; }
.pp-shop__empty-text { font-size: 16px; line-height: 28px; }
}
/* ==========================================================================
5. PAGINATION
MEASURED @1440: nav background #F5F5F5, padding 20px 40px
span.current Anybody 16/30 700 #FA441D, padding 0 17px
a.page-numbers Anybody 16/30 700 #555, padding 0 17px
a.next/.prev 46x58, #FEDA46, flex-centred, font-size 0
⛔ The source also sets `position:absolute; left:50%; translateX(-50%)`, which
takes the pager out of flow (measured at y=2471.9 while its own column ended
at y=3014.6). Rendered in normal flow here so it cannot overlap the footer.
========================================================================== */
.pp-shop__pager,
body.pp-shop nav.woocommerce-pagination {
position: relative;
left: auto;
transform: none;
display: flex;
justify-content: center;
margin: 10px 0 0;
text-align: center;
}
body.pp-shop nav.woocommerce-pagination ul.page-numbers,
.pp-shop__pager .pp-shop__pager-links {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0;
padding: 20px 40px;
border: 0;
background: var(--pp-footer-bg);
list-style: none;
white-space: normal;
}
body.pp-shop nav.woocommerce-pagination ul.page-numbers li {
display: flex;
float: none;
margin: 0;
padding: 0;
border: 0;
overflow: visible;
}
body.pp-shop nav.woocommerce-pagination a.page-numbers,
body.pp-shop nav.woocommerce-pagination span.page-numbers,
.pp-shop__pager .pp-shop__pager-links a.page-numbers,
.pp-shop__pager .pp-shop__pager-links span.page-numbers {
display: block;
min-width: 0;
margin: 0;
padding: 0 17px;
background: transparent;
font-family: var(--pp-font);
font-size: 16px;
font-weight: 700;
line-height: 30px;
color: var(--pp-body);
text-decoration: none;
}
body.pp-shop nav.woocommerce-pagination span.page-numbers.current,
body.pp-shop nav.woocommerce-pagination a.page-numbers:hover,
.pp-shop__pager .pp-shop__pager-links span.page-numbers.current,
.pp-shop__pager .pp-shop__pager-links a.page-numbers:hover {
background: transparent;
color: var(--pp-brand);
}
body.pp-shop nav.woocommerce-pagination span.page-numbers.dots { color: var(--pp-body); }
/* prev / next — a 46x58 yellow block with a CSS chevron. The `←`/`→`
entity stays in the markup at font-size:0 for assistive tech. */
body.pp-shop nav.woocommerce-pagination a.prev.page-numbers,
body.pp-shop nav.woocommerce-pagination a.next.page-numbers,
.pp-shop__pager .pp-shop__pager-links a.prev.page-numbers,
.pp-shop__pager .pp-shop__pager-links a.next.page-numbers {
position: relative;
width: 46px;
height: 58px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--pp-accent);
font-size: 0;
line-height: 0;
color: transparent;
}
body.pp-shop nav.woocommerce-pagination a.prev.page-numbers::before,
body.pp-shop nav.woocommerce-pagination a.next.page-numbers::before,
.pp-shop__pager .pp-shop__pager-links a.prev.page-numbers::before,
.pp-shop__pager .pp-shop__pager-links a.next.page-numbers::before {
content: '';
width: 9px;
height: 9px;
border-top: 2px solid var(--pp-primary);
border-right: 2px solid var(--pp-primary);
}
body.pp-shop nav.woocommerce-pagination a.next.page-numbers::before,
.pp-shop__pager .pp-shop__pager-links a.next.page-numbers::before {
transform: rotate(45deg) translate(-1px, 1px);
}
body.pp-shop nav.woocommerce-pagination a.prev.page-numbers::before,
.pp-shop__pager .pp-shop__pager-links a.prev.page-numbers::before {
transform: rotate(-135deg) translate(-1px, 1px);
}
body.pp-shop nav.woocommerce-pagination a.prev.page-numbers:hover,
body.pp-shop nav.woocommerce-pagination a.next.page-numbers:hover {
background: var(--pp-brand);
}
body.pp-shop nav.woocommerce-pagination a.prev.page-numbers:hover::before,
body.pp-shop nav.woocommerce-pagination a.next.page-numbers:hover::before {
border-color: #fff;
}
@media (max-width: 575px) {
body.pp-shop nav.woocommerce-pagination ul.page-numbers,
.pp-shop__pager .pp-shop__pager-links { padding: 14px 10px; }
body.pp-shop nav.woocommerce-pagination a.page-numbers,
body.pp-shop nav.woocommerce-pagination span.page-numbers { padding: 0 10px; }
}
/* ==========================================================================
6. SIDEBAR WIDGETS
MEASURED @1440: section.widget 302.5 wide, padding 29px 25px,
border 2.667px solid #FEDA46, transparent background, and the
three widgets stack with ZERO gap (cats ends at y=2055, price
starts at y=2055) — so the hairlines meet, by design.
.widget-title h6 > span, Anybody 22/25 700 #000 UPPERCASE,
margin 0 0 39px
.widget-content 247.2
========================================================================== */
.pp-shop__sidebar-inner { position: relative; }
.pp-swidget {
margin: 0;
padding: 29px 25px;
border: 3px solid var(--pp-accent);
background: transparent;
}
.pp-swidget + .pp-swidget { margin-top: -3px; } /* collapse the shared hairline */
.pp-swidget__title {
margin: 0 0 39px;
font-family: var(--pp-font);
font-size: 22px;
font-weight: 700;
line-height: 25px;
color: var(--pp-primary);
text-transform: uppercase;
}
.pp-swidget__title span { display: inline-block; }
/* ---- Product Categories -------------------------------------------------
MEASURED: li flex, space-between, align-center, 65.3 tall, margin 0 0 8px,
border 2.667px solid #F1F1F1; a padding-left 22px, 16/30 #555;
.count 50x49, padding 0 14px, flex centre.
The count is the term's DIRECT count, reproducing `Marmoset Monkey (37)` even
though that archive returns 47 — see pp_shop_categories(). -------------- */
.pp-swidget .product-categories {
margin: 0;
padding: 0;
list-style: none;
}
.pp-swidget .product-categories li.cat-item {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 65px;
margin: 0 0 8px;
padding: 0;
border: 3px solid var(--pp-hairline);
list-style: none;
}
.pp-swidget .product-categories li.cat-item:last-child { margin-bottom: 0; }
/* MEASURED source row 65.3 tall; an 8px vertical pad on the link pushed the
build to 69.3, so the padding is horizontal only and the row height comes from
`min-height` + the link's own line-height. */
.pp-swidget .product-categories li.cat-item > a {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
min-height: 59px;
padding: 0 0 0 22px;
font-family: var(--pp-font);
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--pp-body);
}
.pp-swidget .product-categories li.cat-item > a:hover { color: var(--pp-brand); }
.pp-swidget .product-categories li.cat-item .count {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 0 14px;
font-family: var(--pp-font);
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: var(--pp-body);
}
/* MEASURED on /pets-category/marmoset-monkey/pygmy-marmoset/:
li.cat-item-46 -> current-cat-parent, li.cat-item-62 -> current-cat. */
.pp-swidget .product-categories li.current-cat > a,
.pp-swidget .product-categories li.current-cat-parent > a { color: var(--pp-brand); font-weight: 600; }
.pp-swidget .product-categories li.current-cat { border-color: var(--pp-accent); }
/* ---- Price Range (WooCommerce's own widget) ------------------------------
MEASURED: .price_slider 9px tall, margin 0 8.4px 14px 7px
.price_slider_amount flex COLUMN-REVERSE, space-between,
padding 18px 0 0, 14px -> the label renders
ABOVE the button and the text inputs are
display:none
button 54px, radius 100px, border 2px solid #FA441D, transparent
background, #FA441D text, Anybody 18px 700, margin 0 0 14px
Woo's own wc-price-slider.js reveals `.price_slider` / `.price_label` and
fills `.from` / `.to`; nothing here reimplements that. ------------------- */
.pp-swidget .price_slider_wrapper { position: relative; }
.pp-swidget .price_slider {
height: 9px;
margin: 0 8px 14px 7px;
background: var(--pp-hairline);
border: 0;
border-radius: 0;
position: relative;
}
.pp-swidget .price_slider .ui-slider-range {
position: absolute;
top: 0;
height: 100%;
background: var(--pp-brand);
border: 0;
display: block;
}
.pp-swidget .price_slider .ui-slider-handle {
position: absolute;
top: -5px;
width: 19px;
height: 19px;
margin-left: -9px;
background: var(--pp-brand);
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--pp-brand);
cursor: ew-resize;
outline: none;
z-index: 2;
}
.pp-swidget .price_slider_amount {
display: flex;
flex-direction: column-reverse;
align-items: stretch;
padding: 18px 0 0;
font-family: var(--pp-font);
font-size: 14px;
line-height: 34px;
}
/* MEASURED display:none — the slider and the label are the whole control. The
inputs stay in the DOM because they are what the form actually submits. */
.pp-swidget .price_slider_amount #min_price,
.pp-swidget .price_slider_amount #max_price { display: none; }
.pp-swidget .price_slider_amount .price_label {
font-family: var(--pp-font);
font-size: 16px;
line-height: 30px;
color: var(--pp-body);
text-align: left;
}
.pp-swidget .price_slider_amount .price_label .from,
.pp-swidget .price_slider_amount .price_label .to { color: var(--pp-brand); font-weight: 700; }
.pp-swidget .price_slider_amount button,
.pp-swidget .price_slider_amount .button {
display: block;
width: 100%;
min-height: 54px;
margin: 0 0 14px;
padding: 0 18px;
background: transparent;
border: 2px solid var(--pp-brand);
border-radius: var(--pp-radius-pill);
font-family: var(--pp-font);
font-size: 18px;
font-weight: 700;
line-height: 50px;
color: var(--pp-brand);
cursor: pointer;
transition: all var(--pp-ease-fast);
}
.pp-swidget .price_slider_amount button:hover {
background: var(--pp-brand);
color: #fff;
}
.pp-swidget .price_slider_amount .clear { display: none; }
/* Fallback only: jQuery-UI never painted a handle, so show the real inputs
instead of leaving a dead widget (pp-shop.js adds this class). */
.pp-swidget .price_slider_wrapper.pp-price--nojs .price_slider { display: none !important; }
.pp-swidget .price_slider_wrapper.pp-price--nojs #min_price,
.pp-swidget .price_slider_wrapper.pp-price--nojs #max_price {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 12px 16px;
border: 1px solid var(--pp-border);
border-radius: 0;
font-family: var(--pp-font);
font-size: 16px;
color: var(--pp-input-text);
}
.pp-swidget .price_slider_wrapper.pp-price--nojs .price_slider_amount { flex-direction: column; }
/* ---- Top Products -------------------------------------------------------
MEASURED: li margin 0 0 20px; .wg-product-inner flex align-center
.wg-product-image 100x98, padding 13px, border 2.667px solid #F1F1F1,
background #FAFBFA, margin-right 15px, img max-width 100%
h3.product-title margin 0 0 13px; its Anybody 18/22.5 600
.star-rating-wrap display:none (0 reviews sitewide)
price Anybody 18/33.75 500 #000 ------------------------------- */
.pp-swidget .product_list_widget { margin: 0; padding: 0; list-style: none; }
.pp-swidget .product_list_widget > li { margin: 0 0 20px; padding: 0; list-style: none; }
.pp-swidget .product_list_widget > li:last-child { margin-bottom: 0; }
.pp-wgp { display: flex; align-items: center; }
.pp-wgp__media {
flex: 0 0 100px;
width: 100px;
height: 98px;
margin-right: 15px;
padding: 13px;
border: 3px solid var(--pp-hairline);
background: #fafbfa;
display: flex;
align-items: center;
justify-content: center;
}
.pp-wgp__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pp-wgp__img { max-width: 100%; height: auto; width: auto; object-fit: contain; }
.pp-wgp__body { flex: 1 1 auto; min-width: 0; }
.pp-wgp__title { margin: 0 0 13px; font-family: var(--pp-font); }
.pp-wgp__title a {
display: block;
font-family: var(--pp-font);
font-size: 18px;
font-weight: 600;
line-height: 22.5px;
color: var(--pp-primary);
}
.pp-wgp__title a:hover { color: var(--pp-brand); }
/* Same two traps as the card price: no `` in WC 11, and Woo's own
`.woocommerce ul.product_list_widget li del { opacity:.5 }` is (0,2,3) and
beats a two-class rule. Hence the longer prefix + both amount spellings.
MEASURED: Anybody 18px / 33.75 / 500 #000. */
body.pp-shop .pp-swidget ul.product_list_widget li .pp-wgp__price,
body.pp-shop .pp-swidget ul.product_list_widget li .pp-wgp__price .woocommerce-Price-amount,
body.pp-shop .pp-swidget ul.product_list_widget li .pp-wgp__price bdi {
font-family: var(--pp-font);
font-size: 18px;
font-weight: 500;
line-height: 30px;
color: var(--pp-primary);
}
body.pp-shop .pp-swidget ul.product_list_widget li .pp-wgp__price ins,
body.pp-shop .pp-swidget ul.product_list_widget li .pp-wgp__price ins .woocommerce-Price-amount,
body.pp-shop .pp-swidget ul.product_list_widget li .pp-wgp__price ins bdi {
text-decoration: none;
background: transparent;
color: var(--pp-brand);
font-weight: 700;
}
body.pp-shop .pp-swidget ul.product_list_widget li .pp-wgp__price del,
body.pp-shop .pp-swidget ul.product_list_widget li .pp-wgp__price del .woocommerce-Price-amount,
body.pp-shop .pp-swidget ul.product_list_widget li .pp-wgp__price del bdi {
opacity: 1;
color: var(--pp-primary);
font-weight: 500;
}
body.pp-shop .pp-swidget ul.product_list_widget li .pp-wgp__price del { margin-right: 6px; }
.pp-swidget .product_list_widget .star-rating-wrap,
.pp-swidget .product_list_widget .star-rating { display: none; }
/* ---- Collapsible widgets below 1200px (pp-shop.js) ----------------------
The sidebar STACKS under the grid below 1200, where the three expanded
widgets measured ~2,200-2,400px on the source. Desktop never sees this. */
.pp-swidget--collapsible .pp-swidget__title {
position: relative;
margin-bottom: 0;
padding-right: 40px;
cursor: pointer;
}
.pp-swidget--collapsible .pp-swidget__title::after {
content: '';
position: absolute;
right: 4px;
top: 50%;
width: 9px;
height: 9px;
border-right: 2px solid var(--pp-primary);
border-bottom: 2px solid var(--pp-primary);
transform: translateY(-70%) rotate(-135deg);
transition: transform var(--pp-ease-fast);
}
.pp-swidget--collapsible.is-closed .pp-swidget__title::after {
transform: translateY(-30%) rotate(45deg);
}
.pp-swidget--collapsible:not(.is-closed) .pp-swidget__title { margin-bottom: 30px; }
.pp-swidget--collapsible.is-closed .product-categories,
.pp-swidget--collapsible.is-closed .product_list_widget,
.pp-swidget--collapsible.is-closed .price_slider_wrapper,
.pp-swidget--collapsible.is-closed form { display: none; }
@media (max-width: 1199px) {
.pp-shop__sidebar { margin-top: 20px; }
}
/* ==========================================================================
7. GENERIC SEARCH RESULTS (⚠️ not measured — no source surface, see search.php)
========================================================================== */
.pp-searchres { padding-top: 60px; padding-bottom: 90px; }
.pp-searchres__form {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin: 0 0 50px;
}
.pp-searchres__field {
flex: 1 1 320px;
min-width: 0;
height: 56px;
padding: 0 24px;
background: #fff;
border: 1px solid var(--pp-border);
border-radius: 0;
font-family: var(--pp-font);
font-size: 16px;
color: var(--pp-input-text);
}
.pp-searchres__submit { flex: 0 0 auto; }
.pp-searchres__group + .pp-searchres__group { margin-top: 70px; }
.pp-searchres__heading {
margin: 0 0 32px;
font-family: var(--pp-font-display);
font-size: 34px;
font-weight: 600;
line-height: 1.25;
color: var(--pp-primary);
}
.pp-searchres__more { margin: 10px 0 0; }
.pp-searchres__row { padding: 22px 0; border-bottom: 1px solid var(--pp-hairline); }
.pp-searchres__row-title { margin: 0 0 8px; font-family: var(--pp-font); font-size: 20px; font-weight: 700; }
.pp-searchres__row-title a { color: var(--pp-primary); }
.pp-searchres__row-title a:hover { color: var(--pp-brand); }
.pp-searchres__row-text { margin: 0; font-size: 16px; line-height: 28px; color: var(--pp-body); }
@media (max-width: 575px) {
.pp-searchres__heading { font-size: 26px; }
}