/**
 * MH Unlock storefront sections - dark theme.
 *
 * Colours come from the child theme's tokens, with dark fallbacks so the file
 * still reads correctly if the theme is swapped.
 */

/* ---------------------------------------------------------------------------
   Section shell
   --------------------------------------------------------------------------- */

.mh-section {
	margin: 0 0 3.25rem;
}

/* Same panel treatment as the shop / category archive header, so a section
   title on the homepage and a page title elsewhere read as the same thing. */
.mh-section__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.35rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--mh-line, #1c2f36);
	border-radius: var(--mh-radius, 12px);
	background:
		radial-gradient(620px circle at 50% 0%, rgba(42, 169, 192, 0.10), transparent 65%),
		var(--mh-surface, #101a1f);
	overflow: hidden;
	text-align: center;
}

/* Scoped selector: the theme's heading rules carry more weight than a single
   class, and their 20px bottom margin was padding the panel out to 93px. */
.mh-section .mh-section__head .mh-section__title,
.mh-section__head h2.mh-section__title {
	margin: 0 !important;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--mh-ink, #eef6f8);
	text-align: center;
}

/* Pulled out of the flow so the title stays optically centred in the panel
   rather than being pushed left by the link's width. */
.mh-section__more {
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--mh-primary, #2aa9c0);
	text-decoration: none;
	white-space: nowrap;
	/* The theme puts `transition: all` on links. That animates the centring
	   transform when the layout flips at the breakpoint, so the link slides
	   over the title instead of snapping into place. Colour is all that needs
	   to animate here. */
	transition: color 0.16s ease;
}

.mh-section__more svg {
	width: 14px;
	height: 14px;
	transition: transform 0.18s ease;
}

.mh-section__more:hover,
.mh-section__more:focus-visible {
	color: var(--mh-primary-dark, #4dd0e1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mh-section__more:hover svg {
	transform: translateX(2px);
}

/* ---------------------------------------------------------------------------
   Category grid
   --------------------------------------------------------------------------- */

.mh-cats {
	display: grid;
	grid-template-columns: repeat(var(--mh-cols, 3), minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-cat {
	margin: 0;
	list-style: none;
}

.mh-cat__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 100%;
	padding: 1.1rem 1.15rem;
	border: 1px solid var(--mh-line, #1c2f36);
	border-radius: var(--mh-radius, 12px);
	background: var(--mh-surface, #101a1f);
	color: inherit;
	text-decoration: none !important;
	overflow: hidden;
	transition: border-color 0.18s var(--mh-ease), box-shadow 0.18s var(--mh-ease),
		transform 0.18s var(--mh-ease), background 0.18s var(--mh-ease);
}

/* Astra underlines content links; these are cards, not sentences. */
.mh-cat__link,
.mh-cat__link:hover,
.mh-cat__link:focus,
.mh-cat__link span {
	text-decoration: none !important;
}

/* Brand rule that wipes in from the left on hover. */
.mh-cat__link::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: linear-gradient(180deg, var(--mh-primary, #2aa9c0), #4dd0e1);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.22s ease;
}

.mh-cat__link:hover,
.mh-cat__link:focus-visible {
	transform: translateY(-2px);
	border-color: var(--mh-primary-line, rgba(42,169,192,.34));
	box-shadow: var(--mh-shadow-hover, 0 14px 34px rgba(0, 0, 0, 0.55));
	color: inherit;
}

.mh-cat__link:hover::before,
.mh-cat__link:focus-visible::before {
	transform: scaleY(1);
}

.mh-cat__media {
	display: grid;
	place-items: center;
	flex: none;
	width: 58px;
	height: 58px;
	border-radius: 12px;
	background: linear-gradient(140deg, rgba(42, 169, 192, 0.22) 0%, rgba(42, 169, 192, 0.10) 100%);
	color: var(--mh-primary, #2aa9c0);
	overflow: hidden;
	transition: transform 0.18s ease;
}

.mh-cat__link:hover .mh-cat__media {
	transform: scale(1.04);
}

.mh-cat__icon {
	width: 27px;
	height: 27px;
}

/* A real category image fills the tile edge to edge. */
.mh-cat__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mh-cat__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.mh-cat__name {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--mh-ink, #eef6f8);
	transition: color 0.18s ease;
}

.mh-cat__link:hover .mh-cat__name {
	color: var(--mh-primary-dark, #4dd0e1);
}

/* Count reads as a quiet badge rather than a second link. */
.mh-cat__count {
	align-self: flex-start;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--mh-surface-alt, #152329);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--mh-muted, #7d949c);
}

.mh-cat__arrow {
	margin-left: auto;
	flex: none;
	color: var(--mh-muted, #7d949c);
	transition: transform 0.18s var(--mh-ease), color 0.18s var(--mh-ease);
}

.mh-cat__arrow svg {
	display: block;
	width: 17px;
	height: 17px;
}

.mh-cat__link:hover .mh-cat__arrow {
	transform: translateX(3px);
	color: var(--mh-primary, #2aa9c0);
}

/* ---------------------------------------------------------------------------
   Card details added by this plugin
   --------------------------------------------------------------------------- */

.mh-card__cats {
	display: block;
	margin: 0 1rem 0.25rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Small uppercase text takes the lighter teal — the mid one measured
	   4.32:1 on the card surface when this was violet, just under AA. */
	color: var(--mh-primary-dark, #4dd0e1);
}

.mh-card__delivery {
	display: block;
	margin: 0 1rem 0.5rem;
	font-size: 0.75rem;
	color: var(--mh-muted, #7d949c);
}

/* Safety net: any inline SVG dropped into a card has no intrinsic size, so
   without a cap it stretches to the card's full width. */
.mh-card__delivery svg,
.mh-card__cats svg {
	width: 13px;
	height: 13px;
	flex: none;
	vertical-align: -2px;
}

/* Discount badge */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	right: auto;
	z-index: 2;
	min-width: auto;
	min-height: auto;
	margin: 0;
	padding: 0.24rem 0.5rem;
	border-radius: 6px;
	background: var(--mh-primary, #2aa9c0);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Original price, struck through, next to the sale price */
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	margin-right: 0.35rem;
	opacity: 0.55;
	font-size: 0.85em;
	font-weight: 400;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	text-decoration: none;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 992px) {
	.mh-cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.mh-cats {
		grid-template-columns: 1fr;
	}

	.mh-section {
		margin-bottom: 2.5rem;
	}

	/* No room to float the link beside the title at this width — stack it. */
	.mh-section__head {
		flex-direction: column;
		gap: 0.5rem;
		padding: 1rem;
	}

	.mh-section__more {
		position: static;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mh-cat__link,
	.mh-cat__arrow,
	.mh-section__more svg {
		transition: none;
	}

	.mh-cat__link:hover {
		transform: none;
	}
}