/*!
* BuildBarn Site-wide Theme Unification
*
* Applies the same visual language the native homepage uses to every
* non-home Porto / WooCommerce page:
* - Plus Jakarta Sans body + Fraunces display headings
* - Cream/brown palette tokens (`--bb-color-*`)
* - Rounded, dark-brown primary buttons
* - Soft cards, soft borders, the same radii + shadows
*
* Scope: `body.bb-native-header-global` (set by buildbarn-header-unify).
* We intentionally do NOT touch body.bb-native-body (the homepage) —
* its own home.css already owns everything.
*/
/* ------------------------------------------------------------------
* 1. Re-declare design tokens at the `body` level.
* Mirrors the first block of home.css so non-home pages can use
* the same --bb-* vars via standard cascade.
* ------------------------------------------------------------------ */
body.bb-native-header-global {
--bb-color-primary: var(--bb-brand-accent-strong, #6c4f36);
--bb-color-primary-700: var(--bb-text-primary, #2e2118);
/* 2026-04-19 a11y: darkened to AA-compliant #855d3b (5.23:1 on
* cream bg) so non-home pages that inherit this token stay in sync
* with the homepage fix. */
--bb-color-accent-warm: #855d3b;
--bb-color-ink: var(--bb-text-primary, #2e2118);
--bb-color-ink-soft: var(--bb-text-secondary, #6c5645);
--bb-color-muted: var(--bb-text-muted, #6f574a);
--bb-color-line: var(--bb-border-soft, #d8cbbf);
--bb-color-line-strong: var(--bb-border-strong, #c7b4a3);
--bb-color-bg: var(--bb-bg-page, #f3efe6);
--bb-color-bg-card: var(--bb-bg-card, #fbf8f1);
--bb-color-bg-soft: var(--bb-bg-soft, #ece4d7);
--bb-color-accent: #d4a04a;
--bb-font-sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--bb-font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
--bb-radius-sm: 6px;
--bb-radius: 12px;
--bb-radius-lg: 20px;
--bb-radius-xl: 28px;
--bb-shadow-sm: 0 1px 2px rgba(95,70,50,.08);
--bb-shadow: 0 10px 22px rgba(95,70,50,.10);
}
/* ------------------------------------------------------------------
* 2. Base typography — scope to `#main` / `.page-wrapper` content so
* the injected native header keeps its own intended styling.
* ------------------------------------------------------------------ */
body.bb-native-header-global,
body.bb-native-header-global #main,
body.bb-native-header-global .page-wrapper,
body.bb-native-header-global .main-content,
body.bb-native-header-global .site-content,
body.bb-native-header-global .page-content,
body.bb-native-header-global .entry-content {
font-family: var(--bb-font-sans) !important;
color: var(--bb-color-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.bb-native-header-global #main h1,
body.bb-native-header-global #main h2,
body.bb-native-header-global #main h3,
body.bb-native-header-global #main h4,
body.bb-native-header-global #main h5,
body.bb-native-header-global #main h6,
body.bb-native-header-global .page-wrapper h1,
body.bb-native-header-global .page-wrapper h2,
body.bb-native-header-global .page-wrapper h3,
body.bb-native-header-global .page-wrapper h4,
body.bb-native-header-global .page-wrapper h5,
body.bb-native-header-global .page-wrapper h6,
body.bb-native-header-global .entry-title,
body.bb-native-header-global .product_title,
body.bb-native-header-global .woocommerce-loop-product__title,
body.bb-native-header-global .woocommerce-breadcrumb-wrapper h1 {
font-family: var(--bb-font-display) !important;
color: var(--bb-color-ink) !important;
font-weight: 700;
letter-spacing: -0.01em;
}
/* Body text — paragraphs, labels, links */
body.bb-native-header-global #main p,
body.bb-native-header-global #main li,
body.bb-native-header-global #main label,
body.bb-native-header-global #main th,
body.bb-native-header-global #main td,
body.bb-native-header-global #main input,
body.bb-native-header-global #main select,
body.bb-native-header-global #main textarea,
body.bb-native-header-global #main button,
body.bb-native-header-global #main a {
font-family: var(--bb-font-sans);
}
body.bb-native-header-global #main a {
color: var(--bb-color-primary);
text-decoration: none;
transition: color .15s ease;
}
body.bb-native-header-global #main a:hover,
body.bb-native-header-global #main a:focus {
color: var(--bb-color-accent-warm);
}
/* ------------------------------------------------------------------
* 3. Page background — subtle cream so the page feels continuous with
* the homepage. Keep product cards / form panels WHITE so reading
* surfaces stay clean.
* ------------------------------------------------------------------ */
body.bb-native-header-global {
background: var(--bb-color-bg) !important;
}
body.bb-native-header-global #main,
body.bb-native-header-global .main-content {
background: transparent;
}
body.bb-native-header-global .woocommerce ul.products li.product,
body.bb-native-header-global .product,
body.bb-native-header-global .widget,
body.bb-native-header-global .woocommerce-loop-product,
body.bb-native-header-global .product-container,
body.bb-native-header-global .entry-summary,
body.bb-native-header-global .related.products,
body.bb-native-header-global .cross-sells,
body.bb-native-header-global .up-sells,
body.bb-native-header-global .shop_table,
body.bb-native-header-global .woocommerce-info,
body.bb-native-header-global .woocommerce-message,
body.bb-native-header-global .woocommerce-tabs,
body.bb-native-header-global .cart_totals,
body.bb-native-header-global .woocommerce-mini-cart {
background: #ffffff;
}
/* ------------------------------------------------------------------
* 4. Buttons — unify primary (dark brown, pill-rounded) and
* secondary/ghost. Covers core `.button`, `.btn`, `input[type=submit]`
* plus WooCommerce variants.
* ------------------------------------------------------------------ */
body.bb-native-header-global #main .button,
body.bb-native-header-global #main .btn,
body.bb-native-header-global #main button,
body.bb-native-header-global #main input[type="submit"],
body.bb-native-header-global #main input[type="button"],
body.bb-native-header-global #main .woocommerce-button,
body.bb-native-header-global #main a.button,
body.bb-native-header-global #main a.btn,
body.bb-native-header-global #main .wc-block-components-button,
body.bb-native-header-global #main .add_to_cart_button,
body.bb-native-header-global #main .single_add_to_cart_button,
body.bb-native-header-global #main .checkout-button {
font-family: var(--bb-font-sans) !important;
font-weight: 600 !important;
font-size: 14.5px !important;
letter-spacing: .01em !important;
text-transform: none !important;
border-radius: 10px !important;
border: 1.5px solid transparent !important;
padding: 12px 22px !important;
min-height: 46px !important;
line-height: 1.2 !important;
box-shadow: none !important;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease !important;
cursor: pointer;
}
/* Primary: main CTAs — dark brown filled */
body.bb-native-header-global #main .button,
body.bb-native-header-global #main a.button,
body.bb-native-header-global #main .btn:not(.btn-outline):not(.btn-link):not(.btn-outline-light):not(.btn-light):not(.btn-ghost):not(.quick-view):not(.quantity-button),
body.bb-native-header-global #main input[type="submit"],
body.bb-native-header-global #main .add_to_cart_button,
body.bb-native-header-global #main .single_add_to_cart_button,
body.bb-native-header-global #main .checkout-button,
body.bb-native-header-global #main .wc-block-components-button {
background: var(--bb-color-primary-700) !important;
color: #ffffff !important;
border-color: var(--bb-color-primary-700) !important;
}
body.bb-native-header-global #main .button:hover,
body.bb-native-header-global #main a.button:hover,
body.bb-native-header-global #main .btn:not(.btn-outline):not(.btn-link):not(.btn-outline-light):not(.btn-light):not(.btn-ghost):not(.quick-view):not(.quantity-button):hover,
body.bb-native-header-global #main input[type="submit"]:hover,
body.bb-native-header-global #main .add_to_cart_button:hover,
body.bb-native-header-global #main .single_add_to_cart_button:hover,
body.bb-native-header-global #main .checkout-button:hover,
body.bb-native-header-global #main .wc-block-components-button:hover {
background: var(--bb-color-primary) !important;
border-color: var(--bb-color-primary) !important;
color: #ffffff !important;
}
/* Quick View / Quick-view small secondary buttons — ghost */
body.bb-native-header-global #main .quick-view,
body.bb-native-header-global #main a.quick-view,
body.bb-native-header-global #main .btn-ghost,
body.bb-native-header-global #main .btn-outline,
body.bb-native-header-global #main .btn-link {
background: transparent !important;
color: var(--bb-color-ink) !important;
border-color: var(--bb-color-line-strong) !important;
box-shadow: none !important;
}
body.bb-native-header-global #main .quick-view:hover,
body.bb-native-header-global #main a.quick-view:hover,
body.bb-native-header-global #main .btn-ghost:hover,
body.bb-native-header-global #main .btn-outline:hover,
body.bb-native-header-global #main .btn-link:hover {
background: var(--bb-color-ink) !important;
color: #ffffff !important;
border-color: var(--bb-color-ink) !important;
}
/* ------------------------------------------------------------------
* 5. Form controls — subtle, soft-brown borders to match homepage.
* ------------------------------------------------------------------ */
body.bb-native-header-global #main select,
body.bb-native-header-global #main input[type="text"],
body.bb-native-header-global #main input[type="email"],
body.bb-native-header-global #main input[type="tel"],
body.bb-native-header-global #main input[type="search"],
body.bb-native-header-global #main input[type="number"],
body.bb-native-header-global #main input[type="url"],
body.bb-native-header-global #main input[type="password"],
body.bb-native-header-global #main textarea {
border: 1px solid var(--bb-color-line) !important;
border-radius: var(--bb-radius-sm) !important;
background: #ffffff !important;
color: var(--bb-color-ink) !important;
font-family: var(--bb-font-sans) !important;
padding: 10px 14px;
box-shadow: none !important;
}
body.bb-native-header-global #main select:focus,
body.bb-native-header-global #main input:focus,
body.bb-native-header-global #main textarea:focus {
border-color: var(--bb-color-primary) !important;
outline: none;
box-shadow: 0 0 0 3px rgba(108, 79, 54, .12) !important;
}
/* ------------------------------------------------------------------
* 6. Prices + product typography on archive / single pages.
* ------------------------------------------------------------------ */
body.bb-native-header-global .woocommerce-loop-product__title,
body.bb-native-header-global .product_title {
font-family: var(--bb-font-display) !important;
color: var(--bb-color-ink) !important;
font-weight: 700;
}
body.bb-native-header-global .price,
body.bb-native-header-global .amount,
body.bb-native-header-global .woocommerce-Price-amount,
body.bb-native-header-global ins .amount {
color: var(--bb-color-primary) !important;
font-family: var(--bb-font-sans) !important;
font-weight: 700;
}
body.bb-native-header-global del .amount,
body.bb-native-header-global del .woocommerce-Price-amount {
color: var(--bb-color-muted) !important;
font-weight: 500;
}
/* Breadcrumbs — cream strip with brown links, matches homepage top cream band. */
body.bb-native-header-global .woocommerce-breadcrumb,
body.bb-native-header-global .porto-breadcrumbs,
body.bb-native-header-global .breadcrumb,
body.bb-native-header-global .page-top {
background: var(--bb-color-bg-soft) !important;
color: var(--bb-color-ink-soft) !important;
font-family: var(--bb-font-sans) !important;
font-size: 13px !important;
padding: 14px 16px !important;
border: 0 !important;
}
body.bb-native-header-global .woocommerce-breadcrumb a,
body.bb-native-header-global .porto-breadcrumbs a,
body.bb-native-header-global .breadcrumb a {
color: var(--bb-color-primary) !important;
}
/* ------------------------------------------------------------------
* 7. Product cards — soft shadow, white surface, SQUARE corners so
* the product image is never clipped by a rounded frame. (Feedback
* 2026-04-19: 弧形框会挡住图片边角 → 保留阴影 + 边框，去掉 radius.)
* ------------------------------------------------------------------ */
body.bb-native-header-global .woocommerce ul.products li.product,
body.bb-native-header-global ul.products li.product,
body.bb-native-header-global .products .product {
background: #ffffff !important;
border-radius: 0 !important;
box-shadow: var(--bb-shadow-sm) !important;
overflow: visible !important;
border: 1px solid var(--bb-color-line) !important;
transition: box-shadow .25s ease, transform .25s ease;
}
body.bb-native-header-global .woocommerce ul.products li.product:hover,
body.bb-native-header-global ul.products li.product:hover,
body.bb-native-header-global .products .product:hover {
box-shadow: var(--bb-shadow) !important;
transform: translateY(-2px);
}
/* Also square the inner image wrapper that Porto/WC renders — otherwise
* the rounded `.product-image` container would still arc over the image. */
body.bb-native-header-global .woocommerce ul.products li.product .product-image,
body.bb-native-header-global .woocommerce ul.products li.product .product-image-link,
body.bb-native-header-global .woocommerce ul.products li.product .product-thumbnail,
body.bb-native-header-global ul.products li.product .product-image,
body.bb-native-header-global ul.products li.product .product-image-link,
body.bb-native-header-global ul.products li.product .product-thumbnail,
body.bb-native-header-global ul.products li.product img,
body.bb-native-header-global .products .product img,
body.bb-native-header-global .product-image img,
body.bb-native-header-global .product-thumbnail img {
border-radius: 0 !important;
}
/* ------------------------------------------------------------------
* 7b. Single product page — gallery image sits inside a soft-bordered
* white card with inner padding, so the raw 90°-corner photo has
* a breathing frame around it instead of touching the page edge.
* Image itself gets a very small radius (4px) so the corner blends.
* ------------------------------------------------------------------ */
body.bb-native-header-global.single-product .product .images,
body.bb-native-header-global.single-product .woocommerce-product-gallery,
body.bb-native-header-global .single-product .woocommerce-product-gallery {
background: #ffffff !important;
border: 1px solid var(--bb-color-line) !important;
border-radius: var(--bb-radius) !important;
padding: 18px !important;
box-shadow: var(--bb-shadow-sm) !important;
}
@media (min-width: 768px) {
body.bb-native-header-global.single-product .product .images,
body.bb-native-header-global.single-product .woocommerce-product-gallery,
body.bb-native-header-global .single-product .woocommerce-product-gallery {
padding: 28px !important;
}
}
/* Inner gallery wrapper + image: subtle radius so corners feel soft. */
body.bb-native-header-global.single-product .woocommerce-product-gallery__wrapper,
body.bb-native-header-global.single-product .woocommerce-product-gallery__image,
body.bb-native-header-global.single-product .woocommerce-product-gallery__image a,
body.bb-native-header-global.single-product .flex-viewport,
body.bb-native-header-global.single-product .product .images img,
body.bb-native-header-global.single-product .woocommerce-product-gallery img,
body.bb-native-header-global.single-product .wp-post-image {
border-radius: var(--bb-radius-sm) !important;
background: #ffffff;
}
/* Thumbnail strip below the main image — square tiles with soft border. */
body.bb-native-header-global.single-product .flex-control-thumbs,
body.bb-native-header-global.single-product .woocommerce-product-gallery ol {
margin-top: 12px !important;
}
body.bb-native-header-global.single-product .flex-control-thumbs li img,
body.bb-native-header-global.single-product .woocommerce-product-gallery ol li img {
border: 1px solid var(--bb-color-line) !important;
border-radius: var(--bb-radius-sm) !important;
padding: 4px;
background: #ffffff;
cursor: pointer;
transition: border-color .15s ease;
}
body.bb-native-header-global.single-product .flex-control-thumbs li img:hover,
body.bb-native-header-global.single-product .flex-control-thumbs li img.flex-active,
body.bb-native-header-global.single-product .woocommerce-product-gallery ol li img:hover {
border-color: var(--bb-color-primary) !important;
}
/* ------------------------------------------------------------------
* 8. Pagination — `.bb-pager` is our OWN flat structure, rendered by
* `buildbarn-pagination-unify` via the template override. No
* nested UL, no double `page-numbers` class on a parent. One set
* of rules, no !important fights.
*
* Shape of the markup we emit:
*
* ------------------------------------------------------------------ */
.bb-pager {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin: 28px 0;
padding: 0;
background: transparent;
border: 0;
}
/* When Porto places the pager inline inside its before-shop-loop toolbar
* (wrapped in `.ms-auto`), flatten the vertical margin so the pills sit
* centered in the thin gray bar instead of overflowing and getting
* clipped by the toolbar's implicit max-height. */
.ms-auto > .bb-pager,
.shop-loop-before .bb-pager,
.shop-loop-toolbar .bb-pager {
margin: 0;
justify-content: flex-end;
}
/* Visually-hidden helper (sr-only) for the nav's screen-reader title. */
.bb-pager .screen-reader-text {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
}
/* A page cell — anchor or span. */
.bb-pager > a,
.bb-pager > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid var(--bb-color-line);
background: #ffffff;
color: var(--bb-color-ink);
font-family: var(--bb-font-sans);
font-size: 14px;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
/* Interactive states — anchors only; spans are not clickable. */
.bb-pager > a:hover,
.bb-pager > a:focus-visible {
background: var(--bb-color-primary-700);
border-color: var(--bb-color-primary-700);
color: #ffffff;
}
/* The currently-active page (a non-anchor span). */
.bb-pager > .current {
background: var(--bb-color-primary-700);
border-color: var(--bb-color-primary-700);
color: #ffffff;
}
/* "…" gap separator — plain character, no button chrome. */
.bb-pager > .dots {
background: transparent;
border: 0;
color: var(--bb-color-muted);
min-width: 24px;
padding: 0;
}
/* Prev / next glyphs come from paginate_links (‹ and ›) — make them
* slightly larger so they visually balance against the numerals. */
.bb-pager > a.prev,
.bb-pager > a.next {
font-size: 18px;
line-height: 1;
}
/* ---------------------------------------------------------------
* Safety net: on pages that our template hook doesn't reach
* (e.g. Porto blog uses its own `.pagination-wrap` shell), keep
* the legacy `.page-numbers` fallback looking the same. Scoped
* ONLY to those legacy wrappers so it never triggers on our
* `.bb-pager` output above.
* --------------------------------------------------------------- */
body.bb-native-header-global .pagination-wrap > .pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin: 28px 0;
}
body.bb-native-header-global .pagination-wrap > .pagination > a,
body.bb-native-header-global .pagination-wrap > .pagination > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid var(--bb-color-line);
background: #ffffff;
color: var(--bb-color-ink);
font-family: var(--bb-font-sans);
font-size: 14px;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body.bb-native-header-global .pagination-wrap > .pagination > a:hover,
body.bb-native-header-global .pagination-wrap > .pagination > .current {
background: var(--bb-color-primary-700);
border-color: var(--bb-color-primary-700);
color: #ffffff;
}
body.bb-native-header-global .pagination-wrap > .pagination > .dots {
background: transparent;
border: 0;
color: var(--bb-color-muted);
min-width: 24px;
padding: 0;
}
/* The Porto "Show X products" viewing form sits next to WC's bb-pager. */
body.bb-native-header-global .woocommerce-viewing {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-family: var(--bb-font-sans);
font-size: 13px;
color: var(--bb-color-ink-soft);
}
body.bb-native-header-global .woocommerce-viewing select,
body.bb-native-header-global .woocommerce-viewing input {
padding: 6px 10px;
min-height: 36px;
}
/* ------------------------------------------------------------------
* 9. Wishlist page — YITH wishlist renders a shop_table that, when
* empty, produces an awkward layout (left-aligned title, full-width
* "Go shopping" bar button, stray testimonial block below).
* Recenter, constrain width, restyle the empty state as a proper
* centered card with a pill CTA.
* ------------------------------------------------------------------ */
/* Center the whole wishlist form and give it a max-width. */
body.woocommerce-wishlist.bb-native-header-global .yith-wcwl-form,
body.woocommerce-wishlist.bb-native-header-global .wishlist_table_container {
max-width: 780px;
margin: 24px auto 48px !important;
}
/* Hide the redundant Porto "Wishlist" h1 page-title (breadcrumbs already
* announce the page) so the card is the first thing you see. */
body.woocommerce-wishlist.bb-native-header-global .page-top .page-title,
body.woocommerce-wishlist.bb-native-header-global h1.page-title {
display: none !important;
}
/* Wishlist title row ("My wishlist") — center and give breathing room. */
body.woocommerce-wishlist.bb-native-header-global .wishlist-title-container,
body.woocommerce-wishlist.bb-native-header-global .wishlist-title {
text-align: center;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
body.woocommerce-wishlist.bb-native-header-global .wishlist-title h2 {
font-family: var(--bb-font-display) !important;
font-size: clamp(28px, 4vw, 36px) !important;
color: var(--bb-color-ink) !important;
margin: 0 0 18px !important;
text-align: center !important;
letter-spacing: -0.01em;
}
/* Empty-state table — drop WC's table chrome, turn the single row into
* a centered white card. */
body.woocommerce-wishlist.bb-native-header-global .wishlist_table,
body.woocommerce-wishlist.bb-native-header-global table.wishlist_table {
background: #ffffff !important;
border: 1px solid var(--bb-color-line) !important;
border-radius: var(--bb-radius-lg) !important;
box-shadow: var(--bb-shadow-sm) !important;
padding: 40px 24px !important;
display: block;
width: 100%;
margin: 0 !important;
border-collapse: separate;
}
body.woocommerce-wishlist.bb-native-header-global .wishlist_table thead,
body.woocommerce-wishlist.bb-native-header-global .wishlist_table tfoot {
display: none !important;
}
body.woocommerce-wishlist.bb-native-header-global .wishlist_table tbody,
body.woocommerce-wishlist.bb-native-header-global .wishlist_table tbody tr,
body.woocommerce-wishlist.bb-native-header-global .wishlist_table tbody td {
display: block !important;
width: 100% !important;
border: 0 !important;
padding: 0 !important;
background: transparent !important;
text-align: center !important;
}
/* Empty-state heart icon — bigger, muted warm tone. */
body.woocommerce-wishlist.bb-native-header-global .wishlist_table .wishlist-empty,
body.woocommerce-wishlist.bb-native-header-global .wishlist_table i.fa-heart {
font-size: 72px !important;
color: var(--bb-color-line-strong) !important;
margin: 8px 0 18px !important;
display: block;
}
/* Empty-state message text. */
body.woocommerce-wishlist.bb-native-header-global .wishlist_table td.wishlist-empty,
body.woocommerce-wishlist.bb-native-header-global .wishlist_table tbody td:nth-child(2) {
font-family: var(--bb-font-sans) !important;
font-size: 15px !important;
color: var(--bb-color-ink-soft) !important;
margin: 0 0 24px !important;
padding: 0 !important;
}
/* The "Go shopping" link is an inside the table.
* Restore native CTA look: centered pill, auto width, generous padding. */
body.woocommerce-wishlist.bb-native-header-global .wishlist_table .return-to-shop,
body.woocommerce-wishlist.bb-native-header-global .wishlist_table tbody tr:last-child td {
text-align: center !important;
}
body.woocommerce-wishlist.bb-native-header-global .wishlist_table .return-to-shop .button,
body.woocommerce-wishlist.bb-native-header-global .wishlist_table a.button {
display: inline-flex !important;
width: auto !important;
min-width: 200px;
margin: 8px auto 0 !important;
padding: 14px 32px !important;
border-radius: 10px !important;
}
/* Wishlist footer row (share links, etc.) — YITH ALWAYS renders the
* container even when it is empty (no share buttons configured, no
* items, etc.), which produced a ghost cream strip with a top border
* underneath the empty-state card. Two-step rule:
* 1. Give the footer zero presence by default (no margin, no border,
* no padding) so an empty one collapses to nothing.
* 2. When it HAS children, restore a subtle separator + spacing.
*
* `:has()` lets us branch on "has visible children" without JS. All
* modern browsers we support (Chrome 105+, Safari 15.4+, Firefox 121+)
* support it; the fallback (no :has) is simply "always hidden", which
* is the safer default for an empty wishlist anyway. */
body.woocommerce-wishlist.bb-native-header-global .yith_wcwl_wishlist_footer {
display: none;
margin: 0;
padding: 0;
border: 0;
}
body.woocommerce-wishlist.bb-native-header-global .yith_wcwl_wishlist_footer:has(a),
body.woocommerce-wishlist.bb-native-header-global .yith_wcwl_wishlist_footer:has(button),
body.woocommerce-wishlist.bb-native-header-global .yith_wcwl_wishlist_footer:has(input[type="submit"]) {
display: block;
text-align: center;
padding: 16px 0 0;
margin-top: 20px;
border-top: 1px solid var(--bb-color-line);
font-size: 13px;
color: var(--bb-color-muted);
}
/* Tighten the outer YITH form wrapper so when the footer collapses, the
* cream container around the wishlist doesn't still have a big empty
* bottom gap pushing the testimonials section down. */
body.woocommerce-wishlist.bb-native-header-global .yith-wcwl-form,
body.woocommerce-wishlist.bb-native-header-global .wishlist_table_container {
margin: 24px auto 24px !important;
}
/* Porto wraps the form in `.align-left.mt-3 > .box-content`. Make that
* a transparent passthrough so only OUR card draws a surface. */
body.woocommerce-wishlist.bb-native-header-global .yith-wcwl-form > .align-left,
body.woocommerce-wishlist.bb-native-header-global .yith-wcwl-form .box-content {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* (Intentionally not hiding unrelated "What Our Customers Say" block —
* that's shared page content coming from Porto's default template and
* touching it risks knock-on effects on other pages.) */
/* ------------------------------------------------------------------
* 10. Accessibility guardrails
*
* Complements the per-component focus rings above with a site-wide
* safety net so ANY focusable element Porto/Woo/YITH renders — even
* the ones we never styled — still gets a visible keyboard focus
* indicator. Uses `:focus-visible` so mouse clicks don't show rings
* (matching native browser behaviour).
*
* Also honours `prefers-reduced-motion`: animations and smooth
* transitions are shortened to a near-zero duration so users who
* opt out of motion don't see our hover transforms / fade-ins.
* ------------------------------------------------------------------ */
/* Visible focus ring on every interactive element we haven't styled
* specifically. 2px brown outline + 2px offset clears the element
* edge so it stays readable even against dark surfaces. */
body.bb-native-header-global a:focus-visible,
body.bb-native-header-global button:focus-visible,
body.bb-native-header-global input:focus-visible,
body.bb-native-header-global select:focus-visible,
body.bb-native-header-global textarea:focus-visible,
body.bb-native-header-global [tabindex]:focus-visible,
body.bb-native-header-global summary:focus-visible {
outline: 2px solid var(--bb-color-primary);
outline-offset: 2px;
border-radius: 4px;
}
/* Screen-reader-only utility — used by our pagination nav label and
* anywhere else we need an accessible name without visible text. */
body.bb-native-header-global .screen-reader-text,
body.bb-native-header-global .sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
white-space: nowrap;
border: 0;
}
/* Respect user's reduced-motion preference. Cuts our hover lifts,
* fade-ins, and any CSS transitions we've added site-wide. */
@media (prefers-reduced-motion: reduce) {
body.bb-native-header-global *,
body.bb-native-header-global *::before,
body.bb-native-header-global *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}