/* Layout: ELEGANCE — structural styles only. All colours come from the
   active palette's variables, so any palette works with this layout. */
html[data-layout="elegance"] body { font-family: 'Jost', 'SolaimanLipi', system-ui, sans-serif; }

.eg-hairline { border-bottom: 1px solid var(--line); background: var(--body-bg); }
.eg-hairline-link { color: var(--muted); text-decoration: none; }
.eg-hairline-link:hover { color: var(--ink); }

.eg-header {
  background: var(--header-bg); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1030;
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
}

/* three-part flex header: empty start / brand / icons. Both sides share
   flex:1 1 0 so the brand centers itself in the space actually left over —
   if the icon cluster needs more room than its equal share, flexbox gives
   it that room instead of letting it collide with the brand name. */
.eg-header-row { display: flex; align-items: center; gap: .5rem; }
.eg-side { flex: 1 1 0; min-width: 0; }
.eg-side-start { display: none; }
.eg-side-end.eg-icons {
  display: flex; align-items: center; justify-content: flex-end;
  gap: .15rem; flex-wrap: nowrap;
}
@media (min-width: 992px) {
  .eg-side-start { display: block; }
  .eg-side-end.eg-icons { gap: .35rem; }
}
.eg-brand { flex: 0 1 auto; min-width: 0; justify-content: center; }
.eg-logo {
  font-family: 'Playfair Display', 'SolaimanLipi', Georgia, serif;
  font-size: 1.25rem; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
@media (min-width: 576px) { .eg-logo { font-size: 1.55rem; } }
@media (min-width: 768px) { .eg-logo { font-size: 2.1rem; } }

.eg-nav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--body-bg); }
.eg-nav .nav-rail { justify-content: center; }
.eg-nav .nav-railwrap.can-end .nav-rail, .eg-nav .nav-railwrap.can-start .nav-rail { justify-content: flex-start; }
.eg-nav-link {
  display: inline-flex; align-items: center; gap: .35rem;
  color: color-mix(in srgb, var(--ink) 75%, transparent); text-decoration: none;
  text-transform: uppercase; font-size: .78rem; font-weight: 500; letter-spacing: .16em;
  padding: .8rem 1.05rem;
}
.eg-nav-link:hover { color: var(--brand); }
.eg-nav-link.is-current { color: var(--brand); box-shadow: inset 0 -1px 0 var(--brand); }

.eg-search-panel { background: var(--surface); border-bottom: 1px solid var(--line); }
.eg-search-panel .search-form { max-width: 640px; margin: 0 auto; }

/* 3-column portrait grid with generous vertical rhythm */
@media (min-width: 992px) {
  html[data-layout="elegance"] .row-cols-lg-4 > * { width: 33.3333%; }
}
html[data-layout="elegance"] .row[class*="row-cols-"] { --bs-gutter-x: 1.5rem; --bs-gutter-y: 2rem; }

/* overlay cards — the photo is the card */
.eg-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; position: relative; }
.eg-card:hover { transform: none; box-shadow: none; }
.eg-card .thumb { display: block; position: relative; overflow: hidden; }
.eg-card .thumb img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; transition: transform .6s ease; }
.eg-card:hover .thumb img { transform: scale(1.045); }
.eg-overlay {
  position: absolute; inset: auto 0 0 0; padding: 2rem .9rem .8rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
  color: #fff; display: block; pointer-events: none;
}
.eg-name { display: block; font-size: .95rem; font-weight: 500; line-height: 1.3; }
.eg-price { display: block; font-size: .85rem; opacity: .9; margin-top: .15rem; }
.eg-was { opacity: .65; margin-left: .4rem; }
.eg-flag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--accent); color: var(--accent-ink);
  font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .6rem;
}
.eg-flag-out { background: var(--ink); color: var(--body-bg); }
.eg-action { margin-top: .5rem; text-align: center; }
.eg-buy {
  display: inline-block; width: 100%; border: 1px solid var(--ink); background: transparent;
  color: var(--ink); text-decoration: none; text-transform: uppercase;
  font-size: .72rem; letter-spacing: .16em; font-weight: 500; padding: .5rem .8rem;
  transition: background .15s ease, color .15s ease;
}
.eg-buy:hover { background: var(--ink); color: var(--body-bg); }
@media (min-width: 992px) {
  .eg-action { opacity: 0; transition: opacity .2s ease; }
  .eg-card:hover .eg-action { opacity: 1; }
}

html[data-layout="elegance"] .section-title {
  font-family: 'Playfair Display', Georgia, serif;
  border-left: 0; padding-left: 0; width: 100%; text-align: center;
}
html[data-layout="elegance"] .section-title::after {
  content: ''; display: block; width: 56px; height: 2px; background: var(--brand); margin: .55rem auto 0;
}
html[data-layout="elegance"] .hero-slide { border-radius: 0; }
html[data-layout="elegance"] .hero-caption { text-align: center; align-items: center; }
html[data-layout="elegance"] .hero-caption h2 { font-family: 'Playfair Display', Georgia, serif; }
html[data-layout="elegance"] .btn { border-radius: 0; letter-spacing: .08em; }