/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
	/* Header fisso: questi token governano sia il layout sia i relativi offset. */
	--vs-header-promo-height: 36px;
	--vs-header-main-height: 68px;
	--vs-header-height: calc(var(--vs-header-promo-height) + var(--vs-header-main-height));
	/* Alias usato anche dal CSS globale generato da Bricks. */
	--header-height: var(--vs-header-height);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--vs-header-height);
}

#brx-header {
	height: var(--vs-header-height);
}

#brxe-qrnskb {
	height: var(--vs-header-promo-height);
}

#brxe-smigwo {
	height: var(--vs-header-main-height);
}

/* L'header resta sovrapposto alla hero soltanto in home. */
body:not(.home) #brx-content {
	padding-top: var(--vs-header-height);
}

/*
 * Le pagine di sistema WooCommerce (carrello, checkout e account) sono
 * renderizzate da WordPress dentro #brx-content, non in un .brxe-container.
 * Replica quindi il gutter responsive definito per il Container nei Theme
 * Styles di Bricks.
 */
body.woocommerce-cart #brx-content.wordpress,
body.woocommerce-checkout #brx-content.wordpress,
body.woocommerce-account #brx-content.wordpress {
	width: 100%;
	max-width:1440px;
	margin-inline: auto;
	padding-right: var(--vs-section-space-small) !important;
	padding-left: var(--vs-section-space-small) !important;
  margin:var(--vs-section-space-large) auto;
}
.giuale-cart-page{
  background-color: var(--giuale-cart-panel);
}
.woocommerce-order-details table tfoot {
    background-color: #f5f6f700;
}
@media (max-width: 991px) {
	body.woocommerce-cart #brx-content.wordpress,
	body.woocommerce-checkout #brx-content.wordpress,
	body.woocommerce-account #brx-content.wordpress {
		padding-right: 40px !important;
		padding-left: 40px !important;
	}
}

@media (max-width: 478px) {
	body.woocommerce-cart #brx-content.wordpress,
	body.woocommerce-checkout #brx-content.wordpress,
	body.woocommerce-account #brx-content.wordpress {
		padding-right: 20px !important;
		padding-left: 20px !important;
	}
}

@media (max-width: 767px) {
	:root {
		--vs-header-main-height: 69px;
	}
}

@media (max-width: 478px) {
	:root {
		--vs-header-main-height: 81px;
	}
}

/* =========================
   Link underline
========================= */
.vs-txt-link-1,
.menu-item a {
  position: relative;
  text-decoration: none;
}

.menu-item a {
  width: fit-content !important;
}

.vs-txt-link-1::before,
.menu-item a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.vs-txt-link-1:hover::before,
.menu-item a:hover::before,
.menu-item a[aria-current="page"]::before {
  transform: scaleX(1) !important;
}

.brxe-toggle {
    --brxe-toggle-width: 24px;
    --brxe-toggle-height: 16px;
    --brxe-toggle-bar-height: 3px;
    --brxe-toggle-bar-width: 24px;
    --brxe-toggle-bar-radius: 4px;
}
.brxa-wrap {
    height: 16px;
    width: 24px;
}
.brxa-inner {
    margin-top: 0;
}
.brxa-inner:before {
    top: -8px;
}
.brxa-inner:after {
    bottom: -8px;
}
/* Menu offcanvas: lascia visibile l'intero header, anche quando cambia altezza. */
.menu-flyout .brx-offcanvas-inner {
	top: var(--menu-flyout-top, 0px) !important;
	bottom: 0 !important;
	height: auto !important;
	max-height: calc(100dvh - var(--menu-flyout-top, 0px));
}

.menu-flyout .brx-offcanvas-backdrop {
	top: var(--menu-flyout-top, 0px) !important;
}
.brx-body.iframe .brxe-nav-nested.brx-open .brxa--boring .brxa-inner:after, .brx-body.iframe .brxe-offcanvas.brx-open .brxa--boring .brxa-inner:after, .brxa--boring.is-active .brxa-inner:after {
    bottom: 0;
    transform: rotate(-90deg);
}


/* FILTERBAR */
.filterbar {
  position: fixed;
  top: 0;
  left: 0;
  width: min(420px, 90vw);
  height: 100vh;
  background: #fff;
  z-index: 1200;
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.4s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;
  overflow-y: auto;
  will-change: transform;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.12);
}

.filterbar.open-filter {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.brxe-filter-checkbox .brx-option-text {
  width: 100%;
  justify-content: space-between;
}

.filterbar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1190;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.filterbar-overlay.open-filter {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* label allineata bene */
.filterbar label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.filterbar input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 18px;
  height: 18px;
  max-width: 18px !important;
  min-width: 18px;
  border: 1px solid #000;
  border-radius: 6px;
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  padding: 0;
}

.filterbar input[type="checkbox"]:checked {
  background: #000;
  border-color: #000;
}
.filterbar input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .15);
}
.filterbar label:hover input[type="checkbox"]:not(:disabled) {
  border-color: #000;
}
.filterbar input[type="checkbox"]:checked {
  background-color: #000 !important;
  border-color: #000 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
}
.filterbar-acc-cont {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}
/* =========================================================
   Scrollbar minimal dentro .filterbar
   - track trasparente (nessun bg)
   - thumb visibile #212121
   - no frecce su/giù
========================================================= */
/* Firefox */
.filterbar,
.filterbar *,
* {
  scrollbar-width: thin;
  scrollbar-color: #212121 transparent;
  /* thumb, track */
}
/* WebKit (Chrome, Edge, Safari) */
.filterbar *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.filterbar *::-webkit-scrollbar-track {
  background: transparent;
}
.filterbar *::-webkit-scrollbar-thumb {
  background-color: #212121;
  border-radius: 0px;
  border: 2px solid transparent;
  /* fa “staccare” il thumb dal bordo */
  background-clip: padding-box;
  /* mantiene la track trasparente */
}
/* Hover facoltativo (resta nero, solo un pelo più “pieno”) */
.filterbar *::-webkit-scrollbar-thumb:hover {
  background-color: #212121;
  border-width: 1px;
}
/* Rimuove i bottoni/frecce (dove presenti) */
.filterbar *::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}
/* Elimina eventuale “corner” tra scroll verticale+orizzontale */
.filterbar *::-webkit-scrollbar-corner {
  background: transparent;
}
/* LOGIN FORM (LOGGED IN E LOGGED OUT) */
.login-offcanvas .woocommerce {
    font-size: 14px;
    color: #888880;
    text-transform: uppercase;
}
.login-offcanvas .woocommerce .woocommerce-MyAccount-content{
  display:none;
}
@media(max-width:477px){
  .brxa-wrap {
    height: 12px;
    width: 20px;
}
.brxe-toggle .brxa-inner, .brxe-toggle .brxa-inner:after, .brxe-toggle .brxa-inner:before {
  width:20px;
}
.brxa-inner {
    margin-top: 0;
}
.brxa-inner:before {
    top: -6px;
}
.brxa-inner:after {
    bottom: -6px;
}
}
.alignwide, .wp-block-image.alignwide {
    margin-left: 0;
    max-width: 100%;
    position: relative;
    width: 100%;
}

.login-offcanvas h2, .login-offcanvas .u-column2{
  display:none;
}

.login-offcanvas .woocommerce-form-login .lost_password{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.login-offcanvas .woocommerce-privacy-policy-text{
  font-size: 11px;
  color: #888880;
}
.login-offcanvas button.woocommerce-button.button.woocommerce-form-login__submit, button.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit{
  background-color:#191917;
  color: #fff;
  text-transform: uppercase;
  width:100%;
  padding:14px 0;
  font-family: 'Raleway';
  font-weight: 500;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 1.65px;
  text-align: center;
}
.login-offcanvas label{
  font-weight: 500;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.login-offcanvas p.woocommerce-LostPassword.lost_password {
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: #888880;
}
.wordpress h1{
	display:none;
}