/* =========================================================
   M.A. SAFETY STORES
   CUSTOM WISHLIST
   ========================================================= */


/* =========================================================
   HIDE PORTO'S ORIGINAL BREADCRUMB
   ONLY ON WISHLIST PAGE
   ========================================================= */

body.mas-safety-wishlist-page .page-top {
	display: none !important;
}


/* =========================================================
   MAIN VARIABLES
   ========================================================= */

#mas-wishlist {

	--mas-orange: #ffb106;
	--mas-orange-dark: #e59d00;

	--mas-black: #171717;
	--mas-text: #202124;
	--mas-muted: #777;

	--mas-green: #159447;

	--mas-border: #e5e5e5;

	width: 100%;

	color: var(--mas-text);

	box-sizing: border-box;
}


#mas-wishlist *,
#mas-wishlist *::before,
#mas-wishlist *::after {
	box-sizing: border-box;
}


/* =========================================================
   TITLE
   ========================================================= */

#mas-wishlist .mas-wishlist-heading {

	margin: 0 0 12px;
	padding: 0;
}


#mas-wishlist .mas-wishlist-title {

	margin: 0;

	color: var(--mas-black);

	font-size: 34px;

	line-height: 1.15;

	font-weight: 800;

	letter-spacing: -.5px;
}


#mas-wishlist .mas-wishlist-count {
	font-weight: 800;
}


/* =========================================================
   BREADCRUMB
   BELOW TITLE
   ========================================================= */

#mas-wishlist .mas-wishlist-breadcrumb {

	display: flex;

	align-items: center;

	gap: 10px;

	margin: 0 0 30px;

	padding: 0;

	color: #999;

	font-size: 12px;

	line-height: 1.4;
}


#mas-wishlist .mas-wishlist-breadcrumb a {

	color: #777;

	text-decoration: none;
}


#mas-wishlist .mas-wishlist-breadcrumb a:hover {
	color: var(--mas-orange);
}


/* =========================================================
   DESKTOP COLUMN HEADER
   ========================================================= */

/* -----------------------------------------------------
       1. REMOVE DESKTOP COLUMN HEADER
       ----------------------------------------------------- */

    #mas-wishlist .mas-wishlist-columns {
        display: none !important;
    }


#mas-wishlist .mas-wishlist-column-product {
	grid-column: 1 / 3;
}


#mas-wishlist .mas-wishlist-column-price {
	grid-column: 3;
}


#mas-wishlist .mas-wishlist-column-stock {
	grid-column: 4;
}


#mas-wishlist .mas-wishlist-column-action {

	grid-column: 5;

	text-align: right;
}


/* =========================================================
   DESKTOP PRODUCT ROW
   ========================================================= */

#mas-wishlist .mas-wishlist-product {

	display: grid;

	grid-template-columns:
		150px
		minmax(300px, 1fr)
		180px
		0px
		120px;

	align-items: center;

	min-height: 180px;

	padding: 0px 22px;

	border-bottom: 1px solid var(--mas-border);

	background: #fff;
}


#mas-wishlist .mas-wishlist-product:hover {
	background: #fffdf8;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

#mas-wishlist .mas-wishlist-image {

	width: 150px;
	height: 150px;

	position: relative;

	display: flex;

	align-items: center;
	justify-content: center;
}


#mas-wishlist .mas-wishlist-image-wrap {

	width: 150px;
	height: 150px;

	position: relative;

	display: flex;

	align-items: center;
	justify-content: center;

	background: #fff;
}


#mas-wishlist .mas-wishlist-image-link {

	width: 150px;
	height: 150px;

	display: flex;

	align-items: center;
	justify-content: center;

	padding: 6px;

	background: #fff;

	overflow: hidden;

	text-decoration: none;
}


#mas-wishlist .mas-wishlist-image img {

	width: 100%;
	height: 100%;

	max-width: none;
	max-height: none;

	display: block;

	margin: 0;

	object-fit: contain;

	transform: none;
}


/* =========================================================
   REMOVE BUTTON
   ONE CROSS ONLY
   ========================================================= */

#mas-wishlist .mas-wishlist-remove {

	position: absolute;

	top: 5px;
	right: 5px;

	width: 30px;
	height: 30px;

	z-index: 20;

	display: flex;

	align-items: center;
	justify-content: center;

	margin: 0;
	padding: 0;

	border: 1px solid #ddd;

	border-radius: 50%;

	background: #fff;

	color: #777;

	font-family: Arial, sans-serif;

	font-size: 22px;

	font-weight: 400;

	line-height: 1;

	text-decoration: none;

	box-shadow: 0 2px 8px rgba(0,0,0,.13);
}


#mas-wishlist .mas-wishlist-remove:hover {

	color: #222;

	border-color: #bbb;
}


#mas-wishlist .mas-wishlist-remove::before,
#mas-wishlist .mas-wishlist-remove::after {

	content: none !important;

	display: none !important;
}


#mas-wishlist .mas-wishlist-remove span {

	display: block;

	margin: 0;
	padding: 0;

	line-height: 1;
}


/* =========================================================
   PRODUCT INFORMATION
   ========================================================= */

#mas-wishlist .mas-wishlist-info {

	min-width: 0;

	padding: 0 18px;
}


#mas-wishlist .mas-wishlist-product-title {

	margin: 0 0 10px;

	font-size: 18px;

	line-height: 1.3;

	font-weight: 600;

	letter-spacing: -.1px;
}


#mas-wishlist .mas-wishlist-product-title a {

	color: var(--mas-black);

	text-decoration: none;
}


#mas-wishlist .mas-wishlist-product-title a:hover {
	color: var(--mas-orange-dark);
}


/* =========================================================
   PRICE
   ========================================================= */

#mas-wishlist .mas-wishlist-price-row {

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 8px;

	margin-bottom: 8px;
}


#mas-wishlist .mas-wishlist-discount {

	color: var(--mas-green);

	font-size: 17px;

	font-weight: 800;

	white-space: nowrap;
}


#mas-wishlist .mas-wishlist-price {

	color: var(--mas-black);

	font-size: 18px;

	font-weight: 800;

	white-space: nowrap;
}


#mas-wishlist .mas-wishlist-price del {

	color: #999;

	font-weight: 500;

	margin-right: 5px;
}


#mas-wishlist .mas-wishlist-price ins {

	color: var(--mas-black);

	background: transparent;

	text-decoration: none;
}


/* =========================================================
   STOCK
   ========================================================= */

#mas-wishlist .mas-wishlist-stock {

	font-size: 14px;

	font-weight: 600;
}


#mas-wishlist .mas-wishlist-stock.is-in-stock {
	color: var(--mas-green);
}


#mas-wishlist .mas-wishlist-stock.is-out-of-stock {
	color: #c62828;
}


/* =========================================================
   ACTION BUTTON
   ========================================================= */

#mas-wishlist .mas-wishlist-action {

	display: flex;

	align-items: center;

	justify-content: flex-end;
}


#mas-wishlist .mas-wishlist-button {

	min-width: 175px;

	height: 52px;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 5px;

	padding: 0 18px;

	border: 1px solid var(--mas-orange);

	border-radius: 0;

	background: var(--mas-orange);

	color: #fff;

	font-size: 13px;

	font-weight: 600;

	line-height: 1;

	text-decoration: none;

	white-space: nowrap;

	transition:
		background .2s ease,
		border-color .2s ease;
}


#mas-wishlist .mas-wishlist-button:hover {

	background: #000;

	border-color: #000;

	color: #fff;
}


#mas-wishlist .mas-wishlist-button-arrow {
	font-size: 18px;
}


/* =========================================================
   SHARE
   ========================================================= */

#mas-wishlist .mas-wishlist-share {

	display: flex;

	align-items: center;

	gap: 12px;

	margin: 28px 0 10px;

	padding: 0;
}


#mas-wishlist .mas-wishlist-share-label {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	color: #222;

	font-size: 20px;

	font-weight: 500;
}


#mas-wishlist .mas-wishlist-share-arrow {
	font-size: 25px;
}


#mas-wishlist .mas-wishlist-share-buttons {

	display: flex;

	align-items: center;

	gap: 7px;
}


#mas-wishlist .mas-share {

	width: 24px;
	height: 24px;

	display: flex;

	align-items: center;
	justify-content: center;

	color: #fff;

	font-family: Arial, sans-serif;

	font-size: 12px;

	font-weight: 700;

	line-height: 1;

	text-decoration: none;
}


#mas-wishlist .mas-share:hover {
	opacity: .82;
	color: #fff;
}


#mas-wishlist .mas-share-facebook {
	background: #4267b2;
}


#mas-wishlist .mas-share-x {
	background: #35a8d8;
}


#mas-wishlist .mas-share-pinterest {
	background: #bd2634;
}


#mas-wishlist .mas-share-email {
	background: #f4a900;
}


#mas-wishlist .mas-share-whatsapp {
	background: #08a63a;
}


/* =========================================================
   EMPTY WISHLIST
   ========================================================= */

#mas-wishlist .mas-wishlist-empty {

	padding: 70px 20px;

	text-align: center;

	border-top: 1px solid var(--mas-border);
}


#mas-wishlist .mas-wishlist-empty-icon {

	margin-bottom: 10px;

	font-size: 48px;

	color: var(--mas-orange);
}


#mas-wishlist .mas-wishlist-empty h2 {
	margin: 0 0 8px;
}


#mas-wishlist .mas-wishlist-empty p {

	margin: 0 0 22px;

	color: var(--mas-muted);
}


#mas-wishlist .mas-wishlist-shop-button {

	display: inline-flex;

	align-items: center;
	justify-content: center;

	height: 46px;

	padding: 0 22px;

	background: var(--mas-orange);

	color: #fff;

	font-weight: 800;

	text-decoration: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) and (min-width: 768px) {

	#mas-wishlist .mas-wishlist-columns,
	#mas-wishlist .mas-wishlist-product {

		grid-template-columns:
			130px
			minmax(240px, 1fr)
			150px
			125px
			155px;
	}


	#mas-wishlist .mas-wishlist-image,
	#mas-wishlist .mas-wishlist-image-wrap,
	#mas-wishlist .mas-wishlist-image-link {

		width: 130px;
		height: 130px;
	}


	#mas-wishlist .mas-wishlist-product-title {
		font-size: 18px;
	}


	#mas-wishlist .mas-wishlist-button {

		min-width: 145px;

		padding: 0 12px;

		font-size: 12px;
	}

}


/* =========================================================
   MOBILE
   TWO COLUMN PRODUCT CARDS
   ========================================================= */

@media (max-width: 767px) {


	/* TITLE */

	#mas-wishlist .mas-wishlist-heading {
		margin-bottom: 9px;
	}


	#mas-wishlist .mas-wishlist-title {

		font-size: 25px;

		line-height: 1.2;
	}


	/* BREADCRUMB */

	#mas-wishlist .mas-wishlist-breadcrumb {

		margin-bottom: 20px;

		gap: 8px;

		font-size: 11px;
	}


	/* REMOVE DESKTOP HEADER */

	#mas-wishlist .mas-wishlist-columns {
		display: none;
	}


	/* TWO COLUMN GRID */

	#mas-wishlist .mas-wishlist-products {

		display: grid;

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		border-top: 1px solid var(--mas-border);

		border-left: 1px solid var(--mas-border);
	}


	/* CARD */

	#mas-wishlist .mas-wishlist-product {

		display: flex;

		flex-direction: column;

		align-items: stretch;

		min-width: 0;

		min-height: 0;

		margin: 0;

		padding: 12px 11px 12px;

		border: 0;

		border-right: 1px solid var(--mas-border);

		border-bottom: 1px solid var(--mas-border);

		background: #fff;
	}


	/* =====================================================
	   TRUE SQUARE PRODUCT IMAGE
	   ===================================================== */

	#mas-wishlist .mas-wishlist-image {

		width: 100%;

		height: auto;

		aspect-ratio: 1 / 1;

		position: relative;

		display: block;

		margin: 0 0 11px;

		padding: 0;
	}


	#mas-wishlist .mas-wishlist-image-wrap {

		width: 100%;
		height: 100%;

		position: relative;

		display: flex;

		align-items: center;
		justify-content: center;

		background: #fff;
	}


	#mas-wishlist .mas-wishlist-image-link {

		width: 100%;
		height: 100%;

		display: flex;

		align-items: center;
		justify-content: center;

		padding: 10px;

		background: #fff;

		overflow: hidden;
	}


	#mas-wishlist .mas-wishlist-image img {

		width: 100%;
		height: 100%;

		max-width: none;
		max-height: none;

		object-fit: contain;

		transform: none !important;
	}


	/* =====================================================
	   REMOVE BUTTON
	   FULL CIRCLE INSIDE IMAGE
	   ===================================================== */

	#mas-wishlist .mas-wishlist-remove {

		top: 6px;
		right: 6px;

		width: 30px;
		height: 30px;

		font-size: 21px;

		border-radius: 50%;

		z-index: 50;
	}


	#mas-wishlist .mas-wishlist-remove::before,
	#mas-wishlist .mas-wishlist-remove::after {

		content: none !important;

		display: none !important;
	}


	/* =====================================================
	   PRODUCT INFO
	   ===================================================== */

	#mas-wishlist .mas-wishlist-info {

		display: flex;

		flex-direction: column;

		align-items: center;

		min-width: 0;

		padding: 0;

		text-align: center;
	}


	/* TITLE */

	#mas-wishlist .mas-wishlist-product-title {

		width: 100%;

		display: -webkit-box;

		-webkit-box-orient: vertical;

		-webkit-line-clamp: 2;

		overflow: hidden;

		margin: 0 0 7px;

		font-size: 13px;

		line-height: 1.35;

		font-weight: 800;

		min-height: 35px;
	}


	/* PRICE */

	#mas-wishlist .mas-wishlist-price-row {

		width: 100%;

		display: flex;

		align-items: center;

		justify-content: center;

		flex-wrap: wrap;

		gap: 5px;

		margin-bottom: 6px;
	}


	#mas-wishlist .mas-wishlist-discount {

		font-size: 13px;
	}


	#mas-wishlist .mas-wishlist-price {

		font-size: 13px;
	}


	#mas-wishlist .mas-wishlist-price del {

		font-size: 11px;

		margin-right: 3px;
	}


	/* STOCK */

	#mas-wishlist .mas-wishlist-stock {

		margin-bottom: 10px;

		font-size: 12px;
	}


	/* BUTTON */

	#mas-wishlist .mas-wishlist-action {

		width: 100%;

		margin-top: auto;

		display: block;
	}


	#mas-wishlist .mas-wishlist-button {

		width: 100%;

		min-width: 0;

		height: 39px;

		padding: 0 7px;

		font-size: 10.5px;

		gap: 4px;
	}


	#mas-wishlist .mas-wishlist-button-arrow {
		font-size: 15px;
	}


	/* SHARE */

	#mas-wishlist .mas-wishlist-share {

		flex-wrap: wrap;

		gap: 9px;

		margin-top: 25px;
	}


	#mas-wishlist .mas-wishlist-share-label {

		font-size: 19px;
	}


	#mas-wishlist .mas-wishlist-share-buttons {
		gap: 7px;
	}

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

	#mas-wishlist .mas-wishlist-title {
		font-size: 23px;
	}


	#mas-wishlist .mas-wishlist-product {

		padding: 10px 8px 11px;
	}


	#mas-wishlist .mas-wishlist-image-link {
		padding: 8px;
	}


	#mas-wishlist .mas-wishlist-product-title {

		font-size: 12px;

		min-height: 33px;
	}


	#mas-wishlist .mas-wishlist-discount,
	#mas-wishlist .mas-wishlist-price {

		font-size: 12px;
	}


	#mas-wishlist .mas-wishlist-stock {
		font-size: 11px;
	}


	#mas-wishlist .mas-wishlist-button {

		height: 37px;

		font-size: 10px;
	}

}