@import "heroicons.less";

/* ------------------------------------------------------------------------------------------------------------------------
// Scaffolding
// ------------------------------------------------------------------------------------------------------------------------*/
@body-bg:    	#ffffff;
@body-bg-dark:  #221e20;
@body-bg-clean: #ffffff;
@text-color: 	#929393;
@text-color2:	#000000;

@color-primary: #aeaeae;
@color-title:   #ffcb08;
@color-price:   #009de6;
@color-success: #51e851;
@color-info:    #6dd7f8;
@color-warning: #f0ad4e;
@color-danger:  #c44a45;

/* Color By Segment */
@color-auto:	 #5cb85c;
@color-bearings: #5bc0de;
@color-machine:  #f0ad4e;
@color-parts:    #d9534f;

@font-family-sans: 'Poppins', sans-serif;
@font-size-base: 16px;
@font-big:       18px;
@font-small:     11px;
@font-weight-normal:   400;
@font-weight-medium:  500;
@font-weight-semibold: 600;
@font-weight-bold:    800;

@link-color:  #2f62b6;
@link-color2: #1c67c5;
@link-color3: #1c67c5;

@font-base:  @font-family-sans;
@font-title: @font-family-sans;

/* Remove o focus ring padrão do Bootstrap em links */
a:focus,
a:active {
	outline: none;
	outline-offset: 0;
}

a.text-color  	{ color:@text-color2}
a.link-color  	{ color:@link-color; cursor:pointer}
a.link-primary	{ color:@color-primary}

.bg-default { background-color:@body-bg-dark; color:#FFF}
.bg-primary { background-color:@color-primary}
.bg-clean   { background-color:#dcdcdc}

.text-color  	    { color:@text-color2}
.color-price	    { color:@color-price; font-weight:@font-weight-bold}
.color-consumidor   { color:#000000}
.base			    { font-family:@font-family-sans; font-weight:@font-weight-normal}
.bold			    { font-family:@font-family-sans; font-weight:@font-weight-semibold}
.active			    { font-family:@font-family-sans; font-weight:@font-weight-semibold}
.white		        { color:#FFF}

.text-muted{ color:#3c3838d1}

.underline		{ text-decoration:underline}
.underline:hover{ text-decoration:none}

.no-underline		{ text-decoration:none}
.no-underline:hover{ text-decoration:none}

.text-danger 	{ color:@color-danger}
.font08 		{ font-size:08px;}
.font09 		{ font-size:09px;}
.font10 		{ font-size:10px;}
.font11 		{ font-size:11px;}
.font12 		{ font-size:12px;}
.font13 		{ font-size:13px;}
.font14 		{ font-size:14px;}
.font15 		{ font-size:15px;}
.font18 		{ font-size:18px;}
.font20 		{ font-size:20px;}
.font24 		{ font-size:24px;}
.font28 		{ font-size:28px;}

.border-bottom { border-bottom:1px solid #dcdcdc; border-radius:0 }

.no-margin { margin:0}
.margin-30 { margin:30px 0}
.margin-20 { margin:20px 0}
.margin-10 { margin:10px 0}

.margin-top-05 	  { margin-top:05px;}
.margin-top-10 	  { margin-top:10px;}
.margin-top-20 	  { margin-top:20px;}
.margin-top-30 	  { margin-top:30px;}

.margin-bottom-10 { margin-bottom:10px;}
.margin-bottom-20 { margin-bottom:20px;}
.margin-left-20 { margin-left:20px;}
.margin-right-20 { margin-right:20px;}
.margin-left-30 { margin-left:30px;}
.margin-right-30 { margin-right:30px;}
.margin-left-40 { margin-left:40px;}
.margin-right-40 { margin-right:40px;}
.margin-left-10 { margin-left:10px;}
.margin-right-10 { margin-right:10px;}

.padding-1 { padding:1px 0; }
.padding-5 { padding:5px 0; display:block}
.padding-30 { padding:30px;}
.padding-10 { padding:10px;}
.padding-top-5    { padding-top:5px;}
.padding-top-10   { padding-top:10px;}
.padding-top-15   { padding-top:15px;}
.padding-top-20   { padding-top:20px;}
.padding-top-30   { padding-top:30px;}
.padding-top-40   { padding-top:40px;}

.padding-bottom-10 { padding-bottom:10px;}

.padding-right-10 { padding-right:10px;}
.padding-right-20 { padding-right:20px;}
.padding-left-10 { padding-left:10px;}
.padding-left-20 { padding-left:20px;}


.hilite1,.hilite2,.hilite3,.hilite4,.hilite5{ background-color:lighten(@color-primary, 30%); color:#000;}

.tooltip-inner {
    text-align: left;
}

.table > tbody > tr > th {
     vertical-align: middle;
}

.language { opacity:0.5}
.active-language { opacity:1}

@media (min-width: 992px)
{
  .modal-lg {
	  width: 85%;
  }
}



/* Typography: Poppins via Google Fonts (head.mustache) — same stack as Anon eCommerce */
/* Absolute Center Spinner */
.loading {
	display: none;
	position: fixed;
	z-index: 99999999998;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: rgba(255, 255, 255, 0.7);
	-webkit-animation: fadeIn 0.4s;
	animation: fadeIn 0.4s;
	align-items: center;
	justify-content: center;

	&.is-visible {
		display: flex !important;
	}
}

.loading-div {
	font-size: 12px;
	background-color: #fff;
	color: @text-color;
	width: 250px;
	z-index: 999;
	margin: 0;
	border: 3px solid @body-bg-dark;
	text-align: center;
	padding: 10px 20px;
}


/* ------------------------------------------------------------------------------------------------------------------------
// GLOBAL CSS
// ------------------------------------------------------------------------------------------------------------------------*/
html {
	font-family: @font-family-sans;
	overscroll-behavior: contain;
}

body {
	--seg-primary: @color-primary;
	--seg-primary-hover: darken(@color-primary, 32%);

	font-size: @font-size-base;
	font-family: @font-family-sans;
	font-weight: @font-weight-normal;
	line-height: 1.5;
	background-color: @body-bg;
	background-image: linear-gradient(
		180deg,
		fade(@color-primary, 25%) 0%,
		fade(@color-primary, 20%) 10%,
		fade(@color-primary, 2%) 58%,
		fade(@color-primary, 0%) 100%
	);
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

input, button, select, textarea,
.btn, .navbar, .dropdown-menu, .form-control, .breadcrumb, .modal, .panel {
	font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: @font-weight-semibold;
}

.btn-outline,
.mega-dropdown-li,
.panel-primary > .panel-heading,
.error-template h1,
#footer .title,
#wrap-products .name,
#wrap-products .model,
#wrap-products .price,
.owl-theme .owl-item .item a strong {
	font-weight: @font-weight-semibold;
}

.container-flex 	{ display: -webkit-flex; display: flex; }
.initial 			{ -webkit-flex: initial; flex: initial;}
.none 				{ -webkit-flex: none; flex: none; }
.flex1 				{ -webkit-flex: 1; flex: 1}
.flex2 				{ -webkit-flex: 2; flex: 2}
.flex3 				{ -webkit-flex: 3; flex: 3}
.vertical-container { display: -webkit-flex;  display:flex;  display: -webkit-flex; /* Safari */ -webkit-align-items: center;align-items: center;  -webkit-justify-content: center;justify-content: center}
.vertical-center    { display: -webkit-flex;  display:flex;  display: -webkit-flex; /* Safari */ -webkit-align-items: center;align-items: center}

.button-on  { position:fixed; bottom:15px; right:15px; padding:2px; font-size:11px; color:#FFF; background-color:#000; opacity:0.6; z-index:999}
.cache-on  { position:fixed; bottom:15px; left:15px; padding:2px; font-size:11px; color:#FFF; background-color:#000; opacity:0.6; z-index:999}
.cache-off { position:fixed; bottom:15px; left:15px; padding:2px; font-size:11px; color:#FFF; background-color:#000; opacity:0.6; z-index:999}

.no-border{ border: 0; border:1px solid @text-color; box-shadow: none; /* You may want to include this as bootstrap applies these styles too */ -webkit-appearance: none; -webkit-border-radius: 0px}
.no-padding{ padding: 0 !important;  margin: 0 !important;}
.no-margin{ margin: 0 !important;}

.input-group .form-control { z-index:0}

input[type=text]::-webkit-input-placeholder {color:@text-color; font-size:@font-small; font-style:italic !important}
input[type=text]:-moz-placeholder { /* Firefox 18- */color: @text-color; font-size:@font-small; font-style:italic !important;  }
input[type=text]::-moz-placeholder {  /* Firefox 19+ */color: @text-color; font-size:@font-small; font-style:italic !important;  }
input[type=text]:-ms-input-placeholder {  color: @text-color; font-size:@font-small; font-style:italic !important;  }

.overflow-400{ height:400px; overflow-x:scroll;}

.breadcrumb { font-size:@font-small; background-color:transparent; a{ color:@text-color2}}

input::-webkit-input-placeholder { color: #dcdcdc; font-size:@font-small; font-style:italic !important}
input:-moz-placeholder { /* Firefox 18- */color: #dcdcdc; font-size:@font-small; font-style:italic !important;  }
input::-moz-placeholder {  /* Firefox 19+ */color: #dcdcdc; font-size:@font-small; font-style:italic !important;  }
input:-ms-input-placeholder {  color: #dcdcdc; font-size:@font-small; font-style:italic !important;  }

.form-control { border: 0;border: 1px solid @text-color;box-shadow: none; -webkit-border-radius: 0px;border-radius: 0px;}
.form-control:focus { outline: none !important; border-color:@body-bg-dark; box-shadow: 0 0 0px @body-bg-dark; border-bottom:2px solid @body-bg-dark }
.has-error .form-control { border-color: @color-danger}
.has-error .form-control:focus { border-color: @color-danger}
.statistic{ border-right:1px solid #CCC; padding-right:5px; }
.ui.statistic+.ui.statistic {
    margin: 0 0 0 0.1em;
}

.table > tbody > tr > td {
     vertical-align: middle;
}

.excel-view .table-hover tbody tr:hover td {
  background-color: darken(@color-primary, -40%);   :hover{ .excel-code a {color:@color-primary;transition-duration: 0.3s;}  }
}
.excel-view .table-hover tbody tr:hover .excel-code a,
.excel-view .table-hover tbody tr:hover .name{
  color:@color-primary;transition-duration: 0.3s;
}

.excel-view {
	.excel-table > thead > tr > th,
	.excel-table > tbody > tr > td {
		vertical-align: middle !important;
	}

	.excel-col-num { width: 36px; }
	.excel-col-stock { width: 72px; white-space: nowrap; }
	.excel-col-price { width: 96px; white-space: nowrap; }
	.excel-col-buy { width: 118px; min-width: 118px; }

	.excel-price-cell {
		.price-product { margin: 0; line-height: 1.3; }
		.color-price { font-size: 12px; font-weight: 700; white-space: nowrap; }
	}

	.excel-add-cart {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		flex-wrap: wrap;
		margin: 0;
	}

	.excel-qty {
		width: 48px;
		min-width: 44px;
		text-align: center;
		padding: 4px 4px;
		height: 28px;
	}

	.excel-buy-btn {
		min-width: 32px;
		width: 32px;
		height: 28px;
		padding: 4px 0;
		line-height: 1;
	}

	.excel-code a {
		font-weight: @font-weight-bold;
	}

	.excel-name a {
		font-weight: normal;
	}

	.excel-cart-badge {
		margin-top: 4px;
		line-height: 1.2;
	}

	.excel-add-feedback {
		flex-basis: 100%;
		display: block;
		margin-top: 0;
		line-height: 1.2;
		white-space: nowrap;
		text-align: center;
	}

	.excel-buy-cell {
		vertical-align: middle !important;
	}
}

.transition-img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);}
.content-img 	{ -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out;-o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out;}


/* ------------------------------------------------------------------------------------------------------------------------
// ICONES ROLEMAK
// ------------------------------------------------------------------------------------------------------------------------*/
.fr { width:30px; height:30px; margin:0 1px; background-position:top; display:inline-block; -o-transition:.5s;  -ms-transition:.5s;  -moz-transition:.5s;  -webkit-transition:.5s;  transition:.5s;}

.fr-user 	{ background:url(../../img/icones/usuario.png) top}
.fr-cart 	{ background:url(../../img/icones/carrinho.png) top}
.fr-message { background:url(../../img/icones/messagem.png) top}
.fr-order 	{ background:url(../../img/icones/pedido.png) top}

/* ------------------------------------------------------------------------------------------------------------------------
// HEADER-top
// ------------------------------------------------------------------------------------------------------------------------*/
#header-top
{
 background-color:@body-bg-dark; height:20px; padding:2px 0; color: saturate(darken(@color-primary, 4%), 12%); font-size:11px;
}

/* ------------------------------------------------------------------------------------------------------------------------
// HEADER
// ------------------------------------------------------------------------------------------------------------------------*/
#header
{
 	 
	 padding:20px 0;

	 .container-flex {
		align-items: center;
		flex-wrap: nowrap;
	 }
	

	 .label-primary { background-color:@color-primary; color:#333}

	 .container{ padding:0; margin:0 auto;};

  	/*Header Esquerda — área do logo padronizada em todos os segmentos */
	 .h-left{
		width: auto;
		min-width: 260px;
		max-width: 300px;
		flex-shrink: 0;
		padding-top: 0;
	 }

	 .logo-rolemak{
		display: block;
		width: auto;
		max-width: 280px;
		height: auto;
		max-height: 68px;
		object-fit: contain;
	 }

  	/*Header Centro*/
	.h-center { padding: 0 32px; }

	.search {
		margin-top: 0;
	}

	.header-main-row {
		display: flex;
		align-items: center;
		gap: 20px;
		min-width: 0;
		margin-top: 0;
	}

	.header-main-row .search {
		flex: 1 1 auto;
		min-width: 0;
		margin-top: 0;
	}

	.header-search {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;

		&__icon {
			position: absolute;
			left: 14px;
			top: 50%;
			transform: translateY(-50%);
			pointer-events: none;
			color: fade(@text-color2, 50%);
			z-index: 1;
			line-height: 0;

			.hi svg {
				width: 18px;
				height: 18px;
			}
		}

		&__input {
			width: 100%;
			height: 42px;
			padding: 0 16px 0 42px;
			border: 1px solid #e4e4e4;
			border-radius: 10px;
			background-color: #f5f5f5;
			color: @body-bg-dark;
			font-size: 13px;
			line-height: 1.4;
			box-shadow: none;
			transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;

			&::placeholder {
				color: fade(@text-color2, 60%);
			}

			&:hover {
				border-color: #d8d8d8;
				background-color: #fafafa;
			}

			&:focus {
				outline: none;
				background-color: #fff;
				border:1px solid fade(@color-primary, 90%);
				box-shadow: 0 0 0 0px fade(@color-primary, 32%);
			}
		}
	}

	/*User*/
	.user {
		font-size: @font-small;
		color: @text-color2;
		line-height: 1.4;
		margin-bottom: 6px;
	}

	.user-bar {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 4px 10px;
		min-width: 0;
	}

	.user-bar__greeting {
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1.4;
	}

	.user-bar__languages {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		flex: 0 0 auto;
	}

	.user a {
		color: saturate(darken(@color-primary, 4%), 12%);
		font-weight: 600;
		text-decoration: none;

		&:hover {
			color: darken(@color-primary, 10%);
		}
	}

	.user .header-action-link--text {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		flex: 0 0 auto;
		line-height: 1;
		white-space: nowrap;

		.hi svg {
			width: 14px;
			height: 14px;
		}
	}

	.user .language {
		float: none;
	}
	.link-primary { color: saturate(darken(@color-primary, 4%), 12%); &:hover { color: darken(@color-primary, 10%); } }

	.gap-actions {
		gap: 12px;

		.header-action-icons {
			display: flex;
			align-items: center;
			gap: 6px;

			> li {
				display: flex;
			}
		}

		.header-action-link {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
			border-radius: 10px;
			text-decoration: none;
			color: @body-bg-dark;
			transition: background-color 0.2s ease, color 0.2s ease;

			&:hover,
			&:focus {
				color: @body-bg-dark;
				text-decoration: none;
				background-color: fade(@color-primary, 32%);

				.hi {
					color: @body-bg-dark;
				}
			}

			.hi {
				color: @body-bg-dark;

				svg {
					width: 22px;
					height: 22px;
				}
			}
		}
	}

	/*Terms*/
	.terms	   { font-size:@font-small; height:20px; color:@text-color2; }

  	/*Header Direita*/
	.h-right {
		width: auto;
		min-width: 120px;
	}

	.header-guest-menu {
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 14px;
		margin: 0;
		padding: 0 4px 0 0;
		list-style: none;
	}

	.header-guest-menu > li {
		display: flex;
		flex: 0 0 auto;
		align-items: flex-start;
	}

	.header-actions-divider {
		width: 1px;
		align-self: stretch;
		min-height: 44px;
		margin: 0 10px;
		padding: 0;
		background-color: fade(@body-bg-dark, 16%);
		list-style: none;
	}

	.header-guest-action {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		min-width: 0;
		padding: 0 6px;
		text-decoration: none;
		color: @text-color2;
		transition: color 0.2s ease;

		&:hover,
		&:focus {
			color: @body-bg-dark;
			text-decoration: none;

			.header-guest-action__icon {
				background-color: fade(@color-primary, 32%);
				border-color: fade(@color-primary, 45%);
				color: @body-bg-dark;

				.hi {
					color: @body-bg-dark;
				}
			}
		}
	}

	.header-guest-action__icon {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 10px;
		color: @body-bg-dark;
		background-color: transparent;
		border: 1px solid transparent;
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

		.hi {
			color: @body-bg-dark;
		}

		.hi svg {
			width: 22px;
			height: 22px;
		}
	}

	.header-guest-action__label {
		font-size: 8px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		line-height: 1.1;
		white-space: nowrap;
		text-align: center;
	}

	.header-cart-link {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 10px;
		color: @body-bg-dark;
		text-decoration: none;
		transition: background-color 0.2s ease, color 0.2s ease;

		.hi {
			color: @body-bg-dark;
		}

		&:hover,
		&:focus {
			text-decoration: none;
			background-color: fade(@color-primary, 32%);
			color: @body-bg-dark;

			.hi {
				color: @body-bg-dark;
			}
		}

		.hi svg {
			width: 22px;
			height: 22px;
		}
	}

	.header-cart-badge,
	.count-cart {
		position: absolute;
		top: -4px;
		right: -5px;
		min-width: 18px;
		height: 18px;

		&:empty {
			display: none;
		}
		padding: 0 5px;
		font-family: @font-title;
		font-size: 10px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
		background-color: @color-primary;
		color: #333;
		border-radius: 9px;
		border: 2px solid @body-bg-clean;
	}

	.h-center--logged {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0 16px 0 24px;
	}

	.header-actions {
		flex: 0 0 auto;
		flex-shrink: 0;
		padding: 2px 0 2px 8px;
	}

	.header-profile-dropdown {
		position: relative;
		padding-right: 4px;
	}

	.header-profile-toggle {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		gap: 12px;
		min-width: 0;
		max-width: 260px;
		padding: 4px 8px 4px 4px;
		cursor: pointer;
		border: none;
		background: transparent;
		text-decoration: none;
		color: @text-color2;
		transition: color 0.2s ease;

		&:hover,
		&:focus {
			color: @body-bg-dark;
			text-decoration: none;

			.header-profile-toggle__icon {
				background-color: fade(@color-primary, 32%);
				border-color: fade(@color-primary, 45%);
				color: @body-bg-dark;

				.hi {
					color: @body-bg-dark;
				}
			}
		}
	}

	.header-profile-toggle__icon {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: 11px;
		color: @body-bg-dark;
		background-color: transparent;
		border: 1px solid transparent;
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

		.hi svg {
			width: 26px;
			height: 26px;
		}
	}

	.header-profile-toggle__text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 2px;
		min-width: 0;
		flex: 1 1 auto;
		padding-right: 4px;
		text-align: left;
	}

	.header-profile-toggle__title {
		font-size: 10px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		line-height: 1.1;
		white-space: nowrap;
	}

	.header-profile-company {
		display: -webkit-box;
		width: 100%;
		max-width: 200px;
		font-size: 12px;
		font-weight: 500;
		text-transform: none;
		letter-spacing: 0;
		line-height: 1.2;
		text-align: left;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-word;
		color: fade(@body-bg-dark, 78%);
	}

	.header-profile-email {
		display: block;
		width: 100%;
		max-width: 200px;
		font-size: 10px;
		font-weight: 400;
		line-height: 1.2;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: fade(@text-color2, 88%);
	}

	.header-profile-dropdown.open > .header-profile-toggle,
	.header-profile-dropdown.open > .header-profile-toggle:hover,
	.header-profile-dropdown.open > .header-profile-toggle:focus {
		color: @body-bg-dark;
		text-decoration: none;

		.header-profile-toggle__icon {
			background-color: fade(@color-primary, 32%);
			border-color: fade(@color-primary, 45%);
			color: @body-bg-dark;

			.hi {
				color: @body-bg-dark;
			}
		}
	}

	.header-profile-menu {
		min-width: 260px;
		padding: 8px;
		margin-top: 8px;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
		right: 0;
		left: auto;
		z-index: 220;
	}

	.menu-account-link {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 12px;
		border-radius: 6px;
		color: @body-bg-dark;
		font-size: 12px;
		font-weight: 500;
		line-height: 1.35;
		text-decoration: none;
		transition: background-color 0.2s ease, color 0.2s ease;

		&:hover,
		&:focus {
			background-color: fade(@color-primary, 28%);
			color: @body-bg-dark;
			text-decoration: none;
		}

		&__icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			background: transparent;
			color: darken(@color-primary, 18%);
			flex-shrink: 0;

			.hi svg {
				width: 18px;
				height: 18px;
			}
		}

		&__label {
			flex: 1;
		}

		&--logout {
			.menu-account-link__icon {
				color: #c9302c;
			}

			&:hover,
			&:focus {
				background-color: fade(#d9534f, 10%);
			}
		}
	}

	.menu-account-divider {
		height: 1px;
		margin: 6px 8px;
		background-color: #e8e8e8;
		list-style: none;
	}

}

.compare-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 10050;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 64px;
	min-height: 64px;
	padding: 10px 8px 8px;
	border-radius: 16px;
	background-color: @body-bg-dark;
	color: @body-bg-clean;
	text-decoration: none;
	box-shadow: 0 8px 24px fade(@body-bg-dark, 28%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(12px) scale(0.96);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, box-shadow 0.2s ease;

	&:hover,
	&:focus {
		color: @body-bg-clean;
		text-decoration: none;
		box-shadow: 0 12px 28px fade(@body-bg-dark, 36%);
		transform: translateY(-2px) scale(1);
	}

	&.is-visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0) scale(1);

		&:hover,
		&:focus {
			transform: translateY(-2px) scale(1);
		}
	}

	&__icon {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;

		.hi svg {
			width: 26px;
			height: 26px;
			fill: @color-primary;
		}
	}

	&__badge {
		position: absolute;
		top: -6px;
		right: -10px;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		font-family: @font-title;
		font-size: 11px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
		background-color: @color-primary;
		color: #333;
		border-radius: 10px;
		border: 2px solid @body-bg-dark;
	}

	&__label {
		font-family: @font-title;
		font-size: 9px;
		font-weight: 700;
		line-height: 1.1;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		text-align: center;
		white-space: nowrap;
	}
}

body:has(#machine-compare-app) .compare-float {
	display: none !important;
}

@media (max-width: 767px) {
	.compare-float {
		right: 14px;
		bottom: 14px;
		width: 58px;
		min-height: 58px;
		padding: 8px 6px 6px;
		border-radius: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.compare-float {
		transition: none;
	}
}

/* Header — compactar gaps em telas intermediárias (>999px e <1200px) */
@media (min-width: 1000px) and (max-width: 1199px) {
	#header {
		padding: 12px 0;

		.h-left {
			min-width: 180px;
			max-width: 220px;
		}

		.logo-rolemak {
			max-width: 200px;
			max-height: 52px;
		}

		.h-center {
			padding: 0 12px;
		}

		.h-center--logged {
			padding: 0 8px 0 12px;
		}

		.header-main-row {
			gap: 10px;
		}

		.header-guest-menu {
			gap: 6px;
			padding-right: 0;
		}

		.header-actions {
			padding: 2px 0 2px 4px;
		}

		.header-actions-divider {
			margin: 0 4px;
		}

		.header-guest-action {
			padding: 0 2px;
		}

		.header-profile-toggle {
			gap: 8px;
			max-width: 180px;
			padding: 2px 4px 2px 2px;
		}

		.header-profile-toggle__icon {
			width: 40px;
			height: 40px;

			.hi svg {
				width: 22px;
				height: 22px;
			}
		}
	}
}

@media (max-width: 991px) {
	#header .h-center {
		padding: 0 12px;
	}

	#header .header-search__input {
		height: 38px;
		font-size: 12px;
	}

	#header .h-left {
		min-width: 140px;
		max-width: 200px;
	}

	#header .logo-rolemak {
		max-width: 180px;
		max-height: 52px;
	}

	#menu .navbar-inverse .navbar-nav > li > a {
		padding: 12px 10px;
		font-size: 11px;
	}

	#banner {
		margin-top:12px;
		margin-bottom:12px;

		.carousel,
		.carousel-inner,
		.carousel-inner .item,
		.carousel-inner .item a,
		.container-flex > .dropdown-container,
		.container-flex > .flex1,
		.container-flex > .dropdown-container > div {
			border-radius:8px;
		}
	}
}

/* ------------------------------------------------------------------------------------------------------------------------
// MENU
// ------------------------------------------------------------------------------------------------------------------------*/
#menu
{
	background-color: @color-secondary;
	border: none;
	border-radius: 8px;
	border-bottom: 6px solid saturate(@color-primary, 15%);
	min-height: 52px;
	position: relative;
	z-index: 200;
	overflow: visible;

	@media (min-width: 992px) {
		position: sticky;
		top: 0;
		z-index: 210;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	}

	.navbar		    { margin-bottom:0; border:0; min-height:44px; overflow:visible; }
	.navbar2        { margin-bottom:0; border:0; height:45px; overflow:visible; width:100%; margin:0; padding:0; min-height: 45px }
	.navbar-inverse { background-color:transparent;border-color:transparent}
	.navbar-collapse,
	.collapse { overflow: visible; }

	.navbar-inverse .navbar-nav > li {
		border: none;
		box-shadow: none;
		display: flex;
		align-items: stretch;
	}

	.navbar-inverse .navbar-nav > li > a {
		color: #fff;
		font-family: @font-title;
		font-weight: 600;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		padding: 14px 16px;
		margin: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
		transition: background 0.2s ease, color 0.2s ease;
		position: relative;
		align-self: stretch;
		display: inline-flex;
		align-items: center;
		line-height: 1.2;
	}

	.navbar-inverse .navbar-nav > li > a:hover,
	.navbar-inverse .navbar-nav > li > a:focus {
		color: #fff;
		background-color: fade(@color-primary, 35%);
		box-shadow: none;
	}

	.navbar-inverse .navbar-nav > li.active > a,
	.navbar-inverse .navbar-nav > li.open > a,
	.navbar-inverse .navbar-nav > li.open > a:focus,
	.navbar-inverse .navbar-nav > li.open > a:hover {
		color: #fff;
		background-color: fade(@color-primary, 28%);
		box-shadow: none;
	}

	.navbar-inverse .navbar-nav > li.mega-dropdown.open > a,
	.navbar-inverse .navbar-nav > li.mega-dropdown.open > a:hover,
	.navbar-inverse .navbar-nav > li.mega-dropdown.open > a:focus {
		color: #fff;
		background-color: fade(@color-primary, 32%);
		box-shadow: inset 0 -3px 0 @color-primary;
	}

	.menu-nav-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		float: none;
		margin: 0;

		@media (min-width: 768px) {
			gap: 0 6px;
		}
	}

	.menu-nav-list > li {
		float: none;
	}

	@media (min-width: 768px) {
		.menu-nav-list > li.margin-right-20,
		.menu-nav-list > .margin-right-20,
		.menu-nav-list .menu-categories-nav.margin-right-20,
		.menu-nav-list .mega-dropdown.margin-right-20 {
			margin-right: 0 !important;
		}
	}

	@media (min-width: 768px) {
		.navbar.navbar-inverse {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			width: 100%;

			&:before,
			&:after {
				content: none;
				display: none;
			}
		}

		.navbar-header {
			float: none;
			flex: 0 0 auto;
		}

		.navbar-collapse.collapse {
			display: flex !important;
			flex: 1 1 auto;
			flex-wrap: nowrap;
			align-items: center;
			width: auto;
			min-width: 0;
			height: auto !important;
			padding: 0;
			float: none;

			&:before,
			&:after {
				content: none;
				display: none;
			}
		}

		.navbar-collapse .navbar-nav {
			float: none !important;
		}

		.menu-nav-list {
			flex: 1 1 auto;
			min-width: 0;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
		}

		.menu-account-nav {
			margin-left: auto !important;
			flex: 0 0 auto;
			float: none !important;
		}
	}

	@media (min-width: 992px) and (max-width: 1199px) {
		min-height: 44px;

		.navbar-inverse .navbar-nav > li > a {
			padding: 0 8px;
			font-size: 11px;
			letter-spacing: 0.02em;
			min-height: 44px;
			white-space: nowrap;
		}

		.menu-nav-list {
			flex-wrap: nowrap;
		}

		.mega-dropdown-li {
			gap: 4px;
		}

		.mega-dropdown-li .hi svg {
			width: 14px;
			height: 14px;
		}

		.navbar-inverse .navbar-nav > li > a.dropdown-toggle,
		.menu-account-toggle {
			gap: 3px;
		}

		.menu-dropdown-icon {
			width: 14px;
			height: 14px;

			.hi svg {
				width: 12px;
				height: 12px;
			}
		}

		.menu-account-nav > li > a {
			padding: 0 10px;
			font-size: 11px;
		}
	}

	@media (max-width: 767px) {
		.navbar-collapse.collapse {
			display: none !important;

			&.in {
				display: block !important;
			}
		}

		.menu-nav-list {
			flex-direction: column;
			align-items: stretch;
		}

		.menu-account-nav {
			width: 100%;
			margin-left: 0 !important;
			float: none !important;
		}

		.menu-nav-divider {
			width: 100%;
			height: 1px;
			margin: 4px 0;
		}
	}

	.menu-nav-divider {
		width: 1px;
		height: 28px;
		background-color: fade(#fff, 22%);
		margin: 0 10px;
		padding: 0;
		align-self: center;
		list-style: none;
	}

	.menu-nav-category > a::after {
		content: "";
		position: absolute;
		bottom: 6px;
		left: 14px;
		right: 14px;
		height: 2px;
		background: @color-primary;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.2s ease;
	}

	.menu-nav-category > a:hover::after,
	.menu-nav-category.active > a::after {
		transform: scaleX(1);
	}

	.dropdown-menu    { padding:8px; border:1px solid #e8e8e8; border-top:none; border-radius:0 0 6px 6px; box-shadow:0 8px 20px rgba(0,0,0,.08); margin-top:0; }
	.dropdown-menu li { a { padding:8px 12px; border-radius:2px; color:@body-bg-dark; font-weight:500; &:hover { background-color:fade(@color-primary,22%); } }}

	.border-right    { border-right:1px solid fade(#fff, 18%)}
	.border-left     { border-left:1px solid fade(#fff, 18%)}

	.mega-dropdown-li {
		text-transform: uppercase;
		font-family: @font-title;
		display: inline-flex;
		align-items: center;
		gap: 6px;

		.hi svg {
			width: 16px;
			height: 16px;
		}
	}

	.navbar-inverse .navbar-nav > li > a.dropdown-toggle {
		display: inline-flex;
		flex-direction: row-reverse;
		align-items: center;
		gap: 6px;
	}

	.menu-dropdown-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		color: lighten(@color-primary, 14%);
		transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);

		.hi svg {
			width: 14px;
			height: 14px;
			stroke-width: 2.25;
		}
	}

	.mega-dropdown.open > a .menu-dropdown-icon,
	.dropdown.open > a .menu-dropdown-icon {
		transform: rotate(180deg);
	}

	.mega-dropdown .mega-dropdown-menu {
		display: block !important;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 1050;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-10px);
		transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0.28s;
		pointer-events: none;
	}

	.mega-dropdown.open .mega-dropdown-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.dropdown:not(.mega-dropdown) .dropdown-menu {
		display: block !important;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0.22s;
		pointer-events: none;
	}

	.dropdown:not(.mega-dropdown).open .dropdown-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.menu-account-toggle {
		display: inline-flex;
		flex-direction: row-reverse;
		align-items: center;
		gap: 6px;
	}

	.menu-account-dropdown.open > a.menu-account-toggle,
	.menu-account-dropdown.open > a.menu-account-toggle:hover,
	.menu-account-dropdown.open > a.menu-account-toggle:focus {
		color: #fff;
		background-color: fade(@color-primary, 32%);
		box-shadow: inset 0 -3px 0 @color-primary;
	}

	.menu-account-menu {
		min-width: 260px;
		padding: 8px;
		margin-top: 0;
		border: 1px solid #e5e7eb;
		border-top: none;
		border-radius: 0 0 8px 8px;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
		right: 0;
		left: auto;
	}

	.menu-account-link {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 12px;
		border-radius: 6px;
		color: @body-bg-dark;
		font-size: 12px;
		font-weight: 500;
		line-height: 1.35;
		text-decoration: none;
		transition: background-color 0.2s ease, color 0.2s ease;

		&:hover,
		&:focus {
			background-color: fade(@color-primary, 28%);
			color: @body-bg-dark;
			text-decoration: none;
		}

		&__icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			background: transparent;
			color: darken(@color-primary, 18%);
			flex-shrink: 0;

			.hi svg {
				width: 18px;
				height: 18px;
			}
		}

		&__label {
			flex: 1;
		}

		&--logout {
			.menu-account-link__icon {
				color: #c9302c;
			}

			&:hover,
			&:focus {
				background-color: fade(#d9534f, 10%);
			}
		}
	}

	.menu-account-divider {
		height: 1px;
		margin: 6px 8px;
		background-color: #e8e8e8;
		list-style: none;
	}

	.menu-category-autopecas {
		background: #FFF;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 45%;
			background: url(https://cdn.rolemak.com.br/media/r6/menu-banner-categoria.jpg) right bottom no-repeat;
			background-size: auto 80%;
			opacity: 0.12;
			pointer-events: none;
			z-index: 0;
		}

		> li {
			position: relative;
			z-index: 1;
		}
	}
	.menu-maker-autopecas 	 {  background:#FFF url( https://cdn.rolemak.com.br/media/r6/menu-banner-montadora-autopecas.jpg)  right bottom no-repeat ; }
	.menu-catalog-autopecas  {  background:#FFF url( https://cdn.rolemak.com.br/media/r6/menu-banner-catalogo-autopecas.jpg)  right bottom no-repeat ; }

	.mega-dropdown               { position: static !important; }
	.mega-dropdown .menu-product { min-height:55px; }

	.nav>li>a{ padding: 14px 16px;}

	.mega-dropdown-menu					     		 { position:absolute;left:0;right:0;top:100%;z-index:1050;padding: 20px;width: 100%;margin-top:0;box-shadow: 0 10px 24px rgba(0,0,0,.1);-webkit-box-shadow: 0 10px 24px rgba(0,0,0,.1);border:none;border-top:none;border-radius:0;background:@body-bg-clean}
	.mega-dropdown-menu > li > ul 			 		 { padding: 0;  margin: 0;}
	.mega-dropdown-menu > li > ul > li 	 	 		 { list-style: none; }
	.mega-dropdown-menu > li ul > li > a:not(.menu-bearing-lines__link):not(.menu-categories-list__link) { display: block; padding: 25px 5px; }
	.mega-dropdown-menu > li > ul > li > a.icon-menu { display: block; padding: 5px 0px; min-height:100px; width:180px;  vertical-align: top; }
	.mega-dropdown-menu > li ul > li > a:hover,
	.mega-dropdown-menu > li ul > li > a:focus  { text-decoration: none }
	.mega-dropdown-menu .dropdown-header 		{ font-size: 13px;  color:@color-primary; padding: 8px 14px;  line-height: 25px; background-color:transparent; border-left:3px solid @color-primary; font-weight:800; letter-spacing:0.04em; a { color:@color-primary; font-weight:700; &:hover { color:darken(@color-primary,8%); } }}

	.mega-dropdown-footer {
		margin: 14px 0 0;
		padding: 0;
		list-style: none;
		border-top: 1px solid #e8e8e8;
	}

	.menu-view-all-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 18px 14px 20px;
		margin-top: 10px;
		background-color: fade(@color-primary, 40%);
		border-left: 5px solid @color-primary;
		border-radius: 0 6px 6px 0;
		color: @body-bg-dark;
		font-family: @font-title;
		font-size: 13px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		text-decoration: none;
		transition: background-color 0.2s ease, border-left-width 0.2s ease, padding-left 0.2s ease;

		&:hover,
		&:focus {
			text-decoration: none;
			color: @body-bg-dark;
			background-color: fade(@color-primary, 35%);
			border-left-width: 6px;
			padding-left: 22px;
		}
	}

	.menu-view-all-link__icon {
		color: @color-primary;
		font-size: 14px;
		flex-shrink: 0;
		transition: transform 0.2s ease;
	}

	.menu-view-all-link:hover .menu-view-all-link__icon,
	.menu-view-all-link:focus .menu-view-all-link__icon {
		transform: translateX(3px);
	}

	.mega-dropdown-menu--bearing-lines {
		width: 100%;
		max-width: none;
		left: 0;
		right: 0;
		padding: 12px 24px;

		> li > ul,
		> li > div {
			padding: 0;
			margin: 0;
		}
	}

	.menu-categories-nav {
		position: relative !important;

		> .dropdown-menu.menu-categories-panel {
			left: 0;
			right: auto;
			float: none;
			width: 300px;
			min-width: 280px;
			max-width: 340px;
			padding: 0;
			margin-top: 0;
			border: 1px solid #e5e7eb;
			border-top: none;
			border-radius: 0 0 8px 8px;
			box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
			background: @body-bg-clean;
		}
	}

	.menu-categories-panel {
		&__search-wrap {
			padding: 10px 12px 8px;
			border-bottom: 1px solid #f0f1f3;
		}

		&__search {
			position: relative;
			display: block;
			width: 100%;
			margin: 0;
		}

		&__search-icon {
			position: absolute;
			left: 10px;
			top: 50%;
			transform: translateY(-50%);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 14px;
			height: 14px;
			line-height: 0;
			color: #b0b8c1;
			pointer-events: none;

			.hi {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 14px;
				height: 14px;
				line-height: 0;
				vertical-align: middle;
			}

			svg {
				display: block;
				width: 14px !important;
				height: 14px !important;
			}
		}

		&__input {
			display: block;
			width: 100%;
			height: 32px;
			padding: 0 10px 0 32px;
			border: 1px solid #eceff2;
			border-radius: 6px;
			background: #f9fafb;
			font-size: 12px;
			font-weight: 400;
			color: @text-color;
			transition: border-color 0.15s ease, background-color 0.15s ease;

			&::placeholder {
				color: #b0b8c1;
			}

			&:focus {
				outline: none;
				background: #fff;
				border-color: fade(@color-primary, 45%);
				box-shadow: none;
			}
		}

		&__body {
			max-height: 500px;
			overflow-x: hidden;
			overflow-y: auto;
			padding: 4px 0;
			scrollbar-width: thin;
			scrollbar-color: fade(@color-primary, 30%) transparent;

			&::-webkit-scrollbar {
				width: 6px;
			}

			&::-webkit-scrollbar-thumb {
				background: fade(@color-primary, 30%);
				border-radius: 999px;
			}
		}

		&__empty {
			margin: 0;
			padding: 20px 14px;
			text-align: center;
			font-size: 12px;
			color: #9ca3af;

			&[hidden] {
				display: none;
			}
		}

		&__footer {
			border-top: 1px solid #f0f1f3;
			padding: 0;
		}

		&__view-all {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			padding: 10px 14px;
			font-size: 11px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.04em;
			color: darken(@color-primary, 8%);
			text-decoration: none;
			transition: background-color 0.15s ease, color 0.15s ease;

			.fa {
				font-size: 11px;
				transition: transform 0.15s ease;
			}

			&:hover,
			&:focus {
				text-decoration: none;
				color: darken(@color-primary, 14%);
				background: fade(@color-primary, 8%);
			}

			&:hover .fa,
			&:focus .fa {
				transform: translateX(2px);
			}
		}
	}

	.menu-categories-list {
		margin: 0;
		padding: 0;
		list-style: none;

		&__item {
			&[data-category-seo="inativos"],
			&[data-category-seo="ver-outros-itens"] {
				opacity: 0.55;
			}
		}

		&__link {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 8px 12px 8px 10px;
			border-left: 3px solid transparent;
			text-decoration: none;
			color: #4b5563;
			font-size: 13px;
			font-weight: 400;
			line-height: 1.35;
			transition: background-color 0.12s ease, border-left-color 0.12s ease, color 0.12s ease;

			&:hover,
			&:focus {
				text-decoration: none;
				color: @body-bg-dark;
				font-weight: 600;
				background: fade(@color-primary, 7%);
				border-left-color: @color-primary;
			}
		}

		&__icon {
			flex: 0 0 20px;
			width: 20px;
			height: 20px;
			object-fit: contain;

			&.is-hidden {
				visibility: hidden;
			}

			&--brand {
				border-radius: 2px;
				background: #fff;
			}
		}

		&__label {
			flex: 1 1 auto;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		&__count {
			flex: 0 0 auto;
			font-size: 11px;
			font-weight: 400;
			color: #9ca3af;
			transition: color 0.12s ease;
		}

		&__link:hover &__count,
		&__link:focus &__count {
			color: darken(@color-primary, 6%);
			font-weight: 600;
		}
	}

	@media (max-width: 767px) {
		.menu-categories-nav > .dropdown-menu.menu-categories-panel {
			width: min(300px, calc(100vw - 24px));
		}

		.menu-categories-panel__body {
			max-height: min(500px, 60vh);
		}
	}

	.menu-bearing-lines {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0 40px;
		width: 100%;
		max-height: 264px;
		overflow-x: auto;
		overflow-y: auto;

		&__col {
			list-style: none;
			padding: 0;
			margin: 0;
			flex: 1 1 0;
			min-width: 120px;
			max-width: 33.333%;
		}

		&__col > li {
			margin: 0;
			padding: 0;
			border: none;
			display: block;
			line-height: 1.2;
		}
	}

	#menu .mega-dropdown-menu--bearing-lines .menu-bearing-lines__col > li > a.menu-bearing-lines__link {
		display: block;
		padding: 1px 6px;
		margin: 0;
		min-height: 0;
		height: auto;
		font-size: 12px;
		line-height: 1.2;
		text-align: left;
		border-radius: 2px;
		white-space: nowrap;
		transition: background-color 0.15s ease, color 0.15s ease;

		&::after {
			content: none !important;
			display: none !important;
		}

		&:hover,
		&:focus {
			background-color: fade(@color-primary, 12%);
			color: saturate(@color-primary, 12%);
			text-decoration: none;
		}
	}

	@media (max-width: 767px) {
		.menu-bearing-lines {
			flex-direction: column;
			flex-wrap: nowrap;
			max-height: none;
			gap: 0;

			&__col {
				max-width: none;
			}
		}
	}

	.menu-category-tree {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		min-height: 280px;
		width: 100%;

		&__parents {
			flex: 0 0 220px;
			display: flex;
			flex-direction: column;
			border-right: 1px solid fade(@color-primary, 18%);
			padding: 6px 0;
			margin: 0;
		}

		&__parent {
			display: block;
			width: 100%;
			text-align: left;
			border: none;
			background: transparent;
			padding: 10px 16px;
			font-size: 13px;
			font-weight: 600;
			line-height: 1.3;
			color: @text-color;
			cursor: pointer;
			transition: background-color 0.15s ease, color 0.15s ease;

			&.is-active,
			&:hover,
			&:focus {
				background-color: fade(@color-primary, 12%);
				color: saturate(@color-primary, 12%);
				outline: none;
			}
		}

		&__panels {
			flex: 1 1 auto;
			position: relative;
			padding: 8px 12px 8px 16px;
			min-width: 0;
		}

		&__panel {
			display: none;

			&.is-active {
				display: block;
			}
		}

		&__children {
			margin: 0;
			padding: 0;
		}

		&__children-grid {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			width: 100%;
		}

		&__col {
			flex: 1 1 0;
			min-width: 0;
			max-width: 33.333%;

			.menu-categories-list__link {
				gap: 6px;
			}

			.menu-categories-list__label {
				flex: 0 1 auto;
				white-space: normal;
			}

			.menu-categories-list__count {
				flex: 0 0 auto;
				margin-left: 2px;
			}
		}

		&__panel .menu-categories-list {
			max-height: none;
			overflow: visible;
			padding-right: 0;
		}

		&__empty {
			margin: 12px 0 0;
			padding: 0 4px;
		}
	}

	#menu .mega-dropdown-menu--category-tree {
		padding-top: 0;
		padding-bottom: 0;

		> li > div {
			padding: 0;
			margin: 0;
		}
	}

	@media (max-width: 767px) {
		.menu-category-tree {
			flex-direction: column;
			min-height: 0;

			&__parents {
				flex: none;
				flex-direction: row;
				flex-wrap: nowrap;
				overflow-x: auto;
				border-right: none;
				border-bottom: 1px solid fade(@color-primary, 18%);
				padding: 4px 0;
			}

			&__parent {
				flex: 0 0 auto;
				width: auto;
				white-space: nowrap;
				padding: 8px 12px;
			}

			&__panels {
				padding: 10px 8px;
			}

			&__children-grid {
				flex-direction: column;
			}

			&__col {
				max-width: none;
			}
		}
	}

	.menu-image{ min-height:40px}

	.list-inline > li {
		border: none;
		margin: 2px 4px;
		padding: 0;
	}

	.list-inline > li > a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-width: 52px;
		padding: 6px 8px;
		border-radius: 4px;
		transition: color 0.15s ease;

		img {
			transition: transform 0.15s ease, filter 0.15s ease;
		}

		&:hover,
		&:focus {
			background-color: transparent;
			color: saturate(@color-primary, 12%);

			img:not(.icon-menu__photo) {
				transform: translateY(-1px) scale(1.04);
				filter: url(#menu-icon-segment);
			}

			img.icon-menu__photo {
				transform: translateY(-1px) scale(1.02);
			}
		}
	}

	.icon-menu__photo {
		display: block;
		width: 60px;
		height: 60px;
		margin: 0 auto 4px;
		object-fit: contain;
		border-radius: 6px;
		background: #fff;
	}

	.mega-dropdown-menu > li > ul > li > a.icon-menu,
	.mega-dropdown-menu .list-inline > li > a {
		position: relative;
		transition: color 0.15s ease;

		img {
			transition: transform 0.15s ease, filter 0.15s ease;
		}

		&[data-menu-label]::after {
			content: attr(data-menu-label);
			position: absolute;
			z-index: 30;
			left: 50%;
			top: calc(100% - 6px);
			transform: translateX(-50%);
			padding: 4px 8px;
			font-size: 11px;
			line-height: 1.3;
			font-weight: 500;
			color: #333;
			background: #f5f5f5;
			border: 1px solid #e0e0e0;
			border-radius: 4px;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
			white-space: nowrap;
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition: opacity 0.1s ease, visibility 0s linear 0.1s;
		}

		&:hover::after,
		&:focus::after {
			opacity: 1;
			visibility: visible;
			transition-delay: 0s;
		}

		&:hover,
		&:focus {
			background-color: transparent !important;
			color: saturate(@color-primary, 12%);

			img:not(.icon-menu__photo) {
				transform: translateY(-1px) scale(1.04);
				filter: url(#menu-icon-segment);
			}

			img.icon-menu__photo {
				transform: translateY(-1px) scale(1.02);
			}
		}
	}

	.mega-dropdown-menu--brands {
		padding: 0;

		.menu-brands-mega-wrap {
			float: none;
			width: 100%;
			padding: 0;
			margin: 0;
		}
	}

	.menu-brands-mega {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
		align-items: center;
		justify-items: center;
		gap: 20px 28px;
		margin: 0;
		padding: 28px 36px;
		width: 100%;
		list-style: none;
	}

	.menu-brand-item {
		float: none;
		margin: 0;
		padding: 0;
		width: 100%;
		max-width: 220px;

		.menu-brand-link {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			min-height: 104px;
			padding: 16px 20px;
			border-radius: 10px;
			border: none;
			background-color: transparent;
			transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

			&:hover,
			&:focus {
				text-decoration: none;
				background-color: fade(@color-primary, 22%);
				box-shadow: none;
				transform: translateY(-2px);
			}

			img {
				max-height: 76px;
				max-width: 180px;
				width: auto;
				height: auto;
				object-fit: contain;
			}

			.menu-brand-wide {
				max-height: 64px;
				max-width: 280px;
			}
		}
	}

	@media (max-width: 991px) {
		.menu-brands-mega {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			padding: 20px 16px;
			gap: 14px;
		}

		.menu-brand-item .menu-brand-link {
			min-height: 88px;
			padding: 12px 14px;

			img {
				max-height: 60px;
				max-width: 140px;
			}

			.menu-brand-wide {
				max-height: 52px;
				max-width: 200px;
			}
		}
	}
}

/* ------------------------------------------------------------------------------------------------------------------------
// CONTENT
// ------------------------------------------------------------------------------------------------------------------------*/
.static-container{ margin-top:5px; padding:0 5px 5px 5px; min-height:500px}

.segment-title {
	margin: 16px 0 24px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-left: 4px solid saturate(@color-primary, 12%);
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	color: @body-bg-dark;

	.container-flex {
		display: flex;
		align-items: center;
	}

	.text .bold {
		font-size: 18px;
		font-weight: @font-weight-bold;
		color: @body-bg-dark;
		letter-spacing: -0.02em;
	}

	.segment-title__heading {
		font-size: 18px;
		font-weight: @font-weight-bold;
		color: @body-bg-dark;
		letter-spacing: -0.02em;
		margin: 0;
		padding: 0;
		line-height: 1.3;
	}
}

.static-container.myaccount-page {
	padding-top: 32px;
	margin-left: -15px;
	margin-right: -15px;
	padding-left: 16px !important;
	padding-right: 15px !important;
	padding-bottom: 15px !important;

	.breadcrumb.myaccount-breadcrumb {
		background: transparent;
		padding: 0 0 16px;
		margin-bottom: 4px;
		margin-left: 0;
		border-radius: 0;
		font-size: 12px;
	}

	.breadcrumb + .section-heading {
		margin-top: 0;
	}

	.section-heading:first-child {
		margin-top: 0;
	}

	table.myaccount-table thead.bg-default,
	table.myaccount-table thead {
		background-color: #f3f3f3 !important;
		color: @body-bg-dark !important;
		border-bottom: 2px solid fade(@color-primary, 40%);

		th,
		th strong {
			color: @body-bg-dark;
			font-weight: @font-weight-semibold;
			font-size: 11px;
			text-transform: uppercase;
			letter-spacing: 0.04em;
			border-color: #e4e4e4 !important;
			vertical-align: middle;
		}
	}

	table.myaccount-table {
		border-radius: 10px;
		overflow: hidden;
		border: 1px solid #e8e8e8;

		> thead > tr > th {
			border-bottom-width: 0;
		}

		> tbody > tr > td {
			font-size: 13px;
			vertical-align: middle;
		}
	}

	.fixed-table-container {
		border-radius: 10px;
		overflow: hidden;

		thead th {
			background-color: #f3f3f3 !important;
			color: @body-bg-dark !important;
			border-color: #e4e4e4 !important;
			font-size: 11px;
			text-transform: uppercase;
			letter-spacing: 0.04em;
		}
	}

	.myaccount-inline-icon {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		vertical-align: middle;

		.hi svg {
			width: 16px;
			height: 16px;
		}
	}

	.myaccount-sitemap {
		margin-top: 8px;

		&__title {
			margin: 0 0 10px;
			padding-bottom: 8px;
			font-family: @font-family-sans;
			font-size: 13px;
			font-weight: @font-weight-semibold;
			text-transform: uppercase;
			letter-spacing: 0.04em;
			color: @body-bg-dark;
			border-bottom: 2px solid fade(@color-primary, 35%);

			.hi {
				color: saturate(darken(@color-primary, 6%), 10%);
			}
		}

		&__list {
			margin: 0 0 24px;
			padding: 0;
			list-style: none;

			li {
				margin-bottom: 6px;
				line-height: 1.45;
			}
		}

		&__link {
			color: @text-color2;
			font-size: 13px;
			text-decoration: none;
			transition: color 0.15s ease;

			.hi {
				color: saturate(darken(@color-primary, 8%), 10%);
				flex-shrink: 0;
			}

			&:hover,
			&:focus {
				color: saturate(darken(@color-primary, 8%), 10%);
				text-decoration: none;

				span {
					text-decoration: underline;
				}
			}
		}
	}

	.breadcrumb.myaccount-breadcrumb {
		.hi svg {
			width: 16px;
			height: 16px;
			vertical-align: -2px;
		}
	}

	&.conversion-page {
		.conversion-layout {
			display: flex;
			gap: 24px;
			align-items: flex-start;
			margin-top: 8px;
		}

		.conversion-sidebar {
			flex: 0 0 30%;
			max-width: 30%;
		}

		.conversion-content {
			flex: 1;
			min-width: 0;
		}

		.conversion-nav__list {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.conversion-nav__link {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 10px 12px;
			border-radius: 8px;
			border: 1px solid #e8e8e8;
			margin-bottom: 6px;
			text-decoration: none;
			color: @body-bg-dark;
			font-size: 13px;
			line-height: 1.35;
			transition: border-color 0.15s ease, background 0.15s ease;

			&:hover,
			&:focus {
				border-color: fade(@color-primary, 50%);
				background: fade(@color-primary, 6%);
				text-decoration: none;
				color: @body-bg-dark;
			}

			&.is-active {
				border-color: @color-primary;
				background: fade(@color-primary, 10%);
				font-weight: @font-weight-semibold;
			}
		}

		.conversion-nav__icon {
			flex-shrink: 0;
			width: 28px;
			height: 28px;
			object-fit: contain;
		}

		.conversion-nav__label {
			flex: 1;
		}

		.conversion-placeholder {
			padding: 48px 24px;
			text-align: center;
			color: #888;
			border: 1px dashed #ddd;
			border-radius: 10px;
			background: #fafafa;

			p {
				margin: 0;
				font-size: 14px;
			}
		}

		.conversion-content.is-loading {
			opacity: 0.55;
			pointer-events: none;
		}

		.horizontal-scroll {
			overflow-x: auto;
			width: 100%;
			clear: both;
		}

		.conversion-table {
			min-width: 640px;
		}

		@media (max-width: 991px) {
			.conversion-layout {
				flex-direction: column;
				gap: 16px;
			}

			.conversion-sidebar {
				flex: none;
				max-width: 100%;
				width: 100%;
			}
		}
	}
}

/* ------------------------------------------------------------------------------------------------------------------------
// VITRINE GRID - Conversão + Cód. original na mesma linha
// ------------------------------------------------------------------------------------------------------------------------*/
.grid-codes {
	align-items: flex-start;
	gap: 8px;
}

.grid-codes__item {
	min-width: 0;
}

.grid-codes__item a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* ------------------------------------------------------------------------------------------------------------------------
// LETREIRO DE BENEFÍCIOS (marquee entre o menu e o banner)
// ------------------------------------------------------------------------------------------------------------------------*/
.features-marquee {
	margin: 16px 0 4px;
	border-radius: 12px;
	overflow: hidden;
	color: #fff;
	background-color: var(--seg-primary, @color-primary);
	background-image: linear-gradient(
		90deg,
		var(--seg-primary, @color-primary) 0%,
		var(--seg-primary-hover, darken(@color-primary, 12%)) 100%
	);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .08);

	&__viewport {
		position: relative;
		overflow: hidden;

		/* máscara nas bordas para o texto "entrar/sair" suavemente */
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	}

	&__track {
		display: flex;
		width: max-content;
		animation: features-marquee-scroll 32s linear infinite;
		will-change: transform;
	}

	/* pausa a animação ao passar o mouse */
	&:hover &__track {
		animation-play-state: paused;
	}

	&__list {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	&__item {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		padding: 11px 34px;
		font-size: 13px;
		font-weight: @font-weight-semibold;
		letter-spacing: .2px;
		white-space: nowrap;
		position: relative;

		/* separador entre os itens */
		&::after {
			content: "";
			position: absolute;
			right: 0;
			top: 50%;
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background-color: fade(#ffffff, 55%);
			transform: translateY(-50%);
		}
	}

	&__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;

		svg {
			display: block;
		}
	}

	&__text {
		line-height: 1;
	}
}

@keyframes features-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 767px) {
	.features-marquee {
		margin: 12px 0 2px;

		&__item {
			padding: 10px 22px;
			font-size: 12px;
		}

		&__track {
			animation-duration: 22s;
		}
	}
}

/* respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
	.features-marquee__track {
		animation: none;
		transform: translateX(0);
	}

	.features-marquee__viewport {
		overflow-x: auto;
	}
}

/* ------------------------------------------------------------------------------------------------------------------------
// BANNER
// ------------------------------------------------------------------------------------------------------------------------*/
#banner
{
  background-color:transparent;
  width:100%;
  margin-top:20px;
  margin-bottom:20px;
  border-bottom:none;

  .carousel {
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 14px rgba(0,0,0,.08);
    position: relative;
  }

  .carousel-inner,
  .carousel-inner .item,
  .carousel-inner .item a {
    border-radius:12px;
    overflow:hidden;
  }

  /* Evita flash: vários .item empilhados antes do Bootstrap/JS */
  .carousel-inner {
    position: relative;
    width: 100%;
    min-height: 160px;
    background-color: #ececec;
  }

  .carousel-inner > .item {
    display: none;
    height: auto;
  }

  .carousel-inner > .item.active,
  .carousel-inner > .item.next,
  .carousel-inner > .item.prev {
    display: block;
  }

  .carousel.is-loading {
    .carousel-inner > .item {
      display: none !important;
    }

    .carousel-control {
      visibility: hidden;
    }

    .carousel-inner::before {
      content: '';
      display: block;
      width: 100%;
      padding-bottom: 28%;
      border-radius: 12px;
      background: linear-gradient(90deg, #e8e8e8 0%, #f4f4f4 45%, #e8e8e8 90%);
      background-size: 200% 100%;
      animation: banner-carousel-shimmer 1.1s ease-in-out infinite;
    }
  }

  .carousel.is-ready {
    .carousel-inner {
      min-height: 0;
      background-color: transparent;
    }

    .carousel-inner::before {
      display: none;
    }
  }

  .container-flex {
    gap:12px;
    align-items:stretch;
  }

  .container-flex > .dropdown-container,
  .container-flex > .flex1 {
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 14px rgba(0,0,0,.08);
  }

  .container-flex > .dropdown-container > div {
    border-radius:12px;
    overflow:hidden;
  }

  .banner-slide-link {
    display: block;
    width: 100%;
    line-height: 0;
  }

  .banner-slide-img {
    width: 100%;
    height: auto;
    display: block;
  }
}

@keyframes banner-carousel-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.carousel-control { width:5% }

#banner .carousel-control {
  background-image:none;
  opacity:0.85;

  .glyphicon {
    color:@body-bg-dark;
    font-size:22px;
  }

  &:hover { opacity:1; }
}

#banner.banner--search-context .carousel--multi {
  .carousel-control {
    display: flex !important;
    align-items: center;
    justify-content: center;
    top: 50%;
    bottom: auto;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    padding: 0;
    border: 1px solid fade(#fff, 70%);
    border-radius: 50%;
    background-color: fade(#fff, 90%);
    background-image: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
    opacity: 1;
    text-shadow: none;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

    &.left {
      left: 16px;
    }

    &.right {
      right: 16px;
    }

    .glyphicon {
      display: none;
    }

    &::before {
      content: '';
      display: block;
      width: 9px;
      height: 9px;
      border-right: 2.5px solid @body-bg-dark;
      border-bottom: 2.5px solid @body-bg-dark;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }

    &.left::before {
      transform: rotate(135deg);
      margin-left: 3px;
    }

    &.right::before {
      transform: rotate(-45deg);
      margin-right: 3px;
    }

    &:hover,
    &:focus {
      background-color: #fff;
      border-color: #fff;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
      opacity: 1;
      transform: scale(1.08);
      outline: none;

      &::before {
        border-color: darken(@color-primary, 6%);
      }
    }

    &.left:hover::before,
    &.left:focus::before {
      transform: rotate(135deg) translateX(-1px);
    }

    &.right:hover::before,
    &.right:focus::before {
      transform: rotate(-45deg) translateX(1px);
    }

    &:active {
      transform: scale(0.96);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    }
  }
}

/* ------------------------------------------------------------------------------------------------------------------------
// CARROS EM DESTAQUE — tipos de veículo por tag do cliente (home autopeças)
// ------------------------------------------------------------------------------------------------------------------------*/
.featured-types {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 32px;
	align-items: flex-start;
	padding: 10px 0 6px;

	&__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		min-width: 96px;
		text-align: center;
		text-decoration: none;
		color: @body-bg-dark;
		transition: transform 0.15s ease;

		&:hover,
		&:focus {
			text-decoration: none;
			transform: translateY(-2px);

			.featured-types__name {
				color: saturate(darken(@color-primary, 10%), 8%);
				text-decoration: underline;
			}
		}
	}

	&__icon {
		width: 96px;
		height: 56px;
		object-fit: contain;
	}

	&__name {
		font-size: 12px;
		font-weight: @font-weight-semibold;
		line-height: 1.3;
	}
}

/* Modal de compra rápida: sem altura mínima da página de produto */
#wrap-product-modal {
	min-height: 0;

	.product-purchase-blocks {
		margin-bottom: 0;
	}

	.product-stock-panel__layout,
	.product-stock-panel--inline-prices .product-stock-panel__inline-layout {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.product-stock-panel__purchase-row,
	.product-machine-purchase__actions .product-stock-panel__purchase-row {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;

		.product-qty-stepper {
			max-width: 140px;
		}

		.product-stock-panel__buy-btn {
			flex: 1 1 180px;
			width: auto;
			align-self: center;
			height: auto;
		}
	}

	.product-machine-purchase__prices {
		flex-direction: column;
		gap: 10px;
	}

	.product-machine-purchase__price-line--consumer {
		padding-left: 0;
		border-left: 0;
		padding-top: 8px;
		border-top: 1px solid fade(@body-bg-dark, 10%);
	}

	.panel-group#accordion {
		margin-bottom: 0;
	}

	.panel-group#accordion .panel-body {
		padding: 12px;
	}

	.panel-group#accordion .nav-tabs > li > a {
		padding: 8px 10px;
		font-size: 11px;
	}
}

.featured-models {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 0 6px;

	&__item {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 6px 12px;
		border: 1px solid #e4e4e4;
		border-radius: 16px;
		background: #f8f9fa;
		font-size: 12px;
		font-weight: @font-weight-semibold;
		color: @body-bg-dark;
		text-decoration: none;
		transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;

		&:hover,
		&:focus {
			text-decoration: none;
			border-color: @color-primary;
			background: fade(@color-primary, 14%);
			color: @body-bg-dark;
		}
	}
}

/* ------------------------------------------------------------------------------------------------------------------------
// Pedido
// ------------------------------------------------------------------------------------------------------------------------*/
#wrap-trackorder
{
	.order-service
	{
		margin-top:10px;
	}
}


@keyframes solr-brand-marquee {
	0%, 3% {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	8%, 82% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	88%, 100% {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}
}

@keyframes solr-skeleton-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

@keyframes solr-loading-progress {
	0% {
		transform: translateX(-120%);
	}
	100% {
		transform: translateX(320%);
	}
}


@import "solr-search.less";


/* ------------------------------------------------------------------------------------------------------------------------
// PRODUCTS
// ------------------------------------------------------------------------------------------------------------------------*/
#wrap-products
{
	.content-menu-search .menu-filter-solr {
		color: @body-bg-dark;
		font-weight: 500;
		text-decoration: none;
		transition: color 0.15s ease;

		&:hover,
		&:focus {
			color: saturate(darken(@color-primary, 12%), 8%);
			text-decoration: none;
		}

		&.active,
		&.bold {
			color: saturate(darken(@color-primary, 10%), 8%) !important;
			font-weight: @font-weight-semibold;

			i {
				color: @color-primary !important;
			}
		}
	}

	.menu-search {
		a.active,
		.menu-filter-solr.active,
		.menu-filter-solr.bold {
			color: saturate(darken(@color-primary, 10%), 8%) !important;
			font-weight: @font-weight-semibold;

			i {
				color: @color-primary !important;
			}
		}
	}

	.category-title
	{
		padding-bottom:10px;
		.icon	 { width:65px};
		.text	 { .bold{ font-size:20px;} }
		.display { width:150px; text-align:right;}
		.order   { width:300px; text-align:right;}
	}

	.grid
	{
		.share   	 	{ position:absolute; right:20px}
		.brand   	 	{ position:absolute}
		.image	 	 	{ padding-right:10px; padding-left:10px; }
		.caption	 	{ /*border:1px solid #F00;*/ min-height:385px;  }
		.topname 	 	{ /*background-color:#FC9;*/ min-height:200px; border-bottom:1px solid #e1e1e1}
		.name 	 	 	{ /*background-color:#FC9;*/ line-height:14px; font-family:@font-title;}
		.model  	 	{ /*background-color:#F33;*/ font-family:@font-title}
		.description 	{ /*background-color:#F99;*/ }
		.price   	 	{ /* background-color:#F69;*/  margin-bottom:5px; min-width:240px; }
		.stock   	 	{ /*background-color:#0C3;*/ }
		.app 	 		{ /*background-color:#F69;*/ height:125px; padding:5px 0}
		.no-stock		{ min-height:80px}
	}
	.list
	{
		margin-left:5px;

		.thumbnail   { padding:3px 0; margin:0px 0 5px 0; min-height:90px; align-items:stretch; }
		.image	 	 { align-self:stretch; display:flex; align-items:center; width:100px; padding-left:5px; border-right:1px solid #e1e1e1 }
		.name 		 { line-height:14px; }
		.caption	 { padding:0; padding-left:10px; padding-right:10px; }
		.desc 		 { }
		.price  	 {
			position:relative;
			align-self:stretch;
			display:flex;
			flex-direction:column;
			justify-content:center;
			padding-left:10px;
			min-width:240px;
			border-left:0;

			&::before {
				content:'';
				position:absolute;
				left:0;
				top:0;
				bottom:0;
				width:2px;
				background-color:@color-primary;
			}
		}
		.description {
			width:100px;
			align-self:stretch;
			display:flex;
			flex-direction:column;
			justify-content:center;

			.brand { margin-top:0; }
		}
		.stock 		 { }
	}
	.excel-view
	{
	  .name { color:@text-color2; }
	}

	.thumbnail:hover{ border-color:@color-primary;transition-duration: 0.3s;-webkit-transition-duration: 0.3s; .name { color:@color-primary;transition-duration: 0.3s;-webkit-transition-duration: 0.3s; }.model { color:@color-primary;transition-duration: 0.3s;-webkit-transition-duration: 0.3s; }}
	.category
	{
	   min-height:300px;
	  .title-name   { color:@text-color2}
	  .title-border { }
	}

	.section-heading {
		margin: 32px 0 24px;
		padding-bottom: 12px;
		border-bottom: 1px solid #ebebeb;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: -1px;
			width: 56px;
			height: 3px;
			background: saturate(@color-primary, 12%);
			border-radius: 999px;
		}

		&__title {
			margin: 0;
			font-family: @font-family-sans;
			font-size: 20px;
			font-weight: @font-weight-semibold;
			line-height: 1.35;
			color: @body-bg-dark;
			letter-spacing: 0.01em;
		}

		&__subtitle {
			font-size: 13px;
			font-weight: @font-weight-normal;
			color: fade(@body-bg-dark, 55%);
		}

		&--compact {
			margin: 0 0 16px;

			.section-heading__title {
				font-size: 16px;
			}
		}

		&:first-child {
			margin-top: 20px;
		}
	}

	.catalogs-page {
		.catalog-stock-toolbar {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 12px;
			margin-bottom: 24px;
			padding: 14px 18px;
			background-color: #f3f3f3;
			border: 1px solid #e8e8e8;
			border-radius: 10px;

			&__label {
				font-size: 12px;
				font-weight: @font-weight-semibold;
				text-transform: uppercase;
				letter-spacing: 0.04em;
				color: fade(@body-bg-dark, 70%);
			}

			&__buttons .btn {
				border-radius: 6px;
				font-weight: @font-weight-semibold;
				min-width: 52px;

				&.active,
				&:active {
					background-color: saturate(@color-primary, 10%);
					border-color: darken(@color-primary, 6%);
					color: @body-bg-dark;
				}
			}
		}

		.catalog-panel {
			margin-bottom: 28px;
		}

		.catalog-table {
			.catalog-table__category {
				display: flex;
				align-items: center;
				gap: 10px;
				font-weight: @font-weight-medium;
			}

			.catalog-table__icon {
				flex-shrink: 0;
			}
		}

		.catalog-pdf-link {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			text-decoration: none;
			white-space: nowrap;

			&:hover,
			&:focus {
				color: saturate(darken(@color-primary, 8%), 12%);
				text-decoration: none;
			}

			.hi svg {
				flex-shrink: 0;
			}
		}
	}

	.category-grid-home {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 36px 4px;
		margin-bottom: 48px;
	}

	.category-grid-home__item {
		float: none;
		width: auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0;
		margin: 0;
		padding-bottom: 8px;
	}

	.category-grid-home__link {
		display: flex;
		justify-content: center;
		width: 100%;
		text-decoration: none;

		&:hover,
		&:focus {
			text-decoration: none;
		}
	}

	.category-grid-home__media {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 240px;
		aspect-ratio: 1;
		height: auto;
		margin: 0 auto;
		padding: 14px;
		background: radial-gradient(circle at 50% 50%, #ffffff 58%, #f7f7f7 82%, #ececec 100%);
		border: 1px solid fade(#c8c8c8, 28%);
		border-radius: 50%;
		overflow: hidden;
		transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	}

	.category-grid-home__link:hover .category-grid-home__media,
	.category-grid-home__link:focus .category-grid-home__media {
		border-color: fade(saturate(@color-primary, 12%), 50%);
		background: radial-gradient(circle at 50% 50%, #ffffff 55%, fade(@color-primary, 6%) 88%, fade(@color-primary, 12%) 100%);
		box-shadow: 0 0 0 4px fade(@color-primary, 22%);
		transform: translateY(-2px);
	}

	.category-grid-home__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: 50%;
	}

	.category-grid-home__item .title-name {
		width: 100%;
		margin-bottom: 0;
		margin-top: 12px;
		line-height: 1.35;
		font-size: 13px;
		transition: color 0.2s ease;
	}

	.category-grid-home__link:hover + .title-name,
	.category-grid-home__link:focus + .title-name {
		color: saturate(darken(@color-primary, 8%), 10%);
	}

	@media (max-width: 991px) {
		.category-grid-home {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 32px 4px;
			margin-bottom: 40px;
		}

		.category-grid-home__media {
			max-width: 200px;
			padding: 12px;
		}
	}

	@media (max-width: 767px) {
		.category-grid-home {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 28px 6px;
			margin-bottom: 36px;
		}

		.category-grid-home__media {
			max-width: 168px;
			padding: 10px;
		}

		.category-grid-home__item .title-name {
			font-size: 12px;
			margin-top: 10px;
		}
	}

	.category-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 14px;
		margin-bottom: 30px;
	}

	.category-card {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 16px 18px;
		background-color: #fff;
		border: 1px solid #e8e8e8;
		border-radius: 12px;
		text-decoration: none;
		color: @body-bg-dark;
		transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;

		&:hover,
		&:focus {
			text-decoration: none;
			color: @body-bg-dark;
			border-color: fade(@color-primary, 45%);
			box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
			transform: translateY(-2px);
		}

		&__icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 64px;
			height: 64px;
			flex-shrink: 0;
			border-radius: 12px;
			background-color: fade(@color-primary, 40%);

			img {
				width: 56px;
				height: 56px;
				object-fit: contain;
			}
		}

		&__body {
			display: flex;
			flex-direction: column;
			gap: 4px;
			flex: 1;
			min-width: 0;
		}

		&__name {
			font-family: @font-title;
			font-size: 13px;
			font-weight: 700;
			line-height: 1.35;
			text-transform: uppercase;
			letter-spacing: 0.02em;
		}

		&__count {
			font-size: 12px;
			color: fade(@text-color2, 70%);
			line-height: 1.3;
		}

		&__arrow {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 28px;
			height: 28px;
			border-radius: 8px;
			color: @color-primary;
			background-color: fade(@color-primary, 40%);
			flex-shrink: 0;
			opacity: 0;
			transform: translateX(-4px);
			transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;

			.hi svg {
				width: 14px;
				height: 14px;
			}
		}

		&:hover &__arrow,
		&:focus &__arrow {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@media (max-width: 767px) {
		.category-grid {
			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
			gap: 10px;
		}

		.category-card {
			flex-direction: column;
			align-items: flex-start;
			padding: 14px;

			&__arrow {
				opacity: 1;
				transform: none;
				align-self: flex-end;
			}
		}
	}

	.products-grid > .grid > .thumbnail,
	.products-list .list > .thumbnail {
		border: 1px solid #f8f8f8;
		border-radius: 10px;
	}

	.products-list .list .image {
		border-right-color: #f8f8f8;
	}

	.products-grid .topname {
		border-bottom-color: #f8f8f8;
	}

	.products-grid{ .grid }
	.products-list{ .list }
}



@import "product-page.less";


/* ------------------------------------------------------------------------------------------------------------------------
// Cart
// ------------------------------------------------------------------------------------------------------------------------*/
#wrap-checkout,
.checkout-page
{
	min-height: 500px;

	tr.subtotal {
		background-color: #f8f8f8;
		height: 45px;
	}

	.breadcrumb {
		padding: 0;
		margin-bottom: 0;
		border-radius: 0;
	}

	.static-container.checkout-page__inner {
		padding-top: 24px;
		padding-bottom: 32px;
		margin-left: -15px;
		margin-right: -15px;
		padding-left: 16px !important;
		padding-right: 15px !important;
	}

	.checkout-page__content {
		margin-top: 8px;
	}

	.checkout-page__alert {
		margin-bottom: 16px;
	}

	.checkout-wizard.bs-wizard {
		margin-bottom: 20px;
	}

	.panel-primary {
		border: 1px solid #f1f1f1;
		border-radius: 10px;
		box-shadow: none;
		margin-bottom: 20px;

		.panel-heading {
			background: #1a1a1a;
			border: none;
			border-radius: 10px 10px 0 0;
			padding: 12px 16px;

			.panel-title {
				font-size: 15px;
				font-weight: @font-weight-semibold;
				color: #fff;
				margin: 0;
			}
		}

		.panel-body {
			padding: 16px;
		}
	}

	.table-responsive {
		border-radius: 0 0 10px 10px;
	}

	.table-bordered {
		margin-bottom: 0;

		thead td {
			background: #fafafa;
			font-weight: @font-weight-semibold;
			border-bottom-width: 1px;
		}
	}

	.checkout-transport-grid {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		padding: 0 !important;

		.box {
			float: none;
			flex: 1 1 200px;
			min-width: 180px;
			max-width: 280px;
			min-height: 200px;
			border-right: 1px solid #e8e8e8;
			padding: 16px 20px;
			margin: 0;
		}

		.box:last-child {
			border-right: none;
		}
	}

	.checkout-frete-gratis-hint {
		display: inline-block;
		background-color: #fffe54;
		color: #000;
		font-size: 13px;
	}

	.checkout-actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: 16px;
		margin-top: 24px;
		padding-top: 20px;
		border-top: 1px solid #f1f1f1;
		clear: both;

		&__left,
		&__right {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			align-items: center;
		}

		&__right {
			flex-direction: column;
			align-items: flex-end;
			text-align: right;
		}

		&__hint {
			display: block;
			color: fade(@body-bg-dark, 55%);
			margin-top: 4px;
		}
	}

	.btn-checkout-cart,
	.btn-checkout-logistics,
	.btn-checkout-payment {
		background: saturate(@color-primary, 10%);
		border-color: darken(@color-primary, 6%);
		color: @body-bg-dark;

		&:hover,
		&:focus {
			background: darken(@color-primary, 4%);
			border-color: darken(@color-primary, 10%);
			color: @body-bg-dark;
		}
	}
}

/* ------------------------------------------------------------------------------------------------------------------------
// Form LOGIN
// ------------------------------------------------------------------------------------------------------------------------*/
#formLogin
{
 /*background-color:#FCC;*/

  p{ color:@text-color2}
 .fm-1,.fm-3  { color:@text-color}
 .fm-5 a{ color:@text-color}
 .fm-2 input, .fm-4 input{ font-size:@font-small * 1.2}

}



/* ------------------------------------------------------------------------------------------------------------------------
// ERROR 404
// ------------------------------------------------------------------------------------------------------------------------*/
.error-template {padding: 40px 15px;text-align: center;}
.error-template h1 { font-size:80px;color:@text-color2; font-family:@font-title}
.error-template h2 { color:@text-color2}

.error-actions { margin-top:10px;margin-bottom:5px;}
.error-details { margin-bottom:25px;}


input[type="checkbox"]:focus + label::before {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
    .checkbox input[type="checkbox"]:checked + label::after {
      font-family: 'FontAwesome';
      content: "\f00c"; }
    .checkbox input[type="checkbox"]:disabled + label {
      opacity: 0.65; }
      .checkbox input[type="checkbox"]:disabled + label::before {
        background-color: #eeeeee;
        cursor: not-allowed; }
  .checkbox.checkbox-circle label::before {
    border-radius: 50%; }
  .checkbox.checkbox-inline {
    margin-top: 0; }

.checkbox-primary input[type="checkbox"]:checked + label::before {
  background-color: @body-bg-dark;
  border-color: @body-bg-dark; }
.checkbox-primary input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-danger input[type="checkbox"]:checked + label::before {
  background-color: #d9534f;
  border-color: #d9534f; }
.checkbox-danger input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-info input[type="checkbox"]:checked + label::before {
  background-color: @color-primary;
  border-color: @color-primary; }
.checkbox-info input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-warning input[type="checkbox"]:checked + label::before {
  background-color: #f0ad4e;
  border-color: #f0ad4e; }
.checkbox-warning input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-success input[type="checkbox"]:checked + label::before {
  background-color: #5cb85c;
  border-color: #5cb85c; }
.checkbox-success input[type="checkbox"]:checked + label::after {
  color: #fff; }


/* ------------------------------------------------------------------------------------------------------------------------
// RADIO
// ------------------------------------------------------------------------------------------------------------------------*/
.radio {
  padding-left: 20px; }
  .radio label {
    display: inline-block;
    position: relative;
    padding-left: 5px; }
    .radio label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid #cccccc;
      border-radius: 50%;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out;
      transition: border 0.15s ease-in-out; }
    .radio label::after {
      display: inline-block;
      position: absolute;
      content: " ";
      width: 11px;
      height: 11px;
      left: 3px;
      top: 3px;
      margin-left: -20px;
      border-radius: 50%;
      background-color: #555555;
      -webkit-transform: scale(0, 0);
      -ms-transform: scale(0, 0);
      -o-transform: scale(0, 0);
      transform: scale(0, 0);
      -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
  .radio input[type="radio"] {
    opacity: 0; }
    .radio input[type="radio"]:focus + label::before {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
    .radio input[type="radio"]:checked + label::after {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1); }
    .radio input[type="radio"]:disabled + label {
      opacity: 0.65; }
      .radio input[type="radio"]:disabled + label::before {
        cursor: not-allowed; }
  .radio.radio-inline {
    margin-top: 0; }

.radio-primary input[type="radio"] + label::after {
  background-color: @body-bg-dark; }
.radio-primary input[type="radio"]:checked + label::before {
  border-color: @body-bg-dark }
.radio-primary input[type="radio"]:checked + label::after {
  background-color: @body-bg-dark; }

.radio-danger input[type="radio"] + label::after {
  background-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::before {
  border-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::after {
  background-color: #d9534f; }

.radio-info input[type="radio"] + label::after {
  background-color: @color-primary; }
.radio-info input[type="radio"]:checked + label::before {
  border-color: @color-primary; }
.radio-info input[type="radio"]:checked + label::after {
  background-color: @color-primary; }

.radio-warning input[type="radio"] + label::after {
  background-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::before {
  border-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::after {
  background-color: #f0ad4e; }

.radio-success input[type="radio"] + label::after {
  background-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::before {
  border-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::after {
  background-color: #5cb85c; }



/* ------------------------------------------------------------------------------------------------------------------------
// Footer
// ------------------------------------------------------------------------------------------------------------------------*/
.back-to-home-wrap {
	margin: 24px 0 16px;
	text-align: center;
}

.back-to-home-link {
	display: inline-block;
	font-size: @font-small;
	color: fade(@body-bg-dark, 65%);
	text-decoration: none;
	transition: color 0.2s ease;

	&:hover,
	&:focus {
		color: @color-primary;
		text-decoration: none;
	}
}

#footer
{
	min-height: 350px;
	color: @body-bg-dark;
	border-top: 6px solid saturate(@color-primary, 15%);
	padding-bottom: 24px;

	ul
	{
		margin-top: 20px;
		margin-bottom: 30px;

		li {
			font-size: @font-small;
			padding: 2px 0;
			color: @body-bg-dark;
		}

		a {
			color: @body-bg-dark;
			transition: color 0.2s ease;

			&:hover,
			&:focus {
				color: @color-primary;
				text-decoration: none;
			}
		}

		.title {
			font-size: @font-big * 0.8;
			font-family: @font-title;
			color: @body-bg-dark;
			border-bottom: 1px solid #ebebeb;
			margin-bottom: 10px;
			padding-bottom: 8px;
			text-transform: uppercase;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: -1px;
				width: 56px;
				height: 3px;
				background: saturate(@color-primary, 12%);
				border-radius: 999px;
			}

			i.fa {
				color: saturate(@color-primary, 12%);
			}
		}
	}

	.copyright {
		font-size: @font-small;
		color: fade(@body-bg-dark, 55%);
		margin-top: 15px;
		padding-top: 15px;
		border-top: 1px solid #ebebeb;
		line-height: 33px;
	}
}


/* ------------------------------------------------------------------------------------------------------------------------
// Buttons
// ------------------------------------------------------------------------------------------------------------------------*/
.btn {
	font-family: @font-family-sans;
	font-weight: @font-weight-semibold;
	font-size: 13px;
	line-height: 1.4;
	border-radius: 6px;
	text-shadow: none;
	border-width: 1px;
	transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);

	&:focus,
	&:active:focus {
		outline: none;
	}
}

.btn-primary {
	color: @body-bg-dark;
	background-color: @color-primary;
	border-color: @color-primary;

	&:hover,
	&:focus,
	&:active,
	&.active,
	&.active:hover,
	&.active:focus,
	&.active.focus,
	&:active:hover,
	&:active:focus,
	&:active.focus {
		color: @body-bg-dark;
		background-color: darken(@color-primary, 10%);
		border-color: darken(@color-primary, 12%);
		transform: translateY(-1px);
		
	}
}

.btn-info {
	color: #fff;
	background-color: @text-color2;
	border-color: @text-color2;

	&:hover,
	&:focus,
	&:active,
	&.active,
	&.active:hover,
	&.active:focus,
	&.active.focus,
	&:active:hover,
	&:active:focus,
	&:active.focus {
		color: #fff;
		background-color: @text-color2;
		border-color: @text-color2;
	}
}

.btn-outline {
	background-color: transparent;
	color: inherit;
	font-family: @font-family-sans;
	transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary.btn-outline {
	color: @color-primary;
	border-color: @color-primary;

	&:hover,
	&:focus {
		color: @body-bg-dark;
		background-color: @color-primary;
		border-color: @color-primary;
	}
}

.btn-success.btn-outline { color: @color-success; border-color: @color-success; }
.btn-info.btn-outline { color: @text-color2; border-color: @text-color2; }
.btn-warning.btn-outline { color: @color-warning; border-color: @color-warning; }
.btn-danger.btn-outline { color: @color-danger; border-color: @color-danger; }

.btn-success.btn-outline:hover,
.btn-success.btn-outline:focus { color: #fff; background-color: @color-success; }
.btn-info.btn-outline:hover,
.btn-info.btn-outline:focus { color: #fff; background-color: @text-color2; }
.btn-warning.btn-outline:hover,
.btn-warning.btn-outline:focus { color: #fff; background-color: @color-warning; }
.btn-danger.btn-outline:hover,
.btn-danger.btn-outline:focus { color: #fff; background-color: @color-danger; }

.btn-info.disabled.focus, .btn-info.disabled:focus, .btn-info.disabled:hover, .btn-info[disabled].focus,
.btn-info[disabled]:focus, .btn-info[disabled]:hover, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:focus,
 fieldset[disabled] .btn-info:hover  { background-color: @text-color; border-color: @text-color }

.btn-circle {  width: 30px;  height: 30px;  text-align: center;  padding: 6px 0;  font-size: 12px;  line-height: 1.428571429;  border-radius: 15px;}
.btn-circle.btn-lg {  width: 50px;  height: 50px;  padding: 10px 16px;  font-size: 18px;  line-height: 1.33;  border-radius: 25px;}
.btn-circle.btn-xl {  width: 70px;  height: 70px;  padding: 10px 16px;  font-size: 24px;  line-height: 1.33;  border-radius: 35px;}


/* ------------------------------------------------------------------------------------------------------------------------
// PANEL ACCORDION PRODUCT
// ------------------------------------------------------------------------------------------------------------------------*/
.panel-primary{  border-color: #2f2b2b;}
.panel-primary>.panel-heading { color: #FFF; background-color:@body-bg-dark; border-color:darken(@body-bg-dark,5%); font-family:@font-title; }



/* ------------------------------------------------------------------------------------------------------------------------
// SWEET-ALERT
// ------------------------------------------------------------------------------------------------------------------------*/

.sweet-alert
{
	 background-color: #fff; border-bottom:5px solid @text-color2;  padding:15px; border-radius:0px; text-align: center;

	 h2	  {color:@text-color2; font-size:@font-big * 1.3; padding:0; margin:0; padding-bottom:3px; padding-top:10px}
	.lead {color:@text-color; font-size:@font-small * 1.2; padding-bottom:10px}

	.btn-primary {color: #fff; background-color:@body-bg-dark;border-color:darken(@text-color2, 5%) }
}




/* ------------------------------------------------------------------------------------------------------------------------
// Carrousel
// ------------------------------------------------------------------------------------------------------------------------*/
.owl-carousel{ margin-top:10px; padding:0px 15px; background-color:@body-bg-clean}
.owl-theme .owl-dots, .owl-theme .owl-nav {	text-align:center;	-webkit-tap-highlight-color:transparent}
.owl-theme .owl-nav {	margin-top:10px}
.owl-theme .owl-item{ border-left:2px solid @body-bg;  padding:10px 0; padding-left:15px; font-size:@font-small}
.owl-theme .owl-item .item a{ color:@text-color; font-size:@font-small * 1.0; strong{ font-weight:bolder; font-family:@font-title } }

.owl-theme .owl-nav [class*=owl-] { color:#FFF;font-size:14px; margin:5px; padding:6px 9px; background:@body-bg-dark; display:inline-block; cursor:pointer; border-radius:0px; margin-top:-160px;}
.owl-theme .owl-nav [class*=owl-]:hover {background:darken(@color-primary, 5%);color:#FFF;text-decoration:none}
.owl-next{ position:absolute; right:0;}
.owl-prev{ position:absolute; left:0;}

.owl-theme .owl-nav .disabled {	opacity:.5;	cursor:default}
.owl-theme .owl-nav.disabled+.owl-dots { margin-top:10px}
.owl-theme .owl-dots .owl-dot {	display:inline-block;	zoom:1}
.owl-theme .owl-dots .owl-dot span { width:10px; height:10px; margin:5px 7px; background:@body-bg-clean; display:block; -webkit-backface-visibility:visible;ransition:opacity .2s ease; border-radius:30px}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background:#869791}

/* ------------------------------------------------------------------------------------------------------------------------
// Pagination
// ------------------------------------------------------------------------------------------------------------------------*/
.pagination { display: inline-block; padding-left: 0; margin:0px 0; border-radius: 2px}
.pagination>li>a, .pagination>li>span { color:@color-primary}
.pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {    background-color: @color-primary;}




.fixed-table-toolbar .bs-bars, .fixed-table-toolbar .columns, .fixed-table-toolbar .search { position:absolute ;right:35px; top:50px;}

/*Form Wizard*/
.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 20px 0 20px 0; height:130px}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #a3c3ff; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #0144bf; border-radius: 50px; position: absolute; top: 8px; left: 8px; }
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #a3c3ff;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
/*END Form Wizard*/

.cookie-consent-modal {
	.modal-dialog {
		width: 92%;
		max-width: 520px;
		margin: 14vh auto 24px;
	}

	.modal-content {
		border: none;
		border-radius: 12px;
		box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
		overflow: hidden;
	}

	.modal-header {
		border-bottom: none;
		padding: 22px 24px 8px;
		background: #fff;
	}

	.modal-title {
		font-family: @font-title;
		font-size: 20px;
		font-weight: 700;
		color: @body-bg-dark;
		line-height: 1.3;
	}

	.modal-body {
		padding: 8px 24px 4px;
		color: @body-bg-dark;
		font-size: 14px;
		line-height: 1.55;
	}

	.modal-footer {
		border-top: none;
		padding: 16px 24px 22px;
		background: #fff;
	}

	&__lead {
		margin: 0 0 12px;
	}

	&__note {
		margin: 0;
		font-size: 13px;
		color: @text-color;
	}

	.modal-content::before {
		content: '';
		display: block;
		height: 4px;
		background: var(--seg-primary, @color-primary);
	}

	.modal-footer #closeCookie.btn-primary {
		padding: 12px 18px;
		border-radius: 8px;
		font-size: 13px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		background-color: var(--seg-primary, @color-primary);
		border-color: var(--seg-primary, @color-primary);
		color: @body-bg-dark;

		&:hover,
		&:focus {
			background-color: var(--seg-primary-hover, darken(@color-primary, 12%));
			border-color: var(--seg-primary-hover, darken(@color-primary, 12%));
			color: @body-bg-dark;
		}
	}
}

.modal-backdrop.in {
	opacity: 0.55;
}

/* ------------------------------------------------------------------------------------------------------------------------
// Container — largura moderna (Bootstrap 3 padrão: 1170px em telas grandes)
// ------------------------------------------------------------------------------------------------------------------------*/
@media (min-width: 992px) {
	.container {
		width: auto;
		max-width: 1200px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1320px;
	}
}

@media (min-width: 1580px) {
	.container {
		max-width: 1580px;
	}
}

/* ============================================================
// SEARCH HISTORY SUGGESTIONS
// ============================================================ */

.header-search {
	position: relative;
}

.header-search__suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	max-height: 400px;
	overflow-y: auto;
	z-index: 1000;
	margin-top: -1px;
}

.search-suggestions__header {
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
	background-color: #fafafa;
}

.search-suggestions__title {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: #666;
	letter-spacing: 0.05em;
}

.search-suggestions__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.search-suggestions__item {
	border-bottom: 1px solid #f5f5f5;
	
	&:last-child {
		border-bottom: none;
	}
}

.search-suggestions__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	color: #333;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	
	&:hover {
		background-color: fade(@color-primary, 14%);
		color: darken(@color-primary, 22%);
		text-decoration: none;

		.search-suggestions__time {
			color: fade(darken(@color-primary, 18%), 72%);
		}
	}
	
	&:focus {
		outline: none;
		background-color: fade(@color-primary, 18%);
		color: darken(@color-primary, 22%);
		box-shadow: inset 3px 0 0 @color-primary;
	}
}

.search-suggestions__text {
	flex: 1;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search-suggestions__time {
	font-size: 11px;
	color: #999;
	white-space: nowrap;
	flex-shrink: 0;
	transition: color 0.2s ease;
}

.search-suggestions__empty {
	padding: 24px 16px;
	text-align: center;
	font-size: 13px;
	color: #999;
}

.search-suggestions__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px 16px;
	text-align: center;
	font-size: 13px;
	color: #666;
	min-height: 60px;
}

.search-suggestions__loading-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #f0f0f0;
	border-top-color: @color-primary;
	border-radius: 50%;
	animation: spinner-rotate 0.8s linear infinite;
}

.search-suggestions__loading-text {
	font-weight: 500;
}

@keyframes spinner-rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.header-search__suggestions {
		max-height: 300px;
	}
	
	.search-suggestions__link {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.search-suggestions__time {
		display: block;
		margin-top: 4px;
	}
}


@import "personalization.less";


/* mobile nav → mobile.less */// ============================================================
// MOBILE NAV — drawer lateral
// Usa @color-primary do segmento (definido no *.less do segmento)
// ============================================================
@import "heroicons.less";

@_mob-text-color2: #000000;
@_mob-bg-light:    #f5f5f5;
@_mob-nav-width:   300px;
@_mob-nav-z:       1100;

.mobile-nav__toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	border: 1px solid fade(@color-primary, 45%);
	background: fade(@color-primary, 12%);
	cursor: pointer;
	flex-shrink: 0;

	&-bar {
		display: block;
		width: 20px;
		height: 2px;
		background: darken(@color-primary, 18%);
		border-radius: 2px;
		transition: transform .2s ease, opacity .2s ease;
	}
}

.mobile-nav {
	display: none;
	pointer-events: none;
	visibility: hidden;

	&__overlay {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,.45);
		z-index: @_mob-nav-z;
		opacity: 0;
		transition: opacity .25s ease;
		pointer-events: none;
	}

	&__panel {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: @_mob-nav-width;
		max-width: 85vw;
		background: #fff;
		z-index: (@_mob-nav-z + 1);
		transform: translateX(-100%);
		transition: transform .28s cubic-bezier(.4,0,.2,1);
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-shadow: 4px 0 24px rgba(0,0,0,.12);
		border-top: 4px solid var(--seg-primary, @color-primary);
	}

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border-bottom: 1px solid fade(@color-primary, 22%);
		background: fade(@color-primary, 10%);
		flex-shrink: 0;

		.logo-rolemak {
			max-width: 160px;
			max-height: 48px;
		}
	}

	&__close {
		background: none;
		border: none;
		cursor: pointer;
		padding: 4px;
		color: @_mob-text-color2;
		svg { width: 22px; height: 22px; }
	}

	&__user {
		padding: 16px;
		border-bottom: 1px solid fade(@color-primary, 18%);
		background: fade(@color-primary, 7%);
		flex-shrink: 0;
	}

	&__greeting {
		font-size: 13px;
		margin-bottom: 0;
	}

	&__user-actions {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	&__user-link {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		color: @_mob-text-color2;
		padding: 4px 0;
		svg { width: 16px; height: 16px; color: var(--seg-primary, @color-primary); }
		&:hover { color: var(--seg-primary-hover, darken(@color-primary, 12%)); }
	}

	&__languages {
		display: flex;
		gap: 8px;
		padding: 4px 0;
	}

	&__register-link {
		display: block;
		margin-top: 10px;
		font-size: 12px;
		color: @_mob-text-color2;
		text-align: center;
	}

	&__segment {
		flex: 1;
		padding: 4px 0 12px;
	}

	&__links {
		flex: 1;
		padding: 8px 0;
	}

	&__link {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 13px 16px;
		font-size: 13px;
		font-weight: 600;
		color: @_mob-text-color2;
		border-bottom: 1px solid #f5f5f5;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		svg { width: 18px; height: 18px; color: var(--seg-primary, @color-primary); flex-shrink: 0; }
		&:hover {
			background: fade(@color-primary, 12%);
			color: darken(@color-primary, 22%);
			text-decoration: none;
		}
	}

	&__accordion {
		border-bottom: 1px solid fade(@color-primary, 12%);
	}

	&__accordion-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		width: 100%;
		padding: 13px 16px;
		border: none;
		background: none;
		font-size: 13px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: darken(@color-primary, 22%);
		text-align: left;
		cursor: pointer;

		.mobile-nav__accordion-label {
			display: flex;
			align-items: center;
			gap: 8px;
			flex: 1;
			min-width: 0;

			svg {
				width: 16px;
				height: 16px;
				color: var(--seg-primary, @color-primary);
				flex-shrink: 0;
			}
		}

		> svg,
		> .hi svg {
			width: 16px;
			height: 16px;
			color: var(--seg-primary, @color-primary);
			flex-shrink: 0;
			transition: transform .2s ease;
		}

		&:hover {
			background: fade(@color-primary, 12%);
			color: darken(@color-primary, 28%);
		}

		&:not(.collapsed) {
			background: fade(@color-primary, 14%);
			color: darken(@color-primary, 24%);
		}

		&:not(.collapsed) > svg,
		&:not(.collapsed) > .hi svg {
			transform: rotate(180deg);
		}
	}

	&__accordion-panel {
		background: fade(@color-primary, 6%);
		max-height: 50vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	&__list {
		margin: 0;
		padding: 4px 0 8px;

		.menu-categories-list__item {
			list-style: none;
		}

		.menu-categories-list__link {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 8px 16px;
			font-size: 13px;
			font-weight: 500;
			text-transform: none;
			letter-spacing: 0;
			color: @_mob-text-color2;
			text-decoration: none;
			border-left: 3px solid transparent;
			transition: background-color 0.12s ease, border-left-color 0.12s ease, color 0.12s ease;

			&:hover,
			&:focus {
				text-decoration: none;
				color: darken(@color-primary, 18%);
				font-weight: 600;
				background: fade(@color-primary, 10%);
				border-left-color: var(--seg-primary, @color-primary);
			}
		}

		.menu-categories-list__icon {
			flex: 0 0 20px;
			width: 20px;
			height: 20px;
			object-fit: contain;
			filter: url(#menu-icon-segment);
			transition: filter 0.12s ease;

			&.is-hidden {
				visibility: hidden;
			}
		}

		.menu-categories-list__label {
			flex: 1 1 auto;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.menu-categories-list__count {
			flex: 0 0 auto;
			font-size: 11px;
			font-weight: 400;
			color: #9ca3af;
		}

		.menu-categories-list__link:hover .menu-categories-list__count,
		.menu-categories-list__link:focus .menu-categories-list__count {
			color: darken(@color-primary, 6%);
			font-weight: 600;
		}
	}

	&__view-all {
		display: block;
		padding: 8px 16px 12px;
		font-size: 12px;
		font-weight: 600;
		color: var(--seg-primary-hover, darken(@color-primary, 12%));
		text-decoration: none;
		&:hover { text-decoration: underline; }
	}

	&__plain-list {
		list-style: none;
		margin: 0;
		padding: 4px 0 8px;
	}

	&__plain-link {
		display: block;
		padding: 8px 16px;
		font-size: 13px;
		color: @_mob-text-color2;
		text-decoration: none;
		&:hover {
			color: var(--seg-primary-hover, darken(@color-primary, 12%));
			text-decoration: none;
		}

		&--logout {
			color: darken(@color-primary, 28%);
		}
	}

	&.is-open {
		pointer-events: auto;
		visibility: visible;

		.mobile-nav__overlay {
			opacity: 1;
			pointer-events: auto;
		}

		.mobile-nav__panel {
			transform: translateX(0);
		}
	}
}

body.mobile-nav-open {
	overflow: hidden;
}

@media (max-width: 991px) {
	#header.container {
		position: sticky;
		top: 0;
		z-index: 210;
		background-color: @body-bg;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	#menu {
		display: none !important;
	}

	.mobile-nav__toggle {
		display: flex;
	}

	.mobile-nav {
		display: block;
	}

	#header.container {
		padding-left: 16px;
		padding-right: 16px;
	}

	#header-top .container {
		padding-left: 16px;
		padding-right: 16px;
	}

	body > .container {
		padding-left: 16px;
		padding-right: 16px;
	}

	#header {
		padding: 12px 0;
	}

	#header .container-flex {
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 10px;
	}

	#header .h-left {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
	}

	#header .gap-actions,
	#header .header-actions,
	#header .h-right {
		order: 2;
		flex: 0 0 auto;
		margin-left: auto;
	}

	#header .header-mobile-nav-toggle {
		order: 3;
		flex: 0 0 auto;
	}

	#header .h-center {
		order: 4;
		flex: 1 1 100%;
		width: 100%;
		padding: 0 !important;
	}

	#header .header-main-row {
		flex-wrap: nowrap;
		gap: 8px;
		margin-top: 0;
	}

	#header .header-main-row .search {
		flex: 1 1 auto;
		min-width: 0;
	}

	#header .user {
		display: none;
	}

	#header .header-guest-action__label {
		display: none;
	}

	#header .header-profile-toggle__text {
		display: none;
	}

	#header .header-profile-toggle {
		min-width: 0;
		max-width: none;
	}

	#header .header-actions-divider {
		display: none;
	}

	#header .header-guest-menu {
		gap: 6px;
		align-items: center;
	}

	#header .header-guest-action {
		min-width: auto;
	}

	#header .search {
		margin-top: 0;
	}

	#header-top {
		font-size: 10px;
		height: auto;
		min-height: 20px;
	}

	body {
		@body-gradient-solid-end-mobile: 152px;
		@body-gradient-fade-end-mobile: 300px;

		background-image: linear-gradient(
			to bottom,
			@color-primary 0,
			@color-primary @body-gradient-solid-end-mobile,
			fade(@color-primary, 38%) (@body-gradient-solid-end-mobile + 55px),
			fade(@color-primary, 12%) (@body-gradient-solid-end-mobile + 100px),
			fade(@color-primary, 0%) @body-gradient-fade-end-mobile
		);
		background-size: 100% @body-gradient-fade-end-mobile;
	}
}

body.solr-filters-open {
	overflow: hidden;

	.solr-filters-overlay {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	#wrap-search .solr-results__body .menu-search {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
	}
}