/* =============================================================================
MINI-CART DRAWER — "The Ledger" (site-wide)
The WooCommerce Blocks mini-cart button lives in the global header, so its
slide-out drawer can open on EVERY page. This stylesheet is therefore enqueued
site-wide (greyd_child_header_assets), NOT inside jw-commerce.css — that 80KB
cart/checkout/account sheet only loads on commerce surfaces, which is why the
drawer used to fall back to WooCommerce defaults (description dump, visible qty
stepper, plain buttons) on the homepage and other non-commerce pages.
Moved out of jw-commerce.css 2026-07-03 so the treatment is consistent
everywhere.
Self-contained: redeclares only the --jw-* tokens these rules use, so it has no
dependency on jw-commerce.css being present. Values mirror that file's :root.
============================================================================= */
:root{
--jw-text: #111111;
--jw-text-2: #555555;
--jw-ghost: #999999;
--jw-paper: #f8f6f2;
--jw-warm: #e8e4df;
--jw-white: #ffffff;
--jw-mono: "Overpass Mono", "Courier New", monospace;
--jw-serif: "Cormorant Garamond", Georgia, serif;
--jw-sans: "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
--jw-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ---- full-height takeover + scroll lock ----
The drawer and its dimmed overlay are WooCommerce's own: fixed, full viewport
height, z-index above the sticky header (9999 > 1000), close button on the
panel. Two gaps to close:
1) SCROLL-BEHIND. WooCommerce sets body{overflow:hidden} while the drawer is
open, but iOS Safari ignores that for touch-drag, so the page scrolls behind
the fixed drawer — the sticky nav slides under the scrim and the fixed close
button jitters/disappears. Lock the ROOT element (more reliable than
on iOS) while the overlay is in its open state, and `overscroll-behavior:
contain` so the drawer's own scroll can't chain into the page. Keyed off
WooCommerce's own open-state class (`--with-slide-in`) so it only applies
while the drawer is actually open. Scoped to the drawer's full-screen
breakpoint so the desktop scrollbar never toggles (no reflow jump). */
@media (max-width: 1180px){
html:has(.wc-block-components-drawer__screen-overlay--with-slide-in){
overflow: hidden;
}
}
.wc-block-components-drawer__screen-overlay,
.wc-block-mini-cart__drawer.wc-block-components-drawer{
overscroll-behavior: contain;
}
/* 2) SCRIM. WooCommerce's default backdrop is a light 35% grey, so the nav bar
reads through it and the takeover feels half-committed. Brand ink at 55%. */
.wc-block-components-drawer__screen-overlay{
background: rgba(17, 17, 17, .55) !important;
}
/* ---- drawer shell: airier padding, brand type ---- */
.wc-block-mini-cart__drawer{
--mc-pad: 30px;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__template-part,
.wc-block-mini-cart__drawer .wc-block-components-drawer__content{
font-family: var(--jw-sans);
color: var(--jw-text);
background: var(--jw-white);
}
/* un-pin the footer: sit it under the items instead of leaving a mid-drawer void */
.wc-block-mini-cart__drawer .wc-block-mini-cart__template-part div:has(> .wc-block-mini-cart__footer){
justify-content: flex-start !important;
}
/* ---- title: Cormorant italic, quiet, count suppressed ---- */
.wc-block-mini-cart__title.wc-block-mini-cart__title,
.wc-block-mini-cart__drawer .wc-block-mini-cart__title{
font-family: var(--jw-serif) !important;
font-style: italic;
font-weight: 400;
font-size: 30px;
line-height: 1;
letter-spacing: 0;
color: var(--jw-text);
padding: 4px var(--mc-pad) 0;
margin: 0;
/* WooCommerce fades the title's bottom 24px with a mask-image gradient
(linear-gradient(#000 calc(100% - 24px), transparent)) — kill it. */
-webkit-mask-image: none !important;
mask-image: none !important;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__title > span:last-child{ /* "(items: N)" */
display: none;
}
/* hairline under the header */
.wc-block-mini-cart__drawer .wc-block-mini-cart__items{
flex: 0 0 auto !important; /* don't stretch — this was the source of the dead void */
margin-top: 20px;
padding: 4px var(--mc-pad) 0;
border-top: 1px solid rgba(17,17,17,.12);
}
/* ---- strip default table chrome ---- */
.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table,
.wc-block-mini-cart__drawer table.wc-block-mini-cart-items,
.wc-block-mini-cart__drawer table.wc-block-mini-cart-items tbody,
.wc-block-mini-cart__drawer table.wc-block-mini-cart-items tr,
.wc-block-mini-cart__drawer table.wc-block-mini-cart-items td,
.wc-block-mini-cart__drawer table.wc-block-mini-cart-items th{
border: 0 !important;
background: none !important;
padding: 0;
}
.wc-block-mini-cart__drawer table.wc-block-mini-cart-items{ width: 100%; }
/* ---- line-item row: image | details | total, hairline between ---- */
.wc-block-mini-cart__drawer .wc-block-cart-items__row td{
vertical-align: top;
padding: 24px 0 !important;
border-bottom: 1px solid rgba(17,17,17,.08) !important;
}
.wc-block-mini-cart__drawer .wc-block-cart-items__row:last-child td{ border-bottom: 0 !important; }
/* image — mini-cart outputs a bare ![]()
AND a linked ![]()
; show only one.
The gap must out-specify the row rule `…__row td { padding: 24px 0 !important }`
(0,2,1), so it carries td. = (0,2,2). Matches the concept's 20px column gap. */
.wc-block-mini-cart__drawer .wc-block-cart-items__row td.wc-block-cart-item__image{
width: 76px;
padding-right: 20px !important;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__image > img{ display: none !important; }
.wc-block-mini-cart__drawer .wc-block-cart-item__image a img{
width: 76px; height: 92px; object-fit: cover; background: var(--jw-warm); display: block;
}
/* product name -> serif, no default underline */
.wc-block-mini-cart__drawer .wc-block-components-product-name{
font-family: var(--jw-serif) !important;
font-weight: 500 !important;
/* !important on size/leading too — WooCommerce's own rule
(table.wc-block-cart-items … .wc-block-components-product-name) is more
specific (0,3,1) and would otherwise pin the name to 14px. */
font-size: 20px !important;
line-height: 1.08 !important;
letter-spacing: -.005em !important;
color: var(--jw-text);
text-decoration: none;
display: inline-block;
}
.wc-block-mini-cart__drawer a.wc-block-components-product-name:hover{
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: .5px;
}
/* line total (right column) -> mono, once */
.wc-block-mini-cart__drawer .wc-block-cart-item__total{ text-align: right; padding-left: 14px !important; }
.wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-formatted-money-amount{
font-family: var(--jw-mono);
font-size: 14px;
font-weight: 400;
letter-spacing: .03em;
color: var(--jw-text);
font-variant-numeric: tabular-nums;
}
/* remove -> refined "Remove" text in place of the bin glyph */
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link{
margin-top: 14px !important;
font-family: var(--jw-mono) !important;
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--jw-ghost);
line-height: 1;
opacity: 1;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link svg{ display: none; }
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link::after{ content: "Remove"; }
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link:hover{
color: var(--jw-text);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: .5px;
}
/* ---- suppress the noise: unit price, marketing description, qty stepper, sale/backorder badges ----
(pieces are one-off / single-stock; quantity is adjusted on the full cart page) */
.wc-block-mini-cart__drawer .wc-block-cart-item__prices,
.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description,
.wc-block-mini-cart__drawer .wc-block-cart-item__quantity .wc-block-components-quantity-selector,
.wc-block-mini-cart__drawer .wc-block-components-sale-badge,
.wc-block-mini-cart__drawer .wc-block-components-product-price__regular{
display: none !important;
}
/* ---- attribute spec line (metal · gemstone), injected via woocommerce_get_item_data ---- */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata{ margin-top: 8px !important; }
.wc-block-mini-cart__drawer .wc-block-components-product-details{ margin: 0 !important; padding: 0 !important; }
.wc-block-mini-cart__drawer .wc-block-components-product-details__name{ display: none !important; }
.wc-block-mini-cart__drawer .wc-block-components-product-details,
.wc-block-mini-cart__drawer .wc-block-components-product-details li,
.wc-block-mini-cart__drawer .wc-block-components-product-details__value{
font-family: var(--jw-mono) !important;
font-size: 9px !important; /* tightened so metal · stone · stone fits one line */
font-style: normal !important;
font-weight: 400 !important;
letter-spacing: .03em !important;
text-transform: uppercase !important;
color: var(--jw-ghost) !important;
line-height: 1.5 !important;
list-style: none !important;
}
/* ---- footer: reassurance preamble, then subtotal + a clear primary CTA ---- */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer{
padding: 0 var(--mc-pad) 30px !important;
border-top: 0 !important;
}
/* reassurance block fills the space that used to be dead */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer::before{
content: "Insured UK delivery \A 14 Day returns";
white-space: pre-line;
display: block;
font-family: var(--jw-mono);
font-size: 10px;
line-height: 2.1;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--jw-text-2);
padding: 22px 0 24px;
border-top: 1px solid rgba(17,17,17,.08);
margin-bottom: 4px;
}
/* subtotal row */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal{
padding: 14px 0 0 !important;
border-top: 1px solid rgba(17,17,17,.12);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label{
font-family: var(--jw-sans) !important;
font-weight: 600;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--jw-text);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value{
font-family: var(--jw-mono) !important;
font-size: 16px;
font-weight: 400;
letter-spacing: .02em;
color: var(--jw-text);
font-variant-numeric: tabular-nums;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description{
font-family: var(--jw-sans) !important;
font-size: 11.5px;
line-height: 1.5;
color: var(--jw-text-2);
margin-top: 7px;
}
/* ---- actions: solid-black primary, quiet secondary text link ---- */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions{
display: flex;
flex-direction: column;
gap: 13px;
margin-top: 20px;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout{
order: 1;
width: 100%;
background: var(--jw-text) !important;
color: var(--jw-paper) !important;
border: 0 !important;
border-radius: 0 !important;
font-family: var(--jw-sans) !important;
font-weight: 600;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
padding: 15px 20px !important;
min-height: 0;
transition: background .2s var(--jw-ease);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover{ background: #000 !important; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart{
order: 2;
width: 100%;
background: none !important;
border: 0 !important;
color: var(--jw-text-2) !important;
font-family: var(--jw-mono) !important;
font-weight: 400;
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
padding: 4px !important;
min-height: 0;
text-decoration: none;
box-shadow: none !important;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart:hover{
color: var(--jw-text) !important;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: .5px;
background: none !important;
}
/* ---- empty state: keep it on-brand too ---- */
.wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper{ padding: 0 var(--mc-pad); }
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button{
background: var(--jw-text) !important;
color: var(--jw-paper) !important;
border: 0 !important;
border-radius: 0 !important;
font-family: var(--jw-sans) !important;
font-weight: 600;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
padding: 15px 24px !important;
}
@media (max-width: 480px){
.wc-block-mini-cart__drawer{ --mc-pad: 22px; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__title{ font-size: 27px; }
}