/* Shop pages: product grid, product page and WhatsApp buttons. Loads after style.css. */

/* Anything with the hidden attribute stays hidden, whatever the theme's display rules say */
[hidden] {
	display: none !important;
}

/* ---------- Shop section (home page) ---------- */

.shop-section {
	padding: 20px 0 60px;
	scroll-margin-top: 110px;
}

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	margin-bottom: 50px;
}

.shop-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-categories button,
.shop-sort {
	padding: 4px 0;
	border: 0;
	background: none;
	color: #999;
	font-family: Catamaran, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .2s;
}

.shop-categories button:hover,
.shop-categories button.is-active {
	color: #080808;
}

.shop-sort {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	cursor: default;
}

.shop-sort select {
	height: auto;
	margin: 0;
	padding: 8px 34px 8px 12px;
	border: 1px solid #e5e5e5;
	border-radius: 0;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23080808'/%3E%3C/svg%3E") no-repeat right 12px center;
	color: #080808;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.shop-search-info {
	margin: -25px 0 35px;
	color: #999;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
}

.shop-search-info a {
	color: #080808;
	text-decoration: underline;
}

.shop-status {
	padding: 60px 0;
	color: #999;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	text-align: center;
}

.shop-status strong {
	color: #080808;
}

/* ---------- About section (below the products): photos on the left, what we sell and where on the right ---------- */

.shop-about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 80px;
	margin-top: 20px;
	padding: 100px 0 110px;
	border-top: 1px solid #ebebeb;
}

/* Grey panel with the two product photos and a black badge, like the theme's image blocks */
.shop-about__media {
	position: relative;
	aspect-ratio: 1 / 1.05;
	background: #f3f3f3;
}

.shop-about__photo {
	position: absolute;
}

.shop-about__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.shop-about__photo--cctv {
	top: 10%;
	left: 8%;
	width: 84%;
}

/* High enough that the badge below never covers the products */
.shop-about__photo--ups {
	bottom: 22%;
	left: 12%;
	width: 76%;
}

.shop-about__badge {
	position: absolute;
	right: -24px;
	bottom: 36px;
	display: grid;
	gap: 6px;
	padding: 24px 30px;
	background: #080808;
}

.shop-about__badge-title {
	color: #fff;
	font-family: Catamaran, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.shop-about__badge-text {
	color: #b5b5b5;
	font-size: 14px;
}

.shop-intro__eyebrow {
	margin: 0 0 16px;
	color: #929292;
	font-family: Catamaran, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.shop-intro .shop-intro__title {
	margin: 0 0 24px;
	color: #080808;
	font-family: Catamaran, sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.shop-intro__text {
	margin: 0 0 14px;
	color: #929292;
	font-size: 17px;
	line-height: 1.75;
}

.shop-about__hindi {
	color: #6f6f6f;
}

.shop-intro__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 30px;
	margin: 36px 0 44px;
	padding: 36px 0 0;
	border-top: 1px solid #ebebeb;
	list-style: none;
}

.shop-intro__list li {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: start;
	gap: 16px;
}

.shop-about__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: #f3f3f3;
	color: #080808;
}

.shop-about__icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.shop-intro__list .shop-intro__label {
	margin: 2px 0 6px;
	color: #080808;
	font-family: Catamaran, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.shop-intro__list p {
	margin: 0;
	color: #929292;
	font-size: 15px;
	line-height: 1.6;
}

.shop-about__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.shop-about__actions .product-buy {
	flex: 0 1 auto;
	height: 54px;
	padding: 0 30px;
	font-size: 13px;
}

@media (max-width: 1200px) {
	.shop-about {
		gap: 50px;
	}

	.shop-intro .shop-intro__title {
		font-size: 28px;
	}
}

/* Tablets and phones: photos on top, text underneath */
@media (max-width: 1024px) {
	.shop-about {
		grid-template-columns: minmax(0, 1fr);
		padding: 80px 0 90px;
	}

	.shop-about__media {
		width: 100%;
		max-width: 520px;
	}

	.shop-about__badge {
		right: 20px;
		bottom: 20px;
	}
}

@media (max-width: 768px) {
	.shop-about {
		gap: 40px;
		padding: 60px 0 70px;
	}

	.shop-intro .shop-intro__title {
		font-size: 24px;
		letter-spacing: 3px;
	}

	.shop-intro__text {
		font-size: 16px;
	}

	.shop-intro__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	/* Taller panel: both photos on top, the badge as a strip along the bottom */
	.shop-about__media {
		aspect-ratio: 1 / 1.25;
	}

	.shop-about__photo--cctv {
		top: 6%;
	}

	.shop-about__photo--ups {
		bottom: 26%;
	}

	.shop-about__badge {
		right: 16px;
		bottom: 16px;
		left: 16px;
		padding: 14px 18px;
	}
}

@media (max-width: 480px) {
	.shop-about__actions > * {
		width: 100%;
	}
}

/* ---------- Gallery (photos from Admin → Gallery), under the About section ---------- */

.shop-gallery {
	padding: 0 0 110px;
}

.shop-gallery__head {
	margin: 0 0 40px;
}

.shop-gallery__head .shop-intro__eyebrow {
	margin-bottom: 12px;
}

.shop-gallery .shop-gallery__title {
	margin: 0;
	color: #080808;
	font-family: Catamaran, sans-serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.shop-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.shop-gallery__item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: #f3f3f3;
	cursor: zoom-in;
}

.shop-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.shop-gallery__item:hover img {
	transform: scale(1.05);
}

.shop-gallery__item:focus-visible {
	outline: 2px solid #080808;
	outline-offset: 3px;
}

.shop-gallery__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 40px 16px 14px;
	background: linear-gradient(transparent, rgba(0, 0, 0, .6));
	color: #fff;
	font-family: Catamaran, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}

/* Full-screen photo viewer */
.gallery-open {
	overflow: hidden;
}

.gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr) 90px;
	align-items: center;
	background: rgba(8, 8, 8, .94);
}

.gallery-lightbox__figure {
	display: grid;
	justify-items: center;
	gap: 14px;
	margin: 0;
	padding: 60px 0;
}

.gallery-lightbox__figure img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 190px);
	object-fit: contain;
}

.gallery-lightbox__figure figcaption {
	color: #e5e5e5;
	font-family: Catamaran, sans-serif;
	font-size: 16px;
	text-align: center;
}

.gallery-lightbox__counter {
	color: #929292;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
}

.gallery-lightbox__close,
.gallery-lightbox__nav {
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .3);
	background: none;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.gallery-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
}

.gallery-lightbox__nav {
	justify-self: center;
	width: 52px;
	height: 52px;
}

.gallery-lightbox__close:hover,
.gallery-lightbox__nav:hover {
	background: #fff;
	color: #080808;
}

.gallery-lightbox.is-single .gallery-lightbox__nav,
.gallery-lightbox.is-single .gallery-lightbox__counter {
	visibility: hidden;
}

/* YouTube videos: play button on thumbnails, player in place of the photo */
.yt-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 60px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
	transition: transform .2s;
}

.yt-play svg {
	display: block;
	width: 100%;
	height: auto;
}

.yt-facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
}

.yt-facade img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yt-facade:hover .yt-play,
.shop-gallery__item--video:hover .yt-play {
	transform: translate(-50%, -50%) scale(1.1);
}

.yt-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.shop-gallery__item--video {
	cursor: pointer;
}

.gallery-lightbox__figure img[hidden] {
	display: none;
}

.gallery-lightbox__video {
	width: min(100%, calc((100vh - 190px) * 16 / 9));
	aspect-ratio: 16 / 9;
	background: #000;
}

@media (max-width: 1024px) {
	.shop-gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.shop-gallery {
		padding-bottom: 70px;
	}

	.shop-gallery .shop-gallery__title {
		font-size: 20px;
		letter-spacing: 3px;
	}

	.shop-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	/* Phones: photo full width, arrows at the bottom */
	.gallery-lightbox {
		grid-template-columns: minmax(0, 1fr);
	}

	.gallery-lightbox__figure {
		padding: 80px 12px 110px;
	}

	.gallery-lightbox__figure img {
		max-height: calc(100vh - 260px);
	}

	.gallery-lightbox__video {
		width: min(100%, calc((100vh - 260px) * 16 / 9));
	}

	.gallery-lightbox__nav {
		position: absolute;
		bottom: 28px;
	}

	.gallery-lightbox__nav--prev {
		left: 24px;
	}

	.gallery-lightbox__nav--next {
		right: 24px;
	}
}

/* "Write a review on Google" button (home page, contact page) */
.shop-review-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	height: 54px;
	padding: 0 30px;
	border: 1px solid #080808;
	background: #fff;
	color: #080808 !important;
	font-family: Catamaran, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .2s, color .2s;
}

.shop-review-button:hover {
	background: #080808;
	color: #fff !important;
}

.review-star {
	flex: none;
	width: 18px;
	height: 18px;
	fill: #f4b400;
}

@media (max-width: 480px) {
	.shop-review-button {
		width: 100%;
		padding: 0 16px;
		letter-spacing: 1.5px;
	}
}

/* ---------- Product grid (reuses the theme's product list look) ---------- */

.shop-section .mkd-pl-holder .mkd-pl-outer,
.product-related .mkd-pl-holder .mkd-pl-outer {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 60px 50px;
	margin: 0 !important;
}

.shop-section .mkd-pl-outer::before,
.shop-section .mkd-pl-outer::after,
.product-related .mkd-pl-outer::before,
.product-related .mkd-pl-outer::after {
	display: none !important;
}

.shop-section .mkd-pli,
.product-related .mkd-pli {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.shop-section .mkd-pli-inner,
.product-related .mkd-pli-inner {
	position: relative;
	display: block !important;
	width: 100%;
}

.shop-section .mkd-pli-image,
.product-related .mkd-pli-image {
	position: relative;
	display: block !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f3f3f3;
}

/* The photo sits inside the grey tile with space around it, like the theme's own product images */
.shop-section .mkd-pli-image img,
.product-related .mkd-pli-image img {
	box-sizing: border-box;
	width: 100%;
	height: 100% !important;
	padding: 12%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .5s ease;
}

.shop-section .mkd-pli:hover .mkd-pli-image img,
.product-related .mkd-pli:hover .mkd-pli-image img {
	transform: scale(1.04);
}

.shop-section .mkd-pli-new-product,
.shop-section .mkd-pli-onsale,
.product-related .mkd-pli-new-product,
.product-related .mkd-pli-onsale {
	z-index: 1;
}

.shop-section .mkd-pli-link,
.product-related .mkd-pli-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.shop-no-image {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #bbb;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
}

.shop-price-request {
	color: #999;
}

.shop-buy {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #080808 !important;
}

.wa-icon {
	flex: none;
	width: 15px;
	height: 15px;
	fill: #25d366;
}

/* Touch screens have no hover: always show the buy link under the price */
@media (hover: none) {
	.shop-section .mkd-pli .mkd-pli-add-to-cart,
	.product-related .mkd-pli .mkd-pli-add-to-cart {
		position: static !important;
		margin-top: 8px;
		opacity: 1 !important;
		transform: none !important;
	}

	.shop-section .mkd-pli:hover .mkd-pli-price,
	.product-related .mkd-pli:hover .mkd-pli-price {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Loading placeholders */
.shop-skeleton .mkd-pli-image,
.shop-skeleton__line {
	animation: shop-pulse 1.2s ease-in-out infinite;
}

.shop-skeleton .mkd-pli-text-wrapper {
	display: grid !important;
	justify-items: center;
	gap: 10px;
	padding-top: 22px;
}

.shop-skeleton__line {
	display: block;
	width: 60%;
	height: 12px;
	background: #eee;
}

.shop-skeleton__line--short {
	width: 30%;
}

@keyframes shop-pulse {
	50% { opacity: .5; }
}

@media (max-width: 1024px) {
	.shop-section .mkd-pl-holder .mkd-pl-outer,
	.product-related .mkd-pl-holder .mkd-pl-outer {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 50px 30px;
	}
}

@media (max-width: 768px) {
	.shop-toolbar {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 30px;
	}

	.shop-categories {
		gap: 6px 20px;
	}

	.shop-section .mkd-pl-holder .mkd-pl-outer,
	.product-related .mkd-pl-holder .mkd-pl-outer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 16px;
	}

	.shop-section .mkd-pli-title,
	.product-related .mkd-pli-title {
		font-size: 13px;
		letter-spacing: .05em;
	}

	.shop-section .mkd-pli-add-to-cart,
	.product-related .mkd-pli-add-to-cart {
		font-size: 11px !important;
		letter-spacing: 1px !important;
	}

	.shop-buy {
		white-space: normal !important;
	}
}

/* ---------- Product page (styled after the theme's single product page) ---------- */

.product-page {
	padding-bottom: 60px;
}

.product-loading,
.product-message {
	padding: 80px 0;
	color: #999;
	text-align: center;
}

.product-message h3 {
	margin-bottom: 10px;
}

.shop-back {
	display: inline-block;
	margin-bottom: 30px;
	color: #999;
	font-family: Catamaran, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.shop-back:hover {
	color: #080808;
}

/* Breadcrumbs: Home / Shop / Category / Product (styled like the theme's title-bar breadcrumbs) */
.product-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 0 0 40px;
	color: #929292;
	font-family: Catamaran, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
}

.product-breadcrumbs a {
	color: #929292;
	transition: color .2s;
}

.product-breadcrumbs a:hover {
	color: #080808;
}

.product-breadcrumbs [aria-current] {
	overflow-wrap: anywhere;
}

/* Gallery (thumbnails on the left, like the theme's "thumbnails on left side" layout) + white summary panel */
.product-card {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: stretch;
	column-gap: 40px;
}

/* Only as tall as its photo, even when a long product name makes the summary taller */
.product-gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	align-self: start;
	gap: 22px;
}

.product-gallery.has-thumbs {
	grid-template-columns: 113px minmax(0, 1fr);
}

/* The thumbnail column is exactly as tall as the main photo; 4 thumbnails fit, more scroll */
.product-thumbs-wrap {
	position: relative;
	align-self: stretch;
}

.product-thumbs {
	position: absolute;
	inset: 0;
	display: grid;
	grid-auto-rows: calc((100% - 54px) / 4);
	gap: 18px;
	overflow-y: auto;
	scrollbar-width: none;
}

.product-thumbs::-webkit-scrollbar {
	display: none;
}

.product-thumb {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: #f3f3f3;
	cursor: pointer;
}

.product-thumb img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 8%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: opacity .2s;
}

.product-thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid transparent;
	pointer-events: none;
	transition: border-color .2s;
}

.product-thumb:hover img {
	opacity: .75;
}

.product-thumb.is-active::after {
	border-color: #080808;
}

.product-main-photo {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f3f3f3;
}

.product-card__photo {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 10%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.product-badge {
	position: absolute;
	top: 28px;
	z-index: 1;
	color: #080808;
	font-family: Catamaran, sans-serif;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.product-badge--new { left: 28px; }
.product-badge--sale { right: 28px; }

/* A YouTube video in place of the main photo */
.product-video {
	position: absolute;
	inset: 0;
	background: #000;
}

.product-main-photo.is-video .product-badge {
	display: none;
}

.product-thumb--video img {
	padding: 0;
	object-fit: cover;
	mix-blend-mode: normal;
}

.product-thumb .yt-play {
	width: 36px;
}

.product-page .product-card .product-card__summary.mkd-single-product-summary {
	display: flex;
	flex-direction: column;
	justify-content: center;
	float: none;
	width: auto;
	padding: 56px;
	background: #fff;
}

/* The product name is the page's main heading (h1) but keeps the theme's h2 size */
.product-page .product-card__summary .mkd-single-product-title {
	margin: 0 0 14px;
	font-size: 30px;
	line-height: 48px;
	letter-spacing: 3.7px;
	overflow-wrap: anywhere;
}

.product-brand {
	margin: 0 0 12px;
	color: #929292;
	font-family: Catamaran, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.product-brand__sep {
	margin: 0 2px;
}

.product-page .product-card__summary .price {
	margin: 0 0 24px;
}

.product-page .product-card__summary .price .shop-price-request {
	color: #929292;
	font-size: 18px;
}

/* Availability, condition and warranty under the price */
.product-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0 0 40px;
	padding: 0;
	color: #080808;
	font-size: 16px;
	list-style: none;
}

.product-facts li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.product-facts span {
	color: #929292;
}

.product-stock::before {
	content: '';
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2e9e5b;
}

.product-stock--out_of_stock::before {
	background: #c0392b;
}

.product-stock--preorder::before {
	background: #e0a100;
}

.product-excerpt {
	margin: 0 0 44px;
	color: #929292;
	font-size: 18px;
	line-height: 1.75;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* "In the box" under the specifications table */
.product-page .woocommerce-tabs .product-box-title {
	margin: 44px 0 16px;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.product-in-box {
	color: #929292;
	font-size: 18px;
	line-height: 1.75;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* Brand line and out-of-stock look on product cards */
.shop-card-brand {
	margin: 0 0 2px;
	color: #929292;
	font-family: Catamaran, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.mkd-pli.is-out-of-stock .mkd-pli-image img {
	opacity: .55;
}

/* Buy on WhatsApp (black) + Ask a question (white), side by side; they stack when there isn't room */
.product-order {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 560px;
}

.product-buy,
.product-ask {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 220px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 62px;
	padding: 0 20px;
	border: 1px solid #080808;
	font-family: Catamaran, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .2s, border-color .2s, color .2s;
}

.product-buy {
	background: #080808;
	color: #fff !important;
}

.product-buy:hover {
	border-color: #313131;
	background: #313131;
}

.product-ask {
	background: #fff;
	color: #080808 !important;
}

.product-ask:hover {
	background: #080808;
	color: #fff !important;
}

.product-buy .wa-icon,
.product-ask .wa-icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.product-note {
	margin: 0;
	color: #929292;
	font-size: 15px;
}

/* Tabs (the theme styles the tab buttons and the full-width white panel) */
.product-page .woocommerce-tabs h2 {
	margin: 0 0 22px;
	font-size: 18px;
	letter-spacing: 3px;
}

.product-page .woocommerce-tabs .product-description {
	color: #929292;
	font-size: 18px;
	line-height: 1.75;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.product-page .woocommerce-tabs .shop_attributes th {
	padding-right: 40px;
	color: #080808;
	white-space: nowrap;
}

.product-page .woocommerce-tabs .shop_attributes td,
.product-page .woocommerce-tabs .shop_attributes td a {
	color: #929292;
}

.product-page .woocommerce-tabs .shop_attributes td a:hover {
	color: #080808;
}

.product-page .woocommerce-tabs .shop_attributes td del {
	margin-right: 8px;
}

.product-page .woocommerce-tabs .shop_attributes td ins {
	text-decoration: none;
}

/* Small laptops: the two columns get narrow, so tighten the summary and shrink the title */
@media (max-width: 1400px) {
	.product-page .product-card .product-card__summary.mkd-single-product-summary {
		padding: 44px;
	}

	.product-page .product-card__summary .mkd-single-product-title {
		font-size: 28px;
		line-height: 1.35;
	}
}

/* Tablets and phones: photo on top, summary underneath */
@media (max-width: 1024px) {
	.product-card {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}

	/* Main photo first, thumbnails in a row underneath */
	.product-gallery.has-thumbs {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.product-thumbs-wrap {
		order: 2;
	}

	.product-thumbs {
		position: static;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: auto;
		gap: 10px;
		overflow: visible;
	}

	.product-thumb {
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.product-badge {
		top: 20px;
	}

	.product-badge--new { left: 20px; }
	.product-badge--sale { right: 20px; }

	.product-page .product-card .product-card__summary.mkd-single-product-summary {
		padding: 32px 24px 36px;
	}

	.product-page .product-card__summary .price {
		margin-bottom: 28px;
	}

	.product-excerpt {
		margin-bottom: 32px;
		font-size: 16px;
	}
}

@media (max-width: 600px) {
	.product-page .product-card__summary .mkd-single-product-title {
		font-size: 22px;
	}

	.product-breadcrumbs {
		gap: 2px 8px;
		margin-bottom: 20px;
		font-size: 15px;
	}

	.product-page .woocommerce-tabs ul.tabs {
		display: flex;
	}

	/* Equal-height tabs even when "Additional information" wraps onto two lines */
	.product-page .woocommerce-tabs ul.tabs > li {
		display: flex;
		flex: 1;
		float: none;
	}

	.product-page .woocommerce-tabs ul.tabs > li > a {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		padding: 14px 8px;
		font-size: 11px;
		line-height: 16px;
		text-align: center;
	}

	.product-page .woocommerce-tabs .product-description {
		font-size: 16px;
	}
}

/* ---------- Page width on phones and tablets ---------- */

/* The theme uses fixed content widths (300px on most phones, 600px on tablets), which leaves wide empty
   margins on bigger phones and almost none on small ones. Use the whole screen with an even gutter instead. */
@media only screen and (max-width: 768px) {
	.mkd-container-inner,
	.mkd-grid,
	.mkd-row-grid-section {
		width: calc(100% - 64px);
	}
}

@media only screen and (max-width: 480px) {
	.mkd-container-inner,
	.mkd-grid,
	.mkd-row-grid-section {
		width: calc(100% - 40px);
	}
}

/* ---------- Header ---------- */

/* Keep the search and side-menu icons vertically centred now that the cart and login links are gone */
.mkd-header-divided .mkd-page-header .mkd-menu-area .mkd-main-menu-widget-area-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* The shop-name logo is wider than the theme's: keep it beside the MENU button on phones */
.mkd-mobile-header .mkd-mobile-logo-wrapper a {
	height: 14px !important;
}

@media only screen and (max-width: 360px) {
	.mkd-mobile-header .mkd-mobile-logo-wrapper a {
		height: 12px !important;
	}
}

/* Small laptops (the theme's 950px content width): the wide logo leaves too little room beside it and
   "Contact" dropped onto a second line under the header, so tighten the menu spacing there */
@media only screen and (max-width: 1200px) {
	.mkd-header-divided .mkd-page-header .mkd-main-menu > ul > li > a span.item_inner {
		padding: 0 20px;
	}

	.mkd-header-divided .mkd-page-header .mkd-vertical-align-containers .mkd-position-left .mkd-position-left-inner {
		padding-right: 20px;
	}

	.mkd-header-divided .mkd-page-header .mkd-vertical-align-containers .mkd-position-right .mkd-position-right-inner {
		padding-left: 20px;
	}
}

/* ---------- Side menu and footer text ---------- */

/* The side menu is 605px wide: never let it be wider than the screen */
.mkd-side-menu {
	max-width: 100%;
}

.shop-side-text {
	margin: 10px 0 0;
	color: #929292;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.4;
}

.shop-side-wa {
	color: #fff !important;
	font-family: Catamaran, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.mkd-page-footer .shop-footer-text,
.mkd-page-footer .shop-steps li {
	margin: 0 0 9px;
	color: #929292;
}

/* ---------- Social media icons (footer, side menu, contact page) ---------- */

.shop-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* !important: the theme's footer and side-menu link styles would otherwise knock the icon out of the centre */
.shop-social .shop-social__link {
	display: grid !important;
	place-items: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0 !important;
	line-height: 1;
	width: 42px;
	height: 42px;
	border: 1px solid #e1e1e1;
	color: #080808 !important;
	transition: background-color .2s, border-color .2s, color .2s;
}

.shop-social__link:hover {
	border-color: #080808;
	background: #080808;
	color: #fff !important;
}

.shop-social__link svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.shop-social--light .shop-social__link {
	border-color: rgba(255, 255, 255, .25);
	color: #fff !important;
}

.shop-social--light .shop-social__link:hover {
	border-color: #fff;
	background: #fff;
	color: #080808 !important;
}

.mkd-page-footer .shop-social-item {
	margin-top: 20px;
}

.mkd-side-menu .shop-social {
	margin-top: 26px;
}

/* ---------- Floating WhatsApp button ---------- */

.wa-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1000;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
	transition: transform .2s;
}

.wa-float:hover {
	transform: scale(1.06);
}

.wa-float .wa-icon {
	width: 30px;
	height: 30px;
	fill: #fff;
}

#mkd-back-to-top {
	right: 32px;
	bottom: 96px;
}

@media (max-width: 768px) {
	.wa-float {
		right: 16px;
		bottom: 16px;
		width: 52px;
		height: 52px;
	}
}