/* Bookzilla — WooCommerce presentation layer.
Wraps WooCommerce's own loop markup in the Bookzilla product-card design
so product rows are real dynamic queries, not rebuilt markup. */
/* ---------- rail ---------- */
.bz-rail-wrap{position:relative}
.bz-rail{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px;margin-inline:calc(var(--bz-pad) * -1);padding-inline:var(--bz-pad)}
.bz-rail::-webkit-scrollbar{display:none}
.bz-rail .woocommerce,.bz-rail .woocommerce-page{margin:0}
.bz-rail ul.products{display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * 18px) / 6);gap:18px;margin:0!important;padding:0!important;list-style:none!important;float:none!important}
.bz-rail ul.products::before,.bz-rail ul.products::after{display:none!important}
.bz-rail ul.products li.product{width:auto!important;margin:0!important;padding:0!important;float:none!important;clear:none!important;scroll-snap-align:start}
.bz-railnav{display:inline-flex;gap:8px}
.bz-railbtn{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;background:#fff;border:1px solid var(--bz-line-2);color:var(--bz-ink);cursor:pointer;transition:all var(--bz-t1)}
.bz-railbtn:hover:not(:disabled){border-color:var(--bz-teal);color:var(--bz-teal);transform:translateY(-1px);box-shadow:var(--bz-sh-sm)}
.bz-railbtn:disabled{opacity:.35;cursor:default}
.bz-railbtn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.6;fill:none}
/* ---------- product card ---------- */
.bz-rail ul.products li.product,
.bz-pgrid ul.products li.product{
position:relative;background:#fff;border:1px solid var(--bz-line);border-radius:var(--bz-r);
overflow:hidden;display:flex;flex-direction:column;
box-shadow:var(--bz-sh-sm);transition:transform var(--bz-t2),box-shadow var(--bz-t2),border-color var(--bz-t2);text-align:left!important}
.bz-rail ul.products li.product:hover,
.bz-pgrid ul.products li.product:hover{transform:translateY(-7px);box-shadow:var(--bz-sh-lg);border-color:transparent}
.bz-rail li.product a.woocommerce-loop-product__link,
.bz-pgrid li.product a.woocommerce-loop-product__link{display:flex;flex-direction:column;height:100%}
.bz-rail li.product img,.bz-pgrid li.product img{width:100%!important;aspect-ratio:2/3;object-fit:cover;display:block;margin:0!important;border-radius:0!important;background:var(--bz-surface-2)}
.bz-rail li.product .woocommerce-loop-product__title,
.bz-pgrid li.product .woocommerce-loop-product__title{
font-family:var(--bz-ff-d);font-size:14px!important;font-weight:700;line-height:1.32;color:var(--bz-ink);
padding:14px 14px 0!important;margin:0!important;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.32em + 14px)}
.bz-rail li.product .price,.bz-pgrid li.product .price{
font-family:var(--bz-ff-d);font-size:17px!important;font-weight:800;color:var(--bz-ink)!important;
padding:8px 14px 14px!important;margin:0!important;margin-top:auto!important;display:block}
.bz-rail li.product .price del,.bz-pgrid li.product .price del{font-size:13px;font-weight:600;color:var(--bz-muted-2);opacity:1;margin-right:6px}
.bz-rail li.product .price ins,.bz-pgrid li.product .price ins{text-decoration:none;color:var(--bz-rose)}
.bz-rail li.product span.onsale,.bz-pgrid li.product span.onsale{
position:absolute;top:10px;left:10px;z-index:2;margin:0!important;padding:.28rem .6rem!important;
min-height:0!important;min-width:0!important;line-height:1.2!important;border-radius:999px!important;
background:var(--bz-rose-100)!important;color:#9F1046!important;
font-family:var(--bz-ff);font-size:10.5px!important;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.bz-rail li.product a.button,.bz-pgrid li.product a.button{
position:absolute;right:10px;bottom:10px;z-index:2;
width:36px;height:36px;padding:0!important;margin:0!important;border-radius:10px!important;
background:var(--bz-teal)!important;color:#fff!important;font-size:0!important;overflow:hidden;
display:grid;place-items:center;transition:background var(--bz-t1),transform var(--bz-t1)}
.bz-rail li.product a.button::before,.bz-pgrid li.product a.button::before{content:"+";font-size:22px;font-weight:600;line-height:1;color:#fff}
.bz-rail li.product a.button:hover,.bz-pgrid li.product a.button:hover{background:var(--bz-teal-600)!important;transform:translateY(-1px)}
.bz-rail li.product a.added_to_cart{position:absolute;right:54px;bottom:14px;z-index:2;font-size:11.5px;font-weight:700;color:var(--bz-teal)}
.bz-rail li.product .star-rating,.bz-pgrid li.product .star-rating{margin:0 14px 4px!important;font-size:12px!important;color:var(--bz-amber)}
/* grid variant (category / shop pages) */
.bz-pgrid ul.products{display:grid!important;grid-template-columns:repeat(6,1fr);gap:18px;margin:0!important;padding:0!important;list-style:none!important}
.bz-pgrid ul.products::before,.bz-pgrid ul.products::after{display:none!important}
.bz-pgrid ul.products li.product{width:auto!important;margin:0!important;float:none!important}
/* empty state */
.bz-empty{padding:34px;border:1px dashed var(--bz-line-2);border-radius:var(--bz-r);text-align:center;color:var(--bz-muted);font-size:14px;background:var(--bz-surface)}
@media(max-width:1199px){
.bz-rail ul.products{grid-auto-columns:calc((100% - 3 * 18px) / 4)}
.bz-pgrid ul.products{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:900px){
.bz-rail ul.products{grid-auto-columns:calc((100% - 2 * 16px) / 3)}
.bz-pgrid ul.products{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:767px){
.bz-rail ul.products{grid-auto-columns:56%;gap:14px}
.bz-pgrid ul.products{grid-template-columns:repeat(2,1fr);gap:14px}
.bz-railnav{display:none}
}
/* ---------- hero ---------- */
.bz-hero{padding-block:clamp(18px,2.4vw,30px)}
.bz-car{position:relative;border-radius:var(--bz-r-xl);overflow:hidden;background:var(--bz-surface)}
.bz-track{display:flex;transition:transform .55s var(--bz-ease)}
@media(prefers-reduced-motion:reduce){.bz-track{transition:none}}
.bz-slide{flex:0 0 100%;position:relative;display:flex;align-items:center;min-height:clamp(360px,31vw,452px);padding:clamp(26px,3.2vw,52px);background:var(--sbg,var(--bz-surface));overflow:hidden}
.bz-slide__copy{position:relative;z-index:3;max-width:min(100%,33rem)}
.bz-slide__copy h1,.bz-slide__copy h2{color:var(--sfg,var(--bz-ink));margin:0 0 12px}
.bz-slide__copy h1 em,.bz-slide__copy h2 em{display:block;color:var(--sacc,var(--bz-teal));font-style:italic}
.bz-slide__copy p{color:var(--sbody,var(--bz-ink-2));font-size:15px;max-width:46ch;margin:0 0 18px}
.bz-eyebrow--slide{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--stag,var(--bz-teal));padding:.3rem .7rem;border-radius:999px;margin-bottom:14px}
.bz-slide__cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.bz-slide__ticks{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;font-weight:650;color:var(--sbody,var(--bz-ink-2))}
.bz-slide__ticks span{display:inline-flex;align-items:center;gap:6px}
.bz-slide__ticks svg{width:14px;height:14px;stroke:currentColor;stroke-width:3;fill:none}
.bz-slide__art{position:absolute;z-index:1;right:0;top:0;bottom:0;width:56%;display:none;pointer-events:none}
.bz-slide__art img{width:100%;height:100%;object-fit:cover;display:block}
.bz-slide__art--ph{background:linear-gradient(135deg,var(--sacc,#0E6E6B) 0%,var(--sbg,#eee) 78%);opacity:.5}
@media(min-width:940px){.bz-slide__art{display:block;-webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.45) 12%,#000 34%);mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.45) 12%,#000 34%)}}
.bz-carnav{position:absolute;left:0;right:0;bottom:14px;z-index:4;display:flex;align-items:center;justify-content:center;gap:12px}
.bz-carbtn{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(32,36,44,.10);color:var(--bz-ink);cursor:pointer}
.bz-carbtn:hover{background:#fff;box-shadow:var(--bz-sh-sm)}
.bz-carbtn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.6;fill:none}
.bz-cardots{display:flex;gap:6px}
.bz-cardot{width:8px;height:8px;border-radius:999px;border:0;background:rgba(32,36,44,.22);cursor:pointer;padding:0;transition:all var(--bz-t1)}
.bz-cardot[aria-selected="true"]{width:22px;background:var(--bz-ink)}
/* ---------- back to top ---------- */
.bz-totop{position:fixed;left:20px;bottom:20px;z-index:60;display:none;place-items:center;width:44px;height:44px;border-radius:999px;background:#fff;border:1px solid var(--bz-line-2);color:var(--bz-ink);cursor:pointer;box-shadow:var(--bz-sh)}
.bz-totop.is-on{display:grid}
.bz-totop svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.6;fill:none}
/* ---------- CARD META ----------
Uppercase department label above the title, optional author line beneath.
Both sit inside the same padding rhythm as the title and price. */
.bz-rail li.product .bz-cardcat,.bz-pgrid li.product .bz-cardcat{display:block;padding:14px 14px 0;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--bz-muted-2);line-height:1.3}
.bz-rail li.product .bz-cardcat+.woocommerce-loop-product__title,.bz-pgrid li.product .bz-cardcat+.woocommerce-loop-product__title{padding-top:5px!important;min-height:calc(2 * 1.32em)}
.bz-rail li.product .bz-cardby,.bz-pgrid li.product .bz-cardby{display:block;padding:3px 14px 0;font-size:12px;color:var(--bz-muted);line-height:1.4}
/* ---------- RAIL CHEVRONS ----------
The controls sit on the section head's baseline next to the View all link.
place-items alone left the glyph a touch high and right-heavy inside the
circle, so the SVG is centred explicitly and nudged optically. */
.bz-sec-head{align-items:center}
.bz-railnav{display:inline-flex;gap:8px;align-items:center;flex:0 0 auto}
.bz-railbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;line-height:0;flex:0 0 auto}
.bz-railbtn svg{width:16px;height:16px;display:block}
.bz-railbtn[data-bz-rn] svg{margin-left:1px}
.bz-railbtn[data-bz-rp] svg{margin-right:1px}
.bz-viewall{align-self:center}
/* ---------- NEWSLETTER BUTTON ----------
MailPoet renders its submit as an , which cannot take a pseudo
element, so the envelope is a background image with matching padding. */
.bz-news .mailpoet_submit{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%274%27 width=%2720%27 height=%2716%27 rx=%272%27/%3E%3Cpath d=%27m2 7 10 6 10-6%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(50% - 62px) 50%;background-size:18px 18px;padding-left:22px!important}
.bz-news .mailpoet_submit:hover{background-color:var(--bz-orange-600)!important}
/* ---------- CARD BADGE ---------- */
.bz-rail li.product .bz-badge,.bz-pgrid li.product .bz-badge{position:absolute;top:10px;left:10px;z-index:2;padding:.28rem .6rem;border-radius:999px;font-family:var(--bz-ff);font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.25}
.bz-badge--sale{background:var(--bz-rose-100);color:#9F1046}
.bz-badge--new{background:var(--bz-green-100);color:#0A6B4A}
.bz-badge--used{background:var(--bz-amber-50);color:#8A4B06}
.bz-badge--best{background:var(--bz-orange-100);color:var(--bz-orange-700)}
/* ---------- HOVER ADD TO CART ----------
The bar has to sit at the foot of the cover, whose height is the card
width x 1.5 from its 2:3 ratio. A container query gives that exactly,
so the bar lands on the image edge at every column count. */
.bz-rail li.product,.bz-pgrid li.product{container-type:inline-size}
.bz-rail li.product a.bz-hovercart,.bz-pgrid li.product a.bz-hovercart{
position:absolute;left:12px;right:12px;top:calc(100cqw * 1.5 - 56px);z-index:3;
display:flex;align-items:center;justify-content:center;gap:8px;
height:44px;padding:0 14px!important;margin:0!important;border-radius:10px!important;
background:var(--bz-teal)!important;color:#fff!important;
font-family:var(--bz-ff);font-size:14px!important;font-weight:700;line-height:1;
box-shadow:0 8px 20px rgba(14,110,107,.30);
opacity:0;transform:translateY(8px);pointer-events:none;
transition:opacity var(--bz-t2),transform var(--bz-t2),background var(--bz-t1);
}
.bz-rail li.product a.bz-hovercart svg,.bz-pgrid li.product a.bz-hovercart svg{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none}
.bz-rail li.product a.bz-hovercart::before,.bz-pgrid li.product a.bz-hovercart::before{content:none}
.bz-rail li.product:hover a.bz-hovercart,.bz-rail li.product:focus-within a.bz-hovercart,
.bz-pgrid li.product:hover a.bz-hovercart,.bz-pgrid li.product:focus-within a.bz-hovercart{opacity:1;transform:none;pointer-events:auto}
.bz-rail li.product a.bz-hovercart:hover,.bz-pgrid li.product a.bz-hovercart:hover{background:var(--bz-teal-600)!important}
.bz-rail li.product a.bz-hovercart.loading,.bz-pgrid li.product a.bz-hovercart.loading{opacity:1;pointer-events:auto}
/* the always-on plus button keeps its own look and must not inherit the bar */
.bz-rail li.product a.button:not(.bz-hovercart),.bz-pgrid li.product a.button:not(.bz-hovercart){z-index:4}
.bz-rail li.product a.added_to_cart,.bz-pgrid li.product a.added_to_cart{display:none}
@media(hover:none){.bz-rail li.product a.bz-hovercart,.bz-pgrid li.product a.bz-hovercart{display:none}}
/* ---------- RAIL: EXACTLY SIX ----------
The rail used to bleed past the content wrapper with a negative margin,
which is what put a seventh card half off the screen. Sitting flush in
the wrapper, six columns fill the row exactly and the next card is fully
off-canvas until you scroll. */
.bz-rail{margin-inline:0;padding-inline:0;padding-block:4px 8px}
.bz-rail ul.products{grid-auto-columns:calc((100% - 5 * 18px) / 6)}
@media(max-width:1199px){.bz-rail ul.products{grid-auto-columns:calc((100% - 3 * 18px) / 4)}}
@media(max-width:900px){.bz-rail ul.products{grid-auto-columns:calc((100% - 2 * 16px) / 3)}}
@media(max-width:767px){.bz-rail{margin-inline:calc(var(--bz-pad) * -1);padding-inline:var(--bz-pad)}.bz-rail ul.products{grid-auto-columns:58%}}
/* ---------- QUICK-ADD BUTTON + PRICE ----------
Values lifted verbatim from .pc-add and .pc-price in the v5.6 storefront:
36px square, 6px radius, pale surface at rest, warming to orange-50 when
the card is hovered and to solid orange when the button itself is. The
glyph is a mask rather than a background image so it inherits colour. */
.bz-rail li.product a.button:not(.bz-hovercart),.bz-pgrid li.product a.button:not(.bz-hovercart){
position:absolute;right:14px;bottom:14px;z-index:4;
width:36px;height:36px;padding:0!important;margin:0!important;
border-radius:var(--bz-r-xs)!important;
background-color:var(--bz-surface)!important;background-image:none!important;
color:var(--bz-ink)!important;
display:grid;place-items:center;font-size:0!important;line-height:0!important;
box-shadow:none!important;
transition:background-color var(--bz-t1),color var(--bz-t1),transform var(--bz-t1);
}
.bz-rail li.product a.button:not(.bz-hovercart)::before,.bz-pgrid li.product a.button:not(.bz-hovercart)::before{content:none!important}
.bz-rail li.product a.button:not(.bz-hovercart)::after,.bz-pgrid li.product a.button:not(.bz-hovercart)::after{
content:"";width:17px;height:17px;background-color:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M12 5v14M5 12h14%27/%3E%3C/svg%3E") no-repeat center;-webkit-mask-size:17px 17px;
mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M12 5v14M5 12h14%27/%3E%3C/svg%3E") no-repeat center;mask-size:17px 17px;
}
.bz-rail li.product:hover a.button:not(.bz-hovercart),.bz-pgrid li.product:hover a.button:not(.bz-hovercart){
background-color:var(--bz-orange-50)!important;color:var(--bz-orange-700)!important;transform:none;
}
.bz-rail li.product a.button:not(.bz-hovercart):hover,.bz-pgrid li.product a.button:not(.bz-hovercart):hover{
background-color:var(--bz-orange)!important;color:#fff!important;transform:scale(1.1);
}
.bz-rail li.product .price,.bz-pgrid li.product .price{
font-weight:800!important;color:var(--bz-ink)!important;letter-spacing:-.02em;
transform-origin:left center;
transition:transform .28s var(--bz-ease),color .2s var(--bz-ease);
}
.bz-rail li.product:hover .price,.bz-pgrid li.product:hover .price{
transform:scale(1.075);color:var(--bz-orange-700)!important;
}
.bz-rail li.product:hover .price ins,.bz-pgrid li.product:hover .price ins{color:var(--bz-orange-700)}
.bz-rail li.product:hover .woocommerce-loop-product__title,.bz-pgrid li.product:hover .woocommerce-loop-product__title{color:var(--bz-orange-700)}
@media(prefers-reduced-motion:reduce){
.bz-rail li.product .price,.bz-pgrid li.product .price,
.bz-rail li.product a.button:not(.bz-hovercart),.bz-pgrid li.product a.button:not(.bz-hovercart){transition:none;transform:none!important}
}
.xpro-hidden,.xpro-theme-builder-header>.main-title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
/* ============================================================
PRODUCT ARCHIVES
------------------------------------------------------------
The shop, the category and tag archives and product search had
no Bookzilla styling at all: the grid wrapper was never output,
and Hello Elementor gives .site-main no width, so those pages
ran edge to edge in stock WooCommerce dress. This gives them the
same content column, the same page-header rhythm and the same
controls as the ported pages.
Everything is scoped to body.bz-shop, a class the theme adds on
product archives only, so the cart, the checkout and the account
pages -- WooCommerce pages too -- are untouched.
============================================================ */
/* the same column the rest of the site sits in */
body.bz-shop main.site-main{
width:100%;max-width:var(--bz-maxw);margin-inline:auto;
padding-inline:var(--bz-pad);
padding-block:clamp(22px,2.4vw,40px) clamp(40px,4vw,80px);
}
/* ---------- page header ---------- */
body.bz-shop .woocommerce-breadcrumb{
display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
margin:0 0 .85rem;padding:0;
font-size:.8rem;font-weight:600;color:var(--bz-muted-2);
}
body.bz-shop .woocommerce-breadcrumb a{color:inherit;text-decoration:none}
body.bz-shop .woocommerce-breadcrumb a:hover{color:var(--bz-orange-700)}
body.bz-shop .woocommerce-products-header{
margin:0 0 clamp(20px,2vw,32px);
padding:0 0 clamp(20px,2vw,32px);
border-bottom:1px solid var(--bz-line);
}
body.bz-shop .woocommerce-products-header__title{
margin:0;max-width:20ch;
font-family:var(--bz-ff-d);
font-size:clamp(2rem,1.4rem + 2.4vw,3.15rem);
font-weight:800;letter-spacing:-.032em;line-height:1.06;
color:var(--bz-ink);
}
body.bz-shop .term-description{
margin-top:.7rem;max-width:64ch;
font-size:clamp(1rem,.96rem + .22vw,1.09rem);
line-height:1.62;color:var(--bz-muted);
}
body.bz-shop .term-description p{margin:0}
body.bz-shop .term-description p + p{margin-top:.6rem}
/* ---------- the toolbar: count on the left, sort on the right ---------- */
body.bz-shop .bz-shoptools{
display:flex;align-items:center;justify-content:space-between;
gap:16px;flex-wrap:wrap;
margin:0 0 clamp(16px,1.6vw,24px);
}
body.bz-shop .bz-shoptools:empty{display:none}
body.bz-shop .woocommerce-result-count{
float:none!important;margin:0!important;
font-size:.86rem;color:var(--bz-muted);
}
body.bz-shop .woocommerce-ordering{float:none!important;margin:0!important}
body.bz-shop .woocommerce-ordering select.orderby{
min-height:42px;padding:.5rem 2.4rem .5rem .85rem;
border:1.5px solid var(--bz-line-2);border-radius:var(--bz-r-sm);
background-color:#fff;color:var(--bz-ink);
font-family:var(--bz-ff);font-size:.88rem;font-weight:600;
cursor:pointer;-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right .7rem center;background-size:15px 15px;
transition:border-color var(--bz-t1),box-shadow var(--bz-t1);
}
body.bz-shop .woocommerce-ordering select.orderby:focus{
outline:none;border-color:var(--bz-orange);box-shadow:0 0 0 3px var(--bz-orange-100);
}
/* ---------- pagination ---------- */
body.bz-shop .woocommerce-pagination{margin-top:clamp(24px,2.4vw,40px);text-align:center}
body.bz-shop .woocommerce-pagination ul.page-numbers{
display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
list-style:none;margin:0;padding:0;border:0;
}
body.bz-shop .woocommerce-pagination ul.page-numbers li{border:0;margin:0;padding:0;overflow:visible}
body.bz-shop .woocommerce-pagination .page-numbers{
display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 .7rem;margin:0;
border:1px solid var(--bz-line);border-radius:var(--bz-r-xs);
background:#fff;color:var(--bz-ink-2);
font-family:var(--bz-ff);font-weight:700;font-size:.9rem;line-height:1;
text-decoration:none;
transition:background var(--bz-t1),color var(--bz-t1),border-color var(--bz-t1);
}
body.bz-shop .woocommerce-pagination .page-numbers:hover{
background:var(--bz-orange-50);border-color:var(--bz-orange-200);color:var(--bz-orange-700);
}
body.bz-shop .woocommerce-pagination .page-numbers.current{
background:var(--bz-orange);border-color:var(--bz-orange);color:#fff;
}
body.bz-shop .woocommerce-pagination .page-numbers.dots{
background:none;border-color:transparent;color:var(--bz-muted-2);min-width:24px;padding:0;
}
body.bz-shop .woocommerce-pagination .page-numbers.dots:hover{
background:none;border-color:transparent;color:var(--bz-muted-2);
}
/* ---------- nothing found ---------- */
body.bz-shop .woocommerce-info,
body.bz-shop .woocommerce-no-products-found .woocommerce-info{
display:flex;align-items:flex-start;gap:.8rem;
margin:0 0 1.3rem;padding:1rem 1.2rem;
background:var(--bz-orange-50);
border:1px solid var(--bz-orange-200);border-top:1px solid var(--bz-orange-200);
border-radius:var(--bz-r-sm);
color:var(--bz-ink);font-size:.95rem;line-height:1.55;list-style:none;
}
body.bz-shop .woocommerce-info::before{
content:"";position:static;flex:none;font-size:0;
width:20px;height:20px;margin:.12rem 0 0;top:auto;left:auto;
background-color:var(--bz-orange-700);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ---------- related products and cross-sells ---------- */
.related.products > h2,
.up-sells.upsells.products > h2,
.cross-sells > h2{
font-family:var(--bz-ff-d);font-size:clamp(1.55rem,1.25rem + 1.35vw,2.2rem);
font-weight:800;letter-spacing:-.026em;color:var(--bz-ink);
margin:0 0 clamp(18px,1.8vw,28px);
}
/* ---------- a rail is never a grid ----------
Insurance only. The wrapper is not applied inside rails, but if one ever
ends up there the horizontal scroller must still win. */
.bz-rail .bz-pgrid ul.products{
grid-auto-flow:column;
grid-template-columns:none!important;
grid-auto-columns:calc((100% - 5 * 18px) / 6);
}
@media(max-width:1199px){.bz-rail .bz-pgrid ul.products{grid-auto-columns:calc((100% - 3 * 18px) / 4)}}
@media(max-width:900px){.bz-rail .bz-pgrid ul.products{grid-auto-columns:calc((100% - 2 * 16px) / 3)}}
@media(max-width:767px){.bz-rail .bz-pgrid ul.products{grid-auto-columns:58%}}
/* ============================================================
SHOP PAGES -- product, cart, checkout, account
------------------------------------------------------------
These four were the last of the site still in stock WooCommerce
dress. Hello Elementor gives .site-main no width, so they ran
edge to edge, and nothing in the design system reached Woo's own
forms, tables or buttons.
Each block is scoped to the body class WooCommerce sets for that
page, so nothing here can travel. Selectors carry div.product or
an equivalent extra step where WooCommerce's own rules are
specific enough to need answering.
============================================================ */
/* ---------- the content column, shared by all four ---------- */
body.single-product main.site-main,
body.woocommerce-cart main.site-main,
body.woocommerce-checkout main.site-main,
body.woocommerce-account main.site-main{
width:100%;max-width:var(--bz-maxw);margin-inline:auto;
padding-inline:var(--bz-pad);
padding-block:clamp(22px,2.4vw,40px) clamp(40px,4vw,80px);
}
body.single-product .woocommerce-breadcrumb,
body.woocommerce-cart .woocommerce-breadcrumb,
body.woocommerce-checkout .woocommerce-breadcrumb,
body.woocommerce-account .woocommerce-breadcrumb{
display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
margin:0 0 1rem;padding:0;
font-size:.8rem;font-weight:600;color:var(--bz-muted-2);
}
body.single-product .woocommerce-breadcrumb a:hover,
body.woocommerce-cart .woocommerce-breadcrumb a:hover,
body.woocommerce-checkout .woocommerce-breadcrumb a:hover,
body.woocommerce-account .woocommerce-breadcrumb a:hover{color:var(--bz-orange-700)}
/* the page heading on cart, checkout and account */
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-account .entry-title{
font-family:var(--bz-ff-d);
font-size:clamp(2rem,1.4rem + 2.4vw,3.15rem);
font-weight:800;letter-spacing:-.032em;line-height:1.06;
color:var(--bz-ink);
margin:0 0 clamp(22px,2.2vw,36px);
}
/* ---------- form controls, shared ---------- */
body.woocommerce-cart .input-text,
body.woocommerce-checkout .input-text,
body.woocommerce-account .input-text,
body.woocommerce-checkout .select2-selection,
body.woocommerce-checkout select,
body.woocommerce-account select,
body.woocommerce-checkout textarea,
body.woocommerce-account textarea{
width:100%;min-height:46px;padding:.6rem .85rem;
border:1.5px solid var(--bz-line-2);border-radius:var(--bz-r-sm);
background:#fff;color:var(--bz-ink);
font-family:var(--bz-ff);font-size:.94rem;line-height:1.4;
transition:border-color var(--bz-t1),box-shadow var(--bz-t1);
}
body.woocommerce-cart .input-text:focus,
body.woocommerce-checkout .input-text:focus,
body.woocommerce-account .input-text:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-account select:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-account textarea:focus{
outline:none;border-color:var(--bz-orange);box-shadow:0 0 0 3px var(--bz-orange-100);
}
body.woocommerce-checkout textarea,
body.woocommerce-account textarea{min-height:110px;resize:vertical}
body.woocommerce-checkout .form-row label,
body.woocommerce-account .woocommerce-form__label,
body.woocommerce-account .form-row label{
display:block;margin-bottom:.35rem;
font-size:.84rem;font-weight:700;color:var(--bz-ink);
}
body.woocommerce-checkout .form-row,
body.woocommerce-account .form-row{margin:0 0 1rem;padding:0}
body.woocommerce-checkout .required,
body.woocommerce-account .required{color:var(--bz-rose);text-decoration:none;border:0}
/* ---------- buttons, shared ----------
Named one by one on purpose: a blanket .button rule would repaint
the quick-add plus on every product tile. */
body.single-product div.product .single_add_to_cart_button,
body.woocommerce-cart .checkout-button,
body.woocommerce-cart .return-to-shop .button,
body.woocommerce-cart .actions button[name="apply_coupon"],
body.woocommerce-cart .actions button[name="update_cart"],
body.woocommerce-checkout #place_order,
body.woocommerce-account .woocommerce-Button,
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register__submit,
body.woocommerce-account .woocommerce-MyAccount-content .button{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
min-height:48px;padding:.75rem 1.5rem;
border-radius:var(--bz-r-sm);
background:var(--bz-orange);color:#fff;
border:1.5px solid transparent;
font-family:var(--bz-ff);font-weight:700;font-size:.95rem;line-height:1.2;
letter-spacing:-.005em;text-decoration:none;text-shadow:none;cursor:pointer;
transition:background var(--bz-t1),color var(--bz-t1),
border-color var(--bz-t1),transform var(--bz-t1),box-shadow var(--bz-t1);
}
body.single-product div.product .single_add_to_cart_button:hover,
body.woocommerce-cart .checkout-button:hover,
body.woocommerce-cart .return-to-shop .button:hover,
body.woocommerce-checkout #place_order:hover,
body.woocommerce-account .woocommerce-Button:hover,
body.woocommerce-account .woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce-form-register__submit:hover,
body.woocommerce-account .woocommerce-MyAccount-content .button:hover{
background:var(--bz-orange-600);color:#fff;
transform:translateY(-1px);box-shadow:var(--bz-sh-sm);
}
/* the two quiet ones next to the cart table */
body.woocommerce-cart .actions button[name="apply_coupon"],
body.woocommerce-cart .actions button[name="update_cart"]{
background:#fff;color:var(--bz-ink);border-color:var(--bz-line-2);min-height:46px;
}
body.woocommerce-cart .actions button[name="apply_coupon"]:hover,
body.woocommerce-cart .actions button[name="update_cart"]:hover{
background:var(--bz-surface);color:var(--bz-ink);border-color:var(--bz-ink);
}
body.woocommerce-cart .actions button[disabled]{opacity:.45;cursor:not-allowed}
/* ---------- SINGLE PRODUCT ---------- */
body.single-product div.product{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(24px,3vw,56px);align-items:start;
}
body.single-product div.product > .woocommerce-tabs,
body.single-product div.product > .related,
body.single-product div.product > .up-sells,
body.single-product div.product > .woocommerce-product-gallery + .entry-summary ~ *{grid-column:1 / -1}
body.single-product div.product .woocommerce-product-gallery,
body.single-product div.product .entry-summary{
width:auto!important;float:none!important;margin:0!important;
}
body.single-product div.product .woocommerce-product-gallery__wrapper img{
border-radius:var(--bz-r);border:1px solid var(--bz-line);background:var(--bz-surface-2);
}
body.single-product div.product .entry-summary .product_title{
font-family:var(--bz-ff-d);
font-size:clamp(1.7rem,1.25rem + 1.6vw,2.5rem);
font-weight:800;letter-spacing:-.028em;line-height:1.1;
color:var(--bz-ink);margin:0 0 .7rem;
}
body.single-product div.product .entry-summary p.price,
body.single-product div.product .entry-summary span.price{
font-family:var(--bz-ff-d);
font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);
font-weight:800;letter-spacing:-.02em;color:var(--bz-ink);
margin:0 0 1rem;
}
body.single-product div.product .entry-summary p.price del{
color:var(--bz-muted-2);font-weight:600;font-size:.62em;margin-right:.45rem;opacity:1;
}
body.single-product div.product .entry-summary p.price ins{text-decoration:none;color:var(--bz-rose)}
body.single-product div.product .woocommerce-product-details__short-description{
color:var(--bz-ink-2);font-size:1rem;line-height:1.62;max-width:60ch;
}
body.single-product div.product .woocommerce-product-details__short-description p{margin:0 0 .7rem}
body.single-product div.product .entry-summary p.stock{
display:inline-flex;align-items:center;gap:.4rem;margin:0 0 1rem;
padding:.3rem .68rem;border-radius:var(--bz-r-pill);
font-size:.78rem;font-weight:700;line-height:1.2;
background:var(--bz-green-50);color:var(--bz-green);
}
body.single-product div.product .entry-summary p.stock.out-of-stock{
background:var(--bz-rose-50);color:var(--bz-rose);
}
body.single-product div.product form.cart{
display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin:1.3rem 0 0;
}
body.single-product div.product form.cart .quantity{margin:0;float:none}
body.single-product div.product form.cart .quantity input.qty{
width:88px;min-height:48px;padding:.6rem .5rem;text-align:center;
border:1.5px solid var(--bz-line-2);border-radius:var(--bz-r-sm);
background:#fff;color:var(--bz-ink);
font-family:var(--bz-ff);font-weight:700;font-size:.95rem;
}
body.single-product div.product form.cart .quantity input.qty:focus{
outline:none;border-color:var(--bz-orange);box-shadow:0 0 0 3px var(--bz-orange-100);
}
body.single-product div.product .product_meta{
margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--bz-line);
font-size:.86rem;color:var(--bz-muted);display:grid;gap:.4rem;
}
body.single-product div.product .product_meta > span{display:block}
body.single-product div.product .product_meta a{color:var(--bz-ink-2);font-weight:600}
body.single-product div.product .product_meta a:hover{color:var(--bz-orange-700)}
/* tabs */
body.single-product div.product .woocommerce-tabs{margin-top:clamp(32px,3.2vw,56px)}
body.single-product div.product .woocommerce-tabs ul.tabs{
display:flex;flex-wrap:wrap;gap:.4rem;
margin:0 0 1.5rem;padding:0 0 .7rem;
border-bottom:1px solid var(--bz-line);list-style:none;
}
body.single-product div.product .woocommerce-tabs ul.tabs::before,
body.single-product div.product .woocommerce-tabs ul.tabs::after{display:none;content:none}
body.single-product div.product .woocommerce-tabs ul.tabs li{
margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;
}
body.single-product div.product .woocommerce-tabs ul.tabs li::before,
body.single-product div.product .woocommerce-tabs ul.tabs li::after{
display:none!important;content:none!important;border:0!important;box-shadow:none!important;
}
body.single-product div.product .woocommerce-tabs ul.tabs li a{
display:inline-flex;align-items:center;min-height:40px;padding:0 1.05rem;
border-radius:var(--bz-r-pill);
font-family:var(--bz-ff);font-weight:700;font-size:.9rem;
color:var(--bz-muted);text-decoration:none;
transition:background var(--bz-t1),color var(--bz-t1);
}
body.single-product div.product .woocommerce-tabs ul.tabs li a:hover{
color:var(--bz-ink);background:var(--bz-surface);
}
body.single-product div.product .woocommerce-tabs ul.tabs li.active a{
background:var(--bz-orange-50);color:var(--bz-orange-700);
}
body.single-product div.product .woocommerce-tabs .panel > h2:first-child{
font-family:var(--bz-ff-d);font-size:1.35rem;font-weight:800;
letter-spacing:-.02em;color:var(--bz-ink);margin:0 0 .8rem;
}
body.single-product div.product .woocommerce-tabs .panel{
color:var(--bz-ink-2);line-height:1.68;max-width:78ch;
}
body.single-product div.product .woocommerce-tabs .panel p{margin:0 0 .85rem}
/* attributes */
body.single-product div.product .shop_attributes{
width:100%;margin:0;border-collapse:separate;border-spacing:0;
border:1px solid var(--bz-line);border-radius:var(--bz-r);overflow:hidden;background:#fff;
}
body.single-product div.product .shop_attributes th,
body.single-product div.product .shop_attributes td{
padding:.85rem 1rem;border:0;border-bottom:1px solid var(--bz-line);
font-size:.92rem;font-style:normal;
}
body.single-product div.product .shop_attributes tr:last-child th,
body.single-product div.product .shop_attributes tr:last-child td{border-bottom:0}
body.single-product div.product .shop_attributes th{
width:220px;text-align:left;background:var(--bz-surface);
color:var(--bz-ink);font-weight:700;
}
body.single-product div.product .shop_attributes td p{margin:0}
/* reviews */
body.single-product div.product .woocommerce-Reviews-title,
body.single-product div.product #reply-title{
font-family:var(--bz-ff-d);font-size:1.2rem;font-weight:800;
letter-spacing:-.02em;color:var(--bz-ink);margin:0 0 .8rem;
}
body.single-product div.product .woocommerce-noreviews{
color:var(--bz-muted);font-size:.95rem;
}
@media(max-width:900px){
body.single-product div.product{grid-template-columns:minmax(0,1fr);gap:24px}
}
/* ---------- shop tables, shared by cart, checkout and account ---------- */
body.woocommerce-cart table.shop_table,
body.woocommerce-checkout table.shop_table,
body.woocommerce-account table.shop_table{
width:100%;margin:0;
border-collapse:separate;border-spacing:0;
background:#fff;border:1px solid var(--bz-line);
border-radius:var(--bz-r);overflow:hidden;
box-shadow:var(--bz-sh-sm);
}
body.woocommerce-cart table.shop_table thead th,
body.woocommerce-checkout table.shop_table thead th,
body.woocommerce-account table.shop_table thead th{
padding:.85rem 1rem;border:0;border-bottom:1px solid var(--bz-line);
background:var(--bz-surface);
font-family:var(--bz-ff);font-size:.7rem;font-weight:800;
letter-spacing:.11em;text-transform:uppercase;color:var(--bz-muted-2);
text-align:left;white-space:nowrap;
}
body.woocommerce-cart table.shop_table td,
body.woocommerce-checkout table.shop_table td,
body.woocommerce-account table.shop_table td,
body.woocommerce-cart table.shop_table tbody th,
body.woocommerce-checkout table.shop_table tbody th{
padding:1rem;border:0;border-bottom:1px solid var(--bz-line);
vertical-align:middle;font-size:.94rem;color:var(--bz-ink-2);
}
body.woocommerce-cart table.shop_table tr:last-child td,
body.woocommerce-checkout table.shop_table tfoot tr:last-child td,
body.woocommerce-checkout table.shop_table tfoot tr:last-child th,
body.woocommerce-account table.shop_table tr:last-child td{border-bottom:0}
/* ---------- CART ---------- */
body.woocommerce-cart div.woocommerce:has(.woocommerce-cart-form){
display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
gap:clamp(20px,2.4vw,40px);align-items:start;
}
body.woocommerce-cart div.woocommerce > .woocommerce-notices-wrapper{grid-column:1 / -1}
body.woocommerce-cart .woocommerce-cart-form{margin:0}
body.woocommerce-cart .cart-collaterals{width:auto!important;float:none!important;margin:0}
body.woocommerce-cart .cart-collaterals .cart_totals{width:auto!important;float:none!important}
body.woocommerce-cart table.cart td.product-thumbnail{width:96px}
body.woocommerce-cart table.cart td.product-thumbnail img{
width:64px;height:92px;object-fit:cover;display:block;
border-radius:var(--bz-r-xs);background:var(--bz-surface-2);box-shadow:var(--bz-sh-sm);
}
body.woocommerce-cart table.cart td.product-name a{
font-family:var(--bz-ff-d);font-weight:750;color:var(--bz-ink);
font-size:.98rem;line-height:1.35;text-decoration:none;
}
body.woocommerce-cart table.cart td.product-name a:hover{color:var(--bz-orange-700)}
body.woocommerce-cart table.cart td.product-price,
body.woocommerce-cart table.cart td.product-subtotal{
font-family:var(--bz-ff-d);font-weight:800;color:var(--bz-ink);
letter-spacing:-.02em;white-space:nowrap;
}
body.woocommerce-cart table.cart td.product-quantity .quantity input.qty{
width:78px;min-height:42px;text-align:center;
border:1.5px solid var(--bz-line-2);border-radius:var(--bz-r-sm);
background:#fff;color:var(--bz-ink);font-family:var(--bz-ff);font-weight:700;
}
body.woocommerce-cart table.cart td.product-remove{width:52px;text-align:center}
body.woocommerce-cart table.cart td.product-remove a.remove{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:50%;
background:var(--bz-surface-2)!important;color:var(--bz-muted)!important;
font-size:1.1rem;line-height:1;text-decoration:none;
transition:background var(--bz-t1),color var(--bz-t1);
}
body.woocommerce-cart table.cart td.product-remove a.remove:hover{
background:var(--bz-rose-50)!important;color:var(--bz-rose)!important;
}
body.woocommerce-cart table.cart td.actions{
background:var(--bz-surface);padding:.9rem 1rem;
}
body.woocommerce-cart table.cart td.actions .coupon{
display:inline-flex;align-items:center;gap:.55rem;float:none;
}
body.woocommerce-cart table.cart td.actions .coupon label{display:none}
body.woocommerce-cart table.cart td.actions .coupon .input-text{
width:190px;min-height:46px;margin:0;
}
body.woocommerce-cart table.cart td.actions button[name="update_cart"]{float:right}
/* totals */
body.woocommerce-cart .cart_totals h2{
font-family:var(--bz-ff-d);font-size:1.2rem;font-weight:800;
letter-spacing:-.02em;color:var(--bz-ink);margin:0 0 .9rem;
}
body.woocommerce-cart .cart_totals table.shop_table th{
width:45%;font-family:var(--bz-ff);font-weight:700;color:var(--bz-ink-2);
font-size:.9rem;text-transform:none;letter-spacing:normal;background:none;
}
body.woocommerce-cart .cart_totals table.shop_table td{text-align:right;font-weight:700;color:var(--bz-ink)}
body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td{
font-family:var(--bz-ff-d);font-size:1.05rem;font-weight:800;color:var(--bz-ink);
border-top:1px solid var(--bz-line);
}
body.woocommerce-cart .wc-proceed-to-checkout{margin-top:1rem;padding:0}
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button{width:100%}
/* empty cart */
body.woocommerce-cart .cart-empty{
display:block;margin:0 0 .5rem;padding:0;background:none;border:0;
font-family:var(--bz-ff-d);font-size:1.2rem;font-weight:800;
letter-spacing:-.022em;color:var(--bz-ink);text-align:center;
}
body.woocommerce-cart .cart-empty::before{
content:"";display:block;width:40px;height:40px;margin:0 auto 1rem;
position:static;font-size:0;
background-color:var(--bz-orange);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
body.woocommerce-cart .wc-empty-cart-message{
max-width:41rem;margin:0 auto;padding:2.8rem 1.5rem 3rem;
background:var(--bz-surface);border:1px solid var(--bz-line);border-radius:var(--bz-r);
}
body.woocommerce-cart .return-to-shop{margin:1.5rem 0 0;text-align:center}
/* ---------- CHECKOUT ---------- */
body.woocommerce-checkout form.checkout{
display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
gap:clamp(24px,3vw,48px);align-items:start;
}
body.woocommerce-checkout form.checkout #customer_details{grid-column:1;grid-row:1 / span 2}
body.woocommerce-checkout form.checkout #order_review_heading{grid-column:2;grid-row:1;margin:0 0 .9rem}
body.woocommerce-checkout form.checkout #order_review{grid-column:2;grid-row:2}
body.woocommerce-checkout .col2-set{
display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;width:auto;
}
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2{width:auto!important;float:none!important}
body.woocommerce-checkout h3,
body.woocommerce-checkout #order_review_heading{
font-family:var(--bz-ff-d);font-size:1.2rem;font-weight:800;
letter-spacing:-.02em;color:var(--bz-ink);margin:0 0 1rem;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem;
}
body.woocommerce-checkout .form-row-wide,
body.woocommerce-checkout .form-row.notes{grid-column:1 / -1}
body.woocommerce-checkout #order_review{
background:#fff;border:1px solid var(--bz-line);border-radius:var(--bz-r);
padding:1.2rem;box-shadow:var(--bz-sh-sm);position:sticky;top:96px;
}
body.woocommerce-checkout #order_review table.shop_table{
border:0;border-radius:0;box-shadow:none;background:none;
}
body.woocommerce-checkout #order_review table.shop_table thead th{background:none;padding-left:0;padding-right:0}
body.woocommerce-checkout #order_review table.shop_table td,
body.woocommerce-checkout #order_review table.shop_table tbody th,
body.woocommerce-checkout #order_review table.shop_table tfoot th,
body.woocommerce-checkout #order_review table.shop_table tfoot td{padding-left:0;padding-right:0}
body.woocommerce-checkout #order_review tfoot .order-total th,
body.woocommerce-checkout #order_review tfoot .order-total td{
font-family:var(--bz-ff-d);font-size:1.05rem;font-weight:800;color:var(--bz-ink);
}
body.woocommerce-checkout #payment{
background:var(--bz-surface);border:1px solid var(--bz-line);
border-radius:var(--bz-r-sm);padding:1rem;margin-top:1rem;
}
body.woocommerce-checkout #payment ul.payment_methods{
margin:0;padding:0;list-style:none;border:0;
}
body.woocommerce-checkout #payment ul.payment_methods li{margin:0 0 .6rem;padding:0;list-style:none}
body.woocommerce-checkout #payment ul.payment_methods li label{
display:inline;font-weight:700;color:var(--bz-ink);font-size:.94rem;margin:0 0 0 .35rem;
}
body.woocommerce-checkout #payment div.payment_box{
background:#fff;border:1px solid var(--bz-line);border-radius:var(--bz-r-xs);
color:var(--bz-ink-2);font-size:.9rem;margin:.6rem 0 0;padding:.8rem .9rem;
}
body.woocommerce-checkout #payment div.payment_box::before{display:none}
body.woocommerce-checkout #payment .place-order{margin:1rem 0 0;padding:0}
body.woocommerce-checkout #place_order{width:100%}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{
font-size:.86rem;color:var(--bz-muted);margin-bottom:.8rem;
}
/* ---------- MY ACCOUNT ----------
Rebuilt in assets/css/bookzilla-account.css, which is loaded only on the
account page and carries the rail, the orders table, the address cards and
the logged-out cards. The block that used to sit here made
body.woocommerce-account .woocommerce a two-column grid -- and WooCommerce's
own stylesheet gives that element a clearfix ::before, which in a grid is
not a clearfix at all but a grid item. It took the first column, and the
whole account page was pushed into the second. Nothing here now; the
account styling has one home. */
@media(max-width:900px){
body.woocommerce-cart div.woocommerce:has(.woocommerce-cart-form),
body.woocommerce-checkout form.checkout{grid-template-columns:minmax(0,1fr)}
body.woocommerce-checkout form.checkout #customer_details,
body.woocommerce-checkout form.checkout #order_review_heading,
body.woocommerce-checkout form.checkout #order_review{grid-column:1;grid-row:auto}
body.woocommerce-checkout #order_review{position:static}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{grid-template-columns:minmax(0,1fr)}
body.woocommerce-cart table.cart td.actions .coupon{display:flex;width:100%}
body.woocommerce-cart table.cart td.actions button[name="update_cart"]{float:none;width:100%;margin-top:.6rem}
}
/* ---------- checkout: the details WooCommerce's own markup needs ---------- */
body.woocommerce-checkout .woocommerce-input-wrapper{display:block}
body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last{width:auto;float:none}
body.woocommerce-checkout .form-row.validate-required label .required{margin-left:.15rem}
/* the coupon toggle above the form */
body.woocommerce-checkout .woocommerce-form-coupon-toggle{margin:0 0 1.2rem}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-info{
display:flex;align-items:flex-start;gap:.8rem;
margin:0 0 1.2rem;padding:1rem 1.2rem;
background:var(--bz-orange-50);
border:1px solid var(--bz-orange-200);border-top:1px solid var(--bz-orange-200);
border-radius:var(--bz-r-sm);
color:var(--bz-ink);font-size:.94rem;line-height:1.55;list-style:none;
}
body.woocommerce-checkout .woocommerce-info::before{
content:"";position:static;flex:none;font-size:0;
width:20px;height:20px;margin:.12rem 0 0;top:auto;left:auto;
background-color:var(--bz-orange-700);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
body.woocommerce-checkout .woocommerce-info a.showcoupon{color:var(--bz-orange-700);font-weight:700}
body.woocommerce-checkout form.checkout_coupon{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:end;
margin:0 0 1.4rem;padding:1.1rem;
background:#fff;border:1px solid var(--bz-line);border-radius:var(--bz-r-sm);
}
body.woocommerce-checkout form.checkout_coupon .form-row{margin:0;width:auto;float:none}
body.woocommerce-checkout form.checkout_coupon .clear{display:none}
body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]{
display:inline-flex;align-items:center;justify-content:center;
min-height:46px;padding:.65rem 1.2rem;border-radius:var(--bz-r-sm);
background:#fff;color:var(--bz-ink);border:1.5px solid var(--bz-line-2);
font-family:var(--bz-ff);font-weight:700;font-size:.92rem;cursor:pointer;text-shadow:none;
}
body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:hover{
background:var(--bz-surface);border-color:var(--bz-ink);color:var(--bz-ink);
}
/* ship to a different address, and the opt-in checkboxes */
body.woocommerce-checkout h3#ship-to-different-address{margin:0 0 1rem}
body.woocommerce-checkout h3#ship-to-different-address label,
body.woocommerce-checkout .woocommerce-form__label-for-checkbox{
display:inline-flex;align-items:center;gap:.5rem;
font-family:var(--bz-ff-d);font-size:1.2rem;font-weight:800;
letter-spacing:-.02em;color:var(--bz-ink);cursor:pointer;
}
body.woocommerce-checkout .woocommerce-billing-fields + .woocommerce-form__label-for-checkbox,
body.woocommerce-checkout .col-1 .woocommerce-form__label-for-checkbox{
font-family:var(--bz-ff);font-size:.9rem;font-weight:600;color:var(--bz-ink-2);
}
body.woocommerce-checkout .woocommerce-form__input-checkbox,
body.woocommerce-checkout .input-checkbox{
width:16px;height:16px;margin:0;accent-color:var(--bz-orange);
}
/* shipping methods inside the order review */
body.woocommerce-checkout #order_review ul#shipping_method{margin:0;padding:0;list-style:none;text-align:right}
body.woocommerce-checkout #order_review ul#shipping_method li{margin:0 0 .35rem;padding:0;list-style:none}
body.woocommerce-checkout #order_review .woocommerce-shipping-destination{
font-size:.84rem;color:var(--bz-muted);margin:.4rem 0 0;
}
body.woocommerce-checkout #order_review .woocommerce-shipping-calculator a{color:var(--bz-orange-700);font-weight:600;font-size:.86rem}
body.woocommerce-checkout #order_review table.shop_table td{text-align:right}
body.woocommerce-checkout #order_review table.shop_table td.product-name,
body.woocommerce-checkout #order_review table.shop_table th{text-align:left}
body.woocommerce-checkout #order_review .product-quantity{color:var(--bz-muted);font-weight:700}
/* WooCommerce prefixes a set of rules with #content, and Hello Elementor's
main element carries that id, so those rules arrive with ID specificity and
beat anything reasonable a theme can write. The gallery and summary floats
are already answered with !important above; these are the rest. */
body.single-product div.product .woocommerce-tabs ul.tabs::before,
body.single-product div.product .woocommerce-tabs ul.tabs::after{
content:none!important;display:none!important;
}
body.single-product div.product .woocommerce-tabs ul.tabs li{display:inline-flex!important}
/* ============================================================
SHOP FILTERS -- ported from the v5.6 storefront
------------------------------------------------------------
Same sidebar, same bar, same chips. Each option is a link
rather than a checkbox, because the filtering happens in the
query: one click, one navigation, no JavaScript, and every
filtered view has a real URL. The box beside each label is
drawn, so it still reads as a checkbox.
Below 1000px the sidebar is hidden behind the Filters button,
which is a plain label bound to a hidden checkbox -- v5.6 hid
the sidebar entirely at that width, which would leave a phone
with no way to narrow eleven hundred products.
============================================================ */
.bz-shop-layout{display:grid;gap:28px;min-width:0}
.bz-shop-layout > *{min-width:0}
.bz-shop-main{min-width:0}
.bz-filters{display:none}
.bz-filters-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.bz-filters-cb:checked + .bz-shop-layout .bz-filters{
display:block;
background:#fff;border:1px solid var(--bz-line);border-radius:var(--bz-r);
padding:1rem 1.1rem;margin-bottom:.4rem;box-shadow:var(--bz-sh-sm);
}
.bz-fgroup{border-bottom:1px solid var(--bz-line);padding-bottom:1rem;margin-bottom:1rem}
.bz-fgroup:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.bz-fgroup--search{padding-bottom:.6rem}
.bz-fgroup h4{
font-family:var(--bz-ff);font-size:.72rem;font-weight:800;letter-spacing:.11em;
text-transform:uppercase;color:var(--bz-muted-2);margin:0 0 .65rem;
}
.bz-fopt{
display:flex;align-items:center;gap:.55rem;
padding:.34rem 0;min-height:32px;
font-size:.885rem;color:var(--bz-ink-2);text-decoration:none;cursor:pointer;
transition:color var(--bz-t1);
}
.bz-fopt:hover{color:var(--bz-orange-700)}
.bz-fopt .bz-flabel{min-width:0}
.bz-fopt .bz-n{margin-left:auto;font-size:.78rem;color:var(--bz-muted-2);flex:none}
.bz-fopt .bz-fbox{
flex:none;width:17px;height:17px;border-radius:4px;
border:1.5px solid var(--bz-line-2);background:#fff;
display:grid;place-items:center;
transition:background var(--bz-t1),border-color var(--bz-t1);
}
.bz-fopt:hover .bz-fbox{border-color:var(--bz-orange)}
.bz-fopt.is-on{color:var(--bz-ink);font-weight:650}
.bz-fopt.is-on .bz-fbox{background:var(--bz-orange);border-color:var(--bz-orange)}
.bz-fopt.is-on .bz-fbox::after{
content:"";width:11px;height:11px;background-color:#fff;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* search within results */
.bz-fsearch{position:relative;display:block}
.bz-fsearch .bz-inp{
width:100%;min-height:46px;padding:.68rem 2.6rem .68rem .9rem;
border:1.5px solid var(--bz-line-2);border-radius:var(--bz-r-sm);
background:#fff;color:var(--bz-ink);font-family:var(--bz-ff);font-size:.94rem;
-webkit-appearance:none;appearance:none;
transition:border-color var(--bz-t1),box-shadow var(--bz-t1);
}
.bz-fsearch .bz-inp:focus{outline:none;border-color:var(--bz-orange);box-shadow:0 0 0 3px var(--bz-orange-100)}
.bz-fsearch__go{
position:absolute;right:6px;top:50%;transform:translateY(-50%);
width:34px;height:34px;padding:0;border:0;border-radius:var(--bz-r-xs);
background:none;color:var(--bz-muted);display:grid;place-items:center;cursor:pointer;
}
.bz-fsearch__go:hover,.bz-fsearch__go:focus{background:var(--bz-surface);color:var(--bz-orange-700)}
.bz-fsearch__go svg{width:16px;height:16px}
/* the bar above the grid */
.bz-shop-bar{
display:flex;align-items:center;justify-content:space-between;
gap:.7rem;flex-wrap:wrap;margin:0 0 1.2rem;min-width:0;
}
.bz-shop-bar .bz-cnt-txt{font-size:.9rem;color:var(--bz-muted);margin:0}
.bz-shop-bar .bz-cnt-txt strong{color:var(--bz-ink);font-weight:800}
.bz-shop-tools{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;min-width:0}
.bz-shop-tools .woocommerce-ordering{margin:0!important;float:none!important}
.bz-fbtn{
display:inline-flex;align-items:center;gap:.45rem;
min-height:42px;padding:0 .95rem;border-radius:var(--bz-r-sm);
border:1.5px solid var(--bz-line-2);background:#fff;color:var(--bz-ink);
font-family:var(--bz-ff);font-weight:700;font-size:.87rem;cursor:pointer;
transition:background var(--bz-t1),border-color var(--bz-t1);
}
.bz-fbtn:hover{background:var(--bz-surface);border-color:var(--bz-ink)}
.bz-fbtn svg{width:16px;height:16px}
/* applied filters */
.bz-actives{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.bz-atag{
display:inline-flex;align-items:center;gap:.4rem;
padding:.34rem .6rem .34rem .7rem;border-radius:var(--bz-r-pill);
background:var(--bz-orange-50);border:1px solid var(--bz-orange-200);
color:var(--bz-orange-700);font-size:.8rem;font-weight:700;
text-decoration:none;transition:background var(--bz-t1),border-color var(--bz-t1);
}
.bz-atag:hover{background:var(--bz-orange-100);border-color:var(--bz-orange)}
.bz-atag svg{width:12px;height:12px}
.bz-atag--clear{
background:#fff;border-color:var(--bz-line-2);color:var(--bz-muted);padding:.34rem .7rem;
}
.bz-atag--clear:hover{background:var(--bz-surface);border-color:var(--bz-ink);color:var(--bz-ink)}
/* nothing found */
.bz-shop-empty{text-align:center;padding:3.5rem 1.2rem;max-width:34rem;margin-inline:auto}
.bz-shop-empty .bz-empty-ic{
display:grid;place-items:center;width:56px;height:56px;margin:0 auto 1rem;
border-radius:var(--bz-r);background:var(--bz-orange-50);color:var(--bz-orange-700);
}
.bz-shop-empty .bz-empty-ic svg{width:26px;height:26px}
.bz-shop-empty h3{
font-family:var(--bz-ff-d);font-size:1.3rem;font-weight:800;letter-spacing:-.022em;
color:var(--bz-ink);margin:0 0 .4rem;
}
.bz-shop-empty p{color:var(--bz-muted);font-size:.93rem;line-height:1.6;margin:0}
.bz-shop-empty__cta{
display:inline-flex;align-items:center;justify-content:center;
min-height:46px;padding:.7rem 1.35rem;margin-top:1.2rem;
border-radius:var(--bz-r-sm);background:var(--bz-orange);color:#fff;
border:1.5px solid transparent;
font-family:var(--bz-ff);font-weight:700;font-size:.94rem;text-decoration:none;
transition:background var(--bz-t1),transform var(--bz-t1);
}
.bz-shop-empty__cta:hover{background:var(--bz-orange-600);color:#fff;transform:translateY(-1px)}
/* the grid sits in a narrower column now, so it loses a track or two */
.bz-shop-layout .bz-pgrid ul.products{grid-template-columns:repeat(4,1fr)}
@media(min-width:1400px){.bz-shop-layout .bz-pgrid ul.products{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1199px){.bz-shop-layout .bz-pgrid ul.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.bz-shop-layout .bz-pgrid ul.products{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){
.bz-shop-layout{grid-template-columns:262px minmax(0,1fr);align-items:start}
.bz-filters{display:block;position:sticky;top:92px}
.bz-fbtn{display:none}
}
/* Department tiles. WooCommerce lists a category's children above its products
as list items that carry the product class, so they pick up the card frame
but not the title or price rules, which are keyed to the product markup.
These give them their own finish. The sidebar now lists the same children
with counts, so these are a second route to the same place rather than the
only one -- easy to switch off if they ever feel redundant. */
.bz-pgrid ul.products li.product-category > a{display:flex;flex-direction:column;height:100%}
.bz-pgrid ul.products li.product-category img{
width:100%!important;aspect-ratio:2/3;object-fit:cover;display:block;
margin:0!important;border-radius:0!important;background:var(--bz-surface-2);
}
.bz-pgrid ul.products li.product-category .woocommerce-loop-category__title{
display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem;
font-family:var(--bz-ff-d);font-size:14px!important;font-weight:700;
line-height:1.32;color:var(--bz-ink);
padding:14px!important;margin:0!important;
}
.bz-pgrid ul.products li.product-category .woocommerce-loop-category__title mark.count{
background:var(--bz-surface);color:var(--bz-muted);
border-radius:var(--bz-r-pill);padding:.1rem .5rem;
font-size:11px;font-weight:800;line-height:1.6;
}
/* ---------- page head, matching v5.6's phero row ---------- */
body.bz-shop .bz-shop-head{
display:flex;justify-content:space-between;align-items:flex-end;
gap:24px;flex-wrap:wrap;
margin:0 0 clamp(20px,2vw,32px);
padding:0 0 clamp(20px,2vw,32px);
border-bottom:1px solid var(--bz-line);
}
body.bz-shop .bz-shop-head__text{min-width:0;flex:1 1 32rem}
body.bz-shop .bz-shop-head .woocommerce-products-header{
margin:0;padding:0;border:0;
}
body.bz-shop .bz-shop-lede,
body.bz-shop .bz-shop-head .term-description{
margin-top:.7rem;max-width:64ch;
font-size:clamp(1rem,.96rem + .22vw,1.09rem);
line-height:1.62;color:var(--bz-muted);
}
body.bz-shop .bz-chiprow{display:flex;flex-wrap:wrap;gap:.5rem;flex:0 1 auto}
body.bz-shop .bz-chip{
display:inline-flex;align-items:center;gap:.45rem;
padding:.4rem .78rem;border-radius:var(--bz-r-pill);
background:#fff;border:1px solid var(--bz-line);
color:var(--bz-ink-2);font-size:.8rem;font-weight:600;white-space:nowrap;
}
body.bz-shop .bz-chip svg{width:15px;height:15px;flex:none;color:var(--bz-orange)}
/* ---------- grid density, matching v5.6 exactly ----------
Two up, then three, four, five and six as the column widens. The gap is
v5.6's 22px down, 16px across. */
.bz-shop-layout .bz-pgrid ul.products{grid-template-columns:repeat(2,1fr);gap:22px 16px}
@media(min-width:560px){.bz-shop-layout .bz-pgrid ul.products{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.bz-shop-layout .bz-pgrid ul.products{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1180px){.bz-shop-layout .bz-pgrid ul.products{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1400px){.bz-shop-layout .bz-pgrid ul.products{grid-template-columns:repeat(6,1fr)}}
/* ===== v5.6 card parity ===== */
.bz-rail ul.products li.product,
.bz-pgrid ul.products li.product{
border:0!important;box-shadow:none!important;overflow:visible!important;
padding:10px 10px 14px!important;background:#fff}
.bz-rail ul.products li.product:hover,
.bz-pgrid ul.products li.product:hover{box-shadow:var(--bz-sh-lg)!important;border-color:transparent}
.bz-rail li.product img,.bz-pgrid li.product img{
border-radius:var(--bz-r-sm)!important;
box-shadow:0 1px 2px rgba(32,36,44,.10),0 6px 16px rgba(32,36,44,.12)}
.bz-rail li.product .bz-cardcat,.bz-pgrid li.product .bz-cardcat{padding:11px 0 0}
.bz-rail li.product .woocommerce-loop-product__title,
.bz-pgrid li.product .woocommerce-loop-product__title{padding:11px 0 0!important}
.bz-rail li.product .bz-cardcat+.woocommerce-loop-product__title,
.bz-pgrid li.product .bz-cardcat+.woocommerce-loop-product__title{padding:4px 0 0!important}
.bz-rail li.product .price,.bz-pgrid li.product .price{
font-size:16px!important;letter-spacing:-.02em;line-height:1.2;
padding:8px 46px 0 0!important;min-height:44px;box-sizing:border-box;
display:flex;align-items:center;flex-wrap:wrap;align-content:center;gap:0 6px}
.bz-rail li.product .price ins,.bz-pgrid li.product .price ins{
background:none;text-decoration:none;color:inherit;font-weight:800;order:1}
.bz-rail li.product .price del,.bz-pgrid li.product .price del{
order:2;flex:0 0 100%;font-size:12.5px;font-weight:600;color:var(--bz-muted-2);opacity:1}
.bz-rail li.product a.button:not(.bz-hovercart),
.bz-pgrid li.product a.button:not(.bz-hovercart){right:10px;bottom:14px}
.bz-rail li.product span.onsale,.bz-pgrid li.product span.onsale{top:16px;left:16px}
.bz-rail li.product a.bz-hovercart,.bz-pgrid li.product a.bz-hovercart{
left:18px;right:18px;top:calc(100cqw * 1.5 - 42px)}
@container (max-width:145px){
.bz-rail li.product .price,.bz-pgrid li.product .price{font-size:15px!important;padding-right:42px!important}
.bz-rail li.product a.button:not(.bz-hovercart),
.bz-pgrid li.product a.button:not(.bz-hovercart){width:32px;height:32px;right:8px}
}
@container (max-width:120px){
.bz-rail li.product .price,.bz-pgrid li.product .price{font-size:13.5px!important;padding-right:38px!important}
.bz-rail li.product a.button:not(.bz-hovercart),
.bz-pgrid li.product a.button:not(.bz-hovercart){width:30px;height:30px;right:6px}
}
/* ============================================================
CART — v5.6 parity
------------------------------------------------------------
WooCommerce ships the cart as one wide table with the totals
stacked underneath. v5.6 shows a panel of line rows on the left
and a sticky order-summary card on the right, so the table is
re-laid out as rows with explicit grid placement (the cells
arrive in WooCommerce's DOM order: remove, thumb, name, price,
quantity, subtotal) and the totals table becomes the summary.
============================================================ */
/* the two columns, at v5.6's own measurements */
body.woocommerce-cart div.woocommerce:has(.woocommerce-cart-form){
grid-template-columns:minmax(0,1fr) 348px;
gap:26px;
}
/* WooCommerce labels the quantity field for screen readers; the class is
defined in WooCommerce's own stylesheet, so it is repeated here in case
that sheet is ever dropped from the page. */
body.woocommerce-cart .screen-reader-text{
position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
/* ---------- the lines panel ---------- */
body.woocommerce-cart table.cart.shop_table{
display:block;box-shadow:none;overflow:hidden;
}
body.woocommerce-cart table.cart.shop_table thead{display:none}
body.woocommerce-cart table.cart.shop_table tbody{display:block}
body.woocommerce-cart tr.woocommerce-cart-form__cart-item{
display:grid;
grid-template-columns:64px minmax(0,1fr) auto;
grid-template-rows:auto auto auto;
column-gap:1rem;row-gap:.2rem;
padding:1.1rem;border-bottom:1px solid var(--bz-line);
align-items:start;
}
body.woocommerce-cart tr.woocommerce-cart-form__cart-item > td{
display:block;padding:0;border:0;vertical-align:top;
}
body.woocommerce-cart table.cart td.product-thumbnail{grid-column:1;grid-row:1 / -1;width:auto}
body.woocommerce-cart td.product-name{grid-column:2;grid-row:1;min-width:0}
body.woocommerce-cart td.product-price{grid-column:2;grid-row:2}
body.woocommerce-cart td.product-quantity{grid-column:2;grid-row:3;margin-top:.4rem}
body.woocommerce-cart td.product-subtotal{grid-column:3;grid-row:1;justify-self:end;text-align:right}
body.woocommerce-cart table.cart td.product-remove{grid-column:3;grid-row:2 / -1;justify-self:end;width:auto;text-align:right}
body.woocommerce-cart td.product-thumbnail img{
width:64px;height:96px;border-radius:var(--bz-r-xs);
}
body.woocommerce-cart td.product-name a{
font-size:.95rem;font-weight:750;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body.woocommerce-cart td.product-price{
font-family:var(--bz-ff)!important;font-size:.83rem!important;
font-weight:500!important;color:var(--bz-muted)!important;letter-spacing:normal!important;
}
body.woocommerce-cart td.product-price::after{content:" each"}
body.woocommerce-cart td.product-subtotal{
font-family:var(--bz-ff-d);font-size:1rem;font-weight:800;color:var(--bz-ink);
}
/* the stepper: buttons are added by bookzilla.js, the input is WooCommerce's */
body.woocommerce-cart table.cart td.product-quantity .quantity{
display:inline-flex;align-items:center;overflow:hidden;
border:1px solid var(--bz-line-2);border-radius:var(--bz-r-xs);background:#fff;
}
body.woocommerce-cart table.cart td.product-quantity .quantity input.qty{
width:40px;min-height:30px;height:30px;padding:0;text-align:center;
border:0;border-radius:0;background:#fff;
font-size:.85rem;font-weight:700;color:var(--bz-ink);
-moz-appearance:textfield;appearance:textfield;
}
body.woocommerce-cart table.cart td.product-quantity .quantity input.qty:focus{
outline:none;box-shadow:none;
}
body.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button{
-webkit-appearance:none;margin:0;
}
body.woocommerce-cart .quantity .bz-step{
width:30px;height:30px;flex:none;display:grid;place-items:center;
padding:0;margin:0;border:0;border-radius:0;background:#fff;color:var(--bz-ink);
cursor:pointer;transition:background var(--bz-t1),color var(--bz-t1);
}
body.woocommerce-cart .quantity .bz-step:hover{background:var(--bz-orange-50);color:var(--bz-orange-700)}
body.woocommerce-cart .quantity .bz-step:disabled{opacity:.35;cursor:not-allowed;background:#fff}
body.woocommerce-cart .quantity .bz-step svg{width:13px;height:13px}
/* the actions strip carries the coupon */
body.woocommerce-cart tr:has(> td.actions){display:block}
body.woocommerce-cart td.actions{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:.6rem;padding:.9rem 1.1rem;
}
body.woocommerce-cart td.actions .coupon{flex:1 1 auto}
body.woocommerce-cart td.actions button[name="update_cart"]{float:none;margin-left:auto}
/* continue shopping, under the panel */
body.woocommerce-cart .bz-cart-back{margin-top:1rem}
body.woocommerce-cart .bz-cart-back a{
display:inline-flex;align-items:center;gap:.5rem;
min-height:46px;padding:.7rem 1.3rem;border-radius:var(--bz-r-sm);
background:#fff;border:1.5px solid var(--bz-line-2);color:var(--bz-ink);
font-weight:700;font-size:.94rem;
transition:background var(--bz-t1),border-color var(--bz-t1),transform var(--bz-t1);
}
body.woocommerce-cart .bz-cart-back a:hover{
background:var(--bz-surface);border-color:var(--bz-ink);transform:translateY(-1px);
}
body.woocommerce-cart .bz-cart-back svg{width:15px;height:15px}
/* ---------- the summary card ---------- */
body.woocommerce-cart .cart-collaterals{position:sticky;top:96px}
body.woocommerce-cart .cart-collaterals .cart_totals{
background:#fff;border:1px solid var(--bz-line);
border-radius:var(--bz-r);padding:1.3rem;
}
body.woocommerce-cart .cart_totals h2{font-size:1.15rem;margin:0 0 1rem}
body.woocommerce-cart .cart_totals table.shop_table{
display:block;border:0;border-radius:0;box-shadow:none;background:none;
}
body.woocommerce-cart .cart_totals table.shop_table tbody{display:block}
body.woocommerce-cart .cart_totals table.shop_table tr{
display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
margin-bottom:.4rem;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td{
display:block;width:auto;padding:0;border:0;text-align:left;
font-family:var(--bz-ff);font-size:.89rem;font-weight:600;color:var(--bz-muted);
}
body.woocommerce-cart .cart_totals table.shop_table td{
text-align:right;font-weight:700;color:var(--bz-ink-2);
}
body.woocommerce-cart .cart_totals tr.order-total{
padding-top:.6rem;margin-top:.6rem;border-top:1px solid var(--bz-line);align-items:center;
}
body.woocommerce-cart .cart_totals tr.order-total th{
font-size:1rem;font-weight:750;color:var(--bz-ink);border:0;
}
body.woocommerce-cart .cart_totals tr.order-total td{
font-family:var(--bz-ff-d);font-size:1.3rem;font-weight:800;
letter-spacing:-.02em;color:var(--bz-ink);border:0;
}
/* delivery: WooCommerce puts a method list, a destination line and a
calculator inside one cell, so that row stacks instead of splitting */
body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals{
display:block;padding-top:.55rem;margin-top:.55rem;border-top:1px solid var(--bz-line);
}
body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals th{
margin-bottom:.45rem;font-size:.89rem;color:var(--bz-muted);
}
body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td{text-align:left}
body.woocommerce-cart ul#shipping_method{display:grid;gap:.35rem;margin:0;padding:0;list-style:none}
body.woocommerce-cart ul#shipping_method li{
display:flex;align-items:center;gap:.5rem;margin:0;padding:0;
font-size:.87rem;font-weight:600;color:var(--bz-ink-2);
}
body.woocommerce-cart ul#shipping_method li label{margin:0;font-weight:600}
body.woocommerce-cart ul#shipping_method input.shipping_method{
width:16px;height:16px;flex:none;accent-color:var(--bz-orange);margin:0;
}
body.woocommerce-cart .woocommerce-shipping-destination{
margin:.5rem 0 0;font-size:.8rem;color:var(--bz-muted-2);font-weight:500;
}
body.woocommerce-cart .woocommerce-shipping-calculator{margin:.35rem 0 0}
body.woocommerce-cart .shipping-calculator-button{
font-size:.8rem;font-weight:700;color:var(--bz-orange-700);
text-decoration:underline;text-underline-offset:3px;
}
body.woocommerce-cart .wc-proceed-to-checkout{margin-top:1.1rem}
/* the reassurance block the summary ends on */
body.woocommerce-cart .bz-cart-fine{
margin-top:.7rem;font-size:.76rem;line-height:1.5;
color:var(--bz-muted-2);text-align:center;
}
body.woocommerce-cart ul.bz-cart-trust{
display:grid;gap:.6rem;margin:1.1rem 0 0;padding:0;list-style:none;
}
body.woocommerce-cart ul.bz-cart-trust li{
display:flex;gap:.6rem;align-items:flex-start;
font-size:.86rem;line-height:1.45;color:var(--bz-ink-2);
}
body.woocommerce-cart ul.bz-cart-trust svg{
width:17px;height:17px;flex:none;margin-top:2px;color:var(--bz-green);
}
/* ---------- cross-sells, moved below the layout ---------- */
body.woocommerce-cart .bz-cart-cross{margin-top:clamp(36px,3.6vw,64px)}
body.woocommerce-cart .bz-cart-cross .cross-sells > h2{
font-family:var(--bz-ff-d);font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);
font-weight:800;letter-spacing:-.024em;color:var(--bz-ink);margin:0 0 1.1rem;
}
body.woocommerce-cart .bz-cart-cross .bz-pgrid ul.products{
display:grid!important;grid-template-columns:repeat(2,1fr);gap:22px 16px;
margin:0;padding:0;list-style:none;float:none;
}
@media(min-width:560px){body.woocommerce-cart .bz-cart-cross .bz-pgrid ul.products{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){body.woocommerce-cart .bz-cart-cross .bz-pgrid ul.products{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1180px){body.woocommerce-cart .bz-cart-cross .bz-pgrid ul.products{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1400px){body.woocommerce-cart .bz-cart-cross .bz-pgrid ul.products{grid-template-columns:repeat(6,1fr)}}
body.woocommerce-cart .bz-cart-cross li.product{width:auto!important;margin:0!important;float:none!important}
/* ---------- empty cart ---------- */
body.woocommerce-cart .bz-cart-empty{text-align:center;max-width:34rem;margin-inline:auto}
body.woocommerce-cart .bz-cart-empty .bz-itile{
display:grid;place-items:center;width:56px;height:56px;border-radius:15px;
margin:0 auto 1rem;background:var(--bz-orange-50);color:var(--bz-orange-700);
}
body.woocommerce-cart .bz-cart-empty .bz-itile svg{width:26px;height:26px}
body.woocommerce-cart .bz-cart-empty h2{
font-family:var(--bz-ff-d);font-size:1.35rem;font-weight:800;
letter-spacing:-.024em;color:var(--bz-ink);margin:0 0 .4rem;
}
body.woocommerce-cart .bz-cart-empty p{color:var(--bz-muted);font-size:.93rem;line-height:1.6;margin:0}
body.woocommerce-cart .wc-empty-cart-message{
max-width:none;margin:0;padding:3.5rem 1.2rem 0;background:none;border:0;border-radius:0;
}
body.woocommerce-cart .return-to-shop{margin:1.2rem 0 3.5rem;text-align:center}
/* ---------- narrow ---------- */
@media(max-width:959px){
body.woocommerce-cart div.woocommerce:has(.woocommerce-cart-form){
grid-template-columns:minmax(0,1fr);
}
body.woocommerce-cart .cart-collaterals{position:static}
}
@media(max-width:560px){
body.woocommerce-cart tr.woocommerce-cart-form__cart-item{
grid-template-columns:64px minmax(0,1fr);
grid-template-rows:auto auto auto auto;
row-gap:.25rem;
}
body.woocommerce-cart table.cart td.product-thumbnail{grid-row:1 / span 3}
body.woocommerce-cart td.product-subtotal{grid-column:2;grid-row:4;justify-self:start;text-align:left;padding-top:.3rem}
body.woocommerce-cart table.cart td.product-remove{grid-column:2;grid-row:4;justify-self:end}
body.woocommerce-cart td.actions{flex-direction:column;align-items:stretch}
body.woocommerce-cart td.actions .coupon{display:flex}
body.woocommerce-cart td.actions button[name="update_cart"]{margin-left:0;width:100%}
}
/* ---------- refinements ---------- */
/* no fills anywhere in the cart: the panel borders do the separating */
body.woocommerce-cart table.cart td.actions{background:none}
body.woocommerce-cart table.cart td.product-remove a.remove{
background:none!important;color:var(--bz-muted-2)!important;
}
body.woocommerce-cart table.cart td.product-remove a.remove:hover{
background:var(--bz-rose-50)!important;color:var(--bz-rose)!important;
}
/* the coupon field gets the room its placeholder needs */
body.woocommerce-cart table.cart td.actions .coupon{
display:flex;align-items:center;gap:.55rem;flex:1 1 320px;min-width:0;
}
body.woocommerce-cart table.cart td.actions .coupon .input-text{
flex:1 1 auto;width:auto;min-width:0;max-width:300px;
}
/* checkout button at v5.6's own metrics, with its padlock */
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button{
min-height:46px;padding:.7rem 1.35rem;
font-size:.94rem;font-weight:700;letter-spacing:-.005em;
}
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button::before{
content:"";width:17px;height:17px;flex:none;background-color:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ============================================================
ANSWERING THE VENDOR CASCADE
------------------------------------------------------------
Two rules from outside the theme were winning on the cart and
are answered here by specificity, not by !important:
1. Hello Elementor's reset.css zebra-stripes every odd table
row -- table tbody>tr:nth-child(odd)>td at (0,1,4).
That is what greyed the line rows and the totals.
2. WooCommerce paints a.button.alt with its own purple at
(0,3,1). :where() contributes nothing, so a plain
.checkout-button rule at (0,2,1) loses to it.
============================================================ */
body.woocommerce-cart table.shop_table tbody > tr > td,
body.woocommerce-cart table.shop_table tbody > tr > th,
body.woocommerce-cart table.shop_table tbody > tr:hover > td,
body.woocommerce-cart table.shop_table tbody > tr:hover > th,
body.woocommerce-checkout table.shop_table tbody > tr > td,
body.woocommerce-checkout table.shop_table tbody > tr > th,
body.woocommerce-checkout table.shop_table tbody > tr:hover > td,
body.woocommerce-checkout table.shop_table tbody > tr:hover > th,
body.woocommerce-account table.shop_table tbody > tr > td,
body.woocommerce-account table.shop_table tbody > tr > th,
body.woocommerce-account table.shop_table tbody > tr:hover > td,
body.woocommerce-account table.shop_table tbody > tr:hover > th{
background-color:transparent;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt{
/* WooCommerce also sets display:block at (0,3,1), which would make the
padlock an inline box with no size, so the flex box is restated here. */
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
width:100%;box-sizing:border-box;
background-color:var(--bz-orange);color:#fff;
min-height:46px;padding:.7rem 1.35rem;
font-size:.94rem;font-weight:700;letter-spacing:-.005em;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt:hover{
background-color:var(--bz-orange-600);color:#fff;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt::before{
content:"";width:17px;height:17px;flex:none;background-color:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* WooCommerce hangs its own icon-font chevron off this link */
body.woocommerce-cart .cart-collaterals .shipping-calculator-button::after{content:none}
/* ============================================================
DIRECT SINGLE-PRODUCT POLISH
Header-safe grid, smaller gallery, clean metadata, real activity.
============================================================ */
/* Xpro gives the header template WooCommerce's generic .product class. */
body.single-product .xpro-theme-builder-header-nav > .elementor.product {
display:block!important;
grid-template-columns:none!important;
grid-template-rows:none!important;
gap:0!important;
width:100%!important;
max-width:none!important;
float:none!important;
margin:0!important;
}
body.single-product .xpro-theme-builder-header-nav > .elementor.product > .elementor-element,
body.single-product .xpro-theme-builder-header-nav > .elementor.product > .e-con {
grid-column:1 / -1!important;
width:100%!important;
max-width:none!important;
}
/* The cover supports the purchase decision without taking over the viewport. */
body.single-product main.site-main > div.product {
grid-template-columns:minmax(300px,420px) minmax(0,1fr);
column-gap:clamp(38px,4.5vw,64px);
row-gap:clamp(42px,5vw,68px);
}
body.single-product main.site-main > div.product > .woocommerce-product-gallery {
width:100%!important;
max-width:420px!important;
justify-self:start;
}
body.single-product main.site-main > div.product .woocommerce-product-gallery__wrapper,
body.single-product main.site-main > div.product .woocommerce-product-gallery__image,
body.single-product main.site-main > div.product .woocommerce-product-gallery__image a {
max-width:100%;
}
body.single-product main.site-main > div.product .woocommerce-product-gallery__image > a > img:not(.zoomImg) {
display:block;
width:auto!important;
max-width:100%!important;
height:auto!important;
margin-inline:auto;
}
/* Keep the useful SKU and remove the search-engine taxonomy dump. */
body.single-product main.site-main > div.product .product_meta .posted_in,
body.single-product main.site-main > div.product .product_meta .tagged_as {
display:none!important;
}
.bz-product-activity {
position:relative;
overflow:hidden;
box-sizing:border-box;
width:100%;
margin:22px 0 24px;
padding:17px 18px 18px;
border:1px solid #E7E9EE;
border-radius:14px;
background:#FFFFFF;
box-shadow:0 10px 28px rgba(8,69,66,.07);
color:#20242C;
}
.bz-product-activity::before {
position:absolute;
inset:0 0 auto;
height:3px;
background:#0E6E6B;
content:"";
}
.bz-product-activity,
.bz-product-activity * { box-sizing:border-box; }
body.single-product .bz-product-activity__title {
margin:0 0 12px;
color:#20242C;
font-family:var(--bz-ff-d);
font-size:17px;
font-weight:800;
letter-spacing:-.02em;
line-height:1.2;
}
.bz-product-activity__notice {
display:flex;
align-items:center;
gap:10px;
min-height:42px;
margin:0 0 13px;
padding:9px 12px;
border:1px solid rgba(14,110,107,.16);
border-radius:10px;
background:#E6F7F0;
color:#084542;
font-size:14px;
font-weight:700;
line-height:1.4;
}
.bz-product-activity__notice[hidden],
.bz-product-activity__metric[hidden] { display:none!important; }
.bz-product-activity__notice-icon {
display:inline-grid;
place-items:center;
flex:0 0 30px;
width:30px;
height:30px;
border-radius:999px;
background:#FFFFFF;
color:#0E6E6B;
}
.bz-product-activity__notice-icon svg { width:17px;height:17px; }
.bz-product-activity__metrics {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin:0;
padding:0;
}
.bz-product-activity__metric {
display:grid;
grid-template-columns:34px minmax(0,1fr);
align-items:center;
gap:10px;
min-width:0;
min-height:66px;
margin:0;
padding:10px 11px;
border:1px solid #E7E9EE;
border-radius:10px;
background:#F7F8FA;
}
.bz-product-activity__metric-icon {
display:inline-grid;
place-items:center;
width:34px;
height:34px;
border-radius:10px;
background:#FFFFFF;
color:#0E6E6B;
}
.bz-product-activity__metric-icon svg { width:18px;height:18px; }
.bz-product-activity__metric dt,
.bz-product-activity__metric dd { margin:0;padding:0;color:inherit;line-height:1.2; }
.bz-product-activity__metric dt {
margin-bottom:4px;
color:#6B7280;
font-size:11px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}
.bz-product-activity__metric dd {
display:flex;
align-items:baseline;
flex-wrap:wrap;
gap:2px 5px;
}
.bz-product-activity__metric strong {
color:#084542;
font-size:19px;
font-weight:800;
font-variant-numeric:tabular-nums;
}
.bz-product-activity__metric small {
color:#6B7280;
font-size:10px;
line-height:1.15;
}
.bz-product-activity [aria-busy="true"] { opacity:.72; }
.bz-product-activity.is-ready [aria-busy="false"] { opacity:1; }
body.single-product main.site-main > div.product .summary button:focus-visible,
body.single-product main.site-main > div.product .summary a:focus-visible,
body.single-product main.site-main > div.product .woocommerce-product-gallery a:focus-visible,
body.single-product main.site-main > div.product .woocommerce-product-gallery button:focus-visible {
outline:3px solid #F28C28!important;
outline-offset:3px!important;
}
@media(max-width:999px) {
body.single-product main.site-main > div.product {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:24px;
}
body.single-product main.site-main > div.product > .woocommerce-product-gallery {
width:min(100%,380px)!important;
max-width:380px!important;
margin:0 auto 8px!important;
justify-self:center;
}
}
@media(max-width:620px) {
body.single-product main.site-main > div.product > .woocommerce-product-gallery {
width:min(100%,340px)!important;
max-width:340px!important;
}
.bz-product-activity { padding:16px 14px; }
.bz-product-activity__metrics { grid-template-columns:1fr; }
.bz-product-activity__metric { min-height:58px; }
}
@media(prefers-reduced-motion:reduce) {
.bz-product-activity,
.bz-product-activity * { transition:none!important;animation:none!important; }
}