/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.9
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/
/*************** ADD YOUR CUSTOM CSS HERE ***************/
/* The Instagram share button was removed — see share.php. Its styling went
with it; git history has the rules if the button is ever brought back. */
/* Sticky footer: Porto has no min-height/flex rule on .page-wrapper (the
div right after , wrapping header + #main + .footer-wrapper), so on
short pages (e.g. empty cart) the footer ends up mid-screen with blank
space below it instead of pinned to the viewport bottom.
#main gets the leftover space; header/footer keep their natural height. */
html, body {
height: 100%;
}
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page-wrapper #main {
flex: 1 0 auto;
width: 100%;
}
#side-nav-panel .share-links {
padding: 0 15px;
text-align: left;
}
.page-wrapper .footer-wrapper {
flex-shrink: 0;
}
/* Without this the flex change above blows the page up.
A flex item gets min-width:auto, so #main stops being clamped to the
container width and is sized by its own max-content instead. Porto's posts
grid sizes .porto-tb-item as a percentage of that container, so the two
feed each other and the layout runs away: measured on the homepage at
390px, #main came out 190984px wide and the document 814416px tall.
A definite max-width breaks the cycle (min-width:0 alone does not — the
item is still sized by max-content, it is just allowed to be narrower). */
.page-wrapper > * {
max-width: 100%;
}
/* Visually-hidden H1 injected by inc/seo-h1-fallback.php on pages that have
no H1 of their own. Standard clip technique: out of view, no layout shift,
still readable by SEO tools and screen readers (unlike display:none). */
.wc-seo-h1-fallback {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Só na pesquisa de artigos (blog): numa pesquisa de produtos o body também tem .search,
e :has(> .porto-tb-meta) apanhava a secção inteira do cartão (título, preço, botão). */
.search:not(.post-type-archive-product) .porto-section:has(> .tb-meta-modified_date),
.search:not(.post-type-archive-product) .porto-section:has(> .porto-tb-meta),
.search:not(.post-type-archive-product) .porto-tb-meta.tb-meta-category,
.wc-seo-h1-fallback {
display: none;
}
.archive.search #main {
background-color: transparent;
}
.archive.search #main p.batonnage-sem-resultados__texto {
margin: 0 auto 24px;
}
/* Produto Detalhes shortcode - single product */
.produto-detalhes {
width: 100%;
}
.produto-detalhe-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e8e8e8;
}
.produto-detalhe-label {
font-weight: 700;
color: #333;
font-size: 15px;
font-weight: 600;
color: #2B2B2B;
}
.produto-detalhe-value {
color: #777;
text-align: right;
}
.produto-detalhe-value a {
color: #777;
text-decoration: none;
}
.produto-detalhe-value a:hover {
color: #333;
}
.single-product .tab-content p {
line-height: 23px !important;
padding: 10px;
}
.woocommerce-account .main-content {
padding: 50px 0;
}
/* Hide Uncategorized from sidebar category lists */
.widget_product_categories li.cat-item-uncategorized,
.sidebar li.cat-item-uncategorized,
.widget_layered_nav li.cat-item-uncategorized,
.wishlist-share.yith-wcwl-share {
display: none !important;
}
#footer .wpcf7-submit {
height: 42px;
position: relative;
top: 3px;
right: 3px;
}
#footer .mb-lg-4 {
margin-bottom: 0 !important;
}
/* Add-to-cart confirmation: match the product title's typeface.
Revisão site final, p. 3 — "cor errada, tipografia errada".
Porto builds the message as
%s
foi adicionado ao seu carrinho.
inside .woocommerce-message, and it rendered in Lato 500/700 while the
product title beside it is Marcellus 400. Values below are the title's
computed style (h2.product_title.entry-title).
Only the product name takes the title face. The trailing
"foi adicionado ao seu carrinho." keeps Lato via Porto's .font-weight-medium
utility, so the sentence reads as body copy with the wine name set like a
heading — the same pairing used across the site.
Deliberately NOT scoped to .woocommerce-message on its own: that class carries
every WooCommerce success message ("Produto removido", coupon feedback, …),
which should keep the body font throughout.
Font size is left at the notice's own 16px rather than the title's 40px — set
`font-size: 40px` here too if a full-size heading is wanted. */
.woocommerce-message .single-cart-notice {
font-family: Marcellus, sans-serif;
font-weight: 400;
letter-spacing: -0.4px;
color: #222529;
}
/* Shop sidebar: collapsible filter widgets.
Behaviour and the .pc-acc / .pc-acc-open classes come from
inc/shop-sidebar-accordion.php. Widgets without the .pc-acc class were never
wired up (no title, or nothing to collapse) and are left exactly as they were. */
.sidebar-content > .widget.pc-acc > .widget-title {
margin-bottom: 0;
}
.sidebar-content > .widget.pc-acc.pc-acc-open > .widget-title {
margin-bottom: 1rem;
}
/* The toggle sits inside the existing heading, so it inherits Porto's widget
title typography instead of restating it. */
.pc-acc-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0;
background: none;
border: 0;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
/* Chevron: down when closed, up when open. */
.pc-acc-toggle::after {
content: "";
flex: 0 0 auto;
width: 0.45em;
height: 0.45em;
margin-left: 0.75em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-25%) rotate(45deg);
transition: transform 0.2s ease;
}
.widget.pc-acc.pc-acc-open > .widget-title .pc-acc-toggle::after {
transform: translateY(10%) rotate(-135deg);
}
/* Collapsed: hide the widget body, keep the heading.
!important because Porto's slideToggle() writes an inline display on the body,
which would otherwise win over this rule. */
.widget.pc-acc:not(.pc-acc-open) > *:not(.widget-title) {
display: none !important;
}
/* Porto's own "+" toggle in the widget title (WooWidgetToggle, js/wc-widget.js).
The accordion script removes it, but Porto injects it on its own schedule, so
this also covers the case where its script runs last. Scoped to the direct
child of the title so the separate sub-category toggles keep working. */
.widget.pc-acc > .widget-title > .toggle {
display: none !important;
}
/* Shop: restore the page numbers.
511 products at 12/page = 43 pages, but no page numbers rendered. Porto splits
the shop toolbar in two and only shows numbers in the bottom one:
.shop-loop-before .page-numbers { display: none } <- top toolbar
.shop-loop-after .page-numbers { display: block } <- bottom toolbar
The shop page is built in WPBakery and only the *before-loop* toolbar element
was placed (.shop-loop-after is absent from the DOM), so the only pagination
on the page was the hidden one, leaving just the "Mostrar: 12/24/36" selector.
This reveals the numbers in the top toolbar so pagination works now. The nav
is made a wrapping flex row because the numbers plus the "Mostrar" selector
do not fit on one line in that column — without it they collide.
PROPER FIX: add the after-loop shop toolbar element to the shop page in the
builder. That gives conventional pagination under the grid, already styled by
Porto, and this block can then be deleted. */
.shop-loop-before .woocommerce-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px 15px;
}
.shop-loop-before .woocommerce-pagination .woocommerce-viewing {
margin: 0;
}
.shop-loop-before .woocommerce-pagination ul.page-numbers {
display: inline-block;
margin: 0;
}
.shop-loop-before .woocommerce-pagination ul.page-numbers li {
float: left;
}
.shop-loop-before .woocommerce-pagination li .page-numbers {
display: block;
}
/* Copy of the page numbers placed under the product grid by
inc/shop-pagination.php. Mirrors Porto's own .shop-loop-after styling, since
that container never renders on this builder-built shop page. */
.pc-bottom-pagination {
clear: both;
margin-top: 2rem;
text-align: center;
}
.pc-bottom-pagination ul.page-numbers {
display: inline-block;
margin: 0;
padding: 0;
}
.pc-bottom-pagination ul.page-numbers li {
float: left;
}
.pc-bottom-pagination li .page-numbers {
display: block;
}
/* Homepage: close the dead band between the header and the first section
("Países") on phones.
The homepage header is an absolutely positioned row overlaying the page, so
the first content row carries the whole offset itself — the builder sets
`margin-top: 200px !important` on it, with no responsive variant, so the
same 200px applies at every width. The header is 111px tall on desktop and
70px on a phone, so the visible gap under it goes from 89px to 130px purely
because the bar got shorter.
159px restores that 89px gap on phones. Kept in a max-width:767px block so
desktop and tablet keep the builder's own value untouched.
Specificity plus !important is what it takes to beat the builder's own
.vc_custom_… rule; the generated class name is deliberately not referenced,
because WPBakery mints a new one every time the row is re-saved.
PROPER FIX: set the phone margin-top on that row in the builder (Design
Options > Responsive) and delete this block. */
@media (max-width: 767px) {
.home #main .wpb-content-wrapper > .vc_row:first-child {
margin-top: 159px !important;
}
}
/* Homepage product tabs: two labels per line on phones.
The four tabs (Champagnes / Tintos / Brancos / Rosés) sit in a wrapping flex
row whose items are `flex: 0 1 auto`, so they pack by text width. At 390px
that puts three on the first line and leaves "Rosés" alone on the second.
Halving each item gives the intended 2 x 2:
Champagnes Tintos
Brancos Rosés
The right margin is zeroed because it would otherwise push the second
column past 100% (border-box only accounts for padding and border).
The link goes inline-block so the active tab's 3px bottom border keeps
hugging its text instead of stretching across the whole half-width — that
underline is a border on the , which is display:block by default.
Scoped to 575px, Porto's own `xs` breakpoint — the same one the sliders in
these tabs use for their mobile column count, so the two behaviours flip
together. Above it the four labels fit on one line anyway.
Hooked on .custom-tabs, the Extra class this element carries in the
builder, rather than on a generated .wpb_custom_… / .vc_custom_… name:
those are re-minted on every save, the Extra class is not. */
@media (max-width: 575px) {
.home .tabs.custom-tabs > ul.nav-tabs > li.nav-item {
flex: 0 0 50%;
max-width: 50%;
margin-right: 0;
/* Porto centres the label inside the tab. That was invisible while the
item was only as wide as its text; at 50% it would indent the first
column away from the page gutter every other section starts on. */
text-align: left;
}
.home .tabs.custom-tabs > ul.nav-tabs > li.nav-item > .nav-link {
display: inline-block;
}
}
/* Mobile menu (hamburger) icon — Revisão site final, p. 15.
On the homepage the bars rendered white on a white header: measured contrast
1.00, i.e. completely invisible. Other pages were already fine.
The colour is not theme CSS — it comes from the WPBakery "Design Options" of
that element, which is per-page (homepage carries .vc_custom_1741400805720,
Sobre Nós carries .vc_custom_1741735430601). So the homepage element was
simply configured white. #282828 is the exact value the other pages use, and
the client pointed to Sobre Nós as the correct reference — this makes every
page match it. Measured contrast after: 14.74.
The tidier long-term fix is to correct the colour on the homepage element in
WPBakery and drop this block; it is here so the site is not left with an
invisible menu button in the meantime. */
.header-wrapper a.mobile-toggle,
.header-wrapper a.mobile-toggle:hover,
.header-wrapper a.mobile-toggle:focus,
.header-wrapper a.mobile-toggle > i {
color: #282828 !important;
}
/* My Account (logged out): make "Iniciar sessão" and "Registar nova conta"
symmetric — Revisão site final, p. 5.
Porto lays #customer_login out with floats (.col-1 { float:left }), so the two
columns are independent boxes with no shared height. The register form is
taller, which pushed its button 46px below the login button. Measured on live
at 1440px: columns were already the same width (483px) and the buttons the
same width (463px) — the misalignment was purely vertical.
Switching the row to flex gives both columns equal height, and margin-top:auto
on the submit row drops both buttons to the same baseline. Scoped to ≥992px,
the breakpoint Porto already stacks the columns at, so mobile is untouched. */
@media (min-width: 992px) {
.woocommerce-account #customer_login.col2-set {
display: flex;
align-items: stretch;
}
/* Porto's clearfix would otherwise become a third, empty flex item. */
.woocommerce-account #customer_login.col2-set::after {
display: none;
}
.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 {
float: none;
display: flex;
}
/* The register