/* kicap-legacy-base.scss — Shared legacy styles outside the site header.
   Header, topbar, desktop navigation, mobile drawer, search overlay and mini-cart
   are owned exclusively by kicap-header.css. Do not add header rules here. */
@mixin transform($transforms) {
	transform: $transforms;
}
@mixin scale($scale) {
	@include transform(scale($scale));
} 
@mixin border-radius($radius) {
	border-radius: $radius;
}
$gutter: 30px;
$main-color: {{ settings.color_main }};
$border-color: {{ settings.color_borders }};
$font-base:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
$font-accent:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
$baseFontSize: {{ settings.type_base_size }};
$text-color: {{ settings.color_body_text }};
$footer-bg-color: {{ settings.color_body_text }};
$disabledGrey: #ddd;
$disabledBorder: #ddd;

:root {
	--subColor1: {{settings.subcolor1}};
	--subColor2: {{settings.subcolor2}};
}
@function em($pixels, $context: $baseFontSize) {
	@if (unitless($pixels)) {
		$pixels: $pixels * 1px;
	}
	@if (unitless($context)) {
		$context: $context * 1px;
	}
	@return $pixels / $context * 1em;
}
.title-head {
	font-size: em(20px);
	color: $text-color;	
	text-decoration: none;
	a{
		color: $text-color;
		&:hover{
			color: $main-color;
		}
	}
}
.product-price {
	color: #323c3f;
	font-size: em(20px);
	line-height: 24px;
	display: block;
	font-weight: 700; 
}
.products-view-list {
	.product-box {
		.product-thumbnail {
			text-align: center;
			margin-bottom: 0;
			width: calc(100% / 3);
			float: left;
			@media(max-width: 480px){
				width: 100%;
				float:none;
				margin-bottom: 15px;
			}
		}
		.product-info {
			text-align: left;
			margin-left: 30px;
			float: left;
			width: calc(100% / 3 * 2 - 30px);
			background: transparent;
			border-top: none;
			@media(max-width: 480px){
				float: none;
				margin-left: 0;
				width: 100%;
			}
		}
	}

}
.pagination {
	margin-bottom: 20px;
	.page-link {
		float: left;
		margin: 0 2.5px;
		width: 28px;
		background: #1c1c1c;
		text-align: center;
		height: 28px;
		font-size: 14px;
		line-height:24px;		
		color: #fff;
		border: 1px solid #1c1c1c;
		text-decoration: none;
		border-radius: 3px !important;
		padding: 0;
		&:hover {
			background-color: $main-color;
			border-color: $main-color;
			color: #fff;
		}
		@media(max-width: 480px){
			width: 24px;
			height: 24px;
			line-height: 20px;
			margin: 0 2px;
			font-size: 12px;
		}
	}
	.page-item {
		&.disabled .page-link {
			border-color: #ddd;
			background: transparent;
			color: #555555;
		}
		&.active .page-link {
			background-color: $main-color;
			border-color: $main-color;
			color: #fff;
		}
	}
}
$footer-bg: {{settings.color_footer_bg}};
$footer-title: {{settings.color_footer_title}};
$footer-link: {{settings.color_footer_link}};
$footer-border: {{settings.color_footer_border}};
$footer-icon: {{settings.color_footer_icon}};
$footer-subcribe: {{settings.color_footer_sub_info}};
$footer-copyright: {{settings.color_footer_copyright}};
footer{	
	position: relative;
	overflow: hidden;
	.footer-info-widget{
		h3{
			font-size: em(18px);
			color: $footer-title;
			text-transform:uppercase;   
			margin-bottom: 20px;
		}
		p{
			color: $footer-subcribe;
			font-size: em(16);
			&.hotline{
				font-size: em(28px);
				color: $footer-icon;        
				font-weight: 700;
				margin-bottom: 15px;
				margin-top: -8px;
				a{
					color: $footer-icon; 
					&:hover{
						color: $main-color;
					}
				}
			}
		}
		form{
			position: relative;
			input{
				height: 50px;
				@include border-radius(5px);
				font-size: em(16px);
			}
			button{
				position: absolute;
				right: 0;
				background: transparent;
				border: none;
				line-height: 50px;
				font-size: em(30px);
				color: #a6a6ad;
				padding-right: 10px;
			}
		}
	}
	.site-footer{
		h3, h4{
			position: relative;
			color: $footer-title;
			margin: 0;
			padding: 13px 0;    
			font-size: em(18px);

		}
	}

	.list-menu{		
		margin-bottom: 15px;
		line-height: em(24px);
		a{
			color: #fff;     
			&:hover{
				color:$main-color;
			}
		}
		li{
			color: #fff;
		}
	} 
	.copyright {
		text-align: center;
		color: #fff;
		font-size:em(14px);
		position: relative;
		font-size: 12px;
		a{      
			color: #fff;
			&:hover, &:focus{
				color: $main-color;
			}
		}
		b{
			font-weight: normal;
		}
	}
	.social-icons li{
		margin-right: 10px;
	}
	.back-to-top {
		position: absolute;
		right: 0px;
		bottom: 60px;
		font-size: 12px;
		cursor: pointer;
		height: 35px;
		color: #1c1c1c;
		top: auto !important;
		transform: rotate(-90deg);
		opacity: 0.7;
		&:hover{
			color: $main-color;
			opacity: 0.9;
		}
		&.show {
			position: fixed;
			right: -30px;
			bottom: 60px;
			z-index: 999;
		}
	}
}
.product-tab{
	.tab-link{
		margin-right: 20px;
		h3{
			margin: 10px 0;
			font-size:em(16px);
		}
		span{

			font-size:em(16px);
		}
		&.current{
			h3{
				color: $main-color;
			}
		}
	}
	.tab-content.current{
		min-height: 1px;
		@media(max-width: 480px){
			min-height: 20px;
		}
	}
}
.view-mode span{
	font-size: 0;
}

#article-comments{
	margin-top: 30px;
	.article-comment {
		margin-bottom: 10px;
	}
	.article-comment-user-image {
		margin: 0;
		float: left;
		width: 50px;
		margin-right: 12px;
	}
	.article-comment-user-comment {
		padding-left: 63px;
		font-size: em(14px);


	}
	.user-name-comment {
		margin: 0;
		color: $main-color;
		font-size: 15px;
		line-height: 1;
	}
	.article-comment-date-bull {
		padding: 5px 0;
		display: block;
		color: #acacac;
		font-size: 12px;
	}
}
textarea{
	&.form-control{
		border: 1px solid #e1e1e1;
	}
}
.cart-item{
	background: #fff;
	padding: 20px 10px;
	border-bottom: 1px solid $border-color;

}
.cart{
	.total-price{
		background: #fff;
		padding: 25px;
		line-height: 45px;
	}
}
#customer_register{
	margin-bottom: 20px;
}
#customer_login,
#recover_customer_password{
	margin-bottom: 0;
}
.checkbox.style {
	input {
		margin: 0 !important;
		display: none;
	}
	label {
		display: inline-block;
		vertical-align: middle;
		font-weight: normal;
		text-transform: none;   
		position: relative;
		padding-left: 55px;
		line-height: 50px;
		&:before {
			display: block;
			width: 35px;
			height: 35px;
			background: #fff;
			border: 1px solid #d4d4d4;
			border-radius: 5px;
			content: "";
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	input:checked + label:after {
		content: "";
		width: 8px;
		height: 15px;
		border: solid $main-color;
		border-width: 0 2px 2px 0;
		position: absolute;
		top: 50%;
		left: 11px;
		transform: translateY(-60%) rotate(45deg);
	}
}
.block-account{
	h3{
		margin-top: 0;
	}
}
.block-content.form-signup{
	background: #fff;
	padding-top: 10px;
	p{
		padding: 0;
		display: table;
		i{
			display: table-cell;
			width: 20px;
			text-align: center;
			color: $main-color;
		}
		a{
			color: $main-color;
		}
	}
}
.address-title{
	padding-left: 10px;
	margin-bottom: 15px;
	border-radius: 0!important;
	font-weight: 300;
	button{
		background: none;
		border: none;
		font-size: 0;
		width: 50px;
		height: 55px;
		&.btn-edit{
			background-image:url({{ 'btn-edit.png'|asset_url}});
			background-repeat: no-repeat;
			background-position: center;
		}
		&.btn-delete{
			background-image:url({{ 'btn-delete.png'|asset_url}});
			background-repeat: no-repeat;
			background-position: center;
		}
	}
}
.address-group {
	background: #fff;
	padding-bottom: 5px;
	margin-bottom: 15px;
	p{		
		color: #595959;
		label{
			float: left;
			font-weight: 300;
		}		
	}
}
#order_payment,

.aside-item{
	&.collection-category{
		.nav-item {
			position: relative;
			clear: left;
			font-size: em(15px);
			a{
				font-size: em(15px);
			}
			.dropdown-menu{
				position: static;
				width: 100%;
				border: 0;
				padding-left: 15px;
				box-shadow: none;
			}
			&.active{
				>a{
					color: $main-color;
				}
				>.dropdown-menu{
					display: block;
				}
			}
		}
		.nav>li>a {
			padding: 5px 15px;
		}
	}
	.nav>li>a:focus, .nav>li>a:hover{
		background: none;
	}
}
#start{
	width: 100px;
	float: left;
	@media(max-width: 1024px){
		width: 80px;
	}
	input{
		text-align: center;
		border-radius: 0px;
		border: 1px solid #e1e1e1;
		box-shadow: none;
		outline: none;
		box-shadow: none;
		-webkit-appearance: none;
		-moz-appearance: none;
	}
}
#stop{
	width: 100px;
	float: left;
	margin-left: 30px;
	text-align: center;	
	position: relative;
	@media(max-width: 1024px){
		width: 80px;
	}
	input{
		text-align: center;
		border-radius: 0px;
		border: 1px solid #e1e1e1;
		box-shadow: none;
		outline: none;
		box-shadow: none;
		-webkit-appearance: none;
		-moz-appearance: none;
	}
	&:before {
		content: "-";
		position: absolute;
		left: -17px;
		font-size: 17px;
	}
}
button.btn.btn-default.btn-search {
	display: none;
}
$sale : {{settings.color_sale}};
$date : {{settings.color_date}};
$btn2 : {{settings.color_btn2}};
$btn-viewdesktop : {{settings.color_footer_desktop}};
$btt : {{settings.color_footer_btt}};
$hotline : {{settings.color_footer_hotline}};

footer .footer-info-widget p.hotline a{
	color: $hotline;
}

@media(max-width: 767px){
	.section_tab_product .tabs-title li {
		width: 87px;
	}
}
@media(max-width: 543px){
	section.sidebar.left-content.col-lg-12{
		padding: 0;
	}
}
@media(max-width: 420px){
	.col-xs-6.footer-header {
		width: 100%;
	}
}
@media(max-width: 430px){
	.collection {
		p.title-head-info {
			position: static;
		}
		h1.title-head {
			margin-bottom: 5px;
		}
	}
}
@media(max-width:480px){
	.product-tab .tab-link {
		margin-right: 10px;
	}
}
@media(max-width:375px){
	.sodiachi{
		.btn.btn-50{
			width: 100%;
			margin-bottom: 10px;
		}
	}
}

@media(max-width: 768px){
	.quick-view{
		display: none!important;
	}
}

@media(max-width: 767px){
	.section_tab_product .tabs-title li {
		width: 87px;
	}
}
@media(max-width: 543px){
	section.sidebar.left-content.col-lg-12{
		padding: 0;
	}
}
@media(max-width: 420px){
	.col-xs-6.footer-header {
		width: 100%;
	}
}
@media(max-width: 430px){
	.collection {
		p.title-head-info {
			position: static;
		}
		h1.title-head {
			margin-bottom: 5px;
		}
	}
}
@media(max-width:480px){
	.product-tab .tab-link {
		margin-right: 10px;
	}
}
@media(max-width:375px){
	.sodiachi{
		.btn.btn-50{
			width: 100%;
			margin-bottom: 10px;
		}
	}
}
@media(max-width: 768px){
	.quick-view{
		display: none!important;
	}
}
@media(max-width: 543px){
	section.sidebar.left-content.col-lg-12{
		padding: 0;
	}
}
@media(max-width: 420px){
	.col-xs-6.footer-header {
		width: 100%;
	}
}
@media(max-width: 430px){
	.collection {
		p.title-head-info {
			position: static;
		}
		h1.title-head {
			margin-bottom: 5px;
		}
	}
}
@media(max-width:480px){
	.product-tab .tab-link {
		margin-right: 10px;
	}
}
@media(max-width:375px){
	.sodiachi{
		.btn.btn-50{
			width: 100%;
			margin-bottom: 10px;
		}
	}
}

@media(max-width: 768px){
	.quick-view{
		display: none!important;
	}
}

@media(max-width: 767px){
	.section_tab_product .tabs-title li {
		width: 87px;
	}
}
@media(max-width: 543px){
	section.sidebar.left-content.col-lg-12{
		padding: 0;
	}
}
@media(max-width: 420px){
	.col-xs-6.footer-header {
		width: 100%;
	}
}
@media(max-width: 543px){
	.product-box .product-thumbnail>a{
		max-height: 1000px;
		height: auto;
	}
}
@media(max-width: 430px){
	.collection {
		p.title-head-info {
			position: static;
		}
		h1.title-head {
			margin-bottom: 5px;
		}
	}
}
@media(max-width:480px){
	.product-tab .tab-link {
		margin-right: 10px;
	}
}
@mixin clearfix() {
	&:after {
		content: "";
		display: table;
		clear: both; }
	*zoom: 1;
}
@mixin transition($args...) {
	transition: $args;
}
@mixin box-sizing($box-sizing: border-box) {
	box-sizing: #{$box-sizing};
}
$btn-main:{{ settings.color_btnmain }};
$link-color: #0657a3;
*, input, :before, :after {
	@include box-sizing();
}
html{
	overflow-x: hidden;
}
html, body {
	padding: 0;
	margin: 0;  
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}
audio, canvas, progress, video {
	display: inline-block;
	vertical-align: baseline;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"]{
	border: 1px solid #e9e9e9;
	color: #1c1c1c;
	margin: 0 0 19px;
	min-height: 40px;
	padding: 0 20px;
}
a{
	color: $link-color;
	&:hover{
		color: $main-color;
	}
}
.remove{
	color: #999;
	font-size: em(14px);
	&:hover{
		color: $main-color;
	}
}
.dropdown-menu>li>a{
	white-space: inherit;
}
.dropdown-menu{
	box-shadow: none;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
	background: none;
}
body,
input,
textarea,
button,
select {	
	line-height: 1.7;
	color: $text-color;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	letter-spacing: 0.25px;	
}
body{
	font-size: $baseFontSize;
	color: $text-color;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.4;
	a {
		text-decoration: none;
		font-weight: inherit;
	}
}
a{
	@include transition(all 150ms ease-in-out); 
	&:focus{
		outline: none;
	}
}
h1 {
	font-size: em(36px); 
}

h2 {
	font-size: em(28px);
}

h3 {
	font-size: em(24px);
}

h4 {
	font-size: em(18px);
}

h5 {
	font-size: em(16px);
}

h6 {
	font-size: em(16px);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
	color: #1c1c1c;
	letter-spacing: .01em;

}
.h1 { @extend h1; }
.h2 { @extend h2; }
.h3 { @extend h3; }
.h4 { @extend h4; }
.h5 { @extend h5; }
.h6 { @extend h6; }
p {
	margin: 0 0 ($gutter / 2) 0;
	img {
		margin: 0;
	}
}
em {
	font-style: italic;
}
b, strong {
	font-weight: bold;
}
small {
	font-size: 0.9em;
}
sup, sub {
	position: relative;
	font-size: 60%;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.5em;
}
blockquote {
	font-size: 1.125em;
	line-height: 1.45;
	font-style: italic;
	margin: 0 0 $gutter;
	padding: ($gutter / 2) $gutter;
	border-left: 1px solid $border-color;
	p {
		margin-bottom: 0;
		& + cite {
			margin-top: $gutter / 2;
		}
	}
	cite {
		display: block;
		font-size: 0.75em;
		&:before {
			content: "\2014 \0020";
		}
	}
}
code, pre {
	background-color: #faf7f5;
	font-family: Consolas,monospace;
	font-size: 1em;
	border: 0 none;
	padding: 0 2px;
	color: #51ab62;
}
pre {
	overflow: auto;
	padding: $gutter / 2;
	margin: 0 0 $gutter;
}
ul, ol {
	margin: 0;
	padding: 0;
}
ul { list-style: none inside; }
ol { list-style: decimal inside; }
ul.square { list-style: square inside; }
ul.disc { list-style: disc inside; }
ol.alpha { list-style: lower-alpha inside; }
.inline-list li {
	display: inline-block;
	margin-bottom: 0;
}
table {
	width: 100%;
	margin-bottom: 1em;
	border-collapse: collapse;
	border-spacing: 0;
}
.table-wrap {
	max-width: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
th {
	font-weight: bold;
}
th, td {
	text-align: left;
	padding: $gutter / 2;
	border: 1px solid $border-color;  
	color: #1c1c1c;
}
a,
.text-link {
	color: $link-color;
	text-decoration: none;
	background: transparent;
	&:hover,
	&:focus {
	}
}
button {
	overflow: visible;
}
button[disabled],
html input[disabled] {
	cursor: default;
}
img {
	border: 0 none;
	max-width: 100%;
	height: auto; 
}
svg:not(:root) {
	overflow: hidden;
}
.video-wrapper {
	position: relative;
	overflow: hidden;
	max-width: 100%;
	padding-bottom: 56.25%;
	height: auto;
	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
.table-wrapper {
	max-width: 100%;
	overflow: auto;
}
form {
	margin-bottom: $gutter;
	a{
		color: $link-color;
	}
}
input,
textarea,
button,
select {
	font-size: 1em;
	&:focus{
		outline: none;
	}
}
button,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="tel"],
input[type="submit"],
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
}
input,
textarea,
select,
fieldset {
	border-radius: 0; 
	max-width: 100%;
	&.input-full {
		width: 100%;
	}
}
fieldset {
	border: 0px solid $border-color;
	padding: $gutter / 2;
}
legend {
	border: 0;
	padding: 0;
}
optgroup {
	font-weight: bold;
}
input {
	display: inline-block;
	width: auto;
}
button,
input[type="submit"] {
	cursor: pointer;
}
input[type="submit"] {
	@extend .btn;
}
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="tel"],
textarea,
select {
	border: 1px solid $border-color;
	padding: 0 20px;
	width: 100%;
	max-width: 100%;
	display: block;
	&:focus {
		border: 1px solid darken($border-color, 10%);
	}
	&[disabled],
	&.disabled {
		cursor: default;
		background-color: $disabledGrey;
		border-color: $disabledBorder;
	}
}
textarea {
	min-height: 100px;
	padding-top: 6px;
	padding-bottom: 6px;
}
input[type="checkbox"],
input[type="radio"] {
	display: inline;
	margin: 0;
	padding: 0;
}
select:not(.kicap-select) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-position: right center;
	background: {
		image: url('{{ "ico-selects.png" | asset_url }}');
			repeat: no-repeat;
			position: right 10px center;
			color: #fff;
			}
	padding-right: 28px;
	text-indent: 0.01px;
	text-overflow: '';
	cursor: pointer;
	.ie9 &,
	.lt-ie9 & {
		padding-right: 10px;
		background-image: none;
	}
}
option {
	color: #000;
	background-color: #fff;
}
select::-ms-expand {
	display: none;
}
label,
legend {
	display: block;
	margin-bottom: 2px;
	&.inline {
		display: inline;
	}
}
input[type="checkbox"] + label,
input[type="radio"] + label {
	font-weight: normal;
}
label[for] {
	cursor: pointer;
}
.label-hint {
	color: #999;
}
form.form-horizontal,
.form-horizontal {
	margin-bottom: 0;
	input[type="text"],
	input[type="search"],
	input[type="password"],
	input[type="email"],
	input[type="file"],
	input[type="number"],
	input[type="tel"],
	textarea,
	select,
	label {
		display: inline-block;
		margin-bottom: 0;
		width: auto;
	}
}
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="tel"],
textarea {
	&.error {
		border-color: red;    
		color: red;
	}
}
label.error {
	color: red;
}
.input-group {
	position: relative;
	display: table;
	border-collapse: separate;
	.input-group-field:first-child,
	.input-group-btn:first-child,
	.input-group-btn:first-child > .btn,
	input[type="hidden"]:first-child + .input-group-field,
	input[type="hidden"]:first-child + .input-group-btn > .btn {
		border-radius: 0;
	}
	.input-group-field:last-child,
	.input-group-btn:last-child > .btn {
		border-radius: 0;
	}
	input {
		&::-moz-focus-inner {
			border: 0;
			padding: 0;
			margin-top: -1px;
			margin-bottom: -1px;
		}
	}
}
.input-group-field,
.input-group-btn {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
}
.input-group .btn,
.input-group .input-group-field {
	height: 40px;
}
.input-group .input-group-field {
	width: 100%;
	margin-bottom: 0;
}
.input-group-btn {
	position: relative;
	white-space: nowrap;
	width: 1%;
	padding: 0;
}

.form-group{
	margin: 0;
	padding: 0 0 8px;
	border: 0;
	.form-control {
		display: block;
		width: 100%;
		min-height: 40px;
		padding: .375rem .75rem;
		font-size: 1em;
		line-height: 1.5;
		color: #55595c;
		background-color: #fff;
		background-image: none;  
		margin: 0;
	}
	input, select{
		height: 40px;
	}
}
.rte {
	h1, h2, h3, h4, h5, h6 {
		margin-top: 10px;
		font-weight: 500;
		&:first-child {
			margin-top: 0;
		}
		@media(max-width: 767px){
			font-size: 18px;
		}
	}
	h5,
	.h5 {
		text-transform: uppercase;
	}
	> div {
		margin-bottom: $gutter / 2;
	}
	ul, ol {
	}
	ul {
		@extend ul.disc;
		ul {
			list-style: circle outside;
			ul {
				@extend ul.square;
			}
		}
	}
	li {
		margin-bottom: 0.4em;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	table {
		table-layout: fixed;
	}
}
/* Bootstrap owns the legacy clearfix contract. Do not compile a second copy
   here: migrated Grid/Flex containers must remove the class in their markup. */
.clearboth{
	clear: both;
}
.no-background{
	background: none !important;
}
svg path,
svg rect{

}
.flexbox, .awe-popup {
	display: flex;
	align-items: center;
}
.list-inline{
	@include clearfix();
	li{
		float: left;
		margin: 0;
	}
}
.d-list{
	> div{
		position: relative;
		margin-right: 15px;
		&:before{
			content:"";
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			width: 1px;
			height: 13px;
			margin: auto;
			z-index: 9;
			background: $border-color;
		}
		&:first-child{
			margin: 0;
			&:before{
				display: none;
			}
		}
	}
}
.a-center{
	text-align: center !important
}
.a-left{
	text-align: left !important
}
.a-right{
	text-align: right !important
}
.f-left{
	float: left!important;
}
.f-right{
	float: right!important;
}
.f-none{
	float: none!important;
}
.inline{
	display: inline!important;
}
.block{
	display: block!important;
}
.inline-block{
	display: inline-block!important;
}
.flexbox{
	display: flex;
	overflow: hidden;
	> div{
		flex: 1;
	}
}
.background-none{
	background: none !important;
}
.no-margin{
	margin: 0 !important;
}
.no-padding{
	padding: 0 !important;
}
.no-border{
	border: none!important;
}
.ov-h{
	overflow: hidden !important;
}
.relative{
	position: relative !important;
}
.absolute{
	position: absolute !important;
}
@for $i from 0 through 20 {
	$name: $i*5;
	$size: #{$name}px;
	.margin-#{$name} {
		margin: $size !important;
	}

	.margin-vertical-#{$name} {
		margin-top: $size !important;
		margin-bottom: $size !important;
	}

	.margin-horizontal-#{$name} {
		margin-left: $size !important;
		margin-right: $size !important;
	}

	.margin-top-#{$name} {
		margin-top: #{$size} !important;
	}

	.margin-bottom-#{$name} {
		margin-bottom: #{$size} !important;
	}

	.margin-left-#{$name} {
		margin-left: #{$size} !important;
	}

	.margin-right-#{$name} {
		margin-right: #{$size} !important;
	}
	.padding-#{$name} {
		padding: $size !important;
	}

	.padding-vertical-#{$name} {
		padding-top: $size !important;
		padding-bottom: $size !important;
	}

	.padding-horizontal-#{$name} {
		padding-left: $size !important;
		padding-right: $size !important;
	}

	.padding-top-#{$name} {
		padding-top: #{$size} !important;
	}

	.padding-bottom-#{$name} {
		padding-bottom: #{$size} !important;
	}

	.padding-left-#{$name} {
		padding-left: #{$size} !important;
	}

	.padding-right-#{$name} {
		padding-right: #{$size} !important;
	}
}
.btn {
	display: inline-block;
	height: 40px;
	line-height: 39px;
	padding: 0 20px;  
	text-align: center;
	white-space: nowrap;
	outline: none!important;
	cursor: pointer;
	border: none;
	font-weight: 400;
	border-radius: 0;
	letter-spacing: 0;
	@include transition(background-color 0.1s ease-in);  
	@include border-radius(0);
	&[disabled],
	&.disabled {
		cursor: default;
		background-color: $border-color;
	}
	&.btn-primary{
		background: $btn-main;
		color: #fff;
		&:hover{
			background: lighten($btn-main, 5%)
		}
	}
	&.btn-circle{
		border-radius: 50%;				
		padding: 0;		
	}
	&.btn-large{
		height: 50px;
		line-height: 50px;
		padding: 0 74px;
	}
	&.btn-small{
		height: 34px;
		line-height: 34px;
		padding: 0 32px;
		font-size: em(12px);
	}
	&.btn-dark{
		background: #2a2a2a;
		color: #fff;
	}
	&.btn-white{
		background: #fff;
		color: $text-color;
		border: 1px solid $border-color;
		font-weight: 400;
		&:hover{
			background: lighten($main-color, 5%);
			color: #fff;
		}
	}
	&.btn-gray{
		background:#9e9e9e;
		color: #fff;
		&:hover{
			background: $main-color;
		}
		a{
			color: #fff;
		}
	}
	&.btn-full{
		display:block;
		width: 100%;
	}

}
.btn-link{
	line-height: 40px;
	color: $main-color;
	&:hover{
		text-decoration: underline;
	}
}
.ajax-load {
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
	width: 100px;
	height: 100px;
	line-height: 100px;
	opacity: 0;
	visibility: hidden;
	&.active {
		opacity: 1;
		visibility: visible;
		z-index: 9999;
	}
}
.awe-popup {
	position: fixed;
	z-index: 9999;
	top: 0;
	height: 0;
	width: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transition: all 200ms ease-in-out;
	.overlay {
		background-color: rgba(33, 33, 33, 0.8);
		color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0 !important;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 0;
		height: 0;
	}
	.content {
		position: relative;
		max-width: 1140px;
		min-width: 1140px;
		padding: 25px 28px;
		max-height: 0;
		text-align: left;
		opacity: 0;
		margin: 0 auto;
		background: transparent;
		overflow: hidden;
		transition: all 300ms ease-in-out;
		position: relative;
		padding: 25px 28px;
		max-height: 0;
		text-align: left;
		opacity: 0;
		margin: 0 auto;
		background: #fff;
	}
	&.active {
		visibility: visible;
		opacity: 1;
		top: 0 !important;
		height: auto;
		width: auto;
		.content {
			max-height: calc(100% - 60px);
			opacity: 1;
			background: transparent;
			padding: 0;
			.info{
				background: #fff;
				min-width: 500px;
			}

		}
		.overlay {
			width: 100%;
			height: 100%;
		}
	}
}
.close-window {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 25px;
	height: 25px;
	cursor: pointer;
	z-index: 8040;
	color: #fff;
	text-align: center; 
	line-height: 25px;
	border-radius: 50%;
}
.awe-popup {
	&.loading {
		z-index: 9998;
		.loader {
			left: 50%;
			position: fixed;
			top: 50%;
			transform: translateX(-50%);
			transition: all 300ms ease-in-out;
		}
	}
	&.loaded-content .loader {
		display: none;
	}
}
/* Old .addcart-popup / .product-popup "add to cart success" modal (template-popup.bwt)
   removed 2026-07-19: no JS ever shows it (awe_showPopup only ever targets '.loading').
   The live add-to-cart popup is #popup-cart / #popup-cart-desktop, styled in kicap-product.css. */

@media (max-width: 1199px) {
	.awe-popup .content {
		max-width: 700px;
		min-width: auto;
	}
}
.swatch {
	margin: 1em 0;
	.header {
		margin: 0.1em 0;
		text-align: left;
		float: left;
		min-width: 100px;
		font-weight: 700;
	}
	input {
		display: none;
	}
}
.swatch label {
	float: left;
	min-width: 35px !important;
	height: 35px !important;
	margin: 0;
	border: 1px solid #f5f5f5;
	background-color: #fff;
	font-size: em(13px);
	text-align: center;
	line-height: 35px;
	white-space: nowrap;
	font-weight: 500;
	padding: 0;
}
.swatch-element label {
	padding: 0 5px;
	.img-check{
		display:none;
	}
}
.color.swatch-element label {
	padding: 0 5px;
}
.swatch {
	input:checked + label {
		background: transparent;
		color: #1c1c1c;
		border: 1px solid #1c1c1c;
		.img-check{
			display:inline-block;
			position: absolute;
			bottom: 0;
			right: 0;
		}
	}
	.color {
		input {
			&:checked + label {
				position: relative;
				border: 1px solid #1c1c1c;
				&:after {
					content: none;
				}
			}
		}
		.has-thumb{
			position: relative;
			.ant-swatch{
				max-height: 30px;
				position: relative;
				top: -2px;
				left: -3px;
			}
		}
	}
	.swatch-element {
		float: left;
		-webkit-transform: translateZ(0);
		-webkit-font-smoothing: antialiased;
		margin: 0px 5px 5px 0;
		position: relative;
		&.color{
			{%for i in (1..10)%}

			{% capture label%}color_{{i}}{%endcapture%}                            
			{% assign title = settings[label]| downcase | handle%}
			{% capture color%}color_{{i}}_c{%endcapture%}			
			{% assign color1 = settings[color] %}

			.{{title}}{
				/*background-color:{{color1}};*/
			}


			{%endfor%}
		}
	}
}
.crossed-out {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
{%if settings.product_swatch_enable%}
#quick-view-product .selector-wrapper{
	display: none!important;
}
{%else%}
#quick-view-product .swatch{
	display: none!important;
}

{%endif%}
.swatch {
	.swatch-element {
		.crossed-out {
			display: none;
		}
		&.soldout {
			.crossed-out {
				display: block;
			}
			label {
				filter: alpha(opacity = 60);
				opacity: 0.6;
			}
		}
	}
	.tooltip {
		text-align: center;
		background:$main-color;
		color: #fff;
		bottom: 100%;
		padding: 10px;
		display: block;
		position: absolute;
		width: 100px;
		left: -35px;
		margin-bottom: 15px;
		filter: alpha(opacity = 0);
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition: all .25s ease-out;
		box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
		z-index: 10000;
		box-sizing: border-box;
		border-radius: 5px;
		&:before {
			bottom: -20px;
			content: " ";
			display: block;
			height: 20px;
			left: 0;
			position: absolute;
			width: 100%;
		}
		&:after {
			border-left: solid transparent 10px;
			border-right: solid transparent 10px;
			border-top: solid $main-color 10px;
			bottom: -10px;
			content: " ";
			height: 0;
			left: 50%;
			margin-left: -13px;
			position: absolute;
			width: 0;
		}
	}
	.swatch-element:hover .tooltip {
		filter: alpha(opacity = 100);
		opacity: 1;
		visibility: visible;
		transform: translateY(0px);
	}
	&.error {
		background-color: #E8D2D2 !important;
		color: #333 !important;
		padding: 1em;
		border-radius: 5px;
		p {
			margin: 0.7em 0;
			&:first-child {
				margin-top: 0;
			}
			&:last-child {
				margin-bottom: 0;
			}
		}
		code {
			font-family: monospace;
		}
	}
}
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
	top: 50%;
	position: absolute;
	text-decoration: none;
	width: 30px;  
	padding: 0; 
	background: transparent;
	outline: none;
	border-radius: 0;
	white-space: nowrap;
	margin-right: 0;
	margin-left: 0;
}
.owl-carousel .owl-nav .kicap-icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	place-items: center;
}
.owl-carousel .owl-nav .owl-prev {
	left: 0
}
.owl-carousel .owl-nav .owl-next {
	right: 0
}
.owl-carousel .owl-nav .disabled {
	opacity: .5;
	cursor: default
}
@media (max-width: 768px) {

	.owl-carousel .owl-nav .owl-prev {
		left: 0
	}
	.owl-carousel .owl-nav .owl-next {
		right: 0
	}
}
.owl-carousel .owl-dots {
	display: block;
	margin-top: 10px;
	text-align: center;
	position: absolute;
	bottom: 10px;
	width: 100%;
}
.owl-carousel .owl-dots .owl-dot {
	display: inline-block;

	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 50%;
	margin: 0 3px;
}
.owl-carousel .owl-dots .owl-dot.active{
	background:$main-color;
}
.owl-carousel-inset .owl-nav .owl-prev {
	left: 0
}
.owl-carousel-inset .owl-nav .owl-next {
	right: 0
}
.owl-carousel-inset .owl-dots {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 25px
}
.owl-carousel-inset .owl-prev,
.owl-carousel-inset .owl-next {
	opacity: 0;
	visibility: hidden;
	transition: all .5s ease
}
.owl-carousel-inset:hover .owl-prev,
.owl-carousel-inset:hover .owl-next {
	opacity: 1;
	visibility: visible
}
.owl-carousel-inset:hover .owl-prev.disabled,
.owl-carousel-inset:hover .owl-next.disabled {
	opacity: .5
}
.owl-carousel-inset:hover .owl-nav .owl-prev {
	left: 25px
}
.owl-carousel-inset:hover .owl-nav .owl-next {
	right: 25px
}
.owl-carousel .owl-item img { 
	width: auto
}
.owl-carousel .owl-item.focus {
	border: 2px solid #333
}

ul.tabs li{
	background: none;
	display: inline-block;

	cursor: pointer;

	&.current{
		color: #000
	}
}

.tab-content{
	opacity: 0;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	&.current{ 
		opacity: 1;
		visibility: visible;
		height: auto;
	}

}
.accordion{
	.nav-item{
		.tab-pane{
			opacity: 0;
			visibility: hidden;
			height: 0;
			overflow: hidden;
		}
		&.active{
			.tab-pane{
				opacity: 1;
				visibility: visible;
				height: auto;
				@include transition(all 200ms ease-in-out);
			}
		}
	}
}
#quickview{
	.product-name{
		margin-top: 0;
		font-size: 18px;
		a{
			color: #000;
			font-size: 18px;
			&:hover, &:focus{
				color: $main-color;
				text-decoration:none;
			}
		}
	}
	button.btn.btn-close.btn-default {
		position: absolute;
		right: -20px;
		top: -20px;
		width: 30px;
		font-size: 14px;
		height: 30px;
		text-align: center;
		line-height: 2px;
		border-radius: 50%;
		background: #000;
		color: #fff;
		padding: 0;
	}
	.modal-content{
		border-radius: 7px;
	}
	.modal-body {
		position: relative;
		padding: 20px;
		border: 2px solid $main-color;
		border-radius: 7px;
	}
	.modal-dialog{
		width: 910px;
		border-radius: 0;
	}
	.status {
		font-size: 14px;
		margin-bottom: 0px;
		font-weight: 400;
	}
	.inventory {
		display: inline-block;
		padding: 0 5px;
		color: $main-color;
	}
	.selector-wrapper select{
		height: 40px;

	}
	.info-other{
		p{
			margin-bottom: 0;
			font-weight: 600;
			label{
				font-weight: normal;
			}
		}
		padding-bottom: 10px;
		margin-bottom: 10px;
		border-bottom: 1px solid #ebebeb;
	}
	span.discount {
		color: $main-color;
	}
	.product-price{
		font-size: em(20px);
		display: inline-block;
	}

	.price-box{
		margin: 0px 0 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #ebebeb;
		.special-price span{
			color: $main-color;				
		}
		.old-price{
			display: block;
			color: #bbb;
			font-size: em(14px);
			margin-top: 7px;
			clear: left;
		}
		del{
		}
	}
	.product-description.rte {
		padding-bottom: 5px;
		p{
			margin-bottom: 5px;
		}
	}
	#thumbnail_quickview{
		opacity: 0;
		visibility: hidden;
		height: 0;
		&.op1{
			opacity: 1;
			visibility: visible;
			height: auto;
		}
		.item{
			border: 2px solid #ebebeb;
			padding: 3px;
			height: 95px;
			position: relative;
			margin: 1px;
			img{
				width: auto;
				max-height: 87px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				padding: 2px;
			}
		}
		.thumblist_carousel{
			&.owl-carousel{
				.owl-nav{
					.owl-prev, .owl-next{
						transition: all 0.45s ease;
						opacity: 0;
						visibility: hidden;
					}
					.owl-next{
						height: 51px;
						width: 32px;
						border: 1px solid #f1f5f6;
						border-radius: 4px;
						background-color: #fff;
						box-shadow: 0 7px 10px 0 rgba(72,139,216,.2);
						position: absolute;
						right: 0;
						text-align: center;
						line-height: 51px;
						top: 50%;
						transform: translate(0, -50%);
						color: #878fa0;
						font-size: 20px;
						margin: 0;
						right: -50px;
						&.disabled{
							opacity: 0.2 !important;
						}
					}
					.owl-prev{
						height: 51px;
						width: 32px;
						border: 1px solid #f1f5f6;
						border-radius: 4px;
						background-color: #fff;
						box-shadow: 0 7px 10px 0 rgba(72,139,216,.2);
						position: absolute;
						left: 0;
						text-align: center;
						line-height: 51px;
						top: 50%;
						transform: translate(0, -50%);
						color: #878fa0;
						font-size: 20px;
						margin: 0;
						left: -50px;
						&.disabled{
							opacity: 0.2 !important;
						}
					}
				}
				&:hover{
					.owl-nav{
						.owl-prev{
							left: 0;
							opacity: 1;
							visibility: inherit;
						}
						.owl-next{
							right: 0;
							opacity: 1;
							visibility: inherit;
						}
					}
				}
			}
		}
	}
	.image{
		border: 1px solid #ebebeb;
		padding: 5px;
		&.margin-bottom-15{
			position: relative;
			height: 400px;
			img{
				width: auto;
				max-height: 100%;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
		}
	}
	.rte img, .rte iframe{
		display: none !important;
	}
	.quantity_wanted_p{
		margin-top: 15px;
		label{
			display: inline-block;
			line-height: 45px;
			float: left;
		}
		input{
			margin: 0 10px;
			height: 40px;
			padding: 0;
			width: 60px;
			display: inline-block;
			border-radius: 3px;
			outline:none;
			box-shadow:none;
			text-align:center;
			float: left;
		}
		.btn{
			font-size: 14px;
			padding: 0 45px;
			border-radius: 3px;
			display: inline-block;
			background-color: $main-color;
			color: #fff;
			border: 1px solid $main-color;
			text-transform: uppercase;
			float: left;
			&:hover, &:focus{
				background-color: #fff;
				color: $main-color;
			}
		}
	}
	.swatch{
		display: none;
		clear: both;
		.header{
			float: none;
			display:block;
			width: 100%;
		}
		.swatch-element{
			float:none;
			display:inline-block;
		}
	}
	.hasswatch{
		.swatch{
			display: block;
			margin-bottom: 7px;
			margin-top: 0;
			.header{
				float: none;
			}
		}
		.selector-wrapper{
			display: none;
		}
	}
}
.filter-container {
	margin-bottom: 0px;
}
.filter-group {
	margin-bottom: 0px;
	ul {
		max-height: 230px;
		overflow-y: auto;
		&::-webkit-scrollbar-track {
			box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
			border-radius: 5px;
			background-color: #F5F5F5;
		}
		&::-webkit-scrollbar {
			width: 5px;
			background-color: #F5F5F5;
		}
		&::-webkit-scrollbar-thumb {
			border-radius:5px;
			box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
			background-color: #e5e5e5;
		}
	}
}
.filter-group-title {
	display: block;
	font-size: em(18px);
	margin-bottom: 10px;
}

.filter-item {
	margin: 0;
	cursor: pointer;
	line-height: 2.5em;
	* {
		color: #6f6f6f;
		cursor: pointer;
		font-size: em(14px);
		font-weight: normal;
	}
	&.color{
		min-width: 20px;
		a,label{
			width: 100%; height: 100%;
			display: inline-block;
			font-size: 0;
		}
	}
}

.filter-item--green *:hover {
	color: $main-color;
}

.filter-item--half {
	display: inline-block;
	width: 48%;
	white-space: nowrap;
	overflow: hidden;
	margin-right: 3px;
}

.filter-item--check-box {
	input {
		display: none;
	}
	.kicap-filter-checkmark {
		margin-right: 5px;
		width: 14px;
		position: relative;
	}
	input {
		+ .kicap-filter-checkmark:before {
			content: "";
			margin-right: 5px;
			border-radius: 2px;
			font-size: 18px;
			border: solid 1px #ebebeb;
			line-height: 40px;
			position: absolute;
			top: -13px;
			height: 15px !important;
			width: 15px;
		}
		&:checked + .kicap-filter-checkmark:after {
			content: "";
			position: absolute;
			width: 5px;
			height: 9px;
			border: solid #fff;
			border-width: 0 2px 2px 0;
			top: -11px;
			left: 5px;
			transform: rotate(45deg);
		}
		&:checked + .kicap-filter-checkmark:before{
			border-color: $main-color;
			background: $main-color;
		}
	}
}

#sort-by {
	.button-asc, .button-desc {
		background-color: #f8f8f8;
		box-shadow: none;
		float: right;
		height: 30px;
		line-height: 28px;
		margin-left: 5px;
		text-align: center;
		width: 30px;
	}
	float: right;
	font-size: 12px;
	text-align: left;
	label {
		float: left;
		line-height: 38px;
		font-size: 14px;
		margin-right: 6px;
		margin-bottom: 0;
		font-weight: 500;
	}
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display: inline;
		float: right;
	}
	a {
		&:link, &:visited {
			color: #333;
			text-decoration: none;
		}
	}
	> ul > li {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-position: right center;
		background-repeat: no-repeat;
		background-position: right 10px center;
		padding-right: 28px;
		text-indent: .01px;
		cursor: pointer;
		line-height: 36px;
		background-image: url(ico-selects.png) !important;
	}
	li {
		background: none repeat scroll 0 0 #fff;
		cursor: pointer;
		margin: 0 auto;
		outline: medium none;
		padding: 0 20px;
		position: relative;
		width: 150px;
		float: left;
		color: #333;
		border: 1px solid #e1e1e1;
		font-size: 14px;
		> a {
			display: inline-block;
			width: 100%;
			line-height: 36px;
		}
		li {
			width: 100%;
			margin-top: 0px;
			border-top: none;
			border-right: none;
			border-left: none;
			a:hover {
				color: #fff;
			}
		}
		&:hover {
			background-color: #fff;
		}
		li:hover {
			background-color: $main-color;
			color: #fff;
			a{
				color: #fff;
			}
		}
	}
	ul ul {
		position: absolute;
		display: none;
		left: -1px;
		top: 35px;
		background: none repeat scroll 0 0 #F8F8F8;
		z-index: 10000;
		border-top: none;
		border: 1px #e1e1e1 solid;
		width: 150px;
		li{
			&:last-child{
				border-bottom: none;
			}
			a{
				&:hover, &:focus{
					color: #fff;
				}
			}
		}
		ul {
			position: absolute;
			left: 100%;
			top: -2px;
			border: solid 1px transparent;
		}
	}
	li:hover > ul {
		display: block;
	}
}
/* Old (pre-BEM) #popup-cart-desktop rules removed 2026-07-19: fully superseded by
   the redesigned #popup-cart-desktop.kicap-cart-popup__panel block in kicap-product.css,
   which loads after this file and owns all mini-cart popup styling now. */
.fancybox-skin {
	background: #fff !important;
}
.modal-content {
	border: none;
	box-shadow: none;
	border-radius: 0.5rem;
	position: relative;
	background-color: #fff;
	background-clip: padding-box;
	outline: 0;
}

.modal-header {
	background-color: #1c1c1c;
	color: #fff;
	padding: 15px;
	border-bottom: 1px solid #e5e5e5;
	min-height: 16.42857143px;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	@media(max-width: 480px){
		padding: 10px;
	}
}

.modal-body {
	position: relative;
	padding: 15px;
}

.modal-header .close {
	margin-top: -2px;
}

button.close {
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 0;
	-webkit-appearance: none;
}

.close {
	float: right;
	font-size: 21px;
	font-weight: bold;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: 0.2;
	filter: alpha(opacity = 20);
}

.modal-header .modal-title {
	padding-left: 6rem;
	position: relative;
	min-height: 44px;
	font-weight: normal;
	font-size: 18px;
	line-height: normal;
	margin: 0;
	color: #fff;
	@media(max-width: 480px){
		font-size: 14px;
		min-height: 34px;
		padding-left: 40px;
		line-height: 34px;
	}
	span {
		width: 44px;
		height: 44px;
		border-radius: 100%;
		font-size: 23px;
		text-align: center;
		line-height: 44px;
		color: #1c1c1c;
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		background-color: #fff;
		@media(max-width: 480px){
			height: 34px;
			width: 34px;
			line-height: 32px;
		}
	}
}

.media:first-child {
	margin-top: 0;
}

.btn-outline-red {
	background: #fff;
	color:#1c1c1c;
	font-weight: 500;
	letter-spacing: 1px;
	font-size: 13px;
	line-height: normal;
	padding: 0px 15px;
	border-radius: 0px;
	border: 1px solid #1c1c1c;
	text-align: center;
	margin-top: 10px;
	text-transform: uppercase;
}

.btn-red {
	background: #1c1c1c;
	border: 1px solid #1c1c1c;
	color: #fff !important;
	font-weight: 500;
	letter-spacing: 1px;
	font-size: 13px;
	line-height: 38px;
	height: 40px;
	padding: 0px 15px;
	border-radius: 0;
	text-align: center;
	margin-top: 7px !important;
	text-transform: uppercase;
}

.media .media-left {
	padding-right: 1em;
}

.media-left, .media-right, .media-body {
	display: table-cell;
	vertical-align: top;
}

.media .thumb-1x1 {
	width: 7.7rem;
}
#myModal{
	.close{
		@media(max-width: 767px){
			color: #fff !important;
		}
	}
	@media(max-width: 767px){
		.modal-content, .modal-header{
			border-radius: 0;
		}
		.modal-body{
			padding: 7px;
		}
	}
	.media-body{
		.product-title{
			font-size: 12px;
			text-transform: uppercase;
			letter-spacing: 1.4px;
			font-weight: 500;
		}
		.product-new-price{
			span{
				color: $main-color;
			}
		}
	}
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
	z-index: 0;
}
@keyframes placeHolderShimmer{
	0%{
		background-position: -468px 0
	}
	100%{
		background-position: 468px 0
	}
}

.animated-background {
	animation-duration: 1.25s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderShimmer;
	animation-timing-function: linear;
	background: #F6F6F6;
	background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);
	background-size: 700px 104px;
	position: relative;
}
$pry-color: {{ settings.color_main_2 }};
$main-color2: #0657a3;
.no-padding-right{
	padding-right: 0 !important;
}
.no-padding-left{
	padding-left: 0;
}
body{
	overflow-x: hidden;
	color: #363f4d;
}
input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="password"], textarea.form-control, select.form-control {
	border-radius: 3px;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid #e6e6e6;
	&:focus{
		outline: none;
		box-shadow: none;
	}
}
a{
	&:hover, &:focus{
		text-decoration:none;
	}
}
.row{
	margin-right: -10px;
	margin-left: -10px;
	@media(max-width: 480px){
		margin-right: -7px;
		margin-left: -7px;
	}
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
	padding-left: 10px;
	padding-right: 10px;
	@media(max-width: 480px){
		padding-left: 7px;
		padding-right: 7px;
	}
}
.container, .container-fluid{
	padding-left: 10px;
	padding-right: 10px;
	@media(max-width: 480px){
		padding-left: 7px;
		padding-right: 7px;
	}
}
.col-xs-15,.col-sm-15,.col-md-15,.col-lg-15 {
	position: relative;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
	@media(max-width: 480px){
		padding-left: 7px;
		padding-right: 7px;
	}
}
.col-xs-15 {
	width: 20%;
	float: left;
}
@media (min-width: 768px) {
	.col-sm-15 {
		width: 20%;
		float: left;
	}
}
@media (min-width: 992px) {
	.col-md-15 {
		width: 20%;
		float: left;
	}
}
@media (min-width: 1200px) {
	.col-lg-15 {
		width: 20%;
		float: left;
	}
}
.page-404{
	h1{
		color: #333;
		font-size: 28px;
	}
	.land{
		color: #888;
	}
	.mt-5{
		.btn-success{
			transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
			background-color: $main-color;
			border-color: $main-color;
			color: #fff;
			border-radius: 2px;
			text-transform: uppercase;
			&:hover, &:focus{
				color: #fff;
				background-color: darken($main-color, 5);
				border-color: darken($main-color, 5);
			}
		}
	}
}
.btn-blues, #btnnewreview, .evo-button{
	position: relative;
	display: inline-block;
	padding: 14px 28px;
	line-height: normal;
	border: 1px solid #1c1c1c;
	text-transform: uppercase;
	font-size: 11px;
	text-align: center;
	letter-spacing: 1.5px;
	font-weight: 400;
	font-style: normal;
	background-color: transparent;
	transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	z-index: 1;
	-webkit-tap-highlight-color: initial;
	color: #fff;
	strong{
		font-weight: 400;
	}
	&::before {
		position: absolute;
		content: '';
		display: block;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		transform: scale(1, 1);
		transform-origin: left center;
		z-index: -1;
		transition: transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		background-color: #1c1c1c;
	}
	&:hover, &:focus{
		color: $pry-color;
		border-color: $pry-color;
		&::before{
			transform-origin: right center;
			transform: scale(0, 1);
		}
	}
}
.required {
	font-size: 13px;
	color: red;
}
#article_comments{
	margin-bottom: 15px;
}
.search-more{margin-top:0;}
.grecaptcha-badge{
	display:none !important;
}
.total_address{
	a{
		color: $main-color;
	}
}
footer{
	&.footer{
		background-color: #f9f9f9;
		margin-top: 30px;
		.site-footer{
			margin-top: 25px;
			color: #1c1c1c;
			.footer-contact{
				h3{
					img{
						max-height: 60px;
					}
				}
				ul{
					li{
						color: #1c1c1c;
						position: relative;
						margin-bottom: 7px;
						font-size: 13px;
						letter-spacing: 1px;
						padding-left: 20px;
						word-break: break-word;
						i{
							position: absolute;
							left: 0;
							top: 7px;
						}
						a{
							color: #1c1c1c;
							text-transform: unset !important;
							font-size: 13px !important;
							letter-spacing: 1px;
							&:hover, &:focus{
								color: $main-color;
							}
						}
					}
				}
			}
			.footer-widget{
				h3{
					font-size: 12px;
					text-transform: uppercase;
					letter-spacing: 1.4px;
					line-height: 22px;
					font-weight: 500;
					margin-bottom: 15px;
					position: relative;
					@media(max-width: 767px){
						margin-bottom: 0;
						.Collapsible__Plus {
							position: absolute;
							right: 0;
							top: calc(50% - (11px / 2));
							width: 11px;
							height: 11px;
							&::before, &::after{
								position: absolute;
								content: '';
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%) rotate(-90deg);
								background-color: currentColor;
								transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
							}
							&::before {
								width: 11px;
								height: 1px;
								opacity: 1;
							}
							&::after {
								width: 1px;
								height: 11px;
							}
						}
					}
				}
				.list-menu{
					li{
						a{
							text-transform: uppercase;
							letter-spacing: .5px;
							color: #1c1c1c;
							transition: .2s all;
							font-size: 12px;
							letter-spacing: 1px;
							&:hover, &:focus{
								color: $main-color;
							}
						}
						&+li{
							margin-top: 7px;
						}
					}
					@media(max-width: 767px){
						&.has-click{
							display: block;
							height: 0;
							visibility: hidden;
							transition: height 0.35s ease-in-out, visibility 0s ease-in-out 0.35s;
							margin-bottom: 0;
							opacity: 0;
						}
					}
				}
				&.footer-subcrible{
					p{
						letter-spacing: 0.5px;
						font-size: 12px;
					}
					form{
						margin-bottom: 15px;
						input{
							height: 40px;
							background-color: #f8f8f8;
							line-height: 40px;
							font-size: 12px;
							width: 100%;
							padding: 0 10px;
							outline: none;
							background: #f0f0f0;
							border: 1px solid transparent;
							margin-bottom: 8px;
						}
						button{
							width: 100%;
							padding-top: 0;
							padding-bottom: 0;
							&:hover{
								background-color: #fff;
								color: $pry-color;
								border-color: $pry-color;
							}
						}
					}
				}
				@media(max-width: 767px){
					&.active{
						h3{
							.Collapsible__Plus{
								&::after {
									transform: translate(-50%, -50%) rotate(90deg);
								}
								&::before {
									opacity: 0;
								}
							}
						}
						.list-menu{
							&.has-click{
								visibility: visible;
								transition: height 0.35s ease-in-out;
								height: auto;
								opacity: 1;
							}
						}
					}
				}
			}
			.footer-payment{
				ul{
					text-align: center;
					li{
						display:inline-block;
						&+li{
							margin-left: 6px;
						}
					}
				}
			}
			@media(max-width: 991px){
				.footer-inner{
					.col-sm-6{
						&:nth-child(3){
							clear: left;
						}
					}
				}
			}
		}
		.copyright{
			padding: 8px;
			border-top: 1px solid #ebebeb;
			font-size: 12px;
			color: #1c1c1c;
			font-weight: 500;
			a{
				color: #1c1c1c;
				&:hover, &:focus{
					color: $main-color;
				}
			}
		}
	}
}
.product-card{
	text-align: center;
	overflow: hidden;
	position: relative;
	margin-bottom: 15px;
	.product-url {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}
	.sale-box{
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #fff;
		height: 20px;
		line-height: 20px;
		padding: 0 10px;
		background: $main-color;
		position: absolute;
		top: 30px;
		z-index: 11;
		left: 0;
	}
	.sale-frame{
		height: 50px;
		width: auto;
		position: absolute;
		top: 15px;
		z-index: 11;
		right: 0;
	}
	.product-card__inner{
		transition: .3s ease-in-out;
		will-change: transform;
		background: #fff;
		.product-card__image {
			padding: 10px 0;
			position: relative;
			img {
				transition: .3s ease-in-out all;
				will-change: opacify;
				&.product-card-image-back{
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
					visibility: hidden;
				}
			}
			&.lazyload{
				@extend .animated-background;
			}
		}
		.soldout{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(-10deg);
			border: 2px solid #ef3333;
			color: #ef3333;
			padding: 5px;
			text-transform: uppercase;
			font-weight: 700;
			border-radius: 5px;
			background: rgba(255, 255, 255, .5);
			@media(max-width: 1199px){
				width: 65%;
				font-size: 11px;
			}
		}
		.product-single__series{
			font-size: 12px;
			line-height: 13px;
			font-weight: 400;
			text-transform: uppercase;
			color: #bfbfbf;
			margin-top: 10px;
			letter-spacing: 1px;
			margin-bottom: 5px;
			min-height: 13px;
		}
		.product-card__title{
			font-size: 14px;
			//line-height: 16px;
			letter-spacing: 2.4px;
			font-weight: 500;
			text-transform: uppercase;
			margin: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			@media(max-width: 767px){
				font-size: 12px;
				letter-spacing: 1.5px;
			}
		}
		.product-price{
			font-size: 12px;
			font-weight: 500;
			color: #1c1c1c;
			@media(max-width: 767px){
				font-size: 11px;
			}
			strong{
				font-weight: 500;
			}
			span{
				margin-left: 6px;
				text-decoration:line-through;
				color: #bbb;
			}
		}
	}
	form{
		margin-bottom: 0;
		z-index: 99;
		position: relative;
		.product-card__actions{
			margin-top: 15px;
			display: flex;
			position: absolute;
			bottom: 0;
			width: 100%;
			will-change: transform;
			transform: translate3d(0, 100%, 0);
			transition: .3s ease-in-out;
			.ajax_addtocart{
				height: 46px;
				font-size: 13px;
				letter-spacing: 1px;
				font-weight: 500;
				flex: 1;
				padding: 0 10px;
				justify-content: center;
				border: 1px solid #1c1c1c;
				background: #fff;
				color: #1c1c1c;
				line-height: 44px;
				&:hover, &:focus{
					background-color: $pry-color;
					color: #fff;
					border-color: $pry-color;
				}
			}
		}
	}
	@media(min-width: 1025px){
		&:hover{
			.product-card__inner {
				.product-card__image {
					img{
						&.product-card-image-front {
							opacity: 0;
							visibility: hidden;
						}
						&.product-card-image-back {
							opacity: 1;
							visibility: visible;
						}
					}
				}
				.product-card__title, .product-price, .product-single__series{
					opacity: 0;
				}
			}
			.product-card__actions {
				transform: translate3d(0, 0, 0);
			}
		}
	}
}
@media(min-width: 768px){
	.my-account{
		.dashboard{
			.recent-orders{
				.thead-default{
					border-top: 1px solid #e1e1e1;
				}
			}
		}
	}
}
@media(max-width: 480px){
	.s480-f{
		display:block;
		font-size: 0;
		clear:both;
	}
	.col-full{
		width: 100%;
	}
}
@media(min-width:1200px){
	ul.social-desktop{
		margin-left: 16px;
	}
}
/* KICAP Human Frame v2 — Footer logo */
.kicap-footer-logo {
	margin: 0 0 20px !important;
	padding: 0 !important;
	line-height: 0 !important;
}

.kicap-footer-logo .logo-wrapper {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	line-height: 0 !important;
}

.kicap-footer-wordmark {
	display: block !important;
	width: 176px !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 46px !important;
	object-fit: contain !important;
	object-position: left center !important;
	margin: 0 !important;
}

@media (max-width: 767px) {
	.kicap-footer-wordmark {
		width: 148px !important;
		max-height: 39px !important;
	}
}


/* ============================================================================
   Add-to-cart popup (#popup-cart / #popup-cart-desktop) — Human Frame v2.
   Moved here from kicap-product.css (2026-07-19): the popup is triggered by
   AJAX add-to-cart on ANY page (collection/search/home grids, not just the
   product-detail template), so it must live in a globally-loaded file.
   Keeps Sapo AJAX class hooks intact (title-popup-cart, tbody-popup, etc).
   Quantity stepper uses --kicap-radius-sm (boxy) to match the approved mockup,
   not the pill shape used elsewhere in kicap-product.css.
   ============================================================================ */
/* Add-to-cart popup — Human Frame v2. Keeps Sapo AJAX class hooks intact. */
#popup-cart.kicap-cart-popup.modal {
	position: fixed !important;
	inset: 0;
	z-index: var(--kicap-z-modal);
}

#popup-cart.kicap-cart-popup.modal.in {
	display: grid !important;
	place-items: center;
	padding: var(--kicap-space-5);
	overflow: auto;
}

#popup-cart.kicap-cart-popup.modal.in #popup-cart-desktop { margin: 0; }

#popup-cart-desktop.kicap-cart-popup__panel {
	display: flex;
	width: min(82.5rem, calc(100vw - 2.5rem));
	max-height: calc(100dvh - 2.5rem);
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--kicap-border);
	border-radius: var(--kicap-radius-lg);
	background: var(--kicap-surface);
	box-shadow: var(--kicap-shadow-elevated);
	color: var(--kicap-text);
}

#popup-cart-desktop .kicap-cart-popup__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--kicap-space-4);
	padding: clamp(1.125rem, 2vw, 1.75rem) clamp(1.125rem, 2.4vw, 2rem) clamp(1rem, 1.8vw, 1.25rem);
	border-bottom: 1px solid var(--kicap-border);
}

#popup-cart-desktop .kicap-cart-popup__header-copy {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	align-items: flex-start;
	gap: var(--kicap-space-4);
}

#popup-cart-desktop .kicap-cart-popup__success-icon {
	display: grid;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	place-items: center;
	border-radius: 50%;
	background: var(--kicap-status-success-subtle);
	color: var(--kicap-status-success);
}

#popup-cart-desktop .kicap-cart-popup__success-icon .kicap-icon { width: 1.125rem; height: 1.125rem; }

#popup-cart-desktop .title-popup-cart,
#popup-cart-desktop .title-quantity-popup {
	margin: 0;
	color: var(--kicap-text);
	font-family: var(--kicap-font-sans);
}

#popup-cart-desktop .title-popup-cart {
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 650;
	letter-spacing: 0;
	line-height: var(--kicap-line-height-tight);
}

#popup-cart-desktop .title-quantity-popup {
	margin-top: var(--kicap-space-2);
	color: var(--kicap-text-muted);
	font-size: var(--kicap-font-size-sm);
	font-weight: 500;
	line-height: var(--kicap-line-height-base);
}

#popup-cart-desktop .title-quantity-popup .cart-popup-count { color: var(--kicap-color-accent-strong); font-weight: 650; }
#popup-cart-desktop .cart-popup-name { display: none !important; }

#popup-cart-desktop .quickview-close {
	position: static;
	display: grid;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	padding: 0;
	border: 1px solid var(--kicap-border);
	border-radius: 50%;
	background: var(--kicap-surface-elevated);
	color: var(--kicap-text);
	cursor: pointer;
	line-height: 1;
}

#popup-cart-desktop .quickview-close .kicap-icon { width: 1.25rem; height: 1.25rem; }
#popup-cart-desktop .quickview-close:hover { border-color: var(--kicap-border-strong); background: var(--kicap-surface); }
#popup-cart-desktop .quickview-close:focus-visible { outline: var(--kicap-focus-width) solid var(--kicap-focus-ring); outline-offset: var(--kicap-focus-offset); }

#popup-cart-desktop .kicap-cart-popup__live {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

#popup-cart-desktop .kicap-cart-popup__error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kicap-space-4);
	margin: 0 clamp(1.125rem, 2.4vw, 2rem);
	padding: var(--kicap-space-3) var(--kicap-space-4);
	border: 1px solid var(--kicap-status-danger);
	border-radius: var(--kicap-radius-sm);
	background: var(--kicap-status-danger-subtle);
	color: var(--kicap-status-danger);
}

#popup-cart-desktop .kicap-cart-popup__error[hidden] { display: none !important; }

#popup-cart-desktop .kicap-cart-popup__error-text {
	margin: 0;
	font-size: var(--kicap-font-size-sm);
	line-height: var(--kicap-line-height-base);
}

#popup-cart-desktop .kicap-cart-popup__error-retry {
	min-height: 2.25rem;
	padding: 0 var(--kicap-space-4);
	border: 1px solid var(--kicap-border-strong);
	border-radius: var(--kicap-radius-sm);
	background: var(--kicap-surface-elevated);
	color: var(--kicap-text);
	cursor: pointer;
	font: 650 var(--kicap-font-size-xs) / 1 var(--kicap-font-sans);
	white-space: nowrap;
}

#popup-cart-desktop .kicap-cart-popup__body {
	display: flex;
	min-height: 0;
	flex: 1 1 auto;
	flex-direction: column;
}

#popup-cart-desktop .content-popup-cart,
#popup-cart-desktop .tbody-popup,
#popup-cart-desktop .tfoot-popup { float: none; width: 100%; clear: both; }

#popup-cart-desktop .thead-popup {
	display: grid;
	grid-template-columns:
		minmax(26.25rem, 1.6fr)
		minmax(7.5rem, 0.55fr)
		minmax(8.75rem, 0.55fr)
		minmax(8.75rem, 0.55fr);
	padding: 0 clamp(1.125rem, 2.4vw, 2rem);
	border-bottom: 1px solid var(--kicap-border);
	background: transparent;
	color: var(--kicap-text-muted);
}

#popup-cart-desktop .thead-popup__col {
	padding: var(--kicap-space-3) var(--kicap-space-4);
	font: 600 var(--kicap-font-size-xs) / var(--kicap-line-height-base) var(--kicap-font-sans);
	letter-spacing: 0.02em;
}

#popup-cart-desktop .thead-popup__col--price,
#popup-cart-desktop .thead-popup__col--subtotal { text-align: right; }

#popup-cart-desktop .thead-popup__col--qty { text-align: center; }

#popup-cart-desktop .tbody-popup {
	max-height: min(24rem, calc(100dvh - 24rem));
	flex: 1 1 auto;
	overflow: auto;
	overscroll-behavior: contain;
}

#popup-cart-desktop .tbody-popup .item-popup {
	display: grid;
	grid-template-columns:
		7rem
		minmax(16.25rem, 1fr)
		minmax(7.5rem, 0.45fr)
		minmax(8.75rem, 0.5fr)
		minmax(8.75rem, 0.5fr);
	align-items: center;
	padding: var(--kicap-space-5) clamp(1.125rem, 2.4vw, 2rem);
	border-bottom: 1px solid var(--kicap-border);
}

#popup-cart-desktop .tbody-popup .item-popup > div[style] {
	float: none;
	width: auto !important;
	min-width: 0;
}

#popup-cart-desktop .tbody-popup .item-image { float: none; padding: 0; }

#popup-cart-desktop .tbody-popup .item-image img {
	display: block;
	width: 6.5rem;
	height: 6.5rem;
	border: 1px solid var(--kicap-border);
	border-radius: var(--kicap-radius-sm);
	background: var(--kicap-surface-elevated);
	object-fit: contain;
}

#popup-cart-desktop .tbody-popup .item-info { min-width: 0; padding: 0; }

#popup-cart-desktop .tbody-popup .item-info .item-name {
	margin: 0 0 var(--kicap-space-1);
}

#popup-cart-desktop .tbody-popup .item-info .item-name a {
	display: -webkit-box;
	overflow: hidden;
	color: var(--kicap-text);
	font: 650 var(--kicap-font-size-sm) / 1.35 var(--kicap-font-sans);
	letter-spacing: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

#popup-cart-desktop .tbody-popup .item-info .variant-title-popup {
	margin: 0 0 var(--kicap-space-2);
	color: var(--kicap-text-muted);
	font-size: var(--kicap-font-size-xs);
	line-height: var(--kicap-line-height-base);
}

#popup-cart-desktop .tbody-popup .item-info .item-remove { margin: 0 0 var(--kicap-space-2); }

#popup-cart-desktop .tbody-popup .item-info .item-remove a {
	display: inline-flex;
	align-items: center;
	gap: var(--kicap-space-2);
	color: var(--kicap-text-subtle);
	font-size: var(--kicap-font-size-xs);
	letter-spacing: 0;
	text-decoration: none;
}

#popup-cart-desktop .tbody-popup .item-info .item-remove a:hover,
#popup-cart-desktop .tbody-popup .item-info .item-remove a:focus-visible { color: var(--kicap-text-muted); }

#popup-cart-desktop .tbody-popup .item-info .item-added-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--kicap-space-2);
	margin: 0;
	color: var(--kicap-status-success);
	font-size: var(--kicap-font-size-xs);
	line-height: var(--kicap-line-height-base);
}

#popup-cart-desktop .tbody-popup .item-info .item-added-badge[hidden] { display: none !important; }

#popup-cart-desktop .tbody-popup .item-info .item-added-badge .kicap-icon { width: 0.875rem; height: 0.875rem; }

#popup-cart-desktop .tbody-popup .item-price-col,
#popup-cart-desktop .tbody-popup .item-subtotal-col { padding: 0; text-align: right; }

#popup-cart-desktop .tbody-popup .item-price,
#popup-cart-desktop .tbody-popup .cart-price {
	padding: 0;
	color: var(--kicap-text);
	font: 500 var(--kicap-font-size-sm) / var(--kicap-line-height-base) var(--kicap-font-sans);
}

#popup-cart-desktop .tbody-popup .cart-price,
#popup-cart-desktop .tbody-popup .cart-price .price {
	font-weight: 650;
}

#popup-cart-desktop .tbody-popup .popup-qty-col {
	display: flex;
	justify-content: center;
	padding: 0;
}

#popup-cart-desktop .kicap-cart-popup__qty {
	display: grid;
	width: min(100%, 9.5rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid var(--kicap-border);
	border-radius: var(--kicap-radius-sm);
	background: var(--kicap-input-bg);
}

#popup-cart-desktop .kicap-cart-popup__qty .items-count,
#popup-cart-desktop .kicap-cart-popup__qty .number-sidebar {
	width: auto;
	height: 3rem;
	min-height: 3rem;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--kicap-input-text);
	font: 650 var(--kicap-font-size-sm) / 1 var(--kicap-font-sans);
}

#popup-cart-desktop .kicap-cart-popup__qty .items-count {
	cursor: pointer;
}

#popup-cart-desktop .kicap-cart-popup__qty .items-count:hover:not(:disabled) { background: var(--kicap-surface-elevated); }

#popup-cart-desktop .kicap-cart-popup__qty .items-count:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

#popup-cart-desktop .kicap-cart-popup__qty .items-count:focus-visible,
#popup-cart-desktop .kicap-cart-popup__qty .number-sidebar:focus-visible {
	outline: var(--kicap-focus-width) solid var(--kicap-focus-ring);
	outline-offset: calc(var(--kicap-focus-offset) * -1);
}

#popup-cart-desktop .kicap-cart-popup__qty .number-sidebar {
	border-inline: 1px solid var(--kicap-border);
	text-align: center;
}

#popup-cart-desktop .kicap-cart-popup__empty {
	padding: var(--kicap-space-7) clamp(1.125rem, 2.4vw, 2rem);
	text-align: center;
}

#popup-cart-desktop .kicap-cart-popup__empty[hidden] { display: none !important; }

#popup-cart-desktop .kicap-cart-popup__empty p {
	margin: 0 0 var(--kicap-space-5);
	color: var(--kicap-text-muted);
	font-size: var(--kicap-font-size-base);
}

#popup-cart-desktop .kicap-cart-popup__empty-cta { margin-inline: auto; }

#popup-cart-desktop .kicap-cart-popup__footer {
	margin-top: auto;
	padding: clamp(1rem, 2vw, 1.25rem) clamp(1.125rem, 2.4vw, 2rem) calc(clamp(1rem, 2vw, 1.25rem) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--kicap-border);
	background: var(--kicap-surface);
}

#popup-cart-desktop .kicap-cart-popup__footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kicap-space-5);
	padding: 0;
}

#popup-cart-desktop .tfoot-popup .popupcon,
#popup-cart-desktop .tfoot-popup .popup-total { float: none; }

#popup-cart-desktop .tfoot-popup .popup-total p {
	margin: 0;
	color: var(--kicap-text);
	font: 500 var(--kicap-font-size-base) / var(--kicap-line-height-base) var(--kicap-font-sans);
	text-align: right;
}

#popup-cart-desktop .tfoot-popup .popup-total .total-price {
	color: var(--kicap-color-accent-strong);
	font-size: var(--kicap-font-size-lg);
	font-weight: 650;
}

#popup-cart-desktop .tfoot-popup .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kicap-space-2);
	border-radius: var(--kicap-radius-sm);
	cursor: pointer;
	font-family: var(--kicap-font-sans);
	letter-spacing: 0;
	text-decoration: none;
	transition: background-color var(--kicap-motion-fast) var(--kicap-ease-out), border-color var(--kicap-motion-fast) var(--kicap-ease-out), color var(--kicap-motion-fast) var(--kicap-ease-out);
}

#popup-cart-desktop .tfoot-popup .btn-continue {
	min-height: 2.75rem;
	padding: 0 var(--kicap-space-4);
	border: 1px solid var(--kicap-button-secondary-border);
	background: var(--kicap-button-secondary-bg);
	color: var(--kicap-button-secondary-text);
	font-size: var(--kicap-font-size-sm);
	font-weight: 600;
}

#popup-cart-desktop .tfoot-popup .btn-continue:hover { border-color: var(--kicap-border-strong); background: var(--kicap-surface-elevated); }

#popup-cart-desktop .kicap-cart-popup__checkout-row { padding-top: var(--kicap-space-4); }

#popup-cart-desktop .tfoot-popup .btn-proceed-checkout {
	width: 100%;
	min-height: 3.5rem;
	border: 1px solid var(--kicap-color-accent);
	background: var(--kicap-color-accent);
	color: var(--kicap-text-inverse);
	font-size: var(--kicap-font-size-sm);
	font-weight: 700;
	text-transform: uppercase;
}

#popup-cart-desktop .tfoot-popup .btn-proceed-checkout:hover {
	border-color: var(--kicap-color-accent-strong);
	background: var(--kicap-color-accent-strong);
}

#popup-cart-desktop .tfoot-popup .button:focus-visible {
	outline: var(--kicap-focus-width) solid var(--kicap-focus-ring);
	outline-offset: var(--kicap-focus-offset);
}

#popup-cart-desktop.is-cart-empty .kicap-cart-popup__footer,
#popup-cart-desktop.is-cart-empty .thead-popup { display: none; }

#popup-cart-desktop.is-cart-busy .kicap-cart-popup__qty .items-count { pointer-events: none; opacity: 0.55; }

@media (max-width: 768px) {
	#popup-cart.kicap-cart-popup.modal.in {
		align-items: end;
		padding: var(--kicap-space-3);
		padding-bottom: calc(var(--kicap-space-3) + env(safe-area-inset-bottom));
	}

	#popup-cart-desktop.kicap-cart-popup__panel {
		width: 100%;
		max-height: min(94dvh, calc(100dvh - 1rem));
		border-radius: var(--kicap-radius-lg) var(--kicap-radius-lg) var(--kicap-radius-md) var(--kicap-radius-md);
	}

	#popup-cart-desktop .kicap-cart-popup__header {
		padding: 1rem 1.125rem 0.875rem;
	}

	#popup-cart-desktop .title-popup-cart { font-size: 1.125rem; }

	#popup-cart-desktop .thead-popup { display: none; }

	#popup-cart-desktop .tbody-popup .item-popup {
		grid-template-columns: 5.5rem minmax(0, 1fr);
		gap: var(--kicap-space-3) var(--kicap-space-4);
		padding: 1rem 1.125rem;
	}

	#popup-cart-desktop .tbody-popup .item-image img {
		width: 5.5rem;
		height: 5.5rem;
	}

	#popup-cart-desktop .tbody-popup .item-info { grid-column: 2; }

	#popup-cart-desktop .tbody-popup .item-price-col,
	#popup-cart-desktop .tbody-popup .popup-qty-col,
	#popup-cart-desktop .tbody-popup .item-subtotal-col {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--kicap-space-3);
		padding-top: var(--kicap-space-2);
		border-top: 1px solid var(--kicap-border);
	}

	#popup-cart-desktop .tbody-popup .item-price-col::before,
	#popup-cart-desktop .tbody-popup .popup-qty-col::before,
	#popup-cart-desktop .tbody-popup .item-subtotal-col::before {
		color: var(--kicap-text-muted);
		content: attr(data-label);
		font-size: var(--kicap-font-size-xs);
		font-weight: 600;
	}

	#popup-cart-desktop .tbody-popup .item-price-col { text-align: right; }
	#popup-cart-desktop .tbody-popup .item-subtotal-col { text-align: right; }

	#popup-cart-desktop .kicap-cart-popup__footer-row {
		flex-direction: column;
		align-items: stretch;
	}

	#popup-cart-desktop .tfoot-popup .popup-total p { text-align: center; }

	#popup-cart-desktop .tfoot-popup .btn-continue { width: 100%; }

	#popup-cart-desktop .kicap-cart-popup__checkout-row {
		position: sticky;
		bottom: 0;
		padding-top: var(--kicap-space-3);
		background: var(--kicap-surface);
	}
}

@media (max-width: 430px) {
	#popup-cart.kicap-cart-popup.modal.in { padding: var(--kicap-space-2); }

	#popup-cart-desktop .tbody-popup .item-image img {
		width: 5rem;
		height: 5rem;
	}

	#popup-cart-desktop .tbody-popup .item-popup {
		grid-template-columns: 5rem minmax(0, 1fr);
		padding: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	#popup-cart-desktop .tfoot-popup .button { transition: none; }
}