/* Home page (Magento_Cms/templates/home/*.phtml, Magento_CatalogWidget/.../home-grid.phtml):
   welcome band, "Shop by category" tiles, "Our top 20". Option A of the 2026-10-02 mockups.
   Rules start with `body.store-home #maincontent` because cms-page.css styles every
   p / li / h1 / h2 on CMS pages at that weight (17px text, underlined links, a 50px
   first h2), and orders-gamry.css colours links by ID. */

/* ---- shared ---- */
body.store-home #maincontent .store-welcome-kicker {
	margin: 0; font-family: var(--gm-font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gm-muted);
}
body.store-home #maincontent .store-home-sect { padding: 44px 0 0; }
body.store-home #maincontent .store-home-head { margin: 0 0 20px; }
body.store-home #maincontent .column.main .store-home-head h2 {
	margin: 6px 0 0; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.018em;
}
body.store-home #maincontent .store-home-btn-outline { background: #fff; color: var(--gm-navy) !important; box-shadow: inset 0 0 0 1.5px var(--gm-navy); }
body.store-home #maincontent .store-home-btn-outline:hover { background: #f4f8fa; color: var(--gm-navy); text-decoration: none; }
/* store-common.css colours every #maincontent link navy with a (1,7,2) selector and cms-page.css
   underlines links inside li; these are buttons and cards, so they opt out (the category cards
   do the same with !important on .product-item-link). */
body.store-home #maincontent .rd-btn { text-decoration: none; }
body.store-home #maincontent a.rd-btn-primary,
body.store-home #maincontent a.rd-btn-primary:hover { color: #fff !important; }
body.store-home #maincontent .store-cats-grid li a.store-cat,
body.store-home #maincontent .store-top-grid li a.store-top-name { text-decoration: none; }
body.store-home #maincontent a.store-cat,
body.store-home #maincontent a.store-top-name { color: var(--gm-ink) !important; }
/* the website's typography.css also colours text inside .typography links (#0a65a2 !important) */
body.store-home #maincontent .store-cat-name { color: var(--gm-ink) !important; }
body.store-home #maincontent .store-cat-count { color: var(--gm-muted) !important; }
body.store-home #maincontent a.store-cat:hover .store-cat-name,
body.store-home #maincontent .store-top-card:hover a.store-top-name { color: var(--gm-navy) !important; }

/* ---- welcome band ---- */
body.store-home #maincontent .store-welcome {
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: start;
	margin: 32px 0 0; padding: 36px 40px; border-radius: 18px;
	background: linear-gradient(180deg, #f3f7fa 0%, #fbfcfd 100%); border: 1px solid var(--gm-border-soft);
}
body.store-home #maincontent .store-welcome h1 {
	margin: 0 0 12px; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.026em;
}
body.store-home #maincontent .store-welcome .store-welcome-lead { margin: 0 0 18px; max-width: 44ch; font-size: 17.5px; line-height: 1.55; }
body.store-home #maincontent .store-welcome-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
body.store-home #maincontent .store-welcome-facts li {
	margin: 0; padding: 7px 14px; border: 1px solid var(--gm-border-ctl); border-radius: 999px; background: #fff;
	font-size: 14.5px; line-height: 1.3; color: var(--gm-ink);
}
body.store-home #maincontent .store-welcome-facts strong { color: var(--gm-navy); }
body.store-home #maincontent .store-welcome-actions { display: flex; flex-wrap: wrap; gap: 12px; }

body.store-home #maincontent .store-welcome-card {
	display: grid; gap: 14px; padding: 22px 24px; border-radius: 14px; background: #fff; border: 1px solid var(--gm-border);
}
body.store-home #maincontent .store-welcome-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; }
body.store-home #maincontent .store-welcome-steps li {
	counter-increment: step; position: relative; margin: 0; padding-left: 42px; font-size: 15.5px; line-height: 1.5;
}
body.store-home #maincontent .store-welcome-steps li::before {
	content: counter(step); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%;
	display: grid; place-items: center; background: #e3edf5; color: var(--gm-navy);
	font-family: var(--gm-font-display); font-size: 14px; font-weight: 600;
}
body.store-home #maincontent .store-welcome-steps strong { display: block; color: var(--gm-ink); }
body.store-home #maincontent .store-welcome-notes { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
body.store-home #maincontent .store-welcome-notes li { margin: 0; font-size: 15.5px; }
body.store-home #maincontent .store-welcome-card .store-welcome-more {
	margin: 0; padding-top: 14px; border-top: 1px solid var(--gm-border-soft); font-size: 14px; line-height: 1.5; color: var(--gm-muted);
}
body.store-home #maincontent .store-welcome-card .store-welcome-more a { font-weight: 600; text-decoration: none; }
body.store-home #maincontent .store-welcome-card .store-welcome-more a:hover { text-decoration: underline; }

/* ---- category tiles ---- */
body.store-home #maincontent .store-cats-grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none;
}
body.store-home #maincontent .store-cats-grid li { margin: 0; }
body.store-home #maincontent a.store-cat {
	display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; box-sizing: border-box;
	padding: 12px; border: 1px solid var(--gm-border); border-radius: 14px; background: #fff; text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.store-home #maincontent a.store-cat:hover { border-color: var(--gm-navy); box-shadow: 0 6px 18px rgba(0, 38, 64, .08); }
body.store-home #maincontent .store-cat img,
body.store-home #maincontent .store-cat-ph { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; background: var(--gm-panel, #f2f4f5); }
body.store-home #maincontent .store-cat-text { display: grid; gap: 3px; min-width: 0; }
body.store-home #maincontent .store-cat-name {
	font-family: var(--gm-font-display); font-size: 16.5px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--gm-ink);
}
body.store-home #maincontent a.store-cat:hover .store-cat-name { color: var(--gm-navy); }
body.store-home #maincontent .store-cat-count { font-size: 13px; color: var(--gm-muted); font-variant-numeric: tabular-nums; }

/* ---- top 20 ---- */
body.store-home #maincontent .store-top-grid {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none;
}
body.store-home #maincontent .store-top-card {
	position: relative; display: flex; flex-direction: column; margin: 0; overflow: hidden;
	border: 1px solid var(--gm-border); border-radius: 12px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
body.store-home #maincontent .store-top-card:hover { border-color: var(--gm-navy); box-shadow: 0 6px 18px rgba(0, 38, 64, .08); }
body.store-home #maincontent .store-top-photo { display: block; border-bottom: 1px solid var(--gm-border-soft); }
body.store-home #maincontent .store-top-photo .product-image-container { display: block; width: 100% !important; }
body.store-home #maincontent .store-top-photo .product-image-wrapper { display: block; position: relative; height: 0; padding-bottom: 100% !important; overflow: hidden; }
body.store-home #maincontent .store-top-photo .product-image-photo {
	position: absolute; inset: 0; width: 100%; height: 100%; padding: 12px; box-sizing: border-box; object-fit: contain;
}
body.store-home #maincontent .store-top-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
body.store-home #maincontent .store-top-sku { font-family: var(--gm-font-mono); font-size: 12px; color: var(--gm-muted); letter-spacing: 0.02em; }
body.store-home #maincontent a.store-top-name {
	font-family: var(--gm-font-body); font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--gm-ink); text-decoration: none;
}
body.store-home #maincontent .store-top-card:hover a.store-top-name { color: var(--gm-navy); }
/* the whole card opens the product */
body.store-home #maincontent a.store-top-name::after { content: ''; position: absolute; inset: 0; }
body.store-home #maincontent .store-top-card .price-box { margin: 4px 0 0; }
/* orders-gamry.css forces gold 23px prices with a long !important selector */
body.store-home #maincontent .store-top-card .price-box .price-container .price-wrapper .price,
body.store-home #maincontent .store-top-card .price-box .price {
	font-family: var(--gm-font-body); font-size: 15px !important; font-weight: 600; color: var(--gm-ink) !important;
}

@media (max-width: 1100px) {
	body.store-home #maincontent .store-cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.store-home #maincontent .store-top-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	body.store-home #maincontent .store-welcome { grid-template-columns: 1fr; padding: 26px 22px; gap: 22px; margin-top: 20px; }
	body.store-home #maincontent .store-top-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	body.store-home #maincontent .store-home-sect { padding-top: 34px; }
}
@media (max-width: 600px) {
	body.store-home #maincontent .store-cats-grid { grid-template-columns: 1fr; }
	body.store-home #maincontent .store-top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.store-home #maincontent .store-cat img,
	body.store-home #maincontent .store-cat-ph { width: 64px; height: 64px; }
	body.store-home #maincontent a.store-cat { grid-template-columns: 64px minmax(0, 1fr); }
}