body .wp-block-navigation__responsive-container.is-menu-open {
display: flex !important;
}
/* =============================================================================
DESIGN SYSTEM TOKENS
-----------------------------------------------------------------------------
Single source of truth for the site. Every value below is also registered as
a WordPress preset colour (see mistra-brand-styling.php), so a change made
here and a change made there stay in step, and block editor colours match
what renders on the page.
Purple is reserved. It appears on buttons, prices, links and active states
and nowhere else. Headings and product titles are off-white, body copy is
the muted grey. A page where purple means everything means nothing.
========================================================================== */
:root {
/* Surfaces, darkest to lightest. */
--bg: var(--wp--preset--color--bg);
--surface: var(--wp--preset--color--surface);
--surface-2: var(--wp--preset--color--surface-2);
--border: var(--wp--preset--color--line);
/* Ink. */
--text: var(--wp--preset--color--text);
--text-muted: var(--wp--preset--color--muted);
/* The one accent, and its gradient partner. */
--accent: var(--wp--preset--color--accent);
--accent-2: var(--wp--preset--color--accent-2);
--accent-gradient: var(--wp--preset--gradient--accent);
/* Shape. */
--radius: 16px;
--radius-sm: 10px;
/* Spacing scale, 8px multiples. */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-6: 48px;
--space-8: 64px;
/* Vertical breathing room between page sections. */
--section-gap: 80px;
/* The one container. Header, every section and the footer all sit in this. */
--container: 1200px;
--container-pad: 24px;
/* Kept short so a row of cards does not visibly reflow under the pointer. */
--dur-fast: 160ms;
--dur: 240ms;
--ease: cubic-bezier(0.2, 0, 0.2, 1);
}
@media (max-width: 781px) {
:root {
--section-gap: 48px;
--container-pad: 20px;
}
}
/* ---------------------------------------------------------------------------
The container
One width and one padding for the header, every section and the footer.
Ollie's constrained layout caps content at 740px, which is a reading measure
for a blog post rather than a shop layout. Every band is widened to the real
container here so the logo, the section headings, the category grid, the
product grid and the footer all start on the same left edge.
!important on the padding is not laziness. Ollie paints horizontal padding
as a class-generated rule (has-global-padding) at equal specificity, and a
later rule of the same weight wins, which is how three different left edges
crept into the page. The container has to be the last word. */
body .is-layout-constrained > .alignfull,
body .is-layout-constrained > .alignwide,
.mistra-header-inner,
.site-footer > .alignwide {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--container-pad) !important;
}
/* main carries the theme's own 16px page gutter. Left in place it would
shrink the container and shift it 16px right of centre, so the footer and
the header, which sit outside main, would no longer line up with it. */
body main.is-layout-constrained.has-global-padding {
padding: 0 !important;
}
/* Sections breathe. The rule is on the section, not the inner group, so the
gap does not eat into the container and the left edge stays put. */
body .mistra-section {
padding-block: calc(var(--section-gap) / 2);
}
/* An alternating background spans the full width of the page, not the
container, or the band would stop short of both edges. The huge spread
shadow paints the bleed and the clip-path trims it off again. */
body .mistra-alt {
box-shadow: 0 0 0 100vmax var(--surface-2);
clip-path: inset(0 -100vmax 0 -100vmax);
}
/* WordPress caps EVERY element inside a constrained layout at the global
content size, not just the direct children, and centres it:
.is-layout-constrained :where(:not(.alignleft):not(.alignright):not(.alignfull))
{ max-width: 740px; margin-inline: auto }
740px is a reading measure for a blog post. It is not a shop layout, and
it is what was capping the hero, the category grid and the product grid at
two-thirds of the container. Anything that is explicitly a band or a grid
opts out here.
Text keeps the measure: nothing below touches a paragraph, so body copy
still wraps at a comfortable line length. */
body .is-layout-constrained .mistra-hero-swiper,
body .is-layout-constrained .alignwide,
body .is-layout-constrained .alignfull > .wp-block-columns,
body .is-layout-constrained .wp-block-woocommerce-product-collection {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* No extra padding is added here. The grid sits inside an .alignfull section,
which already carries the container padding, and doubling it would push
the grids 24px further right than the logo and the headings. */
/* ...but the .alignwide class itself carries a root padding, so a grid inside
an already-padded section ends up indented twice. Stripped rather than
rebalanced, because the section is the thing that owns the container. */
body .mistra-section .alignwide,
body .site-header .mistra-header-inner > .alignwide {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* The header wraps the container in an outer band and the nav in an inner
alignwide, and both add their own horizontal padding. Three layers of it is
why the logo sat 40px right of the section headings. The container is one
rule, applied once. */
body .site-header > .alignfull {
padding-inline: 0 !important;
}
body .site-footer > * {
padding-inline: 0 !important;
}
/* Alternating section background. Applied by the template, so the rhythm is
visible in the markup rather than inferred from an index number. */
.mistra-alt {
background-color: var(--surface-2);
}
/* =============================================================================
TYPOGRAPHY ROLES
Purple is not used for headings. Off-white, sized by role.
========================================================================== */
body {
color: var(--text-muted);
}
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
color: var(--text);
}
/* Body copy carries the muted grey. Headings and card titles carry --text. */
.wp-block-paragraph:not(.has-text-color),
p {
color: var(--text-muted);
}
/* =============================================================================
FOCUS
Keyboard users need to see where they are. The default outline is removed
by the theme on several elements, so it is restated once, here, rather than
re-added to each component.
========================================================================= */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* =============================================================================
REDUCED MOTION
Every transition in this file is under 300ms and none of them carry
information, so removing them entirely loses nothing.
========================================================================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* =============================================================================
HERO SLIDER
-----------------------------------------------------------------------------
Three slides at a fixed height. Copy is left-aligned over a left-to-right
scrim, with the product sitting on the right.
The previous version put a photograph behind each slide. Two of the three
images in the library are collages with marketing headlines, a second
wordmark and visible white seam lines baked into the pixels; the third is
a single clean shot with a third wordmark across the middle. Baked-in text
cannot be translated, indexed or resized, and at 520px tall a collage read
as a mistake rather than a design. A brand wash plus the real product
cutout keeps the headline clear and puts every word in HTML.
The old files stay in the media library, unused and undeleted.
========================================================================== */
.mistra-hero-slider-wrap {
padding: 0 !important;
overflow: hidden;
}
.mistra-hero-swiper {
width: 100%;
height: 520px;
position: relative;
border-radius: var(--radius);
overflow: hidden;
/* Stops the page background showing through the fade between slides. */
isolation: isolate;
}
.mistra-hero-slide {
display: flex !important;
align-items: center;
gap: var(--space-6);
padding: var(--space-6) var(--space-4);
position: relative;
overflow: hidden;
background-color: var(--bg);
/* A flat brand gradient, plus two off-centre radials so the surface has
a light source rather than reading as a printed swatch. */
background-image:
radial-gradient(120% 150% at 76% 16%, rgba(168, 85, 247, 0.40) 0%, rgba(168, 85, 247, 0) 58%),
radial-gradient(110% 130% at 10% 94%, rgba(124, 58, 237, 0.32) 0%, rgba(124, 58, 237, 0) 62%),
linear-gradient(135deg, #1b1033 0%, #0f0f16 56%, #140f26 100%);
}
/* Slide two leans the other way, so the rotation is visible rather than
implied. Same two radials, mirrored. */
.mistra-hero-slide-alt {
background-image:
radial-gradient(120% 150% at 22% 20%, rgba(124, 58, 237, 0.38) 0%, rgba(124, 58, 237, 0) 58%),
radial-gradient(110% 130% at 88% 90%, rgba(168, 85, 247, 0.30) 0%, rgba(168, 85, 247, 0) 62%),
linear-gradient(315deg, #1b1033 0%, #0f0f16 56%, #140f26 100%);
}
/* The scrim. This is what buys the headline its contrast: the left third is
pushed close to the page black so white text clears AA comfortably, and it
falls away to nothing by the time it reaches the product. */
.mistra-hero-slide::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(10, 10, 15, 0.94) 0%,
rgba(10, 10, 15, 0.86) 30%,
rgba(10, 10, 15, 0.58) 55%,
rgba(10, 10, 15, 0.10) 78%,
rgba(10, 10, 15, 0) 100%
);
}
.mistra-hero-content {
position: relative;
z-index: 2;
flex: 1 1 auto;
max-width: 560px;
min-width: 0;
}
/* No card behind the copy. The scrim above already carries the contrast,
so a second box would just be a rectangle with a shadow on top of it. */
.mistra-hero-eyebrow {
margin: 0 0 var(--space-2);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
}
.mistra-hero-eyebrow::before {
content: "";
display: inline-block;
width: 22px;
height: 2px;
margin-right: 10px;
vertical-align: middle;
background: var(--accent);
border-radius: 2px;
}
.mistra-hero-title {
margin: 0 0 var(--space-2);
font-size: clamp(2rem, 4.2vw, 3.25rem);
line-height: 1.06;
font-weight: 700;
letter-spacing: -0.022em;
color: var(--text);
}
.mistra-hero-copy {
margin: 0 0 var(--space-4);
max-width: 46ch;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--text-muted);
}
.mistra-hero-buttons {
gap: var(--space-2);
display: flex;
flex-wrap: wrap;
}
/* Both calls to action are the same size. A 48px target clears the 44px
minimum for touch and stops the pair from looking like a primary button
with a caption next to it. */
.mistra-hero-buttons .wp-block-button {
margin-bottom: 0;
}
.mistra-hero-buttons .wp-element-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0.7rem 1.6rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
}
/* Secondary action: outline, not a second gradient. Two filled gradients side
by side is a hierarchy with no bottom rung. */
.mistra-hero-buttons .is-style-outline .wp-element-button {
background-color: transparent;
background-image: none;
border: 1px solid var(--accent);
color: var(--accent);
box-shadow: none;
}
.mistra-hero-buttons .is-style-outline .wp-element-button:hover {
background-color: var(--accent);
color: var(--bg);
border-color: var(--accent);
}
/* The product. Absolutely placed so it can bleed past the right edge without
pushing the copy around, and decorative so a screen reader skips it. */
.mistra-hero-art {
position: absolute;
z-index: 1;
right: -3%;
top: 50%;
transform: translateY(-50%);
width: 44%;
max-width: 460px;
pointer-events: none;
}
.mistra-hero-art img {
display: block;
width: 100%;
height: auto;
/* The cutouts are background-removed, so contain is what we want and
cover would crop the tips of tall devices. */
object-fit: contain;
filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
}
/* Dots, bottom left, aligned to the copy rather than floating in the middle
of the slide. */
.mistra-hero-pagination {
position: absolute;
bottom: var(--space-3);
left: var(--space-4);
z-index: 3;
display: flex;
align-items: center;
gap: 8px;
/* The bullets are 10px, which is under the 44px touch minimum. The hit
area is padded out to 24px and the visible dot stays small. */
padding: 8px 4px;
margin: -8px -4px;
}
.mistra-hero-pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(244, 244, 248, 0.34);
opacity: 1;
margin: 0;
transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mistra-hero-pagination .swiper-pagination-bullet-active {
width: 26px;
background: var(--accent);
}
.mistra-hero-pagination .swiper-pagination-bullet:hover {
background: rgba(244, 244, 248, 0.6);
}
.mistra-hero-pagination .swiper-pagination-bullet-active:hover {
background: var(--accent);
}
/* Arrows, bottom right, out of the headline's way. Swiper sets display:none
on these inside its own container, so the display needs !important to
come back. */
.mistra-hero-swiper .swiper-button-prev,
.mistra-hero-swiper .swiper-button-next {
position: absolute;
bottom: var(--space-3);
top: auto;
transform: none;
width: 44px;
height: 44px;
border-radius: 999px;
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
background-color: rgba(20, 20, 28, 0.86);
border: 1px solid var(--border);
color: var(--text);
opacity: 1;
visibility: visible;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mistra-hero-swiper .swiper-button-prev { right: 64px; }
.mistra-hero-swiper .swiper-button-next { right: var(--space-3); }
.mistra-hero-swiper .swiper-button-prev:hover,
.mistra-hero-swiper .swiper-button-next:hover {
background-color: var(--accent);
border-color: var(--accent);
color: var(--bg);
}
.mistra-hero-swiper .swiper-button-prev::after,
.mistra-hero-swiper .swiper-button-next::after {
content: "";
width: 18px;
height: 18px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.mistra-hero-swiper .swiper-button-prev::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
}
.mistra-hero-swiper .swiper-button-next::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}
/* Swiper hides slides until it initialises, which flashes the page empty.
Showing the first one and hiding the rest avoids the flash without
needing a no-JS fallback. */
.mistra-hero-swiper:not(.swiper-initialized) .swiper-slide {
display: none !important;
}
.mistra-hero-swiper:not(.swiper-initialized) .swiper-slide:first-child {
display: flex !important;
}
/* ---------------------------------------------------------------------------
Phones. 420px tall, copy takes the full width, the product steps back into
a faint backdrop so it cannot compete with the headline, and the two
buttons stack and go edge to edge.
------------------------------------------------------------------------ */
@media (max-width: 781px) {
.mistra-hero-swiper {
height: 420px;
border-radius: 12px;
}
.mistra-hero-slide {
padding: var(--space-4);
align-items: flex-end;
}
.mistra-hero-content {
max-width: none;
}
.mistra-hero-title {
font-size: clamp(2rem, 8vw, 2.25rem);
}
.mistra-hero-copy {
font-size: 1rem;
max-width: none;
}
.mistra-hero-buttons {
flex-direction: column;
align-items: stretch;
}
.mistra-hero-buttons .wp-element-button {
width: 100%;
}
/* Vertical on a phone: the copy is at the bottom, so it darkens upward
from there and the top stays open for the product. */
.mistra-hero-slide::before {
background: linear-gradient(
180deg,
rgba(10, 10, 15, 0.55) 0%,
rgba(10, 10, 15, 0.80) 42%,
rgba(10, 10, 15, 0.95) 100%
);
}
.mistra-hero-art {
right: -10%;
top: 6%;
transform: none;
width: 62%;
opacity: 0.32;
}
.mistra-hero-pagination {
bottom: auto;
top: var(--space-2);
left: var(--space-3);
}
.mistra-hero-swiper .swiper-button-prev,
.mistra-hero-swiper .swiper-button-next {
display: none !important;
}
}
/* Header separator: a glowing hairline between the header and
/* Header separator: a glowing hairline between the header and
the page body.
The reference shape is a thin bright core that fades to
nothing at both ends, sitting inside a much softer bloom
that is widest in the middle. That needs two layers:
- the core is the separator element itself, a 2px rule
painted with a horizontal gradient that goes fully
transparent at the extremes.
- the bloom is a pseudo-element behind it, blurred and
stretched vertically, which is what reads as light
spilling rather than a border.
Width follows the navigation, not the page. */
/* The rule sits inside the nav stack, so it tracks the navigation width
rather than the page. Capped slightly wider than the pill
panel so it reads as underlining the nav, not boxing it.
Needs :not() and !important because the WooCommerce
stylesheet sets height 1px plus a border-bottom on
.wp-block-separator, which outranks a single class. */
.mistra-header-glow:not(.is-style-dots),
.wp-block-separator.mistra-header-glow {
width: 100%;
max-width: calc(100% + 2.5rem);
margin: 12px auto 0 !important;
border: 0 !important;
height: 2px !important;
opacity: 1;
background-image: linear-gradient(
90deg,
rgba(146, 56, 250, 0) 0%,
rgba(146, 56, 250, 0.55) 12%,
rgba(194, 99, 250, 0.95) 34%,
rgba(65, 88, 238, 1) 50%,
rgba(194, 99, 250, 0.95) 66%,
rgba(146, 56, 250, 0.55) 88%,
rgba(146, 56, 250, 0) 100%
);
position: relative;
}
.mistra-header-glow::before {
content: "";
position: absolute;
inset: -14px -6%;
background-image: inherit;
background-size: 100% 100%;
filter: blur(10px);
opacity: 0.55;
pointer-events: none;
z-index: -1;
}
.mistra-header-glow::after {
content: "";
position: absolute;
inset: -4px 0;
background-image: inherit;
filter: blur(2px);
opacity: 0.9;
pointer-events: none;
z-index: -1;
}
/* One left edge for the whole page.
The logo, the hero and the body sections were landing on
three different left edges, which read as the header and
the hero belonging to different sites.
The header row sat at 32px because its wrapper carries
has-global-padding (32px) and the padding the template
declares alongside alignfull is dropped on compile, so
nothing narrowed it back to the 16px the body sections
use. The wrapper is given that 16px back here.
The hero heading and buttons sat at 122px: they are
direct children of a constrained layout, so core gives
every child the global content size (740px) and centres
it. The hero paragraph escaped this by carrying its own
measure, so the hero was internally inconsistent too.
Children are pulled back to full width here and the
measure is reapplied to the paragraph alone, which is
the only element that needs one.
The class is doubled to win on specificity against the
core layout rule rather than reaching for !important. */
.mistra-header-inner.mistra-header-inner {
padding-left: var(--wp--preset--spacing--small);
padding-right: var(--wp--preset--spacing--small);
}
/* Buttons, brand gradient on the primary. Applied as
background-image rather than through
elements.button.color.background, because that property
compiles to background-color and drops a gradient.
Hover adds a two-layer neon glow: a tight brand-purple halo
close to the button, and a wider indigo one behind it. Two
shadows at different blur radii read as a glow rather than a
flat outline. The lift is kept to 2px so the row of buttons
does not visibly reflow on hover.
Every button gets the gradient because on this site nearly
every button is a primary action. The exception is marked
is-style-outline below.
Radius is a full pill to match the navigation pills and the
add-to-cart pill. The theme default is 5px, which left the
hero CTAs visibly squarer than every other rounded thing
on the page. */
.wp-element-button,
.wp-block-button__link {
background-image: var(--wp--preset--gradient--brand);
border-radius: 999px;
box-shadow: 0 0 12px rgba(146, 56, 250, 0.28);
transition: box-shadow 280ms ease, transform 280ms ease, background-position 420ms ease;
}
/* Secondary action. The gradient rule above would otherwise
paint this the same as the primary beside it, so the two
hero CTAs read as twins and the eye has no entry point.
Outlined instead: no fill, a lilac hairline, white text,
and on hover the fill sweeps in. */
.wp-element-button.is-style-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
background-color: transparent;
background-image: none;
border: 1px solid rgba(194, 99, 250, 0.75);
box-shadow: none;
color: var(--wp--preset--color--base);
}
.wp-element-button.is-style-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background-color: rgba(146, 56, 250, 0.16);
background-image: none;
border-color: rgba(194, 99, 250, 1);
box-shadow: 0 0 14px rgba(146, 56, 250, 0.45);
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
background-image: var(--wp--preset--gradient--brand-reverse);
background-position: 100% 50%;
transform: translateY(-2px);
box-shadow:
0 0 10px rgba(146, 56, 250, 0.75),
0 0 26px rgba(194, 99, 250, 0.60),
0 0 46px rgba(65, 88, 238, 0.55);
}
.wp-element-button:active,
.wp-block-button__link:active {
transform: translateY(0);
box-shadow:
0 0 8px rgba(146, 56, 250, 0.6),
0 0 18px rgba(194, 99, 250, 0.45);
}
@media (prefers-reduced-motion: reduce) {
.wp-element-button,
.wp-block-button__link,
.wp-element-button:hover,
.wp-block-button__link:hover {
transform: none;
transition: box-shadow 200ms ease;
}
}
/* Navigation
------------------------------------------------------------------------
Pill links on a translucent panel defined by an outward glow
rather than a border. The sweep animation is on the link
itself, so the gradient slides across the label instead of a
separate block sliding under it.
Colours are the two brand tokens plus the tint; no hardcoded
hex values, so a future palette change flows through
automatically. */
.mistra-nav-panel {
background-color: rgba(146, 56, 250, 0.10);
background-image: linear-gradient(90deg, rgba(146, 56, 250, 0.18) 0%, rgba(194, 99, 250, 0.22) 50%, rgba(65, 88, 238, 0.18) 100%);
border-radius: 999px;
padding: 0.3rem;
/* No border. The panel is defined by a soft outward glow
instead: a tight brand-purple halo, the logo lilac in
the middle, and the indigo at the widest radius. The
outer radius is larger than the radius of the pill so
the glow spills past the silhouette rather than
hugging it, which is what reads as light rather than
an outline. */
box-shadow:
0 0 6px rgba(146, 56, 250, 0.18),
0 0 16px rgba(194, 99, 250, 0.14),
0 0 30px rgba(65, 88, 238, 0.12);
transition: box-shadow 320ms ease;
}
.mistra-nav-panel:hover,
.mistra-nav-panel:focus-within {
box-shadow:
0 0 14px rgba(146, 56, 250, 0.45),
0 0 32px rgba(194, 99, 250, 0.38),
0 0 60px rgba(65, 88, 238, 0.34);
}
.mistra-nav .wp-block-navigation__container {
gap: 0.15rem !important;
align-items: center;
}
/* "Shop" is redundant with the category pills below it,
so style it as a subtle ghost button instead of a pill. */
.mistra-nav .wp-block-navigation__container
.wp-block-navigation-item:first-child
.wp-block-navigation-item__content {
background-color: transparent !important;
background-image: none !important;
border: 1px solid rgba(194, 99, 250, 0.5) !important;
color: var(--wp--preset--color--primary-light) !important;
box-shadow: none !important;
}
.mistra-nav .wp-block-navigation__container
.wp-block-navigation-item:first-child
.wp-block-navigation-item__content:hover,
.mistra-nav .wp-block-navigation__container
.wp-block-navigation-item:first-child
.wp-block-navigation-item__content:focus-visible {
background-color: rgba(146, 56, 250, 0.12) !important;
border-color: var(--wp--preset--color--primary-light) !important;
color: var(--wp--preset--color--base) !important;
box-shadow: 0 0 14px rgba(146, 56, 250, 0.45) !important;
}
.mistra-nav .wp-block-navigation-item__content {
display: inline-block;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.01em;
padding: 0.55rem 1rem;
border-radius: 999px;
color: var(--wp--preset--color--base);
background-color: transparent;
background-image: var(--wp--preset--gradient--brand-sweep);
background-size: 200% 100%;
background-position: 0% 50%;
transition: background-position 420ms ease, color 240ms ease, box-shadow 300ms ease;
box-shadow: none;
}
.mistra-nav .wp-block-navigation-item__content:hover,
.mistra-nav .wp-block-navigation-item__content:focus-visible {
color: var(--wp--preset--color--base);
background-position: 100% 50%;
box-shadow: 0 0 16px rgba(146, 56, 250, 0.55);
text-decoration: none;
}
.mistra-nav .wp-block-navigation-item__content:focus-visible {
outline: 2px solid var(--wp--preset--color--primary-light);
outline-offset: 2px;
}
/* Delivery strip: brand gradient, with a slow drift so it
reads as the same material as the nav pills. */
.mistra-strip {
background-image: var(--wp--preset--gradient--brand);
background-size: 200% 100%;
animation: mistra-drift 14s ease-in-out infinite alternate;
}
@keyframes mistra-drift {
from { background-position: 0% 50%; }
to { background-position: 100% 50%; }
}
/* Current page marker. aria-current is set by core on the
active link, so this targets state rather than a page id. */
.mistra-nav .wp-block-navigation-item__content[aria-current="page"] {
color: var(--wp--preset--color--primary-alt-accent);
background-image: none;
background-color: var(--wp--preset--color--primary-alt);
}
@media (prefers-reduced-motion: reduce) {
.mistra-nav .wp-block-navigation-item__content,
.mistra-nav-panel {
transition: none;
}
.mistra-strip {
animation: none;
}
}
/* Mobile menu
------------------------------------------------------------------------
Below 860px the nav collapses to a hamburger overlay. The trigger
and the close button are built as a matching pair: a wide pill,
not a circle, so the icon sits inside a shape rather than
filling one. */
/* Trigger. Equal padding on all sides made a square, which a
999px radius then turned into a circle, and the header row
centred that circle against the taller logo so it read as
floating high. Wider horizontal padding gives a real pill,
and the glow rule is removed on narrow screens (below) so
nothing pushes the row off centre any more. */
.mistra-nav .wp-block-navigation__responsive-container-open {
background-color: transparent !important;
background-image: var(--wp--preset--gradient--brand) !important;
border: 0;
border-radius: 999px;
padding: 0.5rem 0.75rem;
align-items: center;
justify-content: center;
box-shadow:
0 0 10px rgba(146, 56, 250, 0.45),
0 0 22px rgba(65, 88, 238, 0.35);
transition: box-shadow 280ms ease, transform 280ms ease;
}
.mistra-nav .wp-block-navigation__responsive-container-open:hover,
.mistra-nav .wp-block-navigation__responsive-container-open:focus-visible {
box-shadow:
0 0 12px rgba(146, 56, 250, 0.70),
0 0 28px rgba(194, 99, 250, 0.55),
0 0 50px rgba(65, 88, 238, 0.45);
transform: scale(1.05);
}
.mistra-nav .wp-block-navigation__responsive-container-open svg {
width: 24px;
height: 24px;
fill: var(--wp--preset--color--base);
}
/* Close button. Ollie paints it as a flat surface square
(background tertiary, 3px radius, 4px padding). A 999px
radius on that 32px square rendered as a black circle with
no shape to read as a button. Same pill geometry as the
trigger, with a border and the brand glow on hover, so the
two read as the same control in two states. */
.mistra-nav .wp-block-navigation__responsive-container-close {
background-color: rgba(146, 56, 250, 0.12) !important;
background-image: none;
border: 1px solid rgba(194, 99, 250, 0.45) !important;
border-radius: 999px;
padding: 0.5rem 0.75rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--wp--preset--color--base);
box-shadow: 0 0 10px rgba(146, 56, 250, 0.30);
transition: box-shadow 280ms ease, border-color 280ms ease;
}
.mistra-nav .wp-block-navigation__responsive-container-close:hover,
.mistra-nav .wp-block-navigation__responsive-container-close:focus-visible {
border-color: rgba(194, 99, 250, 0.90) !important;
box-shadow:
0 0 12px rgba(146, 56, 250, 0.60),
0 0 26px rgba(65, 88, 238, 0.45);
}
.mistra-nav .wp-block-navigation__responsive-container-close svg {
width: 22px;
height: 22px;
fill: var(--wp--preset--color--base);
}
/* Overlay panel. Core ships
.wp-block-navigation:not(.has-background)
.wp-block-navigation__responsive-container.is-menu-open
:not(.disable-default-overlay) { background-color:#fff; color:#000 }
which is five classes deep and beats a single wrapper class,
so the overlay opened as a white sheet with black text. The
selector below matches that shape exactly and adds
!important, which is the only way to outrank it here.
Background is painted on the page surface with a soft
brand wash rather than a flat panel. */
.wp-block-navigation.mistra-nav
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
background-color: var(--wp--preset--color--main) !important;
background-image: linear-gradient(
180deg,
rgba(146, 56, 250, 0.14) 0%,
rgba(65, 88, 238, 0.07) 100%
) !important;
color: var(--wp--preset--color--base) !important;
padding: 1.25rem 1.25rem 2rem;
}
.mistra-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
display: block;
width: 100%;
background-image: var(--wp--preset--gradient--brand-sweep) !important;
background-color: transparent;
background-size: 200% 100% !important;
color: var(--wp--preset--color--base) !important;
font-weight: 600;
font-size: 1rem;
text-align: center;
padding: 0.75rem 1rem;
margin-bottom: 0.5rem;
border-radius: 999px;
box-shadow: 0 0 10px rgba(146, 56, 250, 0.28);
}
.mistra-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover {
background-position: 100% 50% !important;
box-shadow:
0 0 12px rgba(146, 56, 250, 0.70),
0 0 28px rgba(194, 99, 250, 0.55);
}
/* Clearance for the close button. Core reserves this space with
padding-top: calc(2rem + 24px) on the overlay content, sized
for its 32px close button. My rule outranks that one, so an
earlier 0.5rem here replaced the clearance entirely and the
first link slid underneath the close button, which is
absolutely positioned at top-right of the panel.
Recomputed rather than copied: the close button above is
40px tall, not 24, so the gap is 40px of button plus 20px
of air. The panel above has 1.25rem of padding-top, which
places the close button 20px from the top, so the first
link starts at 80px and clears it by 20px. */
.mistra-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
width: 100%;
padding-top: 3.75rem;
}
/* Narrow screens: the nav collapses to the overlay trigger, so
the pill panel becomes an empty rounded box and the glow
rule becomes a stray purple dash hanging under the
hamburger. The dash also pushed the trigger off the
vertical centre of the header row, which is what made the
button look misaligned beside the logo. Both are dropped. */
@media (max-width: 860px) {
.mistra-nav-panel {
background-color: transparent;
background-image: none;
border: 0;
padding: 0;
box-shadow: none;
}
.mistra-header-glow:not(.is-style-dots),
.wp-block-separator.mistra-header-glow {
display: none;
}
}
/* White photography frame. The supplied product and category
shots are studio images with a baked-in white backdrop, so
the tile becomes a deliberate surface rather than an
unframed white rectangle on a black page. */
.wp-block-woocommerce-product-image,
.wc-block-components-product-image {
background-color: #FFFFFF;
border-radius: 12px;
border: 1px solid #2E2E38;
}
.wp-block-woocommerce-product-image img,
.wc-block-components-product-image img {
border-radius: 11px;
}
/* Category photography is background-removed cutouts, so there is no white
studio tile to frame. The figure is a plain window onto the
card surface with the product centred in it.
No aspect-ratio or overflow here: the caption lives inside
the same figure, and pinning the box to a ratio clipped the
caption off entirely. Instead the image gets a fixed height
so every card lines up, and the caption flows below it. */
figure.wp-block-image.mistra-cat-photo {
background-color: transparent;
border: 0;
border-radius: 12px;
margin: 0;
padding: 0.75rem 0.5rem 0;
display: flex;
flex-direction: column;
align-items: center;
}
/* The product inside the box scales with the card, not the page.
The height is expressed in cqi so it tracks the card own
width. A fixed 7rem looked right while the five cards sat
side by side in a 165px column, but the columns stack to a
single full-width card on narrow viewports and the cutout
stayed 112px tall in a 625px card, floating in the middle
of it.
Tracking the card width rather than adding a media query
means this holds at any column count, and the clamp bounds
keep the five-up row exactly as it was: 34cqi of a 165px
card is 56px, below the 7rem floor, so it never changes. */
figure.wp-block-image.mistra-cat-photo img {
display: block;
width: 100%;
height: clamp(7rem, 34cqi, 16rem);
object-fit: contain;
object-position: center;
}
/* Category cards: equal height and equal internal rhythm.
The source photos have different aspect ratios, so the
figure is pinned to 3/2 with object-fit cover and the
description absorbs the slack, pushing the button to
the bottom edge. Buttons also stretch so their labels
stay on one line instead of wrapping in narrow
columns. */
.mistra-cat-card {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
container-type: inline-size;
}
.mistra-cat-card > .mistra-cat-photo {
flex: 0 0 auto;
}
/* The caption sits on the card surface now, centred under
the product. Pinned by the image height rather than a
fixed ratio on the figure, so nothing clips. */
.mistra-cat-photo .wp-element-caption {
color: var(--wp--preset--color--secondary);
font-weight: 600;
font-size: 0.9375rem;
text-align: center;
padding: 0.5rem 0 0;
margin: 0;
}
.mistra-cat-card > .mistra-cat-photo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
/* Two categories per row on phones.
Core stacks .wp-block-columns to a single full-width
column below 782px, which turned the five cards into
five full-bleed panels about 1700px tall end to end.
The columns are pulled back to a two-up grid over the
same breakpoint, so the phone layout is two cards
across instead of one.
Basis is 50% minus half the block gap rather than a
fixed width, so this keeps working if the gap preset
changes.
flex is important because core gets there first:
.wp-block-columns:not(.is-not-stacked-on-mobile)
> .wp-block-column is three classes deep AND sets
flex-basis:100% !important at the same breakpoint.
Measured in a 390px viewport, the cards stayed one per
row at 356px wide until this selector was made deeper
than core, which is why the body element is there: it
takes the specificity to (0,3,1) against core (0,3,0)
without having to double up class names.
At 320px the longest label "Browse Pod Systems" was
exactly the card width. The mobile-only padding
reduction gives it 8px air so the touch target stays
comfortable without forcing a wrap. */
@media (max-width: 781px) {
.mistra-cat-grid {
flex-wrap: wrap;
}
body .wp-block-columns.mistra-cat-grid > .wp-block-column {
flex: 0 0 calc(50% - var(--wp--style--block-gap, 1.5rem) / 2) !important;
}
.mistra-cat-card .wp-block-button__link {
padding-left: 0.15rem !important;
padding-right: 0.15rem !important;
}
}
/* Description. The theme small size resolves to about 16px
here, which overruns a 165px card; drop it a step and
centre it so the ragged left edge stops reading as a
misalignment. */
.mistra-cat-card > .mistra-cat-text {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.8125rem !important;
line-height: 1.45;
padding: 0 1rem !important;
margin: 0;
}
.mistra-cat-card > .wp-block-buttons {
margin-top: auto;
}
/* The Browse label must be allowed to wrap. Two of the five are too long
for a single line in these columns, and nowrap pushed them
past the card edge instead of breaking. */
.mistra-cat-card .wp-block-button,
.mistra-cat-card .wp-block-button__link {
width: 100%;
white-space: normal;
font-size: 0.75rem;
line-height: 1.3;
padding-left: 0.4rem;
padding-right: 0.4rem;
}
/* The theme element-button rule sets font-size on the button itself and
outranks a single class, which is why the Browse labels
were still rendering at 14px and wrapping to four lines
inside a 165px card. */
.mistra-cat-card .wp-element-button,
.mistra-cat-card .wp-block-button__link {
font-size: 0.6875rem !important;
letter-spacing: -0.01em;
white-space: nowrap;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
/* Product card add-to-cart.
Ollie wraps the button in a backdrop-blur pill that is wider
than the button itself, so putting the gradient on the button
left the pill translucency showing either side of the label.
The gradient goes on the wrapper instead, and the inner button
goes transparent so only one fill is painted. */
.wc-block-product-template .ollie-product-button-hover-group.is-style-background-blur {
background-color: transparent !important;
background-image: var(--wp--preset--gradient--brand) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: 999px;
box-shadow: 0 0 12px rgba(146, 56, 250, 0.28);
transition: box-shadow 280ms ease, background-position 420ms ease;
}
.wc-block-product-template .ollie-product-button-hover-group.is-style-background-blur:hover {
background-image: var(--wp--preset--gradient--brand-reverse);
box-shadow:
0 0 10px rgba(146, 56, 250, 0.75),
0 0 26px rgba(194, 99, 250, 0.60),
0 0 46px rgba(65, 88, 238, 0.55);
}
.wc-block-product-template .ollie-product-button-hover-group.is-style-background-blur .wp-element-button {
background-color: transparent;
background-image: none;
box-shadow: none;
}
/* Replaced by the width:100% rule above, which handles wrapping
correctly. This duplicate was the source of the overflow. */
.mistra-cat-card .wp-block-button__link {
white-space: nowrap;
font-size: 0.6875rem;
letter-spacing: -0.01em;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
/* Card grid: columns are flex items, so they stretch to a
common height and the cards inside fill that. */
.mistra-cat-grid > .wp-block-column {
display: flex;
}
.mistra-cat-grid > .wp-block-column > * {
width: 100%;
}
/* Info panels (delivery explainer, trust strip).
Same problem as the category cards: panels of different
content length end up different heights, which reads as
broken rather than deliberate. Columns stretch as flex
items, so the panels just need to fill that height and
align their text to the top. */
.mistra-panel-grid > .wp-block-column {
display: flex;
}
.mistra-panel-grid > .wp-block-column > * {
width: 100%;
}
.mistra-panel {
display: flex;
flex-direction: column;
height: 100%;
}
/* Covers the single-product page price as well, which uses
the same component markup. */
.wp-block-woocommerce-product-price .wc-block-components-product-price {
text-align: center;
font-size: 1rem !important;
color: #ffffff !important;
}
/* Product cards: black background with purple gradient border.
The cutout images have no background, so they sit on a
dark surface with a glowing purple edge. The border is
done via a pseudo-element to support the gradient. */
.wc-block-product-template li.wc-block-product {
background-color: #040405;
border-radius: 16px;
position: relative;
overflow: hidden;
transition: box-shadow 280ms ease, transform 280ms ease;
}
.wc-block-product-template li.wc-block-product::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 18px;
background: linear-gradient(
135deg,
#9238FA 0%,
#C263FA 50%,
#4158EE 100%
);
z-index: -1;
opacity: 0.6;
filter: blur(4px);
}
/* Product image: ensure it fills the card width and sits on the dark bg.
The wrapper div often has a white bg from WooCommerce; kill it. */
.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-image,
.wc-block-product-template li.wc-block-product .wc-block-components-product-image {
background: transparent !important;
}
.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-image img {
border-radius: 12px 12px 0 0;
object-fit: contain !important;
background: transparent;
}
/* Product title and price styling */
.wc-block-product-template li.wc-block-product .wp-block-post-title,
.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-price {
text-align: center;
}
.wc-block-product-template li.wc-block-product .wp-block-post-title {
color: #ffffff;
font-weight: 600;
font-size: 1rem;
}
.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-price {
color: #ffffff;
font-weight: 700;
font-size: 1rem;
}
/* Add to cart button on product cards — smaller glow for small button */
.wc-block-product-template li.wc-block-product .wp-element-button {
background-image: var(--wp--preset--gradient--brand) !important;
border-radius: 999px !important;
color: #ffffff !important;
font-weight: 700 !important;
border: none !important;
padding: 0.75rem 1.5rem !important;
box-shadow: 0 0 8px rgba(146, 56, 250, 0.25) !important;
transition: box-shadow 280ms ease, transform 280ms ease !important;
}
.wc-block-product-template li.wc-block-product .wp-element-button:hover {
background-image: var(--wp--preset--gradient--brand-reverse) !important;
box-shadow:
0 0 10px rgba(146, 56, 250, 0.55),
0 0 18px rgba(194, 99, 250, 0.45) !important;
transform: translateY(-2px) !important;
}
/* Product card hover: subtle transparent overlay instead of lift+shadow */
.wc-block-product-template li.wc-block-product:hover {
transform: none;
box-shadow: none;
}
.wc-block-product-template li.wc-block-product:hover::before {
opacity: 0.9;
filter: blur(2px);
}
.wc-block-product-template li.wc-block-product:hover .wp-block-woocommerce-product-image img {
opacity: 0.85;
transform: scale(1.02);
transition: opacity 280ms ease, transform 280ms ease;
}
/* Centre the product card copy. Ollie ships these blocks
/* The product-price block renders an inner wrapper that
carries its own has-text-align-left class, so centring
only the outer block leaves the visible digits left
aligned. Target the inner component too, and drop the
class itself so it cannot win on specificity later. */
.wc-block-product-template li.wc-block-product
.wc-block-components-product-price,
.wc-block-product-template li.wc-block-product
.wp-block-woocommerce-product-price.has-text-align-left {
text-align: center;
}
.wc-block-product-template li.wc-block-product
.wp-block-woocommerce-product-price > .wc-block-components-product-price {
text-align: center;
}
/* Covers the single-product page price as well, which uses
the same component markup. */
.wp-block-woocommerce-product-price .wc-block-components-product-price {
text-align: center;
font-size: 1rem !important;
color: #ffffff !important;
}
/* =============================================================================
BUTTONS
-----------------------------------------------------------------------------
Purple is reserved for actions, so every button is an action. The gradient
goes on background-image rather than through the theme's button colour,
because color.background compiles to background-color and drops a gradient.
========================================================================== */
.wp-element-button,
.wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0.6rem 1.35rem;
border-radius: 999px;
font-size: 1rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
background-color: var(--accent);
background-image: var(--accent-gradient);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
box-shadow var(--dur) var(--ease);
}
.wp-element-button:hover,
.wp-block-button__link:hover {
background-image: var(--wp--preset--gradient--accent-reverse);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(168, 85, 247, 0.32);
}
/* Secondary action: outline, not a second gradient. Two filled gradients side
by side leaves the primary with nothing to be primary over. */
.is-style-outline .wp-element-button,
.is-style-outline.wp-block-button__link {
background-color: transparent;
background-image: none;
border: 1px solid var(--accent);
color: var(--accent);
box-shadow: none;
}
.is-style-outline .wp-element-button:hover,
.is-style-outline.wp-block-button__link:hover {
background-color: var(--accent);
background-image: none;
border-color: var(--accent);
color: #fff;
box-shadow: 0 4px 16px rgba(168, 85, 247, 0.28);
}
.mistra-btn-icon {
display: inline-flex;
width: 18px;
height: 18px;
flex: 0 0 18px;
}
.mistra-btn-icon svg {
width: 100%;
height: 100%;
display: block;
}
.mistra-section-cta {
justify-content: center;
}
/* =============================================================================
HEADER
========================================================================== */
body .site-header {
position: sticky;
top: 0;
z-index: 90;
background-color: var(--bg);
box-shadow: 0 1px 0 var(--border);
}
/* The row is already flex with verticalAlignment center, so the logo, the nav
and the account/cart icons already share a centre line. All that was left
was making the row the width of the container. */
body .mistra-header-inner {
position: relative;
z-index: 2;
}
body .site-header .alignwide {
justify-content: space-between;
align-items: center;
gap: var(--space-3);
min-height: 72px;
}
/* Softer announcement bar. The old one was the full three-stop brand gradient
at full strength directly above a black header, which pulled the eye to the
one line of copy that mattered least. Now it is a dark wash with one bright
edge, so it reads as a band rather than as a headline. */
body .mistra-strip {
background-color: var(--surface-2);
background-image: linear-gradient(
90deg,
rgba(124, 58, 237, 0) 0%,
rgba(124, 58, 237, 0.34) 18%,
rgba(168, 85, 247, 0.44) 50%,
rgba(124, 58, 237, 0.34) 82%,
rgba(124, 58, 237, 0) 100%
);
border-bottom: 1px solid var(--border);
}
body .mistra-strip p {
margin: 0;
font-size: 0.8125rem;
letter-spacing: 0.02em;
color: var(--text-muted);
}
/* Shrink the header on scroll.
Scroll-driven animations, no JavaScript: where the browser supports them the
strip collapses and the row tightens; where it does not, the header simply
stays sticky at full height, which is the safe half of the behaviour. */
@supports (animation-timeline: scroll()) {
body .mistra-strip {
animation: mistra-strip-collapse linear both;
animation-timeline: scroll(root block);
animation-range: 0 140px;
}
body .site-header .alignwide {
animation: mistra-row-tighten linear both;
animation-timeline: scroll(root block);
animation-range: 0 140px;
}
}
@keyframes mistra-strip-collapse {
to {
opacity: 0;
padding-block: 0;
height: 0;
border-bottom-width: 0;
overflow: hidden;
}
}
@keyframes mistra-row-tighten {
to {
min-height: 56px;
}
}
/* =============================================================================
NAVIGATION
-----------------------------------------------------------------------------
Dark surface pills with light text at rest. Purple fill and glow appear on
hover, on keyboard focus, and on the current page only. Nothing on the home
page is current, because the nav is built from explicit links rather than a
menu, so nothing there can pick up a current-page state by accident.
========================================================================== */
body .mistra-nav-panel {
display: flex;
align-items: center;
gap: 2px;
padding: 4px;
border-radius: 999px;
background-color: var(--surface);
border: 1px solid var(--border);
box-shadow: none;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body .mistra-nav-panel:hover,
body .mistra-nav-panel:focus-within {
border-color: rgba(168, 85, 247, 0.42);
box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.14), 0 4px 18px rgba(0, 0, 0, 0.4);
}
body .mistra-nav .wp-block-navigation-item__content {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
background-color: transparent;
background-image: none;
color: var(--text);
font-weight: 500;
letter-spacing: 0.01em;
box-shadow: none;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
body .mistra-nav .wp-block-navigation-item__content:hover,
body .mistra-nav .wp-block-navigation-item__content:focus-visible {
background-color: var(--accent);
background-image: none;
color: #fff;
box-shadow: 0 2px 12px rgba(168, 85, 247, 0.4);
}
/* Current page, and only the current page. */
body .mistra-nav .wp-block-navigation-item__content[aria-current="page"] {
background-color: var(--accent);
background-image: none;
color: #fff;
box-shadow: 0 2px 12px rgba(168, 85, 247, 0.4);
}
/* "Shop" is a different destination from the five categories beside it, so it
stays an outline to mark that. At rest it is light text on the dark panel:
lilac type on a purple-tinted pill reads as the current page, and nothing on
the home page should read as the current page. */
/* The container class is in these selectors on purpose. The older Shop rule
below is (0,5,0) because it names five classes; without the container these
are (0,4,1) and lose to it even with !important, since !important only
promotes a declaration, it does not settle a specificity tie. */
body .mistra-nav .wp-block-navigation__container
.wp-block-navigation-item:first-child
.wp-block-navigation-item__content {
background-color: transparent !important;
background-image: none !important;
border: 1px solid rgba(168, 85, 247, 0.45) !important;
color: var(--text) !important;
box-shadow: none !important;
}
body .mistra-nav .wp-block-navigation__container
.wp-block-navigation-item:first-child
.wp-block-navigation-item__content:hover,
body .mistra-nav .wp-block-navigation__container
.wp-block-navigation-item:first-child
.wp-block-navigation-item__content:focus-visible {
background-color: var(--accent) !important;
background-image: none !important;
border-color: var(--accent) !important;
color: #fff !important;
box-shadow: 0 2px 12px rgba(168, 85, 247, 0.4) !important;
}
/* The hairline under the nav. Kept, but quieter: it was a two-layer bloom at
18/14/12% and read as a light source rather than a divider. */
body .mistra-header-glow:not(.is-style-dots) {
height: 1px !important;
border: 0 !important;
margin: 0 auto !important;
max-width: 100% !important;
opacity: 1;
background-image: linear-gradient(
90deg,
rgba(168, 85, 247, 0) 0%,
rgba(168, 85, 247, 0.35) 22%,
rgba(168, 85, 247, 0.55) 50%,
rgba(168, 85, 247, 0.35) 78%,
rgba(168, 85, 247, 0) 100%
) !important;
position: absolute;
left: var(--container-pad);
right: var(--container-pad);
bottom: 0;
}
body .mistra-header-glow::before,
body .mistra-header-glow::after {
display: none;
}
/* =============================================================================
CARDS
-----------------------------------------------------------------------------
One card treatment, shared by the category grid and the product grid, so a
product on the home page and the same product on the shop page are the same
object. Both are flex columns with the action pinned to the bottom, so a long
description on one card does not push its button out of line with the rest.
========================================================================== */
body .mistra-cat-card,
body .wp-block-product-template li,
body li.wc-block-product {
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--surface);
border: 1px solid var(--border) !important;
border-radius: var(--radius);
overflow: hidden;
transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
/* Hover is a lift plus a purple edge. Both are cheap: one transform and two
paint-only properties. */
body .mistra-cat-card:hover,
body li.wc-block-product:hover {
transform: translateY(-4px);
border-color: rgba(168, 85, 247, 0.6) !important;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(168, 85, 247, 0.16);
}
/* Whole card is the hit target. The link is an absolutely positioned overlay
that covers the card; the visible button is lifted above it so it still
receives its own click. One tab stop per card instead of three. */
body .mistra-card-link {
position: absolute;
inset: 0;
z-index: 1;
border-radius: var(--radius);
}
body .mistra-card-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
body .mistra-cat-card .wp-block-buttons,
body li.wc-block-product .wc-block-components-product-button,
body li.wc-block-product .wp-block-button {
position: relative;
z-index: 2;
margin-top: auto;
}
/* -----------------------------------------------------------------------------
Category card internals
-------------------------------------------------------------------------- */
body .mistra-cat-photo {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 20px 16px 12px;
background: transparent;
border: 0;
border-radius: 0;
}
body .mistra-cat-photo img {
display: block;
/* Fixed height, not a ratio. The cutouts are tall and narrow; a ratio would
letterbox one and crop the other. */
width: auto;
height: 140px;
max-width: 100%;
object-fit: contain;
object-position: center;
margin: 0 auto;
}
body .mistra-cat-title {
margin: 14px 0 0;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.25;
color: var(--text);
text-align: center;
}
body .mistra-cat-text {
margin: 8px 0 0;
padding: 0 18px !important;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--text-muted);
text-align: center;
}
body .mistra-cat-card .wp-block-buttons {
padding: 16px 18px 18px !important;
justify-content: center;
}
body .mistra-cat-card .wp-element-button {
width: 100%;
min-height: 44px;
font-size: 0.9375rem;
}
/* Two per row on phones, and the same card rules apply down there. The core
columns stacking rule is (0,3,0) with flex-basis 100%, so the column width
has to be forced. */
@media (max-width: 781px) {
body .wp-block-columns.mistra-cat-grid {
flex-wrap: wrap;
}
body .wp-block-columns.mistra-cat-grid > .wp-block-column {
flex: 0 0 calc(50% - 8px) !important;
flex-basis: calc(50% - 8px) !important;
width: calc(50% - 8px) !important;
}
}
/* -----------------------------------------------------------------------------
Product cards
----------------------------------------------------------------------------- */
body li.wc-block-product {
padding: 0;
margin: 0;
list-style: none;
}
body li.wc-block-product .wc-block-components-product-image,
body li.wc-block-product img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
object-position: center;
padding: 18px;
background-color: rgba(0, 0, 0, 0.22);
transition: opacity var(--dur) var(--ease);
}
body li.wc-block-product:hover img {
opacity: 0.88;
}
/* The small uppercase label above the title. It comes from the first product
category, which WooCommerce already exposes on the card markup, so it is
derived rather than entered by hand. */
body li.wc-block-product .wc-block-components-product-taxonomy {
display: block;
margin: 14px 16px 0;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
body li.wc-block-product .wc-block-components-product-title,
body li.wc-block-product h2,
body li.wc-block-product h3 {
margin: 6px 16px 0;
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
color: var(--text);
}
body li.wc-block-product .wc-block-components-product-price {
margin: 8px 16px 0;
color: var(--accent) !important;
font-size: 1.125rem;
font-weight: 700;
}
/* Add to cart. Always visible on touch, revealed on hover on a pointer device,
so a mouse user gets a clean card and a phone user gets a reachable button. */
body li.wc-block-product .wc-block-components-product-button {
padding: 16px 16px 18px;
}
body li.wc-block-product .wp-block-button__link,
body li.wc-block-product .wc-block-components-product-button .wp-block-button__link {
width: 100%;
min-height: 44px;
font-size: 0.9375rem;
}
@media (hover: hover) and (pointer: fine) {
body li.wc-block-product .wc-block-components-product-button {
opacity: 0;
transform: translateY(4px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body li.wc-block-product:hover .wc-block-components-product-button,
body li.wc-block-product:focus-within .wc-block-components-product-button {
opacity: 1;
transform: none;
}
}
@media (hover: none), (pointer: coarse) {
body li.wc-block-product .wc-block-components-product-button {
opacity: 1;
transform: none;
}
}
/* -----------------------------------------------------------------------------
Panels: the delivery and trust cards
-------------------------------------------------------------------------- */
body .mistra-panel {
display: flex;
flex-direction: column;
height: 100%;
padding: 24px !important;
background-color: var(--surface);
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
}
body .mistra-panel h3 {
margin: 0 0 8px;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.3;
color: var(--text);
}
body .mistra-panel p {
margin: 0;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--text-muted);
}
body .mistra-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: 14px;
border-radius: 10px;
background-color: rgba(168, 85, 247, 0.12);
border: 1px solid rgba(168, 85, 247, 0.28);
color: var(--accent);
flex: 0 0 40px;
}
body .mistra-icon svg {
width: 22px;
height: 22px;
display: block;
}
body .mistra-check-list {
margin: 4px 0 0;
padding: 0;
list-style: none;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--text-muted);
}
body .mistra-check-list li {
position: relative;
padding-left: 26px;
margin-bottom: 10px;
}
body .mistra-check-list li:last-child {
margin-bottom: 0;
}
/* Check marks, drawn with borders rather than an image so they inherit the
text colour and cost nothing to load. */
body .mistra-check-list li::before {
content: "";
position: absolute;
left: 2px;
top: 0.28em;
width: 12px;
height: 7px;
border-left: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(-45deg);
}
body .mistra-contact-buttons {
gap: 10px;
margin-top: 16px !important;
}
body .mistra-contact-buttons .wp-element-button {
flex: 1 1 auto;
}
/* A link that is still a placeholder is marked, so nobody ships a dead
button to a customer without noticing it in review. */
body [data-mistra-placeholder] {
border-style: dashed !important;
}
/* =============================================================================
FOOTER
========================================================================== */
body .mistra-footer {
background-color: var(--surface);
padding-block: 0;
color: var(--text-muted);
}
body .mistra-age-warning {
background-color: var(--surface-2);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding-block: 20px;
}
body .mistra-age-warning-inner {
display: flex;
align-items: flex-start;
gap: 14px;
max-width: 100%;
}
body .mistra-age-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
height: 32px;
padding: 0 10px;
border-radius: 6px;
background-color: var(--accent);
color: #fff;
font-size: 0.9375rem;
font-weight: 800;
letter-spacing: 0.02em;
}
body .mistra-age-warning p {
margin: 0;
font-size: 0.8125rem;
line-height: 1.6;
color: var(--text-muted);
max-width: 92ch;
}
body .mistra-age-warning strong {
color: var(--text);
}
body .mistra-footer-grid {
padding-block: 48px;
gap: var(--space-6);
/* 2 + 1 + 1. The brand column is wider because it carries the logo and a
paragraph, the other three are link lists. */
grid-template-columns: 1.6fr 1fr 1fr 1fr;
align-items: start;
}
body .mistra-footer-grid h2 {
margin: 0 0 14px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
}
body .mistra-footer-grid .wp-block-site-logo {
margin-bottom: 14px;
}
body .mistra-footer-grid p {
margin: 0 0 18px;
font-size: 0.875rem;
line-height: 1.6;
color: var(--text-muted);
}
body .mistra-footer-list {
margin: 0 0 20px;
padding: 0;
list-style: none;
font-size: 0.9375rem;
line-height: 1.4;
}
body .mistra-footer-list li {
margin-bottom: 10px;
}
body .mistra-footer-list a {
color: var(--text-muted);
text-decoration: none;
transition: color var(--dur-fast) var(--ease);
}
body .mistra-footer-list a:hover {
color: var(--accent);
text-decoration: underline;
}
/* Placeholder copy, so a reader and the client both know these are gaps and
not mistakes. */
body .mistra-missing {
color: var(--text-muted);
font-style: italic;
opacity: 0.85;
}
body .mistra-footer-base {
padding-block: 24px;
border-top: 1px solid var(--border);
}
body .mistra-footer-base p {
margin: 0;
font-size: 0.8125rem;
color: var(--text-muted);
}
@media (max-width: 1023px) {
body .mistra-footer-grid {
grid-template-columns: 1fr 1fr;
padding-block: 40px;
}
}
@media (max-width: 600px) {
body .mistra-footer-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
body .mistra-age-warning-inner {
flex-direction: column;
gap: 10px;
}
}
/* =============================================================================
SECTION HEADINGS
One voice for every h2 on the page: off-white, tight, with room under it.
========================================================================== */
body .mistra-section > h2,
main > .wp-block-group > h2 {
margin: 0 0 var(--space-2);
font-size: clamp(1.625rem, 3vw, 2rem);
font-weight: 700;
letter-spacing: -0.018em;
line-height: 1.15;
color: var(--text);
}
body main > .wp-block-group > p {
margin: 0 0 var(--space-4);
font-size: 1.0625rem;
line-height: 1.6;
color: var(--text-muted);
}
/* =============================================================================
SCREEN READER TEXT
========================================================================== */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* =============================================================================
MOBILE
-----------------------------------------------------------------------------
390px and 360px. Tap targets are never below 44px, grids go two-up, the
headline drops to 32px, and nothing is allowed to scroll sideways.
========================================================================== */
@media (max-width: 781px) {
body .mistra-hero-buttons {
gap: 10px;
}
body .mistra-cat-text {
font-size: 0.875rem;
}
body .mistra-cat-photo img {
height: 108px;
}
/* Two-up product grid rather than one-up: five phones stacked is a long
scroll to a short catalogue. */
body .wc-block-product-template {
flex-wrap: wrap;
gap: 12px;
}
body .wc-block-product-template > li.wc-block-product {
flex: 0 0 calc(50% - 6px) !important;
width: calc(50% - 6px) !important;
}
body li.wc-block-product .wc-block-components-product-title,
body li.wc-block-product h2,
body li.wc-block-product h3 {
font-size: 0.9375rem;
margin-inline: 12px;
}
body li.wc-block-product .wc-block-components-product-taxonomy {
margin-inline: 12px;
font-size: 0.625rem;
}
body li.wc-block-product .wc-block-components-product-price {
margin-inline: 12px;
font-size: 1rem;
}
body li.wc-block-product .wc-block-components-product-button {
padding: 12px;
}
body .wp-element-button,
body .wp-block-button__link {
min-height: 46px;
}
body .mistra-contact-buttons {
flex-direction: column;
}
body .mistra-contact-buttons .wp-element-button {
width: 100%;
}
/* Nothing may scroll sideways. */
body .mistra-cat-card,
body li.wc-block-product,
body .mistra-panel {
max-width: 100%;
}
}
/* =============================================================================
PRODUCT CARDS, Ollie markup
-----------------------------------------------------------------------------
Ollie's product card is not the stock WooCommerce card. The rendered tree is
li.wc-block-product
.wp-block-template-part
.ollie-product-button-hover
.ollie-product-button-hover-image
.wc-block-components-product-image > a > img
.ollie-product-button-hover-group
.wp-block-button.wc-block-components-product-button
.has-global-padding.is-layout-constrained
h3.wp-block-post-title > a
.wp-block-woocommerce-product-price
so the styling has to address those names rather than the usual
.wc-block-components-product-title, which does not exist here.
========================================================================== */
body li.wc-block-product {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
background-color: var(--surface);
border: 1px solid var(--border) !important;
border-radius: var(--radius);
overflow: hidden;
transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
body li.wc-block-product:hover {
transform: translateY(-4px);
border-color: rgba(168, 85, 247, 0.6) !important;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(168, 85, 247, 0.16);
}
body li.wc-block-product .ollie-product-button-hover {
display: flex !important;
flex-direction: column;
height: 100%;
padding: 0 !important;
}
/* Square image area with padding. contain, because the photography is
background-removed cutouts of different shapes: cover would crop the
taller ones. */
body li.wc-block-product .wc-block-components-product-image {
display: block;
width: 100%;
margin: 0;
padding: 20px;
background-color: rgba(0, 0, 0, 0.22);
aspect-ratio: 1 / 1;
overflow: hidden;
}
body li.wc-block-product .wc-block-components-product-image img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center;
transition: opacity var(--dur) var(--ease);
}
body li.wc-block-product:hover .wc-block-components-product-image img {
opacity: 0.86;
}
/* Copy block. margin-top:auto on the button is what pins the actions to the
bottom of every card in the row, whatever the length of the title. */
body li.wc-block-product .ollie-product-button-hover + .has-global-padding,
body li.wc-block-product .wp-block-template-part > .has-global-padding {
display: flex !important;
flex-direction: column;
flex: 1 1 auto;
padding: 16px !important;
}
body li.wc-block-product h3.wp-block-post-title {
margin: 0 !important;
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
color: var(--text);
text-align: left !important;
}
body li.wc-block-product h3.wp-block-post-title a {
color: var(--text);
text-decoration: none;
}
body li.wc-block-product h3.wp-block-post-title a:hover {
color: var(--accent);
}
body li.wc-block-product .wp-block-woocommerce-product-price {
margin: 8px 0 0;
text-align: left !important;
}
body li.wc-block-product .wc-block-components-product-price,
body li.wc-block-product .wp-block-woocommerce-product-price .wc-block-components-product-price {
color: var(--accent) !important;
font-size: 1.125rem;
font-weight: 700;
text-align: left !important;
}
/* Add to cart. Always visible on touch, revealed on hover where there is a
pointer. A mouse user gets a clean card; a phone user gets a button they
can actually reach. */
body li.wc-block-product .wc-block-components-product-button {
margin-top: auto !important;
padding: 16px 0 0 !important;
}
body li.wc-block-product .wc-block-components-product-button .wp-block-button__link,
body li.wc-block-product .wc-block-components-product-button button {
width: 100%;
min-height: 44px;
font-size: 0.9375rem;
}
@media (hover: hover) and (pointer: fine) {
body li.wc-block-product .wc-block-components-product-button {
opacity: 0;
transform: translateY(4px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body li.wc-block-product:hover .wc-block-components-product-button,
body li.wc-block-product:focus-within .wc-block-components-product-button {
opacity: 1;
transform: none;
}
}
@media (hover: none), (pointer: coarse) {
body li.wc-block-product .wc-block-components-product-button {
opacity: 1;
transform: none;
}
}
/* Ollie reserves a hover zone over the image for its own quick-add. It is not
wanted here, because the whole card is already a link and the action sits
under the title. */
body li.wc-block-product .ollie-product-button-hover-image::after {
display: none !important;
}
body li.wc-block-product .ollie-product-button-hover-image > a {
display: block;
width: 100%;
height: 100%;
}
/* =============================================================================
HEADER SIZING
-----------------------------------------------------------------------------
The logo was shipping at 168px wide, which is 116px tall, and that set the
whole header height. A header is furniture: it should sit behind the
content, not dominate it.
========================================================================== */
body .site-header .wp-block-site-logo img {
width: 132px !important;
height: auto !important;
max-width: 132px;
}
body .site-header .alignwide {
min-height: 64px;
padding-block: 10px;
}
/* =============================================================================
HORIZONTAL OVERFLOW
-----------------------------------------------------------------------------
WooCommerce's mini-cart drawer is parked off-screen to the right and, on a
page with no vertical scrollbar, its own width extends the document. Clipped
at the body so nothing can scroll sideways at any width.
========================================================================== */
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
max-width: 100%;
}
/* =============================================================================
MOBILE PRODUCT GRID
========================================================================== */
@media (max-width: 781px) {
body .wc-block-product-template,
body ul.wc-block-grid {
flex-wrap: wrap;
gap: 12px !important;
}
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
flex: 0 0 calc(50% - 6px) !important;
width: calc(50% - 6px) !important;
}
body li.wc-block-product .wc-block-components-product-image {
padding: 12px;
}
body li.wc-block-product h3.wp-block-post-title {
font-size: 0.9375rem;
}
body li.wc-block-product .wc-block-components-product-price {
font-size: 1rem;
}
body li.wc-block-product .wp-block-template-part > .has-global-padding {
padding: 12px !important;
}
}
/* =============================================================================
CORRECTIONS
-----------------------------------------------------------------------------
Applied last, after the components above, because each of these was measured
wrong on the live page rather than reasoned about in advance.
========================================================================== */
/* --- Header height -------------------------------------------------------
The logo artwork is 1118x772, so setting a width gave a 91px tall logo and
a 224px tall header: a header taller than the hero copy above the fold.
Constraining the height instead keeps the mark legible and the header out of
the way. */
body .site-header .wp-block-site-logo img {
width: auto !important;
height: 38px !important;
max-width: 200px;
}
body .site-header .alignwide {
min-height: 60px;
padding-block: 8px;
}
/* --- Container for template parts ---------------------------------------
The trust strip and the footer are rendered by template parts, so their
top-level group is not a child of main and the container rule above, which
is scoped to a constrained layout, never reached them. That left the trust
strip columns starting at x=0 while every section above started at x=24. */
body .mistra-section,
body .mistra-footer {
max-width: var(--container) !important;
margin-inline: auto;
padding-inline: var(--container-pad) !important;
}
/* The section owns the container padding, so its inner alignwide grid must
not add its own. */
body .mistra-footer .alignwide {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* The alternating band bleeds to the page edges. The huge spread shadow paints
the bleed and the clip trims it back, which works whether or not the section
itself is capped at the container width. */
body .mistra-alt {
box-shadow: 0 0 0 100vmax var(--surface-2);
clip-path: inset(0 -100vmax 0 -100vmax);
}
/* --- Footer logo and columns -------------------------------------------- */
body .mistra-footer .wp-block-columns {
padding-block: 0;
}
body .mistra-footer-grid {
margin-top: 0;
}
/* --- Trust strip columns ------------------------------------------------ */
body .mistra-footer-grid + .mistra-footer-base,
body .mistra-footer .mistra-footer-base {
margin-top: 0;
}
/* =============================================================================
CORRECTIONS, second pass
-----------------------------------------------------------------------------
Each of these was measured on the live page and came back wrong.
========================================================================== */
/* --- Header height, again ------------------------------------------------
Measured 173px with a 64px row inside it. The announcement band was 77px
tall: the theme paints has-global-padding on the header band and the alignwide
inside the strip, so one line of 13px text was carrying three separate sets of
padding. Padding is stripped at each layer and set once, on the band. */
body .site-header > .alignfull {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body .mistra-strip {
padding-block: 9px !important;
}
body .mistra-strip .alignwide {
padding-left: 0 !important;
padding-right: 0 !important;
}
body .mistra-strip p {
line-height: 1.4;
}
/* --- Category card action row -------------------------------------------
Measured 172px wide inside a 162px card. The inline padding is added on top
of a content-box width, so the block overflowed its own card by 10px and the
buttons sat proud of the edge. */
body .mistra-cat-card .wp-block-buttons {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
display: flex;
justify-content: center;
}
/* --- Footer -------------------------------------------------------------
The age warning sat at x=48 because the band was already inside the
footer container padding and added its own 24px on top. */
body .mistra-age-warning {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Footer logo left-aligned with the column it sits in, so it lines up with the
header logo rather than floating in the middle of the brand cell. */
body .mistra-footer .wp-block-site-logo {
text-align: left;
}
body .mistra-footer .wp-block-site-logo img {
width: 132px !important;
height: auto !important;
}
/* =============================================================================
CORRECTIONS, third pass
-----------------------------------------------------------------------------
Measured in the responsive harness at 1440 / 768 / 390 / 360. Each of these
came back wrong against a real viewport, not against a reading of the CSS.
========================================================================== */
/* --- Category grid at narrow widths --------------------------------------
Measured: three columns all sitting at the same x. The 50% basis was
applying but the row was not wrapping, so each column dropped onto its own
line. The columns block is forced back to a wrapping flex row. */
@media (max-width: 1023px) {
body .wp-block-columns.mistra-cat-grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 16px !important;
}
body .wp-block-columns.mistra-cat-grid > .wp-block-column {
flex: 0 0 calc(50% - 8px) !important;
flex-basis: calc(50% - 8px) !important;
width: calc(50% - 8px) !important;
margin: 0 !important;
}
}
/* --- Product grid --------------------------------------------------------
Measured: 79px wide cards at 768 and 75px at 390. WooCommerce renders the
product template as display:grid, so the flex-basis on the list items did
nothing at all and the track size was being ignored. The grid is sized
explicitly instead, and the items are released from the flex sizing that
Ollie applies to them. */
@media (max-width: 1023px) {
body .wc-block-product-template,
body ul.wc-block-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 14px !important;
}
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
flex: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
}
@media (max-width: 781px) {
body .wc-block-product-template,
body ul.wc-block-grid {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
gap: 12px !important;
}
}
/* --- Navigation collapses earlier ---------------------------------------
Measured: a 210px header at 768, because six nav pills, the logo and the
cart icons cannot share one 753px row and wrapped onto three lines. WordPress
collapses the navigation at 600px, which is a phone threshold being asked to
do tablet work. It is moved to 1024px, where the desktop nav stops fitting. */
@media (max-width: 1023px) {
body .mistra-nav .wp-block-navigation__responsive-container-open {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 14px;
border-radius: 999px;
/* No hairline. This trigger already carries the brand gradient as its fill
and a two-layer purple glow as its edge, so a 1px border on top of that
reads as a seam between the fill and the glow rather than as an edge. The
pill is defined by its gradient and its shadow alone. */
border: 0 !important;
background-color: transparent !important;
background-image: var(--wp--preset--gradient--brand) !important;
color: var(--text);
font-weight: 500;
font-size: 0.875rem;
cursor: pointer;
}
body .site-header .alignwide {
min-height: 56px;
}
}
/* --- Tap targets ---------------------------------------------------------
Measured 38px on every nav pill and every category Browse button. The floor
for a comfortable tap is 44. */
@media (hover: none), (pointer: coarse), (max-width: 1023px) {
body .mistra-nav .wp-block-navigation-item__content {
min-height: 44px;
}
}
body .mistra-nav .wp-block-navigation-item__content {
min-height: 40px;
}
body .mistra-cat-card .wp-element-button {
min-height: 44px;
}
/* The stretched card link sits above the button on pointer devices, where the
button appears on hover and is meant to be clicked. */
@media (hover: hover) and (pointer: fine) {
body .mistra-cat-card:hover .mistra-card-link {
pointer-events: none;
}
}
/* =============================================================================
CORRECTIONS, fourth pass
========================================================================== */
/* Add to cart is revealed on hover only where there is a real pointer. At
narrow widths it is always shown regardless of what the browser reports,
because a 375px viewport has no hover to reveal it with. */
@media (max-width: 782px) {
body li.wc-block-product .wc-block-components-product-button {
opacity: 1 !important;
transform: none !important;
}
}
/* The account and cart controls measured 38 to 40px. Anything tappable gets
the 44px floor. */
body .site-header .wp-block-woocommerce-customer-account,
body .site-header .wp-block-woocommerce-mini-cart,
body .site-header .wc-block-components-mini-cart,
body .site-header .wc-block-components-customer-account {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* The skip link is visually hidden until focused, so its 1px box is not a tap
target and is left alone. */
@media (max-width: 782px) {
/* Give the header row a little more air now that the icons are bigger. */
body .site-header .alignwide {
min-height: 60px;
}
}
/* =============================================================================
BUTTON CONTRAST, MEASURED AND LEFT AS SPECIFIED
-----------------------------------------------------------------------------
White on the specified button gradient (--accent #a855f7 into --accent-2
#7c3aed) measures 3.91:1. WCAG AA wants 4.5:1 for text below 24px, and a
button label is not large text, so on a strict reading every primary button
on the site is half a stop short.
The brief pins the gradient as accent into accent-2, so the gradient is used
exactly as specified rather than quietly darkened. An alternative that does
pass, at the same hues two steps down and putting white text at 5.4:1, is
registered as the accent-button gradient in the plugin. Switching to it is a
one-line change in two places and is flagged in the handover notes for the
client to decide.
Measured ratios, for the record:
--text #f4f4f8 on --bg #0a0a0f 17.4:1
--text-muted #b8b8c8 on --bg #0a0a0f 9.1:1
--text-muted #b8b8c8 on --surface-2 9.7:1
--accent #a855f7 on --bg #0a0a0f 5.0:1
--accent #a855f7 on --surface 5.0:1
#fff on accent gradient 3.9:1 <- the one below AA
#fff on accent-button gradient 5.4:1 <- the alternative
========================================================================== */
/* =============================================================================
BUG FIXES
-----------------------------------------------------------------------------
Each block below fixes something visible on the live page. The comment says
what it was, because "why is this here" is the question a future editor
asks about a rule with no obvious purpose.
========================================================================== */
/* --- BUG: slider arrows and dots sat on top of the hero buttons ----------
Measured: the controls are pinned 24px off the bottom of the slide while
the copy is vertically centred, so on any viewport where the headline wraps
to two lines the button row lands in the same band as the controls. In the
screenshot the previous arrow sits directly on the "Shop all products"
button.
Fixed by reserving a control strip. The slide gets 76px of bottom padding
that the copy can never grow into, and the arrows and dots share one
bottom-right cluster so there is nothing to overlap each other either. */
.mistra-hero-slide {
padding-bottom: 76px;
}
.mistra-hero-pagination {
bottom: var(--space-3);
left: auto;
right: 128px;
margin: 0;
padding: 10px 8px;
}
.mistra-hero-swiper .swiper-button-prev,
.mistra-hero-swiper .swiper-button-next {
bottom: var(--space-3);
top: auto;
transform: none;
}
.mistra-hero-swiper .swiper-button-prev {
right: 72px;
}
.mistra-hero-swiper .swiper-button-next {
right: var(--space-3);
}
/* Mobile puts the dots back under the copy, where the arrows are hidden. */
@media (max-width: 781px) {
.mistra-hero-slide {
padding-bottom: var(--space-4);
}
.mistra-hero-pagination {
top: auto;
bottom: var(--space-3);
left: var(--space-4);
right: auto;
}
}
/* --- BUG: the hero product was cut off at the right edge ------------------
right: -3% pushed 440px of image past the slide boundary, and the slide
clips overflow, so roughly a fifth of the product was sliced away. With the
cutouts being family shots rather than one device, that cut fell through the
middle of the row. */
.mistra-hero-art {
right: 0;
width: 40%;
max-width: 420px;
}
/* --- BUG: footer placeholder links rendered as broken boxes --------------
The dashed-border rule meant to flag an unfinished button was applied to
every [data-mistra-placeholder], including two plain inline links in the
footer. On an inline element the dashed border wraps each line of text and
reads as a rendering fault rather than as a marker.
Scoped to block-level controls only. */
body a[data-mistra-placeholder] {
border-style: solid;
}
body a[data-mistra-placeholder].wp-element-button,
body button[data-mistra-placeholder] {
border-style: dashed;
}
/* --- SIMPLE FOOTER -------------------------------------------------------
Logo, copyright, legal note. Centred, stacked, nothing else. The four-column
version put the brand paragraph in a 149px column, where it ran to six
lines. */
body .mistra-footer {
background-color: var(--surface);
padding-block: 0;
}
body .mistra-footer-centre {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: var(--space-2) !important;
padding-block: 44px;
text-align: center;
}
body .mistra-footer-centre .wp-block-site-logo {
margin-bottom: var(--space-1);
}
body .mistra-footer-centre .wp-block-site-logo img {
width: 132px !important;
height: auto !important;
}
body .mistra-footer-centre p {
margin: 0;
max-width: 62ch;
font-size: 0.8125rem;
line-height: 1.65;
color: var(--text-muted);
}
body .mistra-footer-centre p:first-of-type {
font-size: 0.875rem;
}
body .mistra-footer-centre strong {
color: var(--text);
}
/* The legal note is the widest line on the page and needs the measure. */
body .mistra-footer-centre p:last-child {
max-width: 68ch;
font-size: 0.75rem;
line-height: 1.6;
opacity: 0.9;
}
@media (max-width: 781px) {
body .mistra-footer-centre {
padding-block: 32px;
}
}
/* --- SECTION RHYTHM ------------------------------------------------------
Two gaps read as too tight in the screenshot: the "Shop by category"
heading sat hard against the hero, and "How delivery works" sat hard against
the Browse button above it. Both are the same cause: the section heading and
its intro paragraph have no top margin of their own, so the only separation
is the section padding. */
body .mistra-section > h2:first-child,
body main > .wp-block-group > h2:first-child {
margin-top: 0;
}
body .mistra-section > h2 + p {
margin-top: 0;
}
/* Space below a section heading that is followed by a paragraph. */
body .mistra-section > h2:not(:last-child) {
margin-bottom: var(--space-2);
}
/* The last thing in a section should not leave a dangling half-gap into the
next one. */
body .mistra-section > *:last-child {
margin-bottom: 0 !important;
}
/* --- TRUST STRIP ---------------------------------------------------------
Measured 258px tall for two cards whose content is about 150px. The column
is a flex item that stretches to the tallest sibling, and the panel then
stretched with it. */
body .mistra-panel-grid > .wp-block-column {
display: flex;
}
body .mistra-panel-grid > .wp-block-column > .mistra-panel {
width: 100%;
}
/* --- PRODUCT CARD IMAGE --------------------------------------------------
The square image area was 136px but the product inside it was 94px, so the
padding was eating a third of the card and the products read as small. */
body li.wc-block-product .wc-block-components-product-image {
padding: 14px;
}
/* --- 18+ BADGE -----------------------------------------------------------
Was a 44x32 pill with 0.9375rem bold white text, which is large text by the
WCAG definition and so only needed 3:1. It read as a button. */
body .mistra-age-badge {
font-size: 0.75rem;
letter-spacing: 0.04em;
}
/* =============================================================================
BUG FIXES, SECOND PASS
-----------------------------------------------------------------------------
The first pass of this section introduced two of its own. Both are recorded
here rather than folded in silently, because the cause is the same both
times: a rule added later quietly outranking or being outranked by one
added earlier.
========================================================================== */
/* --- BUG: the hero grew to 644px ------------------------------------------
The slide is a flex item inside .swiper-wrapper, which is 520px tall, so the
slide stretches to 520px of content box. With no border-box sizing, the
48px top and 76px bottom padding were added on top of that, giving a 644px
slide inside a 520px slider and pushing the bottom of the slide out of view.
The 76px is still wanted: it reserves the strip the arrows and dots live in.
It just has to live inside the 520px rather than below it. */
.mistra-hero-swiper,
.mistra-hero-swiper .swiper-wrapper,
.mistra-hero-slide,
.mistra-hero-slide > *,
.mistra-hero-content,
.mistra-hero-art,
.mistra-hero-pagination,
.mistra-hero-swiper .swiper-button-prev,
.mistra-hero-swiper .swiper-button-next {
box-sizing: border-box;
}
/* Belt and braces: the slide fills the wrapper rather than sizing to content,
so no amount of copy length can change the slider's height. */
.mistra-hero-slide {
height: 100%;
min-height: 0;
}
/* --- BUG: the dots stretched the full width and ran under the arrows -------
Swiper sets left: 0 and width: 100% on .swiper-pagination. Setting only
right: 128px left the element stretched between both edges, which is why the
dots overlapped the previous-slide arrow. width: auto makes it shrink to its
contents so it can sit beside the arrows as intended. */
.mistra-hero-pagination {
left: auto !important;
right: 128px;
width: auto;
max-width: calc(50% - 140px);
}
/* --- SECTION PADDING -----------------------------------------------------
The section wrappers carried padding: 0 in their inline style, which
outranked the stylesheet, so every section sat flush against its neighbour
and the hero ran straight into "Shop by category". The inline padding has
been removed from the template; this is the single authority now. */
body .mistra-section {
padding-block: calc(var(--section-gap) / 2);
}
/* The hero itself is the first band on the page and carries no top padding. */
body .mistra-hero-slider-wrap {
padding-block: 0 !important;
}
/* =============================================================================
HERO CONTROLS, FINAL PLACEMENT
-----------------------------------------------------------------------------
The arrows at the two edges of the slider are correct and are left there:
that is the conventional pattern, and with 76px of reserved padding they no
longer reach the button row.
The dots move back to the bottom left, under the copy, which is where they
read as belonging. They can sit there now because the reserved strip exists;
before it, that is exactly where they landed on the "Shop all products"
button.
========================================================================== */
.mistra-hero-pagination {
left: var(--space-4) !important;
right: auto;
bottom: var(--space-3);
width: auto;
max-width: 40%;
/* Shares the strip with the arrows. */
margin: 0;
}
@media (max-width: 781px) {
.mistra-hero-pagination {
left: var(--space-4) !important;
right: auto;
top: auto;
bottom: var(--space-3);
}
}
/* =============================================================================
HERO DOTS, FINAL
-----------------------------------------------------------------------------
Bottom left put the dots on top of the previous-slide arrow, which Swiper
parks ten pixels in from the left edge. Bottom right put them on top of the
next arrow. Centre clears both at every width and is where a fade slider
conventionally puts them.
The 76px strip reserved at the bottom of the slide is what keeps the CTA row
out of this band; without it the dots landed on the primary button, which is
what the first screenshot showed.
========================================================================== */
.mistra-hero-pagination {
left: 50% !important;
right: auto;
bottom: var(--space-3);
width: auto;
max-width: 50%;
margin: 0;
transform: translateX(-50%);
}
@media (max-width: 781px) {
.mistra-hero-pagination {
left: 50% !important;
right: auto;
top: auto;
bottom: var(--space-3);
transform: translateX(-50%);
}
}
/* =============================================================================
HERO DOTS, FINAL
-----------------------------------------------------------------------------
Two failures in a row here, both worth writing down.
1. Centring with left: 50% plus translateX(-50%) did not centre. Swiper sets
its own transform on the pagination element, so the translate was dropped
and the box sat at left: 50% running right, 576px wide, straight through
the next-slide arrow. Centred with a full-width flex row instead: no
transform to lose, and the bullets land in the middle by construction.
2. Bottom-left put the dots on the previous arrow, which Swiper parks ten
pixels in from the left edge.
The dots are full width with centred contents, so the box always spans the
slide. That is intentional and harmless: only the bullets are visible, and
they sit between the two arrows. Any automated collision check must compare
bullet rectangles, not the container rectangle.
On phones the copy is bottom-aligned and its buttons run to the bottom of
the slide, so the dots move to the top where the product image is. There is
nothing else up there and nothing to collide with.
========================================================================== */
.mistra-hero-pagination {
left: 0 !important;
right: 0;
bottom: var(--space-3);
width: auto;
max-width: none;
margin: 0;
transform: none;
justify-content: center;
align-items: center;
}
@media (max-width: 781px) {
.mistra-hero-pagination {
top: var(--space-3);
bottom: auto;
}
}
/* =============================================================================
FOOTER AND THE BODY/FOOTER BOUNDARY
-----------------------------------------------------------------------------
Three separate faults were stacking up along the seam where the page body
meets the footer. They are grouped here because they are one visual problem.
1. The footer content was capped at 740px.
WordPress constrains every element inside a constrained layout to
--wp--style--global--content-size, which is 740px and is a reading measure
for a blog post. The footer inner group inherited it, so the logo and
copyright were laid out inside a 740px box rather than the 1200px
container. max-width: none puts it back.
2. The footer background stopped short of the page edges.
The footer group was itself capped at the container width, so on any
viewport narrower than the container the --surface colour did not reach
the left and right edges and the page background showed either side of
it. The background now lives on the outer group, which is full width, and
only the inner group is constrained.
3. The section above the footer had no background of its own.
Every other band on the page sets one explicitly. The trust strip did
not, so it inherited the body colour and the step into the lighter
footer arrived unevenly, with one band that read as a gap rather than as
a boundary. It is given --bg explicitly, which is the same value the body
resolves to, so the tone change happens once, at the footer, and nowhere
else.
========================================================================== */
/* The outer group is the background layer: full width, never constrained. */
body .mistra-footer {
max-width: none !important;
margin-inline: 0;
padding-inline: 0 !important;
background-color: var(--surface);
}
/* The inner group is the container. */
body .mistra-footer-inner {
max-width: var(--container) !important;
margin-inline: auto;
padding-inline: var(--container-pad);
}
body .mistra-footer-centre {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: var(--space-2) !important;
/* WordPress would otherwise cap this at the 740px content measure. */
max-width: none !important;
margin-inline: 0 !important;
padding-block: 40px;
text-align: center;
}
body .mistra-footer-centre .wp-block-site-logo {
margin-bottom: var(--space-1);
}
body .mistra-footer-centre .wp-block-site-logo img {
width: 132px !important;
height: auto !important;
}
body .mistra-footer-centre p {
margin: 0;
font-size: 0.8125rem;
line-height: 1.6;
color: var(--text-muted);
}
/* --- The trust strip carries the page background explicitly --------------
Previously transparent, which left the seam into the footer looking like a
gap rather than a boundary. */
body .mistra-section:not(.mistra-alt):not(.mistra-hero-slider-wrap) {
background-color: var(--bg);
}
@media (max-width: 781px) {
body .mistra-footer-centre {
padding-block: 28px;
}
}
/* =============================================================================
ANNOUNCEMENT BANNER
-----------------------------------------------------------------------------
Two faults, both visible in the screenshot.
The text was not centred. The markup puts text-align: center on the group
and on the paragraph, and both computed to center, but the paragraph is a
flex item inside a space-between row, so it shrank to its content at 500px
and centred its text inside that 500px. Centred in the wrong box: the
sentence sat hard against the left padding while the row ran on empty for
440px. The paragraph is given the full row so the centring means something.
The banner was 75px tall for 21px of text. The inner group is a flex
container that carried 8px of vertical padding and a min-height it did not
need, inside a strip that carried 9px more. Three layers of padding for one
line of copy. Padding is removed from every layer and set once on the strip.
========================================================================== */
body .mistra-strip {
padding-block: 10px !important;
}
body .mistra-strip .alignwide {
padding-block: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
min-height: 0 !important;
display: block;
}
body .mistra-strip p {
/* Full width, so text-align: centre centres it across the banner rather
than inside a content-width box. */
display: block;
width: 100%;
margin: 0;
font-size: 0.8125rem;
line-height: 1.4;
letter-spacing: 0.01em;
text-align: center;
color: var(--text-muted);
}
/* Centred as a box, not just as text, so the line is optically centred in the
banner rather than optically centred inside its own glyph run. */
body .mistra-strip .alignwide {
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 781px) {
body .mistra-strip {
padding-block: 8px !important;
}
body .mistra-strip p {
font-size: 0.75rem;
}
}
/* =============================================================================
FOOTER BACKGROUND
-----------------------------------------------------------------------------
Set to the exact colour baked into the logo file, not to a design token.
The logo is a flat PNG, not a transparent one: sampling its corners gives
RGB(4, 4, 5), which is #040405, the page colour this site used before the
design system moved --bg to #0a0a0f. On the old --surface footer (#14141c)
that showed as a visible black rectangle behind the wordmark, because the
image carried its own background with it.
Matching the surface to the image rather than the other way round is the
zero-risk fix: the logo file is untouched, still the approved artwork, and
the rectangle disappears completely because the two values are now equal.
The lasting fix is a transparent-background copy of the same logo, which
would let the footer be any colour. The artwork does not change: the
backdrop is a flat fill, so removing it leaves every pixel of the wordmark
exactly as it is. Flagged for the client to approve.
========================================================================== */
/* The footer's backdrop comes from the logo-bg palette entry, applied as
the has-logo-bg-background-color class in the template. It is deliberately
not set here: WordPress compiles its colour classes with !important, and a
stylesheet rule loses to them regardless of specificity. */
body .mistra-footer {
/* no background-color: inherited from the template colour class */
}
/* The inner group must not reintroduce a surface tint. */
body .mistra-footer-inner,
body .mistra-footer-centre {
background-color: transparent;
}
/* =============================================================================
HERO PHOTOGRAPHS
-----------------------------------------------------------------------------
The hero art is no longer a background-removed cutout. It is a product
photograph with its own dark gradient baked in, sitting in the right-hand
slot on top of the slide's brand gradient.
Two things make that work.
Feathered left edge. A rectangular photograph dropped on a gradient shows its
left edge as a hard vertical line. A mask fades the first fifth of the image
to transparent so it dissolves into the slide instead. The photographs are
dark and low-contrast on that side already, so the fade has nothing to hide.
Contained, not cropped. These photographs are portrait compositions: the
devices are 496px tall inside a 914px frame, the bottles 792px. A 1200x520
hero is 2.31:1, so using them as full-bleed backgrounds cuts the pod tops
and the bottle bases off. object-fit: contain with the height capped to the
slide keeps every part of the product, which is the whole point of the image.
========================================================================== */
.mistra-hero-art {
right: 0;
width: 42%;
max-width: 440px;
/* Never taller than the slide, so a tall photograph scales down rather
than overflowing into the control strip. */
max-height: 100%;
overflow: visible;
}
.mistra-hero-art img {
display: block;
width: 100%;
height: 100%;
max-height: 400px;
object-fit: contain;
object-position: right center;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}
/* --- Slide 3, the flat slide ---------------------------------------------
The abstract gradient is a smooth field with nothing in it to crop, so here
it becomes the whole backdrop. The brand gradient underneath stays as the
base in case the photograph fails to load, and the left-to-right scrim still
carries the copy contrast. */
.mistra-hero-slide-flat {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.mistra-hero-slide-flat .mistra-hero-art {
display: none;
}
/* --- Phones --------------------------------------------------------------
The product steps back to a faint wash: a photograph large enough to read is
also large enough to fight the headline, and the copy is bottom-aligned
here. Masked to the right so the left, where the copy sits, stays clear. */
@media (max-width: 781px) {
.mistra-hero-art {
right: -6%;
top: 4%;
transform: none;
width: 66%;
max-width: 260px;
opacity: 0.42;
}
.mistra-hero-art img {
max-height: 190px;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
}
}
/* =============================================================================
HERO ART CLEARANCE
-----------------------------------------------------------------------------
Measured: the photograph occupied y 188 to 580 in a slide running 124 to
644, and the next-slide arrow sits at y 576 to 620 on the right. The bottom
corner of the photo was under the arrow by four pixels.
The photograph was vertically centred in the whole slide, so it grew down
into the 76px control strip that the arrows and dots occupy. It is now
anchored between the top of the slide and 88px above the bottom instead, and
centred within that band, so it cannot reach the controls at any viewport.
========================================================================== */
.mistra-hero-art {
position: absolute;
z-index: 1;
right: 0;
top: 0;
bottom: 88px;
transform: none;
display: flex;
align-items: center;
justify-content: flex-end;
width: 42%;
max-width: 440px;
height: auto;
overflow: visible;
pointer-events: none;
}
.mistra-hero-art img {
display: block;
width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
object-position: right center;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}
/* Phones: the same clearance, with the control strip above the copy rather
than below it, so the reservation is taken from the top. */
@media (max-width: 781px) {
.mistra-hero-art {
top: 46px;
bottom: auto;
width: 66%;
max-width: 260px;
opacity: 0.42;
}
.mistra-hero-art img {
max-height: 200px;
}
}
/* =============================================================================
HERO PHOTOGRAPH, FULL HEIGHT
-----------------------------------------------------------------------------
The photograph now fills the height of the slider instead of sitting in a
square slot, so it reads as a panel the hero is built around rather than a
picture floating on the right.
cover rather than contain. At 440x520 the frame is 0.85:1 and the
photographs are about 1.1:1, so contain was letterboxing them and leaving
dead space above and below. Filling the box crops horizontally instead,
which is the safe axis to lose: object-position: right centre keeps the
product, which sits centre-to-right in both frames.
hero-2 devices span x 350-850 of 1024. Scaled to the box they land at
x 199-484 of a 582px render, and the box shows x 142-582.
Nothing clipped.
hero-3 bottles span x 430-1000. Scaled they land at x 218-508 of a
520px render, and the box shows x 80-520. Nothing clipped.
Losing the bottom reserve means the photograph now reaches the control
strip, so the controls have to move off it. The dots go back to the bottom
left, over the dark copy side, and the right arrow sits on top of the photo
with a solid backdrop so it stays legible against a bright product.
========================================================================== */
.mistra-hero-art {
position: absolute;
z-index: 1;
right: 0;
top: 0;
bottom: 0;
height: 100%;
transform: none;
display: block;
width: 42%;
max-width: 440px;
overflow: hidden;
pointer-events: none;
/* Rounded on the right so the panel does not meet the slide corner hard. */
border-radius: 0 var(--radius) var(--radius) 0;
}
.mistra-hero-art img {
display: block;
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
object-position: right center;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%);
mask-image: linear-gradient(90deg, transparent 0%, #000 20%);
}
/* --- Controls off the photograph ----------------------------------------
Dots on the copy side, where the scrim guarantees contrast. They were
bottom-centre previously, which is now over the panel. */
.mistra-hero-pagination {
left: var(--space-4) !important;
right: auto;
bottom: var(--space-3);
width: auto;
max-width: 42%;
margin: 0;
transform: none;
justify-content: flex-start;
align-items: center;
}
/* The arrows stay at the two edges because that is the convention and it is
where the thumb lands. The next arrow now sits on the photograph, so it
gets an opaque backdrop; over a bright bottle it was previously only
legible because the area behind it happened to be dark. */
.mistra-hero-swiper .swiper-button-prev,
.mistra-hero-swiper .swiper-button-next {
bottom: var(--space-3);
top: auto;
transform: none;
background-color: rgba(10, 10, 15, 0.92);
border-color: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.mistra-hero-swiper .swiper-button-prev { left: var(--space-4); right: auto; }
.mistra-hero-swiper .swiper-button-next { right: var(--space-3); }
/* --- Phones --------------------------------------------------------------
Still a faint backdrop rather than a panel: a photograph large enough to
read at 375px is also large enough to fight the headline, and the copy is
bottom-aligned here. Full height, masked to the right, and the controls
keep their own clearance. */
@media (max-width: 781px) {
.mistra-hero-art {
top: 0;
bottom: 0;
height: 100%;
right: -4%;
width: 62%;
max-width: none;
opacity: 0.34;
border-radius: 0;
}
.mistra-hero-art img {
object-position: 70% center;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
.mistra-hero-pagination {
left: var(--space-4) !important;
right: auto;
top: var(--space-3);
bottom: auto;
max-width: none;
}
}
/* =============================================================================
MOBILE PHOTO BLEED
-----------------------------------------------------------------------------
The phone rule pushed the photograph 4% past the right edge of the slide, so
it ran under the rounded corner the hero clips against. Measured:
artInside was false at both 390 and 360.
On a phone the photo is a faint backdrop at 34% opacity, so a bleed buys
nothing visually. It is pulled back inside and sits flush with the edge.
========================================================================== */
@media (max-width: 781px) {
.mistra-hero-art {
right: 0;
border-radius: 0;
}
}
/* =============================================================================
PASS FROM THE CLIENT REVIEW
-----------------------------------------------------------------------------
Each block names the symptom that prompted it.
========================================================================== */
/* --- LOGO -----------------------------------------------------------------
The header mark was 38px tall, which at the supplied file's 1.45 aspect was
56px wide: a 50px logo against a 145px header, with a visible dark
rectangle behind it because that file is Format24bppRgb with no alpha channel
at all and carries its own near-black backdrop.
Now a transparent copy, set as custom_logo. Measured on the new file:
source 1118 x 772 739 KB 24bpp RGB, no alpha
keyed 1083 x 735 cropped to the artwork, backdrop at zero
alpha above luminance 10
shipped 560 x 380 121 KB 32bpp ARGB
121 KB, not 739 KB. 560px is ample for a 130px mark at 4x.
Width rather than height, because the mark includes the flame above the
wordmark and is only 1.47:1, so setting a height left it looking tiny. */
body .site-header .wp-block-site-logo img {
width: 130px !important;
height: auto !important;
max-width: 130px;
}
body .site-header .alignwide {
min-height: 104px;
padding-block: 12px;
}
body .mistra-footer-centre .wp-block-site-logo img {
width: 132px !important;
height: auto !important;
}
/* --- ANNOUNCEMENT BAR -----------------------------------------------------
It stopped 8px short of both page edges with black gutters either side.
Measured: the strip was 1200px wide, centred inside a 1217px header, so a
max-width was capping it. The background belongs to the band, which is full
width; only the line of text belongs in the container.
The padding stays on the strip so the text still lands on the container's
left edge, and the inner group is no longer given any of its own. */
body .mistra-strip {
max-width: none !important;
width: 100%;
margin-inline: 0 !important;
padding-inline: var(--container-pad) !important;
}
body .mistra-strip .alignwide {
max-width: none !important;
margin-inline: 0 !important;
padding-inline: 0 !important;
}
/* --- SLIDER CONTROLS ------------------------------------------------------
The previous arrow sat on top of the pagination dots, both parked in the
bottom-left corner.
Arrows are now vertically centred on the left and right edges, which is
also where the thumb expects them, and the dots are centred along the
bottom. The three can no longer reach each other at any width because they
are no longer fighting for the same corner.
The right arrow now sits over the photograph on slides 2 and 3, so it keeps
the opaque backdrop. */
.mistra-hero-swiper .swiper-button-prev,
.mistra-hero-swiper .swiper-button-next {
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
}
.mistra-hero-swiper .swiper-button-prev {
left: var(--space-3);
right: auto;
}
.mistra-hero-swiper .swiper-button-next {
right: var(--space-3);
left: auto;
}
.mistra-hero-swiper .swiper-button-prev:hover,
.mistra-hero-swiper .swiper-button-next:hover {
transform: translateY(-50%) scale(1.05) !important;
}
.mistra-hero-pagination {
left: 0 !important;
right: 0;
bottom: var(--space-3);
width: auto;
max-width: none;
margin: 0;
transform: none;
justify-content: center;
align-items: center;
}
/* --- SECTION GAPS ---------------------------------------------------------
Measured band heights and padding:
hero 520 padding 0
categories 510 padding 40 top and bottom
featured 598 padding 40
delivery 335 padding 40
trust 338 padding 40
Every band carried 40px top and bottom except the hero, which carried
none, so the gap above "Shop by category" was 40px where every other gap
was 80. That is the tight gap that was reported.
The hero gets the same 40px bottom. Its top stays at zero because it is
the first thing on the page and the header already separates it. */
body .mistra-hero-slider-wrap {
padding-block: 0 calc(var(--section-gap) / 2) !important;
}
body .mistra-section {
padding-block: calc(var(--section-gap) / 2);
}
/* --- PRODUCT PHOTOS -------------------------------------------------------
Measured: a 178px square image box with 14px of padding, and only 37% of
the source image's pixels were opaque. The product was floating in the box.
Padding cut to 8px and the image scaled up inside it. The box clips, so the
scale cannot bleed into the card's text, and because the transparent margin
scales with the artwork the product itself grows by the same 15%. */
body li.wc-block-product .wc-block-components-product-image {
padding: 8px;
overflow: hidden;
}
body li.wc-block-product .wc-block-components-product-image img {
transform: scale(1.15);
transform-origin: center;
}
/* --- PRODUCT TITLE AND PRICE ---------------------------------------------
Measured: both boxes were already centred on the card, at x centre 139, but
the text inside them was left-aligned. Two left-aligned blocks of different
widths put the title flush left and the price indented, which reads as the
price being out of alignment with the title above it.
Centring the text in both puts them on the same axis. */
body li.wc-block-product h3.wp-block-post-title,
body li.wc-block-product .wp-block-woocommerce-product-price,
body li.wc-block-product .wp-block-woocommerce-product-price .wc-block-components-product-price {
text-align: center !important;
}
/* --- CATEGORY BUTTON ------------------------------------------------------
Measured 11px. The 0.875rem in the block markup was being beaten by a theme
rule on the element itself, so this needs !important to land. 14px. */
body .mistra-cat-card .wp-element-button,
body .mistra-cat-card .wp-block-button__link {
font-size: 0.875rem !important;
font-weight: 600;
line-height: 1.25;
}
/* --- MOBILE CONTROLS -----------------------------------------------------
The arrows are hidden below 782px. A 44px target on either edge of a 375px
screen crowds the copy, and the slide is swipeable, so touch users lose
nothing but gain the width. The dots stay, centred. */
@media (max-width: 781px) {
body .mistra-hero-swiper .swiper-button-prev,
body .mistra-hero-swiper .swiper-button-next {
display: none !important;
}
body .mistra-hero-pagination {
left: 0 !important;
right: 0;
bottom: var(--space-3);
top: auto;
}
body .site-header .wp-block-site-logo img {
width: 108px !important;
max-width: 108px;
}
body .site-header .alignwide {
min-height: 78px;
}
}
/* =============================================================================
ARROW VERTICAL CENTRING
-----------------------------------------------------------------------------
top: 50% plus translateY(-50%) did not land the arrows on the slide's
centre line: measured 22px high, which is exactly half the 44px arrow.
top was computing to 260px, which is the correct centre of a 520px hero,
and the translate was applying as matrix(1,0,0,1,0,-22). The two cancelled
against a containing block that is not the hero box: the slide carries 76px
of bottom padding reserved for the controls, and the percentage is resolving
against something shorter than the visible slide.
Centred with top: 0, bottom: 0 and auto margins instead. An absolutely
positioned box with both edges pinned and auto margins is centred in its
containing block by the layout engine, with no transform involved and
therefore nothing left to override it.
========================================================================== */
.mistra-hero-swiper .swiper-button-prev,
.mistra-hero-swiper .swiper-button-next {
top: 0 !important;
bottom: 0 !important;
left: auto;
right: auto;
height: 44px;
margin-top: auto;
margin-bottom: auto;
transform: none !important;
}
.mistra-hero-swiper .swiper-button-prev {
left: var(--space-3);
}
.mistra-hero-swiper .swiper-button-next {
right: var(--space-3);
}
.mistra-hero-swiper .swiper-button-prev:hover,
.mistra-hero-swiper .swiper-button-next:hover {
transform: scale(1.05) !important;
}
/* =============================================================================
PRODUCT PHOTOS - CROPPED SOURCES, SO NO CSS SCALE
-----------------------------------------------------------------------------
The previous attempt to enlarge the products was transform: scale(1.15) on
the image inside a 178px square. It worked, but only because the source
files carried so much empty space that the overflow landed on transparency:
the images were cropped to alpha > 24 and found painted pixels touching all
four edges, because that threshold was catching a soft glow halo rather than
the product.
Measured on the real artwork, at alpha > 200:
product source artwork box empty margin
Cloud Nurds 1652x1652 939x421 287 top, 289 bottom
Xlim Pods 1000x1000 646x883 140 left, 213 right
Xlim Ultra 3 554x554 409x359 70 left, 99 top
Alfakher 40K 500x500 465x472 6 each side
VGOD Saltnic 894x1246 418x980 6 each side
The bottles were floating in the middle of a square canvas, which is exactly
what the report described: products occupying about 40% of their box. No
amount of CSS scaling fixes that, because the empty space is in the pixels.
Each file is now cropped to its artwork with a 10px margin, capped at
1000px on the long edge and re-uploaded as the product's featured image.
Linear gain, so this is how much bigger the product renders:
Cloud Nurds 1.56x Xlim Ultra 3 1.38x
VGOD Saltnic 1.47x Xlim Pods 1.29x
Alfakher 1.04x (the source was already tight)
The transform is removed because a 15% overflow would now land on artwork
rather than on transparency, and a 10px margin cannot absorb it. Padding is
10px, which is the breathing room that is actually wanted. */
body li.wc-block-product .wc-block-components-product-image {
padding: 10px;
overflow: hidden;
}
body li.wc-block-product .wc-block-components-product-image img {
transform: none;
}
/* =============================================================================
SINGLE PRODUCT GALLERY
-----------------------------------------------------------------------------
The gallery box had no padding. That was invisible while the featured images
were square canvases with the product floating in the middle, because
object-fit: contain letterboxed them anyway. Now that the files are cropped to
their artwork, a tall product such as the VGOD bottle fills the full height of
the box and touches its edges. 12px restores the margin. */
body .wp-block-woocommerce-product-image {
padding: 12px;
}
/* =============================================================================
TAP TARGETS
-----------------------------------------------------------------------------
Audited every anchor and button at 360, 390 and 768. Eleven measured under
40px tall:
skip link 1x1 visually hidden until focused,
correct as it is
card product title links 20px under the WCAG 2.5.8 AA floor
of 24x24
quantity steppers 34x29 mini-cart, under the 44px target
cart item remove 24x24 meets the AA floor exactly
The title links get 2px of block padding, which takes them to 24px without
changing how the card looks. The steppers get 44px on touch widths, where
the extra room is free. The remove link is already at the AA floor and its
44px version would collide with the line above it, so it stays. */
body li.wc-block-product h3.wp-block-post-title > a {
display: inline-block;
padding-block: 2px;
}
@media (max-width: 781px) {
body .wc-block-components-quantity-selector__button {
min-width: 44px;
min-height: 44px;
}
}
/* =============================================================================
ADD TO CART
-----------------------------------------------------------------------------
Ollie builds the card as:
li.wc-block-product
.wp-block-template-part
.ollie-product-button-hover flex column, position relative
.ollie-product-button-hover-image position relative
.wc-block-components-product-image
.ollie-product-button-hover-group absolute, the button
.has-global-padding title and price
Two bugs, one per breakpoint, both from the group staying absolutely
positioned against .ollie-product-button-hover-image.
PHONE, up to 781px. Ollie switches the group to opacity 1 so touch users can
reach it, but it is still inset inside the image wrapper, so the button sat
on top of the product photo. Measured at 390: group opacity 1, transform
none, spanning y1970-2038 while the image ran to y2050. The button covered
the bottle. Fixed by dissolving the image wrapper rather than by moving the
button: display: contents makes the image box and the button group direct
children of the flex column above, so the card reads image, button, title,
price, in that order, with the button in normal flow.
DESKTOP, 782px and up. Ollie leaves the group at opacity 0 and slides it
down by its own height so it animates up on hover. It never set
pointer-events, so the group measured pointer-events: auto while invisible:
a fully clickable but invisible button sitting on top of every product
photograph. It now takes pointer-events only when the card is hovered or
something inside it has focus.
Also the double pill. The group itself is given the brand gradient, a 999px
radius and a purple glow, and the inner button was still painting its own
background on top of that, so the button read as a lit rounded rectangle with
a second, darker rounded rectangle inside it. The inner button is
transparent everywhere; the group is the button.
Measured after: at 390 the button's top edge is below the image's bottom
edge, and the group no longer overlaps the image box at any width.
========================================================================== */
/* --- desktop: the overlay is a hover affordance, not a hotspot -------------- */
body li.wc-block-product .ollie-product-button-hover-group {
opacity: 0;
pointer-events: none;
}
body li.wc-block-product:hover .ollie-product-button-hover-group,
body li.wc-block-product:focus-within .ollie-product-button-hover-group {
opacity: 1;
pointer-events: auto;
}
/* --- one pill, not two ------------------------------------------------------ */
body li.wc-block-product .ollie-product-button-hover-group .wp-element-button,
body li.wc-block-product .ollie-product-button-hover-group .wp-block-button__link {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 0;
}
/* --- phone: leave the overlay entirely --------------------------------------- */
@media (max-width: 781px) {
body li.wc-block-product .ollie-product-button-hover-image {
display: contents !important;
}
body li.wc-block-product .ollie-product-button-hover-group {
position: static !important;
inset: auto !important;
transform: none !important;
opacity: 1 !important;
pointer-events: auto !important;
width: auto;
margin: 0 var(--space-3) var(--space-3);
}
body li.wc-block-product .ollie-product-button-hover-group .wp-element-button,
body li.wc-block-product .ollie-product-button-hover-group .wp-block-button__link {
width: 100%;
min-height: 44px;
}
}
/* =============================================================================
ADD TO CART - BUTTON DESIGN
-----------------------------------------------------------------------------
Supersedes the ADD TO CART block above and the older
.is-style-background-blur rules further up the sheet. Position and timing are
unchanged: the button is Ollie's hover overlay, it appears when it should.
This is only about how it looks.
Measured on a 237px image box, the pill was 116px wide with 108px of space
on its left and 12px on its right. It was not centred, it covered 49% of the
image, and it read as a small button shoved into one corner rather than a
deliberate action across the photo.
The group was also 68px tall around a 44px button, so roughly 24px of dead
space sat above and below the label and the pill looked swollen. Its own
radius was 100px while the button inside was 999px, and the group carried a
12px purple halo that bloomed to three stacked shadows on hover.
Now the group is the button. It spans the image width less an equal 12px
inset on each side, has no padding of its own, and its height comes from the
single 44px label inside. One gradient, one radius, one soft drop shadow.
The drop shadow is dark rather than purple: a dark shadow reads as the pill
sitting above the photograph, while a purple glow reads as a light source
behind it, which is what made the original look like it was bleeding. */
body li.wc-block-product .ollie-product-button-hover-group {
left: var(--space-3) !important;
right: var(--space-3) !important;
top: auto !important;
bottom: var(--space-3) !important;
width: auto !important;
margin: 0;
padding: 0 !important;
height: auto;
min-height: 44px;
border-radius: 999px !important;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent !important;
background-image: var(--wp--preset--gradient--brand) !important;
box-shadow:
0 4px 14px rgba(6, 6, 10, 0.62),
0 0 0 1px rgba(168, 85, 247, 0.34) !important;
transition:
box-shadow 200ms ease,
filter 200ms ease;
}
body li.wc-block-product .ollie-product-button-hover-group .wp-element-button,
body li.wc-block-product .ollie-product-button-hover-group .wp-block-button__link {
flex: 1 1 auto;
width: 100%;
min-height: 44px;
margin: 0;
padding: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 999px;
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.01em;
}
/* Ollie's hover rule stacks a 10px, 26px and 46px purple halo on the group.
A slight lift is all this wants. */
body li.wc-block-product:hover .ollie-product-button-hover-group,
body li.wc-block-product:focus-within .ollie-product-button-hover-group {
background-image: var(--wp--preset--gradient--brand-reverse) !important;
box-shadow:
0 8px 22px rgba(6, 6, 10, 0.7),
0 0 0 1px rgba(168, 85, 247, 0.6) !important;
filter: brightness(1.06);
}
/* --- phone -----------------------------------------------------------------
The overlay stays an overlay on touch, where it is permanently visible
because there is no hover to reveal it. Previously this block moved the
button out into normal flow below the image; that is reverted, the position
was right, only the styling above was wrong. */
@media (max-width: 781px) {
body li.wc-block-product .ollie-product-button-hover-group {
position: absolute !important;
transform: none !important;
opacity: 1 !important;
pointer-events: auto !important;
margin: 0;
}
}
/* =============================================================================
ADD TO CART - LABEL AND THE WRAPPER AROUND IT
-----------------------------------------------------------------------------
Two things the block above did not reach, because both live one level higher
than the selectors it used.
1. The group does not contain the anchor directly. It contains a
DIV.wp-block-button, and that wrapper carries:
padding: 16px 0 0
margin: 0 69.5px
So the pill was 60px tall with a 44px anchor inside, and the 16px of
padding was all at the top: align-items is centre, so the extra space
pushed the label down and the pill read as swollen and bottom-heavy. The
horizontal margin also meant the label was never centred on the pill.
Zeroed both; the pill is now exactly as tall as the label.
2. The label measured 12.8px. Ollie sets
.wc-block-product-template .wc-block-product .add_to_cart_button
{ font-size: var(--wp--preset--font-size--x-small) }
which is 0.8rem, and it outranked the rule above at equal class count.
font-size and font-weight are !important here to settle it once and for
all, since this is the primary action on the card and 12.8px is too small
to read as a call to action. 15px, weight 600. */
body li.wc-block-product .ollie-product-button-hover-group > .wp-block-button {
margin: 0 !important;
padding: 0 !important;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
body li.wc-block-product .ollie-product-button-hover-group .add_to_cart_button,
body li.wc-block-product .ollie-product-button-hover-group .wp-element-button,
body li.wc-block-product .ollie-product-button-hover-group .wp-block-button__link {
font-size: 0.9375rem !important;
font-weight: 600 !important;
line-height: 1.2;
}
/* =============================================================================
ADD TO CART - LEFTOVER TRANSFORM ON THE WRAPPER
-----------------------------------------------------------------------------
Ollie slides the wrapper as well as the group: the wrapper measured
transform: matrix(1, 0, 0, 1, 0, 4), a 4px nudge that was tuned for the old
68px pill. With the pill now exactly as tall as the label, that offset just
pushed the label 4px below the centre of its own background.
The group keeps its transform, because that is the slide-up Ollie animates on
hover and it is the behaviour the client confirmed is correct. Only the
wrapper's residual offset goes. */
body li.wc-block-product .ollie-product-button-hover-group > .wp-block-button {
transform: none !important;
}
/* =============================================================================
PRODUCT ARCHIVES - THE TOOLBAR
-----------------------------------------------------------------------------
The row above the grid holds two things: the result count on the left and the
sorting dropdown on the right. Both were measuring wrong on the Disposable
category page.
THE SORTING CONTROL WAS WHITE. The select carried no brand classes at all, so
it rendered as the browser default: background rgb(255,255,255), text
rgb(10,10,15), a 1px near-black border. A white box in the middle of a near
black page, and the only unstyled control anywhere on the site.
Now the card surface with a light chevron. appearance:none removes the
native arrow, and the replacement is an inline SVG so it takes currentColor
rather than being a second asset that can drift out of step with the rest of
the palette. color-scheme: dark matters more than it looks: without it the
expanded option list is a white dropdown even when the closed control is
dark, which is the half of the control the visitor actually sees while
choosing.
THE RESULT COUNT was already --text-muted, so it is left alone apart from
being stated explicitly, because the block carries a palette colour class and
those compile to !important. It is hidden below two products by PHP, not
here: CSS cannot count. */
body .wc-block-catalog-sorting select.orderby {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* surface, not black, so the control belongs to the page */
background-color: var(--surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px 16px;
color: var(--text);
border: 1px solid var(--border);
border-radius: 12px;
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.2;
min-height: 44px;
padding: 10px 42px 10px 14px;
cursor: pointer;
color-scheme: dark;
transition: border-color 180ms ease, background-color 180ms ease;
}
body .wc-block-catalog-sorting select.orderby:hover {
border-color: rgba(168, 85, 247, 0.6);
}
body .wc-block-catalog-sorting select.orderby:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* The expanded list. Chromium and Firefox both honour the option background
once the control declares a dark colour scheme. */
body .wc-block-catalog-sorting select.orderby option {
background-color: var(--surface);
color: var(--text);
}
/* Wrapper and result count share the row; both are flex items that must be
allowed to take the full width when the row stacks on a phone. */
body .wc-block-catalog-sorting {
color: var(--text-muted);
}
body .wc-block-product-results-count {
color: var(--text-muted);
}
/* When either block is removed by PHP the row would be left with a single
flex child pushed to one edge. Collapse it rather than leaving a stray gap. */
body .wp-block-group.is-nowrap:has(> .wc-block-product-results-count):not(:has(> .wc-block-catalog-sorting)),
body .wp-block-group.is-nowrap:has(> .wc-block-catalog-sorting):not(:has(> .wc-block-product-results-count)) {
display: none !important;
}
/* =============================================================================
PRODUCT ARCHIVES - BREADCRUMB, HEADER, IMAGE BOX
========================================================================== */
/* --- BREADCRUMB ------------------------------------------------------------
Measured on Disposable, before: the whole trail was rgb(194, 99, 250), which
is the secondary palette colour, and the "Home" link was underlined. So the
separator between them was purple too, and the link carried an underline
that had nowhere to go on hover.
The block carries a palette colour class, and those compile to
background-color / color with !important, so these need !important to land.
The nav is the block's element; the wrapper is only there to inherit from.
Home is a way back, so it is muted and lifts to --text on hover with the
underline appearing there rather than sitting there permanently. The current
page is not a link and should not look like one, so it is --text with no
underline. The separator is decoration and is hidden from screen readers. */
body .woocommerce-breadcrumb {
color: var(--text) !important;
font-size: 0.875rem;
line-height: 1.4;
}
body .woocommerce-breadcrumb a {
color: var(--text-muted) !important;
text-decoration: none;
transition: color 180ms ease;
}
body .woocommerce-breadcrumb a:hover,
body .woocommerce-breadcrumb a:focus-visible {
color: var(--text) !important;
text-decoration: underline;
text-underline-offset: 3px;
}
body .woocommerce-breadcrumb .mistra-crumb-current {
color: var(--text) !important;
font-weight: 600;
}
body .woocommerce-breadcrumb .mistra-crumb-sep {
color: var(--text-muted) !important;
margin-inline: 8px;
}
/* --- CATEGORY HEADER -------------------------------------------------------
The header is a two column block: breadcrumbs and title in the first column,
the category description in the second. Side by side, the description sits in
the right half of the page at the same optical weight as the title, and the
two read as unrelated fragments rather than a title and its description.
Stacked, the description follows the title and is capped at 60ch, which is
the measure at which the body copy stops being comfortable to read. The
bottom border gives the header a defined edge and separates it from the
toolbar and grid.
The description was also rgb(194, 99, 250): purple body copy. Purple is
reserved in the design system for buttons, prices, links and active states,
so it is --text-muted here at !important against the palette class. */
body .wp-block-columns:has(> .wp-block-column .woocommerce-breadcrumb) {
flex-direction: column !important;
align-items: stretch !important;
row-gap: var(--space-2) !important;
}
body .wp-block-columns:has(> .wp-block-column .woocommerce-breadcrumb) > .wp-block-column {
width: 100%;
flex: 0 0 auto;
}
body .wp-block-term-description {
max-width: 60ch;
color: var(--text-muted) !important;
font-size: 0.9375rem;
line-height: 1.65;
}
body .wp-block-group:has(> .wp-block-columns:has(.woocommerce-breadcrumb)) {
border-bottom: 1px solid var(--border);
padding-bottom: var(--space-5) !important;
}
/* --- PRODUCT IMAGE BOX -----------------------------------------------------
Measured, before: the image box was transparent over a card whose own
background is #040405, so the top half of every card read as a black hole,
and the box carried its own 1px #2E2E38 border inside the card's 1px
border. Two borders, one inside the other, around a dark rectangle.
The box now uses the card surface so the photo sits on a defined panel, and
the inner border is gone, leaving the card's own border as the only edge.
The image's own radius is zeroed so the box's overflow clips it consistently
instead of the image carrying a 12px 12px 0 0 radius that no longer matches
anything around it. */
body li.wc-block-product .wc-block-components-product-image {
background-color: var(--surface) !important;
border: 0 !important;
border-radius: 10px;
}
body li.wc-block-product .wc-block-components-product-image img,
body li.wc-block-product .wc-block-components-product-image a {
border: 0 !important;
border-radius: 0;
}
/* =============================================================================
PRODUCT ARCHIVES - BREADCRUMB, HEADER, IMAGE BOX (CORRECTION)
-----------------------------------------------------------------------------
Two rules in the previous block of this work never ran, and neither the
browser nor the stylesheet said so.
1. .wp-block-group:has(> .wp-block-columns:has(.woocommerce-breadcrumb))
:has() cannot be nested inside :has(). The whole rule is invalid, so the
parser drops it silently and the header's bottom border simply never
appears. Replaced with .mistra-archive-header, a class added to the column
block by render_block_core/columns.
2. .wp-block-term-description max-width: 60ch did not apply either; the
element measured max-width: none. A rule above sets it, and the border
rule that was meant to accompany it was the invalid one above, so both
looked like the same failure. See the override below. */
body .mistra-archive-header {
flex-direction: column !important;
align-items: stretch !important;
row-gap: var(--space-2) !important;
/* The border sits on the columns block rather than the band wrapping it,
for the reason above. The columns are the band's only child and share its
width, so the line lands in the same place. */
border-bottom: 1px solid var(--border);
padding-bottom: var(--space-5) !important;
}
body .mistra-archive-header > .wp-block-column {
width: 100%;
flex: 0 0 auto;
}
/* The description is a layout child of its column, and the block layout rules
cap those. max-width needs !important to survive; without it the measured
value stays "none" and the copy runs the full 791px of the container. */
body .wp-block-term-description {
max-width: 60ch !important;
color: var(--text-muted) !important;
font-size: 0.9375rem;
line-height: 1.65;
}
/* =============================================================================
PRODUCT ARCHIVES - BREADCRUMB, HEADER, IMAGE BOX (SECOND CORRECTION)
-----------------------------------------------------------------------------
Three declarations were being dropped or outranked. Each was measured, not
assumed.
--space-5 DOES NOT EXIST. The spacing scale is
--space-1 8px --space-2 16px --space-3 24px
--space-4 32px --space-6 48px
with no step 5. padding-bottom: var(--space-5) is not merely unset, it is
invalid at computed-value time, so the declaration is discarded and the
property falls back to 0px with nothing reported anywhere. Now --space-6.
THE DESCRIPTION'S max-width was being set to none, not left alone. This sheet
already contains
body .is-layout-constrained .alignwide { max-width: none !important }
from the full-bleed work, and the description carries the alignwide class
inside a constrained layout, so that rule beat a plain
body .wp-block-term-description. Matching on .alignwide as well puts the
override ahead of it.
THE IMAGE BOX BACKGROUND lost to
.wc-block-product-template li.wc-block-product
.wc-block-components-product-image { background: transparent !important }
which has three classes to our two. The class is repeated in the selector
below to carry the specificity up; this is the same trick the add-to-cart
work uses on .wp-element-button, and for the same reason: Ollie and the
block library both write !important shorthands that a longhand at lower
specificity cannot displace. */
body .mistra-archive-header {
padding-bottom: var(--space-6) !important;
}
body main .wp-block-term-description.alignwide {
max-width: 60ch !important;
color: var(--text-muted) !important;
font-size: 0.9375rem;
line-height: 1.65;
}
body li.wc-block-product .wc-block-components-product-image.wc-block-components-product-image {
background-color: var(--surface) !important;
border: 0 !important;
border-radius: 10px;
}
body li.wc-block-product .wc-block-components-product-image img,
body li.wc-block-product .wc-block-components-product-image a {
border: 0 !important;
border-radius: 0 !important;
}
/* =============================================================================
PRODUCT ARCHIVES - MORE COMING SOON BAND, NAV CURRENT, PHONE
========================================================================== */
/* --- THE BAND --------------------------------------------------------------
Four of the five categories hold one product, so a category page reads as a
near-empty grid with no explanation. The band sits directly under the grid,
on --surface-2 so it separates from both the page and the cards, with a
1px top border to give it a defined edge rather than a float.
The copy is --text-muted at body size and capped at 52ch, and the whole
thing is centred, because it is a note rather than a section heading.
The button is the same markup the front page uses, so the placeholder
handling is identical and there is no second WhatsApp button style to keep
in step. */
body .mistra-soon-band {
background-color: var(--surface-2);
border-top: 1px solid var(--border);
padding-block: calc(var(--section-gap) / 2);
margin-block-start: calc(var(--section-gap) / 2);
}
body .mistra-soon-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-2);
}
body .mistra-soon-title {
margin: 0;
color: var(--text);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.25;
}
body .mistra-soon-copy {
margin: 0;
max-width: 52ch;
color: var(--text-muted);
font-size: 0.9375rem;
line-height: 1.65;
}
body .mistra-soon-inner .wp-block-button {
margin-block-start: var(--space-1);
}
/* --- NAV CURRENT -----------------------------------------------------------
The nav pills are dark surface with light text, and purple appears only on
hover or active. An active pill therefore takes the purple as its text colour
with a faint purple fill and a 1px purple ring, rather than a solid purple
block: a solid fill would make the current page louder than the primary
buttons, which it is not.
aria-current="page" is set by mistra-archive-nav-current() only on product
category pages. Nothing is marked on the home page or on the shop page. */
body .mistra-nav a[aria-current="page"],
body .mistra-nav .wp-block-navigation-item__content[aria-current="page"] {
color: var(--accent) !important;
background-color: rgba(168, 85, 247, 0.14);
box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.45);
}
body .mistra-nav a[aria-current="page"]:hover {
color: var(--accent-2) !important;
background-color: rgba(168, 85, 247, 0.2);
}
/* --- PHONE, up to 781px ----------------------------------------------------
The toolbar row is is-content-justification-space-between is-nowrap, so the
count and the sort control were pinned to opposite edges of one line with
nowrap holding them there. At 390px the sort control has to shrink to about
180px to fit beside the count, which is under a comfortable touch target.
Stacked, both take the full width.
The grid is left alone. It was measured at 360, 390 and 768 and already
computes two columns at each (126px, 142px and 330px per card), so forcing
it here would only add a rule that has nothing to correct. Worth recording
because a two-column phone grid is not the default for every block. */
@media (max-width: 781px) {
body .wp-block-group.is-nowrap:has(> .wc-block-product-results-count),
body .wp-block-group.is-nowrap:has(> .wc-block-catalog-sorting) {
flex-direction: column !important;
flex-wrap: wrap !important;
align-items: stretch !important;
row-gap: 12px;
}
body .wc-block-product-results-count,
body .wc-block-catalog-sorting,
body .wc-block-catalog-sorting form {
width: 100%;
}
body .wc-block-catalog-sorting select.orderby {
width: 100%;
}
body .mistra-soon-inner .wp-block-button,
body .mistra-soon-inner .wp-block-button__link {
width: 100%;
}
}
/* =============================================================================
NAV CURRENT - THE FIRST ITEM
-----------------------------------------------------------------------------
Making /shop/ highlight its own link did not work at first. "Shop" is always
the first navigation item, and the header work left this behind:
body .mistra-nav .wp-block-navigation__container
.wp-block-navigation-item:first-child
.wp-block-navigation-item__content {
color: var(--text) !important;
background-color: transparent !important;
}
Five classes and an !important. The current-page rule is two classes and an
!important, so the first-child rule won on class count and the Shop link came
out as rgb(244,244,248) on a transparent background while every category
highlighted correctly. aria-current was set and the highlight was simply
being overwritten.
Matched and beaten on specificity rather than by editing the rule above,
which is load-bearing for the normal state of the first item. */
body .mistra-nav .wp-block-navigation__container .wp-block-navigation-item:first-child .wp-block-navigation-item__content[aria-current="page"] {
color: var(--accent) !important;
background-color: rgba(168, 85, 247, 0.14) !important;
box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.45);
}
body .mistra-nav .wp-block-navigation__container .wp-block-navigation-item:first-child .wp-block-navigation-item__content[aria-current="page"]:hover {
color: var(--accent-2) !important;
background-color: rgba(168, 85, 247, 0.2) !important;
}
/* =============================================================================
HERO ARROWS - MOVED OFF THE COPY
-----------------------------------------------------------------------------
Vertically centring the arrows on each side, which is how the previous
collision with the pagination dots was fixed, put the previous arrow straight
onto the hero copy. The text column starts at the container's left edge and
runs 481-560px wide, and a vertically centred arrow sits at x 48-92 on the
left edge, which is inside that column.
Measured overlap between the previous arrow and hero text, per slide, testing
every heading, paragraph, button and eyebrow in the slide:
width slides hit
782 1, 2, 3
887 1, 2, 3
1023 1, 2, 3
1217 1, 2, 3 (slide 2 hits the heading too)
1440 1, 2, 3
Five overlaps at 1217 and above. The next arrow had none at any width: the
right of the hero is the photograph, and nothing is written there.
Both arrows move to the bottom right, over the photograph, which is the only
part of the hero with nothing on it. The text block bottoms out around
y 531 and the controls sit at y 622-666, so there is a clear band between
them. Side by side rather than stacked, so the pair reads as one control.
This is deliberately not "both arrows on the right, vertically centred": the
arrows are 44px tall and the hero is 520px, and centring them on the right
would sit them level with the headline, which is a different collision with a
different element. The bottom right corner is empty on every slide, including
slide one, which has the brand gradient rather than a photograph.
The dots stay centred at the bottom. Arrows are 96px wide as a pair at the
right edge; the dots are about 74px wide in the centre, so the two only meet
if the hero were under about 400px wide, and the arrows are hidden below
782px regardless. */
.mistra-hero-swiper .swiper-button-prev,
.mistra-hero-swiper .swiper-button-next {
top: auto !important;
bottom: var(--space-3) !important;
margin-top: 0;
margin-bottom: 0;
transform: none !important;
}
.mistra-hero-swiper .swiper-button-next {
right: var(--space-3) !important;
left: auto !important;
}
.mistra-hero-swiper .swiper-button-prev {
right: calc(var(--space-3) + 52px) !important;
left: auto !important;
}
/* Hover still gets a small lift, but only scale now: the buttons are no longer
centred with a translateY, so adding one back would drop them. */
.mistra-hero-swiper .swiper-button-prev:hover,
.mistra-hero-swiper .swiper-button-next:hover {
transform: scale(1.05) !important;
}
/* =============================================================================
VARIATION CHIPS - FLAVOUR PICKER
-----------------------------------------------------------------------------
WooCommerce's add-to-cart-with-options block already renders a variable
product's attribute picker as labelled chips, so nothing was built here. The
markup it produces:
span[data-block-name="...-variation-selector-attribute-name"] "Flavour"
fieldset.wc-block-product-filter-chips__fieldset
div.wc-block-product-filter-chips__items
button.wc-block-product-filter-chips__item[role=radio]
span.wc-block-product-filter-chips__text
Selection is aria-checked="true" on the button, because the chips are radios
rather than checkboxes. That is what the selected state is keyed off.
Out of the box the chips measured 34px tall, transparent, at weight 430 with
muted text and no border, which reads as loose text rather than as something
you press. They now match the rest of the shop: the card surface, a 1px
border, the 999px radius already used by every other pill on the site, and the
brand gradient when chosen.
44px minimum height because these are the primary decision on the page and a
34px target is under the comfortable touch size.
========================================================================== */
body .wc-block-product-filter-chips__items {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
body span[data-block-name="woocommerce/add-to-cart-with-options-variation-selector-attribute-name"] {
display: block;
margin-bottom: var(--space-2);
color: var(--text) !important;
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: -0.005em;
}
body .wc-block-product-filter-chips__item {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 8px 18px;
border: 1px solid var(--border);
border-radius: 999px;
background-color: var(--surface);
color: var(--text) !important;
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
transition:
background-color 180ms ease,
border-color 180ms ease,
color 180ms ease;
}
body .wc-block-product-filter-chips__item .wc-block-product-filter-chips__text {
color: inherit !important;
font-weight: inherit;
}
body .wc-block-product-filter-chips__item:hover {
border-color: rgba(168, 85, 247, 0.6);
background-color: var(--surface-2);
}
body .wc-block-product-filter-chips__item:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
body .wc-block-product-filter-chips__item[aria-checked="true"] {
border-color: transparent;
background-color: transparent;
background-image: var(--wp--preset--gradient--brand) !important;
color: #ffffff !important;
font-weight: 600;
box-shadow: 0 4px 14px rgba(6, 6, 10, 0.55);
}
/* The fieldset carries a legend that is already announced; the visible name
comes from the block's own name span above. Hide only the default marker
spacing, keep the semantics. */
body .wc-block-product-filter-chips__fieldset {
border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
@media (max-width: 781px) {
body .wc-block-product-filter-chips__item {
flex: 1 1 auto;
}
}
/* =============================================================================
VARIATION CHIPS - CORRECTION
-----------------------------------------------------------------------------
Two declarations were being dropped.
The selected chip reported background-color rgb(20,20,28), the surface colour
from the base rule, with the gradient painting over it. Linear gradients do
fill the box, so the surface underneath was invisible in practice, but
leaving it there is wrong: if the gradient ever fails to load, a "selected"
chip would look unselected. background-color is forced transparent.
The "Flavour" label reported font-weight 500 after the rule above set 600.
The block carries has-x-small-font-size, and the font size class carries a
weight alongside it that wins at equal specificity.
========================================================================== */
body .wc-block-product-filter-chips__item[aria-checked="true"] {
border-color: transparent !important;
background-color: transparent !important;
background-image: var(--wp--preset--gradient--brand) !important;
color: #ffffff !important;
}
body span[data-block-name="woocommerce/add-to-cart-with-options-variation-selector-attribute-name"] {
font-weight: 600 !important;
}
/* =============================================================================
VARIATION CHIPS - THE LABEL
-----------------------------------------------------------------------------
Verified by screenshot, not by computed style.
getComputedStyle is unreliable on these nodes. The chips are rendered by the
Interactivity API and carry data-wp-each-child, so the style resolution the
headless browser reports for them does not track the cascade: a freshly
injected stylesheet using the bare selector with !important changed nothing,
no inline style and no data-wp-style binding existed to explain it, and yet
the render was correct. On the chips, background-image and font-weight from
the selected-state rule were reported correctly while background-color, color
and border-color all reported the base rule's values.
So the screenshot is the record, and it shows one real problem: the "Flavour"
label renders in the accent purple. Purple is reserved in this design system
for buttons, prices, links and active states, and this is a field label.
It is overridden with the parent block in the selector as well as the
attribute, because the label is styled by both the theme's block spacing and
palette rules and by WooCommerce's own variation CSS, and the combination is
what was winning. The custom properties are reset too, so anything the chip
CSS derives from them lands on the intended value rather than on whatever the
theme left behind. */
body .wp-block-woocommerce-add-to-cart-with-options
span[data-block-name="woocommerce/add-to-cart-with-options-variation-selector-attribute-name"] {
--wc-product-filter-chip-label-color: var(--text);
color: var(--text) !important;
font-weight: 600 !important;
font-size: 0.9375rem !important;
}
body .wc-block-product-filter-chips__item {
--wc-product-filter-chip-background-color: var(--surface);
--wc-product-filter-chip-border-color: var(--border);
--wc-product-filter-chip-text-color: var(--text);
}
body .wc-block-product-filter-chips__item[aria-checked="true"] {
--wc-product-filter-chip-background-color: transparent;
--wc-product-filter-chip-border-color: transparent;
--wc-product-filter-chip-text-color: #ffffff;
}
/* The chips sit in a column roughly 330px wide, so with names this long they
fall one per row and the column reads as a long stack. Letting them share
rows where they fit keeps the block compact without shrinking any of them
below a comfortable tap target. */
body .wc-block-product-filter-chips__items {
gap: var(--space-2);
}
/* =============================================================================
VARIATION CHIPS - SPACING WHEN A PRODUCT HAS MORE THAN ONE ATTRIBUTE
-----------------------------------------------------------------------------
WooCommerce renders one
.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute
per attribute, each with its own name span, fieldset and chip list. A
disposable sold in flavours and two strengths therefore gets two groups, and
the styling above already applies to each of them because every selector here
is scoped to the group rather than to an attribute name. Neither "Flavour"
nor "Nicotine" appears in any selector, so a third attribute would pick up
the same treatment without further work.
The one thing a second group needs is room. Only the chips' own wrapper
carries a bottom margin, so without this the last chip of the first group
sits flush against the second group's label.
No product on the shop currently has two attributes, so this is the one rule
here that has not been exercised against real data.
========================================================================== */
body .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute
+ .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute {
margin-top: var(--space-4);
}
/* =============================================================================
WOOCommerce BLOCK FORMS, QUANTITY SELECTOR, GALLERY
-----------------------------------------------------------------------------
Three things broke the brand, all of them left at browser or theme defaults
because none of the block components carry our classes.
THE CHECKOUT FIELDS were raw HTML defaults. Measured: background
rgb(255,255,255), text rgb(10,10,15), 1px solid color(srgb 0.048 0.048 0.067)
which is #0c0c11, radius 5px, 55px tall. Eight white boxes with purple
placeholder text down the middle of a near-black page. Every label measured
rgb(194,99,250), which is the secondary palette colour, so the field names
were purple too.
They now match the sorting control added for the archives: the card surface,
--text, a 1px --border and a 12px radius. Same values, so a customer moving
from a category page to checkout sees one control style rather than two.
The label doubles as the placeholder while a field is empty, which is why it
read as purple inside a white box. Muted while empty, --text once filled, so
the label always has something to contrast against.
THE QUANTITY SELECTOR had the same problem in miniature: the input measured
rgb(255,255,255) on rgb(10,10,15) text at 5px radius, and the minus and plus
buttons had no background or border at all, so they floated beside it.
THE PRODUCT GALLERY was not a white picture. The image file is a transparent
cutout: its corner pixel measures rgba(0,0,0,0). The container behind it was
white, .wc-block-components-product-image at rgb(255,255,255), so the
transparency showed white instead of the page. Only the container needed
changing.
========================================================================== */
/* --- text fields ----------------------------------------------------------- */
body .wc-block-components-text-input input,
body .wc-block-components-address-form input,
body .wc-block-components-address-form textarea,
body .wc-blocks-components-text-input input,
body .wc-blocks-components-text-input textarea,
body .wc-block-checkout input.input-input,
body .wc-block-components-form input:not([type="checkbox"]):not([type="radio"]),
body .wc-block-components-form textarea {
background-color: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 12px !important;
box-shadow: none !important;
min-height: 48px;
padding: 12px 14px;
font-family: inherit;
font-size: 0.9375rem;
transition: border-color 180ms ease, background-color 180ms ease;
}
body .wc-block-components-text-input input::placeholder,
body .wc-block-components-address-form input::placeholder {
color: var(--text-muted);
opacity: 1;
}
body .wc-block-components-text-input input:focus,
body .wc-block-components-address-form input:focus,
body .wc-blocks-components-text-input input:focus,
body .wc-block-checkout input.input-input:focus,
body .wc-block-components-form input:focus {
background-color: var(--surface-2) !important;
border-color: var(--accent) !important;
outline: none;
box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22) !important;
}
/* Chrome repaints autofilled fields with its own light background and cannot be
recoloured by background alone, so the fill colour and an inset shadow are
both pinned. Without this a returning customer's saved address flashes white
until they click the field. */
body .wc-block-components-text-input input:-webkit-autofill,
body .wc-block-components-address-form input:-webkit-autofill,
body .wc-block-checkout input.input-input:-webkit-autofill {
-webkit-text-fill-color: var(--text) !important;
-webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
box-shadow: 0 0 0 1000px var(--surface) inset !important;
caret-color: var(--text);
transition: background-color 9999s ease-out 0s;
}
/* --- selects --------------------------------------------------------------- */
body .wc-blocks-components-select__select,
body .wc-block-components-select__select,
body .wc-block-checkout select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: var(--surface) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px 16px;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 12px !important;
box-shadow: none !important;
min-height: 48px;
padding: 12px 42px 12px 14px;
font-family: inherit;
font-size: 0.9375rem;
color-scheme: dark;
cursor: pointer;
}
body .wc-blocks-components-select__select:focus,
body .wc-block-components-select__select:focus {
border-color: var(--accent) !important;
outline: none;
box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22) !important;
}
body .wc-blocks-components-select__select option {
background-color: var(--surface);
color: var(--text);
}
/* --- labels ----------------------------------------------------------------
Muted while the field is empty, which is when the label is showing through
as the placeholder, and --text once the shopper has typed, so it always has
contrast against the surface behind it. */
body .wc-block-components-text-input label,
body .wc-block-components-address-form label,
body .wc-blocks-components-text-input label,
body .wc-block-checkout .wc-block-components-text-input label,
body .wc-block-components-form label {
color: var(--text-muted) !important;
font-size: 0.9375rem;
font-weight: 500;
}
body .wc-block-components-text-input--active label,
body .wc-blocks-components-text-input__input:not(:placeholder-shown) + label,
body .wc-block-components-text-input input:not(:placeholder-shown) ~ label {
color: var(--text) !important;
}
/* --- checkboxes and radios -------------------------------------------------
accent-color is the one-line way to brand a native control without
reimplementing it, and it keeps the platform's own focus and keyboard
behaviour. */
body .wc-block-components-checkbox input[type="checkbox"],
body .wc-block-components-radio input[type="radio"],
body .wc-block-checkout input[type="checkbox"],
body .wc-block-checkout input[type="radio"] {
accent-color: var(--accent);
width: 18px;
height: 18px;
}
body .wc-block-components-checkbox__label,
body .wc-block-components-radio__label,
body .wc-block-checkout label.wc-block-components-checkbox__label {
color: var(--text-muted);
font-size: 0.875rem;
}
/* --- quantity selector ----------------------------------------------------- */
body .wc-block-components-quantity-selector__input {
background-color: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 12px !important;
box-shadow: none !important;
min-height: 48px;
text-align: center;
font-family: inherit;
font-size: 0.9375rem;
font-weight: 600;
-moz-appearance: textfield;
}
body .wc-block-components-quantity-selector__input:focus {
border-color: var(--accent) !important;
outline: none;
box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22) !important;
}
body .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
body .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
body .wc-block-components-quantity-selector__button {
background-color: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 12px !important;
box-shadow: none !important;
min-height: 48px;
min-width: 48px;
font-size: 1.125rem;
transition: border-color 180ms ease, color 180ms ease;
}
body .wc-block-components-quantity-selector__button:hover:not(:disabled) {
border-color: rgba(168, 85, 247, 0.6) !important;
color: var(--accent) !important;
}
body .wc-block-components-quantity-selector__button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
body .wc-block-components-quantity-selector__button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* The selector lays the three controls out in a row with the input between
them, so each needs its own corner pulled back or the row reads as one
12px-radius block with seams. */
body .wc-block-components-quantity-selector {
gap: 0;
}
body .wc-block-components-quantity-selector__button--minus {
border-radius: 12px 0 0 12px !important;
border-right-width: 0 !important;
}
body .wc-block-components-quantity-selector__button--plus {
border-radius: 0 12px 12px 0 !important;
border-left-width: 0 !important;
}
body .wc-block-components-quantity-selector__input {
border-radius: 0 !important;
}
/* --- product gallery and cart thumbnails -----------------------------------
The image is transparent; the container behind it was white. Same class is
used for the card image box, which was already moved to the card surface. */
body .wc-block-components-product-image,
body .wp-block-woocommerce-product-image,
body .wc-block-cart-item__image,
body .wc-block-components-product-gallery__image {
background-color: var(--surface) !important;
border-color: var(--border) !important;
}
body .wc-block-cart-item__image img,
body .wc-block-components-product-gallery__image img {
background-color: transparent !important;
}
/* =============================================================================
WOOCommerce - MINI CART, NATIVE CONTROLS, MY ACCOUNT, GALLERY DIALOG
-----------------------------------------------------------------------------
Found by sweeping every rendered element on the buying flow for a white or
near-white background, rather than by looking at the pages. The pages looked
mostly fixed; the sweep found nine more, and the largest was the mini cart.
Measured after the form pass:
checkout 4 select container, 2 radios, 1 checkbox
cart 0
product 3 mini cart badge, gallery dialog, mini cart drawer
shop 2 mini cart badge, mini cart drawer
my-account 5 mini cart badge, mini cart drawer, 3 classic inputs
The mini cart drawer was white on EVERY page. It opens over the shop, so a
customer adding a product got a white panel dropped on top of a near-black
site. That is the single worst offender here and it was not visible in any
static screenshot, because the drawer is closed until the cart button is
used.
========================================================================== */
/* --- mini cart drawer ------------------------------------------------------ */
body .wc-block-mini-cart__drawer,
body .wc-block-mini-cart__template-part,
body .wc-block-woocommerce-mini-cart__drawer {
background-color: var(--surface-2) !important;
color: var(--text) !important;
}
body .wc-block-mini-cart__drawer .wc-block-components-drawer__content {
background-color: transparent !important;
}
body .wc-block-mini-cart__title,
body .wc-block-mini-cart__title-items-counter-block {
color: var(--text) !important;
}
body .wc-block-mini-cart__items .wc-block-cart-items__row,
body .wc-block-mini-cart__products-table,
body .wc-block-mini-cart__products-table table,
body .wc-block-mini-cart__products-table td,
body .wc-block-mini-cart__products-table th {
background-color: transparent !important;
color: var(--text) !important;
}
body .wc-block-mini-cart__items .wc-block-components-product-name,
body .wc-block-mini-cart__items a.wc-block-components-product-name {
color: var(--text) !important;
text-decoration: none;
}
body .wc-block-mini-cart__items .wc-block-components-product-price,
body .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
color: var(--accent) !important;
}
body .wc-block-mini-cart__footer {
background-color: transparent !important;
border-top: 1px solid var(--border);
}
body .wc-block-mini-cart__drawer .wc-block-components-drawer__close,
body .wc-block-mini-cart__drawer button.wc-block-components-drawer__close {
background-color: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 50%;
}
/* The quantity stepper inside the drawer reuses the product page control. */
body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__input,
body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button {
background-color: var(--surface) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/* --- mini cart badge -------------------------------------------------------
White on dark text, which is legible but nothing like the rest of the shop.
Accent fill with white text, consistent with prices and active states. */
body .wc-block-mini-cart__badge,
body .wc-block-components-mini-cart__badge {
background-color: var(--accent) !important;
color: #ffffff !important;
border-radius: 999px;
font-weight: 700;
}
/* --- the select wrapper ----------------------------------------------------
The select itself is now the card surface, so a white wrapper behind it only
shows as a halo around the control. The chevron stays, because it lives here. */
body .wc-blocks-components-select__container,
body .wc-block-components-select__container {
background-color: transparent !important;
color: var(--text) !important;
}
/* --- native radio and checkbox controls ------------------------------------
WooCommerce draws these with its own background image, so accent-color alone
has no effect. The fill is pinned dark and the tick is left to the image; a
dark control with the platform's own tick keeps the keyboard and focus
behaviour intact. */
body .wc-block-components-radio-control__input,
body .wc-block-components-checkbox__input,
body .wc-block-components-radio__input,
body .wc-block-components-checkbox input[type="checkbox"],
body .wc-block-components-radio input[type="radio"] {
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
accent-color: var(--accent);
}
body .wc-block-components-radio-control__input:checked,
body .wc-block-components-checkbox__input:checked {
border-color: var(--accent) !important;
box-shadow: 0 0 0 1px var(--accent) !important;
}
body .wc-block-components-radio-control__input:focus-visible,
body .wc-block-components-checkbox__input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* --- My Account, which still uses WooCommerce's classic form classes -------- */
body .woocommerce-form__input,
body .woocommerce-Input,
body .woocommerce-Input--text,
body .woocommerce-Input--email,
body .woocommerce-Input--password,
body .woocommerce-Input--phone,
body input.woocommerce-Input,
body textarea.woocommerce-Input,
body select.woocommerce-select {
background-color: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-radius: 12px !important;
box-shadow: none !important;
min-height: 48px;
padding: 12px 14px;
font-family: inherit;
font-size: 0.9375rem;
}
body .woocommerce-form__input:focus,
body .woocommerce-Input:focus,
body .woocommerce-select:focus {
background-color: var(--surface-2) !important;
border-color: var(--accent) !important;
outline: none;
box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22) !important;
}
body .woocommerce-Input:-webkit-autofill,
body .woocommerce-form__input:-webkit-autofill {
-webkit-text-fill-color: var(--text) !important;
-webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
box-shadow: 0 0 0 1000px var(--surface) inset !important;
caret-color: var(--text);
}
body label.woocommerce-form__label,
body .woocommerce-form-login label,
body .woocommerce-form-register label {
color: var(--text-muted) !important;
font-size: 0.875rem;
}
body .woocommerce-Button,
body button.woocommerce-Button,
body .woocommerce-form-login .woocommerce-Button,
body .woocommerce-form-register .woocommerce-Button {
background-image: var(--wp--preset--gradient--brand) !important;
background-color: transparent !important;
color: #ffffff !important;
border: 0 !important;
border-radius: 999px !important;
min-height: 48px;
padding: 12px 28px;
font-weight: 600;
}
body .woocommerce-Button:hover {
filter: brightness(1.06);
}
/* --- full screen product gallery dialog ------------------------------------- */
body .wc-block-product-gallery-dialog {
background-color: var(--surface-2) !important;
color: var(--text) !important;
}
body .wc-block-product-gallery-dialog img {
background-color: transparent !important;
}
/* =============================================================================
AUTOFILL, AND MY ACCOUNT AS A CENTRED BOX
========================================================================== */
/* --- AUTOFILL --------------------------------------------------------------
Chrome paints its own light background onto a field holding a saved value,
and it will not accept a background-color from the page. The three things
that do work are -webkit-text-fill-color, an inset box-shadow painted over the
top, and a transition long enough that the paint never visibly completes.
Scoped to body input rather than to the checkout's own wrappers: the five text
inputs on the checkout carry no class of their own, they are found only
through .wc-block-components-text-input, and a rule written against that
wrapper misses every autofilled field elsewhere, including My Account.
========================================================================== */
body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body input:-webkit-autofill:active,
body textarea:-webkit-autofill,
body textarea:-webkit-autofill:hover,
body textarea:-webkit-autofill:focus,
body select:-webkit-autofill {
-webkit-text-fill-color: var(--text) !important;
-webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
box-shadow: 0 0 0 1000px var(--surface) inset !important;
background-color: var(--surface) !important;
background-image: none !important;
caret-color: var(--text) !important;
transition: background-color 600000s 0s, color 600000s 0s;
}
/* --- MY ACCOUNT ------------------------------------------------------------
Measured: the login form was 953px wide, filling the container edge to edge,
on background rgb(13,13,18) at 5px radius with no border, under a
left-aligned "My account" heading. A login form stretched across a whole
desktop is the wrong shape for the job: the fields end up absurdly wide and
the eye has to travel the full page to find the button.
It is now a centred panel, capped at 440px, which is roughly the width a
one-line form actually wants and keeps the fields at a comfortable measure.
The heading sits inside the panel and is centred with it, rather than staying
above and to the left where it no longer relates to the thing it labels.
Radius, border and background are the same values used everywhere else: 16px
and --surface, with a 1px --border. The shadow is dark rather than purple so
it reads as the panel sitting above the page.
========================================================================== */
body .woocommerce-form-login,
body .woocommerce-form-register {
max-width: 440px !important;
margin-inline: auto !important;
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 16px !important;
box-shadow: 0 18px 44px rgba(6, 6, 10, 0.5);
padding: clamp(24px, 5vw, 40px) !important;
color: var(--text);
}
body .woocommerce-form-login .woocommerce-form-login__title,
body .woocommerce-form-register .woocommerce-form-register__title,
body .woocommerce-form-login h2,
body .woocommerce-form-register h2 {
margin: 0 0 var(--space-4);
color: var(--text);
font-size: 1.375rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
text-align: center;
}
body .woocommerce-form-login .form-row,
body .woocommerce-form-register .form-row {
margin: 0 0 var(--space-3);
display: block;
}
body .woocommerce-form-login label,
body .woocommerce-form-register label {
display: block;
margin-bottom: var(--space-1);
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
}
/* The remember-me checkbox is a label too, but it is a row of its own. */
body .woocommerce-form-login .woocommerce-form-login__rememberme,
body .woocommerce-form-login .forget-your-password {
display: flex;
align-items: center;
gap: var(--space-2);
justify-content: space-between;
flex-wrap: wrap;
}
body .woocommerce-form-login .woocommerce-form-login__rememberme label {
margin-bottom: 0;
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--text-muted);
cursor: pointer;
}
body .woocommerce-form-login .forget-your-password a,
body .woocommerce-form-login a,
body .woocommerce-form-register a {
color: var(--accent);
text-decoration: none;
font-size: 0.875rem;
}
body .woocommerce-form-login .forget-your-password a:hover,
body .woocommerce-form-login a:hover,
body .woocommerce-form-register a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
body .woocommerce-form-login .woocommerce-button,
body .woocommerce-form-register .woocommerce-button {
width: 100%;
margin-top: var(--space-3);
}
/* --- the tabs --------------------------------------------------------------
With registration on, WooCommerce offers Login and Register. They sit above
the panel and are centred with it so the pair reads as one component. */
/* --space-5 does not exist on this scale (it runs 1, 2, 3, 4, 6), so an earlier
version of this block declared margin-bottom: var(--space-5) here. The
declaration was invalid at computed-value time and was silently discarded,
which is why the gap below the tabs looked too tight with no error to point
at it. Corrected to --space-6. */
body .woocommerce-tabs,
body .wc-block-components-tabs {
justify-content: center;
margin-bottom: var(--space-6);
}
body .woocommerce-tabs .tabs,
body .wc-block-components-tabs__list {
justify-content: center;
gap: var(--space-2);
border: 0;
margin: 0;
}
body .woocommerce-tabs .tabs li,
body .wc-block-components-tabs__tab {
border: 1px solid var(--border) !important;
border-radius: 999px !important;
background-color: var(--surface) !important;
padding: 0;
margin: 0;
}
body .woocommerce-tabs .tabs li a,
body .wc-block-components-tabs__tab a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 22px;
border-radius: 999px;
color: var(--text-muted) !important;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition: background-color 180ms ease, color 180ms ease;
}
body .woocommerce-tabs .tabs li.active a,
body .woocommerce-tabs .tabs li.active,
body .wc-block-components-tabs__tab.is-active,
body .wc-block-components-tabs__list .is-active {
background-image: var(--wp--preset--gradient--brand) !important;
border-color: transparent !important;
color: #ffffff !important;
}
body .woocommerce-tabs .tabs li a:hover,
body .wc-block-components-tabs__tab a:hover {
color: var(--text) !important;
}
body .woocommerce-form-login__submit,
body .woocommerce-form-register__submit {
display: block;
width: 100%;
}
/* =============================================================================
MY ACCOUNT PANELS, AND THE CHECKOUT LOGO
-----------------------------------------------------------------------------
Correcting the previous block on both counts.
1. The heading was never inside the panel. With registration enabled
WooCommerce renders the two forms side by side in a two column layout:
.u-columns.col2-set
.u-column1.col-1 > h2 "Login" > form.woocommerce-form-login
.u-column2.col-2 > h2 "Register" > form.woocommerce-form-register
Measured: the h2s sit at y 338 across the full 457px column while the
forms start at y 411, so styling the form left the heading stranded above
its own panel, full width and left aligned. The column is made the panel
instead, so the heading ends up inside it. The form then goes transparent
and stops being a panel at all.
The two columns are flex items that wrap, so they sit side by side on a
desktop and stack on a phone, and align-items stretch keeps the two panels
the same height even though the login form is 533px tall and the register
form 483px.
2. The checkout logo rendered at its full intrinsic 560x380. The existing
header logo rule is scoped to .site-header, and the checkout's header is a
bare .wp-block-group, so nothing sized it. That is a 560px wordmark across
the top of the checkout page.
========================================================================== */
/* --- checkout header logo --------------------------------------------------
Same 130px as the site header, so the two match. The width is on the img
rather than the wrapper because this header has no .site-header ancestor for
the existing rule to reach. */
body .mistra-checkout-logo img,
body header .wp-block-site-logo img {
width: 130px !important;
height: auto !important;
max-width: 130px;
}
@media (max-width: 781px) {
body .mistra-checkout-logo img,
body header .wp-block-site-logo img {
width: 108px !important;
max-width: 108px;
}
}
/* --- my account panels ------------------------------------------------------ */
body .woocommerce .u-columns.col2-set {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: var(--space-4);
margin: 0;
}
body .woocommerce .u-column1,
body .woocommerce .u-column2 {
float: none !important;
flex: 0 1 440px;
width: auto !important;
max-width: 440px;
margin-inline: 0 !important;
box-sizing: border-box;
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 16px !important;
box-shadow: 0 18px 44px rgba(6, 6, 10, 0.5);
padding: clamp(24px, 5vw, 40px) !important;
color: var(--text);
}
/* One form only, for instance if registration is switched off later. The
columns layout is still used, so the single column is centred the same way. */
body .woocommerce .u-column1:only-child,
body .woocommerce .u-column2:only-child {
flex-basis: 440px;
}
body .woocommerce .u-column1 > h2,
body .woocommerce .u-column2 > h2,
body .woocommerce .u-column1 > .woocommerce-form-login__title,
body .woocommerce .u-column2 > .woocommerce-form-register__title {
margin: 0 0 var(--space-4);
color: var(--text);
font-size: 1.375rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
text-align: center;
}
/* The form is no longer the panel, so it gives up the surface, border, radius,
padding and shadow it was given, and fills the column instead. */
body .woocommerce .u-column1 form,
body .woocommerce .u-column2 form,
body .woocommerce .u-column1 form.woocommerce-form-login,
body .woocommerce .u-column2 form.woocommerce-form-register {
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
width: 100% !important;
color: var(--text);
}
body .woocommerce .u-column1 .form-row,
body .woocommerce .u-column2 .form-row {
margin: 0 0 var(--space-3);
display: block;
}
body .woocommerce .u-column1 label,
body .woocommerce .u-column2 label {
display: block;
margin-bottom: var(--space-1);
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
}
body .woocommerce .u-column1 .woocommerce-form-login__rememberme,
body .woocommerce .u-column2 .woocommerce-form-login__rememberme {
display: flex;
align-items: center;
gap: var(--space-2);
}
body .woocommerce .u-column1 .woocommerce-form-login__rememberme label,
body .woocommerce .u-column2 .woocommerce-form-login__rememberme label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-bottom: 0;
cursor: pointer;
}
body .woocommerce .u-column1 a,
body .woocommerce .u-column2 a {
color: var(--accent);
text-decoration: none;
font-size: 0.875rem;
}
body .woocommerce .u-column1 a:hover,
body .woocommerce .u-column2 a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
body .woocommerce .u-column1 .woocommerce-button,
body .woocommerce .u-column2 .woocommerce-button {
width: 100%;
display: block;
margin-top: var(--space-3);
}
/* =============================================================================
MY ACCOUNT - DETERMINISTIC PANEL PLACEMENT
-----------------------------------------------------------------------------
The flexbox version did not place the panels where centring says they should
be. Measured, with justify-content: center confirmed on the host and only two
flex children, neither transformed nor floated:
viewport host panel 1 panel 2 expected
985 x 16 w 953 x 52 x 524 x 36.5
768 x 16 w 736 x 180 x 148 x 164
At 985 the pair sits about 16px right of centre. At 768 the two panels are on
separate wrapped lines, which should be centred independently, yet they land
32px apart from each other, exactly the value of the gap. No amount of tuning
the flex properties explains both numbers, and the gap leaking into the
horizontal offset is the tell: something is still sizing these as a single
two-up row.
Grid removes the ambiguity. auto-fit with minmax(min(440px, 100%), 440px)
gives one centred 440px column when there is not room for two, two centred
440px columns when there is, and exactly that in between. justify-content:
center centres the tracks, so the result is computed rather than negotiated.
The gap is applied to the grid, not to the columns, so it cannot leak into
the track positions.
========================================================================== */
body .woocommerce .u-columns.col2-set {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 440px));
justify-content: center;
align-items: stretch;
gap: var(--space-4) var(--space-4);
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
body .woocommerce .u-column1,
body .woocommerce .u-column2 {
float: none !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
}
/* =============================================================================
MY ACCOUNT - EXPLICIT TRACK ASSIGNMENT
-----------------------------------------------------------------------------
Grid fixed the centring but not the placement. Measured at a 985px viewport
with two 440px columns available, auto-placement produced:
col1 x 508 y 308
col2 x 36 y 902
Two things wrong at once. The panels landed in separate rows rather than
sharing one, and they landed in reversed tracks, col1 taking the right-hand
track that col2 should have had. The horizontal span was correct, 36 to 948,
which is what made it look almost right: the pair was centred, but in the
wrong order and stacked.
Auto-placement is being steered by something in WooCommerce's own column
rules, so it is removed from the decision. Each column is put on a named
track explicitly and the template is declared rather than inferred:
wide two 440px tracks, col1 left, col2 right, same row
narrow one 440px track, both columns on it, stacked
The breakpoint is 960px. Two panels plus the 32px gap need 912px, and the
content column loses roughly 16px of padding on each side of the viewport, so
960px of viewport is the first width where two genuinely fit.
align-items stretch is kept, so within a row the two panels are the same
height even though the login form is 562px and the register form 530px.
This block supersedes the repeat(auto-fit, ...) rule immediately above it.
Both stay in the file on purpose: the record of what was measured and what it
turned out to be is the point of these, and this block loads later so it wins.
========================================================================== */
body .woocommerce .u-columns.col2-set {
display: grid !important;
grid-template-columns: minmax(0, 440px);
justify-content: center;
align-items: stretch;
column-gap: var(--space-4);
row-gap: var(--space-4);
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
body .woocommerce .u-column1,
body .woocommerce .u-column2 {
float: none !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
/* Order and placement both come from the grid, not from the source order
plus whatever WooCommerce has already declared. */
order: 0 !important;
grid-column: 1;
grid-row: auto;
}
@media (min-width: 960px) {
body .woocommerce .u-columns.col2-set {
grid-template-columns: repeat(2, minmax(0, 440px));
}
body .woocommerce .u-column1 {
grid-column: 1;
grid-row: 1;
}
body .woocommerce .u-column2 {
grid-column: 2;
grid-row: 1;
}
}
/* =============================================================================
TAP TARGETS ON THE ACCOUNT PANELS
-----------------------------------------------------------------------------
Audited at a 390px viewport. Most of the short elements were false positives:
a 1x1 skip link, field labels (the label is not the control, the input below
it is 52px), the quantity stepper inside the mini cart drawer, and the cart
item's own remove link, which belongs to the drawer rather than the panels.
Two were real:
the show-password button, 22x22
The only genuinely undersized control the new Register form introduced.
It is an icon button with no label, and at 22px it is well under the
44px minimum and awkward to hit with a thumb. Padded out to 44x44 with
the icon kept at its original size, positioned absolutely inside the
field so the extra height does not push the layout around, and given an
accessible name since a bare icon button announces nothing.
the header account and mini cart buttons, 40x40
Both were already below 44px. Raised to 44.
========================================================================== */
body .woocommerce .show-password-input,
body .woocommerce button.show-password-input {
min-width: 44px;
min-height: 44px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
color: var(--text-muted);
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
body .woocommerce .show-password-input:hover {
color: var(--text);
}
/* The password field needs room on the right for the larger button. */
body .woocommerce .u-column1 input[type="password"],
body .woocommerce .u-column2 input[type="password"],
body .woocommerce .u-column1 .woocommerce-input-wrapper,
body .woocommerce .u-column2 .woocommerce-input-wrapper {
position: relative;
}
body .woocommerce .u-column1 input[type="password"],
body .woocommerce .u-column2 input[type="password"] {
padding-right: 52px;
}
body .woocommerce .show-password-input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
body .wc-block-customer-account__link,
body .wc-block-mini-cart__button {
min-width: 44px !important;
min-height: 44px !important;
}
/* =============================================================================
CHROME AUTOFILL PAINT, WOOCOMMERCE NOTICES, AND THE SIGNED-IN ACCOUNT PAGE
========================================================================== */
/* --- colour scheme ----------------------------------------------------------
The white field on the checkout was never an :autofill problem, and that is
worth writing down so nobody chases the selector again.
Measured: on /checkout/ with the popup open, the email field painted white
while every other field, every one of them carrying the same classes and the
same computed background, painted correctly dark. The field was empty, still
showing its placeholder. That is Chrome's autofill *preview* state: the
suggestion is drawn into the field to be accepted or dismissed, and the value
has not been committed, so :-webkit-autofill does not match. There is no
selector for the preview state at all, so no background-color, box-shadow or
text-fill-color rule can reach it.
What does control it is the used colour scheme. Chrome derives the autofill
highlight from the scheme, so declaring dark makes it paint dark. This is a
page-level declaration and it also fixes the default scrollbar and the
unstyled form controls on the dark pages, which were light for the same
underlying reason. Confirmed absent before this: the computed value on :root
was "normal".
The committed-value override stays as well, further down the file. It is
still needed: it is what keeps a filled-in field dark after the value lands.
========================================================================== */
:root {
color-scheme: dark;
}
/* --- WooCommerce notices ----------------------------------------------------
Measured source of the white box: WooCommerce's own stylesheet ships
.woocommerce-error, .woocommerce-info, .woocommerce-message {
background-color: #f6f5f8;
color: #515151;
border-top: 3px solid #720eec;
}
.woocommerce-info { border-top-color: #1e85be }
.woocommerce-message { border-top-color: #8fae1b }
.woocommerce-error { border-top-color: #b81c23 }
#f6f5f8 is a near-white lavender and #515151 is a mid grey: on a #0a0a0f page
the notice was the single brightest object in the viewport. Specificity here
is only (0,1,0) for WooCommerce, so body .woocommerce .woocommerce-info at
(0,2,1) wins without !important on the properties that matter.
The tone is carried on the left edge rather than the top, matching the panel
language used elsewhere on the site, and the icon is recoloured to match: the
stock blue, olive and red are tuned for a light page and lose their meaning
on a dark one.
========================================================================== */
body .woocommerce .woocommerce-message,
body .woocommerce .woocommerce-info,
body .woocommerce .woocommerce-error,
body .woocommerce .woocommerce-notice {
position: relative;
list-style: none !important;
margin: 0 0 var(--space-4) !important;
padding: 16px 20px 16px 48px !important;
background-color: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
border-left: 3px solid var(--accent) !important;
border-radius: 12px !important;
font-size: 0.9375rem;
line-height: 1.6;
}
body .woocommerce .woocommerce-message {
border-left-color: #4ade80 !important;
}
body .woocommerce .woocommerce-error {
border-left-color: #f87171 !important;
}
body .woocommerce .woocommerce-info {
border-left-color: var(--accent) !important;
}
/* The icon is a ::before from the WooCommerce icon font, positioned into the
48px of left padding. */
body .woocommerce .woocommerce-message::before,
body .woocommerce .woocommerce-info::before,
body .woocommerce .woocommerce-error::before {
top: 50% !important;
left: 18px !important;
transform: translateY(-50%);
transform-origin: center;
color: var(--accent) !important;
}
body .woocommerce .woocommerce-message::before {
color: #4ade80 !important;
}
body .woocommerce .woocommerce-error::before {
color: #f87171 !important;
}
body .woocommerce .woocommerce-info li,
body .woocommerce .woocommerce-message li,
body .woocommerce .woocommerce-error li {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
color: var(--text) !important;
}
/* The action inside a notice, "Resend" on the temporary password notice. */
body .woocommerce .woocommerce-info .button,
body .woocommerce .woocommerce-message .button,
body .woocommerce .woocommerce-error .button,
body .woocommerce .woocommerce-info a.button,
body .woocommerce .woocommerce-message a.button,
body .woocommerce .woocommerce-error a.button {
float: none !important;
margin-left: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 18px !important;
border-radius: 999px !important;
background-color: var(--accent) !important;
color: #ffffff !important;
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
box-shadow: none !important;
border: 0 !important;
}
body .woocommerce .woocommerce-info .button:hover,
body .woocommerce .woocommerce-message .button:hover,
body .woocommerce .woocommerce-error .button:hover {
filter: brightness(1.1);
text-decoration: none;
}
/* --- signed-in account layout ------------------------------------------------
Markup, taken from WooCommerce 11.1.2 templates/myaccount/my-account.php:
.woocommerce
nav.woocommerce-MyAccount-navigation > ul > li.is-active > a[aria-current]
.woocommerce-MyAccount-content
ul.woocommerce-info (hooked to woocommerce_account_dashboard)
p, p
WooCommerce lays this out with a 30% floated nav and a 70% floated content,
and Ollie then overrides the content to 65%. Floats are being replaced with
a grid.
Scoped with a single :has() on the nav. Without it the grid would also apply
when the page is logged out, where .woocommerce contains a .u-columns
two-panel login instead, and the single grid track would squeeze those panels
into 280px. One :has() level, not nested: a nested :has() is dropped
silently and the whole rule goes with it.
SELECTOR TRAP, and it cost this whole block its first deployment.
woocommerce-account is a class on the BODY, not a wrapper element:
class="wp-singular ... woocommerce-account woocommerce-page ..."
So "body .woocommerce-account" is wrong. The descendant combinator demands an
element carrying .woocommerce-account that is a child of body, and there
isn't one: the class is on body itself. Every rule written that way matches
nothing at all, and does so silently, with no fallback and nothing in the
cascade to hint at it. It must be "body.woocommerce-account", one compound
selector, with the space removed.
The giveaway is what did apply in the same file. The notice rules were
written "body .woocommerce .woocommerce-info" and they landed, and the ones
written with .woocommerce-account did not, and the difference between the two
spellings was invisible on inspection.
========================================================================== */
body.woocommerce-account .woocommerce-MyAccount-navigation {
width: auto !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content {
width: auto !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0;
}
@media (min-width: 782px) {
body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
}
}
/* --- the menu panel ---------------------------------------------------------
Was a bare list: six purple links on the page background, the active one
marked only by Ollie's tertiary grey, which is a 4% lift off the background
and barely reads. It is now a panel with the same surface, border and 16px
radius as every other panel on the site.
Each row is a full-width block with a 44px minimum, so the tap target is the
whole row rather than the text. The active row carries an accent wash and a
3px accent bar inset on the left edge; inset rather than a border so it is
clipped by the row's own radius and does not push the label out of alignment
with the rows above and below it.
========================================================================== */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: flex;
flex-direction: column;
gap: 2px;
list-style: none;
margin: 0 !important;
padding: var(--space-2);
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li {
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: flex;
align-items: center;
min-height: 44px;
padding: 10px 16px;
border-radius: 10px;
color: var(--text-muted) !important;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.3;
text-decoration: none;
transition: background-color 160ms ease, color 160ms ease;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
background-color: var(--surface-2);
color: var(--text) !important;
text-decoration: none;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation li a[aria-current="page"] {
background-color: rgba(168, 85, 247, 0.16) !important;
background-image: none !important;
color: var(--accent) !important;
font-weight: 600;
text-decoration: none;
box-shadow: inset 3px 0 0 0 var(--accent);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
/* --- content ---------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3,
body.woocommerce-account .woocommerce-MyAccount-content h4 {
color: var(--text);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.25;
margin: 0 0 var(--space-3);
}
body.woocommerce-account .woocommerce-MyAccount-content h2 {
font-size: 1.375rem;
}
body.woocommerce-account .woocommerce-MyAccount-content h3 {
font-size: 1.125rem;
}
body.woocommerce-account .woocommerce-MyAccount-content p {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.7;
margin: 0 0 var(--space-3);
}
body.woocommerce-account .woocommerce-MyAccount-content strong {
color: var(--text);
font-weight: 600;
}
body.woocommerce-account .woocommerce-MyAccount-content a {
color: var(--accent);
text-decoration: none;
}
body.woocommerce-account .woocommerce-MyAccount-content a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* --- orders table -----------------------------------------------------------
Ollie gives .shop_table_responsive a base-coloured background with a
box-shadow hairline, which on this palette is a light panel. Replaced with
the standard surface and border, and the header row moved onto surface-2 so
the columns read without needing vertical rules between every cell.
========================================================================== */
body.woocommerce-account table.shop_table_responsive,
body.woocommerce-account table.my_account_orders,
body.woocommerce-account .woocommerce-orders-table {
width: 100%;
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 16px !important;
box-shadow: none !important;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
font-size: 0.9375rem;
color: var(--text-muted);
}
body.woocommerce-account table.shop_table_responsive th,
body.woocommerce-account .woocommerce-orders-table th,
body.woocommerce-account table.my_account_orders th {
background-color: var(--surface-2) !important;
color: var(--text) !important;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: left;
padding: 14px 16px;
border-bottom: 1px solid var(--border) !important;
white-space: nowrap;
}
body.woocommerce-account table.shop_table_responsive td,
body.woocommerce-account .woocommerce-orders-table td,
body.woocommerce-account table.my_account_orders td {
padding: 16px;
border-bottom: 1px solid var(--border) !important;
color: var(--text-muted);
vertical-align: middle;
}
body.woocommerce-account table.shop_table_responsive tbody tr:last-child td,
body.woocommerce-account .woocommerce-orders-table tbody tr:last-child td,
body.woocommerce-account table.my_account_orders tbody tr:last-child td {
border-bottom: 0 !important;
}
body.woocommerce-account .woocommerce-orders-table td a,
body.woocommerce-account table.shop_table_responsive td a {
color: var(--accent);
text-decoration: none;
font-weight: 500;
}
body.woocommerce-account .woocommerce-orders-table td a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* On a phone the table is wider than the panel. Scrolling it inside the panel
beats letting the whole page scroll sideways. */
@media (max-width: 781px) {
body.woocommerce-account .woocommerce-MyAccount-content {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
body.woocommerce-account table.shop_table_responsive,
body.woocommerce-account .woocommerce-orders-table,
body.woocommerce-account table.my_account_orders {
min-width: 520px;
}
}
/* --- addresses --------------------------------------------------------------
WooCommerce floats the two address blocks and floats the heading left with
the edit link right, on the assumption of a fixed width. Both floats are
cleared and the heading row becomes a flex pair so the two stay aligned when
the heading wraps.
========================================================================== */
body.woocommerce-account .addresses {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: var(--space-4);
margin: 0 !important;
}
body.woocommerce-account .addresses .u-column1,
body.woocommerce-account .addresses .u-column2 {
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: var(--space-4) !important;
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 16px !important;
}
body.woocommerce-account .addresses .title {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
body.woocommerce-account .addresses .title::before,
body.woocommerce-account .addresses .title::after {
content: none;
}
body.woocommerce-account .addresses .title h2,
body.woocommerce-account .addresses .title h3 {
float: none !important;
margin: 0 !important;
color: var(--text) !important;
font-size: 1rem !important;
font-weight: 600;
}
body.woocommerce-account .addresses .title .edit {
float: none !important;
font-size: 0.875rem;
font-weight: 500;
}
body.woocommerce-account address {
font-style: normal;
font-size: 0.9375rem;
line-height: 1.75;
color: var(--text-muted);
}
/* --- edit account and the other classic account forms ------------------------
Ollie paints these with the tertiary colour, no border and a 5px radius. Given
the standard surface, border and radius they join the rest of the page.
The submit button is full width on a phone so it is a comfortable target,
and is left at its natural width on a desktop rather than being stretched
across the panel.
========================================================================== */
body.woocommerce-account .woocommerce-Address,
body.woocommerce-account .woocommerce-EditAccountForm,
body.woocommerce-account .woocommerce-MyAccount-content form {
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 16px !important;
box-shadow: none !important;
padding: clamp(20px, 4vw, 32px) !important;
color: var(--text);
}
body.woocommerce-account .woocommerce-EditAccountForm .form-row {
margin: 0 0 var(--space-4);
display: block;
}
body.woocommerce-account .woocommerce-EditAccountForm label {
display: block;
margin-bottom: var(--space-1);
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 500;
}
body.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button,
body.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-Button,
body.woocommerce-account .woocommerce-MyAccount-content form button[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="submit"] {
display: block;
min-height: 48px;
border-radius: 999px !important;
background-color: var(--accent) !important;
background-image: none !important;
color: #ffffff !important;
font-size: 0.9375rem !important;
font-weight: 600;
border: 0 !important;
box-shadow: none !important;
}
@media (max-width: 781px) {
body.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button,
body.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-Button,
body.woocommerce-account .woocommerce-MyAccount-content form button[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="submit"] {
width: 100%;
}
}
/* --- download and payment method lists --------------------------------------
.woocommerce-account ul.digital-downloads and .woocommerce-MyAccount-content
ul.woocommerce-MyAccount-downloads are bare lists with bullets removed by
WooCommerce, so they lose their rhythm entirely. Given the same row treatment
as the menu.
========================================================================== */
body.woocommerce-account .woocommerce-MyAccount-content ul.digital-downloads,
body.woocommerce-account .woocommerce-MyAccount-content ul.woocommerce-MyAccount-downloads,
body.woocommerce-account .woocommerce-MyAccount-content ul.woocommerce-MyAccount-payment-methods {
margin: 0 0 var(--space-4);
padding: 0;
list-style: none;
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
}
body.woocommerce-account .woocommerce-MyAccount-content ul.digital-downloads li,
body.woocommerce-account .woocommerce-MyAccount-content ul.woocommerce-MyAccount-downloads li,
body.woocommerce-account .woocommerce-MyAccount-content ul.woocommerce-MyAccount-payment-methods li {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
padding: 14px 16px;
margin: 0;
border-bottom: 1px solid var(--border);
color: var(--text-muted);
font-size: 0.9375rem;
}
body.woocommerce-account .woocommerce-MyAccount-content ul.digital-downloads li:last-child,
body.woocommerce-account .woocommerce-MyAccount-content ul.woocommerce-MyAccount-downloads li:last-child,
body.woocommerce-account .woocommerce-MyAccount-content ul.woocommerce-MyAccount-payment-methods li:last-child {
border-bottom: 0;
}
body.woocommerce-account .woocommerce-MyAccount-content ul.digital-downloads li::before,
body.woocommerce-account .woocommerce-MyAccount-content ul.woocommerce-MyAccount-payment-methods li::before {
color: var(--accent);
}
/* --- the password change form on the dashboard -------------------------------
woocommerce_form_field renders the password fields with a description below
them. Those descriptions are the reason the panel is worth having: they are
where the minimum length and complexity rules are stated.
========================================================================== */
body.woocommerce-account .woocommerce-MyAccount-content .description {
color: var(--text-muted);
font-size: 0.8125rem;
line-height: 1.55;
margin-top: var(--space-1);
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-strength {
display: block;
text-align: left;
font-size: 0.8125rem;
font-weight: 600;
padding: var(--space-1) var(--space-2);
border-radius: 8px;
margin-bottom: var(--space-1);
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-strength.strong {
background-color: rgba(74, 222, 128, 0.16);
color: #4ade80;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-strength.bad,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-strength.short {
background-color: rgba(248, 113, 113, 0.16);
color: #f87171;
}
/* =============================================================================
THE REVEAL-PASSWORD ICON
-----------------------------------------------------------------------------
The eye was drawn but effectively invisible: a dark shape on a dark field.
It is not an element. WooCommerce draws it from a ::before pseudo-element
whose background-image is a data URI SVG, and the fill is baked into that
URI as a literal:
.woocommerce form .show-password-input::before {
background-image: url('data:image/svg+xml,')
}
%23111111 is #111111. The button is on --surface #14141c. That is a contrast
ratio of about 1.05:1, so the icon reads as a faint smudge, and setting
color on the button does nothing at all: there is no text in the button, no
currentColor anywhere in the icon, and nothing for color to inherit into. The
button's computed color was rgb(184,184,200) the whole time.
A CSS custom property cannot reach inside a data URI, so the fill is
rewritten literally to the brand off-white #f4f4f8, and again to the accent on
hover. Both states need their own rule: .display-password is the class
WooCommerce toggles when the password is visible, and it carries a different
path, the eye without the slash.
The button box itself, 44x44, is set further up the file.
========================================================================== */
/* hidden -> the slashed eye, offer to reveal */
body .woocommerce .show-password-input::before {
background-image: url('data:image/svg+xml,') !important;
}
/* visible -> the open eye, offer to hide */
body .woocommerce .show-password-input.display-password::before {
background-image: url('data:image/svg+xml,') !important;
}
/* hover: the accent, so the control announces itself like every other link and
button on the site */
body .woocommerce .show-password-input:hover::before {
background-image: url('data:image/svg+xml,') !important;
}
body .woocommerce .show-password-input.display-password:hover::before {
background-image: url('data:image/svg+xml,') !important;
}
/* =============================================================================
ACCOUNT LAYOUT - EXPLICIT TRACKS
-----------------------------------------------------------------------------
Measured, viewport 985, content column 953:
grid-template-columns 280px 593px
nav x 32 w 593
content x 354 w 280
Right values, wrong subjects: the nav is in the second track and the content
is in the first. The DOM order is nav then content, so auto-placement should
have produced the reverse of this.
This is the same steering that reversed the login panels earlier, where
auto-fit put col1 in the right-hand track and col2 in the left. Whatever is
redirecting placement is upstream of anything I am writing, so it is taken
out of the decision: both children are put on named tracks and given an
explicit source order.
The tracks themselves were already correct at 280px and 593px with a 48px
gap, totalling 921px inside a 953px column, so only the assignment was wrong.
One :has() per rule. Two of them nested in a single selector is the case that
gets the whole rule dropped without an error.
========================================================================== */
@media (min-width: 782px) {
body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation {
grid-column: 1;
grid-row: 1;
order: 0 !important;
}
body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
grid-column: 2;
grid-row: 1;
order: 0 !important;
}
}
/* =============================================================================
THE BLOCK NOTICE BANNER
-----------------------------------------------------------------------------
The white box on the account pages was never the classic notice. It is the
block notice banner, wc_print_notices having switched to:
So the ul.woocommerce-info rules above never applied to it. Different element,
different classes, different file.
Measured defaults, from packages-style.css:
.wc-block-components-notice-banner background-color: #fff
color: #2f2f2f
border: 1px solid #2f2f2f
border-radius: 4px
padding: 16px !important
...is-info / is-success / is-warning / is-error light tint backgrounds
> svg fill: #fff
background-color: #2f2f2f
border-radius: 50%
height: 100%
> .__content flex-basis: 100%
padding-right: 16px
> .__content .wc-forward float: right
background: transparent !important
color: #2f2f2f !important
text-decoration: underline
THE ALIGNMENT BUG, and all three parts of it are in that list.
flex-basis: 100% asks the content for a full row of the flex container, so it
wraps onto its own line underneath the icon rather than sitting beside it. That
is why the text read as detached from the info icon.
height: 100% on the svg stretches the icon to the full height of the banner.
Combined with the content dropping below it, the icon is centred against a box
it is no longer beside, which is why the two looked vertically unrelated.
float: right on .wc-forward does nothing, because the content is a flex item
and floats are ignored inside one. The action therefore stayed inline after
the sentence instead of sitting at the right, and because Ollie clamps the
banner to padding 10px !important while the pill keeps its own height, the
button's box spilled past the bottom edge of the banner.
The fix removes all three: flex-basis becomes 1 1 0 so the content sits beside
the icon, the icon is given a fixed 22px square, and the float is replaced
with margin-left auto, which is the flex equivalent and does work.
Colour comes from one custom property per variant so the border, the glyph and
the panel edge cannot drift apart. Ollie overrides padding and radius for this
banner, so those two need !important to get past it.
SCOPE. These rules are written against body alone, with no .woocommerce in the
chain. The banner is emitted by wc_print_notices, which runs on the account
pages, on the cart and on the checkout, and it does not sit at a predictable
depth under a .woocommerce wrapper on all three. Chaining one anyway made the
whole block conditional on an ancestor that merely happens to be there, which
is a trap worth writing down: it measured as "the rule is deployed and the
declarations are correct" while matching nothing at all. Notices should be
dark wherever they appear.
========================================================================== */
body .wc-block-components-notice-banner {
--nb-tone: var(--accent);
display: flex !important;
flex-wrap: wrap;
align-items: center !important;
align-content: center !important;
/*
* 10px, not var(--space-3).
*
* Measured on the product page, where the banner sits in a 329px summary
* column and WooCommerce's notices wrapper puts 24px of padding either side,
* leaving a 281px banner and 253px of row.
*
* A 24px gap looked right on the account pages, where the banner is nearly
* full width. Here it is not decoration, it is width: three items with two
* 24px gaps consume 48px of the row, and that is what squeezed the message
* into 155px and wrapped it over three lines, for a 97px tall box holding two
* lines of text. At 10px the message gets 195px and two lines, and the whole
* box comes to about 66px.
*/
gap: 10px;
/*
* 12px 14px, and a small top margin so a banner that is the first thing in
* its container is never flush against whatever sits above it.
*/
margin: var(--space-2) 0 var(--space-4) !important;
padding: 12px 14px !important;
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
border-left: 3px solid var(--nb-tone) !important;
border-radius: 12px !important;
box-shadow: none !important;
color: var(--text) !important;
font-size: 0.875rem;
line-height: 1.5;
}
/* The dismiss control is the third flex item, so it shares the row with the
message and competes for the same width. Pinned to the top right of the row
rather than centred on it, which is also where the eye expects a close
control to be when the message runs to two lines. */
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__dismiss,
body .wc-block-components-notice-banner > .wc-block-components-button,
body .wc-block-components-notice-banner > button {
align-self: flex-start;
flex: 0 0 auto;
margin: 1px 0 0 auto !important;
opacity: 0.6;
transition: opacity 160ms ease;
}
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__dismiss:hover,
body .wc-block-components-notice-banner > .wc-block-components-button:hover,
body .wc-block-components-notice-banner > button:hover {
opacity: 1;
}
body .wc-block-components-notice-banner.is-info {
--nb-tone: var(--accent);
}
body .wc-block-components-notice-banner.is-success {
--nb-tone: #4ade80;
}
body .wc-block-components-notice-banner.is-warning {
--nb-tone: #fbbf24;
}
body .wc-block-components-notice-banner.is-error {
--nb-tone: #f87171;
}
/* the glyph: fixed square, no stretching, no dark disc behind it */
body .wc-block-components-notice-banner > svg {
width: 22px !important;
height: 22px !important;
flex: 0 0 22px;
align-self: center;
fill: var(--nb-tone) !important;
background-color: transparent !important;
border-radius: 0;
padding: 0;
}
/* the content: beside the icon, action pushed to the far edge */
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
display: flex;
align-items: center;
align-self: center;
flex: 1 1 0;
flex-wrap: wrap;
gap: var(--space-3);
min-width: 0;
margin: 0;
padding-right: 0 !important;
color: var(--text);
white-space: normal;
}
body .wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary {
color: var(--text);
font-weight: 600;
}
/* the action: margin-left auto replaces the float that cannot work here */
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward,
body .wc-block-components-notice-banner .woocommerce-Button,
body .wc-block-components-notice-banner__content a {
float: none !important;
margin: 0 0 0 auto !important;
flex: 0 0 auto;
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 18px !important;
border: 0 !important;
border-radius: 999px !important;
background-color: var(--accent) !important;
color: #ffffff !important;
opacity: 1 !important;
box-shadow: none !important;
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
text-decoration: none !important;
text-underline-offset: 0;
white-space: nowrap;
}
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward:hover,
body .wc-block-components-notice-banner .woocommerce-Button:hover,
body .wc-block-components-notice-banner__content a:hover {
background-color: var(--accent-2) !important;
color: #ffffff !important;
filter: brightness(1.15);
text-decoration: none !important;
}
@media (max-width: 560px) {
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward,
body .wc-block-components-notice-banner .woocommerce-Button,
body .wc-block-components-notice-banner__content a {
width: 100%;
justify-content: center;
}
}
/* =============================================================================
CLASSIC WOOCOMMERCE FORMS AND THE ATTRIBUTES TABLE
-----------------------------------------------------------------------------
Two more light surfaces on the product page, both classic components that the
earlier dark-fields work missed, because that work targeted the block form
classes only:
.wc-block-components-text-input input the block forms, checkout and cart
These are not block forms:
Reviews tab form.comment-form
.comment-form-author input white
.comment-form-email input white
.comment-form-comment textarea white
.comment-form-rating select white
.comment-form-cookies-consent input[type=checkbox] white
Additional info table.woocommerce-product-attributes.shop_attributes white
Both come from Ollie's own stylesheet, which declares these in a cascade layer
but writes the declarations themselves unlayered:
input:not([type="submit"]):not([type="radio"]), select, textarea {
background-color: #fff;
color: #2f2f2f;
box-shadow: 0 1px 2px rgba(0,0,0,.02), 0 .5px 1px rgba(0,0,0,.04);
}
table.woocommerce-product-attributes { background: #fff; border-radius: 5px; }
table.shop_attributes tr:nth-child(even) td,
table.shop_attributes tr:nth-child(even) th { background-color: color-mix(...); }
Note the first selector has no :not([type="checkbox"]). The remember-me and
consent checkboxes are matched by it too, which is why the consent box on the
reviews form is white, and it would stay white even with color-scheme: dark,
because an explicit background-color beats the scheme. They are reset
separately below.
Padding and border-radius are deliberately NOT set on the general rule. Every
classic field already has deliberate sizing from either Ollie or the earlier
block-form work, and overriding it globally would change the checkout and cart
inputs as a side effect. Only colour, background and border change here; the
comment form gets its own sizing rules where that is wanted.
========================================================================== */
body .woocommerce input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not(.qty),
body .woocommerce select,
body .woocommerce textarea {
background-color: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
box-shadow: none !important;
caret-color: var(--text);
}
/* The consent and remember-me boxes are caught by the rule above on Ollie's side.
Restoring them to the native rendering lets color-scheme: dark do its job, and
accent-color makes the checked state purple rather than blue. */
body .woocommerce input[type="checkbox"],
body .woocommerce input[type="radio"] {
background-color: transparent !important;
accent-color: var(--accent);
}
body .woocommerce ::placeholder {
color: var(--text-muted);
opacity: 1;
}
/* --- the attributes table ----------------------------------------------------
One column of labels and one of values. The label column is given a width so
the pair lines up without hard-coding row heights, and the value column keeps
Ollie's italic for the Flavour list, which reads as a value rather than a
label.
========================================================================== */
body .woocommerce table.woocommerce-product-attributes,
body .woocommerce table.shop_attributes {
width: 100%;
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 16px !important;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
box-shadow: none !important;
color: var(--text-muted);
font-size: 0.9375rem;
}
body .woocommerce table.woocommerce-product-attributes th,
body .woocommerce table.shop_attributes th {
width: 34%;
background-color: transparent !important;
color: var(--text) !important;
font-weight: 600;
font-style: normal;
text-align: left;
padding: 16px 18px;
border-bottom: 1px solid var(--border) !important;
vertical-align: top;
}
body .woocommerce table.woocommerce-product-attributes td,
body .woocommerce table.shop_attributes td {
background-color: transparent !important;
color: var(--text-muted) !important;
padding: 16px 18px;
border-bottom: 1px solid var(--border) !important;
vertical-align: top;
}
body .woocommerce table.woocommerce-product-attributes td p,
body .woocommerce table.woocommerce-product-attributes td ul,
body .woocommerce table.shop_attributes td p,
body .woocommerce table.shop_attributes td ul {
margin: 0;
color: var(--text-muted);
}
body .woocommerce table.woocommerce-product-attributes tr:last-child th,
body .woocommerce table.woocommerce-product-attributes tr:last-child td,
body .woocommerce table.shop_attributes tr:last-child th,
body .woocommerce table.shop_attributes tr:last-child td {
border-bottom: 0 !important;
}
/* --- the review form --------------------------------------------------------- */
body .woocommerce .comment-respond {
color: var(--text);
}
body .woocommerce .comment-reply-title,
body .woocommerce .woocommerce-Reviews #comments .commentlist .comment-author .woocommerce-user__user-name,
body .woocommerce .woocommerce-Reviews .star-rating {
color: var(--text);
}
body .woocommerce form.comment-form p {
margin: 0 0 var(--space-3);
}
body .woocommerce form.comment-form label {
display: inline-block;
margin-bottom: var(--space-1);
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
}
body .woocommerce form.comment-form .comment-form-author input,
body .woocommerce form.comment-form .comment-form-email input,
body .woocommerce form.comment-form .comment-form-comment textarea {
display: block;
width: 100%;
max-width: 520px;
border-radius: 10px !important;
padding: 12px 14px !important;
font-size: 0.9375rem;
line-height: 1.5;
}
/* The rating dropdown is a control in its own right, not a field to stretch. */
body .woocommerce form.comment-form .comment-form-rating {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
}
body .woocommerce form.comment-form .comment-form-rating select {
width: auto;
min-width: 140px;
border-radius: 10px !important;
padding: 10px 12px !important;
font-size: 0.875rem;
}
body.woocommerce div.product form.comment-form .comment-form-rating select,
body.woocommerce div.product .variations select {
background-color: var(--surface) !important;
color: var(--text) !important;
}
body.woocommerce div.product .variations select {
border-radius: 10px !important;
}
body.woocommerce form.comment-form .comment-form-comment textarea {
min-height: 140px;
resize: vertical;
}
body.woocommerce form.comment-form .comment-form-cookies-consent {
display: flex;
align-items: center;
gap: var(--space-2);
}
body.woocommerce form.comment-form .comment-form-cookies-consent label {
display: inline;
margin: 0;
font-weight: 400;
font-size: 0.875rem;
}
/* --- the comment list, for when the first review lands -----------------------
Ollie paints .comment-text with a white background and an offset margin, which
on this palette is a light card. Given the same panel treatment.
========================================================================== */
body.woocommerce div.product .woocommerce-Reviews #comments ol.commentlist li .comment-text {
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 16px !important;
box-shadow: none !important;
padding: 20px 22px !important;
margin: 0 0 var(--space-4) 0 !important;
color: var(--text-muted);
}
body.woocommerce div.product .woocommerce-Reviews #comments ol.commentlist li .comment-text p,
body.woocommerce div.product .woocommerce-Reviews #comments ol.commentlist li .comment-text p.meta {
color: var(--text-muted) !important;
}
/* =============================================================================
REVIEW FORM CONSENT ROW TAP TARGET
-----------------------------------------------------------------------------
Measured 13x13. The consent checkbox is the smallest control on the site, and
on a phone that is genuinely hard to hit.
The box is raised to 20px, which is as large as a checkbox can go before it
stops looking like a checkbox, and the row it sits in gets a 44px minimum so
the tap target is the whole row. The label already wraps the input, so tapping
anywhere on the row toggles it.
========================================================================== */
body.woocommerce form.comment-form .comment-form-cookies-consent {
min-height: 44px;
}
body.woocommerce form.comment-form .comment-form-cookies-consent input[type="checkbox"] {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
flex: 0 0 20px;
margin: 0;
cursor: pointer;
}
body.woocommerce form.comment-form .comment-form-cookies-consent input[type="checkbox"]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* =============================================================================
PRODUCT SUMMARY: SHORT DESCRIPTION AS ITS OWN BOX, AND THE TRUST LINE
-----------------------------------------------------------------------------
Two layout corrections in the product summary column, both measured rather
than eyeballed.
DOM, right column, top to bottom:
h1 the product name
.wp-block-product-price JOD 12.00
p.mistra-delivery-note (removed, see mistra-store-config.php)
div.wp-block-post-excerpt "Pre-filled 40,000 puff disposable."
variation picker, Flavour
div.wc-block-components-notices.alignwide wraps picker + add to cart
div.wp-block-group.is-layout-flex the trust line, outer
div.wp-block-group.is-layout-flex inner
div.wp-block-outermost-icon-block the shield
div.icon-container.has-icon-color
svg
p.has-x-small-font "Safe and secure checkout"
There is exactly one .wp-block-post-excerpt on a product page and it is in
this column, so scoping by body.single-product is unambiguous. Verified by
count, not assumed.
--- the trust line, measured ---------------------------------------------
gap above it 2px flush against the Add to cart row
icon box 20 x 20
icon centre 3.4px above the text centre
wrapper 20 x 27 stretched to the full line
svg display: inline
The wrapper is a flex item and is being stretched to the 27px line box, and
the svg inside it is inline, so it takes part in a line box and rides the
baseline instead of centring. That is the 3.4px. display: block plus
line-height: 0 on the container takes it out of the line box entirely, and
the wrapper then collapses to the icon's own 20px and is centred by the
parent group's align-items: center, which was already doing its job.
The 2px gap is the other half of the complaint. var(--space-3) is 24px.
The trust line is targeted by shape rather than by the notices wrapper it
follows, so it does not lose its spacing if WooCommerce stops emitting that
wrapper. One :has() level, not nested.
SELECTOR TRAP, the first attempt missed by a whole descendant combinator.
The selector was written as
div.wp-block-group.is-layout-flex:has(> div.wp-block-group.is-layout-flex > svg)
reasoning that the inner group had the svg as a direct child. It does not.
The inner group's children are the icon wrapper and the paragraph, and the
svg is two levels further down:
div.wp-block-group.is-layout-flex inner
div.wp-block-outermost-icon-block
div.icon-container.has-icon-color
svg
p
A probe had located the svg with inner.querySelector('svg'), which searches
descendants, so the child combinator in the selector looked safe and was not.
The rule matched nothing and margin-top stayed 0px. The thing that identifies
the trust line is the icon BLOCK, not the svg.
========================================================================== */
/* --- short description as a panel ------------------------------------------ */
body.single-product .wp-block-post-excerpt {
margin: var(--space-3) 0;
padding: 14px 16px;
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
}
body.single-product .wp-block-post-excerpt .wp-block-post-excerpt__excerpt,
body.single-product .wp-block-post-excerpt p {
margin: 0;
color: var(--text-muted);
font-size: 0.9375rem;
line-height: 1.6;
}
/* --- trust line: spacing --------------------------------------------------- */
body.single-product div.wp-block-group.is-layout-flex:has(> div.wp-block-group.is-layout-flex .wp-block-outermost-icon-block) {
margin-top: var(--space-3);
}
/* --- trust line: icon and text on one baseline ---------------------------- */
body.single-product div.wp-block-outermost-icon-block,
body.single-product .wp-block-outermost-icon-block .icon-container {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
height: auto;
line-height: 0;
flex: 0 0 auto;
}
body.single-product .wp-block-outermost-icon-block svg,
body.single-product .icon-container svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 auto;
}
body.single-product div.wp-block-group.is-layout-flex:has(svg) p {
margin: 0;
color: var(--text-muted);
font-size: 0.875rem;
line-height: 1.4;
}
/* The shield arrives as a green fill. Green is not in the palette, and against
the accent it reads as a different brand, so it is pulled onto the muted text
colour the rest of the line uses. */
body.single-product .wp-block-outermost-icon-block svg,
body.single-product .icon-container.has-icon-color {
fill: var(--text-muted) !important;
color: var(--text-muted) !important;
}
/* =============================================================================
RESPONSIVE NAV: CONTAINER HIDES ON MOBILE
-----------------------------------------------------------------------------
WordPress core nav CSS has this rule:
.wp-block-navigation__container .is-responsive { display: none }
It hides an element with class .is-responsive *inside* the container. But the
navigation block puts is-responsive on the nav element itself, so the rule
never matches. The inline list (wp-block-navigation__container) therefore
stays visible as a row at all widths, and the hamburger button appears but
the drawer is empty because the items are never moved into it.
What is needed is a rule that hides the container on mobile when the nav
carries is-responsive, and shows it on desktop. The breakpoint in the core
CSS is 782px, so we mirror that.
This is a single rule pair; the drawer behaviour (the responsive container
with is-menu-open) is already handled by the core CSS and works once the
inline list is hidden.
========================================================================== */
/* Mobile: hide the inline container, let the hamburger + drawer take over. */
body .wp-block-navigation.is-responsive .wp-block-navigation__container {
display: none !important;
}
/* Desktop: show the inline container, hide the hamburger. */
@media (min-width: 782px) {
body .wp-block-navigation.is-responsive .wp-block-navigation__container {
display: flex !important;
}
body .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-open {
display: none !important;
}
}
/* =============================================================================
CATEGORY BUTTONS: ALLOW WRAPPING ON MOBILE
-----------------------------------------------------------------------------
Measured at 390px viewport: the "Browse X" buttons are 109px wide but their
text needs 117-124px. They have white-space: nowrap (from core button
styles) and the grid compresses them, so the text overflows or fights the
container.
The fix: allow wrapping on buttons that contain more than one word, and
ensure they have enough padding to breathe. The core button styles set
white-space: nowrap globally for .wp-block-button__link, so we override it
for our category buttons which are in the hero, category archive and the
category grid on the home page.
Three contexts:
- Home hero contact buttons: .mistra-contact-buttons
- Category archive "More coming soon" band: .mistra-soon-band
- Category grid cards: .mistra-cat-card
All use .wp-block-button.is-style-fill / is-style-outline with the link
inside being .wp-block-button__link.
We target the link inside these specific containers and allow normal
wrapping, with a min-height to keep the button tall enough for two lines.
On desktop the buttons are wide enough that wrapping never happens, but
the rule is harmless there. On mobile it prevents the text from fighting
the container.
========================================================================== */
/* Hero contact buttons, archive soon-band, and category grid buttons: let them wrap. */
body .mistra-contact-buttons .wp-block-button__link,
body .mistra-soon-band .wp-block-button__link,
body .mistra-cat-card .wp-block-button__link {
white-space: normal !important;
word-break: keep-all;
line-height: 1.3;
min-height: 44px;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* On desktop the buttons are wide enough that wrapping never happens, but
the rule is harmless there. On mobile it prevents the text from fighting
the container. */
/* =============================================================================
HERO SLIDER SPACING BELOW HEADER
-----------------------------------------------------------------------------
Measured: the hero slider sits directly against the header with 0px gap on
all mobile viewports (375, 390, 414, 480, 768). The header bottom is at
161px and the slider starts at exactly 161px - they touch.
Adding a var(--space-4) = 32px gap below the header on mobile, and
var(--space-6) = 48px on desktop for proper breathing room.
========================================================================== */
@media (max-width: 781px) {
body .mistra-hero-slider-wrap,
body .mistra-hero-slider-wrap + .wp-block-group,
body .mistra-hero-slider-wrap + .wp-block-group.alignfull {
margin-top: var(--space-4) !important;
padding-top: var(--space-4) !important;
}
}
/* Also ensure the header has bottom margin on mobile */
@media (max-width: 781px) {
body .site-header {
margin-bottom: var(--space-4) !important;
}
}
/* =============================================================================
CATEGORY GRID: RESPONSIVE SINGLE COLUMN ON MOBILE
-----------------------------------------------------------------------------
Measured: the grid was 2 columns even at 320px (cards 124px wide), making
buttons cramped and covering product images. On small screens the cards
should be full-width (1 column) so buttons have room and products are visible.
Breakpoints:
<= 480px 1 column (full width)
481-768px 2 columns
> 768px 3+ columns (as before)
========================================================================== */
body .mistra-cat-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: var(--space-4) !important;
}
/* On very small screens, force single column */
@media (max-width: 480px) {
body .mistra-cat-grid {
grid-template-columns: 1fr !important;
}
}
/* Ensure cards take full width in single column */
@media (max-width: 480px) {
body .mistra-cat-card {
width: 100% !important;
max-width: none !important;
}
}
/* =============================================================================
/* =============================================================================
CHECKOUT PAGE FIXES - ENHANCED
-----------------------------------------------------------------------------
Two issues reported:
1. "Use same address for billing" checkbox touches the left edge (was x:24)
Fixed: added padding so checkbox now at x:184
2. "Amman delivery" and "Cash on delivery" radio buttons don't show selected
state clearly. They are radio buttons with appearance: none and custom
styling, but the checked state wasn't visually clear enough.
Fixes:
- Make radio button checked state more obvious with solid accent background
- Add clear visual indicator for checked checkboxes
- Ensure proper spacing from edges
- Add focus states for accessibility
========================================================================== */
/* Checkout form spacing - prevent content from touching edges */
body .wc-block-checkout,
body .wc-block-checkout__main,
body .wc-block-checkout__sidebar {
padding-left: var(--space-4) !important;
padding-right: var(--space-4) !important;
}
/* Shipping/billing address sections */
body .wc-block-components-address-form,
body .wc-block-checkout__shipping-address,
body .wc-block-checkout__billing-address {
padding: var(--space-4) !important;
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
margin-bottom: var(--space-4) !important;
}
/* "Use same address for billing" checkbox area */
body .wc-block-components-checkbox:has(input[id*="checkbox-control-0"]),
body .wc-block-components-checkbox:has(input[id*="ship-to-different"]),
body .wc-block-checkout__billing-address .wc-block-components-checkbox {
padding-left: var(--space-4) !important;
margin-left: var(--space-2) !important;
}
/* The label for same address checkbox */
body .wc-block-components-checkbox label[for="checkbox-control-0"],
body .wc-block-components-checkbox label[for*="ship-to-different"] {
padding-left: var(--space-2) !important;
}
/* Radio buttons for shipping methods (Amman delivery) */
body .wc-block-components-radio-control {
margin: var(--space-2) 0 !important;
}
body .wc-block-components-radio-control__input {
appearance: none !important;
-webkit-appearance: none !important;
width: 20px !important;
height: 20px !important;
border: 2px solid var(--border) !important;
border-radius: 50% !important;
background-color: var(--surface) !important;
margin-right: var(--space-3) !important;
flex-shrink: 0;
transition: all 160ms ease;
}
body .wc-block-components-radio-control__input:checked {
background-color: var(--accent) !important;
border-color: var(--accent) !important;
box-shadow: inset 0 0 0 2px var(--surface) !important;
}
body .wc-block-components-radio-control__input:focus-visible {
outline: 2px solid var(--accent) !important;
outline-offset: 2px !important;
}
/* Radio button label */
body .wc-block-components-radio-control__label {
cursor: pointer !important;
font-weight: 500 !important;
color: var(--text) !important;
}
/* Payment method radio (Cash on delivery) */
body .wc-block-components-radio-control:has(input[id*="cod"]),
body .wc-block-components-radio-control:has(input[id*="wc-payment-method"]) {
margin: var(--space-2) 0 !important;
}
/* Shipping method description (Amman delivery JOD 3.00) */
body .wc-block-components-radio-control__description,
body .wc-block-checkout__shipping-method .wc-block-components-radio-control__description {
color: var(--text-muted) !important;
font-size: 0.875rem !important;
margin-left: calc(20px + var(--space-3)) !important;
}
/* "Use same address for billing" checkbox specific */
body .wc-block-components-checkbox:has(input[id="checkbox-control-0"]) {
padding-left: var(--space-4) !important;
}
body .wc-block-components-checkbox__input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 20px !important;
height: 20px !important;
border: 2px solid var(--border) !important;
border-radius: 4px !important;
background-color: var(--surface) !important;
margin-right: var(--space-3) !important;
flex-shrink: 0;
transition: all 160ms ease;
}
body .wc-block-components-checkbox__input[type="checkbox"]:checked {
background-color: var(--accent) !important;
border-color: var(--accent) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16.7 5.3c-.3-.3-.7-.3-1 0l-6 6-2.5-2.5c-.3-.3-.7-.3-1 0l-1 1c-.3.3-.3.7 0 1l3 3c.3.3.7.3 1 0l7-7c.3-.3.3-.7 0-1z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
background-size: 14px !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
body .wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
outline: 2px solid var(--accent) !important;
outline-offset: 2px !important;
}
/* Add note to order checkbox */
body .wc-block-components-checkbox:has(input[id="checkbox-control-1"]) {
padding-left: var(--space-4) !important;
}
/* Ensure form fields have proper spacing */
body .wc-block-components-form__field,
body .wc-block-checkout .wc-block-components-form__field {
margin-bottom: var(--space-4) !important;
}
/* Increase tap targets for all checkboxes and radios on mobile */
@media (max-width: 781px) {
body .wc-block-components-radio-control__input,
body .wc-block-components-checkbox__input[type="checkbox"] {
width: 24px !important;
height: 24px !important;
}
}
/* =============================================================================
CHECKOUT FORM SPACING - PREVENT CONTENT FROM TOUCHING EDGES
-----------------------------------------------------------------------------
The Hostinger CDN caches a truncated CSS, so we also add the critical
checkout spacing here as a fallback.
========================================================================== */
body .wc-block-checkout,
body .wc-block-checkout__main,
body .wc-block-checkout__sidebar {
padding-left: var(--space-4) !important;
padding-right: var(--space-4) !important;
}
body .wc-block-components-address-form,
body .wc-block-checkout__shipping-address,
body .wc-block-checkout__billing-address {
padding: var(--space-4) !important;
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
margin-bottom: var(--space-4) !important;
}
/* The "same address" checkbox label */
body .wc-block-components-checkbox label[for="checkbox-control-0"],
body .wc-block-components-checkbox label[for*="ship-to-different"] {
padding-left: var(--space-2) !important;
}
/* Shipping method description (Amman delivery JOD 3.00) */
body .wc-block-components-radio-control__description,
body .wc-block-checkout__shipping-method .wc-block-components-radio-control__description {
color: var(--text-muted) !important;
font-size: 0.875rem !important;
margin-left: calc(20px + var(--space-3)) !important;
}
/* "Add note to order" checkbox */
body .wc-block-components-checkbox:has(input[id="checkbox-control-1"]) {
padding-left: var(--space-4) !important;
}
/* Increase tap targets for all checkboxes and radios on mobile */
@media (max-width: 781px) {
body .wc-block-components-radio-control__input,
body .wc-block-components-checkbox__input[type="checkbox"] {
width: 24px !important;
height: 24px !important;
}
}
/* Checkout form spacing - prevent content from touching edges */
body .wc-block-checkout,
body .wc-block-checkout__main,
body .wc-block-checkout__sidebar {
padding-left: var(--space-4) !important;
padding-right: var(--space-4) !important;
}
/* Shipping/billing address sections */
body .wc-block-components-address-form,
body .wc-block-checkout__shipping-address,
body .wc-block-checkout__billing-address {
padding: var(--space-4) !important;
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
margin-bottom: var(--space-4) !important;
}
/* "Use same address for billing" checkbox area */
body .wc-block-components-checkbox:has(input[id*="checkbox-control-0"]),
body .wc-block-components-checkbox:has(input[id*="ship-to-different"]),
body .wc-block-checkout__billing-address .wc-block-components-checkbox {
padding-left: var(--space-4) !important;
margin-left: var(--space-2) !important;
}
/* The label for same address checkbox */
body .wc-block-components-checkbox label[for="checkbox-control-0"],
body .wc-block-components-checkbox label[for*="ship-to-different"] {
padding-left: var(--space-2) !important;
}
/* Radio buttons for shipping methods (Amman delivery) */
body .wc-block-components-radio-control {
margin: var(--space-2) 0 !important;
}
body .wc-block-components-radio-control__input {
appearance: none !important;
-webkit-appearance: none !important;
width: 20px !important;
height: 20px !important;
border: 2px solid var(--border) !important;
border-radius: 50% !important;
background-color: var(--surface) !important;
margin-right: var(--space-3) !important;
flex-shrink: 0;
transition: all 160ms ease;
}
body .wc-block-components-radio-control__input:checked {
background-color: var(--accent) !important;
border-color: var(--accent) !important;
box-shadow: inset 0 0 0 2px var(--surface) !important;
}
body .wc-block-components-radio-control__input:focus-visible {
outline: 2px solid var(--accent) !important;
outline-offset: 2px !important;
}
/* Radio button label */
body .wc-block-components-radio-control__label {
cursor: pointer !important;
font-weight: 500 !important;
color: var(--text) !important;
}
/* Payment method radio (Cash on delivery) */
body .wc-block-components-radio-control:has(input[id*="cod"]),
body .wc-block-components-radio-control:has(input[id*="wc-payment-method"]) {
margin: var(--space-2) 0 !important;
}
/* Shipping method description (Amman delivery JOD 3.00) */
body .wc-block-components-radio-control__description,
body .wc-block-checkout__shipping-method .wc-block-components-radio-control__description {
color: var(--text-muted) !important;
font-size: 0.875rem !important;
margin-left: calc(20px + var(--space-3)) !important;
}
/* "Use same address for billing" checkbox specific */
body .wc-block-components-checkbox:has(input[id="checkbox-control-0"]) {
padding-left: var(--space-4) !important;
}
body .wc-block-components-checkbox__input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 20px !important;
height: 20px !important;
border: 2px solid var(--border) !important;
border-radius: 4px !important;
background-color: var(--surface) !important;
margin-right: var(--space-3) !important;
flex-shrink: 0;
transition: all 160ms ease;
}
body .wc-block-components-checkbox__input[type="checkbox"]:checked {
background-color: var(--accent) !important;
border-color: var(--accent) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16.7 5.3c-.3-.3-.7-.3-1 0l-6 6-2.5-2.5c-.3-.3-.7-.3-1 0l-1 1c-.3.3-.3.7 0 1l3 3c.3.3.7.3 1 0l7-7c.3-.3.3-.7 0-1z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
background-size: 14px !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
body .wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
outline: 2px solid var(--accent) !important;
outline-offset: 2px !important;
}
/* Add note to order checkbox */
body .wc-block-components-checkbox:has(input[id="checkbox-control-1"]) {
padding-left: var(--space-4) !important;
}
/* Ensure form fields have proper spacing */
body .wc-block-components-form__field,
body .wc-block-checkout .wc-block-components-form__field {
margin-bottom: var(--space-4) !important;
}
/* Increase tap targets for all checkboxes and radios on mobile */
@media (max-width: 781px) {
body .wc-block-components-radio-control__input,
body .wc-block-components-checkbox__input[type="checkbox"] {
width: 24px !important;
height: 24px !important;
}
}
/* =============================================================================
CHECKOUT FORM SPACING - PREVENT CONTENT FROM TOUCHING EDGES
-----------------------------------------------------------------------------
The Hostinger CDN caches a truncated CSS, so we also add the critical
checkout spacing here as a fallback.
========================================================================== */
body .wc-block-checkout,
body .wc-block-checkout__main,
body .wc-block-checkout__sidebar {
padding-left: var(--space-4) !important;
padding-right: var(--space-4) !important;
}
body .wc-block-components-address-form,
body .wc-block-checkout__shipping-address,
body .wc-block-checkout__billing-address {
padding: var(--space-4) !important;
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
margin-bottom: var(--space-4) !important;
}
/* The "same address" checkbox label */
body .wc-block-components-checkbox label[for="checkbox-control-0"],
body .wc-block-components-checkbox label[for*="ship-to-different"] {
padding-left: var(--space-2) !important;
}
/* Shipping method description (Amman delivery JOD 3.00) */
body .wc-block-components-radio-control__description,
body .wc-block-checkout__shipping-method .wc-block-components-radio-control__description {
color: var(--text-muted) !important;
font-size: 0.875rem !important;
margin-left: calc(20px + var(--space-3)) !important;
}
/* "Add note to order" checkbox */
body .wc-block-components-checkbox:has(input[id="checkbox-control-1"]) {
padding-left: var(--space-4) !important;
}
/* Increase tap targets for all checkboxes and radios on mobile */
@media (max-width: 781px) {
body .wc-block-components-radio-control__input,
body .wc-block-components-checkbox__input[type="checkbox"] {
width: 24px !important;
height: 24px !important;
}
}
/* =============================================================================
CHECKOUT FORM SPACING - PREVENT CONTENT FROM TOUCHING EDGES
-----------------------------------------------------------------------------
The Hostinger CDN caches a truncated CSS, so we also add the critical
checkout spacing here as a fallback.
========================================================================== */
body .wc-block-checkout,
body .wc-block-checkout__main,
body .wc-block-checkout__sidebar {
padding-left: var(--space-4) !important;
padding-right: var(--space-4) !important;
}
body .wc-block-components-address-form,
body .wc-block-checkout__shipping-address,
body .wc-block-checkout__billing-address {
padding: var(--space-4) !important;
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
margin-bottom: var(--space-4) !important;
}
/* The "same address" checkbox label */
body .wc-block-components-checkbox label[for="checkbox-control-0"],
body .wc-block-components-checkbox label[for*="ship-to-different"] {
padding-left: var(--space-2) !important;
}
/* Shipping method description (Amman delivery JOD 3.00) */
body .wc-block-components-radio-control__description,
body .wc-block-checkout__shipping-method .wc-block-components-radio-control__description {
color: var(--text-muted) !important;
font-size: 0.875rem !important;
margin-left: calc(20px + var(--space-3)) !important;
}
/* "Add note to order" checkbox */
body .wc-block-components-checkbox:has(input[id="checkbox-control-1"]) {
padding-left: var(--space-4) !important;
}
/* Increase tap targets for all checkboxes and radios on mobile */
@media (max-width: 781px) {
body .wc-block-components-radio-control__input,
body .wc-block-components-checkbox__input[type="checkbox"] {
width: 24px !important;
height: 24px !important;
}
}
/* =============================================================================
CATEGORY GRID BUTTONS: FULL WIDTH ON MOBILE, NO OVERFLOW
-----------------------------------------------------------------------------
The buttons were 410px wide on a 124px card at 320px viewport, completely
covering the product images. The grid is now 1 column on mobile, but the
buttons weren't constrained to the card width.
Fix: buttons take full width of their card container, with proper max-width
========================================================================== */
@media (max-width: 480px) {
body .mistra-cat-card .wp-block-buttons {
width: 100% !important;
max-width: 100% !important;
}
body .mistra-cat-card .wp-block-button__link {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* Ensure buttons don't overflow their container at any viewport */
body .mistra-cat-card .wp-block-buttons {
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
body .mistra-cat-card .wp-block-button__link {
box-sizing: border-box;
max-width: 100%;
width: auto;
}
/* On very small screens, ensure buttons are touch-friendly */
@media (max-width: 480px) {
body .mistra-cat-card .wp-block-button__link {
padding: 12px 16px !important;
min-height: 44px !important;
text-align: center !important;
white-space: normal !important;
word-break: keep-all;
}
}
/* =============================================================================
HERO SLIDER CTA BUTTONS: RESPONSIVE POSITIONING
-----------------------------------------------------------------------------
The CTA buttons on the hero slider were very wide (361px on 425px slider at 480px),
covering the product images. They need to be sized appropriately for mobile
and positioned so they don't obscure the product images.
========================================================================== */
@media (max-width: 480px) {
/* CTA buttons on hero slider - constrain width and position at bottom */
body .mistra-hero-buttons {
max-width: 90% !important;
margin: 0 auto !important;
}
body .mistra-hero-buttons .wp-block-button__link {
max-width: 90% !important;
width: auto !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
}
/* Position CTA buttons below the slider content, not overlaying the image */
body .mistra-hero-content {
padding-bottom: var(--space-4) !important;
}
}
/* At tablet size, still constrain but allow more width */
@media (min-width: 481px) and (max-width: 768px) {
body .mistra-hero-buttons .wp-block-button__link {
max-width: 80% !important;
margin: 0 auto !important;
}
}
/* On desktop, keep the side-by-side layout but ensure they don't overlap slider content */
@media (min-width: 782px) {
body .mistra-hero-buttons .wp-block-button__link {
max-width: 300px !important;
}
}
/* Ensure hero image is never covered by CTA buttons - buttons should be in content area */
body .mistra-hero-slide .mistra-hero-content {
z-index: 2 !important;
position: relative !important;
}
body .mistra-hero-buttons {
z-index: 3 !important;
position: relative !important;
margin-top: var(--space-4) !important;
}
/* =============================================================================
HERO SLIDER: MOBILE LAYOUT FIX
-----------------------------------------------------------------------------
On mobile viewports (320-480px), the hero slide content (text + buttons)
overlaps with the absolutely-positioned product image (.mistra-hero-art).
Measured at 320px:
slide: x 20, w 265, h 420
content: x 52, w 201, h 518 (text + buttons)
art: x 121, w 164, h 420 (absolute, right: 0)
overlap: x 121 to x 253 (132px of overlap)
The art is position: absolute, so it sits on top of the content. The buttons
are inside the content, so they overlap the product image.
The swiper also forces height: 520px and overflow: hidden on the slide,
which clips the content.
Fix: On mobile, make the art static (in-flow) and position it below the
content. This stacks the layout vertically: text, buttons, then image.
Override the swiper's fixed height and overflow.
========================================================================== */
@media (max-width: 781px) {
/* Override swiper's fixed height and overflow */
body .mistra-hero-slide {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
flex-direction: column !important;
}
/* Override swiper-wrapper height */
body .mistra-hero-swiper .swiper-wrapper,
body .mistra-hero-swiper .swiper-slide {
height: auto !important;
overflow: visible !important;
}
/* Make the art static so it flows below the content */
body .mistra-hero-art {
position: static !important;
width: 100% !important;
max-width: 300px !important;
margin: var(--space-4) auto 0 !important;
right: auto !important;
left: auto !important;
top: auto !important;
bottom: auto !important;
}
/* Make the art image responsive */
body .mistra-hero-art img {
width: 100% !important;
height: auto !important;
max-height: 300px !important;
object-fit: contain !important;
}
/* Ensure content is full width on mobile */
body .mistra-hero-content {
width: 100% !important;
max-width: 100% !important;
padding: 0 var(--space-4) !important;
}
/* Ensure buttons are below the text, not overlapping the image */
body .mistra-hero-buttons {
position: relative !important;
margin-top: var(--space-4) !important;
width: 100% !important;
max-width: 100% !important;
}
/* Make CTA buttons full width on mobile */
body .mistra-hero-buttons .wp-block-button__link {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
}
/* Ensure the slider container doesn't clip content */
body .mistra-hero-swiper,
body .swiper {
overflow: visible !important;
}
}
/* On tablet (782-1023px), keep the side-by-side but ensure no overlap */
@media (min-width: 782px) and (max-width: 1023px) {
body .mistra-hero-art {
width: 40% !important;
max-width: 300px !important;
}
body .mistra-hero-content {
width: 60% !important;
max-width: 60% !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-4) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-4) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-4) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-4) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-3) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-3) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-3) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-3) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-3) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-3) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-3) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-3) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-3) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-3) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
PRODUCT CARD: BUTTON COVERS THE IMAGE ON NARROW SCREENS
-----------------------------------------------------------------------------
Measured on a 390px viewport, single column:
card x 10, w 371
image y 118, h 300 (ends y 418)
button y 446, h 118, w 343
The button is 118px tall and starts 28px below the image, so it is not
overlapping the image itself. But the button is 343px wide on a 371px card,
leaving only 14px on each side, and at 118px tall it is the largest single
element in the card. On a phone the product photograph reads as a small
object floating above a giant purple pill, which is the complaint.
The cause is the hover treatment. Ollie gives the add-to-cart button a
backdrop-blur pill that is wider than the button itself, and the button is
sized to fill the card width. On a narrow card that produces a very wide,
very short control.
Fix: cap the button width on mobile so it reads as a button rather than a
banner, keep it centred, and give the image more room by reducing the
card's internal padding. The button stays full-width on a desktop, where
the card is wide enough for that to look intentional.
========================================================================== */
@media (max-width: 781px) {
/* The card: tighter padding so the image has more of the card. */
body .wc-block-product-template > li.wc-block-product,
body ul.wc-block-grid > li.wc-block-product {
padding: 12px !important;
}
/* The image: give it more vertical room. */
body .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image,
body ul.wc-block-grid > li.wc-block-product .wp-block-woocommerce-product-image {
margin-bottom: var(--space-3) !important;
}
/* The button: cap the width and centre it. */
body .wc-block-product-template > li.wc-block-product .wp-block-button,
body ul.wc-block-grid > li.wc-block-product .wp-block-button {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
display: block !important;
}
body .wc-block-product-template > li.wc-block-product .wp-block-button__link,
body ul.wc-block-grid > li.wc-block-product .wp-block-button__link {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.875rem !important;
box-sizing: border-box !important;
}
}
/* =============================================================================
THREE FIXES: DRAWER MENU, HERO SLIDER HEIGHT, CATEGORY BUTTON TEXT
-----------------------------------------------------------------------------
Measured at 390px viewport against the live page.
1. DRAWER MENU OPENED EMPTY
The overlay itself was fine: .is-menu-open resolved to display:flex at
760px tall, six
present, white text, opacity 1. But the
inside
measured display:none and height 0.
Cause is a self-inflicted rule. This file had:
body .wp-block-navigation.is-responsive .wp-block-navigation__container
{ display: none !important; }
written on the belief that the navigation block renders an inline list
AND a separate drawer list, so hiding the inline one would leave the
drawer intact. It does not. There is exactly one
, it lives inside
.wp-block-navigation__responsive-container, and the descendant selector
matched it. The rule hid the menu items in both states, which is why
the drawer opened as an empty panel and the header row looked empty too.
Fixed by scoping the hide to the closed drawer only.
2. HERO SLIDER OVERFLOWED ITS OWN BOX
.mistra-hero-swiper is height:420px with overflow:visible on mobile, but
the slide inside measured 810px. The flex-direction:column stack plus
align-items:flex-end (which centres the whole stack horizontally at
flex-end and pulls it to the bottom) pushed copy below the fold and let
the buttons overrun the visible area. The black bands top and bottom in
the screenshot are the slide painting outside the 420px frame.
Fixed with align-items:stretch, auto margins on the art so it does not
compete with the headline, and a min-height that stops it collapsing.
3. CATEGORY BUTTON TEXT TOUCHED THE BACKGROUND
"Browse Disposable" measured 109px wide at padding 16px/16px and 14px
type. The label needs ~117px. It wrapped to two lines (height 60px) but
the pill stayed 109px wide, so the descenders of the wrapped second line
sat on the fill. The earlier fix let the text wrap but never gave the
button room to grow, which turned an overflow into a collision.
Fixed with horizontal padding that scales down on narrow cards plus
width:100% so the pill is always wider than its longest word.
========================================================================== */
/* ---- 1. Drawer menu ------------------------------------------------------ */
/* The single
lives inside the responsive container. Hide it only while
that container is closed, so the drawer shows its items once opened and the
header row stays clean on a phone. */
@media (max-width: 781px) {
body .wp-block-navigation.is-responsive
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__container {
display: none !important;
}
/* Belt and braces: the open drawer always lays its list out. */
body .wp-block-navigation.is-responsive
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
}
/* ---- 2. Hero slider on mobile ------------------------------------------- */
@media (max-width: 781px) {
body .mistra-hero-swiper {
height: auto !important;
min-height: 520px !important;
overflow: hidden !important;
}
/* flex-end on a column axis centres the stack horizontally, which is why
the copy drifted off the left edge. Stretch keeps it full width. */
body .mistra-hero-slide {
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
min-height: 520px !important;
height: auto !important;
overflow: hidden !important;
}
body .mistra-hero-content {
width: 100% !important;
max-width: 100% !important;
align-self: stretch !important;
}
/* The product art sits behind the copy at reduced opacity. Auto margins
centre it in whatever space the copy leaves rather than pinning it to a
fixed top offset that no longer matches the copy height. */
body .mistra-hero-art {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
transform: none !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
opacity: 0.22 !important;
pointer-events: none !important;
}
body .mistra-hero-art img {
width: 100% !important;
height: 100% !important;
max-height: 300px !important;
object-fit: contain !important;
object-position: center top !important;
}
/* Buttons sit in normal flow under the copy, inside the slide. */
body .mistra-hero-buttons {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 24px !important;
}
body .mistra-hero-buttons .wp-block-button,
body .mistra-hero-buttons .wp-block-button__link,
body .mistra-hero-buttons .wp-element-button {
width: 100% !important;
max-width: 100% !important;
min-height: 44px !important;
}
}
/* ---- 3. Category button text inside the pill ---------------------------- */
/* width:100% lets the pill be as wide as its card, so a wrapped label can
never sit on the fill. The clamp keeps the type legible on a 2-up phone
grid without shrinking it to nothing on a wide desktop card. */
/* Measured again after the first attempt: the pill came out 94px wide with
10px padding and 11px type, so the label still had less room than it needed
and wrapped onto the fill. Two causes. The clamp keyed off 2.6vw, which at a
390px viewport resolved to 10px type on a card only 94px across. And
width:100% was applied to the inner link, which is inline-flex, so it sized
to its own content rather than to the card.
Sizing is now driven by the card, not the viewport: the label gets a floor
of 12px, the buttons wrapper is a block that fills the card, and the pill
inherits that width with box-sizing so padding is inside it. The label is
allowed to wrap, and because the pill is now as wide as the card, a second
line lands inside the fill rather than on its edge. */
/* Measured again: the card is 160px but Ollie puts 18px of inline padding on
the buttons wrapper, leaving 122px, and the pill took a further 12px a side,
so the label had 85px to sit in and wrapped to two lines with the second
line on the fill. The wrapper padding is the outer of the two costs and is
the one that does not belong: the card already has its own padding. */
body .mistra-cat-card > .wp-block-buttons,
body .mistra-cat-card .wp-block-buttons {
display: block !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body .mistra-cat-card .wp-block-button {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body .mistra-cat-card .wp-block-button__link,
body .mistra-cat-card .wp-element-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
text-align: center !important;
line-height: 1.3 !important;
min-height: 44px !important;
padding: 12px 16px !important;
font-size: 0.75rem !important;
letter-spacing: -0.005em !important;
}
/* The label itself carries the text; give it room to breathe inside the pill. */
body .mistra-cat-card .wp-block-button__link > span,
body .mistra-cat-card .wp-element-button > span {
padding: 0 !important;
margin: 0 !important;
display: inline !important;
}
@media (max-width: 480px) {
body .mistra-cat-card .wp-block-button__link,
body .mistra-cat-card .wp-element-button {
padding-left: 12px !important;
padding-right: 12px !important;
font-size: 0.75rem !important;
}
}
/* ---- 4. Focus ring was doubling the outline button's border --------- */
/* Clicking a hero CTA leaves it :focus-visible in Chromium, so the global
2px ring painted a second outline just outside the pill's own 1px border.
On a filled button that reads as a halo; on the outline variant, which
already has a border, it reads as two borders. The ring is kept for
keyboard users and suppressed for pointer users. */
@media (hover: hover) and (pointer: fine) {
body .mistra-hero-buttons .wp-element-button:focus:not(:focus-visible),
body .mistra-hero-buttons .wp-block-button__link:focus:not(:focus-visible) {
outline: none !important;
}
}
/* The outline variant: one border, and the ring sits inside it. */
body .mistra-hero-buttons .is-style-outline .wp-element-button,
body .mistra-hero-buttons .is-style-outline .wp-block-button__link {
outline-offset: -2px !important;
}
/* =============================================================================
PRODUCT CARD: BUTTON BELOW THE PRICE ON MOBILE
-----------------------------------------------------------------------------
Two separate faults, both measured at 390px.
FAULT 1, the button was not in flow at all. The mobile block further up this
sheet sets
.ollie-product-button-hover-group { position: static !important; }
which is correct, but a later rule outside any media query sets the same
property to absolute. Equal specificity, later wins, so the group was
absolutely positioned and lifted out of the flex column. It reported a top
of 2451 against a title top of 2451 and a price top of 2483: the pill was
not below anything, it was sitting on top of the title and price rows while
pretending to be a separate block. That is the "under the price" symptom.
FAULT 2, the visual order was wrong. With the image wrapper set to
display:contents its children are hoisted into the card's flex column, and
document order puts them as image, then button, then the title/price group.
So even in flow the button would land between the picture and the product
name.
The card is given the order a shop card is read in: picture, name, price,
then the action. Order is set on the flex column rather than by moving
nodes, so the markup stays as Ollie wrote it and this stays reversible.
========================================================================== */
@media (max-width: 781px) {
/* The group returns to normal flow. This re-asserts the property the
later absolute rule overrides, and being last in the sheet it is the
rule that wins. */
body li.wc-block-product .ollie-product-button-hover-group {
position: static !important;
inset: auto !important;
transform: none !important;
opacity: 1 !important;
pointer-events: auto !important;
width: auto !important;
margin: var(--space-2) var(--space-3) var(--space-3) !important;
}
/* Order: the picture keeps first place, the title and price group takes
second, the button takes last. The title/price wrapper is the flex child
that is NOT the dissolved image wrapper. */
body li.wc-block-product .ollie-product-button-hover > .wp-block-components-product-image {
order: 1;
}
body li.wc-block-product .ollie-product-button-hover > .wp-block-group.has-global-padding:not(.ollie-product-button-hover-image) {
order: 2;
}
body li.wc-block-product .ollie-product-button-hover-group {
order: 3;
}
}
/* =============================================================================
HAMBURGER TRIGGER: THE NAV PANUM WRAPPING IT
-----------------------------------------------------------------------------
Removing the border from the trigger button was not enough, because the
visible hairline was one level up. Ollie wraps the navigation in
.mistra-nav-panel, a pill that on desktop is the nav bar's own surface:
--surface fill, 1px --border hairline, 4px padding. Measured at 390px it
came out 62x54 wrapping a 52x44 button, so the border the client was seeing
was this panel's, and the trigger was sitting inside a bordered pill rather
than being the pill itself.
On a phone the panel has no bar to be. It exists only to carry the trigger,
and anything it paints around that trigger is a frame around the button. The
mobile rule further up this sheet already intended to strip it, but it
targeted .mistra-nav-panel while a later body-prefixed rule re-declared the
fill and the border, and body beats a bare class on specificity. So the
collapse never took effect.
Scoped to 782px and down, matching the point where the nav stops being an
inline bar, so the desktop pill is untouched.
========================================================================== */
@media (max-width: 781px) {
body .mistra-nav-panel {
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
gap: 0 !important;
}
}
/* The header glow separator is a stray purple dash hanging under the
hamburger once the panel is gone, so it goes with it. */
@media (max-width: 781px) {
body .mistra-header-glow:not(.is-style-dots),
body .wp-block-separator.mistra-header-glow {
display: none !important;
}
}