/* AYCEE Builder homepage: store layout (white panels on a light grey page). */

.ayc-home {
	padding-bottom: 8px;
	background: #F4F5F5;
	color: var(--ayc-ink);
	font-family: var(--ayc-font-body);
	text-align: left;
}
.ayc-home * { box-sizing: border-box; }
.ayc-home :where(h1, h2, h3, p, ul, ol) { margin: 0; }
.ayc-home :where(ul, ol) { list-style: none; padding: 0; }
.ayc-home a { text-decoration: none; }

/* ---------------------------------------------------------------
 * Top: category list, banner, service tiles
 * ------------------------------------------------------------- */
.ayc-top { padding: 16px 0 4px; }
.ayc-top__grid { display: grid; grid-template-columns: 236px minmax(0, 1fr) 250px; gap: 12px; }

.ayc-top__cats { padding: 10px 0; border: 1px solid var(--ayc-border); border-radius: 8px; background: #FFFFFF; }
.ayc-top__cats > strong { display: block; padding: 4px 16px 8px; font: 700 14px/1.2 var(--ayc-font-head); }
.ayc-top__cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 16px;
	color: var(--ayc-ink) !important;
	font-size: 13.5px;
	line-height: 1.35;
}
.ayc-top__cats a .ayc-icon { color: #B3BBC0; }
.ayc-top__cats a:hover, .ayc-top__cats a:focus-visible { background: var(--ayc-tint); color: var(--ayc-teal) !important; }
.ayc-top__cats a:hover .ayc-icon { color: var(--ayc-teal); }

.ayc-top__banner {
	display: flex;
	align-items: flex-end;
	min-height: 400px;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--ayc-teal-night);
	background-image: linear-gradient(90deg, rgba(4, 38, 36, .9) 0%, rgba(4, 38, 36, .62) 45%, rgba(4, 38, 36, .08) 100%), var(--banner, none);
	background-size: cover;
	background-position: center;
}
.ayc-top__copy { max-width: 500px; padding: 36px; }
.ayc-home .ayc-top h1 { margin-bottom: 10px; color: #FFFFFF !important; font: 800 34px/1.15 var(--ayc-font-head); letter-spacing: -0.02em; }
.ayc-home .ayc-top__copy p { margin-bottom: 22px; color: #D6E6E5; font-size: 15px; line-height: 1.55; }
.ayc-top__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.ayc-top__actions .ayc-btn { min-height: 46px; padding: 0 26px; }
.ayc-top__link { display: inline-flex; align-items: center; gap: 2px; color: #FFFFFF !important; font-weight: 600; font-size: 15px; }
.ayc-top__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.ayc-top__side { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ayc-tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding: 14px 16px;
	border: 1px solid var(--ayc-border);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--ayc-ink) !important;
	transition: border-color .15s ease;
}
.ayc-tile .ayc-icon { margin-bottom: 6px; color: var(--ayc-teal); }
.ayc-tile strong { font: 700 15px/1.25 var(--ayc-font-head); }
.ayc-tile span { color: var(--ayc-muted); font-size: 13px; line-height: 1.4; }
.ayc-tile:hover, .ayc-tile:focus-visible { border-color: var(--ayc-teal); }

/* Category strip: phones and tablets only (desktop has the list above) */
.ayc-catstrip { display: none; }

/* ---------------------------------------------------------------
 * Blocks: one white panel per section
 * ------------------------------------------------------------- */
.ayc-block { padding: 6px 0; }
.ayc-block > .ayc-wrap {
	width: calc(100% - 48px);
	max-width: calc(var(--ayc-wrap) - 48px);
	padding: 16px 20px 20px;
	border: 1px solid var(--ayc-border);
	border-radius: 8px;
	background: #FFFFFF;
}
.ayc-block--plain > .ayc-wrap { padding: 0; border: 0; background: none; }

.ayc-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ayc-border);
}
.ayc-home .ayc-h h2 { font: 800 19px/1.2 var(--ayc-font-head); letter-spacing: -0.01em; }
.ayc-h a { flex: none; display: inline-flex; align-items: center; gap: 2px; color: var(--ayc-teal) !important; font-size: 14px; font-weight: 600; }
.ayc-h a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ayc-home .ayc-block__note { margin: -4px 0 14px; color: var(--ayc-muted); font-size: 14px; line-height: 1.5; }
.ayc-home .ayc-block__more { margin-top: 14px; font-size: 14px; }
.ayc-block__more a { color: var(--ayc-teal) !important; font-weight: 600; }
.ayc-block__more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------
 * Product rows and grids (theme card markup)
 * ------------------------------------------------------------- */
.ayc-home .ayc-rail ul.products,
.ayc-home .ayc-grid ul.products {
	display: grid !important;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
}
.ayc-home .ayc-rail ul.products {
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 5 * 12px) / 6);
	grid-template-columns: none !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 2px !important;
}
.ayc-home .ayc-rail ul.products::-webkit-scrollbar { display: none; }
.ayc-home .ayc-grid ul.products { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ayc-home ul.products::before, .ayc-home ul.products::after { display: none !important; }
.ayc-home ul.products > li.grid-new-row { display: none !important; }
.ayc-home ul.products > li.product { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; scroll-snap-align: start; }

/* Compact cards on the homepage */
.ayc-home ul.products li.product .product-item { border-radius: 8px; box-shadow: none !important; transform: none !important; }
.ayc-home ul.products li.product .product-item:hover { border-color: #BFD9D6; }
.ayc-home ul.products li.product .product-item__description { padding: 10px 12px 8px; }
.ayc-home ul.products li.product .woocommerce-loop-product__title { font-size: 13.5px !important; min-height: 2.7em; }
.ayc-home ul.products li.product .ayc-card-category { font-size: 10.5px; }
.ayc-home ul.products li.product .ayc-card-vendor,
.ayc-home ul.products li.product .ayc-card-stock { display: none; }
.ayc-home ul.products li.product .ayc-card-meta { margin: 0; }
.ayc-home ul.products li.product .price,
.ayc-home ul.products li.product .price ins,
.ayc-home ul.products li.product .price ins .amount,
.ayc-home ul.products li.product .price > .amount { font-size: 15.5px !important; }
.ayc-home ul.products li.product .price del,
.ayc-home ul.products li.product .price del .amount { font-size: 12px !important; }
.ayc-home ul.products li.product .product-item__description--price { margin-top: 6px; }
.ayc-home ul.products li.product .product-item__actions { padding: 0 12px 12px; }
.ayc-home ul.products li.product .product-item__actions .button { min-height: 36px; font-size: 13px !important; }
.ayc-home ul.products li.product .onsale { padding: 4px 7px; font-size: 11px; }

/* ---------------------------------------------------------------
 * Trades
 * ------------------------------------------------------------- */
.ayc-trades { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; }
.ayc-trades a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--ayc-border);
	border-radius: 6px;
	color: var(--ayc-ink) !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	transition: border-color .15s ease, background-color .15s ease;
}
.ayc-trades a .ayc-icon { color: var(--ayc-teal); }
.ayc-trades a:hover, .ayc-trades a:focus-visible { border-color: var(--ayc-teal); background: var(--ayc-tint); }

/* ---------------------------------------------------------------
 * Stores
 * ------------------------------------------------------------- */
.ayc-stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.ayc-storecard {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--ayc-border);
	border-radius: 8px;
	color: var(--ayc-ink) !important;
	transition: border-color .15s ease;
}
.ayc-storecard:hover { border-color: var(--ayc-teal); }
.ayc-storecard__logo { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--ayc-border); border-radius: 8px; overflow: hidden; color: var(--ayc-teal); }
.ayc-storecard__logo img { width: 100%; height: 100%; object-fit: contain; }
.ayc-storecard__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ayc-storecard__text strong { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1.3 var(--ayc-font-head); }
.ayc-storecard__tick { display: inline-flex; color: var(--ayc-teal); }
.ayc-storecard__text > span { color: var(--ayc-muted); font-size: 13px; }
.ayc-storecard > .ayc-icon { color: #B3BBC0; }

/* ---------------------------------------------------------------
 * Guides
 * ------------------------------------------------------------- */
.ayc-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ayc-guide { display: block; color: var(--ayc-ink) !important; }
.ayc-guide__img { display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--ayc-surface); }
.ayc-guide__img img { width: 100%; height: 100%; object-fit: cover; }
.ayc-guide__cat { display: block; margin-top: 10px; color: var(--ayc-teal); font-size: 12px; font-weight: 700; }
.ayc-guide strong {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 4px;
	font: 600 15px/1.4 var(--ayc-font-body);
}
.ayc-guide:hover strong { color: var(--ayc-teal); }

/* ---------------------------------------------------------------
 * Buyer protection strip
 * ------------------------------------------------------------- */
.ayc-assurance { padding: 6px 0 18px; }
.ayc-assurance ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ayc-assurance li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--ayc-border);
	border-radius: 8px;
	background: #FFFFFF;
}
.ayc-assurance li > .ayc-icon { color: var(--ayc-teal); margin-top: 1px; }
.ayc-assurance strong { display: block; font: 700 14px/1.3 var(--ayc-font-head); }
.ayc-assurance span { display: block; margin-top: 2px; color: var(--ayc-muted); font-size: 12.5px; line-height: 1.4; }
.ayc-assurance a { color: var(--ayc-teal) !important; font-weight: 600; }

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */
@media (max-width: 1240px) {
	.ayc-top__grid { grid-template-columns: 220px minmax(0, 1fr); }
	.ayc-top__side { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ayc-home .ayc-rail ul.products { grid-auto-columns: calc((100% - 4 * 12px) / 5); }
	.ayc-home .ayc-grid ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.ayc-home .ayc-grid ul.products > li:nth-child(n+11) { display: none !important; }
}

@media (max-width: 1023px) {
	.ayc-top { padding: 12px 0 0; }
	.ayc-top__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.ayc-top__cats { display: none; }
	.ayc-top__banner { min-height: 260px; }
	.ayc-top__copy { padding: 26px; }
	.ayc-home .ayc-top h1 { font-size: 28px; }

	.ayc-catstrip { display: block; margin-top: 10px; padding: 14px 0 12px; border-top: 1px solid var(--ayc-border); border-bottom: 1px solid var(--ayc-border); background: #FFFFFF; }
	.ayc-catstrip ul {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 24px;
		scrollbar-width: none;
	}
	.ayc-catstrip ul::-webkit-scrollbar { display: none; }
	.ayc-catstrip li { flex: none; width: 74px; scroll-snap-align: start; }
	.ayc-catstrip a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ayc-ink) !important; text-align: center; }
	.ayc-catstrip__img { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--ayc-border); border-radius: 12px; overflow: hidden; background: #F7F8F8; color: var(--ayc-teal); }
	.ayc-catstrip__img img { width: 100%; height: 100%; object-fit: cover; }
	.ayc-catstrip__name {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 11.5px;
		font-weight: 600;
		line-height: 1.25;
	}

	.ayc-home .ayc-rail ul.products { grid-auto-columns: calc((100% - 3 * 12px) / 3.4); }
	.ayc-home .ayc-grid ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ayc-home .ayc-grid ul.products > li:nth-child(n+10) { display: none !important; }
	.ayc-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ayc-assurance ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.ayc-home { padding-bottom: 0; }
	.ayc-top { padding: 0; }
	.ayc-top > .ayc-wrap { padding: 0; }
	.ayc-top__banner { min-height: 0; border-radius: 0; background-image: linear-gradient(180deg, rgba(4, 38, 36, .35) 0%, rgba(4, 38, 36, .9) 100%), var(--banner, none); }
	.ayc-top__copy { padding: 56px 16px 20px; }
	.ayc-home .ayc-top h1 { font-size: 23px; }
	.ayc-home .ayc-top__copy p { margin-bottom: 16px; font-size: 14px; }
	.ayc-top__actions { gap: 14px; }
	.ayc-top__actions .ayc-btn { min-height: 42px; padding: 0 20px; font-size: 14.5px; }
	.ayc-top__side { gap: 8px; padding: 10px 16px 0; }
	.ayc-tile { align-items: center; padding: 12px 6px; text-align: center; }
	.ayc-tile .ayc-icon { margin-bottom: 4px; }
	.ayc-tile strong { font-size: 13px; }
	.ayc-tile span { display: none; }

	.ayc-catstrip { margin-top: 10px; }
	.ayc-catstrip ul { padding-left: 16px; padding-right: 16px; scroll-padding-inline: 16px; }

	.ayc-block { padding: 0; margin-top: 8px; }
	.ayc-block > .ayc-wrap { width: 100%; max-width: none; padding: 14px 16px 16px; border-left: 0; border-right: 0; border-radius: 0; }
	.ayc-block--plain > .ayc-wrap { padding: 0; }
	.ayc-h { margin-bottom: 12px; padding-bottom: 10px; }
	.ayc-home .ayc-h h2 { font-size: 17px; }

	.ayc-home .ayc-rail ul.products { grid-auto-columns: 44%; gap: 10px; }
	.ayc-home .ayc-grid ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ayc-home .ayc-grid ul.products > li:nth-child(n+7) { display: none !important; }
	.ayc-home ul.products li.product .product-item__description { padding: 8px 10px 6px; }
	.ayc-home ul.products li.product .woocommerce-loop-product__title { font-size: 13px !important; }
	.ayc-home ul.products li.product .product-item__actions { padding: 0 10px 10px; }


	.ayc-trades { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
	.ayc-trades::-webkit-scrollbar { display: none; }
	.ayc-trades li { flex: none; }
	.ayc-trades a { padding: 9px 12px; font-size: 13.5px; white-space: nowrap; }

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

	.ayc-guides { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
	.ayc-guides::-webkit-scrollbar { display: none; }
	.ayc-guides li { flex: none; width: 72%; }
	.ayc-guide strong { font-size: 14px; }

	.ayc-assurance { padding: 8px 0 12px; }
	.ayc-assurance ul { gap: 8px; padding-left: 16px; padding-right: 16px; }
	.ayc-assurance li { flex-direction: column; gap: 6px; padding: 12px; }
	.ayc-assurance strong { font-size: 13px; }
	.ayc-assurance span { font-size: 12px; }
}

/* Category list: one line per category, plus a link to all */
.ayc-top__cats a > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ayc-top__cats li a { padding-top: 5px; padding-bottom: 5px; }
.ayc-home .ayc-top__all { display: flex; align-items: center; gap: 2px; margin: 6px 16px 0; padding-top: 10px; border-top: 1px solid var(--ayc-border); color: var(--ayc-teal) !important; font-size: 13.5px; font-weight: 600; }

/* Lists that double as the page container: keep the container gutters */
.ayc-home .ayc-assurance ul.ayc-wrap { padding-left: 24px; padding-right: 24px; }
@media (max-width: 1023px) {
	.ayc-home .ayc-catstrip ul.ayc-wrap { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 640px) {
	.ayc-home .ayc-assurance ul.ayc-wrap,
	.ayc-home .ayc-catstrip ul.ayc-wrap { padding-left: 16px; padding-right: 16px; }
}
/* Protection strip lines up with the panels above */
@media (min-width: 641px) {
	.ayc-home .ayc-assurance ul.ayc-wrap { width: calc(100% - 48px); max-width: calc(var(--ayc-wrap) - 48px); padding-left: 0; padding-right: 0; }
}