/**
* PPStore Custom Overrides
*/
/* ==========================================================================
CRITICAL: Fix body display mode
Storefront/Crafto sets body to inline-block which causes it to
shrink-wrap to content width instead of filling the viewport.
========================================================================== */
body {
display: block !important;
width: 100% !important;
}
/* ==========================================================================
Header Top Bar: red background overrides
========================================================================== */
.ppstore-topbar-red {
background-color: var(--base-color, #D4BA61) !important;
border-bottom: none !important;
}
.ppstore-topbar-red a,
.ppstore-topbar-red .widget,
.ppstore-topbar-red .fs-13,
.ppstore-topbar-red div,
.ppstore-topbar-red span {
color: #fff !important;
}
.ppstore-topbar-red a:hover {
opacity: 0.85;
}
/* ==========================================================================
Logo visibility: ensure logo is always visible regardless of header state
========================================================================== */
.navbar-brand img {
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* ==========================================================================
Mobile logo: prevent oversized logo from pushing icons down
========================================================================== */
@media (max-width: 991px) {
.navbar-brand img,
.navbar-brand .default-logo img,
.navbar-brand .alt-logo img,
.navbar-brand .mobile-logo img {
max-height: 45px !important;
width: auto !important;
}
}
@media (max-width: 575px) {
.navbar-brand img,
.navbar-brand .default-logo img,
.navbar-brand .alt-logo img,
.navbar-brand .mobile-logo img {
max-height: 38px !important;
width: auto !important;
}
}
/* Force the header wrapper into normal flow */
header.header-with-topbar {
position: relative !important;
z-index: 99;
}
/* Top bar: normal flow, not fixed/absolute */
header .header-top-bar {
display: block !important;
height: auto !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
}
/* Navbar: normal flow, not fixed/absolute */
header .header-top-bar + .navbar,
header .navbar,
header .navbar.disable-fixed,
header .header-top-bar + .navbar.disable-fixed {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
}
/* Remove top-space-margin/padding compensation - no longer needed */
.header-with-topbar + .top-space-margin,
.top-space-margin {
margin-top: 0 !important;
}
.header-with-topbar + .top-space-padding,
.top-space-padding {
padding-top: 0 !important;
}
/* Homepage: header is in normal flow (no overlay on slider) */
/* All pages including front-page use position: relative header (set above) */
/* Mobile: center top bar right-side links */
@media (max-width: 767px) {
header .header-top-bar .col-lg-5 {
justify-content: center !important;
text-align: center !important;
}
}
/* On very small screens, reduce font size and padding for top bar */
@media (max-width: 575px) {
header .header-top-bar .row {
height: auto !important;
min-height: 35px;
}
header .header-top-bar .fs-13 {
font-size: 11px !important;
}
header .header-top-bar .col-lg-7 {
padding: 5px 0;
}
}
/* Extra small screens: shrink top bar links further to stay on one line */
@media (max-width: 374px) {
.header-top-bar .col-lg-5 .widget,
.header-top-bar .col-lg-5 a.widget,
.header-top-bar .col-lg-5 > a,
.header-top-bar .col-lg-5 > div,
.header-top-bar .col-lg-5 .header-language-icon,
.header-top-bar .col-lg-5 .header-language-icon .header-language a {
font-size: 10px !important;
}
.header-top-bar .col-lg-5 {
gap: 5px;
}
}
/* ==========================================================================
Task 6a: Single product - variation selects, quantity inputs, buttons
========================================================================== */
/* Variation select dropdowns */
.ppstore-single-product .variations select,
.ppstore-single-product table.variations select,
.ppstore-single-product .variations .value select {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--extra-medium-gray, #e4e4e4);
border-radius: 0;
background-color: #fff;
color: var(--dark-gray, #232323);
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23232323'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 10px;
transition: border-color 0.3s ease;
}
.ppstore-single-product .variations select:focus,
.ppstore-single-product table.variations select:focus {
outline: none;
border-color: var(--base-color, #D4BA61);
}
/* Variation label styling */
.ppstore-single-product .variations .label label,
.ppstore-single-product table.variations .label label {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-weight: 600;
font-size: 14px;
color: var(--dark-gray, #232323);
text-transform: capitalize;
}
/* Variation table rows */
.ppstore-single-product .variations td,
.ppstore-single-product table.variations td {
padding: 8px 0;
vertical-align: middle;
}
.ppstore-single-product .variations tr,
.ppstore-single-product table.variations tr {
border: none;
}
.ppstore-single-product table.variations {
border: none;
margin-bottom: 15px;
}
/* Reset variation link */
.ppstore-single-product .reset_variations {
display: inline-block;
margin-top: 8px;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 13px;
font-weight: 500;
color: var(--base-color, #D4BA61);
text-decoration: underline;
visibility: visible !important;
}
/* Quantity input */
.ppstore-single-product .quantity input[type="number"],
.ppstore-single-product .quantity .qty,
.cart-products .quantity input[type="number"],
.cart-products .quantity .qty,
form.cart .quantity input[type="number"],
form.cart .quantity .qty {
width: 80px;
height: 50px;
padding: 8px 10px;
border: 1px solid var(--extra-medium-gray, #e4e4e4);
border-radius: 0;
background-color: #fff;
color: var(--dark-gray, #232323) !important;
-webkit-text-fill-color: var(--dark-gray, #232323);
opacity: 1;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 16px;
font-weight: 600;
text-align: center;
-moz-appearance: textfield;
}
.ppstore-single-product .quantity input[type="number"]::-webkit-inner-spin-button,
.ppstore-single-product .quantity input[type="number"]::-webkit-outer-spin-button,
.cart-products .quantity input[type="number"]::-webkit-inner-spin-button,
.cart-products .quantity input[type="number"]::-webkit-outer-spin-button,
form.cart .quantity input[type="number"]::-webkit-inner-spin-button,
form.cart .quantity input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ppstore-single-product .quantity input[type="number"]:focus,
.cart-products .quantity input[type="number"]:focus,
form.cart .quantity input[type="number"]:focus {
outline: none;
border-color: var(--base-color, #D4BA61);
}
@media (max-width: 575px) {
.cart-products .quantity input[type="number"],
.cart-products .quantity .qty {
width: 65px;
height: 42px;
}
}
/* Add to cart button */
.ppstore-single-product .single_add_to_cart_button,
.ppstore-single-product button.single_add_to_cart_button,
.ppstore-single-product .cart button[type="submit"] {
display: inline-block;
padding: 14px 35px;
background-color: var(--dark-gray, #232323);
color: #fff !important;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 2px solid var(--dark-gray, #232323);
border-radius: 0;
cursor: pointer;
transition: all 0.3s ease;
line-height: 1.2;
}
.ppstore-single-product .single_add_to_cart_button:hover,
.ppstore-single-product button.single_add_to_cart_button:hover,
.ppstore-single-product .cart button[type="submit"]:hover {
background-color: transparent;
color: var(--dark-gray, #232323) !important;
}
/* Variation add to cart form layout */
.ppstore-single-product .woocommerce-variation-add-to-cart {
display: flex;
gap: 15px;
margin-top: 15px;
flex-wrap: wrap;
}
.product-info a[href*="api.whatsapp.com"] {
flex: 0 0 100%;
}
.wa-order-button-after-atc{
margin-top: 15px;
}
/* Variation price */
.ppstore-single-product .woocommerce-variation-price .price {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 24px;
font-weight: 700;
color: var(--dark-gray, #232323);
margin-bottom: 10px;
}
/* General WC buttons on single product */
.ppstore-single-product .button,
.ppstore-single-product button.button,
.ppstore-single-product input.button,
.ppstore-single-product a.button {
display: inline-block;
padding: 12px 28px;
background-color: var(--dark-gray, #232323);
color: #fff;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 2px solid var(--dark-gray, #232323);
border-radius: 0;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.ppstore-single-product .button:hover,
.ppstore-single-product button.button:hover,
.ppstore-single-product input.button:hover,
.ppstore-single-product a.button:hover {
background-color: transparent;
color: var(--dark-gray, #232323);
}
/* ==========================================================================
Task 6b: Gallery thumbnails aligned LEFT of main image (vertical)
========================================================================== */
/* Product image container: flex row with thumbs on left, main on right */
.ppstore-single-product .col-lg-6 > .row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
/* Thumbnail column - vertical strip on the left */
.ppstore-single-product .ppstore-thumb-col {
flex: 0 0 100px;
max-width: 100px;
width: 100px;
padding-right: 10px;
padding-left: 0;
order: -1;
}
/* Main image column - takes remaining space */
.ppstore-single-product .ppstore-main-image-col {
flex: 1;
min-width: 0;
padding-left: 0;
}
/* Swiper thumb container: vertical direction */
.ppstore-single-product .ppstore-vertical-thumbs {
height: 100% !important;
overflow: hidden;
}
.ppstore-single-product .ppstore-vertical-thumbs .swiper-wrapper {
flex-direction: column;
}
.ppstore-single-product .ppstore-vertical-thumbs .swiper-slide {
width: 100% !important;
height: auto !important;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.3s ease;
box-sizing: border-box;
}
.ppstore-single-product .ppstore-vertical-thumbs .swiper-slide-thumb-active,
.ppstore-single-product .ppstore-vertical-thumbs .swiper-slide:hover {
opacity: 1;
border: 2px solid var(--base-color, #D4BA61);
}
.ppstore-single-product .ppstore-vertical-thumbs .swiper-slide img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
display: block;
}
/* Responsive: on small screens thumbnails go below horizontally */
@media (max-width: 767px) {
.ppstore-single-product .col-lg-6 > .row {
flex-direction: column;
flex-wrap: wrap;
}
.ppstore-single-product .ppstore-thumb-col {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
padding-right: 15px;
padding-left: 15px;
order: 1;
margin-top: 10px;
}
.ppstore-single-product .ppstore-main-image-col {
padding-left: 15px;
padding-right: 15px;
}
.ppstore-single-product .ppstore-vertical-thumbs .swiper-wrapper {
flex-direction: row;
}
.ppstore-single-product .ppstore-vertical-thumbs .swiper-slide {
width: 80px !important;
margin-right: 10px;
}
}
/* ==========================================================================
Task 7: Square product images and thumbnails, zoom at max 1000px
========================================================================== */
/* Product images in shop grid/loop - square crop */
.shop-box .shop-image img,
.shop-boxed .shop-image img,
.grid-item .shop-image img,
.product-image-slider .swiper-slide img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
height: auto;
}
/* Category images - square */
.categories-box .icon-box img {
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* Single product main image - square */
.ppstore-single-product .product-image-slider .swiper-slide img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
}
/* WooCommerce default image sizes - square */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
height: auto;
}
/* Gallery lightbox - max 1000px width, maintain proportions */
.mfp-img,
.mfp-figure img,
.woocommerce-product-gallery__image img.wp-post-image,
.gallery-box a img.mfp-open {
max-width: 100% !important;
height: auto !important;
object-fit: contain;
}
/* Magnific Popup max width */
.mfp-container .mfp-content {
max-width: 1000px;
}
.mfp-figure::after {
max-width: 1000px;
}
/* Mini cart thumbnails - square */
.cart-item .product-image img,
.header-cart .cart-item img.cart-thumb {
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* ==========================================================================
Shop toolbar: storefront-sorting layout (flex row)
========================================================================== */
/* Flex row: result-count left, ordering select right */
.storefront-sorting {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-bottom: 15px;
margin-bottom: 30px;
border-bottom: 1px solid var(--extra-medium-gray, #e4e4e4);
}
/* Result count stays left */
.storefront-sorting .woocommerce-result-count {
margin: 0;
order: 1;
font-size: 14px;
color: var(--medium-gray, #888e95);
}
/* Ordering select goes right */
.storefront-sorting .woocommerce-ordering {
margin: 0;
order: 2;
}
.storefront-sorting .woocommerce-ordering select.orderby {
padding: 10px 36px 10px 15px;
border: 1px solid var(--extra-medium-gray, #e4e4e4);
border-radius: 0;
background-color: #fff;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 14px;
font-weight: 500;
color: var(--dark-gray, #232323);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23232323'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 10px;
cursor: pointer;
transition: border-color 0.3s ease;
min-width: 220px;
}
.storefront-sorting .woocommerce-ordering select.orderby:focus {
outline: none;
border-color: var(--base-color, #D4BA61);
}
/* Notices wrapper: full-width row above the flex items */
.storefront-sorting .woocommerce-notices-wrapper {
flex: 0 0 100%;
width: 100%;
order: 0;
}
/* Filtri attivi: sempre su una riga a sé, sotto conteggio/ordinamento */
.storefront-sorting .ppstore-active-filters {
flex: 0 0 100%;
width: 100%;
order: 3;
}
.ppstore-active-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 15px;
}
.ppstore-active-filter-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border: 1px solid var(--base-color, #D4BA61);
border-radius: 30px;
background-color: rgba(212, 186, 97, 0.08);
font-size: 13px;
color: var(--dark-gray, #2C1810);
transition: background-color 0.2s ease, color 0.2s ease;
}
.ppstore-active-filter-chip:hover {
background-color: var(--base-color, #D4BA61);
color: #fff;
}
.ppstore-active-filter-chip i {
font-size: 10px;
}
.ppstore-active-filters-clear {
font-size: 13px;
text-decoration: underline;
color: var(--medium-gray, #7A6B63);
margin-left: 4px;
}
.ppstore-active-filters-clear:hover {
color: var(--base-color, #D4BA61);
}
/* ==========================================================================
WooCommerce notices: preserve classic colored styles
========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
padding: 1em 1.5em;
margin-bottom: 1.5em;
border-top: 3px solid;
background-color: #f8f8f8;
font-size: 14px;
line-height: 1.6;
list-style: none;
overflow: hidden;
}
/* Success (green) */
.woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message {
border-top-color: #0f834d;
background-color: #edf7f1;
color: #0f834d;
}
.woocommerce-message a,
.woocommerce-message .button {
color: #0f834d;
font-weight: 600;
}
/* Info (blue) */
.woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-info {
border-top-color: #1e85be;
background-color: #eaf4fa;
color: #1e85be;
}
.woocommerce-info a,
.woocommerce-info .button {
color: #1e85be;
font-weight: 600;
}
/* Error (red) */
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error {
border-top-color: #cc1818;
background-color: #fbeaea;
color: #cc1818;
}
.woocommerce-error a,
.woocommerce-error .button {
color: #cc1818;
font-weight: 600;
}
/* WC Block-based notice banners (newer WooCommerce) */
.wc-block-components-notice-banner.is-success {
background-color: #edf7f1 !important;
color: #0f834d !important;
border-left: 4px solid #0f834d;
}
.wc-block-components-notice-banner.is-info {
background-color: #eaf4fa !important;
color: #1e85be !important;
border-left: 4px solid #1e85be;
}
.wc-block-components-notice-banner.is-error {
background-color: #fbeaea !important;
color: #cc1818 !important;
border-left: 4px solid #cc1818;
}
.wc-block-components-notice-banner.is-warning {
background-color: #fff8e5 !important;
color: #856404 !important;
border-left: 4px solid #dba617;
}
/* Notice button styling (e.g. "Visualizza carrello") */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
float: right;
padding: 0;
background: none;
border: none;
box-shadow: none;
text-decoration: underline;
font-size: 14px;
}
/* ==========================================================================
Breadcrumb: override Storefront's enormous separator padding
(icons.css sets .woocommerce-breadcrumb .breadcrumb-separator padding ~6.85em)
========================================================================== */
.woocommerce-breadcrumb .breadcrumb-separator {
padding: 0 6px !important;
}
/* ==========================================================================
Fix 1: Lightbox (Magnific Popup) – keep image within viewport on all devices
========================================================================== */
.mfp-container {
padding: 10px !important;
box-sizing: border-box;
}
.mfp-content {
max-width: calc(100vw - 20px) !important;
max-height: calc(100vh - 20px) !important;
overflow: hidden;
}
.mfp-figure {
max-width: 100% !important;
overflow: hidden;
}
.mfp-figure figure {
max-width: 100% !important;
margin: 0;
}
.mfp-img {
max-width: 100% !important;
max-height: 90vh !important;
width: auto !important;
height: auto !important;
object-fit: contain;
display: block;
margin: 0 auto;
}
.mfp-figure::after {
max-width: 100%;
}
.mfp-bottom-bar {
max-width: 100% !important;
}
/* Ensure the gallery wrapper doesn't overflow */
.woocommerce-product-gallery {
overflow: hidden;
}
/* Hover zoom – CSS transform, nessun elemento aggiuntivo nel DOM */
.ppstore-native-gallery .woocommerce-product-gallery__image {
overflow: hidden;
}
.ppstore-native-gallery .woocommerce-product-gallery__image a img {
transition: transform 0.4s ease;
transform-origin: center center;
}
.ppstore-native-gallery .woocommerce-product-gallery__image:hover a img {
transform: scale(1.08);
}
/* ==========================================================================
Fix 2: header-top-bar mobile – both columns visible, compact, border
========================================================================== */
@media (max-width: 767px) {
.header-top-bar .row {
flex-direction: column;
height: auto !important;
padding: 6px 0;
}
.header-top-bar .col-lg-7 {
line-height: 1.3;
font-size: 12px !important;
padding-bottom: 6px;
}
.header-top-bar .col-lg-7 .fs-13 {
font-size: 12px !important;
}
/* Show the second column on mobile – single line */
.header-top-bar .col-lg-5 {
display: flex !important;
justify-content: center;
flex-wrap: nowrap;
gap: 8px;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.25);
text-align: center !important;
white-space: nowrap;
overflow: hidden;
}
.header-top-bar .col-lg-5 .widget,
.header-top-bar .col-lg-5 a.widget,
.header-top-bar .col-lg-5 > a,
.header-top-bar .col-lg-5 > div {
font-size: 11px !important;
margin-right: 0 !important;
white-space: nowrap;
}
/* Override Crafto me-25px / md-me-15px utility margins */
.header-top-bar .col-lg-5 .me-25px,
.header-top-bar .col-lg-5 .md-me-15px {
margin-right: 0 !important;
}
.header-top-bar .col-lg-5 .header-language-icon {
font-size: 11px !important;
}
.header-top-bar .col-lg-5 .header-language-icon .header-language a {
font-size: 11px !important;
}
}
/* ==========================================================================
Fix 3: Minicart – mobile: hide dropdown, go directly to cart page
========================================================================== */
@media (max-width: 991px) {
/* On mobile, prevent the minicart dropdown from showing */
.header-cart-icon .header-cart.open .cart-item-list,
.header-cart-icon .header-cart .cart-item-list {
display: none !important;
}
}
/* ==========================================================================
Fix 4: Variations table – clean aligned label + select layout
WooCommerce uses | and |
========================================================================== */
.ppstore-single-product table.variations {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: none;
margin-bottom: 15px;
table-layout: fixed;
}
.ppstore-single-product table.variations tr {
border: none;
}
.ppstore-single-product table.variations td,
.ppstore-single-product table.variations th {
padding: 8px 0;
vertical-align: middle;
border: none;
}
.ppstore-single-product table.variations th.label,
.ppstore-single-product table.variations td.label {
width: 80px;
white-space: nowrap;
padding-right: 15px;
text-align: left;
font-weight: normal;
}
.ppstore-single-product table.variations th.label label,
.ppstore-single-product table.variations td.label label {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-weight: 600;
font-size: 14px;
color: var(--dark-gray, #232323);
text-transform: capitalize;
margin: 0;
}
.ppstore-single-product table.variations td.value {
width: auto;
}
.ppstore-single-product table.variations td.value select {
width: 100%;
max-width: 100%;
}
/* Reset variations link: moved outside table via JS, sits on its own row */
.ppstore-single-product .reset_variations {
display: block;
margin-top: 10px;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 13px;
font-weight: 500;
color: var(--base-color, #D4BA61);
text-decoration: underline;
}
@media (max-width: 575px) {
.ppstore-single-product table.variations th.label,
.ppstore-single-product table.variations td.label {
width: 65px;
padding-right: 10px;
}
}
/* Responsive: su smartphone (<768px) Filtri e Ordina affiancati e di pari
larghezza, poi i filtri attivi (chip), poi il conteggio prodotti in fondo */
@media (max-width: 767px) {
.storefront-sorting {
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
gap: 10px;
padding-bottom: 15px;
margin-bottom: 20px;
}
.storefront-sorting .ppstore-filters-toggle {
order: 1;
flex: 1 1 0;
min-width: 0;
justify-content: center;
margin: 0;
}
.storefront-sorting .woocommerce-ordering {
order: 2;
flex: 1 1 0;
min-width: 0;
width: auto;
}
.storefront-sorting .woocommerce-ordering select.orderby {
width: 100%;
min-width: 0;
box-sizing: border-box;
border-radius: 30px;
border-color: #ececec;
padding: 10px 34px 10px 18px;
font-weight: 600;
text-align: center;
background-position: right 16px center;
}
.storefront-sorting .ppstore-active-filters {
order: 3;
flex: 0 0 100%;
width: 100%;
}
.storefront-sorting .woocommerce-result-count {
order: 4;
flex: 0 0 100%;
width: 100%;
text-align: center;
margin-top: 10px;
}
}
/* ==========================================================================
Wishlist: header badge, heart active state, wishlist page
========================================================================== */
/* Header wishlist icon – match cart icon spacing */
.header-wishlist-icon {
/*margin-left: 20px;*/
}
.header-wishlist-icon a {
position: relative;
display: inline-block;
}
/* Wishlist badge – same style as .cart-count */
.ppstore-wishlist-count {
position: absolute;
top: -8px;
right: -10px;
min-width: 18px;
height: 18px;
line-height: 18px;
padding: 0 4px;
border-radius: 50%;
background-color: var(--base-color, #D4BA61);
color: #fff;
font-size: 10px;
font-weight: 700;
text-align: center;
}
/* Wishlisted heart – active state (filled red heart) */
[data-wishlist-id].ppstore-wishlisted {
color: #dc3545 !important;
}
[data-wishlist-id].ppstore-wishlisted i {
color: #dc3545 !important;
}
/* Single product wishlist link – active state */
.product-info [data-wishlist-id].ppstore-wishlisted {
color: #dc3545 !important;
}
.product-info [data-wishlist-id].ppstore-wishlisted + .feature-box-icon i,
.product-info .feature-box:has([data-wishlist-id].ppstore-wishlisted) .feature-box-icon i {
color: #dc3545 !important;
}
/* Wishlist page */
#ppstore-wishlist-container .shop-boxed {
margin-top: 0;
}
/* Wishlist page – grid item hover */
#ppstore-wishlist-container .shop-box {
box-shadow: none;
transition: box-shadow 0.3s ease;
}
#ppstore-wishlist-container .shop-box:hover {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
/* Wishlist empty state */
#ppstore-wishlist-container .text-center i.feather {
opacity: 0.4;
}
/* ==========================================================================
Cart: pulsante "Procedi al pagamento" (Proceed to checkout)
WooCommerce Blocks cart: .wc-block-cart__submit-button
WooCommerce Classic cart: .checkout-button
========================================================================== */
/* --- WooCommerce Blocks (Gutenberg) cart --- */
.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button,
a.wc-block-cart__submit-button.wc-block-components-button {
display: block !important;
width: 100% !important;
padding: 18px 30px !important;
background-color: var(--base-color, #D4BA61) !important;
color: #fff !important;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif) !important;
font-size: 15px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
text-align: center !important;
border: 2px solid var(--base-color, #D4BA61) !important;
border-radius: 0 !important;
cursor: pointer !important;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
text-decoration: none !important;
line-height: 1.3 !important;
margin-top: 10px !important;
box-shadow: 0 4px 20px rgba(212, 186, 97, 0.35) !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover,
a.wc-block-cart__submit-button.wc-block-components-button:hover {
background-color: var(--dark-gray, #16202c) !important;
border-color: var(--dark-gray, #16202c) !important;
color: #fff !important;
box-shadow: 0 6px 25px rgba(22, 32, 44, 0.25) !important;
}
/* Testo interno del pulsante Blocks */
.wc-block-cart__submit-button .wc-block-components-button__text {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif) !important;
font-size: 15px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: #fff !important;
}
/* Contenitore del pulsante Blocks */
.wc-block-cart__submit-container {
padding: 0 !important;
margin-top: 20px !important;
}
/* --- WooCommerce Classic cart (fallback) --- */
.cart-collaterals .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
a.checkout-button.button.alt {
display: block;
width: 100%;
padding: 18px 30px;
background-color: var(--base-color, #D4BA61);
color: #fff !important;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
text-align: center;
border: 2px solid var(--base-color, #D4BA61);
border-radius: 0;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
text-decoration: none;
line-height: 1.3;
margin-top: 10px;
box-shadow: 0 4px 20px rgba(212, 186, 97, 0.35);
}
.cart-collaterals .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
a.checkout-button.button.alt:hover {
background-color: var(--dark-gray, #16202c);
border-color: var(--dark-gray, #16202c);
color: #fff !important;
box-shadow: 0 6px 25px rgba(22, 32, 44, 0.25);
}
/* Contenitore del pulsante classico */
.wc-proceed-to-checkout {
padding: 0;
margin-top: 20px;
}
/* Responsive: mantieni piena larghezza su mobile */
@media (max-width: 575px) {
.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button,
a.wc-block-cart__submit-button.wc-block-components-button,
.cart-collaterals .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
a.checkout-button.button.alt {
font-size: 14px !important;
padding: 16px 20px !important;
letter-spacing: 1px !important;
}
.wc-block-cart__submit-button .wc-block-components-button__text {
font-size: 14px !important;
letter-spacing: 1px !important;
}
}
/* ==========================================================================
Checkout: radio input metodi di pagamento (WooCommerce Blocks)
Fix: da toggle-switch ovale a classico cerchio radio
========================================================================== */
/* Radio input – cerchio classico
Fix: il tema Crafto applica "input { padding: 12px 25px; width: 100% }"
che gonfia i radio a ~54×28px. Serve azzerare padding e forzare max-width. */
.wc-block-components-radio-control__input,
input[type="radio"].wc-block-components-radio-control__input {
width: 20px !important;
max-width: 20px !important;
height: 20px !important;
max-height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
padding: 0 !important;
border-radius: 50% !important;
border: 2px solid var(--extra-medium-gray, #e4e4e4) !important;
background-color: #fff !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
position: relative !important;
cursor: pointer !important;
transition: border-color 0.3s ease !important;
top: 12px;
left: auto !important;
margin: 0 !important;
flex-shrink: 0 !important;
box-sizing: content-box !important;
}
.wp-block-woocommerce-checkout .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control .wc-block-components-radio-control__input,
.wc-block-checkout__pickup-options .wc-block-components-local-pickup-rates-control .wc-block-components-radio-control .wc-block-components-radio-control__input, .wp-block-woocommerce-checkout-pickup-options-block .wc-block-components-local-pickup-rates-control .wc-block-components-radio-control .wc-block-components-radio-control__input{
top: 0;
}
/* Radio checked – pallino interno color accent */
.wc-block-components-radio-control__input:checked,
input[type="radio"].wc-block-components-radio-control__input:checked {
border-color: var(--base-color, #D4BA61) !important;
background-color: #fff !important;
}
.wc-block-components-radio-control__input::before,
input[type="radio"].wc-block-components-radio-control__input::before {
content: "" !important;
display: block !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background-color: transparent !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
transition: background-color 0.2s ease !important;
}
.wc-block-components-radio-control__input:checked::before,
input[type="radio"].wc-block-components-radio-control__input:checked::before {
background-color: var(--base-color, #D4BA61) !important;
}
/* Label: assicura spazio per radio + testo visibile */
.wc-block-components-radio-control__option {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 14px 16px !important;
padding-left: 16px !important;
cursor: pointer !important;
position: relative !important;
min-height: auto !important;
}
/* Testo label: non troncato */
.wc-block-components-radio-control__label {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif) !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--dark-gray, #16202c) !important;
margin-left: 0 !important;
padding-left: 0 !important;
white-space: nowrap !important;
}
/* Opzione selezionata – bordo accent */
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option--checked-option-highlighted {
border-color: var(--base-color, #D4BA61) !important;
}
/* ==========================================================================
Checkout: checkbox (salva dati, aggiungi nota) – WooCommerce Blocks
Fix: da rettangolo oversize a checkbox classico
========================================================================== */
/* Fix: stesso problema dei radio – "input { padding: 12px 25px; width: 100% }" dal tema */
.wc-block-components-checkbox__input,
input[type="checkbox"].wc-block-components-checkbox__input {
width: 20px !important;
max-width: 20px !important;
height: 20px !important;
max-height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
padding: 0 !important;
border-radius: 4px !important;
border: 2px solid var(--extra-medium-gray, #e4e4e4) !important;
background-color: #fff !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
cursor: pointer !important;
position: relative !important;
flex-shrink: 0 !important;
box-sizing: content-box !important;
transition: border-color 0.3s ease, background-color 0.3s ease !important;
}
.wc-block-components-checkbox__input:checked,
input[type="checkbox"].wc-block-components-checkbox__input:checked {
background-color: var(--base-color, #D4BA61) !important;
border-color: var(--base-color, #D4BA61) !important;
}
/* Checkmark SVG – posizionato sopra il checkbox */
.wc-block-components-checkbox__mark {
width: 14px !important;
height: 14px !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
fill: #fff !important;
pointer-events: none !important;
}
/* Checkbox label container */
.wc-block-components-checkbox label {
display: flex !important;
align-items: center !important;
gap: 12px !important;
cursor: pointer !important;
position: relative !important;
}
/* Checkbox label text */
.wc-block-components-checkbox__label {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif) !important;
font-size: 14px !important;
font-weight: 400 !important;
color: var(--medium-gray, #888e95) !important;
margin-left: 0 !important;
padding-left: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ==========================================================================
Checkout: textarea note ordine – WooCommerce Blocks
========================================================================== */
.wc-block-components-textarea,
.wc-block-checkout__add-note textarea {
width: 100% !important;
min-height: 100px !important;
padding: 14px 16px !important;
border: 1px solid var(--extra-medium-gray, #e4e4e4) !important;
border-radius: 0 !important;
background-color: #fff !important;
color: var(--dark-gray, #232323) !important;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
resize: vertical !important;
transition: border-color 0.3s ease !important;
}
.wc-block-components-textarea:focus,
.wc-block-checkout__add-note textarea:focus {
outline: none !important;
border-color: var(--base-color, #D4BA61) !important;
}
/* ==========================================================================
Checkout: pulsante "Effettua ordine" (Place order) – WooCommerce Blocks
========================================================================== */
.wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button.wc-block-components-button {
display: block !important;
width: 100% !important;
padding: 18px 30px !important;
background-color: var(--base-color, #D4BA61) !important;
color: #fff !important;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif) !important;
font-size: 15px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
text-align: center !important;
border: 2px solid var(--base-color, #D4BA61) !important;
border-radius: 0 !important;
cursor: pointer !important;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
text-decoration: none !important;
line-height: 1.3 !important;
box-shadow: 0 4px 20px rgba(212, 186, 97, 0.35) !important;
}
.wc-block-components-checkout-place-order-button:hover,
button.wc-block-components-checkout-place-order-button:hover {
background-color: var(--dark-gray, #16202c) !important;
border-color: var(--dark-gray, #16202c) !important;
color: #fff !important;
box-shadow: 0 6px 25px rgba(22, 32, 44, 0.25) !important;
}
/* Testo interno pulsante */
.wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text {
display: block !important;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif) !important;
font-size: 15px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: #fff !important;
}
/* Responsive */
@media (max-width: 575px) {
.wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-button {
font-size: 14px !important;
padding: 16px 20px !important;
letter-spacing: 1px !important;
}
.wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text {
font-size: 14px !important;
letter-spacing: 1px !important;
}
}
/* ==========================================================================
Checkout: checkbox "Salva le informazioni" – stacco dal box Stripe
========================================================================== */
.wc-block-components-payment-methods__save-card-info {
margin-top: 16px !important;
padding-top: 16px !important;
border-top: 1px solid var(--extra-medium-gray, #e4e4e4) !important;
}
/* ==========================================================================
Checkout: actions row – colonna verticale, pulsante in alto, link sotto
========================================================================== */
.wc-block-checkout__actions_row {
display: flex !important;
flex-direction: column-reverse !important;
align-items: center !important;
gap: 16px !important;
width: 100% !important;
}
/* Pulsante "Effettua ordine" – piena larghezza */
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
width: 100% !important;
order: 2 !important;
}
/* Link "Torna al carrello" – centrato sotto */
.wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button {
order: 1 !important;
width: auto !important;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif) !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--medium-gray, #888e95) !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
}
.wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button:hover {
color: var(--dark-gray, #16202c) !important;
}
/* ==========================================================================
Brand Page – griglia loghi
========================================================================== */
.ppstore-brand-grid .ppstore-brand-card {
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
border: 1px solid transparent;
min-height: 180px;
}
.ppstore-brand-grid .ppstore-brand-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(212, 186, 97, 0.12);
border-color: var(--extra-medium-gray, #e4e4e4);
}
.ppstore-brand-grid .ppstore-brand-logo {
max-height: 70px;
max-width: 140px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.7;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.ppstore-brand-grid .ppstore-brand-card:hover .ppstore-brand-logo {
filter: grayscale(0%);
opacity: 1;
}
.ppstore-brand-grid .ppstore-brand-placeholder {
width: 70px;
height: 70px;
}
@media (max-width: 575px) {
.ppstore-brand-grid .ppstore-brand-card {
min-height: 140px;
padding: 20px 15px !important;
}
.ppstore-brand-grid .ppstore-brand-logo {
max-height: 50px;
max-width: 100px;
}
}
/* ==========================================================================
Shop Mega Menu – banner immagine
========================================================================== */
.mega-menu .shop-megamenu-banner img {
transition: transform 0.4s ease, opacity 0.3s ease;
}
.mega-menu .shop-megamenu-banner:hover img {
transform: scale(1.02);
opacity: 0.9;
}
/* ==========================================================================
Menu Dropdown Multilivello con freccette indicatrici
========================================================================== */
/* Sottomenu a discesa multilivello */
.navbar-nav .dropdown-menu .dropdown-submenu {
position: absolute;
left: 100%;
top: 0;
display: none;
min-width: 200px;
margin-top: -1px;
background-color: #fff;
border: 1px solid var(--extra-medium-gray, #e4e4e4);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
/* Mostra sottomenu al passaggio del mouse */
.navbar-nav .dropdown-menu li.dropdown:hover > .dropdown-submenu {
display: block;
}
/* Freccia indicatrice per voci con sottomenu */
.navbar-nav .dropdown-menu li a .submenu-indicator {
margin-left: auto;
padding-left: 10px;
font-size: 10px;
line-height: 1;
opacity: 0.6;
transition: transform 0.3s ease, opacity 0.3s ease;
display: inline-flex;
align-items: center;
align-self: center;
flex-shrink: 0;
}
.navbar-nav .dropdown-menu li:hover > a .submenu-indicator {
opacity: 1;
transform: translateX(3px);
}
/* Stile per voci con sottomenu */
.navbar-nav .dropdown-menu li.dropdown > a {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 15px;
}
/* Posizionamento sottomenu per evitare overflow */
@media (min-width: 992px) {
.navbar-nav .dropdown-menu .dropdown-submenu {
border-radius: 0;
}
/* Se il sottomenu esce dallo schermo, aprilo a sinistra */
.navbar-nav .dropdown-menu li.dropdown:hover > .dropdown-submenu.open-left {
left: auto;
right: 100%;
}
}
/* Mobile: sottomenu inline */
@media (max-width: 991px) {
.navbar-nav .dropdown-menu .dropdown-submenu {
position: static;
left: auto;
display: none;
width: 100%;
box-shadow: none;
border: none;
padding-left: 15px;
background-color: transparent;
}
.navbar-nav .dropdown-menu li.dropdown:hover > .dropdown-submenu,
.navbar-nav .dropdown-menu li.dropdown.show > .dropdown-submenu {
display: block;
}
.navbar-nav .dropdown-menu li a .submenu-indicator {
margin-left: auto;
transform: rotate(90deg);
}
.navbar-nav .dropdown-menu li:hover > a .submenu-indicator,
.navbar-nav .dropdown-menu li.show > a .submenu-indicator {
transform: rotate(-90deg);
}
}
/* Hover e focus states per voci menu */
.navbar-nav .dropdown-menu li a:hover,
.navbar-nav .dropdown-menu li a:focus {
background-color: var(--very-light-gray, #f8f8f8);
color: var(--base-color, #D4BA61);
}
/* Icon del menu Shop */
.navbar-nav .nav-link .label i {
font-size: 12px;
}
/* Stile prima voce menu "Tutti i prodotti" */
.navbar-nav .dropdown-menu li:first-child a i.fa-store {
font-size: 12px;
color: var(--base-color, #D4BA61);
}
/* ==========================================================================
Archive / Category pages: fix Storefront grid conflict with Crafto grid
Storefront applies its own flex/grid on .products which fights Crafto's
Isotope/Masonry-based .grid layout. We neutralize Storefront's styles.
========================================================================== */
/* Reset any Storefront leftover grid on .products (safety net) */
ul.products {
list-style: none !important;
}
ul.products li.product,
li.product.type-product {
float: none !important;
clear: none !important;
width: auto !important;
}
/* Archive page: product grid fallback if Crafto Isotope/JS doesn't fire */
ul.shop-boxed.shop-wrapper:not(.grid-loading) {
display: flex !important;
flex-wrap: wrap !important;
}
ul.shop-boxed.shop-wrapper:not(.grid-loading) > li.grid-item {
flex: 0 0 25%;
max-width: 25%;
padding: 0 15px;
box-sizing: border-box;
}
ul.shop-boxed.shop-wrapper:not(.grid-loading) > li.grid-sizer {
flex: 0 0 25%;
max-width: 25%;
height: 0;
padding: 0;
overflow: hidden;
}
@media (max-width: 1399px) {
ul.shop-boxed.shop-wrapper:not(.grid-loading) > li.grid-item,
ul.shop-boxed.shop-wrapper:not(.grid-loading) > li.grid-sizer {
flex: 0 0 33.333%;
max-width: 33.333%;
}
}
@media (max-width: 991px) {
ul.shop-boxed.shop-wrapper:not(.grid-loading) > li.grid-item,
ul.shop-boxed.shop-wrapper:not(.grid-loading) > li.grid-sizer {
flex: 0 0 50%;
max-width: 50%;
}
}
@media (max-width: 575px) {
ul.shop-boxed.shop-wrapper:not(.grid-loading) > li.grid-item,
ul.shop-boxed.shop-wrapper:not(.grid-loading) > li.grid-sizer {
flex: 0 0 50%;
max-width: 50%;
padding: 0 8px;
}
}
/* Storefront-sorting in archive: ensure it sits above the grid */
.col-xxl-10 > .storefront-sorting,
.col-md-9 > .storefront-sorting {
width: 100%;
margin-bottom: 25px;
}
/* Sidebar: keep it from collapsing */
.shop-sidebar {
min-width: 0;
}
/* Riga sidebar + prodotti negli archivi: non deve MAI andare a capo da tablet
in su, indipendentemente dal contenuto della sidebar (checkbox, select, ecc).
Bug corretto: tra 1400px e ~1609px la colonna .col-xxl-2 (16,7%) diventa
più stretta del contenuto della sidebar e, con il flex-wrap di default di
Bootstrap, i prodotti scendevano sotto invece di restare affiancati. */
@media (min-width: 768px) {
.ppstore-shop-row {
flex-wrap: nowrap;
}
.ppstore-shop-row > .shop-sidebar,
.ppstore-shop-row > [class*="col-"] {
min-width: 0;
}
}
/* Shop filter category list */
ul.shop-filter.category-filter {
list-style: none;
padding: 0;
margin: 0;
}
ul.shop-filter.category-filter li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--extra-medium-gray, #e4e4e4);
}
ul.shop-filter.category-filter li a {
color: var(--dark-gray, #232323);
text-decoration: none;
font-weight: 500;
}
ul.shop-filter.category-filter li a:hover {
color: var(--base-color, #D4BA61);
}
ul.shop-filter.category-filter li .item-qty {
font-size: 12px;
color: var(--medium-gray, #888e95);
font-weight: 600;
}
/* ==========================================================================
Shop Sidebar: tame Crafto's giant heading sizes inside sidebar widgets
========================================================================== */
.shop-sidebar h1,
.shop-sidebar h2,
.shop-sidebar h3,
.shop-sidebar h4,
.shop-sidebar h5,
.shop-sidebar h6,
.shop-sidebar h1,
.shop-sidebar h4,
.shop-sidebar h5,
.shop-sidebar h6 {
font-size: 16px !important;
line-height: 1.4 !important;
margin-bottom: 12px !important;
font-weight: 600 !important;
}
.shop-sidebar h2 {
font-size: 18px !important;
}
/* WC Product Filters block inside sidebar */
.shop-sidebar .wp-block-woocommerce-product-filters,
.shop-sidebar .wc-block-product-filter,
.shop-sidebar .widget_block,
.shop-sidebar .wp-block-woocommerce-product-filters,
.shop-sidebar .wc-block-product-filter,
.shop-sidebar .widget_block {
font-size: 14px;
}
.shop-sidebar .wc-block-product-filter__content label {
font-size: 14px !important;
}
/* ==========================================================================
Archive Page Title: remove placeholder background, clean styling
========================================================================== */
.page-title-center-alignment {
background-color: var(--very-light-gray, #f5f5f5) !important;
background-image: none !important;
padding: 0 !important;
min-height: 120px !important;
display: flex !important;
align-items: center !important;
}
.page-title-center-alignment > .container {
width: 100%;
}
.page-title-center-alignment .row {
align-items: center;
min-height: inherit;
}
.page-title-center-alignment .page-title-extra-large {
padding: 0 !important;
}
.page-title-center-alignment .page-title {
font-size: 32px !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================================
Testata pagina con foto di sfondo + overlay (pagine editoriali:
Chi Siamo, Contatti, ecc.). Non tocca .page-title-center-alignment,
che resta la testata piatta/scura usata da cataloghi e pagine standard.
========================================================================== */
.page-title-photo-header {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 460px;
display: flex;
align-items: center;
overflow: hidden;
}
.page-title-photo-header > .container {
position: relative;
z-index: 2;
}
.page-title-photo-header .page-title-extra-large {
padding: 0 !important;
}
@media (max-width: 767px) {
.page-title-photo-header {
min-height: 300px;
}
}
/* ==========================================================================
Box immagine cliccabile (Collezioni in home + carosello Categorie).
Card con immagine cover, overlay sfumato scuro e titolo bianco in basso;
bordo oro all'hover al posto del vecchio pulsante marrone.
========================================================================== */
.ppstore-image-card {
display: block;
position: relative;
aspect-ratio: 3 / 4;
border-radius: 6px;
overflow: hidden;
}
.ppstore-image-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.ppstore-image-card:hover img {
transform: scale(1.07);
}
.ppstore-image-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(44, 24, 16, 0.80) 0%, rgba(44, 24, 16, 0.15) 50%, rgba(44, 24, 16, 0) 100%);
z-index: 1;
}
.ppstore-image-card-label {
position: absolute;
left: 20px;
right: 20px;
bottom: 18px;
z-index: 2;
color: #fff;
font-size: 18px;
line-height: 1.3;
}
.ppstore-image-card::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid transparent;
border-radius: 6px;
transition: border-color 0.3s ease;
z-index: 3;
pointer-events: none;
}
.ppstore-image-card:hover::after {
border-color: var(--base-color, #D4BA61);
}
/* Variante orizzontale (Collezioni in home) */
.ppstore-image-card-landscape {
aspect-ratio: 4 / 3;
}
@media (max-width: 575px) {
.ppstore-image-card-label {
font-size: 15px;
left: 14px;
right: 14px;
bottom: 12px;
}
}
/* Carosello categorie: frecce navigazione posizionate ai lati */
.ppstore-categories-slider-wrap {
padding: 0 55px;
}
@media (max-width: 767px) {
.ppstore-categories-slider-wrap {
padding: 0 40px;
}
}
.ppstore-categories-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
margin: 0;
border-radius: 50%;
background-color: #fff;
border: 1px solid #ececec;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
color: var(--dark-gray, #2C1810);
transition: border-color 0.2s ease, color 0.2s ease;
}
.ppstore-categories-nav:after {
display: none;
}
.ppstore-categories-nav:hover {
border-color: var(--base-color, #D4BA61);
color: var(--base-color, #D4BA61);
}
.ppstore-categories-nav.swiper-button-prev {
left: 0;
}
.ppstore-categories-nav.swiper-button-next {
right: 0;
}
.ppstore-categories-nav.swiper-button-disabled {
opacity: 0.35;
pointer-events: none;
}
@media (max-width: 767px) {
.ppstore-categories-nav {
width: 36px;
height: 36px;
}
}
/* ==========================================================================
Bottone slideshow home: trasparente con outline bianco, riempimento oro all'hover
========================================================================== */
.btn.ppstore-btn-outline-gold {
background-color: transparent;
border-color: #fff;
color: #fff;
}
.btn.ppstore-btn-outline-gold:hover,
.btn.ppstore-btn-outline-gold:active,
.btn.ppstore-btn-outline-gold:focus {
background-color: var(--base-color, #D4BA61);
border-color: var(--base-color, #D4BA61);
color: var(--dark-gray, #2C1810);
}
/* ==========================================================================
Overlay leggero sullo slideshow hero in home
========================================================================== */
.ppstore-hero-overlay {
position: absolute;
inset: 0;
background-color: rgba(44, 24, 16, 0.28);
z-index: 1;
pointer-events: none;
}
/* ==========================================================================
Widget "Filtro tassonomia prodotto" (sidebar shop: Collezione, Genere, Occasione)
========================================================================== */
.ppstore-taxonomy-filter-list {
list-style: none;
margin: 0;
padding: 0;
}
.ppstore-taxonomy-filter-item {
margin-bottom: 4px;
}
.ppstore-taxonomy-filter-item a {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 4px;
color: var(--dark-gray, #2C1810);
font-size: 14px;
text-decoration: none;
transition: color 0.2s ease;
}
.ppstore-taxonomy-filter-item a:hover {
color: var(--base-color, #D4BA61);
}
.ppstore-taxonomy-filter-checkbox {
flex-shrink: 0;
width: 16px;
height: 16px;
border: 1px solid #d9d9d9;
border-radius: 3px;
position: relative;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ppstore-taxonomy-filter-item.is-checked .ppstore-taxonomy-filter-checkbox {
background-color: var(--base-color, #D4BA61);
border-color: var(--base-color, #D4BA61);
}
.ppstore-taxonomy-filter-item.is-checked .ppstore-taxonomy-filter-checkbox::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.ppstore-taxonomy-filter-label {
flex-grow: 1;
}
.ppstore-taxonomy-filter-item.is-checked .ppstore-taxonomy-filter-label {
color: var(--dark-gray, #2C1810);
font-weight: 600;
}
.ppstore-taxonomy-filter-count {
flex-shrink: 0;
font-size: 12px;
color: var(--medium-gray, #7A6B63);
}
.ppstore-taxonomy-filter-clear {
display: inline-block;
margin-top: 10px;
font-size: 13px;
text-decoration: underline;
color: var(--medium-gray, #7A6B63);
}
.ppstore-taxonomy-filter-clear:hover {
color: var(--base-color, #D4BA61);
}
.ppstore-filter-group {
margin-bottom: 30px;
}
.ppstore-filter-group:last-of-type {
margin-bottom: 0;
}
.ppstore-filter-group-title {
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #ececec;
}
.ppstore-taxonomy-filter-clear-all {
display: block;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #ececec;
text-align: center;
font-weight: 600;
}
/* ==========================================================================
Pannello filtri off-canvas solo su smartphone (<768px).
Da 768px in su (tablet e desktop) la sidebar mantiene il comportamento
standard/nativo: colonna laterale normale della griglia.
========================================================================== */
.ppstore-filters-toggle {
display: none;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid #ececec;
border-radius: 30px;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
color: var(--dark-gray, #2C1810);
margin-bottom: 0;
}
.ppstore-filters-toggle:hover {
border-color: var(--base-color, #D4BA61);
color: var(--base-color, #D4BA61);
}
.ppstore-sidebar-mobile-header {
display: none;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
margin-bottom: 20px;
border-bottom: 1px solid #ececec;
}
.ppstore-sidebar-close {
background: none;
border: none;
font-size: 20px;
line-height: 1;
color: var(--dark-gray, #2C1810);
cursor: pointer;
padding: 4px;
}
.ppstore-sidebar-overlay {
display: none;
}
@media (max-width: 767px) {
.ppstore-filters-toggle {
display: inline-flex;
}
.ppstore-sidebar-mobile-header {
display: flex;
}
.shop-sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: min(320px, 85vw);
background: #fff;
z-index: 1060;
padding: 20px;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.3s ease;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}
.shop-sidebar.is-open {
transform: translateX(0);
}
.ppstore-sidebar-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(44, 24, 16, 0.5);
z-index: 1055;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.ppstore-sidebar-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
body.ppstore-no-scroll {
overflow: hidden;
}
}
/* Sicurezza: da 768px in su (tablet incluso) il pannello filtri deve
comportarsi come una normale colonna della griglia, laterale, mai
posizionata in modo assoluto/fisso: questo è il "comportamento standard
nativo" richiesto per qualsiasi dispositivo più grande di uno smartphone. */
@media (min-width: 768px) {
.shop-sidebar {
position: static !important;
top: auto !important;
left: auto !important;
height: auto !important;
width: auto !important;
transform: none !important;
box-shadow: none !important;
z-index: auto !important;
}
.ppstore-sidebar-overlay {
display: none !important;
}
}
/* ==========================================================================
Archive grid items: bottom margin between product rows
========================================================================== */
li.grid-item .shop-box {
margin-bottom: 30px;
}
/* Uniform product box height: fixed-height image + fixed-height footer
This prevents masonry stagger caused by different title lengths */
li.grid-item .shop-box .shop-image {
position: relative;
overflow: hidden;
}
li.grid-item .shop-box .shop-image img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
height: auto;
}
li.grid-item .shop-box .shop-footer {
min-height: 80px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
li.grid-item .shop-box .shop-footer .woocommerce-loop-product__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 2.4em;
line-height: 1.2;
}
footer .footer-logo img {
filter: brightness(0) invert(1);
}
/* ==========================================================================
"Visualizza carrello" WC notice: hide inside product image overlay
After AJAX add-to-cart, WC appends a .added_to_cart link inside shop-hover
========================================================================== */
.shop-image .added_to_cart,
.shop-box .shop-image .added_to_cart,
.shop-hover + .added_to_cart,
.shop-box .added_to_cart {
display: none !important;
}
/* Also hide the WC notice that appears over the product image */
.shop-box .woocommerce-message,
.shop-image .woocommerce-message {
display: none !important;
}
/* ==========================================================================
WC Product Filters: render overlay inline on desktop, keep WC interactivity
The overlay structure is KEPT so "Applica" button batches filter changes.
On mobile WooCommerce handles its own overlay natively.
========================================================================== */
@media (min-width: 992px) {
/* Make overlay containers look inline (not positioned/overlapping) */
.shop-sidebar .wc-block-product-filters__overlay,
.shop-sidebar .wc-block-product-filters__overlay-wrapper,
.shop-sidebar .wc-block-product-filters__overlay-dialog {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
position: static !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
transform: none !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
inset: auto !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* Hide the "open overlay" button on desktop */
.shop-sidebar .wc-block-product-filters__open-overlay {
display: none !important;
}
/* Hide the overlay header (close X button) on desktop */
.shop-sidebar .wc-block-product-filters__overlay-header {
display: none !important;
}
/* Show the overlay content as normal flex column */
.shop-sidebar .wc-block-product-filters__overlay-content {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
height: auto !important;
position: static !important;
overflow: visible !important;
}
/* SHOW the overlay footer with "Applica" button on desktop */
.shop-sidebar .wc-block-product-filters__overlay-footer {
display: block !important;
padding: 15px 0 0 !important;
margin-top: 10px !important;
border-top: 1px solid var(--extra-medium-gray, #e4e4e4) !important;
background: transparent !important;
position: static !important;
}
/* Style the "Applica" button */
.shop-sidebar .wc-block-product-filters__apply {
display: block !important;
width: 100% !important;
padding: 10px 20px !important;
background-color: var(--base-color, #D4BA61) !important;
color: #fff !important;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
border: none !important;
border-radius: 0 !important;
cursor: pointer !important;
text-align: center !important;
}
.shop-sidebar .wc-block-product-filters__apply:hover {
background-color: var(--dark-gray, #232323) !important;
}
/* Hide the close-overlay button (inside footer) */
.shop-sidebar .wc-block-product-filters__close-overlay {
display: none !important;
}
}
/* Nota: la vecchia regola "@media (max-width: 991.98px) { .shop-sidebar { flex: 0 0 100% ... } }"
è stata rimossa: forzava lo stack a piena larghezza anche in tablet, in conflitto con il
requisito che la sidebar resti laterale su qualsiasi dispositivo più grande di uno smartphone
(vedi blocco off-canvas sopra, ora scoped a <768px). */
/* ==========================================================================
WC Product Filters: category hierarchy indentation
WC adds .has-depth-1, .has-depth-2 etc. to child categories
========================================================================== */
.wc-block-product-filter-checkbox-list__item.has-depth-1 {
padding-left: 22px !important;
}
.wc-block-product-filter-checkbox-list__item.has-depth-2 {
padding-left: 44px !important;
}
.wc-block-product-filter-checkbox-list__item.has-depth-3 {
padding-left: 66px !important;
}
/* Style filter headings inside sidebar */
.shop-sidebar .wc-block-product-filter h3,
.shop-sidebar .wc-block-product-filter h4,
.shop-sidebar .wc-block-product-filter label,
.shop-sidebar .wp-block-heading,
.shop-sidebar .wc-block-product-filter label,
.shop-sidebar .wp-block-heading {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif) !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--dark-gray, #232323) !important;
margin-bottom: 10px !important;
margin-top: 15px !important;
}
/* Price filter: constrain slider */
.shop-sidebar .wc-block-product-filter-price {
max-width: 100%;
overflow: hidden;
}
/* Checkbox filters: compact layout */
.shop-sidebar .wc-block-product-filter-checkbox-list {
max-height: 250px;
overflow-y: auto;
padding: 0;
margin: 0;
list-style: none;
}
.shop-sidebar .wc-block-product-filter-checkbox-list li {
padding: 4px 0;
font-size: 13px;
}
/* Fix Crafto's global "input { padding: 12px 25px; width: 100% }" on filter checkboxes */
.wc-block-product-filter-checkbox-list__input,
input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
width: 18px !important;
max-width: 18px !important;
height: 18px !important;
max-height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 3px !important;
border: 2px solid var(--extra-medium-gray, #ccc) !important;
background-color: #fff !important;
appearance: none !important;
-webkit-appearance: none !important;
cursor: pointer !important;
position: relative !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
vertical-align: middle !important;
transition: border-color 0.2s ease, background-color 0.2s ease !important;
}
.wc-block-product-filter-checkbox-list__input:checked,
input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
background-color: var(--base-color, #D4BA61) !important;
border-color: var(--base-color, #D4BA61) !important;
}
/* Checkmark inside checked checkbox */
.wc-block-product-filter-checkbox-list__input:checked::after {
content: '' !important;
display: block !important;
width: 5px !important;
height: 9px !important;
border: solid #fff !important;
border-width: 0 2px 2px 0 !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -55%) rotate(45deg) !important;
}
/* SVG checkmark that WC renders - hide and let our CSS handle it */
.wc-block-product-filter-checkbox-list__input-wrapper svg {
display: none !important;
}
/* Label alignment */
.wc-block-product-filter-checkbox-list__label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
/* Input wrapper */
.wc-block-product-filter-checkbox-list__input-wrapper {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
width: 18px !important;
height: 18px !important;
position: relative !important;
}
/* Text label */
.wc-block-product-filter-checkbox-list__text {
font-size: 14px !important;
line-height: 1.4 !important;
}
/* Page title: prevent "Shop" watermark text from overlapping */
.page-title-center-alignment .page-title {
position: relative;
z-index: 2;
}
/* Hide Storefront default .woocommerce-result-count if duplicated */
.storefront-sorting + .woocommerce-result-count {
display: none !important;
}
/* ==========================================================================
FIX HOMEPAGE 1: Griglia prodotti – equalizzazione altezza card su desktop
Isotope posiziona i grid-item in modalità masonry (position:absolute).
Perché le righe siano allineate, ogni card deve avere la stessa altezza.
Strategia: fissare l'altezza del footer (immagine già quadrata 1:1)
- Titolo prodotto: clamp a 2 righe con altezza fissa
- Prezzo: altezza fissa
Così tutte le card sono alte uguali e Isotope le allinea perfettamente.
========================================================================== */
/* Footer delle card prodotto nella homepage: altezza fissa */
.home .shop-boxed.shop-wrapper .grid-item .shop-box .shop-footer {
min-height: 90px;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 20px;
}
/* Titolo prodotto: clamp a 2 righe, altezza fissa */
.home .shop-boxed.shop-wrapper .grid-item .shop-box .shop-footer > a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 2.5em;
line-height: 1.25;
margin-bottom: 6px;
}
/* Prezzo: altezza fissa, non si espande */
.home .shop-boxed.shop-wrapper .grid-item .shop-box .shop-footer > div {
min-height: 24px;
}
/* ==========================================================================
FIX HOMEPAGE 2: Griglia categorie principali – overlay nero 50% sui titoli h3
Il div .position-absolute copre tutta la card ma è trasparente;
aggiungere un gradient dal basso rende i titoli leggibili su qualsiasi immagine.
========================================================================== */
/* Overlay gradient scuro dal basso – copre la zona testo/titolo */
.shop-wrapper.shop-grid .grid-item .shop-box > .position-absolute {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.70) 0%,
rgba(0, 0, 0, 0.50) 30%,
rgba(0, 0, 0, 0.10) 60%,
rgba(0, 0, 0, 0.00) 100%
) !important;
}
/* ==========================================================================
Social Icons: icone più grandi e distanziate (pagina Contatti + footer)
========================================================================== */
.elements-social.social-icon-style-02 ul {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
.elements-social.social-icon-style-02 ul li {
margin: 0 !important;
}
.elements-social.social-icon-style-02 ul li a {
width: 44px !important;
height: 44px !important;
line-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background-color: var(--extra-medium-gray, #e4e4e4) !important;
color: var(--dark-gray, #232323) !important;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
}
.elements-social.social-icon-style-02 ul li a:hover {
background-color: var(--base-color, #D4BA61) !important;
color: #fff !important;
transform: translateY(-3px) !important;
}
.elements-social.social-icon-style-02 ul li a i {
font-size: 18px !important;
line-height: 1 !important;
}
/* Footer social: icone chiare su sfondo scuro */
footer .elements-social.social-icon-style-02 ul li a {
background-color: rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
}
footer .elements-social.social-icon-style-02 ul li a:hover {
background-color: var(--base-color, #D4BA61) !important;
color: #fff !important;
}
/* ==========================================================================
Homepage: banner "In primo piano" – ritaglio 600×350 max
========================================================================== */
.interactive-banner-style-08 figure {
max-width: 600px !important;
max-height: 350px !important;
margin: 0 auto !important;
}
.interactive-banner-style-08 figure > img {
width: 100% !important;
height: 350px !important;
max-height: 350px !important;
object-fit: cover !important;
object-position: center !important;
}
/* ==========================================================================
Imballaggio Prodotti Freschi: gallery card con overlay numerato
========================================================================== */
.ppstore-imballaggio-card {
position: relative;
cursor: default;
}
.ppstore-imballaggio-card img {
transition: transform 0.5s ease;
}
.ppstore-imballaggio-card:hover img {
transform: scale(1.05);
}
.ppstore-imballaggio-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.30) 60%, transparent 100%);
display: flex;
align-items: flex-end;
gap: 12px;
pointer-events: none;
}
.ppstore-imballaggio-step {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 28px;
font-weight: 800;
color: var(--base-color, #D4BA61);
line-height: 1;
flex-shrink: 0;
}
.ppstore-imballaggio-label {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 15px;
font-weight: 600;
color: #fff;
line-height: 1.3;
}
/* ==========================================================================
Metodi di Pagamento: card hover
========================================================================== */
.ppstore-payment-card {
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ppstore-payment-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border-color: var(--base-color, #D4BA61) !important;
}
/* ==========================================================================
My Account: Login / Registration form
========================================================================== */
/* Hide WC default page title (we render our own in the template) */
.ppstore-account .entry-header,
.ppstore-account .page-title-center-alignment + section .entry-header {
display: none;
}
/* Form labels */
.ppstore-form .ppstore-form-label {
display: block;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 14px;
font-weight: 600;
color: var(--dark-gray, #232323);
margin-bottom: 8px;
}
.ppstore-form .ppstore-form-label .required {
color: var(--base-color, #D4BA61);
}
/* Form inputs */
.ppstore-form .ppstore-form-input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--extra-medium-gray, #e4e4e4);
border-radius: 0;
background-color: #fff;
color: var(--dark-gray, #232323);
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 14px;
font-weight: 400;
line-height: 1.5;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
-webkit-appearance: none;
appearance: none;
}
.ppstore-form .ppstore-form-input:focus {
outline: none;
border-color: var(--base-color, #D4BA61);
box-shadow: 0 0 0 3px rgba(212, 186, 97, 0.08);
}
.ppstore-form .ppstore-form-input::placeholder {
color: var(--medium-gray, #888e95);
opacity: 1;
}
/* Checkbox */
.ppstore-form .ppstore-form-checkbox {
width: 18px !important;
max-width: 18px !important;
height: 18px !important;
min-width: 18px !important;
padding: 0 !important;
border: 2px solid var(--extra-medium-gray, #e4e4e4) !important;
border-radius: 3px !important;
background-color: #fff !important;
appearance: none !important;
-webkit-appearance: none !important;
cursor: pointer !important;
flex-shrink: 0 !important;
position: relative !important;
transition: border-color 0.2s ease, background-color 0.2s ease !important;
}
.ppstore-form .ppstore-form-checkbox:checked {
background-color: var(--base-color, #D4BA61) !important;
border-color: var(--base-color, #D4BA61) !important;
}
.ppstore-form .ppstore-form-checkbox:checked::after {
content: '';
display: block;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -55%) rotate(45deg);
}
/* Info note (registration: password via email) */
.ppstore-form .ppstore-form-note {
display: flex;
align-items: flex-start;
gap: 6px;
padding: 12px 16px;
background-color: #fff;
border-radius: 4px;
border: 1px solid var(--extra-medium-gray, #e4e4e4);
}
/* Buttons */
.ppstore-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 30px;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 2px solid transparent;
border-radius: 0;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
line-height: 1.3;
}
.ppstore-btn-primary {
background-color: var(--base-color, #D4BA61);
color: #fff !important;
border-color: var(--base-color, #D4BA61);
}
.ppstore-btn-primary:hover {
background-color: transparent;
color: var(--base-color, #D4BA61) !important;
}
.ppstore-btn-dark {
background-color: var(--dark-gray, #232323);
color: #fff !important;
border-color: var(--dark-gray, #232323);
}
.ppstore-btn-dark:hover {
background-color: transparent;
color: var(--dark-gray, #232323) !important;
}
/* WC form field wrappers (generated by hooks/plugins) */
.ppstore-form .woocommerce-form-row,
.ppstore-form .form-row {
margin-bottom: 20px;
}
.ppstore-form .woocommerce-form-row label,
.ppstore-form .form-row label {
display: block;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 14px;
font-weight: 600;
color: var(--dark-gray, #232323);
margin-bottom: 8px;
}
.ppstore-form .woocommerce-form-row input[type="text"],
.ppstore-form .woocommerce-form-row input[type="email"],
.ppstore-form .woocommerce-form-row input[type="password"],
.ppstore-form .woocommerce-form-row input[type="tel"],
.ppstore-form .form-row input[type="text"],
.ppstore-form .form-row input[type="email"],
.ppstore-form .form-row input[type="password"],
.ppstore-form .form-row input[type="tel"] {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--extra-medium-gray, #e4e4e4);
border-radius: 0;
background-color: #fff;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 14px;
transition: border-color 0.3s ease;
}
.ppstore-form .woocommerce-form-row input:focus,
.ppstore-form .form-row input:focus {
outline: none;
border-color: var(--base-color, #D4BA61);
box-shadow: 0 0 0 3px rgba(212, 186, 97, 0.08);
}
/* WC error messages inside forms */
.ppstore-form .woocommerce-error {
margin-bottom: 20px;
}
.ppstore-single-product .single_add_to_cart_button, .ppstore-single-product button.single_add_to_cart_button, .ppstore-single-product .cart button[type="submit"] {
margin-bottom: 10px;
}
/* Responsive: stack on mobile */
@media (max-width: 991px) {
#customer_login.ppstore-two-cols .col-lg-6:first-child {
margin-bottom: 0;
}
}
/* ═══════════════════════════════════════════════════════════════
MY ACCOUNT — Layout sidebar + contenuto
═══════════════════════════════════════════════════════════════ */
/* Contenitore principale */
.ppstore-my-account {
padding: 10px 0 40px;
}
/* ── Sidebar navigazione ── */
.ppstore-account-nav {
position: sticky;
top: 100px;
}
.ppstore-account-nav ul {
list-style: none;
margin: 0;
padding: 0;
background: var(--very-light-gray, #f5f5f5);
border-radius: 6px;
overflow: hidden;
}
.ppstore-account-nav ul li a {
display: flex;
align-items: center;
padding: 14px 20px;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 14px;
font-weight: 500;
color: var(--medium-gray, #828282);
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.ppstore-account-nav ul li:last-child a {
border-bottom: none;
}
.ppstore-account-nav ul li a:hover {
background: #ececec;
color: var(--dark-gray, #232323);
padding-left: 26px;
}
.ppstore-account-nav ul li.is-active a,
.ppstore-account-nav ul li a[aria-current="page"] {
background: var(--base-color, #D4BA61);
color: #fff;
font-weight: 600;
}
.ppstore-account-nav ul li.is-active a:hover {
background: #a50d26;
color: #fff;
padding-left: 20px;
}
.ppstore-account-nav ul li a .feather {
flex-shrink: 0;
opacity: 0.8;
}
.ppstore-account-nav ul li.is-active a .feather {
opacity: 1;
}
/* ── Contenuto account ── */
.ppstore-account-content {
background: #fff;
border: 1px solid var(--extra-medium-gray, #e4e4e4);
border-radius: 6px;
padding: 30px;
min-height: 300px;
}
.ppstore-account-content h2,
.ppstore-account-content .woocommerce-column__title {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-weight: 700;
font-size: 20px;
color: var(--dark-gray, #232323);
margin-bottom: 20px;
}
/* Tabella ordini */
.ppstore-account-content .woocommerce-orders-table {
width: 100%;
border-collapse: collapse;
}
.ppstore-account-content .woocommerce-orders-table th {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--dark-gray, #232323);
padding: 10px 15px;
border-bottom: 2px solid var(--extra-medium-gray, #e4e4e4);
text-align: left;
}
.ppstore-account-content .woocommerce-orders-table td {
padding: 12px 15px;
border-bottom: 1px solid var(--extra-medium-gray, #e4e4e4);
font-size: 14px;
color: var(--medium-gray, #828282);
vertical-align: middle;
}
.ppstore-account-content .woocommerce-orders-table td a {
color: var(--dark-gray, #232323);
font-weight: 600;
text-decoration: none;
}
.ppstore-account-content .woocommerce-orders-table td a:hover {
color: var(--base-color, #D4BA61);
}
/* Stato ordine badge */
.ppstore-account-content .woocommerce-order-status {
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ppstore-account-content mark.order-status {
background: none;
padding: 0;
}
/* Pulsante azioni */
.ppstore-account-content .woocommerce-button,
.ppstore-account-content .button,
.ppstore-account-content a.button {
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: var(--dark-gray, #232323);
color: #fff !important;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 4px;
text-decoration: none;
transition: background 0.2s ease;
border: none;
cursor: pointer;
}
.ppstore-account-content .woocommerce-button:hover,
.ppstore-account-content .button:hover,
.ppstore-account-content a.button:hover {
background: var(--base-color, #D4BA61);
color: #fff !important;
}
/* Form dettagli account */
.ppstore-account-content .woocommerce-EditAccountForm .form-row label,
.ppstore-account-content .woocommerce-address-fields .form-row label {
display: block;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 13px;
font-weight: 600;
color: var(--dark-gray, #232323);
margin-bottom: 6px;
}
.ppstore-account-content .woocommerce-EditAccountForm input,
.ppstore-account-content .woocommerce-address-fields input,
.ppstore-account-content .woocommerce-EditAccountForm select,
.ppstore-account-content .woocommerce-address-fields select {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--extra-medium-gray, #e4e4e4);
border-radius: 4px;
font-size: 14px;
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
background: #fff;
transition: border-color 0.2s ease;
}
.ppstore-account-content .woocommerce-EditAccountForm input:focus,
.ppstore-account-content .woocommerce-address-fields input:focus {
outline: none;
border-color: var(--base-color, #D4BA61);
box-shadow: 0 0 0 3px rgba(212, 186, 97, 0.08);
}
/* Responsive */
@media (max-width: 991px) {
.ppstore-account-nav {
position: static;
}
.ppstore-account-content {
padding: 20px;
}
}
@media (max-width: 575px) {
.ppstore-account-content .woocommerce-orders-table thead {
display: none;
}
.ppstore-account-content .woocommerce-orders-table td {
display: block;
padding: 8px 0;
border-bottom: none;
}
.ppstore-account-content .woocommerce-orders-table tr {
display: block;
border-bottom: 1px solid var(--extra-medium-gray, #e4e4e4);
padding: 12px 0;
}
}
/* ═══════════════════════════════════════════════════════════════
THANK YOU PAGE — Conferma ordine
═══════════════════════════════════════════════════════════════ */
.ppstore-thankyou {
padding: 10px 0 40px;
}
/* Banner conferma */
.ppstore-thankyou-banner {
background: var(--very-light-gray, #f5f5f5);
border-radius: 8px;
}
/* Meta boxes (n. ordine, data, totale, pagamento) */
.ppstore-thankyou-meta-box {
background: var(--very-light-gray, #f5f5f5);
border-radius: 6px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 6px;
height: 100%;
}
.ppstore-thankyou-meta-label {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--medium-gray, #828282);
}
.ppstore-thankyou-meta-value {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 16px;
font-weight: 700;
color: var(--dark-gray, #232323);
}
/* Tabella prodotti ordine */
.ppstore-order-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 0;
}
.ppstore-order-table thead th {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--dark-gray, #232323);
padding: 10px 15px;
border-bottom: 2px solid var(--extra-medium-gray, #e4e4e4);
text-align: left;
}
.ppstore-order-table thead th:last-child,
.ppstore-order-table tfoot th:last-child,
.ppstore-order-table tfoot td:last-child {
text-align: right;
}
.ppstore-order-table tbody td {
padding: 14px 15px;
border-bottom: 1px solid var(--extra-medium-gray, #e4e4e4);
font-size: 14px;
color: var(--medium-gray, #828282);
vertical-align: middle;
}
.ppstore-order-table tbody .product-name {
font-weight: 600;
color: var(--dark-gray, #232323);
}
.ppstore-order-table tbody .product-total {
text-align: right;
font-weight: 600;
color: var(--dark-gray, #232323);
}
.ppstore-order-table tfoot th,
.ppstore-order-table tfoot td {
padding: 10px 15px;
font-size: 13px;
border-bottom: 1px solid var(--extra-medium-gray, #e4e4e4);
color: var(--medium-gray, #828282);
}
.ppstore-order-table tfoot tr:last-child th,
.ppstore-order-table tfoot tr:last-child td {
font-size: 16px;
font-weight: 700;
color: var(--dark-gray, #232323);
border-bottom: none;
padding-top: 14px;
}
/* Riquadri indirizzo */
.ppstore-thankyou-address-box {
background: var(--very-light-gray, #f5f5f5);
border-radius: 6px;
padding: 20px 24px;
height: 100%;
}
.ppstore-address {
font-style: normal;
line-height: 1.7;
}
.ppstore-address .feather {
opacity: 0.6;
}
/* Bottone outline */
.ppstore-btn-outline {
display: inline-flex;
align-items: center;
padding: 12px 28px;
background: transparent;
color: var(--dark-gray, #232323) !important;
border: 2px solid var(--dark-gray, #232323);
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 4px;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
cursor: pointer;
}
.ppstore-btn-outline:hover {
background: var(--dark-gray, #232323);
color: #fff !important;
}
/* Responsive */
@media (max-width: 767px) {
.ppstore-thankyou-meta-box {
padding: 14px 16px;
}
.ppstore-order-table thead {
display: none;
}
.ppstore-order-table tbody td {
display: block;
padding: 8px 0;
border-bottom: none;
}
.ppstore-order-table tbody tr {
display: block;
border-bottom: 1px solid var(--extra-medium-gray, #e4e4e4);
padding: 12px 0;
}
.ppstore-order-table tbody .product-total {
text-align: left;
}
}
.woocommerce-MyAccount-navigation ul li a::before{
display: none;
}
/* ============================================================
MY ACCOUNT — FIXES
Aggiungere in fondo a: assets/css/ppstore-custom.css
Tutti i selettori sono scoped dentro .ppstore-my-account,
il wrapper custom del tema presente SOLO in /mio-account/*.
============================================================ */
/* ----------------------------------------------------------
1. ORDINI — pulsanti Successivo / Precedente
---------------------------------------------------------- */
.ppstore-my-account .woocommerce-pagination .woocommerce-button--next,
.ppstore-my-account .woocommerce-pagination .woocommerce-button--prev {
margin-top: 30px;
padding: 4px 12px;
background-color: var(--base-color, #D4BA61) !important;
color: #fff !important;
border-color: var(--base-color, #D4BA61) !important;
}
.ppstore-my-account .woocommerce-pagination .woocommerce-button--next:hover,
.ppstore-my-account .woocommerce-pagination .woocommerce-button--prev:hover {
background-color: #AE9850 !important;
border-color: #AE9850 !important;
}
/* ----------------------------------------------------------
2. INDIRIZZI — col-1 e col-2 al 100%
---------------------------------------------------------- */
.ppstore-my-account .woocommerce-Addresses .col-1,
.ppstore-my-account .woocommerce-Addresses .col-2 {
width: 100% !important;
float: none !important;
}
/* ----------------------------------------------------------
3. DETTAGLI ACCOUNT — icone show/hide password
---------------------------------------------------------- */
.ppstore-my-account span.password-input {
position: relative;
display: flex;
align-items: center;
}
.ppstore-my-account span.password-input .woocommerce-Input--password {
padding-right: 40px;
}
.ppstore-my-account span.password-input button.show-password-input {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
padding: 4px;
cursor: pointer;
color: var(--medium-gray, #7A6B63);
font-size: 16px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
transition: color 0.2s ease;
}
.ppstore-my-account span.password-input button.show-password-input:hover {
color: var(--base-color, #D4BA61);
}
.ppstore-my-account span.password-input button.show-password-input::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f070"; /* fa-eye */
}
.ppstore-my-account span.password-input button.show-password-input.display-password::before {
content: "\f06e"; /* fa-eye-slash */
}
.ppstore-thankyou section {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ----------------------------------------------------------
2. INDIRIZZI — layout colonne corretto
.col-1 e .col-2 vengono interpretate da Bootstrap come
1/12 (8.3%) e 2/12 (16.7%). Dentro la sezione indirizzi
della thank you le riportiamo a 50%/50% su desktop
e 100% su mobile, aggiungiamo box visivi omogenei.
---------------------------------------------------------- */
.ppstore-thankyou .woocommerce-customer-details .col2-set {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 40px;
}
.ppstore-thankyou .woocommerce-customer-details .col2-set .col-1,
.ppstore-thankyou .woocommerce-customer-details .col2-set .col-2 {
flex: 1 1 calc(50% - 12px) !important;
width: auto !important;
float: none !important;
min-width: 220px;
background: var(--very-light-gray, #f7f7f7);
border-radius: 6px;
padding: 20px 24px;
box-sizing: border-box;
}
@media (max-width: 767px) {
.ppstore-thankyou .woocommerce-customer-details .col2-set .col-1,
.ppstore-thankyou .woocommerce-customer-details .col2-set .col-2 {
flex: 1 1 100% !important;
}
}
/* ----------------------------------------------------------
3. TITOLI COLONNE INDIRIZZO
Correzione font-size (55px ereditato dal tema Crafto).
---------------------------------------------------------- */
.ppstore-thankyou .woocommerce-column__title {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--medium-gray, #7A6B63);
margin-bottom: 14px;
}
/* ----------------------------------------------------------
4. TAG — line-height e stile
---------------------------------------------------------- */
.ppstore-thankyou .woocommerce-column address {
font-style: normal;
line-height: 1.75;
font-size: 15px;
color: var(--dark-gray, #2C1810);
margin-bottom: 0;
}
.ppstore-thankyou .woocommerce-customer-details--phone,
.ppstore-thankyou .woocommerce-customer-details--email {
margin-top: 8px;
margin-bottom: 0;
font-size: 14px;
color: var(--medium-gray, #7A6B63);
}
/* ----------------------------------------------------------
5. SEZIONE DETTAGLI ORDINE — titolo e tabella
---------------------------------------------------------- */
.ppstore-thankyou .woocommerce-order-details {
margin-bottom: 40px;
}
.ppstore-thankyou .woocommerce-order-details__title {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 18px;
font-weight: 700;
color: var(--dark-gray, #2C1810);
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--extra-medium-gray, #e4e4e4);
}
/* ----------------------------------------------------------
6. SEZIONE DATI BANCARI (BACS)
---------------------------------------------------------- */
.ppstore-thankyou .woocommerce-bacs-bank-details {
margin-bottom: 40px;
}
.ppstore-thankyou .woocommerce-bacs-bank-details h2,
.ppstore-thankyou .woocommerce-bacs-bank-details p {
font-size: 15px;
}
.ppstore-thankyou .wc-bacs-bank-details {
list-style: none;
padding: 20px 24px;
margin: 0 0 24px;
background: var(--very-light-gray, #f7f7f7);
border-radius: 6px;
}
.ppstore-thankyou .wc-bacs-bank-details li {
padding: 6px 0;
font-size: 15px;
border-bottom: 1px solid var(--extra-medium-gray, #e4e4e4);
}
.ppstore-thankyou .wc-bacs-bank-details li:last-child {
border-bottom: none;
}
.ppstore-thankyou .wc-bacs-bank-details li strong {
color: var(--dark-gray, #2C1810);
font-weight: 600;
margin-right: 6px;
}
/* ----------------------------------------------------------
7. SEZIONE CUSTOMER DETAILS — heading
---------------------------------------------------------- */
.ppstore-thankyou .woocommerce-customer-details > h2 {
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 18px;
font-weight: 700;
color: var(--dark-gray, #2C1810);
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--extra-medium-gray, #e4e4e4);
}
/* WPC Product Options – select visivamente identica alle variation select */
.ppstore-single-product select.wpcpo-option-field,
.ppstore-single-product .wpcpo-option-field.field-select {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--extra-medium-gray, #e4e4e4);
border-radius: 0;
background-color: #fff;
color: var(--dark-gray, #232323);
font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23232323'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 10px;
transition: border-color 0.3s ease;
}
.ppstore-single-product .wpcpo-option-form label{
width: 100%;
}
.ppstore-single-product select.wpcpo-option-field:focus,
.ppstore-single-product .wpcpo-option-field.field-select:focus {
outline: none;
border-color: var(--base-color, #D4BA61);
} |