/* ==========================================================================
   Homepage layouts B (Flagship Dark) and C (Deals First).
   Layout A (Mi Classic) is brand.css as is. Loaded on the homepage only and
   scoped by the body class each layout adds (xp-home--flagship / --deals).
   ========================================================================== */

/* B · Flagship Dark ------------------------------------------------------ */
.xp-home--flagship { --xp-dark: #000; --xp-dark-2: #111; --xp-dark-3: #1c1c1e; --xp-dim: rgba(255, 255, 255, .62); background: var(--xp-dark); }
.xp-home--flagship .gn-main { background: var(--xp-dark); color: var(--xp-dim); }

/* Header joins the black page. */
.xp-home--flagship .gn-header { background: var(--xp-dark); border-bottom-color: rgba(255, 255, 255, .08); }
.xp-home--flagship .xp-logo__word { color: rgba(255, 255, 255, .6); }
.xp-home--flagship .xp-logo__word strong { color: #fff; }
.xp-home--flagship .gn-search { background: var(--xp-dark-3); }
.xp-home--flagship .gn-search .gn-search__input { color: #fff; }
.xp-home--flagship .gn-search .gn-search__input::placeholder { color: rgba(255, 255, 255, .45); }
.xp-home--flagship .gn-search__btn, .xp-home--flagship .gn-action, .xp-home--flagship .gn-header__burger { color: #fff; }
.xp-home--flagship .gn-nav { background: var(--xp-dark); }
.xp-home--flagship .gn-nav .gn-menu > li > a { color: rgba(255, 255, 255, .86); }
.xp-home--flagship .gn-nav .gn-menu > li:hover > a { color: var(--gn-accent); }
.xp-home--flagship .gn-badge { box-shadow: 0 0 0 2px var(--xp-dark); }

/* Hero: every slide dark and taller, the product shot larger. */
.xp-home--flagship .xp-slide { min-height: clamp(560px, 52vw, 760px); color: #fff; background: radial-gradient(900px 600px at 70% 60%, #2a1a10, transparent 70%), #000; }
.xp-home--flagship .xp-slide__title, .xp-home--flagship .xp-slide__price, .xp-home--flagship .xp-slide__more { color: #fff; }
.xp-home--flagship .xp-slide__text { color: var(--xp-dim); }
.xp-home--flagship .xp-slide__title { font-size: clamp(44px, 6vw, 88px); }
.xp-home--flagship .xp-slide__media img { max-height: 620px; }
.xp-home--flagship .xp-hero__controls { background: rgba(255, 255, 255, .12); }
.xp-home--flagship .xp-hero__arrow { color: #fff; }
.xp-home--flagship .xp-hero__arrow:hover { background: rgba(255, 255, 255, .15); }
.xp-home--flagship .xp-hero__dot { background: rgba(255, 255, 255, .25); }

/* Product stories. */
.xp-story { padding-block: 72px; border-top: 1px solid rgba(255, 255, 255, .06); }
.xp-story:nth-child(even) { background: radial-gradient(700px 500px at 30% 50%, #161616, transparent 70%); }
.xp-story__inner { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 56px; }
.xp-story--flip .xp-story__media { order: 2; }
.xp-story__media { border-radius: 36px; background: radial-gradient(closest-side, #fff, #ececec); overflow: hidden; }
.xp-story__media img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 6%; mix-blend-mode: multiply; transition: transform .6s var(--xp-ease); }
.xp-story:hover .xp-story__media img { transform: scale(1.03); }
.xp-story__eyebrow { margin: 0 0 10px; color: var(--gn-accent); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.xp-story__title { margin: 0 0 16px; color: #fff; font-size: clamp(34px, 4vw, 56px); font-weight: 650; letter-spacing: -.035em; line-height: 1.04; }
.xp-story__text { max-width: 460px; margin: 0 0 20px; font-size: 18px; line-height: 1.55; color: var(--xp-dim); }
.xp-story__price { margin: 0 0 28px; color: #fff; font-size: 20px; font-weight: 600; }
.xp-story__price del { color: rgba(255, 255, 255, .4); font-size: 15px; font-weight: 400; margin-left: 8px; }
.xp-story__price ins { text-decoration: none; color: var(--gn-accent); }
.xp-story__price .gn-from { color: var(--xp-dim); }
.xp-story__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.xp-story__actions .xp-slide__more { color: #fff; }

/* Sections, titles and cards on black. */
.xp-home--flagship .gn-section__title, .xp-home--flagship .xp-logo__name, .xp-home--flagship .xp-logo--text { color: #fff; }
.xp-home--flagship .gn-section__sub, .xp-home--flagship .gn-reviews__total { color: var(--xp-dim); }
.xp-home--flagship .gn-link-arrow { color: #fff; }
.xp-home--flagship .xp-series__card--blue, .xp-home--flagship .xp-series__card--yellow { background: var(--xp-dark-2); color: #fff; }
.xp-home--flagship .xp-series__card--dark { background: radial-gradient(420px 320px at 90% 100%, #3a2214, transparent 70%), var(--xp-dark-2); }
.xp-home--flagship .xp-series__card:hover { color: #fff; }
.xp-home--flagship .xp-logo--redmi .xp-logo__img, .xp-home--flagship .xp-logo--yeelight .xp-logo__img { filter: invert(1); }
.xp-home--flagship .xp-brand { border-color: transparent; background: var(--xp-dark-2); color: #fff; }
.xp-home--flagship .xp-brand:hover { color: #fff; }
.xp-home--flagship .xp-brand__count { color: var(--xp-dim); }
.xp-home--flagship .xp-brand__go { background: var(--xp-dark-3); color: #fff; }
.xp-home--flagship .xp-hot, .xp-home--flagship .gn-reviews { background: var(--xp-dark-2); }
.xp-home--flagship .gn-tabs { background: var(--xp-dark-3); }
.xp-home--flagship .gn-tab { color: rgba(255, 255, 255, .6); }
.xp-home--flagship .gn-tab:hover { color: #fff; }
.xp-home--flagship .gn-tab[aria-selected="true"] { background: #fff; color: #000; }
.xp-home--flagship ul.products li.product.gn-card { background: var(--xp-dark-3); }
.xp-home--flagship .gn-card__media { background: radial-gradient(closest-side, #fff, #e9e9e9); margin: 8px 8px 12px; border-radius: 16px; }
.xp-home--flagship .gn-card__title, .xp-home--flagship .gn-card__title a, .xp-home--flagship .gn-card__price { color: #fff !important; }
.xp-home--flagship .gn-card__price del { color: rgba(255, 255, 255, .4); }
.xp-home--flagship .gn-card__price ins { color: var(--gn-accent); }
.xp-home--flagship .gn-card__actions .button { background: #fff !important; color: #000 !important; }
.xp-home--flagship .gn-card__actions .button:hover { background: var(--gn-accent) !important; color: #fff !important; }
.xp-home--flagship .gn-stars__count, .xp-home--flagship .gn-from { color: var(--xp-dim); }
.xp-home--flagship .xp-spot__tile { background: var(--xp-dark-2); color: #fff; }
.xp-home--flagship .xp-spot__tile--1 { background: linear-gradient(180deg, #1a1a1a, #0d0d0d); }
.xp-home--flagship .xp-spot__price { color: #fff; }
.xp-home--flagship .xp-spot__media { padding: 10px; border-radius: 22px; background: radial-gradient(closest-side, #fff, #ececec); }
.xp-home--flagship .xp-spot__cta { background: #fff; color: #000; }
.xp-home--flagship .xp-sh { background: radial-gradient(520px 380px at 100% 100%, color-mix(in srgb, var(--gn-accent) 35%, transparent), transparent 70%), var(--xp-dark-2); color: #fff; }
.xp-home--flagship .xp-sh__text { color: var(--xp-dim); }
.xp-home--flagship .xp-sh__links a, .xp-home--flagship .xp-sh__upto { background: var(--xp-dark-3); color: #fff; }
.xp-home--flagship .gn-promo { background: radial-gradient(520px 380px at 85% 60%, color-mix(in srgb, var(--gn-accent) 45%, transparent), transparent 70%), var(--xp-dark-2); }
.xp-home--flagship .xl-steps__item { background: var(--xp-dark-2); }
.xp-home--flagship .xl-steps__item h3 { color: #fff; }
.xp-home--flagship .xl-steps__item p { color: var(--xp-dim); }
.xp-home--flagship .xl-steps__marker { background: var(--xp-dark-3); box-shadow: none; }
.xp-home--flagship .gn-review { background: var(--xp-dark-3); }
.xp-home--flagship .gn-review__text, .xp-home--flagship .gn-review__by strong, .xp-home--flagship .gn-reviews__score { color: #fff; }
.xp-home--flagship .gn-review__product { color: var(--xp-dim); border-top-color: rgba(255, 255, 255, .08); }
.xp-home--flagship .gn-review__avatar { background: var(--gn-accent); }
.xp-home--flagship .gn-rail-nav .gn-iconbtn { background: var(--xp-dark-3); border-color: rgba(255, 255, 255, .12); color: #fff; }
.xp-home--flagship .xp-promises { background: var(--xp-dark); border-top-color: rgba(255, 255, 255, .08); }
.xp-home--flagship .xp-promises__list li { color: #fff; }
.xp-home--flagship .xp-promises__list li + li { border-left-color: rgba(255, 255, 255, .1); }
.xp-home--flagship .gn-footer { border-top: 1px solid rgba(255, 255, 255, .06); }

/* C · Deals First -------------------------------------------------------- */
.xp-home--deals .gn-main { background: #f4f4f4; }
.xp-home--deals .gn-section { padding-block: 28px; }
.xp-home--deals .gn-section__title { font-size: clamp(21px, 2vw, 26px); }

/* Hero: slider in a rounded panel, two deal cards stacked beside it. */
.xp-dhero { padding-top: 20px; }
.xp-dhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
.xp-dhero__grid--solo { grid-template-columns: 1fr; }
.xp-dhero .xp-hero { border-radius: 24px; height: 100%; }
.xp-dhero .xp-hero__track, .xp-dhero .xp-slide { height: 100%; }
.xp-dhero .xp-slide { min-height: 440px; }
.xp-dhero .xp-slide__inner { padding: 36px 48px 84px; }
.xp-dhero .xp-slide__title { font-size: clamp(32px, 3.6vw, 52px); }
.xp-dhero .xp-slide__text { font-size: 16px; }
.xp-dhero .xp-slide__media img { max-height: 360px; }
.xp-dhero__side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.xp-dcard { position: relative; display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 8px; padding: 20px; border-radius: 24px; background: #fff; color: var(--gn-ink); overflow: hidden; transition: box-shadow .25s, transform .25s var(--xp-ease); }
.xp-dcard:hover { color: var(--gn-ink); transform: translateY(-3px); box-shadow: var(--gn-shadow); }
.xp-dcard--1 { background: linear-gradient(135deg, #fff3ea, #ffe1cc); }
.xp-dcard__body { display: flex; flex-direction: column; gap: 4px; }
.xp-dcard__save { width: fit-content; padding: 3px 10px; border-radius: 999px; background: var(--gn-accent); color: #fff; font-size: 12px; font-weight: 650; }
.xp-dcard__name { font-size: 17px; font-weight: 650; line-height: 1.2; letter-spacing: -.01em; }
.xp-dcard__price { font-size: 14px; font-weight: 600; }
.xp-dcard__price del { display: block; color: var(--gn-muted); font-weight: 400; font-size: 12px; }
.xp-dcard__price ins { text-decoration: none; color: var(--gn-accent); }
.xp-dcard__cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; font-weight: 650; }
.xp-dcard__cta svg { color: var(--gn-accent); }
.xp-dcard__media img { width: 120px; height: 120px; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s var(--xp-ease); }
.xp-dcard:hover .xp-dcard__media img { transform: scale(1.06); }

/* Promises strip. */
.xp-tstrip { padding-top: 16px; }
.xp-tstrip__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; margin: 0 auto; padding-block: 0; }
.xp-tstrip__list li { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 10px; background: #fff; color: var(--gn-ink); font-size: 14px; font-weight: 600; }
.xp-tstrip__list li:first-child { border-radius: 18px 0 0 18px; }
.xp-tstrip__list li:last-child { border-radius: 0 18px 18px 0; }
.xp-tstrip__list li + li { box-shadow: inset 1px 0 0 var(--gn-line); }
.xp-tstrip__list svg { color: var(--gn-accent); }

/* Categories as a white panel of square tiles. */
.xp-home--deals .gn-cats .gn-container { padding-block: 24px 20px; border-radius: 24px; background: #fff; }
.xp-home--deals .gn-cats { padding-top: 16px; }
.xp-home--deals .gn-cats .gn-section__head { justify-content: space-between; text-align: left; padding-inline: 4px; }
.xp-home--deals .gn-cats .gn-section__head .gn-link-arrow { display: inline-flex; }
.xp-home--deals .gn-cat__media, .xp-home--deals .gn-cat__media--photo { width: 96px; height: 96px; border-radius: 22px; }
.xp-home--deals .gn-cat__count { display: block; }

/* Flash sale: orange header bar over the rail. */
.xp-flash .gn-container { padding-block: 0 20px; border-radius: 24px; background: #fff; overflow: hidden; }
.xp-flash__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 -20px 18px; padding: 14px 24px; background: linear-gradient(90deg, var(--gn-accent), #ff8a3d); color: #fff; }
.xp-flash__title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.xp-flash__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.xp-flash__ends { font-size: 14px; opacity: .9; }
.xp-flash__clock { margin: 0; gap: 6px; }
.xp-flash__clock .gn-countdown__unit { min-width: 0; padding: 4px 8px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .22); }
.xp-flash__clock .gn-countdown__unit b { display: inline; font-size: 17px; }
.xp-flash__clock .gn-countdown__unit small { margin-left: 3px; font-size: 10px; }
.xp-flash__clock .gn-countdown__unit:first-child { display: none; }
.xp-flash__head .gn-link-arrow, .xp-flash__head .gn-link-arrow svg { color: #fff; }

/* Dense product grids on white panels. */
.xp-home--deals .xp-hot { background: transparent; }
.xp-home--deals .xp-hot .gn-container, .xp-home--deals .gn-new .gn-container, .xp-home--deals .gn-budget .gn-container, .xp-home--deals .xp-series .gn-container { padding-block: 24px; border-radius: 24px; background: #fff; }
.xp-home--deals .gn-tabs { background: var(--gn-soft); }
.xp-home--deals ul.products li.product.gn-card { background: #fff; border: 1px solid var(--gn-line); border-radius: 18px; }
.xp-home--deals .gn-new li.product.gn-card { background: #fff; }
.xp-home--deals .gn-new .gn-rail ul.products { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
.xp-home--deals .gn-new .gn-rail__btn { display: none; }
.xp-home--deals .gn-card__body { text-align: left; align-items: stretch; }
.xp-home--deals .gn-card__title, .xp-home--deals .gn-card__price { text-align: left; justify-content: flex-start; }
.xp-home--deals .gn-card__img { padding: 12px !important; }
.xp-home--deals .xp-series__card { min-height: 240px; }
.xp-home--deals .xp-series__text { display: none; }
.xp-home--deals .xp-series__body .xp-logo__name { font-size: 26px; }
.xp-home--deals .gn-budget__item { background: var(--gn-soft); }
.xp-home--deals .gn-reviews { background: transparent; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
	.xp-dhero__grid { grid-template-columns: 1fr; }
	.xp-dhero__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
	.xp-home--deals .gn-new .gn-rail ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 959px) {
	.xp-story { padding-block: 44px; }
	.xp-story__inner { grid-template-columns: 1fr; gap: 24px; text-align: center; }
	.xp-story--flip .xp-story__media { order: 0; }
	.xp-story__text { margin-inline: auto; font-size: 15.5px; }
	.xp-story__actions { justify-content: center; }
	.xp-story__media { border-radius: 26px; }
	.xp-home--flagship .xp-slide { min-height: 0; }

	.xp-dhero { padding-top: 12px; }
	.xp-dhero .xp-hero { border-radius: 20px; }
	.xp-dhero .xp-slide__inner { padding: 28px 20px 76px; }
	.xp-dhero .xp-slide__media img { max-height: 220px; }
	.xp-dhero__side { gap: 10px; }
	.xp-dcard { grid-template-columns: 1fr; padding: 14px; border-radius: 18px; }
	.xp-dcard__media { order: -1; }
	.xp-dcard__media img { width: 100%; height: 96px; }
	.xp-dcard__name { font-size: 14px; }
	.xp-tstrip__list { grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 18px; overflow: hidden; background: var(--gn-line); }
	.xp-tstrip__list li { justify-content: flex-start; padding: 12px; font-size: 12.5px; border-radius: 0 !important; box-shadow: none !important; }
	.xp-home--deals .gn-cats .gn-container { border-radius: 0; }
	.xp-home--deals .gn-cat__media, .xp-home--deals .gn-cat__media--photo { width: 76px; height: 76px; border-radius: 18px; }
	.xp-flash .gn-container, .xp-home--deals .xp-hot .gn-container, .xp-home--deals .gn-new .gn-container, .xp-home--deals .gn-budget .gn-container, .xp-home--deals .xp-series .gn-container { border-radius: 0; }
	.xp-flash__badge { font-size: 18px; }
	.xp-home--deals .gn-new .gn-rail ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; }
}