/* ==========================================================================
   Responsive overrides - comproorosiracusa.it
   Tema: hyla (OpenCart)
   Caricato DOPO stylesheet.css, slideshow.css e carousel.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ritocchi di base validi a tutte le risoluzioni
   -------------------------------------------------------------------------- */
#logo img {
	max-width: 100%;
	height: auto;
}

/* Il pulsante hamburger e i toggle dei sottomenu sono solo mobile */
#menu-toggle,
.submenu-toggle {
	display: none;
}

/* Pallini del carosello: visibili solo su mobile/tablet */
.slideshow-dots {
	display: none;
}

/* Contenitore per tabelle larghe (aggiunto via javascript) */
.table-responsive {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 15px;
}

.table-responsive table {
	margin-bottom: 0;
}

/* Correzione overflow orizzontale generale */
html,
body {
	max-width: 100%;
}


/* ==========================================================================
   TABLET / PICCOLI DESKTOP  (<= 1024 px)
   I contenitori fissi a 980px diventano fluidi.
   ========================================================================== */
@media (max-width: 1024px) {

	body {
		-webkit-text-size-adjust: 100%;
	}

	#contentwrapper,
	#header,
	#menu ul,
	#footer #info {
		width: 100%;
		max-width: 980px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#contentwrapper {
		padding-left: 10px;
		padding-right: 10px;
	}

	.success,
	.warning,
	.attention,
	.information {
		width: auto;
		max-width: 980px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		margin-left: auto;
		margin-right: auto;
	}

	#content img,
	.category-info img,
	.box-content img {
		max-width: 100%;
		height: auto;
	}

	/* Pannello quotazione in home: i tre blocchi hanno larghezze inline fisse */
	.box-content > div[style*="height:190px"] {
		height: auto !important;
		overflow: hidden;
	}

	.box-content div[style*="width:340px"],
	.box-content div[style*="width:290px"],
	.box-content div[style*="width:280px"] {
		float: left !important;
		width: 33.333% !important;
		padding-right: 10px !important;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.box-content div[style*="height:178px"],
	.box-content div[style*="height:75px"] {
		height: auto !important;
	}

	.box-content iframe {
		width: 100% !important;
		max-width: 100% !important;
		height: 180px !important;
	}
}


/* ==========================================================================
   TABLET E SMARTPHONE  (<= 979 px)
   Header rifatto in flexbox, menu a fisarmonica, slider adattivi.
   ========================================================================== */
/* Menu a fisarmonica anche su tablet in orizzontale (fino a 1024 px)
   e su qualunque dispositivo senza mouse (hover: none). */
@media (max-width: 1024px), (hover: none) {

	/* ---------- Header ---------- */
	#header {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-align: center;
		align-items: center;
		height: auto;
		padding: 10px;
	}

	#header #logo {
		position: static;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		min-width: 0;
		-ms-flex-order: 1;
		order: 1;
	}

	#header #logo img {
		max-width: 180px;
	}

	#header #cart {
		position: relative;
		-ms-flex-order: 2;
		order: 2;
		margin-left: auto;
		min-width: 0;
		max-width: 55%;
	}

	#header #cart .heading {
		float: none;
		display: inline-block;
		margin: 0;
		padding: 8px 10px 8px 30px;
		background-position: 8px 50%;
	}

	#header #cart .heading a {
		font-size: 11px;
	}

	#header #cart .content {
		position: absolute;
		right: 0;
		top: 100%;
		width: -webkit-calc(100vw - 20px);
		width: calc(100vw - 20px);
		max-width: 340px;
	}

	#header #language,
	#header #currency {
		position: static;
		-ms-flex-order: 3;
		order: 3;
		width: auto;
		margin-top: 6px;
		font-size: 11px;
	}

	#header #search {
		position: relative;
		-ms-flex-order: 5;
		order: 5;
		top: auto;
		right: auto;
		width: 100%;
		margin-top: 10px;
	}

	#header #search input {
		width: 100%;
		height: 34px;
		padding: 1px 38px 1px 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#header .button-search {
		top: 50%;
		margin-top: -12px;
		right: 6px;
	}

	#header #welcome {
		position: static;
		-ms-flex-order: 6;
		order: 6;
		width: 100%;
		margin-top: 8px;
		text-align: left;
	}

	#header .links {
		position: static;
		-ms-flex-order: 7;
		order: 7;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		width: 100%;
		margin-top: 6px;
		padding: 0;
	}

	#header .links a {
		float: none;
		padding: 4px 10px 4px 0;
		font-size: 10px;
	}

	#header .links a + a {
		margin-left: 0;
		border-left: 0;
	}

	/* ---------- Pulsante Menu ---------- */
	#menu-toggle {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: center;
		justify-content: center;
		height: 44px;
		margin: 0 0 12px;
		background: #3f3f3f url('../image/menu-bg.png') repeat-x;
		color: #EEEEEE;
		font-size: 13px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: .5px;
		cursor: pointer;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		-webkit-box-shadow: 0 0 10px 1px #E0E0E0;
		-moz-box-shadow: 0 0 10px 1px #E0E0E0;
		box-shadow: 0 0 10px 1px #E0E0E0;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	#menu-toggle .menu-toggle-icon {
		position: relative;
		display: inline-block;
		width: 20px;
		height: 2px;
		margin-right: 10px;
		background: #EEEEEE;
	}

	#menu-toggle .menu-toggle-icon:before,
	#menu-toggle .menu-toggle-icon:after {
		content: "";
		position: absolute;
		left: 0;
		width: 20px;
		height: 2px;
		background: #EEEEEE;
	}

	#menu-toggle .menu-toggle-icon:before {
		top: -6px;
	}

	#menu-toggle .menu-toggle-icon:after {
		top: 6px;
	}

	/* ---------- Menu a fisarmonica ---------- */
	#menu {
		display: none;
		height: auto;
		margin-bottom: 15px;
		background: #3f3f3f url('../image/menu-bg.png') repeat-x;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		overflow: hidden;
	}

	#menu.open {
		display: block;
	}

	#menu ul {
		width: 100%;
		max-width: none;
	}

	#menu > ul > li {
		position: relative;
		float: none;
		padding: 0;
		border-top: 1px solid rgba(255, 255, 255, .12);
	}

	#menu > ul > li:first-child {
		border-top: 0;
	}

	#menu > ul > li > a {
		display: block;
		margin: 0;
		padding: 12px 54px 12px 14px;
		font-size: 13px;
	}

	/* Le categorie con sottomenu hanno un'area di tocco piu' ampia */
	#menu > ul > li.has-children > a {
		padding-right: 64px;
		cursor: pointer;
	}

	#menu > ul > li > div {
		display: none;
		position: static;
		padding: 0;
		background: transparent;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}

	/* Annulla l'apertura al passaggio del mouse: su touch è inaffidabile */
	#menu > ul > li:hover > div {
		display: none;
	}

	#menu > ul > li.submenu-open > div {
		display: block;
	}

	#menu > ul > li > div > ul {
		display: block;
	}

	#menu > ul > li ul + ul {
		padding-left: 0;
	}

	#menu > ul > li ul > li > a {
		display: block;
		min-width: 0;
		white-space: normal;
		padding: 10px 14px 10px 30px;
		color: #EEEEEE;
		font-size: 12px;
		border-top: 1px solid rgba(255, 255, 255, .08);
	}

	#menu > ul > li > div > ul > li > a {
		color: #EEEEEE;
		font-size: 12px;
	}

	.submenu-toggle {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 52px;
		height: 41px;
		color: #FFFFFF;
		font-size: 22px;
		font-weight: bold;
		line-height: 1;
		background: rgba(255, 255, 255, .08);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	#menu > ul > li.has-children > a:focus,
	#menu > ul > li.has-children > a:active {
		background: rgba(255, 255, 255, .12);
	}

	#menu > ul > li.submenu-open > .submenu-toggle {
		background: rgba(255, 255, 255, .18);
	}

	/* ---------- Slideshow: carosello a una immagine con swipe e autoplay ---------- */
	.slideshow {
		position: relative;
		margin-bottom: 15px;
	}

	.slideshow .nivoSlider {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 100% !important;
		height: auto !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		-webkit-scroll-snap-type: x mandatory;
		scroll-snap-type: x mandatory;
		background: none !important;
		margin-bottom: 0;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.slideshow .nivoSlider::-webkit-scrollbar {
		display: none;
		height: 0;
	}

	.slideshow .nivoSlider img,
	.slideshow .nivoSlider a {
		position: static !important;
		display: inline-block !important;
		width: 100% !important;
		height: auto !important;
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		margin: 0 !important;
		-webkit-scroll-snap-align: start;
		scroll-snap-align: start;
	}

	.slideshow .nivoSlider a img {
		display: block !important;
		width: 100% !important;
	}

	.slideshow .nivo-slice,
	.slideshow .nivo-box,
	.slideshow .nivo-caption,
	.slideshow .nivo-controlNav,
	.slideshow .nivo-directionNav {
		display: none !important;
	}

	/* Pallini di navigazione */
	.slideshow-dots {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-align: center;
		align-items: center;
		margin: 10px 0 15px;
	}

	.slideshow-dots button {
		width: 11px;
		height: 11px;
		margin: 0 5px;
		padding: 0;
		border: 0;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		background: #CFCFCF;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.slideshow-dots button.active {
		background: #C62828;
	}

	/* ---------- Yaslider: schede prodotto impilate ---------- */
	.yaslider {
		width: 100% !important;
		height: auto !important;
		padding: 8px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.yaslider-box {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		width: 100% !important;
		height: auto !important;
		overflow: visible;
	}

	.ys-slide {
		width: 50% !important;
		height: auto !important;
		float: none;
		position: relative !important;
		top: auto !important;
		left: auto !important;
		display: block !important;
		opacity: 1 !important;
		filter: none !important;
		padding: 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.ys-p-image,
	.ys-p-name,
	.ys-p-price,
	.ys-p-rating,
	.ys-p-buy,
	.ys-p-details {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 6px auto 0 !important;
		line-height: normal !important;
		text-align: center;
	}

	.ys-p-image img {
		max-width: 100%;
		height: auto;
	}

	.ys-p-name a {
		font-size: 16px !important;
	}

	.ys-p-price {
		font-size: 18px !important;
		line-height: 24px !important;
		background: none !important;
		color: #333333 !important;
		text-shadow: none !important;
	}

	.ys-p-price-old {
		position: static !important;
		display: block !important;
		width: auto !important;
		font-size: 12px !important;
		line-height: 1.3 !important;
		color: #999999 !important;
	}

	.ys-p-price-new {
		line-height: 1.3 !important;
	}

	.ys-p-buy a,
	.ys-p-details a {
		display: inline-block !important;
		width: auto !important;
		height: auto !important;
		line-height: 1.4 !important;
		padding: 8px 14px !important;
		background: none !important;
		border: 1px solid #CFCFCF;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		color: #666666 !important;
		text-decoration: none !important;
	}

	.ys-larr,
	.ys-rarr,
	.ys-badge {
		display: none !important;
	}

	/* ---------- Colorbox / ShareThis ---------- */
	#colorbox {
		max-width: 96vw !important;
	}

	#cboxContent img {
		max-width: 100% !important;
		height: auto !important;
	}

	#sthoverbuttons,
	div[id^="sthoverbuttons"] {
		display: none !important;
	}

	/* ---------- Lista prodotti (anche su tablet) ---------- */
	.product-list .price {
		float: none;
		height: auto;
		margin-left: 0;
		text-align: left;
	}

	.product-list .right {
		float: none;
		margin-left: 0;
	}

	.product-list .wishlist a,
	.product-list .compare a {
		float: none;
		display: inline-block;
		margin: 8px 8px 0 0;
	}

	.product-list .wishlist a {
		margin-left: 0;
	}

	.product-list .image img {
		max-width: 110px;
		height: auto;
	}

	.product-list .cart {
		float: none;
		padding-left: 0;
		margin: 8px 0;
	}

	/* ---------- Griglia prodotti: 2 per riga ---------- */
	.product-grid {
		font-size: 0;
	}

	.product-grid > div,
	#column-left + #column-right + #content .product-grid > div {
		width: 47%;
		margin: 10px 1.5% 15px;
		font-size: 12px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		vertical-align: top;
	}

	.product-grid .image img {
		max-width: 100%;
		height: auto;
	}

	/* ---------- Pannello quotazione in home: impilato su tablet ---------- */
	.box-content > div[style*="height:190px"] {
		height: auto !important;
	}

	.box-content div[style*="width:340px"],
	.box-content div[style*="width:290px"],
	.box-content div[style*="width:280px"] {
		float: none !important;
		width: 100% !important;
		padding-right: 0 !important;
		margin-bottom: 10px;
	}

	.box-content div[style*="height:178px"],
	.box-content div[style*="height:75px"] {
		height: auto !important;
	}

	.box-content iframe {
		width: 100% !important;
		max-width: 100% !important;
		height: 180px !important;
	}

	/* ---------- Footer: 4 colonne ancora, ma fluide ---------- */
	#footer {
		height: auto;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#footer .column {
		min-height: 0;
	}
}


/* ==========================================================================
   SMARTPHONE / TABLET PORTRAIT  (<= 767 px)
   Layout a colonna singola, sidebar sotto il contenuto.
   ========================================================================== */
@media (max-width: 767px) {

	body,
	td,
	th,
	input,
	textarea,
	select,
	a {
		font-size: 13px;
	}

	h1,
	.welcome {
		font-size: 21px;
		margin-bottom: 12px;
	}

	/* ---------- Contenitore e colonne ---------- */
	#contentwrapper {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 0 10px 10px;
	}

	#contentwrapper #content {
		-ms-flex-order: -1;
		order: -1;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
		width: 100%;
		min-height: 0;
		margin: 0 0 20px !important;
	}

	#column-left,
	#column-right {
		float: none;
		width: 100%;
		-ms-flex-order: 0;
		order: 0;
	}

	#column-left {
		-ms-flex-order: 1;
		order: 1;
	}

	#column-right {
		-ms-flex-order: 2;
		order: 2;
	}

	#column-left .box-category > ul > li > a,
	#column-right .box-category > ul > li > a {
		display: block;
		padding: 6px 0;
		font-size: 13px;
	}

	#column-left .box,
	#column-right .box {
		margin-bottom: 15px;
	}

	/* ---------- Intestazioni e breadcrumb ---------- */
	.breadcrumb a {
		font-size: 12px;
	}

	/* ---------- Filtri categoria ---------- */
	.product-filter .display,
	.product-filter .sort,
	.product-filter .limit {
		float: none;
		display: block;
		margin: 0 0 8px;
	}

	.product-filter .sort select,
	.product-filter .limit select {
		max-width: 100%;
	}

	/* ---------- Box prodotti (sidebar / home): 2 per riga ---------- */
	.box-product {
		font-size: 0;
	}

	.box-product > div,
	#column-left + #column-right + #content .box-product > div {
		width: 47%;
		margin: 10px 1.5% 15px;
		font-size: 12px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		vertical-align: top;
	}

	.box-product .image img {
		max-width: 100%;
		height: auto;
	}

	/* ---------- Lista prodotti ---------- */
	.product-list .price {
		float: none;
		height: auto;
		margin-left: 0;
		text-align: left;
	}

	.product-list .right {
		float: none;
		margin-left: 0;
	}

	.product-list .wishlist a,
	.product-list .compare a {
		float: none;
		display: inline-block;
		margin: 8px 8px 0 0;
	}

	.product-list .wishlist a {
		margin-left: 0;
	}

	.product-list .image img {
		max-width: 110px;
		height: auto;
	}

	.product-list .cart {
		float: none;
		padding-left: 0;
		margin: 8px 0;
	}

	/* ---------- Scheda prodotto ---------- */
	.product-info > .left {
		float: none;
		width: 100%;
		margin-right: 0;
	}

	.product-info > .left + .right {
		margin-left: 0;
	}

	.product-info .image {
		float: none;
		padding: 5px;
		text-align: center;
	}

	.product-info .image img {
		max-width: 100%;
		height: auto;
	}

	.product-info .image-additional {
		width: 100%;
		margin-left: 0;
		text-align: center;
	}

	.product-info .image-additional a {
		float: none;
		display: inline-block;
		margin: 5px;
	}

	.product-info .image-additional img {
		max-width: 70px;
		height: auto;
	}

	.product-info .cart div {
		float: none;
		margin-bottom: 8px;
	}

	.product-info .cart input.button,
	.product-info .cart a.button {
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		text-align: center;
	}

	/* ---------- Tabs ---------- */
	.htabs {
		height: auto;
		overflow: hidden;
	}

	.htabs a {
		float: none;
		display: inline-block;
		padding: 8px 10px;
		margin: 0 2px 4px 0;
		font-size: 11px;
	}

	/* ---------- Pulsanti ---------- */
	.buttons {
		padding: 4px;
	}

	.buttons .left,
	.buttons .right {
		float: none;
		text-align: center;
		margin: 6px 0;
	}

	.buttons a.button,
	.buttons input.button {
		display: block;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		text-align: center;
	}

	/* ---------- Paginazione ---------- */
	.pagination .links,
	.pagination .results {
		float: none;
	}

	.pagination .results {
		padding-top: 8px;
	}

	/* ---------- Form ---------- */
	input[type='text'],
	input[type='password'],
	textarea,
	select {
		max-width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	input.large-field,
	select.large-field {
		width: 100%;
	}

	table.form tr td:first-child {
		width: 105px;
	}

	/* ---------- Tabelle larghe: scroll orizzontale interno ---------- */
	.table-responsive table.list,
	.table-responsive table.compare-info,
	.table-responsive table.cart-info,
	.table-responsive table.checkout-product,
	.table-responsive .wishlist-info table {
		min-width: 620px;
	}

	/* ---------- Contenuti informativi ---------- */
	#content .content .left,
	#content .content .right,
	.contact-info .left,
	.contact-info .right,
	.sitemap-info .left,
	.sitemap-info .right {
		float: none;
		width: 100%;
	}

	.manufacturer-list ul {
		width: 50%;
	}

	/* ---------- Pannello quotazione in home (stili inline) ---------- */
	.box-content > div[style*="height:190px"] {
		height: auto !important;
	}

	.box-content div[style*="width:340px"],
	.box-content div[style*="width:290px"],
	.box-content div[style*="width:280px"] {
		float: none !important;
		width: 100% !important;
		padding-right: 0 !important;
		margin-bottom: 10px;
	}

	.box-content div[style*="height:178px"] {
		height: auto !important;
	}

	.box-content iframe {
		width: 100% !important;
		max-width: 100% !important;
		height: 180px !important;
	}

	/* ---------- Footer ---------- */
	#footer {
		height: auto;
		padding: 15px 10px;
	}

	#footer #info {
		width: 100%;
		padding-top: 0;
	}

	#footer .column {
		width: 50%;
		min-height: 0;
		padding: 0 8px 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#footer h3 {
		margin-top: 10px;
	}

	#social {
		float: none;
		margin: 10px 0 0;
		overflow: hidden;
	}

	/* ---------- Colorbox ---------- */
	#colorbox {
		max-width: 96vw !important;
	}

	#cboxContent img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* ---------- ShareThis: evita la barra flottante sopra i contenuti ---------- */
	#sthoverbuttons,
	div[id^="sthoverbuttons"] {
		display: none !important;
	}
}


/* ==========================================================================
   SMARTPHONE PICCOLI  (<= 479 px)
   ========================================================================== */
@media (max-width: 479px) {

	#header #logo img {
		max-width: 140px;
	}

	#header #cart .heading a {
		font-size: 10px;
	}

	#header .links a {
		font-size: 9px;
		padding-right: 8px;
	}

	.ys-slide {
		width: 100% !important;
	}

	#footer .column {
		width: 100%;
	}

	.manufacturer-list ul {
		width: 100%;
	}

	.product-info .cart div > span {
		font-size: 11px;
	}
}


/* ==========================================================================
   SCHERMI MOLTO STRETTI  (<= 359 px)
   ========================================================================== */
@media (max-width: 359px) {

	.product-grid > div,
	#column-left + #column-right + #content .product-grid > div,
	.box-product > div,
	#column-left + #column-right + #content .box-product > div {
		width: 97%;
		margin: 10px 1.5% 15px;
	}
}