/* Product page (ProductPageMobile.php). */

.amless-care-note {
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background: #f3efea;
	font-size: 14px;
	line-height: 1.5;
}

.amless-care-note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Gallery counter + first-load swipe hint (all sizes, carousel only). */
.woocommerce-product-gallery {
	position: relative;
}

.amless-gallery-count {
	position: absolute;
	z-index: 5;
	top: 12px;
	right: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(32, 32, 37, 0.75);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	pointer-events: none;
}

.amless-gallery-hint {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: 56px;
	padding: 6px 14px 6px 34px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202025' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E") no-repeat 12px 50% / 16px;
	color: #202025;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	transform: translateX(-50%);
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.amless-gallery-hint.is-gone {
	opacity: 0;
}

/* Kept above the sticky bar / screen edge on phones (--amless-gallery-lift set by product-page-mobile.js). */
.woocommerce-product-gallery .flickity-page-dots,
.amless-gallery-hint {
	translate: 0 calc(-1 * var(--amless-gallery-lift, 0px));
}

/* Darker, bigger dots. */
/* The theme draws each dot as a ::before inside a padded 14px box; we draw
   the .dot itself instead, so drop the padding and the pseudo-element. */
.woocommerce-product-gallery .flickity-page-dots {
	gap: 6px;
}

.woocommerce-product-gallery .flickity-page-dots .dot {
	flex: 0 0 auto;
	width: 8px !important;
	height: 8px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 999px !important;
	opacity: 1 !important;
	background: rgba(32, 32, 37, 0.25) !important;
	transition: width 0.25s ease, background 0.25s ease;
}

.woocommerce-product-gallery .flickity-page-dots .dot::before {
	content: none !important;
}

.woocommerce-product-gallery .flickity-page-dots .dot.is-selected {
	width: 22px !important;
	border-radius: 999px !important;
	background: #202025 !important;
}

/* Brief highlight when the bar jumps to the size picker. */
.amless-pulse {
	animation: amless-pulse 1.6s ease;
	border-radius: 12px;
}

@keyframes amless-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(32, 32, 37, 0); }
	30% { box-shadow: 0 0 0 6px rgba(32, 32, 37, 0.15); }
}

/* Sticky bottom bar (phones). */
.amless-pdp-bar {
	position: fixed;
	z-index: 9990;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: #fff;
	box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
}

.amless-pdp-bar[hidden] {
	display: none;
}

/* Out of the way while the side cart or the menu is open (it sits above them and covered their buttons). */
body.mbf-shop-minicart-active .amless-pdp-bar,
body.mbf-offcanvas-active .amless-pdp-bar {
	display: none;
}

.amless-pdp-bar__info {
	flex: 1 1 auto;
	min-width: 0;
}

.amless-pdp-bar__name {
	display: block;
	overflow: hidden;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.amless-pdp-bar__price {
	display: block;
	font-size: 13px;
}

.amless-pdp-bar__price del {
	opacity: 0.6;
}

.amless-pdp-bar__price ins {
	text-decoration: none;
	color: var(--mbf-color-sale, #d0021b);
	font-weight: 700;
}

.amless-pdp-bar__btn {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 0 22px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #202025 !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
}

body.amless-has-pdp-bar .amless-consent {
	bottom: 84px;
}

@media (max-width: 781px) {
	/* Photo right under the header: no breadcrumb row, no top gap. */
	.single-product .mbf-site-content {
		margin-top: 0 !important;
	}

	.single-product .woocommerce-breadcrumb {
		display: none !important;
	}

	/* Photos edge to edge: out of the theme container's 20px side padding. */
	.single-product .mbf-single-product .woocommerce-product-gallery {
		width: 100vw !important;
		min-width: 100vw;
		max-width: none !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}

	.single-product .mbf-single-product .woocommerce-product-gallery img,
	.single-product .mbf-single-product .woocommerce-product-gallery .flickity-viewport {
		border-radius: 0 !important;
	}

	/* Trust points: compact 2×2 cards, icon + title (like the homepage). */
	.woocommerce-tabs-desc-info {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 10px !important;
	}

	.woocommerce-tabs-desc-info-item {
		display: flex !important;
		align-items: center;
		gap: 10px !important;
		margin: 0 !important;
		padding: 12px !important;
		border-radius: 12px;
		background: #f6f4f1;
	}

	.woocommerce-tabs-desc-info-item-img img {
		width: 22px !important;
		height: 22px !important;
	}

	.woocommerce-tabs-desc-info-item-heading {
		margin: 0 !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		line-height: 1.3 !important;
	}

	.woocommerce-tabs-desc-info-item-text {
		display: none !important;
	}

	/* "Também vais gostar": swipe row instead of a 2-column grid. */
	.single-product .related.products ul.products {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 14px !important;
		margin: 0 calc(-1 * var(--amless-gutter, 20px)) !important;
		padding: 0 var(--amless-gutter, 20px) 8px !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--amless-gutter, 20px);
		scrollbar-width: none;
		grid-template-columns: none !important;
	}

	.single-product .related.products ul.products::-webkit-scrollbar {
		display: none;
	}

	.single-product .related.products ul.products > li.product {
		flex: 0 0 calc(50% - 25px) !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		scroll-snap-align: start;
	}
}

@media (max-width: 781px) {
	/* Card titles/prices in the "Também vais gostar" swipe, same as homepage cards. */
	.single-product .related.products .woocommerce-loop-product__title {
		margin-top: 10px !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1.35 !important;
	}

	.single-product .related.products .price {
		font-size: 14px !important;
	}
}

@media (max-width: 781px) {
	/* Tabs ("Descrição / Avaliações") as a compact horizontal switch, not a stacked menu. */
	.single-product .woocommerce-tabs ul.tabs {
		display: flex !important;
		gap: 4px;
		margin: 0 0 16px !important;
		padding: 4px !important;
		border: 0 !important;
		border-radius: 999px;
		background: #f3efea !important;
	}

	.single-product .woocommerce-tabs ul.tabs li {
		flex: 1 1 0;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	.single-product .woocommerce-tabs ul.tabs li::before,
	.single-product .woocommerce-tabs ul.tabs li::after {
		display: none !important;
	}

	.single-product .woocommerce-tabs ul.tabs li a {
		display: block !important;
		padding: 10px !important;
		border-radius: 999px;
		font-size: 14px !important;
		font-weight: 600 !important;
		text-align: center;
	}

	.single-product .woocommerce-tabs ul.tabs li.active a {
		background: #202025 !important;
		color: #fff !important;
	}

	/* The panel repeats "Descrição" as a big heading right under the tab. */
	.single-product .woocommerce-tabs .woocommerce-panel-subheading {
		display: none !important;
	}

	/* Category tag chip under the button adds nothing on phones. */
	.single-product .product_meta {
		display: none !important;
	}
}

@media (max-width: 781px) {
	.single-product .woocommerce-tabs ul.tabs.wc-tabs {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
	}

	.single-product .woocommerce-tabs ul.tabs.wc-tabs li {
		width: auto !important;
		display: block !important;
	}
}