/* ==========================================================================
   Miss Merylin IN — homepage (front-page.php). Front page only
   (inc/20-home-listing.php → missmerylin_hl_assets). Mobile-first; brand tokens
   from style.css §1 (--mm-*). Product cards are the shared card
   (woocommerce/content-product.php) — this file only places them in rails.
   ========================================================================== */

.mm-home { width: 100%; flex: 1 1 100%; min-width: 0; background: var(--mm-white); padding-bottom: var(--mm-s-2); --mm-h-gutter: 16px; --mm-h-radius: var(--mm-r-l); }

/* The site-wide announcement bar repeats chip row (a) — hide it on the mobile homepage. */
@media (max-width: 899px) { .mm-announcement { display: none; } }

/* Shared section shell */
.mm-hsec { max-width: 1320px; margin: 0 auto; padding: var(--mm-s-6) var(--mm-h-gutter) var(--mm-s-2); }
.mm-hsec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mm-s-4); margin-bottom: var(--mm-s-4); }
.mm-hsec__title { font-family: var(--mm-font-heading); font-weight: 400; font-size: clamp(22px, 3vw, 32px); line-height: 1.1; letter-spacing: -.01em; color: var(--mm-black); margin: 0; }
.mm-hsec__title--center { text-align: center; margin-bottom: var(--mm-s-4); }
.mm-hsec__more { flex-shrink: 0; font-family: var(--mm-font-body); font-size: 12px; font-weight: 500; color: var(--mm-black); text-decoration: none; white-space: nowrap; }
.mm-hsec__more:hover { color: var(--mm-accent); }

/* a · Announcement chips */

/* b · Hero — rounded banner card; carousel only with 2–3 campaigns */
.mm-hhero { position: relative; max-width: 1320px; margin: var(--mm-s-2) auto 0; padding: 0 var(--mm-h-gutter); }
.mm-hhero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--mm-h-radius); background: var(--mm-blush); }
.mm-hhero__track::-webkit-scrollbar { display: none; }
.mm-hhero__slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; overflow: hidden; border-radius: var(--mm-h-radius); }
.mm-hhero__media { aspect-ratio: 4 / 5; max-height: 72vh; width: 100%; }
.mm-hhero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; margin: 0; }
.mm-hhero__content { padding: var(--mm-s-5) var(--mm-s-5) var(--mm-s-5); text-align: center; }
.mm-hhero__media + .mm-hhero__content { position: absolute; left: 0; right: 0; bottom: 0; padding: 72px var(--mm-s-5) var(--mm-s-5); background: linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,.55) 100%); }
.mm-hhero__eyebrow { font-family: var(--mm-font-body); font-size: 10px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--mm-gray); margin: 0 0 var(--mm-s-2); }
.mm-hhero__title { font-family: var(--mm-font-heading); font-weight: 300; font-size: clamp(28px, 7vw, 56px); line-height: 1.05; letter-spacing: -.02em; color: var(--mm-black); margin: 0 auto var(--mm-s-4); max-width: 14em; }
.mm-hhero__media + .mm-hhero__content .mm-hhero__eyebrow { color: rgba(255,255,255,.85); }
.mm-hhero__media + .mm-hhero__content .mm-hhero__title { color: #fff; }
.mm-hhero__cta { display: inline-block; background: var(--mm-black); color: #fff; font-family: var(--mm-font-body); font-size: 11px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; padding: var(--mm-s-4) var(--mm-s-5); border-radius: 999px; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.mm-hhero__media + .mm-hhero__content .mm-hhero__cta { background: #fff; color: var(--mm-black); }
.mm-hhero__cta:hover, .mm-hhero__media + .mm-hhero__content .mm-hhero__cta:hover { background: var(--mm-accent); color: #fff; }
.mm-hhero__dots { display: flex; justify-content: center; gap: var(--mm-s-2); padding: var(--mm-s-3) 0 0; }
.mm-hhero__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--mm-border); cursor: pointer; transition: width .2s ease, background-color .2s ease; }
.mm-hhero__dot[aria-current="true"] { width: 20px; border-radius: var(--mm-r-xs); background: var(--mm-black); }
@media (min-width: 900px) {
	.mm-home { --mm-h-gutter: 32px; --mm-h-radius: 20px; }
	.mm-hhero__media { aspect-ratio: 16 / 7; max-height: 76vh; }
	.mm-hhero__img { object-position: center 30%; }
	.mm-hhero__media + .mm-hhero__content { padding: 120px 40px 48px; }
}

/* c · Category grid — 2 rows of round tiles, horizontal scroll-snap */
.mm-hcats { max-width: 1320px; margin: 0 auto; padding: var(--mm-s-5) 0 var(--mm-s-1); }
.mm-hcats__list { list-style: none; margin: 0; padding: 0 var(--mm-h-gutter); display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 76px; gap: var(--mm-s-4) var(--mm-s-3); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--mm-h-gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mm-hcats__list::-webkit-scrollbar { display: none; }
.mm-hcats__cell { margin: 0; scroll-snap-align: start; }
@media (min-width: 900px) { .mm-hcats__list { grid-auto-columns: 96px; gap: var(--mm-s-5) var(--mm-s-5); justify-content: center; } }

/* Round tile (shared with the Categories tab, mm-listing.css) */
.mm-tile { display: flex; flex-direction: column; align-items: center; gap: var(--mm-s-2); text-decoration: none; color: var(--mm-black); }
.mm-tile__img { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; overflow: hidden; background: var(--mm-blush); flex-shrink: 0; }
.mm-tile__img img { width: 100%; height: 100%; object-fit: cover; margin: 0; display: block; }
.mm-tile__initial { font-family: var(--mm-font-heading); font-size: 24px; color: var(--mm-black); }
.mm-tile__label { font-family: var(--mm-font-body); font-size: 11px; font-weight: 500; line-height: 1.25; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.mm-tile:hover .mm-tile__label { color: var(--mm-accent); }
@media (min-width: 900px) { .mm-tile__img { width: 88px; height: 88px; } .mm-tile__label { font-size: 12px; } }

/* d · Trust chips — [mm_trust] restyled as a chip row */

/* e · Product rails — horizontal scroll-snap of shared cards */
.mm-rail { padding-left: 0; padding-right: 0; }
.mm-rail .mm-hsec__head { padding: 0 var(--mm-h-gutter); }
.mm-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--mm-h-gutter) - 12px) / 2.3); gap: var(--mm-s-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--mm-h-gutter); padding: 0 var(--mm-h-gutter) var(--mm-s-1); margin: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mm-rail__track::-webkit-scrollbar { display: none; }
.mm-rail__track > .wd-product { width: auto !important; max-width: none !important; min-width: 0; margin: 0 !important; padding: 0 !important; float: none !important; scroll-snap-align: start; }
@media (min-width: 600px) { .mm-rail__track { grid-auto-columns: calc((100% - 2 * var(--mm-h-gutter) - 36px) / 3.4); } }
@media (min-width: 900px) { .mm-rail__track { grid-auto-columns: calc((100% - 2 * var(--mm-h-gutter) - 72px) / 4.5); gap: var(--mm-s-4); } }
@media (min-width: 1200px) { .mm-rail__track { grid-auto-columns: calc((100% - 2 * var(--mm-h-gutter) - 90px) / 6); } }

/* f · Steps — three cards */
.mm-hsteps { padding-top: var(--mm-s-6); }
.mm-hsteps__list { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; grid-template-columns: 1fr; gap: var(--mm-s-3); }
.mm-hsteps__item { display: flex; align-items: center; gap: var(--mm-s-4); padding: var(--mm-s-4) var(--mm-s-4); background: var(--mm-offwhite); border-radius: var(--mm-r-l); margin: 0; }
.mm-hsteps__num { font-family: var(--mm-font-heading); font-size: 26px; line-height: 1; color: var(--mm-accent); }
.mm-hsteps__label { font-family: var(--mm-font-body); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--mm-black); }
@media (min-width: 900px) { .mm-hsteps__list { grid-template-columns: repeat(3, 1fr); gap: var(--mm-s-4); } .mm-hsteps__item { flex-direction: column; text-align: center; padding: var(--mm-s-6) var(--mm-s-5); } }

/* g · Newsletter + chat opt-in card */
.mm-hjoin { padding-top: var(--mm-s-5); padding-bottom: var(--mm-s-6); }
.mm-hjoin__card { background: var(--mm-blush); border-radius: var(--mm-h-radius); padding: var(--mm-s-6) var(--mm-s-5); text-align: center; max-width: 960px; margin: 0 auto; }
.mm-hjoin__title { font-family: var(--mm-font-heading); font-weight: 300; font-size: clamp(22px, 4vw, 34px); line-height: 1.15; color: var(--mm-black); margin: 0 auto var(--mm-s-4); max-width: 18em; }
.mm-hjoin__form .mm-fnews__form { margin: 0 auto; max-width: 360px; }
.mm-hjoin__or { font-family: var(--mm-font-body); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mm-gray); margin: var(--mm-s-4) 0 var(--mm-s-3); }
.mm-hjoin__wa { display: inline-block; border: .5px solid var(--mm-black); border-radius: 999px; color: var(--mm-black); font-family: var(--mm-font-body); font-size: 11px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; padding: var(--mm-s-3) var(--mm-s-5); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.mm-hjoin__wa:hover { background: var(--mm-black); color: #fff; }

@media (prefers-reduced-motion: reduce) { .mm-hhero__track, .mm-rail__track { scroll-behavior: auto; } }

/* Rail overline (group: Women / Men / Phone accessories / Home) */
.mm-hsec__over { display: block; margin: 0 0 var(--mm-s-1); font-family: var(--mm-font-body); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--mm-accent); }
/* Lazy rails: skeleton track with the same footprint as the cards */
.mm-rail__track--skel > .mm-skel--card { scroll-snap-align: start; }
.mm-rail[data-mm-rail-lazy] { min-height: 320px; }
/* Shop by price */
.mm-hprice__list { list-style: none; margin: 0; padding: 0 var(--mm-h-gutter); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mm-s-3); }
@media (min-width: 900px) { .mm-hprice__list { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 960px; margin: 0 auto; } }
.mm-hprice__list li { margin: 0; }
.mm-hprice__tile { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 var(--mm-s-3); border-radius: var(--mm-r-l); background: var(--mm-blush); color: var(--mm-black) !important; font-family: var(--mm-font-body); font-size: 14px; font-weight: 500; text-decoration: none !important; text-align: center; transition: transform .2s ease; }
@media (hover: none) { .mm-hprice__tile:active { transform: scale(.97); } }