body.ffinc2-shop{--pg:#050D18;--pg-2:#081422;--ink:#E8F4FD;--ink-2:#9BBFD8;--ink-3:#6B9DB7;--hair:rgba(74,159,224,.16);--hair-2:rgba(74,159,224,.28);--glass:rgba(12,26,42,.60);--field:rgba(6,16,28,.72);--ac:#4A9FE0;--ac-ink:#8DCAF2;--tl:#2ECC9A;--tl-ink:#52DEB5;--am:#F59E0B;--am-ink:#F0B34A;--pu:#A78BFA;--pu-ink:#BCA6FC}body.ffinc2-shop.light-mode{--pg:#F4F9FF;--pg-2:#EAF3FD;--ink:#050D18;--ink-2:#3A5E75;--ink-3:#47687D;--hair:rgba(30,107,171,.16);--hair-2:rgba(30,107,171,.26);--glass:rgba(255,255,255,.78);--field:rgba(255,255,255,.94);--ac:#1E6BAB;--ac-ink:#1A5F99;--tl:#0F9B72;--tl-ink:#0A6B4F;--am:#B45309;--am-ink:#9A4708;--pu:#6D28D9;--pu-ink:#5B21B6}.ac-ac{--a:var(--ac);--ai:var(--ac-ink)}.ac-tl{--a:var(--tl);--ai:var(--tl-ink)}.ac-am{--a:var(--am);--ai:var(--am-ink)}.ac-pu{--a:var(--pu);--ai:var(--pu-ink)}body.ffinc2-shop{background:var(--pg);color:var(--ink)}body.ffinc2-shop .pix,body.ffinc2-shop .pdp-w{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}.pix-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.pix-sec{position:relative;padding:0 48px}.pix-sec.pix-hero{padding-top:calc(var(--hdr,66px) + 46px);padding-bottom:40px;background:linear-gradient(180deg,var(--pg) 0%,var(--pg-2) 62%,var(--pg) 100%)}.pix-sec.pix-body{padding-bottom:96px}.pix-wrap{max-width:1400px;margin:0 auto}.pix-bc{position:relative;z-index:2;max-width:1400px;margin:0 auto 26px;padding:0;font-size:12.5px;color:var(--ink-3);letter-spacing:.005em}.pix-bc a{color:var(--ink-3);text-decoration:none}.pix-bc a:hover{color:var(--ac-ink);text-decoration:underline;text-underline-offset:2px}.pix-bc .sep{margin:0 8px;color:var(--ink-3)}.pix-bc .cur{color:var(--ink-2)}.pdp-bc{max-width:none;margin-left:0;margin-right:0}.pix-hero-in{position:relative;z-index:2;max-width:1400px;margin:0 auto;display:grid;gap:48px 56px;align-items:center;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr)}.pix-hero-copy{min-width:0}.pix-eyebrow{margin:0 0 20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}.pix-h1{margin:0;max-width:17ch;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:clamp(36px,4.4vw,58px);font-weight:700;line-height:1.05;letter-spacing:-.032em;color:var(--ink)}.pix-lede{margin:22px 0 0;max-width:52ch;font-size:17px;line-height:1.62;color:var(--ink-2)}.pix-stack{position:relative;min-width:0}.pix-board{position:relative;border-radius:18px;padding:1px;background:radial-gradient(120% 90% at 8% 0%,color-mix(in srgb,var(--a,var(--ac)) 16%,transparent),transparent 62%),color-mix(in srgb,var(--a,var(--hair)) 26%,var(--hair));box-shadow:0 26px 60px -30px rgb(0 0 0 / .62);overflow:hidden}.pix-board::before{content:'';position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(135deg,color-mix(in srgb,var(--a,var(--ac)) 56%,transparent),color-mix(in srgb,var(--a,var(--ac)) 14%,transparent) 42%,transparent 72%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}.pix-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:color-mix(in srgb,var(--a,var(--hair)) 30%,var(--hair));border-radius:17px;overflow:hidden}.pix-cell{position:relative;padding:26px 22px 24px;background:var(--glass);transition:background .18s ease}.pix-cell:nth-child(1),.pix-cell:nth-child(4){background:color-mix(in srgb,var(--a,var(--ac)) 8%,var(--glass))}.pix-cell:hover{background:color-mix(in srgb,var(--a,var(--ac)) 13%,var(--glass))}.pix-cell::after{content:'';position:absolute;width:9px;height:9px;opacity:.5;border-color:color-mix(in srgb,var(--a,var(--ac)) 62%,transparent)}.pix-cell:nth-child(1)::after{top:12px;left:12px;border-top:1px solid;border-left:1px solid}.pix-cell:nth-child(2)::after{top:12px;right:12px;border-top:1px solid;border-right:1px solid}.pix-cell:nth-child(3)::after{bottom:12px;left:12px;border-bottom:1px solid;border-left:1px solid}.pix-cell:nth-child(4)::after{bottom:12px;right:12px;border-bottom:1px solid;border-right:1px solid}.pix-cell dt{margin:0 0 9px;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);min-height:2.4em}.pix-cell dd{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:clamp(26px,2.5vw,34px);font-weight:700;letter-spacing:-.026em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}.pix-cell dd span{font-size:12.5px;font-weight:600;color:var(--ink-3);margin-left:4px;letter-spacing:0}.pix-cell-live dd{color:var(--ai,var(--ac-ink))}.pix-board-foot{display:flex;align-items:flex-start;gap:9px;margin:14px 2px 0;font-size:12px;line-height:1.5;color:var(--ink-3)}.pix-board-foot::before{content:'';flex:0 0 auto;width:13px;height:13px;margin-top:2px;background:var(--ink-3);-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6h.01'/%3E%3C/svg%3E")}
/* ---- controls --------------------------------------------------
Quiet. The list is the object on this page; the controls are how you
get at it, and a row of filled boxes above a bare list inverts that. */
.pix-ctl{
display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;
padding:0 0 18px;margin:0 0 4px;
}
.pix-ctl-search{position:relative;flex:1 1 240px;min-width:200px;max-width:320px}
.pix-si{position:absolute;left:2px;top:50%;transform:translateY(-50%);
width:15px;height:15px;background:var(--ink-3);pointer-events:none;
-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;
--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E")}
#pix-q{
width:100%;padding:11px 0 11px 26px;
background:none;border:0;border-bottom:1px solid var(--hair-2);border-radius:0;
color:var(--ink);font-size:14.5px;font-family:inherit;
transition:border-color .16s ease;
}
#pix-q::placeholder{color:var(--ink-3)}
#pix-q:focus{outline:0;border-bottom-color:var(--ac)}
#pix-q::-webkit-search-cancel-button{filter:invert(.6)}
.pix-chips{display:flex;flex-wrap:wrap;gap:7px}
/* A CHIP CARRIES ITS CATEGORY'S COLOUR AT REST, NOT ONLY WHEN SELECTED.
Pass 37 gave the unselected chips a neutral --hair edge and told them apart
with the category icon instead; the icon is gone (it is on the card, which
is enough) and the colour does the work now. This is the /search/ page's own
.fb-chip behaviour, where every chip is drawn in its category's colour from
the start - section 6 says match the build rather than invent a treatment.
The "All" chip has no ac-* class, so --a is unset and it falls back to the
neutral edge, which is right: it is the one chip that is not a category. */
.pix-chip{
appearance:none;cursor:pointer;
padding:6px 13px;border-radius:999px;
border:1px solid color-mix(in srgb,var(--a,var(--hair)) 30%,var(--hair));
background:color-mix(in srgb,var(--a,transparent) 5%,transparent);
color:var(--ai,var(--ink-2));font:inherit;font-size:13px;font-weight:550;
transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.pix-chip b{font-weight:650;color:var(--ink-3);margin-left:5px;
font-variant-numeric:tabular-nums}
.pix-chip:hover{
border-color:color-mix(in srgb,var(--a,var(--hair-2)) 50%,var(--hair-2));
background:color-mix(in srgb,var(--a,transparent) 9%,transparent);
color:var(--ai,var(--ink));
}
.pix-chip.is-on{
border-color:color-mix(in srgb,var(--a,var(--ac)) 58%,transparent);
background:color-mix(in srgb,var(--a,var(--ac)) 15%,transparent);
color:var(--ai,var(--ac-ink));
font-weight:650;
}
.pix-chip.is-on b{color:var(--ai,var(--ac-ink))}
.pix-chip:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.pix-ctl-right{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-left:auto}
.pix-sel{
appearance:none;cursor:pointer;
padding:7px 26px 7px 0;
background:none;border:0;
color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:550;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B9DB7' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 2px center;background-size:13px;
}
.pix-sel:hover{color:var(--ink)}
.pix-sel:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.pix-sel option{background:var(--pg-2);color:var(--ink)}
/* ---- the layout toggle ------------------------------------------
RESTORED THIS PASS. Pass 32 deleted the grid and the toggle with it,
on my judgement and not the user's, and was told to put both back.
Two 30px buttons, the same quiet vocabulary as the chips. */
.pix-view{display:flex;gap:2px;padding:2px;border-radius:9px;border:1px solid var(--hair)}
.pix-vb{
appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
width:30px;height:26px;padding:0;border:0;border-radius:7px;background:none;
transition:background .15s ease;
}
.pix-vb:hover{background:color-mix(in srgb,var(--ac) 9%,transparent)}
.pix-vb.is-on{background:color-mix(in srgb,var(--ac) 15%,transparent)}
.pix-vb:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.pix-vi{
width:14px;height:14px;background:var(--ink-3);transition:background .15s ease;
-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;
}
.pix-vb.is-on .pix-vi{background:var(--ac-ink)}
.pix-vi-g{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1.6'/%3E%3C/svg%3E")}
.pix-vi-l{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='4' width='18' height='2.6' rx='1.3'/%3E%3Crect x='3' y='10.7' width='18' height='2.6' rx='1.3'/%3E%3Crect x='3' y='17.4' width='18' height='2.6' rx='1.3'/%3E%3C/svg%3E")}
/* ---- category glyphs. CSS masks, so they take the category accent in
both modes and render in a local screenshot. --------------------- */
.pix-g{
display:inline-block;flex:0 0 auto;width:30px;height:30px;border-radius:9px;
background:color-mix(in srgb,var(--a,var(--ac)) 14%,transparent);
position:relative;
}
.pix-g::before{
content:'';position:absolute;inset:7px;
background:var(--ai,var(--ac-ink));
-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;
}
.pix-g-bird::before{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7a3 3 0 1 0-5.6 1.5C8.5 9.6 6 12 6 15a5 5 0 0 0 5 5h2a6 6 0 0 0 6-6V9l2-2-3-1z'/%3E%3Cpath d='M15 6.6h.01'/%3E%3C/svg%3E")}
.pix-g-cut::before{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5c2-4 7-6 11-4.5s4.6 6.4 2.2 9.7-7.2 5-10.4 3.2S3.5 13.5 5.5 9.5z'/%3E%3Ccircle cx='11' cy='12' r='2.6'/%3E%3C/svg%3E")}
.pix-g-fish::before{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12c3.2-4.2 7-6.3 11.3-6.3 3.4 0 6.2 1.6 8.7 4.6-2.5 3-5.3 4.6-8.7 4.6C9 14.9 5.2 13.6 2 12z'/%3E%3Cpath d='M2 12l3.6 4.4V7.6L2 12z'/%3E%3Cpath d='M16.6 10.2h.01'/%3E%3C/svg%3E")}
.pix-g-leaf::before{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20c0-8 5-14 15-14 0 9-5 13-11 13H5z'/%3E%3Cpath d='M5 20c2-5 6-8 10-9.5'/%3E%3C/svg%3E")}
/* ---- the index list --------------------------------------------
Grok's models-and-pricing is the reference and the whole point of it
is what is ABSENT: no card, no fill, no border, no zebra. A row is a
grid on a hairline. What carries the design is the type scale between
the name and the price, and the air around both.
One grid definition, shared by the column header and every row, so a
column cannot drift from its own heading. */
.pix-list,.pix-head{--pix-cols:56px minmax(0,1fr) 116px 168px 22px}
.pix-head{
display:grid;grid-template-columns:var(--pix-cols);gap:0 18px;align-items:end;
padding:0 4px 12px;border-bottom:1px solid var(--hair-2);
font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-3);
}
.pix-head-n{grid-column:2}
.pix-head-s{grid-column:3;text-align:right}
.pix-head-p{grid-column:4;text-align:right}
.pix-head-p i{font-style:normal;font-weight:500;opacity:.72;letter-spacing:.06em}
.pix-list{display:block}
/* ---- category group heading ------------------------------------
The editorial content of the page. The trade note under each category
name is standard practice for that category, which is checkable, and
it is the reason the page reads as a market document rather than a
category listing. */
.pix-cat-h{
display:grid;grid-template-columns:var(--pix-cols);gap:0 18px;align-items:center;
padding:38px 4px 14px;
}
.pix-cat-h:first-child{padding-top:26px}
.pix-cat-g{
grid-column:1;display:flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:10px;
background:color-mix(in srgb,var(--a) 13%,transparent);
}
/* The tile is the parent here, so the glyph is the ICON ALONE. .pix-g
carries its own 30px tile with the mask inset 7px; shrinking the box
without clearing that inset is what left a 3px dot in the first render.
Kept for the six products with no photograph, which still fall back to a
masked glyph; the group header itself carries the category PNG. */
.pix-cat-g .pix-g{width:18px;height:18px;background:none;border-radius:0}
.pix-cat-g .pix-g::before{inset:0}
.pix-cat-t{grid-column:2;display:block;min-width:0}
.pix-cat-t b{
display:block;font-size:12px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--ai);
}
.pix-cat-t i{
display:block;margin-top:5px;font-style:normal;
font-size:13.5px;line-height:1.5;color:var(--ink-3);max-width:62ch;
}
.pix-cat-c{
grid-column:4;text-align:right;font-size:12px;font-weight:600;
color:var(--ink-3);font-variant-numeric:tabular-nums;
}
/* THE NOUN IS MARKUP, NOT A ::after. A hardcoded " products" here read
"1 products" on every sub-type group holding a single item - four of them
live across poultry, beef and seafood. PHP emits the singular or the plural
into .pix-cat-c i; this rule only styles it. */
.pix-cat-c i{font-style:normal;font-weight:500;opacity:.7}
.pix-cat-c i::before{content:' '}
/* ---- a row ------------------------------------------------------ */
.pix-row{
display:grid;grid-template-columns:var(--pix-cols);gap:0 18px;align-items:center;
padding:13px 4px;border-top:1px solid var(--hair);
text-decoration:none;color:inherit;position:relative;
transition:background .15s ease;
}
.pix-cat-h + .pix-row{border-top:1px solid var(--hair-2)}
.pix-row:last-child{border-bottom:1px solid var(--hair)}
/* Full-bleed hover tint that ignores the 4px row padding, so the
highlight reads as a band across the list rather than an inset box. */
.pix-row::before{
content:'';position:absolute;inset:0 -14px;border-radius:8px;
background:transparent;transition:background .15s ease;z-index:0;
}
.pix-row:hover::before{background:color-mix(in srgb,var(--a) 7%,transparent)}
.pix-row > *{position:relative;z-index:1}
.pix-row:focus-visible{outline:0}
.pix-row:focus-visible::before{
background:color-mix(in srgb,var(--a) 9%,transparent);
box-shadow:0 0 0 2px var(--ac);
}
/* The 44px chip. White ground kept, because the photographs are cut out
on white and repainting them is a content job — but at this size the
white is a token, not a mass. */
.pix-th{
grid-column:1;display:flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:9px;overflow:hidden;
background:#FFFFFF;border:1px solid var(--hair-2);
}
.pix-th img{display:block;width:100%;height:100%;object-fit:contain}
.pix-th-0{background:color-mix(in srgb,var(--a) 12%,transparent);border-color:transparent}
.pix-th-0 .pix-g{width:21px;height:21px;background:none;border-radius:0}
.pix-th-0 .pix-g::before{inset:0}
.pix-row-n{
grid-column:2;min-width:0;display:block;
font-size:15px;font-weight:600;line-height:1.35;color:var(--ink);
}
.pix-row-n i{
display:block;margin-top:3px;font-style:normal;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:11px;letter-spacing:.04em;color:var(--ink-3);
}
.pix-row:hover .pix-row-n{color:var(--ai)}
.pix-row-s{grid-column:3;text-align:right;font-size:13.5px}
.pix-row-s b{font-weight:650;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pix-row-s em{font-style:normal;color:var(--ink-3);font-size:12.5px}
/* The column header carries the noun at desktop, so the inline one would
be a second label for the same number. */
.pix-row-s i{display:none}
/* The figure the page exists for. Largest thing in the row, tabular so
the column aligns on the digit rather than the glyph. */
.pix-row-p{
grid-column:4;text-align:right;
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:19px;font-weight:700;letter-spacing:-.018em;color:var(--ink);
font-variant-numeric:tabular-nums;
}
.pix-row-p i{font-style:normal;font-size:11.5px;font-weight:500;
color:var(--ink-3);margin-left:3px;letter-spacing:0}
.pix-row-go{
grid-column:5;justify-self:end;width:15px;height:15px;
background:var(--ink-3);opacity:.5;
transition:opacity .15s ease,transform .15s ease;
-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;
--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.pix-row:hover .pix-row-go{opacity:1;background:var(--ai);transform:translateX(2px)}
/* Sorting flattens the grouping, so the headers go and the first row
needs the heavier rule the header used to give it. */
.pix-flat .pix-cat-h{display:none}
.pix-flat .pix-row:first-of-type{border-top:1px solid var(--hair-2)}
/* The category that holds nothing yet. Not an error state: the page around it
is real content, so this reads as a note rather than as a failure. */
.pix-none-yet{
margin:8px 0 4px;padding:34px 30px;border-radius:16px;
background:color-mix(in srgb,var(--ac) 5%,transparent);
border:1px solid var(--hair);
}
.pix-none-h{margin:0;font-size:17px;font-weight:700;color:var(--ink)}
.pix-none-b{margin:9px 0 0;max-width:62ch;font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.pix-none-a{
display:inline-block;margin-top:16px;font-size:13.5px;font-weight:650;
color:var(--ac-ink);text-decoration:none;
border-bottom:1px solid color-mix(in srgb,var(--ac) 38%,transparent);
}
.pix-none-a:hover{border-bottom-color:var(--ac-ink)}
.pix-empty{
margin:0;padding:52px 4px;text-align:center;
font-size:15px;color:var(--ink-2);
}
.pix-empty .pix-reset{
appearance:none;background:none;border:0;cursor:pointer;padding:0;
font:inherit;color:var(--ac-ink);text-decoration:underline;
text-underline-offset:3px;
}
.pix-none .pix-head{opacity:.4}
/* ==================================================================
THE FILTER FIX, AND THIS IS THE THIRD TIME THIS BUG HAS SHIPPED
------------------------------------------------------------------
ffinc2_shop_js() hides a filtered-out item with el.hidden = true,
which relies on the user-agent rule [hidden]{display:none} - the
weakest declaration in the whole cascade. Anything that sets its own
display beats it:
.pix-card display:flex -> every card stayed visible (pass 30,
fixed; reintroduced in pass 33 when
the grid came back)
.pix-row display:grid -> same fault, masked only because the
list container was itself hidden in
grid view (pass 32 onwards)
.pix-cat-h display:grid -> same
So the filters looked wired and did nothing, which is exactly what
the user reported. One rule, scoped to the index root, covering
every filterable element, and !important because the card and row
both set display in their own rules and in media queries. Any new
filterable element inherits the fix for free. */
.pix [hidden]{display:none!important}
/* ==================================================================
THE CARD GRID — restored, and it is the default layout
------------------------------------------------------------------
Pass 29 shipped a table, pass 30 added cards and made them default,
pass 31 kept both behind a toggle, pass 32 deleted the grid on my own
judgement. The user's instruction was to put it back. It is the
default because a commodity index should show the commodities; the
list is one click away and is still the better tool for reading 26
prices in one unit.
BOTH LAYOUTS RENDER FROM THE SAME ROWS and carry the same data
attributes, so one filter pass drives both. Only which container is
displayed changes, and the root class that decides it is printed by
PHP — so with no JavaScript at all the grid is what renders.
================================================================== */
.pix-v-grid > .pix-list,
.pix-v-grid > .pix-head{display:none}
.pix-v-list > .pix-grid{display:none}
.pix-grid{
display:grid;gap:16px;
grid-template-columns:repeat(auto-fill,minmax(236px,1fr));
padding-top:4px;
}
.pix-card{
position:relative;display:flex;flex-direction:column;overflow:hidden;
border-radius:14px;border:1px solid var(--card-e);background:var(--card-g);
box-shadow:var(--card-sh);
text-decoration:none;color:inherit;
transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
/* THE CARD'S OWN TOKENS, so light mode redefines three values rather than
restating the component. Dark is unchanged from pass 34; light is the fix
below. */
.pix-card{
--card-g:var(--glass);
--card-e:var(--hair);
--card-sh:none;
--plate:#FFFFFF;
}
/* A 2px accent cap across the head of the card BODY, under the photograph.
Pass 33 put a 1px fading hairline at the top of the card, behind a white
plate, where it could not be seen. At 2px with the accent at full strength
for the first third it is the thing that tells one card from the next in a
grid of twenty-six. */
.pix-card-b::before{
content:'';position:absolute;inset:0 0 auto;height:2px;z-index:1;
background:linear-gradient(90deg,var(--a) 0 32%,color-mix(in srgb,var(--a) 34%,transparent) 68%,transparent);
}
.pix-card:hover{
border-color:color-mix(in srgb,var(--a) 48%,transparent);
transform:translateY(-3px);
box-shadow:var(--card-sh-h);
}
.pix-card{--card-sh-h:0 22px 44px -24px rgba(0,0,0,.72)}
.pix-card:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
/* THE PLATE STAYS PURE WHITE, AND THE FIRST VERSION OF THIS PASS GOT IT WRONG.
Washing the plate in the card's accent looked like the obvious way to tell
twenty-six cards apart, and in a render it plainly was not: every
photograph is a cut-out on its OWN white ground, so a tinted plate draws a
hard white rectangle around each one. Wide subjects nearly filled the plate
and hid it; narrow ones (both salmon fillets, the shoulder tenders) showed
a white box floating in a tinted well. Inconsistent is worse than either
extreme.
White on white merges, which is what cut-out photography wants. The accent
moved to the card BODY instead, where nothing competes with it. */
.pix-shot{
position:relative;
display:flex;align-items:center;justify-content:center;
aspect-ratio:4 / 3;overflow:hidden;
background:var(--plate);
border-bottom:1px solid color-mix(in srgb,var(--a) 24%,transparent);
}
.pix-shot img{
display:block;width:100%;height:100%;object-fit:contain;padding:10px;
box-sizing:border-box;transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.pix-card:hover .pix-shot img{transform:scale(1.05)}
/* A product with no cleaned photograph gets the SAME plate, tinted harder and
carrying the glyph. Not a shorter card: in a grid, a card missing its image
reads as broken rather than different. */
.pix-shot-0{
background:
linear-gradient(180deg,color-mix(in srgb,var(--a) 18%,transparent),color-mix(in srgb,var(--a) 7%,transparent)),
var(--pg-2);
flex-direction:column;gap:10px;
}
.pix-shot-0 .pix-g{width:42px;height:42px;background:none;border-radius:0;opacity:.85}
.pix-shot-0 .pix-g::before{inset:0}
/* One true line rather than a blank plate. Without it a card with no
photograph reads as broken instead of as pending. */
.pix-shot-0 .pix-g-l{
font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-3);
}
.pix-card-b{
position:relative;display:flex;flex-direction:column;flex:1 1 auto;padding:14px 15px 15px;
/* The category wash, on the body rather than the plate. It fades out over
the first 90px so the price and the supplier line sit on the card's own
ground, and it is what makes a Seafood card and a Beef card different
objects at a glance in a grid of twenty-six. */
background:linear-gradient(180deg,color-mix(in srgb,var(--a) 9%,transparent),transparent 90px);
}
/* THE CATEGORY IS A PILL WITH A GLYPH, NOT COLOURED TEXT.
Twenty-six cards of one shape are told apart by their category, and a 10px
tinted word does not carry that — least of all in light mode, where the
accent inks are darkened for legibility (section 10m) and sit close to the
body copy. Glyph, tinted ground and tinted border are three accent signals
in one small object, and they read at a glance. */
.pix-tag{
align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
padding:4px 9px 4px 7px;border-radius:999px;
background:color-mix(in srgb,var(--a) 13%,transparent);
border:1px solid color-mix(in srgb,var(--a) 30%,transparent);
font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:var(--ai);max-width:100%;
/* NOWRAP, AND IT IS LOAD-BEARING. Without it "Beef & Red Meat" takes two
lines in a 170px card while "Poultry" takes one, and a grid row is only
as tall as its tallest card - measured 314 against 304 at 390, six cards
ragged. The label is data (the category's own name), so shortening it is
not available; the pill shrinks its tracking instead at the width where
the longest label stops fitting. */
white-space:nowrap;
transition:background-color .18s ease,border-color .18s ease;
}
/* THE CATEGORY'S OWN ICON, NOT A TINTED SQUARE.
Pass 37, on instruction: "replace that colored square with a colored icon for that specific product category". These are real media-library PNGs, so
they are ![]()
and carry their own colour - a CSS mask takes currentColor
and would throw that colour away, which is the whole point of the change.
Sized in one place for all three placements (card pill, filter chip, list
group header) so the four categories cannot drift apart. */
.pix-tag-i,.pix-cat-i{
flex:0 0 auto;object-fit:contain;display:block;
/* The source art is drawn for a light ground. A hair of brightness keeps it
from going muddy against the navy page without washing it out in light
mode, where the filter is dropped entirely. */
filter:saturate(1.06) brightness(1.06);
}
/* 19px, AND THE NUMBER IS MEASURED. Rendered at 14, 15, 17, 19, 22 and 26px
against the real pill: below 17 all four are indistinct blobs and the beef
icon in particular reads as a smudge, because these are detailed colour
illustrations rather than flat glyphs. 19 is where the last of the four
becomes identifiable. The pill grows a little to carry it. */
.pix-tag-i{width:19px;height:19px;margin:-3px 0}
.pix-cat-i{width:24px;height:24px}
body.ffinc2-shop.light-mode .pix-tag-i,
body.ffinc2-shop.light-mode .pix-cat-i{filter:none}
.pix-card:hover .pix-tag{
background:color-mix(in srgb,var(--a) 20%,transparent);
border-color:color-mix(in srgb,var(--a) 46%,transparent);
}
.pix-card-n{
display:block;margin:9px 0 0;
font-size:14.5px;font-weight:600;line-height:1.36;color:var(--ink);
/* Two lines reserved. Without it a wrapped title makes its whole grid ROW
taller than its neighbours and the grid goes ragged - measured 345 and
365 at 1280 before this, 271 and 289 at 390. */
min-height:2.72em;
transition:color .18s ease;
}
.pix-card:hover .pix-card-n{color:var(--ai)}
/* The price is the one thing on this page a buyer cannot get for free
elsewhere, so it is the largest object in the card and the unit sits beside
it rather than swallowed into the same run of text. */
.pix-card-p{
display:flex;align-items:baseline;gap:3px;margin:auto 0 0;padding-top:12px;
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
font-variant-numeric:tabular-nums;line-height:1.1;
}
.pix-card-p i{font-style:normal;font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:0}
.pix-card-p em{
margin-left:auto;font-style:normal;font-size:9.5px;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
align-self:center;
}
.pix-card-s{
display:flex;align-items:center;gap:6px;
margin-top:10px;padding-top:9px;
border-top:1px solid var(--hair);
font-size:12px;font-weight:500;color:var(--ink-2);
}
.pix-card-s b{font-weight:700;color:var(--ai)}
.pix-card-s em{font-style:normal;font-weight:500;color:var(--ink-3)}
/* A dot in the card's accent, so even the supplier line carries the category. */
.pix-card-s::before{
content:'';width:5px;height:5px;border-radius:50%;flex:0 0 auto;
background:var(--a);opacity:.9;
}
/* ------------------------------------------------------------------
LIGHT MODE, AND THIS IS THE FIX THE USER ASKED FOR.
Measured before touching it, at 1440 in the harness:
page #EEF6FF
card rgba(255,255,255,.78) -> composites to #FBFDFF
plate #FFFFFF
border rgba(30,107,171,.16) -> ~#D8E5F2 at 1px
shadow 0 1px 2px rgba(10,40,70,.04)
Card against page is a contrast ratio of about 1.04, and the PHOTO PLATE IS
LIGHTER THAN THE CARD IT SITS IN. Three near-whites stacked, one of them
inverted, with a 4%-alpha shadow doing nothing. That is exactly "not very distinguishable", and dark mode escaped it only because the white plate was
doing the job of the card's edge for free.
The fix is not a heavier border on the same ground. It is:
1. the card goes SOLID WHITE, so the plate stops being a brighter hole
punched in it and the two read as one object;
2. the page section goes a step deeper than the card, so the separation
is card-against-ground rather than ground-against-ground;
3. a real two-stop shadow, which is what actually lifts a white card off
a tinted page — a border alone reads as a table cell;
4. the accent wash on the plate and the accent pill stay, which is what
tells the cards apart FROM ONE ANOTHER. */
body.ffinc2-shop.light-mode .pix-card{
--card-g:#FFFFFF;
--card-e:rgba(23,64,102,.13);
--card-sh:0 1px 2px rgba(16,52,86,.06), 0 8px 18px -12px rgba(16,52,86,.16);
--card-sh-h:0 2px 4px rgba(16,52,86,.07), 0 22px 40px -20px rgba(16,52,86,.30);
--plate:#FFFFFF;
}
/* The grid's own ground, a step deeper than the card so white has something
to sit on. It is the section, not the card, that moves — section 6's rule
is that a band returns to the page ground at both ends, so this is a
gradient rather than a block of flat colour with an edge. */
body.ffinc2-shop.light-mode .pix-sec.pix-body{
background:linear-gradient(180deg,var(--pg) 0,#E6F0FB 140px,#E6F0FB calc(100% - 140px),var(--pg) 100%);
}
body.ffinc2-shop.light-mode .pix-shot{
border-bottom-color:color-mix(in srgb,var(--a) 30%,transparent);
}
body.ffinc2-shop.light-mode .pix-card-b{
background:linear-gradient(180deg,color-mix(in srgb,var(--a) 8%,transparent),transparent 90px);
}
body.ffinc2-shop.light-mode .pix-shot-0{background:
linear-gradient(180deg,color-mix(in srgb,var(--a) 15%,transparent),color-mix(in srgb,var(--a) 6%,transparent)),
#F7FBFF}
body.ffinc2-shop.light-mode .pix-card-s{border-top-color:rgba(23,64,102,.11)}
@media (prefers-reduced-motion:reduce){
.pix-row,.pix-row::before,.pix-row-go{transition:none}
.pix-row:hover .pix-row-go{transform:none}
.pix-card,.pix-shot img,.pix-cell{transition:none}
.pix-card:hover{transform:none}
.pix-card:hover .pix-shot img{transform:none}
}
/* ==== THE COMMODITY BRIEF =========================================
Rebuilt in pass 40. What changed and why:
The page used to run identity -> a large centred photograph -> the
specification -> the CTA, and the photograph was the fault: a 1000x1000
white JPEG floating between two blocks of copy, breaking the reading
line and reading as an unfinished template. Runway's physical-goods page
and Rivian's accessory pages both solve the same problem the same way -
contain the image in a plate, put it BESIDE the identity, and make the
two one composed unit. That is the hero here.
Five sections, each hosting its own drift field (section 6): hero,
specification + written copy, FAQ + trade notes, routing, related.
================================================================= */
/* --pgx IS THE PAGE GUTTER AS A TOKEN, not a repeated literal. The related
slider breaks out of it and pads it back on the inside, so the two values
have to be the same number at every width - a hardcoded 48 in one place
and 20 in the other is how that goes wrong silently. */
.pdp-w{--pgx:48px;position:relative;padding:0 var(--pgx) 112px}
/* Each section is its own stacking context so the drift field lands behind
the copy and in front of the section background. position:relative alone
does not do it - the field needs :has(> .ff-flakes){isolation:isolate}
from design-system.css. Section 6. */
.pdp-sec{position:relative}
.pdp-sec-hero{
padding-top:calc(var(--hdr,66px) + 34px);
/* Ground -> lift -> ground, so the hero and the section under it meet
with no colour step and nothing drawn between them. Section 6's rule:
a seam is a chained background, never a full-bleed rule. */
background:linear-gradient(180deg,var(--pg) 0%,var(--pg-2) 58%,var(--pg) 100%);
}
.pdp-sec-spec{padding-top:6px}
.pdp-sec-qa{padding-top:6px}
.pdp-sec-cta{padding-top:6px}
.pdp-sec-rel{padding-top:6px}
.pdp-in{max-width:1180px;margin:0 auto}
/* Section 10i: FULL BLEED IS A PROPERTY OF THE INNER WRAPPER, not the section,
so the page gutters never move and only the measure changes. One rule, the
same one .ab-wrap-full is on the about page - do not invent a second. */
.pdp-in-full{max-width:100%;margin:0}
.pdp-sec-h{margin:0 0 28px}
.pdp-sec-h h2{
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:23px;font-weight:750;letter-spacing:-.015em;margin:0 0 7px;color:var(--ink);
}
.pdp-sec-h p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:70ch}
.pdp-sec-h a{color:var(--ai,var(--ac-ink))}
/* ---- the hero --------------------------------------------------- */
.pdp-hero{
display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);
gap:60px;align-items:start;
}
/* THE PLATE. The shop card's own treatment at four times the size, which
is what keeps the two surfaces reading as one build: contained ground,
contained image, accent ring. object-fit:contain with real padding is
the whole trick - the source files are 1000x1000 on white, and letting
one bleed to the edge of a dark page is the raw white rectangle this
exists to prevent. Square, because the sources are square and a 4/3
crop would letterbox every one of them. */
.pdp-plate{
position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:20px;
display:flex;align-items:center;justify-content:center;
background:var(--plate);
border:1px solid color-mix(in srgb,var(--a) 26%,transparent);
box-shadow:0 30px 70px -34px rgba(0,0,0,.75);
}
body.ffinc2-shop.light-mode .pdp-plate{
border-color:color-mix(in srgb,var(--a) 30%,transparent);
box-shadow:0 2px 4px rgba(16,52,86,.07), 0 28px 56px -28px rgba(16,52,86,.30);
}
.pdp-plate img{
display:block;width:100%;height:100%;object-fit:contain;
padding:26px;box-sizing:border-box;
}
/* A very slight fall-off towards the corners, so 460px of white reads as a
lit surface the product sits on rather than as a flat swatch. It is not a
tint: every source is a cut-out ON white, and section 10w records a
coloured plate drawing a hard white rectangle round each subject. This
stays neutral and only moves luminance. */
.pdp-plate:not(.pdp-plate-0)::before{
content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(78% 68% at 50% 42%,transparent,rgba(16,40,66,.075));
}
/* A ring drawn INSIDE the plate, brightest at the top-left, so the white
ground has an edge of its own against a near-white photograph. Without
it the subject floats in an unbounded white field. */
.pdp-plate::after{
content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
padding:1px;
background:linear-gradient(145deg,color-mix(in srgb,var(--a) 42%,transparent),transparent 58%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
}
/* SIX PRODUCTS HAVE NO USABLE PHOTOGRAPH, and three of them carry the
highest-volume keywords on the build - so on those pages this IS the
hero, not a fallback. It gets the same plate geometry, the category
accent as a real ground rather than an absence, the glyph at hero scale
and one true line. Designed, not missing. */
.pdp-plate-0{
background:
radial-gradient(120% 90% at 30% 22%,color-mix(in srgb,var(--a) 20%,transparent),transparent 70%),
linear-gradient(170deg,color-mix(in srgb,var(--a) 13%,transparent),transparent 62%),
var(--pg-2);
}
body.ffinc2-shop.light-mode .pdp-plate-0{
background:
radial-gradient(120% 90% at 30% 22%,color-mix(in srgb,var(--a) 17%,transparent),transparent 70%),
linear-gradient(170deg,color-mix(in srgb,var(--a) 11%,transparent),transparent 62%),
#F4F9FF;
}
/* A faint square lattice, so the panel has texture rather than being an
empty tinted box. Same device the figure board uses on /shop/. */
.pdp-plate-0::before{
content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:
linear-gradient(to right,color-mix(in srgb,var(--a) 13%,transparent) 1px,transparent 1px),
linear-gradient(to bottom,color-mix(in srgb,var(--a) 13%,transparent) 1px,transparent 1px);
background-size:46px 46px;
-webkit-mask:radial-gradient(90% 80% at 50% 45%,#000,transparent 78%);
mask:radial-gradient(90% 80% at 50% 45%,#000,transparent 78%);
}
.pdp-plate-in{
position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
text-align:center;padding:24px;
}
.pdp-plate-0 .pix-g{width:76px;height:76px;background:none;border-radius:0;opacity:.92}
.pdp-plate-0 .pix-g::before{inset:0}
.pdp-plate-c{
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:16px;font-weight:700;color:var(--ai);letter-spacing:-.01em;
}
.pdp-plate-n{
font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--ink-3);
}
/* The routing block under the plate. It is the page's one action and it
also closes the 330px of empty column the plate left on its own. */
.pdp-route{
margin-top:22px;padding:18px 20px 20px;border-radius:14px;
background:color-mix(in srgb,var(--a) 7%,transparent);
border:1px solid color-mix(in srgb,var(--a) 22%,transparent);
}
.pdp-route-l{
display:block;margin-bottom:7px;
font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ai);
}
.pdp-route-v{margin:0 0 15px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.pdp-route-v b{
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:19px;font-weight:780;color:var(--ink);margin-right:2px;
}
.pdp-route-0{color:var(--ink-3)}
/* ---- the identity column ---------------------------------------- */
.pdp-hero-copy{padding-top:4px}
.pdp-cat{
display:inline-flex;align-items:center;gap:9px;margin:0 0 15px;
padding:6px 13px 6px 9px;border-radius:999px;text-decoration:none;
background:color-mix(in srgb,var(--a) 11%,transparent);
border:1px solid color-mix(in srgb,var(--a) 26%,transparent);
transition:background .16s ease,border-color .16s ease;
}
.pdp-cat:hover{
background:color-mix(in srgb,var(--a) 17%,transparent);
border-color:color-mix(in srgb,var(--a) 40%,transparent);
}
.pdp-cat > span{font-size:12.5px;font-weight:650;color:var(--ai);letter-spacing:.005em}
.pdp-cat .pix-g{width:15px;height:15px;background:none;border-radius:0}
.pdp-cat .pix-g::before{inset:0}
.pdp-h1{
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:clamp(30px,3.5vw,44px);font-weight:780;line-height:1.08;
letter-spacing:-.028em;margin:0 0 14px;color:var(--ink);max-width:17ch;
}
.pdp-lede{margin:0 0 24px;font-size:16.5px;line-height:1.62;color:var(--ink-2);max-width:54ch}
/* Price and reference share one hairline-topped row. */
.pdp-money{
display:flex;align-items:flex-end;gap:32px;flex-wrap:wrap;
padding:18px 0 0;border-top:1px solid var(--hair);
}
.pdp-money-l{
display:block;margin-bottom:5px;
font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ai);
}
.pdp-money-v{
display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:clamp(30px,3.4vw,40px);font-weight:780;letter-spacing:-.03em;
color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;
}
.pdp-money-v i{font-style:normal;font-size:13px;font-weight:550;color:var(--ink-3);letter-spacing:0}
.pdp-money-r code{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
color:var(--ink-2);background:var(--field);padding:5px 9px;border-radius:6px;
border:1px solid var(--hair);
}
.pdp-money-n{margin:14px 0 26px;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:56ch}
/* THE FACT LIST. One surface divided by hairlines, label left and value
right - section 6's one-enclosure rule, and Runway's attribute list.
These are the product's OWN facts, which is the only thing that makes
one of these pages different from the other twenty-five. */
.pdp-facts{margin:0 0 30px;border-top:1px solid var(--hair)}
.pdp-fact{
display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:8px 22px;
padding:15px 0;border-bottom:1px solid var(--hair);align-items:baseline;
}
.pdp-fact dt{
font-size:11.5px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
color:var(--ink-3);
}
.pdp-fact dd{margin:0;min-width:0}
.pdp-fact dd b{
display:block;font-size:14.5px;font-weight:650;color:var(--ink);line-height:1.4;
}
.pdp-fact dd i{
display:block;margin-top:3px;font-style:normal;
font-size:12.5px;line-height:1.55;color:var(--ink-3);
}
/* ---- the action -------------------------------------------------- */
/* FULL WIDTH IN A 460px COLUMN. Side by side they were 230px each and the
longer label ("See 5 verified suppliers") wrapped inside the button. */
.pdp-acts{display:flex;flex-direction:column;gap:9px;margin:0 0 13px}
.pdp-btn{
position:relative;overflow:hidden;
display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:13px 22px;border-radius:11px;text-decoration:none;
font-size:14.5px;font-weight:650;letter-spacing:-.005em;
transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s ease,border-color .16s ease;
}
.pdp-btn .pix-cta-i{
width:17px;height:17px;flex:0 0 17px;background:currentColor;
-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;
transition:transform .18s cubic-bezier(.2,.8,.3,1);
}
.pdp-btn:hover .pix-cta-i{transform:translateX(2px)}
.pdp-btn-pri{
color:#fff;background:linear-gradient(135deg,#1B6FB5,#14528A);
box-shadow:0 14px 30px -14px rgba(20,82,138,.62);
}
.pdp-btn-pri:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(20,82,138,.72)}
/* The sheen the rest of the build's primary CTAs carry. Transform and
opacity only, so it composites. */
.pdp-btn-pri::after{
content:'';position:absolute;top:0;left:-45%;width:38%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
transform:skewX(-18deg) translateX(-140%);opacity:0;
}
.pdp-btn-pri:hover::after{animation:pdpSheen .72s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes pdpSheen{
0%{opacity:0;transform:skewX(-18deg) translateX(-140%)}
22%{opacity:1}
100%{opacity:0;transform:skewX(-18deg) translateX(420%)}
}
.pdp-btn-sec{
color:var(--ink);background:var(--glass);border:1px solid var(--hair-2);
}
.pdp-btn-sec:hover{transform:translateY(-2px);border-color:var(--ai,var(--ac-ink))}
.pdp-btn:focus-visible{outline:2px solid var(--ai,var(--ac-ink));outline-offset:3px}
.pdp-nosell{margin:0;font-size:12px;line-height:1.6;color:var(--ink-3)}
/* ---- the specification grid -------------------------------------- */
/* SECTION RHYTHM, PASS 43. Measured before it was changed: the gap from the
hero's last element to this heading was 58px, spec to FAQ 74, FAQ to the
related row 70 - and none of them moved with the viewport. On a page that
runs 2,311px at 1440 and 4,581px on a phone, four sections at 58-74px apart
read as one continuous column of content. These take the three seams to
78 / 92 / 88 at desktop: more air, not a gap the eye has to cross. Mobile is
held near the old DESKTOP value in the responsive block - the phone page is
already the long one and did not need the same increase. */
.pdp-spec{padding:72px 0 12px;position:relative}
.pdp-tiles{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden;
}
.pdp-tile{
position:relative;padding:23px 22px 25px;background:var(--pg);
display:flex;flex-direction:column;gap:6px;
transition:background .18s ease;
}
.pdp-tile:hover{background:color-mix(in srgb,var(--a) 5%,var(--pg))}
/* The index is the quiet ordinal Runway uses on its attribute rows: it
tells a reader these are a SET to work through, not six loose facts. */
.pdp-tile-i{
position:absolute;top:21px;right:20px;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:11px;font-weight:600;color:var(--ink-3);opacity:.45;
}
.pdp-tile-l{
font-size:11px;font-weight:700;color:var(--ai);letter-spacing:.055em;text-transform:uppercase;
padding-right:26px;
}
.pdp-tile-v{
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:16px;font-weight:700;color:var(--ink);line-height:1.32;letter-spacing:-.012em;
}
.pdp-tile-n{font-size:12.5px;line-height:1.55;color:var(--ink-3)}
/* ---- the written copy region -------------------------------------
Hand-written copy, edited in the product screen, rendered directly under
the specification grid. It renders NOTHING when empty, so the 26 products
whose copy is not written yet leave no reserved gap at all.
PASS 41 GAVE IT A SEAM AND A COLUMN. It was a bare 74ch paragraph block
with 34px above it, which against a full-width six-tile grid read as a
stray paragraph rather than as a section - and nothing told a reader where
our specification stopped and the written copy began. It now opens on a
fading hairline (the build's own seam device, inside a section, so section
6's ban on full-bleed rules does not apply), indents past that rule, and
styles every element the metabox editor can emit: headings, lists, quotes,
tables and code. Whoever writes there gets a finished section whatever
they write. */
.pdp-seo{position:relative;margin:46px 0 0;padding:40px 0 10px}
.pdp-seo::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,
color-mix(in srgb,var(--a) 44%,transparent),
color-mix(in srgb,var(--a) 12%,transparent) 42%,transparent 76%);
}
.pdp-seo-b{
max-width:68ch;padding-left:22px;
font-size:15.5px;line-height:1.78;color:var(--ink-2);
}
.pdp-seo-b > :first-child{margin-top:0}
.pdp-seo-b > :last-child{margin-bottom:0}
.pdp-seo-b h2,.pdp-seo-b h3,.pdp-seo-b h4{
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
color:var(--ink);font-weight:730;letter-spacing:-.015em;margin:30px 0 11px;
}
.pdp-seo-b h2{font-size:22px}
.pdp-seo-b h3{font-size:17.5px}
.pdp-seo-b h4{font-size:15.5px;font-weight:700}
.pdp-seo-b p{margin:0 0 15px}
.pdp-seo-b strong,.pdp-seo-b b{color:var(--ink);font-weight:680}
.pdp-seo-b a{color:var(--ai,var(--ac-ink));text-decoration:none;
border-bottom:1px solid color-mix(in srgb,var(--a) 38%,transparent)}
.pdp-seo-b a:hover{border-bottom-color:var(--ai,var(--ac-ink))}
.pdp-seo-b ul,.pdp-seo-b ol{margin:0 0 15px;padding-left:20px}
.pdp-seo-b li{margin:0 0 7px}
.pdp-seo-b li::marker{color:var(--ai,var(--ac-ink))}
/* A quote is the one thing a writer reaches for that has no default here. */
.pdp-seo-b blockquote{
margin:20px 0;padding:2px 0 2px 18px;
border-left:2px solid color-mix(in srgb,var(--a) 46%,transparent);
color:var(--ink);font-size:16px;line-height:1.7;
}
.pdp-seo-b blockquote p:last-child{margin-bottom:0}
.pdp-seo-b table{
width:100%;margin:0 0 18px;border-collapse:collapse;font-size:14.5px;
}
.pdp-seo-b th,.pdp-seo-b td{
text-align:left;padding:9px 12px;border-bottom:1px solid var(--hair);
}
.pdp-seo-b th{color:var(--ink);font-weight:680;
border-bottom-color:color-mix(in srgb,var(--a) 34%,transparent)}
.pdp-seo-b code{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
padding:1px 6px;border-radius:5px;background:var(--glass);color:var(--ink);
}
.pdp-seo-b img{max-width:100%;height:auto;border-radius:10px;margin:6px 0 16px}
.pdp-seo-b hr{border:0;height:1px;background:var(--hair);margin:26px 0}
/* ---- the FAQ -----------------------------------------------------
PASS 41 BROUGHT IT TO THE /search/ PAGE'S TREATMENT, which is what the
user asked for and which pass 35 had already given the index FAQ. What
shipped in pass 40 was a left-aligned h2 over rows running the full 1180
measure: a plain accordion with no section identity, and questions so
wide the answer under them had nothing to sit against.
Three things make the difference, all of them the build's own: a CENTRED
heading block with the keyword in the accent half, the rows narrowed to
880 and centred under it, and THE ANSWER AS ITS OWN SURFACE - a tinted
panel with a gradient hairline across the top, the same ::before device
.dt-si-card and .pix-faq-a already use. The head is centred and the rows
are NOT: section 10d records why, and it is that centred body copy is
unreadable. */
.pdp-faq{position:relative;padding:80px 0 12px}
/* 800, not 660: the head carries the product's focus keyword, and at 660
a long one ('frozen whole chicken') broke after 'whole' and left the
last word alone on its own line. Measured, not guessed. The ROWS stay
at 880 and stay left-aligned - centred body copy is unreadable. */
.pdp-faq-head{max-width:800px;margin:0 auto 36px;text-align:center;text-wrap:balance}
.pdp-faq-h{
margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:clamp(23px,2.7vw,32px);font-weight:720;letter-spacing:-.026em;
line-height:1.16;color:var(--ink);
}
/* The keyword half in the category accent - the house device, and the reason
the h2 can carry the focus phrase without reading as a label. */
.pdp-faq-h em{font-style:normal;color:var(--ai,var(--ac-ink))}
.pdp-faq-l{max-width:880px;margin:0 auto;border-top:1px solid var(--hair)}
.pdp-faq-i{position:relative;border-bottom:1px solid var(--hair);
transition:background-color .2s ease}
.pdp-faq-i[open]{background:color-mix(in srgb,var(--a) 4%,transparent)}
.pdp-faq-i summary{
position:relative;display:flex;align-items:center;gap:14px;
padding:21px 44px 21px 18px;cursor:pointer;list-style:none;
font-size:15.5px;font-weight:620;color:var(--ink);
transition:color .16s ease;
}
.pdp-faq-i summary::-webkit-details-marker{display:none}
.pdp-faq-i summary:hover{color:var(--ai,var(--ac-ink))}
.pdp-faq-i summary:focus-visible{outline:2px solid var(--ai,var(--ac-ink));outline-offset:-2px}
.pdp-faq-x{
flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.07em;
color:var(--ink-3);font-variant-numeric:tabular-nums;transition:color .18s ease;
}
.pdp-faq-i[open] .pdp-faq-x{color:var(--ai,var(--ac-ink))}
.pdp-faq-q{min-width:0}
/* The left bar grows on open. */
.pdp-faq-i summary::before{
content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
width:2px;height:0;border-radius:2px;background:var(--ai,var(--ac-ink));
transition:height .26s cubic-bezier(.2,.8,.3,1);
}
.pdp-faq-i[open] summary::before{height:calc(100% - 20px)}
/* The + rotates 45deg into a x. It is drawn on the summary now rather than
on a .pdp-faq-m span, so the marker cannot drift out of step with the row. */
.pdp-faq-i summary::after{
content:'';position:absolute;right:16px;top:50%;width:13px;height:13px;
margin-top:-6.5px;background:var(--ink-3);
-webkit-mask:var(--p) center/contain no-repeat;mask:var(--p) center/contain no-repeat;
--p:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
transition:transform .26s cubic-bezier(.2,.8,.3,1),background-color .16s ease;
}
.pdp-faq-i[open] summary::after{transform:rotate(45deg);background:var(--ai,var(--ac-ink))}
.pdp-faq-a{
position:relative;margin:0 14px 16px 44px;padding:18px 22px 19px;
border-radius:12px;
background:color-mix(in srgb,var(--a) 7%,var(--glass));
animation:pixOpen .3s ease;
}
.pdp-faq-a::before{
content:'';position:absolute;top:0;left:18px;right:18px;height:1px;
background:linear-gradient(90deg,
color-mix(in srgb,var(--a) 46%,transparent),
color-mix(in srgb,var(--a) 14%,transparent) 48%,transparent);
}
.pdp-faq-a p{margin:0;font-size:14.5px;line-height:1.75;color:var(--ink-2);max-width:74ch}
/* THE CLOSING PANEL WENT IN PASS 42, and its rules went with it rather than
being left dead for somebody to reach for out of habit - the same call the
.pix-pill deletion made in pass 36. ffinc2_pdp_close_html() survives in PHP
for template 15 only, which renders WooCommerce's own product block and has
none of our hero card, so it is the one surface that still needs a routing
panel. It renders on no live route today. */
/* ---- the rest of the category, as cards --------------------------
PASS 41 REPLACED SIX 48px CHIPS IN A BARE ROW. The user's word was
plain, and it was: the old row carried a thumbnail, a name and a price
in a flat grey strip, which is a bulleted list with pictures. Each card
is now the index card one size down, in the same vocabulary - contained
white plate, the 2px accent cap across the head of the BODY (never
behind the photograph, where pass 33 proved it cannot be seen), the
category wash fading out over the first 80px, and a third line carrying
that product's own supplier count. Three facts per card, the same three
the reader came to this page for. */
/* The FAQ now runs straight into this section, and the FAQ is a centred
880px column while this is full bleed - the width change is the seam, so
nothing is drawn between them (section 6). 56 gives the wider section room
to read as a new one. */
.pdp-rel{position:relative;padding:76px 0 0}
.pdp-rel-h{
display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
margin:0 0 30px;
}
/* 940, MEASURED AGAINST THE LONGEST CATEGORY NAME. At 820 the beef sub -
'See all 14 beef & red meat products' - broke after 'meat' and left
'products' alone on a second line. The sentence runs 872px at 1440; 940
clears it, and at 1280 the head still has 1,072px to sit in. */
.pdp-rel-ht{max-width:940px;min-width:0}
.pdp-rel-h h2{
margin:0 0 7px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:23px;font-weight:750;letter-spacing:-.018em;color:var(--ink);
}
.pdp-rel-h p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.pdp-rel-h a{color:var(--ai,var(--ac-ink));text-decoration:none;
border-bottom:1px solid color-mix(in srgb,var(--a) 38%,transparent)}
.pdp-rel-h a:hover{border-bottom-color:var(--ai,var(--ac-ink))}
/* ---- the slider controls -------------------------------------------
[hidden] IS STATED EXPLICITLY, and that is not belt and braces. The
user-agent [hidden]{display:none} rule is the weakest declaration in the
cascade and any element that sets its own display beats it - the bug
sections 10r and 10v each record, on .pix-card and again on .pix-row. This
element sets display:flex, so without the second rule the arrows would ship
visible on every page whatever the script decided. */
.pdp-rel-nav{display:flex;gap:8px;flex:0 0 auto;padding-bottom:2px}
.pdp-rel-nav[hidden]{display:none!important}
.pdp-rel-b{
position:relative;width:38px;height:38px;padding:0;border-radius:11px;
border:1px solid var(--hair);background:var(--glass);cursor:pointer;
transition:border-color .18s ease,background .18s ease,opacity .18s ease;
}
.pdp-rel-b::before{
content:'';position:absolute;inset:0;margin:auto;width:15px;height:15px;
background:var(--ink-2);
-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;
--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
transition:background .18s ease;
}
.pdp-rel-prev::before{transform:scaleX(-1)}
.pdp-rel-b:hover:not([disabled]){
border-color:color-mix(in srgb,var(--a) 48%,transparent);
background:color-mix(in srgb,var(--a) 10%,transparent);
}
.pdp-rel-b:hover:not([disabled])::before{background:var(--ai,var(--ac-ink))}
.pdp-rel-b:focus-visible{outline:2px solid var(--ai,var(--ac-ink));outline-offset:2px}
.pdp-rel-b[disabled]{opacity:.3;cursor:default}
/* ---- the track ------------------------------------------------------
END TO END. It breaks out of .pdp-w's page gutter with a negative margin
and pads the same gutter back on the inside, so the first card lines up
with the heading above it and with the breadcrumb at the top of the page,
while the row runs off both screen edges instead of stopping short of
them. --pgx is the one place that number is written down.
THE SCROLLBAR IS LEFT VISIBLE ON PURPOSE. Hiding it would leave a mouse
user with no way to move the track at all when the script has not run,
and it doubles as the position indicator a slider needs. It is styled
thin and quiet rather than removed.
scroll-snap is `proximity`, not `mandatory`: with cards this narrow a
mandatory snap fights a flick that was meant to cross four of them. */
.pdp-rel-vp{
display:flex;gap:16px;
margin:0 calc(var(--pgx,48px) * -1);
padding:0 var(--pgx,48px) 14px;
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;scroll-padding-left:var(--pgx,48px);
scrollbar-width:thin;
scrollbar-color:color-mix(in srgb,var(--a) 34%,transparent) transparent;
}
.pdp-rel-vp:focus-visible{outline:2px solid var(--ai,var(--ac-ink));outline-offset:-2px}
.pdp-rel-vp::-webkit-scrollbar{height:6px}
.pdp-rel-vp::-webkit-scrollbar-track{background:transparent}
.pdp-rel-vp::-webkit-scrollbar-thumb{
background:color-mix(in srgb,var(--a) 26%,transparent);border-radius:3px;
}
.pdp-rel-vp::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--a) 44%,transparent)}
/* A FIXED CARD WIDTH, because a slider's card must not resize with the
viewport - if it did, the number of cards on screen would stay the same
and there would be nothing to scroll. 232 is one size down from the index
card, which is what pass 42 asked for and this keeps. */
.pdp-rel-vp > .pdp-rc{flex:0 0 232px;scroll-snap-align:start}
/* ---- the staggered reveal ------------------------------------------
Hidden state is behind .js, which the script adds before it hides
anything, so no-JS and a failed observer both show the full row. The
delay is the card's own index, capped so a long row never crawls.
Transform and opacity only, and each transition runs ONCE - this is
not a loop, and section 10k's cost model does not apply to it. */
.pdp-rel.js .pdp-rc{
opacity:0;transform:translate3d(0,14px,0);
transition:opacity .52s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 65ms),
transform .52s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 65ms),
border-color .18s ease, box-shadow .18s ease;
}
.pdp-rel.js .pdp-rc.on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
.pdp-rel.js .pdp-rc{opacity:1;transform:none;transition:none}
}
.pdp-rc{
position:relative;display:flex;flex-direction:column;overflow:hidden;
border-radius:14px;border:1px solid var(--hair);background:var(--glass);
text-decoration:none;color:inherit;
transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.pdp-rc:hover{
border-color:color-mix(in srgb,var(--a) 48%,transparent);
transform:translateY(-3px);
box-shadow:0 22px 44px -24px rgba(0,0,0,.72);
}
.pdp-rc:focus-visible{outline:2px solid var(--ai,var(--ac-ink));outline-offset:3px}
/* The plate stays pure white. Every photograph is a cut-out on its own white
ground, so a tinted plate draws a hard rectangle around each one - section
10w measured that and reverted it. */
.pdp-rc-shot{
position:relative;display:flex;align-items:center;justify-content:center;
aspect-ratio:4 / 3;overflow:hidden;background:var(--plate,#FFFFFF);
border-bottom:1px solid color-mix(in srgb,var(--a) 24%,transparent);
}
.pdp-rc-shot img{
display:block;width:100%;height:100%;object-fit:contain;padding:10px;
box-sizing:border-box;transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.pdp-rc:hover .pdp-rc-shot img{transform:scale(1.05)}
.pdp-rc-shot-0{
background:
linear-gradient(180deg,color-mix(in srgb,var(--a) 18%,transparent),color-mix(in srgb,var(--a) 7%,transparent)),
var(--pg-2);
flex-direction:column;gap:9px;
}
.pdp-rc-shot-0 .pix-g{width:38px;height:38px;background:none;border-radius:0;opacity:.85}
.pdp-rc-shot-0 .pix-g::before{inset:0}
.pdp-rc-b{
position:relative;display:flex;flex-direction:column;flex:1 1 auto;
padding:14px 15px 15px;
background:linear-gradient(180deg,color-mix(in srgb,var(--a) 9%,transparent),transparent 80px);
}
.pdp-rc-b::before{
content:'';position:absolute;inset:0 0 auto;height:2px;z-index:1;
background:linear-gradient(90deg,var(--a) 0 32%,color-mix(in srgb,var(--a) 34%,transparent) 68%,transparent);
}
/* Two lines reserved. A grid row is only as tall as its tallest card, and one
wrapped product name raises the whole row - section 10u measured it. */
.pdp-rc-n{
font-size:14.5px;font-weight:650;line-height:1.34;color:var(--ink);
min-height:2.68em;transition:color .16s ease;
}
.pdp-rc:hover .pdp-rc-n{color:var(--ai,var(--ac-ink))}
.pdp-rc-p{
margin-top:8px;font-size:18px;font-weight:750;letter-spacing:-.02em;
color:var(--ink);font-variant-numeric:tabular-nums;
}
.pdp-rc-p i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-2);margin-left:2px}
.pdp-rc-s{
margin-top:10px;padding-top:9px;border-top:1px solid var(--hair);
font-size:12px;color:var(--ink-3);
}
.pdp-rc-s b{font-weight:700;color:var(--ai,var(--ac-ink))}
.pdp-rc-s em{font-style:normal;color:var(--ink-3)}
.pdp-rc-go{
position:absolute;right:13px;bottom:14px;width:15px;height:15px;
background:var(--ink-3);opacity:.85;
-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;
--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
transition:transform .18s ease,background .18s ease;
}
.pdp-rc:hover .pdp-rc-go{transform:translateX(3px);background:var(--ai,var(--ac-ink));opacity:1}
@media (prefers-reduced-motion:reduce){
.pdp-btn,.pdp-rc,.pdp-tile,.pdp-rc-go,.pdp-rc-shot img,.pdp-btn .pix-cta-i,
.pdp-faq-i summary::before,.pdp-faq-i summary::after{transition:none}
.pdp-btn:hover,.pdp-rc:hover{transform:none}
.pdp-btn:hover .pix-cta-i,.pdp-rc:hover .pdp-rc-go,
.pdp-rc:hover .pdp-rc-shot img{transform:none}
.pdp-btn-pri:hover::after{animation:none}
.pdp-faq-a{animation:none}
}
/* ---- responsive ------------------------------------------------ */
@media (max-width:1180px){
/* The plate stops being a fixed 460 and becomes a share of the row, so
the identity column keeps a readable measure instead of the image
eating it. */
.pdp-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:40px}
}
@media (max-width:1100px){
.pdp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.pix-list,.pix-head{--pix-cols:52px minmax(0,1fr) 104px 148px 20px}
}
@media (max-width:900px){
/* THE PLATE STAYS ON TOP AND STAYS CONTAINED. It caps at 420 and centres
rather than stretching to the full column width - a square image at
740px wide is most of a phone-and-a-half of screen before the name is
even reached. */
.pdp-hero{grid-template-columns:minmax(0,1fr);gap:30px}
.pdp-hero-art{max-width:420px;width:100%}
.pdp-h1{max-width:20ch}
.pix-ctl-right{margin-left:0;width:100%}
/* The hero stacks, and the board goes full width UNDER the copy -
still a 2x2 board, never a column of lines. */
.pix-hero-in{grid-template-columns:minmax(0,1fr);gap:36px}
.pix-h1{max-width:20ch}
.pix-lede{max-width:64ch}
}
@media (max-width:768px){
.pix-sec{padding-left:20px;padding-right:20px}
/* --pgx carries BOTH the page padding and the slider's breakout, so the
two can never disagree. */
.pdp-w{--pgx:20px}
.pix-bc{margin-bottom:20px}
/* THE PHONE DOES NOT GET THE DESKTOP INCREASE. These land at or just above
what desktop carried before pass 43 (52 / 60 / 56). The phone page is
already 4,500px long; widening the seams there buys nothing a scroll
does not already give, and the ask was "nothing excessive". */
.pdp-spec{padding-top:56px}
.pdp-faq{padding-top:62px}
.pdp-rel{padding-top:58px}
.pdp-seo{margin-top:40px;padding-top:34px}
.pix-cell{padding:22px 18px 20px}
/* THE ROW RESHAPES RATHER THAN SHRINKING. Five columns in 360px is
unreadable, so the supplier count moves under the name and the
chevron goes: the whole row is the tap target anyway. */
.pix-head{display:none}
.pix-row,.pix-cat-h{
grid-template-columns:44px minmax(0,1fr) auto;
gap:2px 14px;align-items:center;
}
.pix-row{padding:14px 4px}
.pix-th{grid-column:1;grid-row:1 / span 2}
.pix-row-n{grid-column:2;grid-row:1}
.pix-row-s{grid-column:2;grid-row:2;text-align:left;margin-top:3px;font-size:12.5px}
.pix-row-s i{display:inline;font-style:normal;color:var(--ink-3);margin-left:4px}
.pix-row-s em{font-size:12px}
.pix-row-p{grid-column:3;grid-row:1 / span 2;font-size:18px}
.pix-row-go{display:none}
.pix-cat-g{grid-column:1;grid-row:1 / span 2;width:32px;height:32px}
.pix-cat-i{width:20px;height:20px}
.pix-cat-t{grid-column:2;grid-row:1}
.pix-cat-c{grid-column:3;grid-row:1;align-self:start}
.pix-cat-h{padding:32px 4px 12px}
/* Two cards across on a phone-sized tablet, and the grid never drops
below two: one card per row is a list with pictures. */
.pix-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
}
@media (max-width:640px){
/* Narrow cards wrap a long product name to three lines, so three is what
gets reserved here - two left the grid ragged at 414 and 390. */
.pix-card-n{min-height:4.08em}
.pdp-tiles{grid-template-columns:1fr}
/* THE ARROWS COME OFF ON A PHONE, and that is a measurement not a taste.
With the nav in the row the heading column was left 238px at 390 - the
h2 'More frozen beef & red meat' in a 238px box - because the buttons and
their gap take 112px of a 350px line. A phone's own affordance for a
horizontal track is the swipe, which needs no chrome, so the row gets its
full measure back and the buttons go. They return at 641. */
.pdp-rel-h{display:block}
.pdp-rel-nav{display:none!important}
/* A NARROWER CARD, STILL A SLIDER. The user asked for the slider on mobile
too - a column of six full-width cards on a phone is the "lengthy block"
this replaced. At 200px with a 12px gap a 390 phone shows one card and
most of the next, which is the peek that says the row continues. */
.pdp-rel-vp{gap:12px}
.pdp-rel-vp > .pdp-rc{flex:0 0 200px}
/* THREE LINES RESERVED, measured not guessed. In a ~170px card a beef name
like "Frozen Beef Shoulder Blade Steak" takes three lines while its
neighbour takes two, and a grid row is only as tall as its tallest card -
268 against 287 at 414 and 259 against 278 at 390. Same fix .pix-card-n
already carries one breakpoint up. */
.pdp-rc-n{min-height:4.02em}
}
@media (max-width:420px){
/* STILL 2x2. Only the type scale moves - the board never becomes a
single column, which is the whole point of the shape. */
.pix-cell{padding:19px 13px 16px}
.pix-cell dt{font-size:9px;letter-spacing:.09em;margin-bottom:7px;min-height:2.6em}
.pix-cell dd{font-size:23px}
.pix-cell dd span{font-size:11px;margin-left:3px}
/* the tick has to clear the label once the padding shrinks, or it draws
through the first character - measured at 390 before this */
.pix-cell::after{width:7px;height:7px}
.pix-cell:nth-child(1)::after{top:7px;left:7px}
.pix-cell:nth-child(2)::after{top:7px;right:7px}
.pix-cell:nth-child(3)::after{bottom:7px;left:7px}
.pix-cell:nth-child(4)::after{bottom:7px;right:7px}
.pix-board-foot{font-size:11.5px}
.pix-row-n{font-size:14.5px}
.pix-row-p{font-size:17px}
.pix-cat-t i{font-size:13px}
.pix-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pix-card-b{padding:12px 12px 13px}
.pix-card-n{font-size:13.5px}
.pix-card-p{font-size:19px}
/* The pill has to stay on one line down to a 360 phone, where two columns
leave a 155px card: at the desktop tracking "Beef & Red Meat" overflowed
by 6px and wrapped, and one wrapped pill raises the whole grid row.
Measured 293 against 307 before this. */
.pdp-rel-vp > .pdp-rc{flex:0 0 182px}
.pix-tag{font-size:9.5px;letter-spacing:.04em;padding:4px 8px 4px 6px;gap:4px}
.pix-tag-i{width:16px;height:16px}
.pix-card-s{font-size:11.5px}
}
/* ==================================================================
THE PRICING SECTION — sourcing
------------------------------------------------------------------
THIS IS THE /search/ PAGE'S OWN VOCABULARY, DELIBERATELY. Section 10c
records that page's .ci block as the house standard for an editorial
section, and section 6 says match the build rather than invent a
treatment. Taken from it, unchanged in intent:
a pill eyebrow -> DROPPED, see below
a headline whose accent half is em -> .pix-lrn-h em
an accent-driven tablist, each tab
carrying its own --sc, active at
color-mix(--sc 10%) on a 38% edge -> .pix-stage
a glass panel with a gradient
hairline tinted by --sc -> .pix-lrn-panel::before
a labelled diagram, not a plot -> .pix-track
a red-tinted risk box -> .pix-lrn-risk
an "ask before you commit" list -> .pix-lrn-ask
a live-counted line at the foot -> .pix-lrn-cov
WHAT IS DIFFERENT is the icons. The archive draws its glyphs from the
Tabler icon font, which is CDN-hosted and therefore invisible in a
local render (section 7) — every glyph here is a CSS mask on
currentColor instead, which is what the rest of this stylesheet
already does.
================================================================== */
.pix-learn .pix-wrap{max-width:1400px;margin:0 auto;padding:0 24px}
/* NO SECTION RULE. Section 6 has said since pass 12 that a seam is a fading
hairline or a chained background, never a full-bleed 1px line, and pass 35
put one across the top of all three closing sections anyway. The user's
verdict: "section delimiter lines are not good design... having them everywhere is an absolute no-no."
The three sections now chain their grounds instead: each runs ground -> lift
-> ground, so there is no colour step at a seam and nothing to rule off. The
about page's .ab-std does exactly this and section 10j records why. */
.pix-lrn{position:relative;padding:76px 0 8px}
/* THE EYEBROW PILL IS GONE, AND IT IS DELETED RATHER THAN LEFT DEAD.
Pass 35 put one above the pricing section ("READING A QUOTE"), the FAQ
("BEFORE YOU SEND IT") and the CTA ("NEXT STEP"). All three were scrubbed on
instruction: an eyebrow has to carry information the headline cannot, and a
mood label above every section is a template rather than a design. The rules
are removed, not commented out, so nobody reaches for the component out of
habit - which is exactly how it ended up on three sections at once.
Humanizer Rule 0b carries the standing version of this. */
.pix-lrn-head{margin:0 0 26px}
.pix-lrn-h{
margin:16px 0 0;
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.028em;
line-height:1.12;color:var(--ink);
}
/* The accent half of the headline. It is also where the page's focus keyword
sits, which is why it is an carrying colour rather than a : the
emphasis is real, not decorative. */
.pix-lrn-h em{font-style:normal;color:var(--ac-ink)}
.pix-lrn-sub{margin:14px 0 0;max-width:46ch;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.pix-lrn-grid{display:grid;grid-template-columns:1fr 1.16fr;gap:44px;align-items:start}
.pix-lrn-grid > *{min-width:0}
/* ---- the stage list ---- */
/* Sticky, and that is the answer to a composition fault the render caught:
the stage column is ~250px shorter than the panel beside it, so it ended in
a void. Section 10m records the same thing on the contact page and the same
diagnosis — a short column next to a long one needs a terminus or a reason
to be short. Sticking it gives the reason: it is a rail you steer with while
you read, not a block that ran out. */
.pix-lrn-rail{min-width:0}
.pix-stages{display:flex;flex-direction:column;gap:8px}
.pix-stage{
display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;cursor:pointer;
background:transparent;border:1px solid var(--hair);border-radius:14px;padding:13px 15px;
font-family:'Inter',system-ui,sans-serif;color:inherit;
transition:background-color .22s ease,border-color .22s ease;
}
.pix-stage:hover{background:color-mix(in srgb,var(--sc) 6%,transparent)}
.pix-stage.is-on{
background:color-mix(in srgb,var(--sc) 10%,transparent);
border-color:color-mix(in srgb,var(--sc) 38%,transparent);
}
.pix-stage:focus-visible{outline:2px solid var(--sc);outline-offset:2px}
.pix-stage-i{
width:28px;height:28px;border-radius:9px;flex:0 0 auto;
background:color-mix(in srgb,var(--sc) 16%,transparent);
position:relative;
}
.pix-stage-i::before,.pix-lrn-pi::before{
content:'';position:absolute;inset:6px;background:var(--sc);
-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;
}
.pix-stage-tx{display:block;min-width:0}
.pix-stage-t{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px}
.pix-stage.is-on .pix-stage-t{color:var(--sc)}
.pix-stage-s{display:block;font-size:11px;color:var(--ink-3);line-height:1.45}
.pix-stage-x{
margin-left:auto;flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.06em;
color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.pix-stage.is-on .pix-stage-x{color:color-mix(in srgb,var(--sc) 78%,transparent)}
/* ---- the panel ---- */
.pix-lrn-panel{
position:relative;overflow:hidden;padding:26px;border-radius:20px;
background:var(--glass);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border:1px solid var(--hair);
}
.pix-lrn-panel::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;opacity:.6;
background:linear-gradient(90deg,transparent,var(--sc),transparent);
}
.pix-track{display:block;width:100%;height:auto;margin-bottom:18px}
/* The rail between the nodes. The first version faded to 5% at both ends and
was invisible on a dark ground — a track nobody can see is not a track. */
.pix-track .pix-nlab{fill:var(--ink-3)}
.pix-node{opacity:.38;transition:opacity .28s ease}
.pix-node.is-on{opacity:1}
.pix-node.is-on .pix-nlab{fill:var(--sc)}
.pix-halo{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .28s ease}
.pix-node.is-on .pix-halo{opacity:.2;animation:pixPulse 2.8s ease-in-out infinite}
@keyframes pixPulse{0%,100%{transform:scale(1);opacity:.2}50%{transform:scale(1.2);opacity:.07}}
.pix-lrn-ph{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.pix-lrn-pi{
width:36px;height:36px;border-radius:11px;flex:0 0 auto;position:relative;
background:color-mix(in srgb,var(--sc) 15%,transparent);
border:1px solid color-mix(in srgb,var(--sc) 28%,transparent);
}
.pix-lrn-pi::before{inset:8px}
.pix-lrn-pt{
display:block;font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:16px;font-weight:700;letter-spacing:-.018em;color:var(--ink);
}
.pix-lrn-ps{display:block;margin-top:2px;font-size:11.5px;color:var(--sc)}
.pix-lrn-why{margin:0 0 16px;font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.pix-lrn-risk{
display:flex;gap:10px;align-items:flex-start;margin-bottom:18px;padding:13px 15px;
border-radius:12px;background:rgba(245,114,107,.07);border:1px solid rgba(245,114,107,.2);
}
.pix-lrn-ri{
width:15px;height:15px;flex:0 0 auto;margin-top:2px;background:#F5726B;
-webkit-mask:var(--w) center/contain no-repeat;mask:var(--w) center/contain no-repeat;
--w:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E");
}
.pix-lrn-rt{font-size:12.5px;line-height:1.6;color:#E8B4B0}
body.ffinc2-shop.light-mode .pix-lrn-rt{color:#94322C}
body.ffinc2-shop.light-mode .pix-lrn-risk{background:rgba(199,62,53,.06);border-color:rgba(199,62,53,.22)}
body.ffinc2-shop.light-mode .pix-lrn-ri{background:#C73E35}
.pix-lrn-al{
margin-bottom:11px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink-3);
}
.pix-lrn-ask{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pix-lrn-ask li{
position:relative;padding-left:22px;font-size:12.5px;line-height:1.55;color:var(--ink-2);
}
.pix-lrn-ask li::before{
content:'';position:absolute;left:0;top:2px;width:14px;height:14px;background:var(--sc);
-webkit-mask:var(--q) center/contain no-repeat;mask:var(--q) center/contain no-repeat;
--q:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.4 9.4a2.7 2.7 0 1 1 3.4 2.6c-.6.2-.8.7-.8 1.3v.4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.pix-lrn-cov{
margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);
font-size:11.5px;line-height:1.55;color:var(--ink-3);
}
.pix-lrn-cov b{color:var(--ac-ink);font-weight:700}
/* The swap fade. Restarted from the script by removing the class and forcing
a reflow, because setting it twice in one frame does nothing at all. */
.pix-lrn-panel.is-swap .pix-lrn-ph,
.pix-lrn-panel.is-swap .pix-lrn-why,
.pix-lrn-panel.is-swap .pix-lrn-risk,
.pix-lrn-panel.is-swap .pix-lrn-al,
.pix-lrn-panel.is-swap .pix-lrn-ask{animation:pixFade .32s ease}
@keyframes pixFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ---- the stage icons, as masks ---- */
.pix-i-spec::before{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E")}
.pix-i-scale::before{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M6 6h12'/%3E%3Cpath d='M6 6 3 13a3 3 0 0 0 6 0z'/%3E%3Cpath d='M18 6l-3 7a3 3 0 0 0 6 0z'/%3E%3Cpath d='M8 20h8'/%3E%3C/svg%3E")}
.pix-i-box::before{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5 12 3.2l8.5 4.3v9L12 20.8 3.5 16.5z'/%3E%3Cpath d='M3.5 7.5 12 11.8l8.5-4.3M12 11.8v9'/%3E%3C/svg%3E")}
.pix-i-ship::before{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.5c1.6 0 1.6 1.4 3.2 1.4s1.6-1.4 3.2-1.4 1.6 1.4 3.2 1.4 1.6-1.4 3.2-1.4 1.6 1.4 3.2 1.4'/%3E%3Cpath d='M4.6 14.2 6 9.4h12l1.4 4.8'/%3E%3Cpath d='M9 9.4V6h6v3.4M12 3v3'/%3E%3C/svg%3E")}
.pix-i-temp::before{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13.5V5a2 2 0 0 1 4 0v8.5a4 4 0 1 1-4 0z'/%3E%3Cpath d='M12 17.5v-2'/%3E%3C/svg%3E")}
.pix-i-cal::before{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Cpath d='M8 14h3'/%3E%3C/svg%3E")}
.pix-i-shield::before{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v6c0 4.4 3.1 7.9 7.5 9 4.4-1.1 7.5-4.6 7.5-9V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.4 10'/%3E%3C/svg%3E")}
/* ---- scroll reveal ----
Nothing is hidden unless the script has run AND committed to showing it
again: .pix-rv is added by the same function that schedules the reveal,
and that function carries a 6-second deadline as well as an observer.
Section 10f records a reveal that a fast scroll outran, leaving the
chronology permanently blank. */
.pix-rv [data-rv]{opacity:0;transform:translateY(14px);
transition:opacity .52s cubic-bezier(.2,.8,.3,1),transform .52s cubic-bezier(.2,.8,.3,1)}
.pix-rv [data-rv].is-in{opacity:1;transform:none}
@media (max-width:1100px){
.pix-lrn-grid{grid-template-columns:1fr;gap:26px}
.pix-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.pix-lrn-head{max-width:62ch}
}
@media (max-width:640px){
.pix-lrn{padding-top:52px}
.pix-lrn-panel{padding:20px 17px}
.pix-stages{grid-template-columns:1fr}
.pix-track{margin-bottom:14px}
}
@media (prefers-reduced-motion:reduce){
.pix-node.is-on .pix-halo{animation:none}
.pix-lrn-panel.is-swap .pix-lrn-ph,.pix-lrn-panel.is-swap .pix-lrn-why,
.pix-lrn-panel.is-swap .pix-lrn-risk,.pix-lrn-panel.is-swap .pix-lrn-al,
.pix-lrn-panel.is-swap .pix-lrn-ask{animation:none}
.pix-rv [data-rv]{opacity:1;transform:none;transition:none}
.pix-stage{transition:none}
}
/* ==================================================================
THE FOOT OF THE INDEX — CTA, then FAQ
------------------------------------------------------------------
These replace the "Indicative means..." explainer card. It repeated
the lede and every price row, and closed a page whose whole job is
to hand the buyer to a supplier on a caveat instead of an action.
================================================================== */
.pix-foot .pix-wrap{max-width:1400px;margin:0 auto;padding:0 24px}
/* THE CHAINED GROUNDS, AND THIS IS WHAT REPLACES THE RULES.
Section 6: a band returns to the page ground at both ends, so it needs no
line to separate it and cannot show a step whichever section follows. The
pricing band lifts, the FAQ returns to ground, the CTA lifts again into its
own aura - an alternating rhythm reads as three sections without a single
border between them. */
.pix-sec.pix-learn,.pix-sec.pix-qa,.pix-sec.pix-foot{position:relative}
.pix-sec.pix-learn{
background:linear-gradient(180deg,transparent 0,var(--band) 120px,var(--band) calc(100% - 120px),transparent 100%);
}
.pix-sec.pix-qa{background:none}
body.ffinc2-shop{--band:rgba(74,159,224,.045)}
body.ffinc2-shop.light-mode{--band:rgba(30,107,171,.05)}
/* THE PHOTO GROUND IS A SURFACE TOKEN, NOT A CARD TOKEN. It was declared on
.pix-card, so .pdp-plate - the one place it matters most, at 460px rather
than 224 - resolved var(--plate) to nothing and the lead image sat on a
transparent ground. The card still overrides it; it just is not the only
thing that can read it now.
White is correct and deliberate: every source file is a cut-out on white,
so a tinted plate would draw a hard white rectangle around each subject -
the fault section 10w records finding in a render and reverting. */
body.ffinc2-shop{--plate:#FFFFFF}
.pix-cta-i-find{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8'/%3E%3Cpath d='m20 20-4.4-4.4'/%3E%3C/svg%3E")}
/* ---- the CTA ----------------------------------------------------
A BAND, NOT A PANEL.
Pass 31 made this a raised glass object with a gradient ring and a long
shadow, borrowed from the contact page's form panel. That was right on a
page whose job is one form. It is wrong here: the index above it is now
bare rows on hairlines, so a 22px-radius glass box is the only enclosure
left on the page and reads as something left over from a different
design. §6's rule is that a band returns to the page ground at both
ends, and that is what this does — a hairline, air, copy left, actions
right, nothing drawn around it. */
.pix-cta{
position:relative;margin:0;padding:72px 0 90px;
}
/* PASS 35 — this is now the LAST thing on the page, so it gets a closing
gesture the middle-of-page version could not have: a wide soft aura behind
it in the accent, the same device design-system.css uses for .pg-aura. CSS
blur only, no asset, no script. It is masked to fade out at both ends so
the section still returns to the page ground, which is section 6's rule. */
.pix-cta::before{
content:'';position:absolute;left:50%;top:0;width:min(1100px,120%);height:100%;
transform:translateX(-50%);pointer-events:none;z-index:0;
background:radial-gradient(58% 72% at 50% 4%,color-mix(in srgb,var(--ac) 20%,transparent),transparent 70%);
}
.pix-cta-in{
position:relative;z-index:1;
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px 56px;
align-items:start;
}
.pix-cta-acts{margin-top:26px}
.pix-cta-h{
margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:clamp(22px,2.4vw,29px);font-weight:700;letter-spacing:-.022em;
line-height:1.16;color:var(--ink);
}
.pix-cta-b{
margin:12px 0 0;max-width:62ch;
font-size:15.5px;line-height:1.62;color:var(--ink-2);
}
/* ---- the three steps ----
The section was a headline and two buttons, which is a banner rather than a
close. These say what actually happens next, which is the honest way to give
it weight. Numbered, one line each, on a hairline-divided surface - section
6's one-enclosure rule, so no card inside the band. */
.pix-cta-steps{
list-style:none;margin:6px 0 0;padding:0;
display:grid;gap:0;
}
.pix-cta-step{
display:flex;align-items:baseline;gap:14px;
padding:13px 0;
}
.pix-cta-step + .pix-cta-step{border-top:1px solid var(--hair)}
.pix-cta-sn{
flex:0 0 auto;width:22px;
font-size:10.5px;font-weight:700;letter-spacing:.07em;
color:var(--ac-ink);font-variant-numeric:tabular-nums;
}
.pix-cta-st{display:block;min-width:0}
.pix-cta-st b{display:block;font-size:14.5px;font-weight:650;color:var(--ink)}
.pix-cta-st i{display:block;margin-top:3px;font-style:normal;font-size:13px;
color:var(--ink-3);line-height:1.5}
.pix-cta-acts{display:flex;gap:12px;flex-wrap:wrap}
/* THE HOVER IS THE BUILD'S OWN, NOT A NEW ONE. Section 10j records the
treatment pass 22 shipped on every CTA in the build: the button lifts 2px,
its shadow deepens, the icon leads by 2px, and a skewed sheen sweeps the
filled one. Section 6 says match the build rather than invent a treatment,
so this is that rule applied to the two buttons that were missing it -
transform and opacity only, and all of it dropped under reduced motion. */
.pix-cta-btn{
position:relative;overflow:hidden;isolation:isolate;
display:inline-flex;align-items:center;gap:9px;
padding:12px 20px;border-radius:10px;
font-size:14.5px;font-weight:650;text-decoration:none;
transition:background .16s ease,border-color .16s ease,color .16s ease,
transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease;
}
.pix-cta-pri{
background:linear-gradient(135deg,#1B6FB5,#14528A);
color:#fff;border:1px solid transparent;
box-shadow:0 6px 16px -8px rgba(10,40,70,.32);
}
.pix-cta-pri:hover{
background:linear-gradient(135deg,#2480CB,#1A639F);
box-shadow:0 12px 26px -10px rgba(10,40,70,.44);
}
.pix-cta-sec{
background:none;border:1px solid var(--hair-2);color:var(--ink);
}
.pix-cta-sec:hover{
border-color:var(--ac);color:var(--ac-ink);
box-shadow:0 10px 22px -14px rgba(10,40,70,.36);
}
.pix-cta-btn:hover{transform:translateY(-2px)}
.pix-cta-btn:active{transform:translateY(0)}
/* The icon leads the label out of the button. */
.pix-cta-btn .pix-cta-i{transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.pix-cta-btn:hover .pix-cta-i{transform:translateX(2px)}
/* The sheen. Filled button only - there is nothing for it to travel across on
an outlined one. Pseudo-element so it needs no markup, and behind the label
via z-index rather than by lowering the text. */
.pix-cta-pri::after{
content:'';position:absolute;top:-60%;bottom:-60%;left:-40%;width:38%;
z-index:-1;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
transform:translateX(-160%) skewX(-18deg);
}
.pix-cta-pri:hover::after{transition:transform .62s cubic-bezier(.3,.6,.3,1);
transform:translateX(420%) skewX(-18deg)}
.pix-cta-btn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
/* The third route, for the other reader entirely. A quiet line, not a button:
a supplier arriving on a price index is not the person this page is for. */
.pix-cta-alt{
position:relative;z-index:1;grid-column:1 / -1;
display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline;
margin:36px 0 0;padding-top:22px;
font-size:13.5px;color:var(--ink-3);
}
/* A FADING hairline, not a rule. The build's own seam treatment since pass 12
(.dt-si-card::before, .dt-cert-lbl::after): full strength at the left, gone
by three quarters across. */
.pix-cta-alt::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,var(--hair-2),transparent 72%);
}
.pix-cta-alt b{color:var(--ac-ink);font-weight:700}
.pix-cta-alt a{color:var(--ac-ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ac) 38%,transparent)}
.pix-cta-alt a:hover{border-bottom-color:var(--ac-ink)}
.pix-cta-i{
width:16px;height:16px;flex:0 0 auto;background:currentColor;
-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;
}
.pix-cta-i-db{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5.5' rx='7.5' ry='3'/%3E%3Cpath d='M4.5 5.5v6c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3v-6'/%3E%3Cpath d='M4.5 11.5v6c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3v-6'/%3E%3C/svg%3E")}
.pix-cta-i-add{--g:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
@media (max-width:900px){
.pix-cta-in{grid-template-columns:1fr;gap:30px}
.pix-cta-steps{margin-top:0}
}
@media (max-width:640px){
.pix-cta{padding:54px 0 68px}
.pix-cta-acts{width:100%;padding-top:0}
.pix-cta-btn{flex:1 1 auto;justify-content:center}
.pix-cta-steps{margin-top:22px}
.pix-cta-st{gap:1px 8px}
.pix-cta-st i{font-size:13px}
}
/* ---- the FAQ ----------------------------------------------------
details/summary, so it is keyboard-reachable and open-able with no
JavaScript at all, and details[name] gives one-open-at-a-time from
the markup — the same mechanism section 10d records on the archive.
PASS 35 gave it a section identity rather than a bare accordion under
a plain h2: a pill, a centred heading block, indexed rows, and a
tinted ground on the open row so the answer you are reading is the
thing lit on the page. The heading block is centred and the ROWS ARE
NOT — section 10d records why: centred body copy is unreadable. */
.pix-qa .pix-wrap{max-width:1400px;margin:0 auto;padding:0 24px}
.pix-faq{position:relative;margin:0;padding:76px 0 8px}
.pix-faq-head{max-width:640px;margin:0 auto 30px;text-align:center}
.pix-faq-h{
margin:16px 0 0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.026em;
line-height:1.14;color:var(--ink);
}
.pix-faq-l{max-width:880px;margin:0 auto}
.pix-faq-i{position:relative;border-bottom:1px solid var(--hair);transition:background-color .2s ease}
/* The open ROW lifts a little; the ANSWER below carries the real ground - see
.pix-faq-a. A 5% wash over the whole row was too faint to separate the open
answer from the section that follows it, which is what the user reported. */
.pix-faq-i[open]{background:color-mix(in srgb,var(--ac) 4%,transparent)}
.pix-faq-i summary{
position:relative;display:flex;align-items:center;gap:14px;
padding:18px 44px 18px 18px;cursor:pointer;list-style:none;
font-size:15.5px;font-weight:600;color:var(--ink);
transition:color .16s ease;
}
.pix-faq-i summary::-webkit-details-marker{display:none}
.pix-faq-i summary:hover{color:var(--ac-ink)}
.pix-faq-i summary:focus-visible{outline:2px solid var(--ac-ink);outline-offset:-2px}
/* The row index. It makes four questions read as a set rather than as four
unrelated lines, and it is what the eye tracks down the left edge. */
.pix-faq-x{
flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.07em;
color:var(--ink-3);font-variant-numeric:tabular-nums;transition:color .18s ease;
}
.pix-faq-i[open] .pix-faq-x{color:var(--ac-ink)}
.pix-faq-q{min-width:0}
/* The left bar grows on open — the archive FAQ's own treatment. */
.pix-faq-i summary::before{
content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
width:2px;height:0;border-radius:2px;background:var(--ac-ink);
transition:height .26s cubic-bezier(.2,.8,.3,1);
}
.pix-faq-i[open] summary::before{height:calc(100% - 20px)}
/* The + rotates 45deg into a x. */
.pix-faq-i summary::after{
content:'';position:absolute;right:16px;top:50%;width:13px;height:13px;
margin-top:-6.5px;background:var(--ink-3);
-webkit-mask:var(--p) center/contain no-repeat;mask:var(--p) center/contain no-repeat;
--p:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");transition:transform .26s cubic-bezier(.2,.8,.3,1),background-color .16s ease}.pix-faq-i[open] summary::after{transform:rotate(45deg);background:var(--ac-ink)}.pix-faq-a{position:relative;margin:0 14px 16px 44px;padding:18px 22px 19px;border-radius:12px;background:color-mix(in srgb,var(--ac) 7%,var(--glass));animation:pixOpen .3s ease}.pix-faq-a::before{content:'';position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 46%,transparent),color-mix(in srgb,var(--ac) 14%,transparent) 48%,transparent)}.pix-faq-a p{margin:0;font-size:14.5px;line-height:1.75;color:var(--ink-2);max-width:74ch}@keyframes pixOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@media (max-width:640px){.pix-faq{padding-top:52px}.pix-faq-i summary{padding:16px 38px 16px 14px;gap:10px;font-size:14.5px}.pix-faq-a{margin:0 10px 14px 14px;padding:15px 16px 16px}}@media (prefers-reduced-motion:reduce){.pix-cta-btn:hover,.pix-stat:hover dd{transform:none}.pix-cta-btn:hover .pix-cta-i{transform:none}.pix-cta-pri::after{display:none}.pix-faq-i summary::before,.pix-faq-i summary::after{transition:none}.pix-faq-a{animation:none}}