/*
 * Alta (cosmetics-3): portfolio styles.
 * Colours, sizes, corners and buttons come from Site Kit (tokens.css). This file adds the fonts and the
 * layout "shade wall" homepage. Unlayered: wins over shared styles.
 * Palette: aubergine, alta pink, marigold on warm cream. Marigold only on dark backgrounds or as decoration.
 * Big circles and chunky pills, one colour block per section, no gradients, no glass, no hard square edges.
 */

/* ---------- fonts (self-hosted Latin; Bangla uses Site Kit's Hind Siliguri) ---------- */
@font-face {
	font-family: "Unbounded";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/unbounded-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("fonts/dm-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--aubergine: #24102e;
	--pink: #d81e5b;
	--marigold: #ffc83d;
	--cream: #fff9f5;
	--blush: #fde9e4;
	--line: #eed9d6;
	--on-dark: rgb(255 249 245 / 0.82);
	--pill: 999px;
}

/* Bangla reads better a little larger and looser than Latin, and Unbounded is wide: keep Bangla headings calmer. */
:lang(bn) body { line-height: 1.75; }
:lang(bn) :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.3; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.4em 1em;
	border: 2px solid var(--aubergine);
	border-radius: var(--pill);
	background: transparent;
	color: var(--aubergine);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
}
:lang(bn) .eyebrow { font-size: var(--text-s); }

/* ---------- buttons: chunky pills ---------- */
.btn--outline { border-color: var(--cream); background: transparent; color: var(--cream); }
.btn--outline:hover { background: var(--cream); color: var(--aubergine); }
.btn--accent { border-color: var(--marigold); background: var(--marigold); color: var(--aubergine); }
.btn--accent:hover { background: transparent; color: var(--marigold); }
.alh-help .btn--whatsapp,
.tones__wa { justify-self: start; }

/* ---------- header (split: menu left, logo centre, icons right) ---------- */
.site-header__logo-img img,
.site-header__logo-light img { block-size: 1.9rem; inline-size: auto; max-inline-size: none; }
@media (max-width: 479px) { .site-header__logo-img img, .site-header__logo-light img { block-size: 1.55rem; } }
.aura-header--split .site-header__nav .aura-nav__list { flex-wrap: nowrap; gap: 0; }
.aura-header--split .site-header__nav .aura-nav__list > li > a { padding: 0.5rem 0.45rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.aura-header--split .header-cta { border-radius: var(--pill); white-space: nowrap; }

/* ---------- shared section pieces ---------- */
.home-section { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.home-section__inner { align-items: stretch; gap: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
.section-head { display: grid; justify-items: start; gap: var(--gap-xs); }
.section-head__text { display: grid; justify-items: start; gap: 0.8rem; max-inline-size: 44rem; }
.section-head__text > * { margin: 0; }
.section-head__title { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; }
:lang(bn) .section-head__title { font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.5rem); line-height: 1.3; }
.section-head__more { padding: 0.55em 1.2em; border: 2px solid currentColor; border-radius: var(--pill); color: var(--aubergine); font-size: var(--text-s); font-weight: 600; text-decoration: none; transition: background-color var(--transition), color var(--transition); }
.section-head__more:hover { background: var(--aubergine); color: var(--cream); }
@media (min-width: 768px) { .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-m); } }

/* ==========================================================================
   1. Hero: aubergine band, rounded photo
   ========================================================================== */
.alh-hero { position: relative; padding: 0; overflow: hidden; background: var(--aubergine); color: var(--cream); }
.alh-hero__inner { display: grid; gap: var(--gap-l); align-items: center; padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); padding-inline: var(--gutter); }
.alh-hero__text { display: grid; justify-items: start; gap: var(--gap-s); }
.alh-hero__text > * { margin: 0; }
.alh-hero__eyebrow { border-color: var(--marigold); color: var(--marigold); }
.alh-hero__title { color: var(--cream); font-size: clamp(2.5rem, 1.2rem + 5.6vw, 5.6rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
:lang(bn) .alh-hero__title { font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4.4rem); line-height: 1.2; }
.alh-hero__lead { max-inline-size: 30rem; color: var(--on-dark); font-size: var(--text-l); }
.alh-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gap-xs); }
.alh-hero__frame { position: relative; inline-size: min(100%, 34rem); justify-self: center; }
/* Three round product photos overlap the portrait: a lipstick, the palette, the nail colours. */
.alh-hero__chip { position: absolute; z-index: 2; overflow: hidden; aspect-ratio: 1; border: 0.3rem solid var(--aubergine); border-radius: 50%; background: var(--aubergine); }
.alh-hero__chip,
.alh-hero__chip img { display: block; object-fit: cover; }
.alh-hero__chip img { inline-size: 100%; block-size: 100%; }
.alh-hero__chip--1 { inline-size: 30%; inset-block-start: 5%; inset-inline-start: -4%; }
.alh-hero__chip--2 { inline-size: 36%; inset-block-end: -4%; inset-inline-end: -3%; }
.alh-hero__chip--3 { inline-size: 26%; inset-block-end: 14%; inset-inline-start: -4%; }
@media (min-width: 900px) {
	.alh-hero__chip--1 { inset-inline-start: -9%; }
	.alh-hero__chip--2 { inset-inline-end: -6%; }
	.alh-hero__chip--3 { inset-inline-start: -7%; }
}
.alh-hero__image,
.alh-hero__image img { position: relative; z-index: 1; display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 100% center; border-radius: 2.5rem; }
@media (min-width: 900px) {
	.alh-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 5rem); }
	.alh-hero__frame { justify-self: end; }
	.alh-hero__image,
	.alh-hero__image img { aspect-ratio: 1; }
}

/* ==========================================================================
   2. The shade wall: round colour tiles (no images)
   ========================================================================== */
.alh-wall { background: var(--cream); }
.wall { display: grid; gap: var(--gap-m); }
@media (min-width: 900px) { .wall { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--gap-l) var(--gap-m); } }
.wall__family { display: grid; gap: var(--gap-xs); align-content: start; }
@media (min-width: 900px) {
	.wall__family--2 { grid-column: span 2; }
	.wall__family--3 { grid-column: span 3; }
	.wall__family--6 { grid-column: span 6; }
}
.wall__label { justify-self: start; margin: 0; padding: 0.35em 1em; border-radius: var(--pill); background: var(--aubergine); color: var(--cream); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; }
.wall__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-xs); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) {
	.wall__family--2 .wall__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wall__family--3 .wall__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wall__family--6 .wall__tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.wall__item { display: block; margin: 0; }
.tile { display: grid; justify-items: center; gap: 0.5rem; color: var(--aubergine); text-decoration: none; }
.tile > * { margin: 0; }
.tile__disc { display: block; inline-size: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--shade); box-shadow: inset 0 0 0 2px rgb(36 16 46 / 0.14); transition: transform 0.35s var(--easing), box-shadow 0.35s var(--easing); }
.tile:hover .tile__disc,
.tile:focus-visible .tile__disc { transform: scale(1.06); box-shadow: 0 0 0 4px var(--cream), 0 0 0 7px var(--aubergine); }
.tile__name { font-size: var(--text-xs); font-weight: 600; text-align: center; }
:lang(bn) .tile__name { font-size: var(--text-s); }

/* Shade colours (match the swatches in Products → Attributes → Shade) */
.shade--chilli-red { --shade: #b3121d; }
.shade--brick { --shade: #9c3a2b; }
.shade--maroon { --shade: #6e1423; }
.shade--hot-pink { --shade: #e0267a; }
.shade--rose-nude { --shade: #b9776f; }
.shade--mauve { --shade: #a4626f; }
.shade--plum { --shade: #5e1f47; }
.shade--berry { --shade: #8c1d4f; }
.shade--peach { --shade: #e88a68; }
.shade--coral { --shade: #e8604c; }
.shade--ivory { --shade: #ecc9a8; }
.shade--sand { --shade: #dcae85; }
.shade--honey { --shade: #c9935f; }
.shade--almond { --shade: #b47e4f; }
.shade--caramel { --shade: #96643c; }
.shade--chestnut { --shade: #6f4629; }
.shade--alta-red { --shade: #c4122e; }
.shade--marigold-nail { --shade: #f2a71b; }
.shade--teal-nail { --shade: #0f6f73; }
.shade--lilac-nail { --shade: #a98bd6; }
.shade--ink-nail { --shade: #1c1a2b; }
.shade--milk-nail { --shade: #f3e6dc; }

/* ==========================================================================
   3. Skin tone cards: four equal cards
   ========================================================================== */
.alh-tones { background: var(--blush); }
.tones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-xs); margin: 0; padding: 0; list-style: none; }
@media (min-width: 800px) { .tones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-m); } }
.tones__item { display: block; margin: 0; }
.tone { display: grid; overflow: hidden; border-radius: 1.75rem; background: #fff; color: var(--aubergine); text-decoration: none; transition: transform 0.35s var(--easing); }
.tone:hover { transform: translateY(-4px); }
.tone__image { overflow: hidden; }
.tone__image,
.tone__image img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tone__caption { display: grid; gap: 0.2rem; padding: 0.9rem 1rem 1.1rem; }
.tone__caption > * { margin: 0; }
.tone__title { color: var(--aubergine); font-size: clamp(1rem, 0.85rem + 0.7vw, 1.4rem); font-weight: 600; }
.tone__go { color: var(--aubergine); font-size: var(--text-xs); font-weight: 600; }
:lang(bn) .tone__go { font-size: var(--text-s); }

/* ==========================================================================
   4. New in: colour-row banner and carousel
   ========================================================================== */
.alh-new { background: var(--cream); }
.new-banner { overflow: hidden; border-radius: 2rem; }
.new-banner,
.new-banner img { display: block; inline-size: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 2rem; }
@media (max-width: 599px) { .new-banner, .new-banner img { aspect-ratio: 16 / 9; } }
.alh-new .aura-carousel { --carousel-columns: 4; }
.aura-carousel__dot[aria-current="true"] { background: var(--aubergine); }

/* ---------- product cards (overlay) ---------- */
.aura-card--overlay .product-card__title { font-family: var(--font-heading); font-weight: 600; }
.aura-card--overlay .product-card__image img { transition: transform 0.9s var(--easing); }
.aura-card--overlay .product-card:hover .product-card__image img { transform: scale(1.04); }
.card-specs { font-size: var(--text-xs); font-weight: 600; }
/* Text on the card photo stays light on hover: Woo's own price colours are dark. */
.aura-card--overlay .product-card__body .woocommerce-Price-amount,
.aura-card--overlay .product-card__body .price,
.aura-card--overlay .product-card__body .product-card__price { color: var(--cream); }
.aura-card--overlay .product-card__body .price ins,
.aura-card--overlay .product-card__body .price ins .woocommerce-Price-amount,
.aura-card--overlay .product-card__body .product-card__price ins { color: var(--marigold); font-weight: 600; }
.aura-card--overlay .product-card__body .price del,
.aura-card--overlay .product-card__body .price del .woocommerce-Price-amount { color: rgb(255 249 245 / 0.72); }
.aura-card--overlay .product-card__body .card-specs { color: rgb(255 249 245 / 0.88); }
.aura-card--overlay .product-card__body .product-card__title a:hover { color: var(--marigold); }
.aura-card--overlay .product-card__cart :is(a, button).button { border-color: var(--cream); background: var(--cream); color: var(--aubergine); }
.aura-card--overlay .product-card__cart :is(a, button).button:hover { border-color: var(--marigold); background: var(--marigold); color: var(--aubergine); }

/* ==========================================================================
   5. Shop by part: big round tiles
   ========================================================================== */
.alh-parts { background: var(--cream); padding-block-start: 0; }
.parts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9rem, 42%); gap: var(--gap-s); margin: 0; padding: 0 0 0.5rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.parts::-webkit-scrollbar { display: none; }
.parts__item { display: block; margin: 0; scroll-snap-align: start; }
@media (min-width: 900px) { .parts { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; padding: 0; } }
.part { display: grid; justify-items: center; gap: 0.9rem; color: var(--aubergine); text-decoration: none; }
.part > * { margin: 0; }
.part__image { overflow: hidden; inline-size: 100%; border-radius: 50%; background: var(--blush); }
.part__image,
.part__image img { display: block; inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.part__image img { transition: transform 0.8s var(--easing); }
.part:hover .part__image img { transform: scale(1.06); }
.part__name { padding: 0.45em 1.1em; border-radius: var(--pill); background: var(--aubergine); color: var(--cream); font-family: var(--font-heading); font-size: var(--text-s); font-weight: 600; transition: background-color var(--transition); }
.part:hover .part__name { background: var(--pink); }

/* ==========================================================================
   6. Base match: marigold block
   ========================================================================== */
.alh-base { background: var(--marigold); }
.base { display: grid; gap: var(--gap-l); align-items: center; }
@media (min-width: 900px) { .base { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 2rem + 3vw, 5rem); } }
.base__image { overflow: hidden; max-inline-size: 26rem; border-radius: 2rem; }
.base__image,
.base__image img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2rem; }
.base__text { display: grid; justify-items: start; gap: var(--gap-s); }
.base__text > * { margin: 0; }
.alh-base .eyebrow { background: var(--aubergine); color: var(--marigold); }
.base__title { color: var(--aubergine); font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.2rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
:lang(bn) .base__title { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); line-height: 1.3; }
.steps { display: grid; gap: var(--gap-xs); margin: 0; padding: 0; list-style: none; }
.steps__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: var(--gap-xs); margin: 0; }
.steps__item > * { margin: 0; }
.steps__number { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--aubergine); color: var(--marigold); font-family: var(--font-heading); font-weight: 600; }
.steps__text { color: var(--aubergine); font-size: var(--text-l); }

.dots { display: flex; flex-flow: row wrap; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.home-section .dots { flex-direction: row; align-items: center; }
.dots__item { display: block; inline-size: auto; margin: 0; }
.dot { position: relative; display: block; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; background: var(--shade); box-shadow: inset 0 0 0 2px rgb(36 16 46 / 0.2); text-decoration: none; transition: box-shadow var(--transition), transform var(--transition); }
.dot:hover,
.dot:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--aubergine); }
.dot__name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* read by screen readers */

/* ==========================================================================
   7. Deals: pink band
   ========================================================================== */
.alh-deals { background: var(--pink); }
.alh-deals .eyebrow { border-color: var(--cream); color: var(--cream); }
.alh-deals .section-head__title { color: var(--cream); }
.alh-deals .section-head__more { color: var(--cream); }
.alh-deals .section-head__more:hover { background: var(--cream); color: var(--aubergine); }
.product-grid--three { --shop-columns: 3; inline-size: 100%; }
.alh-deals .product-card,
.alh-kits .product-card { background: #fff; }

/* ==========================================================================
   8. Kits: aubergine band
   ========================================================================== */
.alh-kits { background: var(--aubergine); color: var(--on-dark); }
.alh-kits .eyebrow { border-color: var(--marigold); color: var(--marigold); }
.kits-feature { display: grid; gap: var(--gap-m); align-items: center; }
@media (min-width: 900px) { .kits-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 2rem + 3vw, 5rem); } }
.kits-feature__image { overflow: hidden; border-radius: 2rem; }
.kits-feature__image,
.kits-feature__image img { display: block; inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2rem; }
.kits-feature__text { display: grid; justify-items: start; gap: var(--gap-s); }
.kits-feature__text > * { margin: 0; }
.kits-feature__title { color: var(--cream); font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.2rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
:lang(bn) .kits-feature__title { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); line-height: 1.3; }
.kits-feature__body { max-inline-size: 30rem; color: var(--on-dark); font-size: var(--text-l); }

/* ==========================================================================
   9. Nail bar
   ========================================================================== */
.alh-nails { background: var(--cream); }
.nailbar { display: grid; gap: var(--gap-l); align-items: center; }
@media (min-width: 900px) { .nailbar { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(3rem, 2rem + 3vw, 5rem); } }
.nailbar__text { display: grid; justify-items: start; gap: var(--gap-s); }
.nailbar__text > * { margin: 0; }
.nailbar__title { color: var(--aubergine); font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.2rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
:lang(bn) .nailbar__title { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); line-height: 1.3; }
.nailbar__body { max-inline-size: 32rem; color: var(--text-color); }
.nailbar__image { overflow: hidden; max-inline-size: 26rem; justify-self: center; border-radius: 12rem 12rem 2rem 2rem; background: var(--blush); }
.nailbar__image,
.nailbar__image img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12rem 12rem 2rem 2rem; }
@media (min-width: 900px) { .nailbar__image { order: 2; } }

/* ==========================================================================
   10. Journal
   ========================================================================== */
.alh-journal { background: var(--blush); }
.journal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-m); margin: 0; padding: 0; list-style: none; }
@media (min-width: 800px) { .journal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.journal-grid__item { display: grid; align-content: start; gap: 0.6rem; margin: 0; }
.journal-card__image { overflow: hidden; border-radius: 1.75rem; }
.journal-card__image,
.journal-card__image img { display: block; inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 1.75rem; }
.journal-card__title { margin: 0.3rem 0 0; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); font-weight: 600; line-height: 1.25; }
.journal-card__title a { color: var(--aubergine); text-decoration: none; }
.journal-card__title a:hover { color: var(--pink); text-decoration: underline; }
.journal-card__excerpt { margin: 0; color: var(--text-muted); font-size: var(--text-s); }

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.alh-faq { background: var(--cream); }
.faq-split { display: grid; gap: var(--gap-l); }
@media (min-width: 900px) { .faq-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.faq-split__head { display: grid; justify-items: start; gap: var(--gap-xs); }
.faq-split__head > * { margin: 0; }
.faq-split__title { color: var(--aubergine); font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
:lang(bn) .faq-split__title { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.3; }
.faq { display: grid; gap: 0.75rem; inline-size: 100%; }
.faq__item { border-radius: 1.5rem; background: var(--blush); }
.faq__q { position: relative; padding: 1.1rem 3.6rem 1.1rem 1.4rem; color: var(--aubergine); font-family: var(--font-body); font-size: var(--text-l); font-weight: 600; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; inset-inline-end: 1rem; inset-block-start: 50%; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--aubergine); color: var(--cream); font-size: 1.2rem; transform: translateY(-50%); }
.faq__item[open] .faq__q::after { content: "−"; background: var(--pink); }
.faq__a { margin: 0; padding: 0 1.4rem 1.3rem; color: var(--text-color); }

/* ==========================================================================
   12. WhatsApp band
   ========================================================================== */
.alh-help { background: var(--cream); padding-block-start: 0; }
.help { display: grid; gap: var(--gap-m); align-items: center; padding: clamp(1.2rem, 1rem + 1.6vw, 2.4rem); border-radius: 2.5rem; background: var(--aubergine); }
@media (min-width: 900px) { .help { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--gap-l); } }
.help__image { overflow: hidden; border-radius: 2rem; }
.help__image,
.help__image img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2rem; }
.help__text { display: grid; justify-items: start; gap: var(--gap-xs); }
.help__text > * { margin: 0; }
.help__title { color: var(--cream); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
:lang(bn) .help__title { line-height: 1.3; }
.help__body { max-inline-size: 32rem; color: var(--on-dark); }

.demo-note { color: var(--text-muted); font-size: var(--text-s); }

/* Cart, checkout and account: room above the footer. */
.cart-page,
.checkout-page,
.account-page { padding-block-end: var(--section-m, 4rem); }