/**
* Theme Name: Blonwe Child
* Description: This is a child theme of Blonwe, generated by Merlin WP.
* Author: KlbTheme (Sinan ISIK)
* Template: blonwe
* Version: 1.3.9
*/
.site-header .header-inner > .col-custom-260 {
display: flex;
align-items: center;
justify-content: center;
}
.site-header .site-brand {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.site-header .site-brand img,
.site-header .header-topbar.bordered-bottom,
.site-header .header-main.bordered-bottom {
border-bottom: 0 !important;
}
.elementor-widget-blonwe-home-slider {
width: 100%;
margin: 0 auto;
}
.elementor-widget-blonwe-home-slider,
.elementor-widget-blonwe-home-slider .elementor-widget-container,
.elementor-widget-blonwe-home-slider .container-custom-large,
.elementor-widget-blonwe-home-slider .klb-slider-wrapper,
.elementor-widget-blonwe-home-slider .klb-slider,
.elementor-widget-blonwe-home-slider .slick-list,
.elementor-widget-blonwe-home-slider .klb-banner {
width: 100% !important;
/* 1440px to match the Elementor column it sits in, which is the same width as
every other section. It was 1390px, which left the slide inset 25px either
side while the sections above and below ran to the full width. */
max-width: 1440px !important;
margin-right: auto !important;
margin-left: auto !important;
box-sizing: border-box;
}
.elementor-widget-blonwe-home-slider .slick-list {
overflow: hidden !important;
}
/* Equal-height product cards, in every product list (shop and category
archives, related products, the Elementor carousels).
The grids are already flex rows, so .product stretches to the tallest item
in its row - but .product-wrapper and .product-inner inside it keep their
natural height, so the button ends up higher on a card whose title fits on
one line. The height:100% chain below carries the stretched height down to
.product-inner so the buttons can bottom-align.
Excluded: the mini-cart list and the list-style layout, which are
horizontal and would break under a column flexbox. */
.products:not(.woocommerce-mini-cart):not(.list-style) .product > .product-wrapper,
.products:not(.woocommerce-mini-cart):not(.list-style) .product .product-inner {
height: 100%;
}
.products:not(.woocommerce-mini-cart):not(.list-style) .product .product-inner {
display: flex;
flex-direction: column;
}
.products:not(.woocommerce-mini-cart):not(.list-style) .product .content-wrapper {
display: flex;
flex: 1;
flex-direction: column;
}
/* The auto margin sits on the price, not the button, so the price is pushed
down to the button instead of staying under the title. Any spare height in
the card then collects between the title and the price, keeping prices and
buttons on a common baseline whether or not the product is on sale. */
.products:not(.woocommerce-mini-cart):not(.list-style) .product .price {
margin-top: auto;
}
.products:not(.woocommerce-mini-cart):not(.list-style) .product .product-buttons {
margin-top: 0;
}
/* Slick lays carousel slides out as floats of their natural height, so the
track needs to become a flex row before the chain above can do anything. */
[class*="elementor-widget-blonwe-product-carousel"] .slick-track {
display: flex;
align-items: stretch;
}
[class*="elementor-widget-blonwe-product-carousel"] .slick-slide {
height: auto;
}
[class*="elementor-widget-blonwe-product-carousel"] .slick-slide > .product {
height: 100%;
}
/* Card title and price, matched across every product list.
These were scoped to the Elementor carousels, which is why the "Novidades"
cards on the home page and the shop grid drifted apart: same markup, two
different sets of rules. The carousels render inside a .products container
like every other list, so one selector now covers the shop and category
archives, related products and the carousels alike.
Specificity: .products .product-title (0,2,0) sets the name's line-height to
1.3 and .price (0,1,0) sets the price to 15px. The two :not() clauses here
carry this to (0,4,0), which clears both without !important, and they are the
same exclusions the equal-height rules further down already use.
min-height on the title reserves two lines so the price and button line up
across a row whatever the name's length. */
.products:not(.woocommerce-mini-cart):not(.list-style) .product-title {
/* Exactly two lines at the step's own line-height, so the price and button
stay level across a row whatever the name's length. */
min-height: calc(2em * var(--stw-h4-lh));
font-size: var(--stw-h4-size);
line-height: var(--stw-h4-lh);
}
/* 18px is stated rather than taken from a token: the body sheet has no 18px
sans step (16px base, 20px lrg), and its 18px entry is the serif long-form
one. The 1.2 line-height is kept from the carousel cards so the price sits
tightly under the name. */
.products:not(.woocommerce-mini-cart):not(.list-style) .price {
font-size: 18px;
line-height: 1.2;
margin-bottom: 16px;
}
:root {
--wine-button-color: #672823;
--wine-button-hover: #4d1d1a;
/* The gold ring in the logo, taken from LogotipoSVG_horizontal.svg (.fil0). */
--wine-gold: #bd9026;
/* Pill-shaped buttons. Any value past half the tallest button's height gives
fully rounded ends, so one number works for every size on the site. */
--wine-button-radius: 100px;
}
body .btn,
body .button,
body button.button,
body .elementor-button,
body a.add_to_cart_button,
body a.product_type_variable,
body a.single_add_to_cart_button,
body button.single_add_to_cart_button {
background-color: var(--wine-button-color) !important;
border-color: var(--wine-button-color) !important;
color: #ffffff !important;
}
body .btn:hover,
body .button:hover,
body button.button:hover,
body .elementor-button:hover,
body a.add_to_cart_button:hover,
body a.product_type_variable:hover,
body a.single_add_to_cart_button:hover,
body button.single_add_to_cart_button:hover {
background-color: var(--wine-button-hover) !important;
border-color: var(--wine-button-hover) !important;
color: #ffffff !important;
}
@media (min-width: 992px) {
body .site-header .col-custom-260 {
flex: 0 0 auto !important;
width: max-content !important;
max-width: none !important;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: flex-start;
}
body .site-header .col-custom-260 .site-brand {
margin: 0 !important;
}
}
/* Sale price: use the regular price colour instead of the theme's red */
.price ins,
.price ins bdi,
.price ins .woocommerce-Price-amount,
.price ins .woocommerce-Price-amount.amount {
color: inherit !important;
}
/* Footer: "Follow us" and payment methods sit as columns in the widgets row */
.footer-widgets .widget_footer_social .site-social,
.footer-widgets .widget_footer_payment .site-payment-cards {
display: block;
}
.footer-widgets .widget_footer_payment .payment-cards {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 18px;
row-gap: 18px;
padding-top: 4px;
}
/* The payment marks are inherently wider than a menu column, so this column
takes a double share of the row instead of wrapping every other logo. */
.footer-widgets .column-widgets > .widget-column:has(.widget_footer_payment) {
flex: 2 0 0%;
}
/* ---------------------------------------------------------------------------
Payment logos - sized to each brand's own guidelines.
--pay-logo-h: 37px is derived, not chosen. SIBS require MB WAY and
MULTIBANCO to be at least 20mm and to appear "at the same scale".
Rendering both SVGs at an equal box height puts their shared MB symbol at
an identical size (measured: 214x200 vs 213x199), so equal height IS equal
scale. MB WAY is the wider-constrained of the two at 2.051:1, so
20mm (75.59px) / 2.051 = 36.9px -> 37px. At that height MB WAY is 75.9px
(20.08mm) and MULTIBANCO 174.9px (46mm), both clearing the 20mm floor.
Gaps: Apple require clear space of 1/4 the mark height (9.25px here);
Google require 0.5x the cap-G height (4.3px here). 18px clears both.
--------------------------------------------------------------------------- */
.footer-widgets .widget_footer_payment {
--pay-logo-h: 37px;
}
.footer-widgets .widget_footer_payment .card-item img {
height: var(--pay-logo-h);
width: auto;
display: block;
}
/* Google ships its mark with the required clear space inside the artwork -
the visible badge is only 55% of the box height, so the box is scaled up
to land the badge itself at --pay-logo-h. */
.footer-widgets .widget_footer_payment .card-google-pay img {
height: calc(var(--pay-logo-h) / 0.545);
}
/* Generic, non-branded icons - no guideline to honour, sized to sit quietly
next to the brand marks rather than compete with them. */
.footer-widgets .widget_footer_payment .card-cartao-credito img,
.footer-widgets .widget_footer_payment .card-transferencia-bancaria img {
height: 26px;
}
/* Footer First Column (footer-1): all content in one colour */
.site-footer .footer-widgets .column-brand,
.site-footer .footer-widgets .column-brand *,
.site-footer .footer-widgets .column-brand a:hover,
.site-footer .footer-widgets .column-brand a:focus {
color: #1b1f22 !important;
}
/* The "(Chamada para a rede fixa nacional)" line belongs to the phone number
above it, so it sits closer than Bootstrap Reboot's global 1rem gap between
the contact lines. Matched on the tel: link rather than on position, so
reordering the widget cannot move the rule onto the wrong line. */
.site-footer .footer-widgets .column-brand .widget-body p:has(a[href^="tel:"]) {
margin-bottom: 6px;
}
/* Benefit icon boxes: copy always beside the icon, never wrapped underneath.
The theme's .module-body is a wrapping flexbox whose text block has no
flex-basis, so on narrow screens its max-content width overflows the line
and it drops below the icon - which is why the two longer benefits stack
on mobile while the short one stays inline. */
.elementor-widget-blonwe-icon-box .module-iconbox .module-body {
flex-wrap: nowrap;
}
.elementor-widget-blonwe-icon-box .module-iconbox .iconbox-content {
flex: 1 1 auto;
min-width: 0;
}
/* Product box: keep box type "Type 11" but drop its border.
Type 11 renders the card as .product-wrapper.style-6, and style-6 is the
only variant that draws a box (base.css: `border: 1px solid`). Zeroing the
width also neutralises the data-color border-colour rules and the
.hot-product `!important` override, since none of them matter at 0 width. */
.products .product .product-wrapper.style-6 {
border: 0;
}
/* Product gallery: vertical thumbnail strip on the left below 992px.
The parent theme scopes every .klb-flexslider-thumbnail.vertical rule to
@media (min-width: 992px), so these mirror them at narrower widths with
sizes that suit a phone (64px thumbs rather than 80px). */
@media screen and (max-width: 991.98px) {
.single-product-wrapper .vertical-thumbnails .woocommerce-product-gallery {
padding-left: 76px;
}
.klb-flexslider-thumbnail.vertical {
position: absolute;
left: 0;
top: 0;
width: 64px;
z-index: 9;
}
/* FlexSlider writes an inline viewport height that is only one thumb tall in
vertical mode, and its is absolutely positioned - so `auto` collapses
the strip to nothing. The parent theme pins 480px for desktop; this is the
phone equivalent, tall enough for four 64px thumbs plus their margins. */
.klb-flexslider-thumbnail.vertical .flex-viewport {
height: 276px !important;
}
.klb-flexslider-thumbnail.vertical li,
.klb-flexslider-thumbnail.vertical li img {
width: 64px;
height: auto;
}
.klb-flexslider-thumbnail.vertical li {
margin-bottom: 5px;
}
}
/* ---------------------------------------------------------------------------
Cart (WooCommerce Cart block)
The cart line items are rendered client-side by the block's React
components, so there is no PHP hook or block attribute for the pieces
below - they are styled here.
--------------------------------------------------------------------------- */
/* Drop the short description repeated under every cart line item. */
.wc-block-components-product-metadata__description {
display: none;
}
/* Checkout: hide the "Save 2,00 €" savings badge on order-summary line items.
Scoped to checkout - the cart shows the same badge and still does. */
.woocommerce-checkout .wc-block-components-sale-badge {
display: none;
}
/* Boxed layout: every full-bleed band (header rows, Elementor sections,
footer rows) is capped at the site width, so background colours stop at the
same 1440px edge the .container already uses instead of running to the
viewport edge. One rule on the wrapper rather than per-section overrides.
Overlays and floating UI (.site-overlay, the mobile bottom bar, the
WhatsApp button, the search modal) are position:fixed, so they resolve
against the viewport and stay full width - which is what they need. */
.page-content {
max-width: var(--theme-site-width);
margin-left: auto;
margin-right: auto;
}
/* WooCommerce Checkout block: "Finalizar encomenda" button.
The blocks expose no colour controls - woocommerce/proceed-to-checkout-block
declares no colour supports - and Blonwe is a classic theme, so there is no
global-styles UI either. Reuses the same --wine-button-color the rest of the
site's buttons already use. */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout .wc-block-components-button.contained {
background-color: var(--wine-button-color);
border-color: var(--wine-button-color);
color: #fff;
}
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.contained:hover {
background-color: var(--wine-button-hover);
border-color: var(--wine-button-hover);
color: #fff;
}
/* Free-shipping notice: drop the bookmark icon before the message.
The icon is hardcoded in the plugin template
(blonwe-core/.../shipping-progress-bar/free-shipping.php), so there is no
setting for it. The theme already hides it this way inside the mini-cart;
this extends that to every place the notice appears. */
.klb-free-shipping .shipping-notice i {
display: none;
}
/* Cart totals: hide the "Envio para …" destination line.
WooCommerce prints it inside the shipping row, gated to is_cart(), and it
also carries the "Alterar morada" link. Scoped to the cart body class so
the same markup elsewhere is unaffected. */
.woocommerce-cart .woocommerce-shipping-destination {
display: none;
}
/* Cart/checkout totals: line the shipping amount up with its "Portes de envio"
label. The method
carries a 15px bottom margin, and because the table
cells are vertically centred that margin lifts the amount above the label's
baseline. Dropping it on the last item keeps the spacing between methods
when more than one is offered. The selector repeats the #shipping_method
id because the theme's `ul#shipping_method li` rule would otherwise win on
specificity. */
.cart_totals ul#shipping_method li:last-child {
margin-bottom: 0;
}
/* Header dropdowns: remove the dead gap under the menu item.
Root cause: .klb-menu-nav.horizontal .sub-menu uses `top: calc(100% - 1px)`,
but the
is position:static, so 100% resolves against .site-header
(134px tall) instead of the item (bottom at 114px). The panel therefore
opens 19px below its trigger. Crossing that dead band drops :hover, and the
closed panel sets pointer-events:none so it can never be re-entered - the
submenu was unreachable by mouse.
Fix is geometric, not timing based: pull the panel's box up by the 19px so
it is flush with the item, and add the same 19px back as padding so the
visible contents do not move. Pointer travel from trigger to panel is now
continuous, which is what a dropdown should be - no hover delay, no
lingering panel, nothing to mistime. */
.klb-menu-nav.horizontal .klb-menu > .menu-item-has-children > .sub-menu {
margin-top: -19px;
padding-top: calc(2.375rem + 19px);
}
/* Boxed mega menu: columns the width of an ordinary dropdown, panel sized to
fit them, sitting under its own trigger. The theme gives the panel
width:100% of the 1360px container and each column flex:1, so two columns
become 637px each and the panel spans the whole page. */
.klb-menu-nav.primary-menu .klb-menu .mega-menu.mega-menu-boxed {
position: relative;
}
.klb-menu-nav.primary-menu .klb-menu .mega-menu.mega-menu-boxed > .sub-menu {
width: max-content;
left: 0;
right: auto;
}
.klb-menu-nav.primary-menu .klb-menu .mega-menu.mega-menu-boxed > .sub-menu > li {
flex: 0 0 208px;
}
/* Mega menu: leave the page at its own colour instead of veiling it.
The theme dims the whole viewport with .site-overlay while the JS keeps
body.mega-menu-hover set - base.css takes it to opacity .2 in the light
skin, base-dark.css to .6 - both at the same specificity as a plain
override, so the class is repeated to outrank them without !important.
Hiding it as well as clearing the opacity keeps the invisible layer from
swallowing clicks on the page underneath. The theme dims
.mobile-filter-overlay from the same rule, and that element is present on
every shop and category page, so it has to be covered too - otherwise those
pages still darken while the homepage looks fine. It is scoped to
.mega-menu-hover so the sidebar filter drawer keeps its own backdrop, which
sidebarfilter.js animates with GSAP inline styles. */
body.mega-menu-hover .site-overlay.site-overlay,
body[data-theme].mega-menu-hover .site-overlay.site-overlay,
body.mega-menu-hover .mobile-filter-overlay.mobile-filter-overlay,
body[data-theme].mega-menu-hover .mobile-filter-overlay.mobile-filter-overlay {
opacity: 0;
visibility: hidden;
}
/* Cart/Checkout blocks: match the classic totals presentation.
The shipping row repeats the method name under its value ("Portes de envio"
below "30,00 €"), which duplicates the row label once that label is renamed
to Portes de envio. */
.wc-block-components-totals-shipping .wc-block-components-totals-item__description,
.wc-block-components-totals-item__description:empty {
display: none;
}
/* Cart/Checkout blocks: give the summary column the same grey panel the
classic templates use for "Total no carrinho"
(.cart-wrapper .cart-collaterals .cart_totals in base.css:17413-17422).
The gap between the two columns already comes from the main column's
padding-right, so the sidebar only needs its own padding swapped for even
panel padding - adding a margin here pushed the row past 100% and wrapped
the sidebar underneath the items. align-self keeps the panel hugging its
content rather than stretching to the items column's height. */
@media screen and (min-width: 992px) {
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
align-self: flex-start;
padding: 2.1875rem;
background-color: var(--color-gray25);
border-radius: var(--theme-radius-base);
}
}
/* Panel heading: match the classic rule - one divider, under the title only.
WooCommerce rules this heading above *and* below and pads it 20px on both
sides; the heading is the first thing in the panel, so the top divider and
its padding are dropped. The `body` prefix is needed because WooCommerce's
own rule ties at (0,2,0) and loads after this file. */
body .wc-block-components-sidebar .wc-block-components-checkout-order-summary__title {
margin-top: 0;
margin-bottom: 0.75rem;
padding-top: 0;
padding-bottom: 0.625rem;
border-top: 0;
border-bottom: 1px solid var(--color-gray300);
}
/* Footer note strip: full-width row under the widget columns, used for the
VAT notice. The text lives in a Custom HTML widget in Appearance > Widgets >
Footer Fifth Column, so it stays editable without touching this file. */
.footer-widgets .footer-inner > .column.footer-note {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
margin-top: 0;
padding-top: 0;
}
.footer-widgets .footer-note .footer-vat-notice {
margin: 0;
font-size: 0.8125rem;
}
/* Age verification popup (Surbma Yes/No Popup).
The plugin ships UIkit's default chrome - grey header and footer bars with
divider rules, a blue primary button and a washed-out secondary one - none of
which belongs on this site. Rules are keyed on the popup's id so they outrank
the plugin's single-class UIkit selectors without !important, and they read
the theme's own custom properties so the popup follows any Customizer change
to the brand colour or radius. */
#surbma-yes-no-popup.uk-modal {
background: rgba(27, 31, 34, 0.7);
}
/* Centre the dialog in the viewport. The plugin leaves it block-level with a
fixed 50px top margin, which pins it near the top of the screen. Scoped to
.uk-open - the class the plugin adds when showing and removes when hiding -
so the inline display:none it sets on close still wins. */
#surbma-yes-no-popup.uk-modal.uk-open {
display: flex !important;
padding: 1.5rem;
}
#surbma-yes-no-popup .uk-modal-dialog {
/* auto margins centre a flex item on both axes and, unlike align-items,
still let a dialog taller than the viewport scroll to its own top. */
margin: auto;
width: 100%;
max-width: 560px;
padding: 3rem;
border-radius: var(--theme-radius-base, 4px);
box-shadow: 0 18px 50px rgba(27, 31, 34, 0.22);
}
/* Drop the grey bars and divider rules; the dialog is one surface. */
#surbma-yes-no-popup .uk-modal-header,
#surbma-yes-no-popup .uk-modal-footer {
margin: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
}
#surbma-yes-no-popup .uk-modal-header {
margin-bottom: 1.25rem;
}
#surbma-yes-no-popup .uk-modal-header h2 {
margin: 0;
/* Was a hardcoded "EB Garamond": once the heading face moved to Inter that
name stopped being requested and this fell back to a system serif. It
follows the Customizer face and the H2 step now. */
font-family: var(--theme-heading-font);
font-size: var(--stw-h2-size);
font-weight: 600;
line-height: var(--stw-h2-lh);
letter-spacing: 0;
color: #1b1f22;
text-transform: none;
}
#surbma-yes-no-popup .uk-modal-content {
margin-bottom: 2rem;
font-family: "DM Sans", sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #1b1f22;
}
#surbma-yes-no-popup .uk-modal-footer {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
#surbma-yes-no-popup .uk-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
height: auto;
padding: 0.8125rem 1.25rem;
border-radius: 2px;
font-family: "DM Sans", sans-serif;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
text-transform: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* "Tenho mais de 18 anos" - the affirmative action, styled like Adicionar ao carrinho. */
/* UIkit strips the footer's outer padding via
.uk-modal-footer > :first-child { padding-top: 0 } and the matching
:last-child { padding-bottom: 0 }. That reset is written for block content,
but the footer's children here are the two buttons - so the first loses its
top padding and the second its bottom, and each label sits off-centre in a
different direction. Repeating the class outranks those pseudo-class
selectors without !important. */
#surbma-yes-no-popup .uk-modal-footer > .uk-button.uk-button {
padding-top: 0.8125rem;
padding-bottom: 0.8125rem;
}
#surbma-yes-no-popup .uk-button-primary {
background-color: var(--theme-primary-color, #672823);
border: 1px solid var(--theme-primary-color, #672823);
color: #fff;
}
#surbma-yes-no-popup .uk-button-primary:hover,
#surbma-yes-no-popup .uk-button-primary:focus {
background-color: #4e1e1a;
border-color: #4e1e1a;
color: #fff;
}
/* "Ainda não tenho 18 anos" - present, but visibly the secondary choice. */
#surbma-yes-no-popup .uk-button-default {
background-color: transparent;
border: 1px solid rgba(27, 31, 34, 0.2);
color: #1b1f22;
}
#surbma-yes-no-popup .uk-button-default:hover,
#surbma-yes-no-popup .uk-button-default:focus {
background-color: transparent;
border-color: #1b1f22;
color: #1b1f22;
}
@media screen and (max-width: 480px) {
#surbma-yes-no-popup .uk-modal-dialog {
padding: 2rem 1.5rem;
}
#surbma-yes-no-popup .uk-modal-header h2 {
font-size: 1.625rem;
}
#surbma-yes-no-popup .uk-button {
flex: 1 1 100%;
}
}
/* Off-canvas menu: drop the repeated logo and the "Main Menu" label.
The drawer opens from the header, which already shows the logo, and a
heading that says "Main Menu" above the main menu earns nothing. Neither is
exposed as a setting - the logo is the shared site logo and the heading is
hardcoded as esc_html_e('Main Menu','blonwe') in
blonwe/includes/header/models/canvas-menu.php:29 - so they are hidden here.
The heading is matched by what follows it, so the other drawer headings
(Browse Categories, the bottom menu and contact titles) are untouched. */
.site-drawer .drawer-header .site-brand {
display: none;
}
/* Keep the close button where it was once the logo is gone. */
.site-drawer .drawer-header .site-close {
margin-left: auto;
}
.site-drawer .drawer-heading:has(+ .drawer-primary) {
display: none;
}
/* Off-canvas menu: drop the copyright row. The drawer is a navigation panel,
not a page footer, and the credit already sits in the real footer. It cannot
be emptied in the Customizer because blonwe_copyright feeds both, and the
theme falls back to a hardcoded KlbTheme string when it is blank
(blonwe/includes/header/models/canvas-menu.php:104-111). */
.site-drawer .drawer-footer {
display: none;
}
/* Cart totals panel: the subtotal is the only row, set bold with no rule
under it. The IVA breakdown was removed from
blonwe-child/woocommerce/cart/cart-totals.php. */
/* …and drop the rule under the subtotal, which otherwise draws the top edge
of that same block. */
.cart-collaterals .cart_totals .shop_table tr.cart-subtotal th,
.cart-collaterals .cart_totals .shop_table tr.cart-subtotal td,
.cart_totals table tr.cart-subtotal th,
.cart_totals table tr.cart-subtotal td {
border-bottom: 0;
}
/* The theme sets .cart-collaterals .cart_totals .shop_table tr th to 400
(specificity 0,4,1), so the subtotal label needs at least that reach. */
.cart-collaterals .cart_totals .shop_table tr.cart-subtotal th,
.cart-collaterals .cart_totals .shop_table tr.cart-subtotal td,
.cart_totals table tr.cart-subtotal th,
.cart_totals table tr.cart-subtotal td {
font-weight: 700;
}
/* Quantity stepper: the button at its limit reads as dead rather than live.
pointer-events keeps the click from reaching Blonwe's own handler, so no
pointless cart update is fired. State is set by assets/js/quantity-limits.js. */
.quantity .quantity-button.is-disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* Quantity stepper with no chrome. The outline came from two places: a 1px
border plus a box-shadow on the .quantity wrapper, and a second box-shadow
on the input itself which drew the divider around the middle cell. Clearing
only the border leaves both shadows behind, so all three go. */
.quantity,
.woocommerce .quantity,
.woocommerce-cart-form .quantity {
border: 0;
box-shadow: none;
}
/* The input's shadow and fill come from a global rule,
body:not(.input-variation-filled)[data-color="default"] input[type=...],
which outranks a plain .quantity input.qty, so match its depth. */
body[data-color] .quantity input.qty,
body[data-color] .quantity input.qty.text,
.quantity input.qty,
.woocommerce .quantity input.qty {
border: 0;
box-shadow: none;
background-color: transparent;
}
/* Cart remove control: a dark-red cross on white, instead of a white cross on
a red disc. The circle stays (radius 50%) so the hit area is unchanged - it
just no longer reads as a warning badge next to every line. */
.product-remove a.remove,
.product-remove a.remove:hover,
.product-remove a.remove:focus,
.woocommerce .product-remove a.remove,
.woocommerce .product-remove a.remove:hover {
color: #672823;
background-color: #ffffff;
}
/* Hide the cart actions row. It is not removed from the DOM on purpose: that
cell carries the woocommerce-cart-nonce, and blonwe_update_cart() saves
quantity changes by firing $("[name='update_cart']").trigger("click") on the
button inside it. Deleting the markup would silently stop quantities saving.
Coupons are disabled store-wide, so nothing else in here is reachable. */
.woocommerce-cart-form .actions {
display: none;
}
/* ---------------------------------------------------------------------------
Mobile cart row.
Blonwe's own mobile handling hides the price and subtotal entirely, absolutely
positions the remove control over the thumbnail, and leaves the name squeezed
into a narrow column. That loses the two numbers a customer most wants to see.
Rebuilt as a grid so each line item reads:
[img] Product name, full width x
- 1 + 18,00 € 18,00 EUR
Five columns: the name spans the content width, the remove control sits at
the far right of the first line, and quantity / unit price / line total share
the second. Breakpoint matches the theme's own 991.98px.
--------------------------------------------------------------------------- */
@media screen and (max-width: 991.98px) {
.shop_table.woocommerce-cart-form__contents thead {
display: none;
}
.shop_table.woocommerce-cart-form__contents tbody tr.woocommerce-cart-form__cart-item {
display: grid;
/* Two equal 1fr spacer columns sit between quantity, price and line total.
Being equal, they always take the same width, so the two gaps stay
identical no matter how wide the values are - and because the last column
ends at the right edge, the row fills the full line. */
grid-template-columns: auto auto 1fr auto 1fr auto auto;
grid-template-areas:
"thumb name name name name name remove"
"thumb quantity . price . subtotal subtotal";
align-items: center;
column-gap: 0.75rem;
row-gap: 0.625rem;
padding: 1rem 0;
}
.shop_table.woocommerce-cart-form__contents tbody tr.woocommerce-cart-form__cart-item > td {
border: 0;
padding: 0;
}
.shop_table.woocommerce-cart-form__contents td.product-thumbnail { grid-area: thumb; }
.shop_table.woocommerce-cart-form__contents td.product-name { grid-area: name; }
/* The stepper wrapper keeps 26px of right padding to hold the absolutely
positioned + button, and ~6px of it sits beyond the glyph. Without this the
quantity->price gap measures 6px wider than price->total at every
column-gap value. Reclaiming it makes the two gaps identical. */
.shop_table.woocommerce-cart-form__contents td.product-quantity {
grid-area: quantity;
margin-right: -6px;
}
/* The theme hides these below 992px; they are the point of the exercise. */
.shop_table.woocommerce-cart-form__contents td.product-price {
grid-area: price;
display: block;
}
.shop_table.woocommerce-cart-form__contents td.product-subtotal {
grid-area: subtotal;
display: block;
justify-self: end;
font-weight: 700;
}
/* Out of the absolute positioning the theme uses, and onto the right edge. */
.shop_table.woocommerce-cart-form__contents td.product-remove {
grid-area: remove;
position: static;
left: auto;
justify-self: end;
align-self: start;
}
}
/* Tighten the quantity stepper.
The - and + are position:absolute, pinned inside the wrapper's 32px left and
right padding - so their own width and margins change nothing, and that
padding IS the gap. Measured on the live page: 32px padding leaves 20px of
clear space between each glyph and the number, 26px leaves 10px - half.
Height is untouched so the 44px tap target survives. */
.quantity,
.woocommerce .quantity {
padding-left: 26px;
padding-right: 26px;
}
body[data-color] .quantity input.qty,
body[data-color] .quantity input.qty.text,
.quantity input.qty,
.woocommerce .quantity input.qty {
width: 1.5rem;
padding-left: 0;
padding-right: 0;
text-align: center;
}
/* Mobile: the grey surface belongs to the progress bar and the cart value, not
to the whole column.
base.css:17412 gives .cart_totals a grey panel only from 992px up, so below
that the theme paints nothing. Here the pair inside .cart-total-panel takes
the panel instead and "Finalizar compra" sits outside it - see
blonwe-child/woocommerce/cart/cart-totals.php for the wrapper. The column
around them stays white because it is also the pinned bar further down this
file, which has to be opaque for content to scroll under it. */
@media screen and (max-width: 991.98px) {
.cart-wrapper .cart-collaterals {
padding: 1.25rem;
border-radius: var(--theme-radius-base);
}
body[data-color="default"] .cart-wrapper .cart-collaterals,
body[data-color="custom"][data-theme="light"] .cart-wrapper .cart-collaterals {
background-color: #fff;
}
}
/* ---------------------------------------------------------------------------
Mobile: pin the whole totals panel to the bottom of the viewport on the cart.
The bar is .cart-collaterals rather than just the button, so "Total no
carrinho" and the amount ride directly above "Finalizar compra" - the value
and the action stay together instead of the value scrolling away. One fixed
container also avoids two separately pinned elements whose heights have to be
kept in sync by hand.
--------------------------------------------------------------------------- */
@media screen and (max-width: 991.98px) {
body.woocommerce-cart .cart-wrapper .cart-collaterals {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
margin: 0;
padding: 0.875rem 1rem;
padding-bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
border-radius: 0;
box-shadow: 0 -2px 12px rgba(27, 31, 34, 0.1);
}
/* The button is no longer pinned on its own - the panel around it is. Its own
margin is dropped so the bar's padding is all that surrounds it, the same
above as below. */
body.woocommerce-cart .wc-proceed-to-checkout {
position: static;
margin: 0;
padding: 0;
background: none;
box-shadow: none;
}
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
display: block;
width: 100%;
margin: 0;
text-align: center;
}
/* Room to scroll past the bar, at the end of the page rather than under the
cart. Putting it on .cart-wrapper left a band of empty page between the cart
total and the footer; the footer already follows the cart, so the only thing
that actually needs clearing is the very bottom of the document, where the
bar would otherwise sit over the last of the footer. 6rem covers the bar's
86px with room to spare. */
body.woocommerce-cart .cart-wrapper {
padding-bottom: 0;
}
body.woocommerce-cart .site-footer {
/* The theme sets the footer 30px clear of the page content. On the cart the
grey total band is the last thing above it, and the two read as one strip
when they meet. */
margin-top: 0;
}
}
/* No focus ring around a notice.
WooCommerce gives each notice tabindex="-1" and focuses it so a screen reader
announces it, and the browser then draws its default ring - the blue line
around the box. Nothing here is interactive, and the element cannot be tabbed
to, so the ring marks nothing a keyboard user can act on; links inside the
notice keep their own. */
.woocommerce-error[tabindex="-1"]:focus,
.woocommerce-message[tabindex="-1"]:focus,
.woocommerce-info[tabindex="-1"]:focus {
outline: none;
}
/* No tick after an AJAX add to cart.
WooCommerce's add-to-cart.js appends Ver carrinho
beside the button, and Blonwe renders it as a 30x35 brand-coloured square with
the label zeroed out and a klbtheme glyph on ::before - the tick. The link is
written into the script with no filter to switch it off, so it is hidden here
rather than removed. One rule covers every place a product card appears: the
shop grid, the home carousels, category pages and related products.
display:none also keeps it out of the accessibility tree, which is just as
well - it announced only as "Ver carrinho" with no visible text. The header
cart icon still updates its count, so nothing is lost. a.added_to_cart in the
theme weighs (0,1,1) and the body prefix clears it without !important. */
body a.added_to_cart {
display: none;
}
/* "Continuar a comprar" at the top of the cart.
Styled as a secondary action - outlined rather than filled - so it never
competes with "Finalizar compra". It inherits the pill radius and 14px from
the shared .button rules; only the fill is overridden. That needs !important
because the rule it is overriding (line 159) carries !important itself, which
no amount of specificity gets past.
One value above and below, so the header, the link and the item list keep an
even rhythm - the link no longer sits flush against the header. */
.serratopwines-continue-shopping {
margin: 1.5rem 0;
}
/* .cart-wrapper brings its own top margin - 2.5rem on desktop, 1.25rem below
992px - which is the theme's gap between the page and the cart when nothing
sits above it. It is an adjacent sibling, so the two margins collapse to the
larger and the gap under the link would be 40px on desktop against 24px
above it. Zeroing it leaves the link's own margin to set both. */
body.woocommerce-cart .cart-wrapper {
margin-top: 0;
}
/* Phones: the link sits straight under the header, and the totals panel moves
up under it (cart-panel.js) and runs edge to edge.
The panel is inside .container, which carries the page gutter, so the
negative side margins pull it back out to the window - a block element with
negative left and right margins widens to fill them. The radius goes with
them: there are no corners left to round. */
@media screen and (max-width: 991.98px) {
.serratopwines-continue-shopping {
margin: 1rem 0;
}
.serratopwines-cart-panel-slot.is-bottom:not(:empty) {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border-radius: 0;
}
/* Clear of the last item's rule. :not(:empty) keeps the slot invisible until
the script fills it, so a failed move leaves no stray grey band. */
.serratopwines-cart-panel-slot.is-bottom:not(:empty) {
margin-top: 1rem;
}
/* Nothing hanging below the last item.
Two things sit under it. Each row carries its rule on its own top edge, and
the row after the items is WooCommerce's actions row - 0px tall here, since
coupons are off, but still drawing that rule as a line with nothing beneath
it. And rows pad themselves 16px away from the next one, which the last row
has no need of. :last-child cannot name the last item, because the actions
row is the real last child; :has() picks the item whose next sibling is not
one. The selector repeats the theme's own shape because its rule for these
rows weighs (0,3,2) and loads later; the class alone would lose. */
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item):last-child {
border-top: 0;
}
.shop_table.woocommerce-cart-form__contents tbody tr.woocommerce-cart-form__cart-item:has(+ tr:not(.woocommerce-cart-form__cart-item)) {
padding-bottom: 0;
}
}
body .serratopwines-continue-shopping a.button {
display: inline-block;
background-color: transparent !important;
box-shadow: inset 0 0 0 1px var(--wine-button-color);
color: var(--wine-button-color) !important;
}
body .serratopwines-continue-shopping a.button:hover,
body .serratopwines-continue-shopping a.button:focus {
background-color: var(--wine-button-color) !important;
color: #fff !important;
}
/* Cart totals reduced to one line: heading left, cart value right. The h2 keeps
its own styling but loses the rule beneath it - with a single line there is
nothing left to separate. See blonwe-child/woocommerce/cart/cart-totals.php. */
body .cart-total-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
body .cart-total-line h2 {
margin: 0;
padding: 0;
border: 0;
/* The theme's h2 is 32px on desktop, which wraps "Total no carrinho" onto two
lines inside a 340px panel and leaves the amount stranded beside the first.
Sized to fit the label and the value on one line at both breakpoints. */
font-size: 1.25rem;
line-height: 1.3;
white-space: nowrap;
}
body .cart-total-line__amount {
font-weight: 700;
white-space: nowrap;
}
/* Free-shipping progress bar: it sits in the totals column at every width.
cart-totals.php renders it there, inside .cart-total-panel with the cart
value. Blonwe's own copy above the product table is off at the source - the
Customizer's "Cart page" location under Free Shipping Bar - rather than
hidden here, so the markup is not emitted twice.
From 992px up the theme already paints the whole column grey
(base.css:17412-17422), so the pair needs no box of its own. Below that the
theme paints nothing, so the bar and the value take the panel themselves and
the checkout button sits outside it on the page. 1rem matches the padding the
block checkout's sidebar uses at the same width. */
@media screen and (max-width: 991.98px) {
.serratopwines-cart-panel-slot.is-bottom:not(:empty) {
padding: 1rem;
background-color: var(--color-gray25);
border-radius: var(--theme-radius-base);
}
body[data-color="custom"][data-theme="light"] .serratopwines-cart-panel-slot.is-bottom:not(:empty) {
background-color: rgba(var(--color-rgb), 0.06);
}
/* The progress bar draws its own box, so it needs no surface behind it - only
clearance from the item list below. */
.serratopwines-cart-panel-slot.is-top:not(:empty) {
margin-bottom: 1rem;
}
.serratopwines-cart-panel-slot.is-top .cart-total-panel {
padding: 0;
background-color: transparent;
}
}
.cart-total-panel .serratopwines-cart-progress .klb-free-shipping {
margin-bottom: 1.25rem;
}
/* On phones the total line is lifted out, leaving the progress bar alone in the
panel - its gap to the value below it then has nothing to separate. */
.cart-total-panel .serratopwines-cart-progress:last-child .klb-free-shipping {
margin-bottom: 0;
}
/* Block checkout: one border per checkbox, not two.
Blonwe draws its own checkbox face on input[type="checkbox"]::after - a
1.0625rem bordered square with a background and box-shadow (base.css:7726
and :7746) - plus a glyph on :checked::before (base.css:7786). That works on
the classic forms it was written for, where the real input is hidden behind
it.
WooCommerce Blocks styles the input itself instead (20px, 1px border, 4px
radius) and renders the tick as a sibling