/**
 * Product Feature Grid with a sticky text column.
 *
 * Sticky mechanics: the text COLUMN stretches to the full grid-row height (which
 * is the height of the product column), and the INNER wrapper is the sticky
 * element. That makes the text travel alongside the products and release exactly
 * when the product column ends — rather than sticking to the viewport for the
 * whole page, which is what Elementor Pro's sticky effect would do.
 */

.ashers-grid {
	--ashers-grid-text-width: 300px;
	--ashers-grid-sticky-top: 200px;

	display: grid;
	grid-template-columns: var(--ashers-grid-text-width) minmax(0, 1fr);
	gap: 60px;
	/* align-items intentionally left at `stretch`: the text column must fill the
	   row for the sticky child to have travel. Do not set `start` here. */
}

.ashers-grid__text {
	min-width: 0;
}

.ashers-grid__column {
	min-width: 0;
}

.ashers-grid__products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Figma rows sit 60px apart (y860 / y1331 / y1830 against heights 411 / 439)
	   while the columns are 20px — the two axes are not the same. */
	row-gap: 60px;
	column-gap: 20px;
}

.ashers-grid__heading {
	margin: 0 0 15px;
	font-family: sweet-sans-pro, "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	font-size: 28px;
	line-height: 38px;
	letter-spacing: -0.84px;
	color: #5f3d31;
}

.ashers-grid__body {
	color: #5f3d31;
	font-family: sweet-sans-pro, "Helvetica Neue", Arial, sans-serif;
	font-size: 18px;
	line-height: 28px;
}

.ashers-grid__body :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------- load more */

.ashers-grid__more {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.ashers-grid__more-btn {
	padding: 10px 30px;
	border: 2px solid #5f3d31;
	border-radius: 5px;
	background: transparent;
	color: #5f3d31;
	font-family: sweet-sans-pro, "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 28px;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
		color 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ashers-grid__more-btn:hover {
	background-color: #5f3d31;
	color: #fff5e4;
}

.ashers-grid__more-btn[disabled] {
	opacity: 0.5;
	cursor: default;
}

.ashers-grid__more-btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Visually hidden but announced — carries load-more results to screen readers. */
.ashers-grid__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Restores a focus ring against the theme's global `outline: none !important`. */
.ashers-grid a:focus-visible,
.ashers-grid button:focus-visible {
	outline: 3px solid #24150b !important;
	outline-offset: 2px !important;
}

/* ----------------------------------------------------------------- sticky */

/*
 * Desktop only. Below this width the columns stack, at which point the text is
 * full-width and no longer running alongside a scrolling column — a sticky
 * element there would just hover over the content, so it is switched off
 * entirely rather than merely re-offset.
 */
@media (min-width: 1151px) {
	.ashers-grid.is-sticky .ashers-grid__text-inner {
		position: sticky;
		top: var(--ashers-grid-sticky-top);
	}
}

/* ------------------------------------------------------------- responsive */

/*
 * The two columns stack at 1150px rather than at Elementor's 1024px tablet
 * stop. Between those widths the text column still takes its 300px and the
 * products are squeezed into what is left, which is too tight for three cards.
 *
 * 1150px is not one of Elementor's breakpoints, so this cannot be a responsive
 * control and lives here. The sticky rule above is keyed to the same number
 * from the other side (min-width: 1151px) — a sticky text column over a
 * full-width stack just hovers above the products, so the two must move
 * together. Change one, change the other.
 */
@media (max-width: 1150px) {
	.ashers-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

@media (max-width: 1024px) {
	.ashers-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ashers-grid__heading {
		font-size: 26px;
		line-height: 36px;
		letter-spacing: -0.78px;
	}
}

@media (max-width: 767px) {
	.ashers-grid {
		gap: 30px;
	}

	.ashers-grid__products {
		grid-template-columns: minmax(0, 1fr);
	}

	.ashers-grid__heading {
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -0.72px;
	}

	.ashers-card {
		--ashers-card-media-height: 280px;
	}
}

/* ------------------------------------------------- small-screen card layout */

/*
 * Below 640px the grid card switches to the horizontal layout from
 * Asher's_HP_Redesign (node 267:427): a fixed 141x152 image on the left with the
 * title and price stacked beside it.
 *
 * 639px is not one of Elementor's breakpoints — its mobile stop is 767px — so
 * this cannot be expressed as a responsive control and lives here instead.
 *
 * The single-column rule needs !important: Elementor generates its column rule
 * at {{WRAPPER}} specificity (0,3,0), which outweighs anything class-only in
 * this stylesheet, and its mobile rule is still in force at this width.
 */
@media (max-width: 639px) {
	.ashers-grid__products {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.ashers-card--grid {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		--ashers-card-media-height: 152px;
	}

	.ashers-card--grid .ashers-card__media {
		flex: 0 0 141px;
		width: 141px;
		border-radius: 15px;
	}

	.ashers-card--grid .ashers-card__body {
		flex: 1 1 auto;
		min-width: 0;
		gap: 0;
	}

	.ashers-card--grid .ashers-card__title {
		font-size: 15px;
		line-height: 23px;
	}

	.ashers-card--grid .ashers-card__price {
		padding-top: 6px;
		font-size: 19px;
		line-height: 23px;
	}

	/*
	 * The cart button is scaled to suit the 141px image. The 149px hover pill
	 * cannot fit there, so the expansion is pinned off and the control stays a
	 * circle — which is also the sensible behaviour on touch, where there is no
	 * hover to reveal it.
	 */
	.ashers-card--grid .ashers-card__cart {
		--ashers-card-cart-size: 32px;
		--ashers-card-cart-inset: 10px;
		--ashers-card-cart-width-hover: 32px;
	}

	.ashers-card--grid .ashers-card__cart-label {
		display: none;
	}
}