/* ============================================================
   NAILA MAISON — homepage (Tajvi-inspired layout)
   ============================================================ */

/* ---------- hero carousel ---------- */
.hero-carousel { position: relative; overflow: hidden; }
.hero-track { display: flex; transition: transform .8s cubic-bezier(.6,0,.2,1); }
.hero-slide { position: relative; min-width: 100%; height: clamp(420px, 56vw, 640px); overflow: hidden; }
.hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,13,6,.82) 0%, rgba(18,13,6,.5) 38%, rgba(18,13,6,.05) 68%, transparent 85%); }
.hero-slide__body { position: absolute; z-index: 2; top: 50%; left: clamp(2rem, 6vw, 6rem); transform: translateY(-50%); max-width: 30rem; color: #fbf6ec; }
.hero-slide__body .eyebrow { color: var(--gold-bright); margin-bottom: 1rem; }
.hero-slide__body h2 { font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; margin-bottom: 1rem; }
.hero-slide__body h2 em { font-style: italic; color: var(--gold-bright); }
.hero-slide__body p { font-family: var(--f-accent); font-style: italic; font-size: 1.3rem; color: rgba(251,246,236,.9); margin-bottom: 1.8rem; line-height: 1.4; }
.hero-slide__body .btn { border-color: var(--gold-bright); color: var(--gold-bright); }
.hero-slide__body .btn::before { background: var(--gold-bright); }
.hero-slide__body .btn:hover { color: #1a140b; }
.hero-ctrl { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px; border-radius: 50%; background: rgba(251,246,236,.16); backdrop-filter: blur(6px); border: 1px solid rgba(251,246,236,.4); color: #fbf6ec; display: grid; place-items: center; transition: all .3s ease; }
.hero-ctrl:hover { background: var(--gold); border-color: var(--gold); }
.hero-ctrl.prev { left: 18px; } .hero-ctrl.next { right: 18px; }
.hero-ctrl i { font-size: 20px; }
.hero-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: .6rem; }
.hero-dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(251,246,236,.45); transition: all .3s ease; }
.hero-dots button.active { background: var(--gold-bright); width: 26px; border-radius: 6px; }
/* draggable / swipeable hero */
.hero-carousel { cursor: grab; touch-action: pan-y; }
.hero-carousel.is-dragging { cursor: grabbing; }
.hero-carousel:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.hero-track { user-select: none; -webkit-user-select: none; }
.hero-slide img { -webkit-user-drag: none; }
@media (prefers-reduced-motion: reduce) { .hero-track { transition: none !important; } }

/* ---------- section heading ---------- */
.home-head { text-align: center; margin-bottom: 2.6rem; }
.home-head h2 { font-family: var(--f-display); font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.home-head p { color: var(--ink-soft); margin-top: .6rem; font-size: .95rem; }
.home-head .flourish { margin-top: 1rem; }

/* ---------- trending (cream band) ---------- */
/* Soft band: an edge-fading tint that blends into the page gradient (no hard block). */
.band-cream { background: linear-gradient(180deg, transparent 0%, var(--band-tint) 14%, var(--band-tint) 86%, transparent 100%); }

/* ---------- signature collection: square-cell bento ---------- */
.sig-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.sig { position: relative; overflow: hidden; display: block; aspect-ratio: 1 / 1; border-radius: 0; }
.sig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.sig:hover img { transform: scale(1.05); }
.sig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,15,8,.72), rgba(20,15,8,0) 58%); }
.sig__t { position: absolute; z-index: 2; left: 1.4rem; right: 1.4rem; bottom: 1.3rem; color: #fbf6ec; }
.sig__t small { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-bright); display: block; margin-bottom: .3rem; }
.sig__t h3 { font-family: var(--f-display); font-size: 1.3rem; line-height: 1.1; }
/* the hero tile spans a 2x2 block — still square */
.sig--xl { grid-column: span 2; grid-row: span 2; }
.sig--xl .sig__t h3 { font-size: 1.9rem; }
@media (max-width: 880px) { .sig-bento { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 520px) { .sig-bento { grid-template-columns: 1fr 1fr; } .sig--xl { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1 / 1; } }

/* ---------- shop by category ---------- */
.sbc { display: grid; grid-template-columns: 1.1fr 2fr; gap: 1.4rem; }
.sbc-feature { position: relative; overflow: hidden; min-height: 420px; display: block; }
.sbc-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.sbc-feature:hover img { transform: scale(1.05); }
.sbc-feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,15,8,.66), transparent 55%); }
.sbc-feature__t { position: absolute; z-index: 2; left: 1.8rem; bottom: 1.6rem; color: #fbf6ec; }
.sbc-feature__t small { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-bright); }
.sbc-feature__t h3 { font-family: var(--f-display); font-size: 2rem; margin-top: .3rem; }
.sbc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.sbc-tile { text-align: center; }
.sbc-tile__img { position: relative; aspect-ratio: 1/1; overflow: hidden; border: 1px solid var(--line-soft); }
.sbc-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.sbc-tile:hover .sbc-tile__img img { transform: scale(1.07); }
.sbc-tile span { display: block; margin-top: .7rem; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); transition: color .3s ease; }
.sbc-tile:hover span { color: var(--gold); }
@media (max-width: 880px) { .sbc { grid-template-columns: 1fr; } .sbc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .sbc-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- curated edits (tall cards) ---------- */
.edits-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; }
.edit-card { position: relative; overflow: hidden; aspect-ratio: 3/5; display: block; }
.edit-card.wide { grid-column: span 2; aspect-ratio: auto; }
.edit-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.edit-card:hover img { transform: scale(1.06); }
.edit-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,15,8,.7), transparent 55%); }
.edit-card__t { position: absolute; z-index: 2; left: 0; right: 0; bottom: 1.2rem; text-align: center; color: #fbf6ec; }
.edit-card__t small { display: block; font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: .25rem; }
.edit-card__t h4 { font-family: var(--f-display); font-size: 1.3rem; }
@media (max-width: 880px) { .edits-row { grid-template-columns: repeat(3, 1fr); } .edit-card.wide { grid-column: span 3; } }
@media (max-width: 520px) { .edits-row { grid-template-columns: repeat(2, 1fr); } .edit-card.wide { grid-column: span 2; } }

/* ---------- assurance strip ---------- */
.assure-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.assure-strip > div { display: flex; align-items: center; gap: .9rem; padding: 1.5rem 1.6rem; border-right: 1px solid var(--line-soft); }
.assure-strip > div:last-child { border-right: none; }
.assure-strip i { font-size: 28px; color: var(--gold); flex-shrink: 0; }
.assure-strip h4 { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.assure-strip p { font-size: .76rem; color: var(--ink-faint); }
@media (max-width: 760px) { .assure-strip { grid-template-columns: 1fr 1fr; } .assure-strip > div:nth-child(2) { border-right: none; } .assure-strip p { display: none; } }

/* ---------- side "new in" tab ---------- */
.side-tab { position: fixed; right: 0; top: 42%; z-index: 40; writing-mode: vertical-rl; background: var(--gold); color: #fff; padding: 1rem .5rem; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; box-shadow: -4px 4px 14px -6px rgba(60,48,22,.5); transition: background .3s ease; }
.side-tab:hover { background: var(--gold-deep); }
@media (max-width: 880px) { .side-tab { display: none; } }

/* ---------- curated edits: single-row expanding accordion + scale-in ---------- */
.edits-brands { display: flex; gap: 1rem; height: clamp(330px, 40vw, 380px); }
.edit-tile {
	position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; display: block;
	border-radius: 10px; background: var(--surface-2);
	transition: flex-grow .6s cubic-bezier(.6,0,.2,1);
}
.edit-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
/* second image starts collapsed (scaled down + hidden) and grows past 100% on hover */
/* feather the edges so the scaling overlay dissolves into the base image — no sharp rectangle while it grows from the middle */
.edit-tile__hover { opacity: 0; transform: scale(.45); z-index: 1;
	-webkit-mask-image: radial-gradient(ellipse farthest-side at center, #000 42%, transparent 100%);
	mask-image: radial-gradient(ellipse farthest-side at center, #000 42%, transparent 100%); }
.edit-tile:hover .edit-tile__hover, .edit-tile:focus-visible .edit-tile__hover { opacity: 1; transform: scale(1.1); }
.edit-tile:hover .edit-tile__base, .edit-tile:focus-visible .edit-tile__base { transform: scale(1.08); }
.edit-tile::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(20,15,8,.74), rgba(20,15,8,.06) 58%); }
.edit-tile__cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 1.5rem; text-align: center; color: #fbf6ec; padding: 0 .7rem; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.edit-tile:hover .edit-tile__cap, .edit-tile:focus-visible .edit-tile__cap { transform: translateY(-6px); }
.edit-tile__cap small { display: block; font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: .35rem; white-space: nowrap; }
.edit-tile__cap strong { font-family: var(--f-display); font-weight: 400; font-size: 1.4rem; line-height: 1.1; white-space: nowrap; }
/* the hovered tile widens; the rest shrink to make room */
/* hovered tile widens modestly (~30% of the previous growth); others stay equal */
.edits-brands:hover .edit-tile:hover, .edits-brands .edit-tile:focus-visible { flex-grow: 2; }
@media (max-width: 880px) {
	.edits-brands { display: grid; grid-template-columns: repeat(3, 1fr); height: auto; gap: 1rem; }
	.edit-tile { aspect-ratio: 195 / 350; }
	.edits-brands:hover .edit-tile, .edit-tile:hover { flex-grow: 1; }
	.edit-tile__hover { opacity: 0; transform: scale(.6); }
}
/* Phones: one full-width item per row, as a short landscape rectangle. */
@media (max-width: 640px) {
	.edits-brands { grid-template-columns: 1fr; }
	.edit-tile { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) { .edit-tile, .edit-tile__img, .edit-tile__cap { transition: none; } }