/******* SINGLE AUTO & MOTO LAYOUT *******/

body:is(.single-auto, .single-moto) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1920' height='1000' preserveAspectRatio='none' viewBox='0 0 1920 1000'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1324%26quot%3b)' fill='none'%3e%3crect width='1920' height='1000' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1325%26quot%3b)'%3e%3c/rect%3e%3cpath d='M1920 0L1280.75 0L1920 42.22z' fill='rgba(255%2c 255%2c 255%2c .1)'%3e%3c/path%3e%3cpath d='M1280.75 0L1920 42.22L1920 347.78999999999996L1110.78 0z' fill='rgba(255%2c 255%2c 255%2c .075)'%3e%3c/path%3e%3cpath d='M1110.78 0L1920 347.78999999999996L1920 383.56999999999994L1101.6399999999999 0z' fill='rgba(255%2c 255%2c 255%2c .05)'%3e%3c/path%3e%3cpath d='M1101.6399999999999 0L1920 383.56999999999994L1920 726.26L456.9899999999999 0z' fill='rgba(255%2c 255%2c 255%2c .025)'%3e%3c/path%3e%3cpath d='M0 1000L382.07 1000L0 942.16z' fill='rgba(0%2c 0%2c 0%2c .1)'%3e%3c/path%3e%3cpath d='M0 942.16L382.07 1000L1040.7 1000L0 697.6999999999999z' fill='rgba(0%2c 0%2c 0%2c .075)'%3e%3c/path%3e%3cpath d='M0 697.7L1040.7 1000L1155.63 1000L0 585.3800000000001z' fill='rgba(0%2c 0%2c 0%2c .05)'%3e%3c/path%3e%3cpath d='M0 585.38L1155.63 1000L1329.5100000000002 1000L0 520.66z' fill='rgba(0%2c 0%2c 0%2c .025)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1324'%3e%3crect width='1920' height='1000' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='11.98%25' y1='-23%25' x2='88.02%25' y2='123%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1325'%3e%3cstop stop-color='rgba(221%2c 229%2c 237%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(225%2c 225%2c 225%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e") !important;
}

:is(.single-auto, .single-moto).content-style-unboxed .entry:not(.loop-entry) > .entry-content-wrap.grid {
    grid-template-areas:
        "gallery gallery gallery gallery price price"
        "spec spec spec spec price price";
    grid-gap: 2rem;
    padding-block: 0 6rem;
    grid-template-columns: repeat(6, 1fr);
}

.single-auto :is(#auto_left-content, #auto_main-content, #auto_right-content),
.single-moto :is(#moto_left-content, #moto_main-content, #moto_right-content) {
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 10%), 0px 0px 30px rgb(255 255 255 / 10%);
    border-radius: 1rem;
	background-color: rgba(255,255,255,0.1);
	overflow: hidden;
}

:is(#auto_main-content, #moto_main-content) {
	grid-area: gallery;
    grid-column: span 4;
}

:is(#auto_left-content, #moto_left-content) {
	gap: 1rem;
	grid-area: spec;
    grid-column: span 4;
}

:is(#auto_right-content, #moto_right-content) {
    grid-area: price;
    grid-column: span 2;
    position: sticky;
    top: 4rem;
    height: max-content;
	padding-block: 2rem !important;
}

/******* SINGLE AUTO & MOTO MAIN CONTENT *******/

:is(.car__head, .moto__head).flex {
    align-items: center;
}

#auto_main-content .car__head img.car__brand-logo,
#moto_main-content .moto__head img.moto__brand-logo {
    max-width: 100%;
    width: 90px;
	height: auto;
    margin-right: 1rem;
}

#auto_main-content h2:first-of-type {
	visibility: hidden;
	text-indent: -9999px;
	height: 0px;
}

#auto_main-content h1 {
    flex-grow: 1;
}

/* GALLERIA SWIPER + FANCYBOX */
:is(.car__images, .moto__images) .swiper.main-slider {
    margin-bottom: 1rem;
}

:is(.car__images, .moto__images) .swiper-lazy-preloader {
  width: 30px;
  height: 30px;
  margin: auto;
  position: absolute;
  left: 0; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 10;
}

/******* SINGLE AUTO & MOTO LEFT CONTENT *******/

:is(#auto_left-content, #moto_left-content) {
    gap: 1rem;
}

#specs .specs-list {
    flex-wrap: wrap;
    gap: 0.3rem;
}

#specs .specs-list .spec-item {
    min-width: calc(50% - 0.15rem);
    font-size: 0.9rem;
}

.spec-item strong {
    color: var(--global-palette4);
}

/******* SINGLE AUTO & MOTO RIGHT CONTENT *******/

/** Vendita **/
.sell-price span {
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.3rem 1rem;
    border-radius: 100vmax;
    color: var(--global-palette9);
    background-color: var(--global-palette1);
}

:is(#auto_right-content, #moto_right-content) #siti-esterni {
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

:is(#auto_right-content, #moto_right-content) h4 {
	width: 100%;
}

:is(#auto_right-content, #moto_right-content) #siti-esterni a {
	width: calc(50% - 0.5rem);
	transition: 200ms ease;
}

:is(#auto_right-content, #moto_right-content) #siti-esterni a:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0px 3px 10px rgba(0,0,0,0.1));
}

:is(#auto_right-content, #moto_right-content) #siti-esterni a img {
    max-height: 24px;
}

:is(#auto_right-content, #moto_right-content) #contatti a {
    padding: 5px 15px 6px;
    background-color: #72aee6;
    color: #fff;
    text-decoration: none;
    border-radius: 100vmax;
    font-size: 1rem;
    line-height: initial;
	transition: 200ms ease;
}

:is(#auto_right-content, #moto_right-content) #contatti a:hover {
    box-shadow: 0px 3px 10px rgb(0 0 0 / 10%);
    transform: translateY(-1px);
}

:is(#auto_right-content, #moto_right-content) a.phone:before {
    content: '';
    position: relative;
    padding: 0 7px 3px;
    margin-right: 0.3rem;
    background-image: url(/wp-content/themes/otter-showroom/assets/img/telephone-fill.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1);
}

:is(#auto_right-content, #moto_right-content) a.whatsapp:before {
    content: '';
    position: relative;
    padding: 0 7px 3px;
    margin-right: 0.3rem;
    background-image: url(/wp-content/themes/otter-showroom/assets/img/whatsapp.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1);
}

:is(#auto_right-content, #moto_right-content) a.email:before {
    content: '';
    position: relative;
    padding: 0 7px 3px;
    margin-right: 0.3rem;
    background-image: url(/wp-content/themes/otter-showroom/assets/img/envelope-at-fill.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1);
}

/*:is(#auto_right-content, #moto_right-content) #form button {
    padding: 5px 15px;
    background-color: var(--global-palette5);
    color: #fff;
    text-decoration: none;
    border-radius: 100vmax;
    font-size: 1rem;
    line-height: inherit;
    transition: 300ms ease;
}

:is(#auto_right-content, #moto_right-content) #form button:hover {
	box-shadow: 0px 3px 10px rgb(0 0 0 / 10%);
	transform: translateY(-1px);
}*/

.mce-toolbar .mce-btn button:hover {
	background-color: inherit !important;
	box-shadow: none !important;
	transform: translate(0) !important;
}

:is(#auto_right-content, #moto_right-content) dialog {
    background-color: white;
    border: 0;
    border-radius: 1rem;
    padding: 2rem;
    overflow-x: hidden;
    overflow-y: scroll;
}

:is(#auto_right-content, #moto_right-content) dialog button.close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    background-color: var(--global-palette5) !important;
}

:is(#auto_right-content, #moto_right-content) dialog h4 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
	color: #2264ad;
}

:is(#auto_right-content, #moto_right-content) dialog p {
	color: #212121;
}

:is(#auto_right-content, #moto_right-content) dialog .gform_wrapper {
    padding-top: 1rem;
    border-top: 2px dashed #72aee6;
    margin-top: 1rem;
}

dialog:-internal-dialog-in-top-layer::backdrop {
    background: rgba(0, 0, 0, 0.25);
}

:is(#auto_right-content, #moto_right-content) dialog button[type="submit"] {
    background-color: var(--global-palette1) !important;
}

/*************** MEDIA QUERIES **************/

@media (max-width: 979px) {
	:is(.single-auto, .single-moto).content-style-unboxed .entry:not(.loop-entry) > .entry-content-wrap.grid {
        grid-template-areas:
            "gallery gallery"
            "spec price";
        grid-template-columns: repeat(5, 1fr);
    }
    :is(#auto_main-content, #moto_main-content) {
        grid-column: span 5;
    }
    :is(#auto_left-content, #moto_left-content) {
        grid-column: span 3;
    }
    :is(#auto_right-content, #moto_right-content) {
        grid-column: span 2;
    }
}

@media (max-width: 820px) {
    :is(.single-auto, .single-moto).content-style-unboxed .entry:not(.loop-entry) > .entry-content-wrap.grid {
        grid-template-areas:
            "gallery"
            "spec"
            "price";
        grid-template-columns: 1fr;
    }
    .single-auto :is(#auto_left-content, #auto_main-content, #auto_right-content),
    .single-moto :is(#moto_left-content, #moto_main-content, #moto_right-content) {
        padding: 1.5rem 1rem;
    }
    .single-auto :is(#auto_main-content, #moto_main-content),
    .single-moto :is(#auto_main-content, #moto_main-content) {
        grid-column: span 1;
        overflow: hidden;
    }
    .single-auto :is(#auto_left-content, #moto_left-content),
    .single-moto :is(#auto_left-content, #moto_left-content) {
        grid-column: span 1;
    }
    .single-auto :is(#auto_right-content, #moto_right-content),
    .single-moto :is(#auto_right-content, #moto_right-content) {
        grid-column: span 1;
    }
	#auto_main-content .car__head img.car__brand-logo,
	#moto_main-content .moto__head img.moto__brand-logo {
		max-width: 50px;
	}
	:is(#auto_main-content, #moto_main-content) h1 {
		font-size: 1.4rem;
	}
	:is(#auto_right-content, #moto_right-content) dialog {
		padding: 0;
		overflow: visible;
	}
	:is(#auto_right-content, #moto_right-content) dialog .modal-inner {
		padding: 1.5rem;
    	max-height: 70vh;
    	overflow: scroll;
	}
	:is(#auto_right-content, #moto_right-content) dialog h4 {
		font-size: 1.4rem;
	}
	:is(#auto_right-content, #moto_right-content) dialog :is(p, span, input, legend) {
		font-size: 0.9rem;
	}
	:is(#auto_right-content, #moto_right-content) dialog button.close {
		right: 0;
		top: -1.5rem;
		border-radius: 1rem 1rem 0 1rem !important;
	}
}

/*:is(.car__images, .moto__images) .flexslider {
    margin: 2rem 0.5rem 3rem 0.5rem !important;
    background: none !important;
    border: none !important;
	position: relative;
}

:is(.car__images, .moto__images) .flexslider .slides {
	zoom: 1;
}

:is(.car__images, .moto__images) .flexslider .slides:before,
:is(.car__images, .moto__images) .flexslider .slides:after {
	content: "";
	display: table;
}

:is(.car__images, .moto__images) .flexslider .slides:after {
	clear: both;
}

:is(.car__images, .moto__images) .flexslider .slides li {
	position: relative;
	display: none;
	-webkit-backface-visibility: hidden;
	border-radius: 1rem;
}

:is(.car__images, .moto__images) .flexslider .slides img {
	display: block;
	width: 100%;
	max-height: 600px;
	border-radius: 1rem;
}

:is(.car__images, .moto__images) .flexslider-thumbnails {
    margin: 0 0.5rem;
}

:is(.car__images, .moto__images) .flexslider-thumbnails .slides li {
	margin-right: 10px;
	float: left;
	cursor: pointer;
	border-radius: 0.5rem;
}

:is(.car__images, .moto__images) .flexslider-thumbnails .slides img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
}

:is(.car__images, .moto__images) .flex-direction-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 100%;
	height: 50px;
}

:is(.car__images, .moto__images) .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 0 !important;
	background-color: transparent;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	opacity: 0.5;
}

:is(.car__images, .moto__images) .flex-direction-nav .flex-next {
	right: 20px;
}

:is(.car__images, .moto__images) .flex-direction-nav .flex-prev {
	left: 20px;
}

:is(.car__images, .moto__images) .flex-direction-nav a:hover,
:is(.car__images, .moto__images) .flex-direction-nav a:focus {
  opacity: 1;
}

:is(.car__images, .moto__images) .flexslider-thumbnails .flex-direction-nav,
.flexslider-thumbnails .flex-direction-nav * {
	display: none !important;
}

@media (max-width: 768px) {
    :is(.car__images, .moto__images) .flexslider {
        margin: 0.5rem 0.5rem 1.5rem 0.5rem !important;
    }
	:is(.car__images, .moto__images) .flexslider-thumbnails .slides li,
	:is(.car__images, .moto__images) .flexslider-thumbnails .slides img {
		max-width: 85px;
	}
}*/