/*
 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
*/

html {
    scroll-behavior: smooth;
    scroll-padding-top: 15rem;
  }

@media (max-width: 478px) {
	html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
  }
}

/*
 * Button Styling
 * */
/* Primary */
.btn--primary::after {
	content: "";
	display: flex;
	position: relative;
	width: 2.5rem;
    height: 1.5rem;
	background-image: url('/wp-content/uploads/TattooArts_Arrow_Weiss.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2rem;
	transition: all .6s ease-in-out;
}

/* Secondary */
.btn--secondary::after {
	content: "";
	display: flex;
	position: relative;
	width: 2.5rem;
    height: 1.5rem;
	background-image: url('/wp-content/uploads/TattooArts_Arrow_Schwarz.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2rem;
	transition: all .6s ease-in-out;
}

/*
 * Header Desktop
 * */
#rit-nav .bricks-nav-menu .current-menu-item > a {
    text-decoration: none !important;
}

#rit-nav nav ul li a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translate(-50%, 8px);
  opacity: 0;
  width: calc(100% + 8px);
  height: 10px;
  background: url("/wp-content/uploads/TattooArts_Line-1.png") no-repeat center bottom;
  background-size: 100% auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  backface-visibility: hidden;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Hover & Active */
#rit-nav nav ul li a:hover::after,
#rit-nav nav ul li.current-menu-item a::after,
#rit-nav nav ul li.current_page_item a::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

#rit-nav nav ul li a:hover {
  color: var(--primary);
}

/*
 * Header Mobil
 * */
#rit-mobil-menunav nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#rit-mobil-menunav nav ul li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #000;
  padding: 0.5rem 0;
}

#rit-mobil-menunav nav ul li.current-menu-item a,
#rit-mobil-menunav nav ul li.current_page_item a {
  
}

#rit-mobil-menunav nav ul li.current-menu-item a::after,
#rit-mobil-menunav nav ul li.current_page_item a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0; 
  transform: translateX(-50%);
  width: calc(100% + 6px); 
  height: 12px; 
  background: url("/wp-content/uploads/TattooArts_Line-3.svg") no-repeat center bottom;
  background-size: contain;
}

#rit-mobil-menunav .bricks-nav-menu .current-menu-item > a {
  border-bottom: none !important;
  text-decoration: none;
}


/*
 * Hero Startseite
 * */
#rit-hero-startseite::after {
  content: "";
  display: flex;
  position: absolute;
  width: 80%;
  height: 80%;
  background-image: url("/wp-content/uploads/TattooArtsSVG-1.svg");
  background-repeat: no-repeat;
  background-position: 0 -1rem;
  background-size: contain;
  top: 0;
  left: 0;
}

@media (max-width: 991px) {
  #rit-hero-startseite::after {
	  width: 100%;
	  height: 100%;
	}
}

@media (max-width: 767px) {
   #rit-hero-startseite::after {
	  width: 40rem;
	  height: 100%;
	  left: -10rem;
	}
}

.rwp_schritte_aufzaehlung p {
  line-height: 1em !important;
}

/*
 * Tattoo Unterseite Permanent-Makeup
 * */

/*Logo von Permanent Makeup ab einer kleineren Bildschirmgröße als 320px ausblenden*/
@media (max-width: 320px) {
	.rwp_pmu_logo {
		display: none
	}
}

/*
 * Kontakt Seite
 * */

/*Kontaktformular stylen*/
.rwp_contact_form form {
    display: grid;
	grid-template-columns: 1fr 1fr;
    gap: 1rem !important;
}

.rwp_contact_form p:nth-last-of-type(-n+3) {
  grid-column: span 2;
}

@media (max-width: 767px) {
	.rwp_contact_form form {
		grid-template-columns: 1fr;
	}
	.rwp_contact_form p:nth-last-of-type(-n+3) {
	  grid-column: span 1;
	}
}

.rwp_contact_form p label {
	font-family: "Eczar";
    font-weight: 500;
    color: #453E34 !important;
    padding: 0;
}

.rwp_contact_form p label textarea {
	height: 5rem;
	border-radius: 4px;
	border: 2px solid #F8F8F8;
	font-family: "DM Sans" !important;
}

.rwp_contact_form p label span input {
	border-radius: 4px;
	border: 2px solid #F8F8F8;
	font-family: "DM Sans" !important;
}

.rwp_contact_form span.wpcf7-list-item {
	margin: 0rem !important;
}

.rwp_contact_form span.wpcf7-list-item-label {
	font-family: "DM Sans" !important;
	font-size: 16px;
}

.rwp_contact_form .wpcf7-list-item a {
	color: var(--neutral) !important;
	text-decoration: underline;
}

.rwp_contact_form .wpcf7-list-item a:hover {
	text-decoration: none;
}

/*Button*/
.rwp_contact_form .wpcf7-submit {
    position: relative; /* wichtig für ::after */
    background: var(--secondary);
    color: var(--white);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    border-style: var(--btn-border-style);
    border-radius: var(--btn-radius);
    border-color: var(--btn-border-color);
	overflow: visible;
}

.rwp_contact_form input.absenden::after {
    content: "";
    display: block;
    position: absolute;
    width: 2.5rem;
    height: 1.5rem;
    top: 0;
    right: 0;
    background-image: url(/wp-content/uploads/TattooArts_Arrow_Weiss.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2rem;
    transition: all 0.6s ease-in-out;
    z-index: 2;
}

.rwp_account .woocommerce-info {
    align-items: center;
    background-color: var(--base);
    color: var(--text);
    padding: 1rem;
    border: 1px solid #c3c4c7;
}

.woocommerce-info .button {
	background: var(--secondary);
    color: var(--white);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    min-inline-size: var(--btn-min-width);
    line-height: var(--btn-line-height);
    font-size: var(--btn-font-size, var(--text-m));
    font-weight: var(--btn-font-weight);
    font-style: var(--btn-font-style);
    text-transform: var(--btn-text-transform);
    letter-spacing: var(--btn-letter-spacing);
    text-decoration: var(--btn-text-decoration);
    border-width: var(--btn-border-width);
    border-style: var(--btn-border-style);
    border-radius: var(--btn-radius);
    border-color: var(--btn-border-color);
    transition: var(--btn-transition, var(--transition));
    justify-content: var(--btn-justify-content, center);
    text-align: var(--btn-text-align, center);
}

.woocommerce-info .button:hover {
	background: #73713f;
}

.products .wc-gzd-additional-info {
  margin: 0 !important;
  font-size: 14px !important;
  margin-top: 2rem;
}

.button.product_type_variable.add_to_cart_button,
.button.product_type_simple.add_to_cart_button {
	background: var(--secondary);
    color: var(--white);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    min-inline-size: var(--btn-min-width);
    line-height: var(--btn-line-height);
    font-size: var(--btn-font-size, var(--text-m));
    font-weight: var(--btn-font-weight);
    font-style: var(--btn-font-style);
    text-transform: var(--btn-text-transform);
    letter-spacing: var(--btn-letter-spacing);
    text-decoration: var(--btn-text-decoration);
    border-width: var(--btn-border-width);
    border-style: var(--btn-border-style);
    border-radius: var(--btn-radius);
    border-color: var(--btn-border-color);
    transition: var(--btn-transition, var(--transition));
    justify-content: var(--btn-justify-content, center);
    text-align: var(--btn-text-align, center);	
	margin-bottom: 1rem;
}

.rwp_shop-overview img {
	aspect-ratio: 1 / 1;
    object-fit: cover;
}

.woocommerce-notices-wrapper .woocommerce-message {
    align-items: center;
    background-color: var(--base);
    color: var(--text);
    padding: 1rem;
    border: 1px solid #c3c4c7;
    border-radius: 15rem;
	padding-left: 2rem;
    padding-right: 2rem;
}

.restore-item,
.button.wc-forward,
.woocommerce-Button.button {
	background: var(--secondary);
    color: var(--white);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    min-inline-size: var(--btn-min-width);
    line-height: var(--btn-line-height);
    font-size: var(--btn-font-size, var(--text-m));
    font-weight: var(--btn-font-weight);
    font-style: var(--btn-font-style);
    text-transform: var(--btn-text-transform);
    letter-spacing: var(--btn-letter-spacing);
    text-decoration: var(--btn-text-decoration);
    border-width: var(--btn-border-width);
    border-style: var(--btn-border-style);
    border-radius: var(--btn-radius);
    border-color: var(--btn-border-color);
    transition: var(--btn-transition, var(--transition));
    justify-content: var(--btn-justify-content, center);
    text-align: var(--btn-text-align, center);	
	margin-bottom: 0;	
}

.rwp_account .woocommerce-MyAccount-content .edit-account .woocommerce-Input {
	margin: 0 !important;
}

/* Header Warenkorb */
.widget_shopping_cart_content {
	
}

.woocommerce-mini-cart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1rem;
}

.woocommerce-mini-cart__total.total {
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;	
}

.woocommerce-mini-cart__total.total .woocommerce-Price-amount.amount {
	margin: 0;
}

.total.total-cart-tax.wc-gzd-total-mini-cart {
	padding-top: 0.5rem;
    padding-bottom: 0.5rem;	
}

.woocommerce-mini-cart__buttons.buttons {
	display: flex;
    flex-direction: column;
    gap: 0.5rem;	
	margin-top: 0.5rem;
}

.woocommerce-mini-cart__buttons.buttons .button.checkout.wc-forward {
	margin: 0;
}

/* Kontodetails: Mein Konto */
.woocommerce-EditAccountForm.edit-account #account_display_name_description em {
	font-size: 14px !important;
}

.woocommerce-EditAccountForm.edit-account .woocommerce-form-row.woocommerce-form-row--wide.form-row.form-row-wide {
	margin-top: 1rem;
}

.woocommerce-EditAccountForm.edit-account fieldset {
	margin-top: 1rem;
	background-color: var(--base);
    color: var(--text);
    padding: 1.5rem;
    border: 1px solid #c3c4c7;
}

.woocommerce-EditAccountForm.edit-account fieldset .woocommerce-form-row.woocommerce-form-row--wide.form-row.form-row-wide {
	margin-top: 0.5rem;
}

.woocommerce-EditAccountForm.edit-account fieldset .woocommerce-Input.woocommerce-Input--password.input-text {
	padding: 0.5rem;
}

.woocommerce-EditAccountForm.edit-account fieldset .woocommerce-form-row.woocommerce-form-row--wide.form-row.form-row-wide .password-input {
	margin-top: 0.5rem;
}

.woocommerce-EditAccountForm.edit-account .woocommerce-Input.woocommerce-Input--text.input-text,
.woocommerce-EditAccountForm.edit-account .woocommerce-Input.woocommerce-Input--email.input-text {
	background-color: var(--base);
    color: var(--text);
    padding: 0.5rem;
    border: 1px solid #c3c4c7;
}


.brx-multilevel-overflow-right, .brx-multilevel-overflow-right ul, .brx-submenu-overflow-right {
    left: 0 !important;
    right: 0 !important;
	width: 100%;
}


/* Menü Anpassungen */
@media (max-width: 991px) {
	:where(.brxe-nav-menu) .bricks-nav-menu .bricks-menu-item.open .sub-menu {
		position: relative;
	}
}

#rit-nav .bricks-nav-menu > .current-menu-ancestor > .brx-submenu-toggle > * {
    text-decoration: none !important;
}

#rit-nav nav ul.sub-menu li a::after {
    background: none;
}

#rit-nav nav ul.sub-menu li:hover a {
    text-decoration: underline !important;
}


/* Shop Detail */
.fr-single-product-alpha__cart td.value select {
	background-color: #fff;
}

.fr-single-product-alpha__cart table.variations tr {
	display: flex !important;
	flex-direction: row;
	gap: 4rem;
}

.fr-single-product-alpha__cart table.variations th {
	padding-top: 0;
}

.fr-single-product-alpha__cart form.cart .quantity .action.minus,
.fr-single-product-alpha__cart form.cart .quantity .action.plus {
	background-color: white;
    padding: 0.5rem;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 8rem;
}

.fr-single-product-alpha__cart form.cart .quantity {
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.fr-single-product-alpha__cart form.cart button:not(.added_to_cart) {
    background: var(--secondary) !important;
    color: var(--white) !important;
    padding-block: var(--btn-padding-block) !important;
    padding-inline: var(--btn-padding-inline) !important;
    border-style: var(--btn-border-style) !important;
    border-radius: var(--btn-radius) !important;
    border-color: var(--btn-border-color) !important;
	overflow: visible;
	padding-bottom: 12px !important;
	padding-top: 12px !important;
	padding-left: 28px !important;
	padding-right: 28px !important;
}

.wc-gzd-checkout .is-large .wc-gzd-checkout-submit .wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
    background: var(--secondary) !important;
    color: var(--white) !important;
    padding-block: var(--btn-padding-block) !important;
    padding-inline: var(--btn-padding-inline) !important;
    border-style: var(--btn-border-style) !important;
    border-radius: var(--btn-radius) !important;
    border-color: var(--btn-border-color) !important;
	overflow: visible;
	padding-bottom: 12px !important;
	padding-top: 12px !important;
	padding-left: 28px !important;
	padding-right: 28px !important;	
}

.wc-gzd-checkout .wc-block-components-order-summary, .wc-gzd-checkout .wc-block-components-order-summary.is-large {
	background-color: #f8f8f8 !important;
}

.fr-cart-alpha__totals .button,
.fr-cart-alpha__coupon .coupon .button {
    background-color: var(--secondary) !important; 
}

/* Kosmetik-Seite */
.rwp_behandlung-loop-item:hover {
	background-size: 110%;
}
.rwp_behandlung-loop-item:hover h2 {
	text-decoration: underline;
}

/* Instagram Feed */
.rwp-instagram-feed .sbi_load_btn {
	background: #646237 !important;
    color: #fff !important;
    padding-block: var(--btn-padding-block) !important;
    padding-inline: var(--btn-padding-inline) !important;
    min-inline-size: var(--btn-min-width) !important;
    line-height: var(--btn-line-height) !important;
    font-size: var(--btn-font-size, var(--text-m)) !important;
    font-weight: var(--btn-font-weight) !important;
    font-style: var(--btn-font-style) !important;
    text-transform: var(--btn-text-transform) !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    text-decoration: var(--btn-text-decoration) !important;
    border-width: var(--btn-border-width) !important;
    border-style: var(--btn-border-style) !important;
    border-radius: var(--btn-radius) !important;
    border-color: var(--btn-border-color) !important;
    transition: var(--btn-transition, var(--transition)) !important;
    justify-content: var(--btn-justify-content, center) !important;
    text-align: var(--btn-text-align, center) !important;
}

.rwp-instagram-feed .sbi_load_btn:hover {
	background: #73713f !important;
    color: #fff !important;
}

.rwp-instagram-feed [data-icon]:is(svg, i, a) {
    background: #ffffff00;
}

.rwp-instagram-feed .sbi_follow_btn.sbi_custom a {
	background: #646237 !important;
    color: #fff !important;
    padding-block: var(--btn-padding-block) !important;
    padding-inline: var(--btn-padding-inline) !important;
    min-inline-size: var(--btn-min-width) !important;
    line-height: var(--btn-line-height) !important;
    font-size: var(--btn-font-size, var(--text-m)) !important;
    font-weight: var(--btn-font-weight) !important;
    font-style: var(--btn-font-style) !important;
    text-transform: var(--btn-text-transform) !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    text-decoration: var(--btn-text-decoration) !important;
    border-width: var(--btn-border-width) !important;
    border-style: var(--btn-border-style) !important;
    border-radius: var(--btn-radius) !important;
    border-color: var(--btn-border-color) !important;
    transition: var(--btn-transition, var(--transition)) !important;
    justify-content: var(--btn-justify-content, center) !important;
    text-align: var(--btn-text-align, center) !important;	
}

.rwp-instagram-feed .sbi_follow_btn.sbi_custom a svg {
	padding: 0 !important;
    margin: 0 !important;
    color: #fff;
	font-size: 17px !important;
}

.rwp-instagram-feed .sbi_follow_btn.sbi_custom:hover a {
	background: #73713f !important;
    color: #fff !important;
}

#sb_instagram .sbi_follow_btn a:focus, #sb_instagram .sbi_follow_btn a:hover {
    box-shadow: none !important;
}

#sb_instagram .sbi_follow_btn a:hover {
    background: #73713f !important;
}

/* Footer Ergänzung */
.fr-footer-echo__copyright a {
	color: #fff;
	text-decoration: underline;
}

.fr-footer-echo__copyright a:hover {
	color: #fff;
	text-decoration: none;
}