/*
 * Shishir (cosmetics-1): portfolio styles.
 * Colours, sizes, corners and buttons come from Site Kit (tokens.css). This file adds the fonts and the
 * layout "dew" homepage. Unlayered: wins over shared styles.
 * Palette: milk white, blush, rose (the only strong colour), deep plum for type and one band, a hint of dew mint.
 */

/* ---------- fonts (self-hosted Latin; Bangla uses Site Kit's Hind Siliguri) ---------- */
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("fonts/fraunces-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: "Fraunces";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("fonts/fraunces-italic-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: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("fonts/jakarta-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 {
	--milk: #fdf9f7;
	--blush: #f8e8ea;
	--blush-deep: #f1d3d9;
	--rose: #c94f6d;
	--rose-soft: #e98ba1;
	--plum: #2b1d24;
	--dew: #dcefe8;
	--lilac: #ece4f3;
	--peach: #fbe6da;
	--glass: rgb(255 255 255 / 0.62);
	--round-l: 28px;
	--round-m: 22px;
}

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

h1, h2, h3, h4 { font-variation-settings: "opsz" 144, "SOFT" 100; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	color: var(--rose);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
/* A small dew drop before every eyebrow */
.eyebrow::before {
	content: "";
	flex: none;
	inline-size: 9px;
	block-size: 13px;
	background: currentColor;
	clip-path: path("M4.4 0C5.9 2.6 8.8 5.2 8.8 8A4.4 4.4 0 0 1 0 8C0 5.2 2.9 2.6 4.4 0Z");
}
:lang(bn) .eyebrow { letter-spacing: 0.02em; font-size: var(--text-s); }

/* ---------- buttons ---------- */
.btn--glass { background: var(--glass); border-color: rgb(255 255 255 / 0.9); color: var(--plum); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--glass:hover { background: #fff; color: var(--rose); }
.btn--light { background: #fff; border-color: #fff; color: var(--rose); }
.btn--light:hover { background: transparent; color: #fff; }
.btn--outline { border-color: var(--plum); color: var(--plum); }
.btn--outline:hover { background: var(--plum); color: #fff; }

/* ---------- header ---------- */
/* Frosted header: the blur sits on a background layer, never on the header itself. A backdrop-filter on the header
   would make it the containing block for its fixed children (cart drawer, popups) and widen the page on phones. */
.site-header { isolation: isolate; background: transparent; border-block-end: 1px solid rgb(201 79 109 / 0.08); }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(253 249 247 / 0.86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); pointer-events: none; }
.site-header__logo-img img { block-size: 2.15rem; inline-size: auto; max-inline-size: none; }
@media (min-width: 1100px) { .site-header__logo-img img { block-size: 2.7rem; } }
@media (max-width: 479px) { .site-header__logo-img img { block-size: 1.75rem; } }
.aura-nav--bar .aura-nav__list > li > a { font-weight: 500; }

/* ---------- shared section pieces ---------- */
.home-section { padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
.home-section__inner { align-items: stretch; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head { display: grid; justify-items: start; gap: var(--gap-xs); }
.section-head__text { display: grid; justify-items: start; gap: 0.6rem; max-inline-size: 44rem; }
.section-head__text > * { margin: 0; }
.section-head__title { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); font-weight: 350; line-height: 1.05; letter-spacing: -0.025em; }
:lang(bn) .section-head__title { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1.3; }
.section-head__more { color: var(--plum); font-size: var(--text-s); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rose-soft); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.section-head__more:hover { color: var(--rose); }
@media (min-width: 768px) { .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-m); } }

/* ==========================================================================
   1. Hero
   ========================================================================== */
.shh-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; overflow: hidden; background: var(--blush); }
.shh-hero__image,
.shh-hero__image img { display: block; inline-size: 100%; aspect-ratio: 1; object-fit: cover; object-position: 100% center; border-radius: 0; }
.shh-hero__inner { position: relative; z-index: 2; padding-block: var(--gap-l) var(--section-s); padding-inline: var(--gutter); }
.shh-hero__text { display: grid; justify-items: start; gap: var(--gap-s); max-inline-size: 36rem; }
.shh-hero__text > * { margin: 0; }
.shh-hero__title { color: var(--plum); font-size: clamp(3rem, 1.6rem + 6vw, 6.6rem); font-weight: 300; line-height: 0.95; letter-spacing: -0.04em; }
:lang(bn) .shh-hero__title { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); line-height: 1.2; letter-spacing: 0; }
.shh-hero__lead { color: #5b4a52; font-size: var(--text-l); max-inline-size: 30rem; }
.shh-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gap-xs); }
.facts { display: flex; flex-flow: row wrap; gap: 0.5rem; margin: var(--gap-xs) 0 0; padding: 0; list-style: none; }
.facts > .facts__item { flex: none; flex-direction: row; inline-size: auto; }
.facts__item { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.5rem 0.95rem 0.5rem 0.75rem; border: 1px solid rgb(255 255 255 / 0.9); border-radius: 999px; background: var(--glass); color: var(--plum); font-size: var(--text-xs); font-weight: 500; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.facts__item::before { content: ""; inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 4px rgb(201 79 109 / 0.15); }
@media (min-width: 900px) {
	.shh-hero { min-block-size: min(90vh, 56rem); align-items: center; }
	.shh-hero__image,
	.shh-hero__image img { position: absolute; inset: 0; block-size: 100%; aspect-ratio: auto; object-position: 70% center; }
	.shh-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(248 232 234 / 0.92) 0%, rgb(248 232 234 / 0.55) 34%, rgb(248 232 234 / 0) 58%); }
	.shh-hero__inner { padding-block: var(--section-l, 6rem); }
}

/* ==========================================================================
   2. Skin-type picker: glass cards
   ========================================================================== */
.shh-skin { background: linear-gradient(180deg, var(--blush) 0%, var(--milk) 100%); }
.skin-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-s); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1000px) { .skin-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-m); } }
.skin-cards__item { display: block; margin: 0; }
.skin-card { --tint: var(--blush); position: relative; display: grid; align-content: start; gap: 0.4rem; block-size: 100%; padding: clamp(1.1rem, 0.8rem + 1vw, 1.8rem); border: 1px solid rgb(255 255 255 / 0.95); border-radius: var(--round-l); background: linear-gradient(160deg, #fff 0%, var(--tint) 100%); box-shadow: 0 24px 50px -36px rgb(122 51 72 / 0.45); color: inherit; text-decoration: none; overflow: hidden; transition: transform 0.45s var(--easing), box-shadow 0.45s var(--easing); }
.skin-card > * { margin: 0; }
.skin-card--oily { --tint: var(--dew); }
.skin-card--combination { --tint: var(--peach); }
.skin-card--dry { --tint: var(--blush-deep); }
.skin-card--sensitive { --tint: var(--lilac); }
.skin-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -34px rgb(122 51 72 / 0.55); }
.skin-card__image { justify-self: end; margin-block-end: 0.3rem; }
.skin-card__image,
.skin-card__image img { display: block; inline-size: clamp(4.5rem, 3.5rem + 3vw, 6.5rem); block-size: clamp(4.5rem, 3.5rem + 3vw, 6.5rem); object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 6px rgb(255 255 255 / 0.7); }
.skin-card__feel { color: var(--rose); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
:lang(bn) .skin-card__feel { letter-spacing: 0; font-size: var(--text-s); }
.skin-card__name { color: var(--plum); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.7rem); font-style: italic; font-weight: 350; line-height: 1; }
.skin-card__text { color: #6a5960; font-size: var(--text-s); }
.skin-card__go { margin-block-start: 0.5rem; color: var(--plum); font-size: var(--text-s); font-weight: 600; }
.skin-card:hover .skin-card__go { color: var(--rose); }

/* ==========================================================================
   3. Favourites carousel + product cards
   ========================================================================== */
.shh-fav .aura-carousel { --carousel-columns: 4; }
.aura-card--minimal .product-card__image { overflow: hidden; border-radius: var(--round-m); background: var(--blush); }
.aura-card--minimal .product-card__image img { border-radius: var(--round-m); transition: transform 0.9s var(--easing); }
.aura-card--minimal .product-card:hover .product-card__image img { transform: scale(1.04); }
.aura-card--minimal .product-card__title { font-family: var(--font-heading); font-size: var(--text-l); font-weight: 400; letter-spacing: -0.01em; }
.card-specs { color: var(--rose); font-size: var(--text-xs); font-weight: 600; }
.product-card__cart :is(a, button).button { border: 1px solid var(--blush-deep); border-radius: 999px; background: var(--blush); color: var(--plum); font-weight: 600; transition: background-color var(--transition), color var(--transition), border-color var(--transition); }
.product-card__cart :is(a, button).button:hover { border-color: var(--rose); background: var(--rose); color: #fff; }

/* ==========================================================================
   4. Routine: four numbered steps
   ========================================================================== */
.routine { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-m) var(--gap-s); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1000px) {
	.routine { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-m); }
	.routine::before { content: ""; position: absolute; inset-inline: 8%; inset-block-start: 2.1rem; border-block-start: 1.5px dashed var(--rose-soft); }
	.routine__item:nth-child(even) { margin-block-start: 2.5rem; }
}
.routine__item { position: relative; display: block; margin: 0; }
.step { display: grid; gap: 0.45rem; color: inherit; text-decoration: none; }
.step > * { margin: 0; }
.step__image { order: 2; overflow: hidden; border-radius: var(--round-l); }
.step__image,
.step__image img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.9s var(--easing); }
.step:hover .step__image img { transform: scale(1.05); }
.step__number { order: 1; position: relative; z-index: 1; display: grid; place-items: center; inline-size: 4.2rem; block-size: 4.2rem; border-radius: 50%; background: var(--milk); box-shadow: 0 0 0 1.5px var(--rose-soft); color: var(--rose); font-family: var(--font-heading); font-size: 1.9rem; font-style: italic; font-weight: 300; }
.step__title { order: 3; margin-block-start: 0.4rem; color: var(--plum); font-size: var(--h3); font-weight: 400; }
.step__text { order: 4; color: var(--text-muted); font-size: var(--text-s); }

/* ==========================================================================
   5. Categories: bento
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 12.5rem; gap: var(--gap-s); margin: 0; padding: 0; list-style: none; }
.bento__item { display: block; margin: 0; }
.bento__item--cleansers { grid-row: span 2; }
@media (min-width: 900px) {
	.bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 17rem); grid-auto-rows: 17rem; grid-template-areas: "a b c c" "a d e f"; gap: var(--gap-m); }
	.bento__item--cleansers { grid-area: a; grid-row: a; }
	.bento__item--toners { grid-area: b; }
	.bento__item--serums { grid-area: c; }
	.bento__item--moisturisers { grid-area: d; }
	.bento__item--sunscreen { grid-area: e; }
	.bento__item--masks { grid-area: f; }
}
.bento-tile { position: relative; display: block; block-size: 100%; overflow: hidden; border-radius: var(--round-l); background: var(--blush); color: inherit; text-decoration: none; }
.bento-tile__image,
.bento-tile__image img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1s var(--easing); }
.bento-tile:hover .bento-tile__image img { transform: scale(1.05); }
.bento-tile__name { position: absolute; inset-inline-start: 0.9rem; inset-block-end: 0.9rem; padding: 0.5rem 1rem; border-radius: 999px; background: var(--glass); color: var(--plum); font-family: var(--font-heading); font-size: var(--text-m, 1.05rem); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color var(--transition), color var(--transition); }
.bento-tile:hover .bento-tile__name { background: var(--rose); color: #fff; }

/* ==========================================================================
   6. Ingredients on deep plum: arched cards
   ========================================================================== */
.shh-ing { background: var(--plum); color: rgb(253 249 247 / 0.72); }
.shh-ing .section-head__title { color: var(--milk); }
.shh-ing .eyebrow { color: var(--rose-soft); }
.ing-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-m) var(--gap-s); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1000px) { .ing-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-m); } }
.ing-cards__item { display: block; margin: 0; }
.ing-card { display: grid; gap: 0.5rem; color: inherit; text-decoration: none; }
.ing-card > * { margin: 0; }
.ing-card__image { overflow: hidden; border-radius: 999px 999px var(--round-m) var(--round-m); }
.ing-card__image,
.ing-card__image img { display: block; inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1s var(--easing); }
.ing-card:hover .ing-card__image img { transform: scale(1.05); }
.ing-card__name { margin-block-start: 0.5rem; color: var(--milk); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-style: italic; font-weight: 300; line-height: 1.1; transition: color var(--transition); }
.ing-card:hover .ing-card__name { color: var(--rose-soft); }
.ing-card__text { font-size: var(--text-s); }

/* ==========================================================================
   7. Starter set
   ========================================================================== */
.shh-set { background: radial-gradient(120% 80% at 100% 0%, var(--blush) 0%, var(--milk) 60%); }
.set-feature { display: grid; gap: var(--gap-l); align-items: center; }
@media (min-width: 1000px) { .set-feature { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(3rem, 2rem + 3vw, 5rem); } }
.set-feature__image { overflow: hidden; border-radius: var(--round-l); }
.set-feature__image,
.set-feature__image img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.set-feature__text { display: grid; justify-items: start; gap: var(--gap-s); }
.set-feature__text > * { margin: 0; }
.set-feature__title { color: var(--plum); font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.025em; }
:lang(bn) .set-feature__title { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1.3; }
.set-feature__body { max-inline-size: 32rem; color: var(--text-muted); }
.set-feature .product-grid { inline-size: 100%; margin-block-start: var(--gap-xs); }
.product-grid--two { --shop-columns: 2; }

/* ==========================================================================
   8. Textures carousel
   ========================================================================== */
.shh-tex { overflow: hidden; }
.shh-tex .aura-carousel { --carousel-columns: 4; }
.textures__item { margin: 0; }
.texture { position: relative; margin: 0; overflow: hidden; border-radius: var(--round-l); }
.texture__image,
.texture__image img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.texture__label { position: absolute; inset-inline-start: 0.9rem; inset-block-end: 0.9rem; padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--glass); color: var(--plum); font-family: var(--font-heading); font-style: italic; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ==========================================================================
   9. Patch test: a rose card
   ========================================================================== */
.shh-patch { padding-block: var(--gap-m); }
.patch { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--gap-s) var(--gap-m); padding: clamp(1.3rem, 1rem + 1.4vw, 2.3rem); border-radius: var(--round-l); background: linear-gradient(120deg, var(--rose) 0%, #d96a85 100%); color: rgb(255 255 255 / 0.9); }
.patch__image,
.patch__image img { display: block; inline-size: 4.5rem; block-size: 4.5rem; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.35); }
.patch__text { grid-column: 2; display: grid; gap: 0.3rem; }
.patch__text > * { margin: 0; }
.patch__title { color: #fff; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); font-weight: 400; }
.patch__body { font-size: var(--text-s); max-inline-size: 46rem; }
.patch > .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 900px) { .patch { grid-template-columns: 4.5rem minmax(0, 1fr) auto; } .patch > .btn { grid-column: 3; } }

/* ==========================================================================
   10. Story
   ========================================================================== */
.story { display: grid; gap: var(--gap-l); align-items: center; }
@media (min-width: 900px) { .story { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(3rem, 2rem + 3vw, 5rem); } }
.story__image { overflow: hidden; border-radius: 999px 999px var(--round-l) var(--round-l); }
.story__image,
.story__image img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.story__text { display: grid; justify-items: start; gap: var(--gap-s); }
.story__text > * { margin: 0; }
.story__title { color: var(--plum); font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; }
:lang(bn) .story__title { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1.3; }
.story__body { color: var(--text-muted); font-size: var(--text-l); max-inline-size: 36rem; }

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.shh-faq { background: var(--blush); }
.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(--plum); font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 300; }
.faq { display: grid; gap: 0.6rem; inline-size: 100%; }
.faq__item { border-radius: var(--round-m); background: #fff; box-shadow: 0 12px 30px -26px rgb(122 51 72 / 0.5); }
.faq__q { position: relative; padding: 1.1rem 3.2rem 1.1rem 1.3rem; color: var(--plum); font-family: var(--font-heading); font-size: var(--text-l); 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: 1.8rem; block-size: 1.8rem; border-radius: 50%; background: var(--blush); color: var(--rose); font-family: var(--font-body); font-size: 1.2rem; transform: translateY(-50%); }
.faq__item[open] .faq__q::after { content: "−"; background: var(--rose); color: #fff; }
.faq__a { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--text-muted); }

/* ==========================================================================
   12. WhatsApp band
   ========================================================================== */
.ask { display: grid; gap: var(--gap-m); align-items: center; padding: clamp(1.4rem, 1rem + 2vw, 3rem); border-radius: var(--round-l); background: linear-gradient(135deg, var(--dew) 0%, var(--blush) 100%); }
@media (min-width: 900px) { .ask { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--gap-l); } .ask__text { grid-column: 2; } }
.ask__image,
.ask__image img { display: block; inline-size: 100%; max-inline-size: 15rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 8px rgb(255 255 255 / 0.6); }
.ask__text { display: grid; justify-items: start; gap: var(--gap-xs); }
.ask__text > * { margin: 0; }
.ask__title { color: var(--plum); font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem); font-weight: 300; }
.ask__body { max-inline-size: 34rem; color: #5b4a52; }

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