/* ── Local fonts ────────────────────────────────────── */
@font-face {
  font-family: 'Manrope-Regular';
  src: url('fonts/Manrope-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Manrope-Medium';
  src: url('fonts/Manrope-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Manrope-Bold';
  src: url('fonts/Manrope-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LibreCaslonCondensed-Regular';
  src: url('fonts/LibreCaslonCondensed-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LibreCaslonCondensed-Medium';
  src: url('fonts/LibreCaslonCondensed-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LibreCaslonCondensed-SemiBold';
  src: url('fonts/LibreCaslonCondensed-SemiBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LibreCaslonCondensed-BoldItalic';
  src: url('fonts/LibreCaslonCondensed-BoldItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LibreCaslonCondensed-Bold';
  src: url('fonts/LibreCaslonCondensed-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Manrope-SemiBold';
  src: url('fonts/Manrope-SemiBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Manrope-Light';
  src: url('fonts/Manrope-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button:focus {
  outline: none !important;
}

:root {
  --cream: #f4f6f6;
  --dark: #31220c;
  --dark-mid: #4a3a35;
  --muted: #9a8880;
  --search-bg: #f9f4f1;
  --white: #ffffff;
  --roll-bg: #31220c;
  --overlay-bg: rgba(38, 26, 18, 0.84);
  --card-radius: 10px;
}


body {
  background-color: var(--cream);
  font-family: 'Manrope-Regular', sans-serif;
  color: var(--dark);
  min-height: 100vh;
  overflow-x: auto;
}

/* ══════════════════════════════════════════════════════
   HOME PAGE
══════════════════════════════════════════════════════ */
.home-header {
  padding: 18px 40px;
}

/* "The Choice Architect" logo — both pages (legacy, no longer used) */

.home-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
}

/* ── Two-section home layout ──────────────────────── */
.home-section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.home-section .home-main {
  flex: 1;
}

/* "Browse outfits" — same style as .back-to-top-btn, pinned to bottom */
.browse-outfits-btn {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 15px;
  color: #6e6558;
  padding: 0;
  white-space: nowrap;
  transition: color 0.15s;
}

.browse-outfits-btn:hover { color: var(--dark); }

/* ── Browse / masonry section ─────────────────────── */
.browse-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 2.5vw 2.35vw 4.17vw; /* 48px top, 45.1px sides, 80px bottom at 1920px */
  background-color: #EFEEED;
  background-image:
    linear-gradient(to right, rgba(100, 150, 210, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 150, 210, 0.18) 1px, transparent 1px);
  background-size: 38px 38px; /* fixed px — does not scale with viewport */
}

/* 5-column masonry grid */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
}

.masonry-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7vw;               /* ~13px at 1920px */
}

/* ── Outer wrapper: fade-in + per-frame rotation ──── */
.masonry-item {
  position: relative;
  width: 18.4vw;            /* ~353px at 1920px — ~13px gap between columns */
  opacity: 0;
  transform: translateY(14px) rotate(var(--rot, 0deg));
  transition: opacity 1.4s ease, transform 1.4s ease;
  cursor: pointer;
}

.masonry-item.masonry-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot, 0deg));
}

/* ── Frame variants ─────────────────────────────────── */

/* 1. Regular: uniform border, all four sides equal — 12px at 1920px */
.frame-regular {
  position: relative;
  background-color: #F2F1EC;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0.75vw;
}

/* 2. Polaroid: uniform top/sides, thick bottom tab — 12px / 40px at 1920px */
.frame-polaroid {
  position: relative;
  background-color: #F2F1EC;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0.75vw 0.75vw 3vw;
}

/* Continuous shadow border — box-sizing:border-box + inset:0 fills frame exactly.
   border-width: thinner on top/left, thicker on right/bottom for directional depth.
   border-color: lighter on top/left, darker on right/bottom via JS CSS variables.
   filter:blur(0.5px) creates dark-adjacent-to-frame → lighter-outward gradient.
   Total visible extent: 1px (border) + ~1px (blur spread) = ~2px max on right/bottom. */
.frame-regular::after,
.frame-polaroid::after {
  content: '';
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0.5px 1px 1px 0.5px;             /* top right bottom left */
  border-color:
    var(--sh-light, rgba(246,250,255,0.15))        /* top */
    var(--sh-dark,  rgba(114,114,110,0.30))        /* right */
    var(--sh-dark,  rgba(114,114,110,0.30))        /* bottom */
    var(--sh-light, rgba(246,250,255,0.15));       /* left */
  border-radius: inherit;
  filter: blur(0.5px);
  pointer-events: none;
  z-index: 1;
}

/* ── Photo area: overlay anchor, natural AR ───────── */
.polaroid-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4; /* default portrait; JS updates to native AR on load */
  background: #c8d8e8;
}

/* Photo well outline — heavier/darker on top+left (shadow side),
   lighter on right+bottom (lit side). Renders above img via z-index.
   border-width: top right bottom left
   border-color: top right bottom left
   Darker shade: rgba(114,114,110,0.55) — used on top and left
   Lighter shade: rgba(114,114,110,0.22) — used on right and bottom */
.polaroid-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0.7px 0.3px 0.3px 0.7px;
  border-color:
    rgba(114,114,110,0.30)   /* top */
    rgba(246,250,255, 0.15)   /* right */
    rgba(246,250,255,0.15)   /* bottom */
    rgba(114,114,110,0.30);  /* left */
  filter: blur(1px);
  pointer-events: none;
  z-index: 2;
}

.polaroid-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill; /* stretch to fill, no crop */
}

/* ── Hover overlay (anchored to photo, not white tab) */
.masonry-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 6, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.22s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1.146vw; /* 22px at 1920px */
  pointer-events: none;
}

.masonry-item:hover .masonry-item-overlay {
  opacity: 1;
  pointer-events: auto;
}

.masonry-open-btn {
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 14px;
  background: transparent;
  border: 1.3px solid #F6FAFF;
  border-radius: 50px;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  color: #F6FAFF;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s;
}

.masonry-open-btn:hover { background: rgba(255, 250, 245, 0.12); }

#masonrySentinel {
  height: 1px;
  width: 100%;
}

/* "What are you designing today?" */
.hero-heading {
  font-family: 'LibreCaslonCondensed-SemiBold', serif;
  font-weight: normal;
  font-size: 70px;
  letter-spacing: 0.03em; /* 30 tracking units = 30/1000em */
  line-height: 1.2;
  color: var(--dark);
  text-align: center;
  margin-bottom: 52px;
}

.home-search-wrapper {
  width: 52.08vw;
}

.home-search-bar {
  display: flex;
  align-items: center;
  background: #F6FAFF;
  border-radius: 50px;
  width: 100%;
  height: 9vh;
  padding: 0 20px 0 32px;
}

/* "Design anything" placeholder + typed text */
.home-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 19px;
  letter-spacing: 0.06em; /* 60 tracking units = 60/1000em */
  color: var(--dark);
  outline: none;
}

.home-search-input::placeholder {
  color: var(--muted);
}

.home-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  color: var(--dark-mid);
  transition: color 0.2s;
  flex-shrink: 0;
}

.home-search-btn:hover {
  color: var(--dark);
}

/* ══════════════════════════════════════════════════════
   RESULTS PAGE — HEADER
══════════════════════════════════════════════════════ */
/* ── Top navigation bar ─────────────────────────────── */
.results-header {
  background: #f2f1eC;
  border-bottom: 1px solid #efeee6;
  position: relative;
  z-index: 10;
  margin-bottom: 35px;
}

.header-nav-row {
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 clamp(40px, 2.08vw, 60px);
}

.nav-title {
  font-family: 'LibreCaslonCondensed-Medium', serif;
  font-size: 30px;
  color: #2d5290;
  white-space: nowrap;
  letter-spacing: 0;
  cursor: default;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1vw, 16px);
  flex: 1;
  transition: opacity 0.3s ease;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1vw, 16px);
  flex: 1;
  justify-content: flex-end;
  transition: opacity 0.3s ease;
}

.nav-links-hidden .nav-left,
.nav-links-hidden .nav-right {
  opacity: 0;
  pointer-events: none;
}

.nav-link {
  position: relative;
  font-family: 'Manrope-Light', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  color: #2d5290;
  text-decoration: none;
  padding: 3px 9px;
  border-radius: 7px;
  cursor: pointer;
  background: none;
  border: none;
  white-space: nowrap;
  letter-spacing: 0;
}

/* ── Expandable search bar ──────────────────────────── */
.header-search-row {
  position: absolute;
  left: 0;
  width: 100%;
  background: #f2f1ec;
  border-bottom: 1px solid #efeee6;
  z-index: 9;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  display: flex;
  flex-direction: column;
}

.header-search-row.is-open {
  max-height: 110px;
}

.header-search-inner {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(40px, 2.08vw, 60px);
  position: relative;
  opacity: 0;
  transition: opacity 0.2s ease 0.08s;
}

.header-search-row.is-open .header-search-inner {
  opacity: 1;
}

.header-search-inner .header-search-label {
  font-size: 15px;
  flex-shrink: 0;
  margin-right: 20px;
}

.header-search-input {
  width: calc(3 * clamp(220px, 18vw, 350px) + 2 * clamp(10px, 1.1vw, 24px));
  flex-shrink: 0;
  height: 38px;
  background: #F6FAFF;
  border: none;
  border-radius: 7px;
  font-family: 'Manrope-SemiBold', sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  color: #1e1a0b;
  padding: 0 14px;
  outline: none;
}

.header-search-input::placeholder {
  color: #aaaaaa;
}

.header-search-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #4a3a35;
  display: flex;
  align-items: center;
  padding: 4px;
  margin-left: 12px;
  transition: color 0.2s;
}

.header-search-close:hover {
  color: #1e1a0b;
}

/* ── Page title (search query / outfit name) ────────── */
.browse-subtitle {
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 14px;
  color: #1E1A0B;
  padding: 8px clamp(40px, 2.08vw, 60px) 0;
}

.page-title {
  font-family: 'LibreCaslonCondensed-Bold', serif;
  font-size: 40px;
  color: #2d5290;
  letter-spacing: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.page-title-quote {
  font-family: 'LibreCaslonCondensed-Bold', serif;
  color: #FFE570;
  font-size: 40px;
}


/* ══════════════════════════════════════════════════════
   RESULTS PAGE — FILTERS ROW
   Shares the exact same box model as .outfit-detail-header (see OUTFIT
   DETAIL PAGE section below) so the title and the products grid beneath
   it land in the same place on every page — search, generator, explore,
   outfit summary, wishlist summary.
══════════════════════════════════════════════════════ */
.filters-row,
.outfit-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* box-sizing is border-box, so min-height must clear content (~48-56px)
     PLUS this row's own vertical padding (10+27=37px) for the floor to
     ever actually bind — otherwise every page just falls back to its own
     (different) content height, which is the bug that was here before. */
  min-height: 100px;
  padding: 10px clamp(40px, 2.08vw, 60px) 22px;
}

.filters-row > .page-title,
.outfit-detail-header > .edit-name-container { align-self: flex-start; }

.filters-row > .price-gender-group,
.outfit-detail-header > .coll-header-actions,
.outfit-detail-header > .price-gender-group { align-self: center; }

.price-gender-group {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  margin-left: auto;
}

.filter-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-col-fields {
  display: flex;
  align-items: center;
  gap: 6px;
}

.price-input {
  width: 56px;
  height: 30px;
  padding: 0 8px;
  border: none;
  border-radius: 7px;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  color: #1e1a0b;
  text-align: center;
  background: #F6FAFF;
  outline: none;
  -moz-appearance: textfield;
}
.price-input::placeholder {
  color: #aaaaaa;
}
.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.price-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  color: var(--dark-mid);
  transition: color 0.2s;
  margin-left: 2px;
}

.price-search-btn:hover {
  color: var(--dark);
}


/* ── New filter bar ────────────────────────────────── */
.filter-label {
  font-family: 'Manrope-Light', sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  color: #2D5290;
  white-space: nowrap;
  flex-shrink: 0;
}

.gender-btn {
  background: #F6FAFF;
  border: 1px solid transparent;
  border-radius: 7px;
  height: 30px;
  padding: 0 10px;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  color: #1e1a0b;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.gender-btn.active {
  background: #FFE570;
  border-color: #1e1a0b;
  font-family: 'Manrope-SemiBold', sans-serif;
}

.style-search-input {
  width: clamp(140px, 12vw, 180px);
  height: 30px;
  background: #F6FAFF;
  border: none;
  border-radius: 10px;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  color: #1e1a0b;
  padding: 0 10px;
  outline: none;
}

.style-search-input::placeholder {
  color: #aaaaaa;
}

/* ══════════════════════════════════════════════════════
   PRODUCT CARDS SCROLL
══════════════════════════════════════════════════════ */
.products-section {
  padding: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.cg-status-text {
  display: none;
}

.cg-status-text.is-visible {
  display: block;
  position: absolute;
  left: 40px;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 15px;
  color: var(--muted);
  pointer-events: none;
  z-index: 5;
}

/* Full-width scroll band — only this element scrolls horizontally */
.products-scroll-wrapper {
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.products-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.products-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  padding: 0 clamp(40px, 2.08vw, 60px);
  gap: clamp(10px, 1.1vw, 24px);
  transition: opacity 0.3s ease;
}

.product-slot-wrapper {
  flex: 0 0 clamp(220px, 18vw, 350px);
  display: flex;
  flex-direction: column;
}

.product-card {
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
  cursor: default;
  background: #F2F1EC;
}

.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  box-shadow: inset 0 0 0 1px #EFEEE6;
  pointer-events: none;
  z-index: 3;
}

.product-name-below {
  font-family: 'LibreCaslonCondensed-SemiBold', serif;
  font-size: 19px;
  color: #2d5290;
  margin-top: 18px;
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: break-word;
}

.product-meta-below {
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 12px;
  color: #2d5290;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-top: 5px;
}

.product-meta-below > span:first-child {
  text-transform: uppercase;
  font-family: 'Manrope-Light', sans-serif;
}

.meta-pr {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Hover overlay ─────────────────────────────────── */
.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 29, 41, 0.30) 0%,
    rgba(20, 29, 41, 0.70) 100%
  );
  border-radius: var(--card-radius);
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 4px 8px 10px;
  color: #efeee6;
}

.product-card:hover .card-overlay {
  opacity: 1;
}

.product-card:hover .product-img {
  filter: blur(3px) brightness(0.9);
}

/* Top controls row: ×, dots, lock — each positioned independently, absolute
   to .card-overlay, so values never shift between hover / non-hover states */
.overlay-top {
  /* layout no longer used — kept only as a semantic wrapper */
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #EFEEE6;
}

/* LOCK text button (slot-level lock) */
.slot-lock-text-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 0.06em;
  color: #1E1A0B;
  background: #FFE570;
  border: none;
  border-radius: 7px;
  padding: 3px 7px;
  cursor: pointer;
  box-shadow: 2px 2px 0 0 #2D5290;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  white-space: nowrap;
}

.slot-lock-text-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.slot-lock-text-btn.is-locked {
  background: #FFE570;
}

/* 6-dot grid (3 columns × 2 rows) */
.dots-grid {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 3px);
  grid-template-rows: repeat(2, 3px);
  gap: 2px;
  cursor: grab;
}

.dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #efeee6;
  opacity: 1;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #efeee6;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.15s;
  margin-right: 0;
}

.icon-btn:hover { opacity: 1; }

/* Product info */
.card-info {
  position: absolute;
  top: 45px;
  left: 10px;
  right: 0;
  bottom: 60px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* Card footer — pinned to bottom of overlay */
.card-footer {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Groups the icon buttons (image-search / explore-more / save) so they
   keep one fixed gap between themselves; margin-left:auto pushes the
   whole cluster to the right, instead of justify-content:space-between
   spreading extra space evenly into EVERY gap (which visually centered
   the middle button between Visit Site and the others). */
.card-footer-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* "Visit site" button */
.product-webpage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  height: 28px;
  max-width: 100px;
  padding: 0 10px;
  border: 1px solid #aaaaaa;
  border-radius: 50px;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  color: #F6FAFF;
  text-decoration: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
}

/* Save button — circle outline */
.save-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #aaaaaa;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F6FAFF;
  padding: 0;
  flex-shrink: 0;
}

/* Outfit/wishlist summary — save sits in its own bottom-right corner,
   not inline with Visit Site in .card-footer. */
.save-btn-corner {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/* ══════════════════════════════════════════════════════
   NAVIGATION ARROWS + ROLL BUTTON
══════════════════════════════════════════════════════ */
.nav-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 clamp(40px, 2.08vw, 60px);
  height: 28px;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.save-changes-btn {
  height: 42px;
  margin-top: 20px;
  padding: 0 18px;
  background: #F6FAFF;
  color: #31220c;
  border: none;
  border-radius: 50px;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.save-changes-btn:hover {
  opacity: 0.85;
}

/* Confirm removal modal (collection detail page) */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(38, 26, 18, 0.55);
}

.confirm-modal-overlay.is-open {
  display: flex;
}

.confirm-modal-box {
  background: var(--cream);
  border-radius: 18px;
  padding: 32px 28px 24px;
  width: 340px;
  position: relative;
  text-align: center;
}

.confirm-modal-title {
  font-family: 'LibreCaslonCondensed-SemiBold', serif;
  font-size: 25px;
  font-weight: normal;
  letter-spacing: 0;
  color: var(--dark);
  margin-bottom: 10px;
  line-height: 1.2;
}

.confirm-modal-sub {
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--muted);
  margin-bottom: 28px;
  line-height: 1.4;
}

.confirm-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.confirm-modal-cancel,
.confirm-modal-confirm {
  height: 42px;
  padding: 0 24px;
  border-radius: 50px;
  border: none;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.confirm-modal-cancel {
  background: transparent;
  border: 1.3px solid var(--dark-mid);
  color: var(--dark);
}

.confirm-modal-confirm {
  background: var(--dark);
  color: #F6FAFF;
}

.confirm-modal-cancel:hover,
.confirm-modal-confirm:hover {
  opacity: 0.75;
}

.nav-arrow-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  background: #F6FAFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-mid);
  transition: background 0.15s, color 0.15s;
}

.nav-arrow-btn:hover:not(:disabled),
.nav-arrow-btn:active:not(:disabled) {
  background: #FFE570;
  color: #1e1a0b;
}

.nav-arrow-btn:disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.4;
}

.roll-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
}

.roll-btn {
  background: #FFE570;
  color: #2d5290;
  border: none;
  border-radius: 50px;
  width: 135px;
  height: 52px;
  font-family: 'LibreCaslonCondensed-BoldItalic', serif;
  font-size: 19px;
  font-weight: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 3px 3px 0 0 #2d5290;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.roll-btn:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════
   NO RESULTS / HIDDEN CARDS
══════════════════════════════════════════════════════ */
.product-card.hidden {
  display: none;
}

.no-results {
  text-align: center;
  padding: 60px 20px;
  font-family: 'Manrope-Regular', sans-serif;
  white-space: nowrap;
  font-size: 1rem;
  color: var(--muted);
  white-space: nowrap;
}

.price-input::-webkit-inner-spin-button,
.price-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ══════════════════════════════════════════════════════
   PRODUCT CARD — SCROLLABLE ATTRS
══════════════════════════════════════════════════════ */
.card-attrs-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(246, 250, 255, 0.3) transparent;
  padding-right: 10px;
}

.card-attrs-scroll::-webkit-scrollbar {
  width: 2px;
}

.card-attrs-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.card-attrs-scroll::-webkit-scrollbar-thumb {
  background: rgba(246, 250, 255, 0.35);
  border-radius: 2px;
}

/* ── Attribute rows ─────────────────────────────────── */
.attr-divider {
  height: 1px;
  background: rgba(170, 170, 170, 0.3);
  flex-shrink: 0;
}

.attr-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 0 0 calc(16.667% - 1px);
  cursor: pointer;
  border-radius: 7px;
  padding: 0 3px 0 5px;   /* left:5px + card-info's 10px inset = 15px from card edge */
  transition: background 0.1s;
}

.attr-row:hover {
  background: rgba(170, 170, 170, 0.3);
}

/* Read-only attr row (no lock circle, no click target) — wishlist/outfit summary */
.attr-row-static {
  cursor: default;
  padding-left: 8px;   /* + card-info's 10px inset = 18px from card edge */
}

.attr-row-static:hover {
  background: none;
}

.attr-row-empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 calc(16.667% - 1px);
  visibility: hidden;
}

/* Circle lock indicator — left of each attribute */
.tag-lock-circle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid #F6FAFF;
  background: none;
  flex-shrink: 0;
  box-sizing: border-box;
}

.tag-lock-circle.is-locked {
  background: #FFE570;
  border-color: #FFE570;
}

.attr-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.attr-label {
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #aaaaaa;
  text-transform: uppercase;
  line-height: 0.8;
}

.attr-row-empty .attr-label {
  visibility: hidden;
}

.attr-value {
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  color: #f6faff;
  line-height: 0.8;
}

/* Outfit-generator cards have a single-row footer — bottom clearance for 34px row + padding */
#cgProductsGrid .card-info,
#exploreGrid .card-info {
  bottom: 54px;
}

/* ══════════════════════════════════════════════════════
   PERSISTENT LOCK BADGE
   LOCK text visible outside the overlay when slot is locked.
══════════════════════════════════════════════════════ */
.persistent-lock {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  display: none;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #1E1A0B;
  background: #FFE570;
  border: none;
  border-radius: 7px;
  padding: 3px 7px;
  cursor: pointer;
  box-shadow: 2px 2px 0 0 #2D5290;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.persistent-lock:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.product-card.is-locked .persistent-lock {
  display: block;
}

.product-card:hover .persistent-lock {
  display: none;
}


/* ══════════════════════════════════════════════════════
   SAVE TO COLLECTION MODAL
══════════════════════════════════════════════════════ */
.save-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(38, 26, 18, 0.55);
}

.save-modal-overlay.is-open {
  display: flex;
}

.save-modal-box {
  background: var(--cream);
  border-radius: 18px;
  padding: 25px 25px 25px;
  width: 360px;
  max-width: 90vw;
  color: var(--dark);
  position: relative;
}

.save-modal-title {
  font-family: 'LibreCaslonCondensed-SemiBold', serif;
  font-size: 25px;
  font-weight: normal;
  letter-spacing: 0;
  color: #2d5290;
  margin-bottom: 4px;
  line-height: 1.2;
  text-align: center;
}

.save-modal-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  margin-bottom: 18px;
}

.save-modal-input {
  flex: 1;
  border: none;
  border-radius: 51px;
  background: #F6FAFF;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--dark);
  padding: 0 16px;
  height: 44px;
  outline: none;
}

.save-modal-input::placeholder {
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--muted);
}

.save-modal-add-btn {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: none;
  background: #6e6558;
  cursor: pointer;
  color: #F6FAFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: opacity 0.15s;
}

.save-modal-add-btn:hover {
  opacity: 0.8;
}

.save-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 192px;
  overflow-y: auto;
}

.save-outfit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(110, 101, 88, 0.25);
  border-radius: 10px;
  padding: 2px 14px 2px 2px;
}

.save-outfit-thumb {
  width: 52px;
  height: 52px;
  background: var(--muted);
  border-radius: 6px;
  flex-shrink: 0;
}

.save-outfit-name {
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--dark);
  line-height: 1.2;
  flex: 1;
}

.save-outfit-item {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.save-outfit-item:hover {
  background: rgba(49, 34, 12, 0.05);
  border-color: var(--dark);
}

.save-outfit-item.is-saved {
  border-color: var(--dark);
}

.save-outfit-check {
  display: flex;
  align-items: center;
  justify-content: center;
}

.save-outfit-item.is-pending {
  background: rgba(49, 34, 12, 0.05);
  border-color: var(--dark);
}

.save-modal-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.save-modal-cancel-btn {
  flex: 1;
  height: 44px;
  background: #F6FAFF;
  border: none;
  border-radius: 50px;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 15px;
  color: var(--dark);
  cursor: pointer;
  transition: opacity 0.15s;
}

.save-modal-cancel-btn:hover {
  opacity: 0.8;
}

.save-modal-confirm-btn {
  flex: 1;
  height: 44px;
  background: var(--dark);
  border: none;
  border-radius: 50px;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 15px;
  color: var(--cream);
  cursor: pointer;
  transition: opacity 0.15s;
}

.save-modal-confirm-btn:hover {
  opacity: 0.85;
}

/* ── Save modal — tabs ──────────────────────────────── */
.save-tabs {
  display: flex;
  position: relative;
  border-bottom: 1px solid rgba(49, 34, 12, 0.12);
}

.save-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 4px 0 11px;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 15px;
  color: var(--dark);
  opacity: 0.45;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.18s;
}

.save-tab.is-active {
  font-family: 'Manrope-Medium', sans-serif;
  opacity: 1;
}

.save-tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50%;
  height: 2px;
  background: var(--dark);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.save-tab-panel {
  display: none;
}

.save-tab-panel.is-active {
  display: block;
}

.save-modal-empty {
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 15px;
  color: var(--muted);
  padding: 8px 0;
}

/* ══════════════════════════════════════════════════════
   OUTFITS PAGE
══════════════════════════════════════════════════════ */
.outfits-main {
  padding: 10px clamp(40px, 2.08vw, 60px) 60px;
}

.outfits-heading {
  font-family: 'LibreCaslonCondensed-Bold', serif;
  font-size: 40px;
  font-weight: normal;
  color: #2d5290;
  margin-bottom: 40px;
}

.outfits-grid {
  display: grid;
  grid-template-columns: repeat(5, clamp(220px, 18vw, 350px));
  gap: 30px clamp(10px, 1.1vw, 24px);
}

.outfit-card {
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.outfit-preview {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: #EFEEE6;
  display: flex;
}

.outfit-preview img {
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.outfit-card-name {
  display: block;
  font-family: 'LibreCaslonCondensed-SemiBold', serif;
  font-size: 20px;
  color: var(--dark);
  margin-top: 13px;
}

.outfit-card-name.is-untitled {
  opacity: 0.3;
}

.outfits-empty {
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 16px;
  color: var(--muted);
  margin-top: 40px;
}

/* ══════════════════════════════════════════════════════
   OUTFIT DETAIL PAGE
   (.outfit-detail-header box model is defined once, shared with
   .filters-row, up in the RESULTS PAGE — FILTERS ROW section above)
══════════════════════════════════════════════════════ */

.outfit-detail-heading {
  font-family: 'LibreCaslonCondensed-Bold', serif;
  font-size: 40px;
  font-weight: normal;
  color: #2d5290;
  line-height: 1.2;
}

.outfit-detail-heading.is-untitled {
  opacity: 0.3;
}

/* Always-editable title input in the generator */
.cg-name-input {
  font-family: 'LibreCaslonCondensed-Bold', serif;
  font-size: 40px;
  font-weight: normal;
  color: #2d5290;
  line-height: 1.2;
  height: 1.2em;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  letter-spacing: 0;
  cursor: text;
  min-width: 100px;
}

.cg-name-input:focus {
  outline: none;
  text-decoration: none;
}

.cg-name-input::placeholder {
  color: #2d5290;
  opacity: 0.35;
}

.open-in-generator-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
  background: #FFE570;
  color: #2D5290;
  border: none;
  box-shadow: 4px 4px 0 0 #2D5290;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  border-radius: 50px;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}

.open-in-generator-btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.coll-header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.kebab-wrap {
  position: relative;
}

.kebab-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F6FAFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
  margin-top: 4px;
}

.kebab-btn:hover { opacity: 0.85; }

.kebab-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #EFEEE6;
  border-radius: 12px;
  padding: 6px;
  min-width: 190px;
  z-index: 200;
  box-shadow: 0 4px 18px rgba(49, 34, 12, 0.13);
}

.kebab-dropdown.is-open { display: flex; }

.kebab-item {
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 14px;
  color: #1E1A0B;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
  width: 100%;
}

.kebab-item:hover { background: #F4F6F6; }

.kebab-item-danger { color: #1E1A0B; }

.back-to-top-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 15px;
  color: #6e6558;
  padding: 0 0 10px 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 15px;
  transition: color 0.15s;
}

.back-to-top-btn:hover { color: var(--dark); }

/* ══════════════════════════════════════════════════════
   COLLECTION GENERATOR — PICKER SLOT
══════════════════════════════════════════════════════ */
.picker-slot {
  flex: 0 0 clamp(220px, 18vw, 350px);
  height: clamp(320px, 26vw, 500px);
  position: relative;
  border-radius: var(--card-radius);
  background: #EFEEE6;
  cursor: default;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

.picker-categories {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 18px;
}

.picker-cat-row {
  font-family: 'Manrope-Regular', sans-serif;
  font-size: clamp(13px, 1.25vw, 15px);
  letter-spacing: 0;
  color: #6e6558;
  text-align: center;
  width: min(250px, 100%);
  height: clamp(30px, 3.3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}

.picker-cat-row:hover {
  background: #F4F6F6;
}

.picker-cat-row.is-selected {
  background: #F6FAFF;
  color: var(--dark);
}

.picker-divider {
  width: min(250px, 100%);
  height: 1px;
  background: rgba(110, 101, 88, 0.25);
}

.picker-add-btn {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(28px, 2.5vw, 40px);
  height: clamp(28px, 2.5vw, 40px);
  border-radius: 50%;
  border: none;
  background: #736a5c;
  color: #F6FAFF;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5;
  padding: 0;
  transition: opacity 0.15s;
}

.picker-add-btn:hover {
  opacity: 0.8;
}


/* ══════════════════════════════════════════════════════
   EDITABLE COLLECTION NAME
══════════════════════════════════════════════════════ */
.edit-name-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.edit-name-pencil {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dark-mid);
  padding: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.edit-name-container:hover .edit-name-pencil {
  opacity: 0.55;
}

.edit-name-pencil:hover {
  opacity: 1 !important;
}

.edit-name-input {
  font-family: 'LibreCaslonCondensed-Bold', serif;
  font-size: 40px;
  font-weight: normal;
  color: #2d5290;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  letter-spacing: 0;
  line-height: 1.2;
  height: 1.2em;
  min-width: 120px;
  text-decoration: underline solid var(--dark);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

/* ══════════════════════════════════════════════════════
   COLLECTION GENERATOR — SLOT GAP INSERT ZONES
══════════════════════════════════════════════════════ */
.cg-track {
  gap: 0;
}

.cg-slot-gap {
  flex-shrink: 0;
  width: clamp(10px, 1.1vw, 24px);
  position: relative;
  display: block;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 10;
}

.cg-slot-gap::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  right: -5px;
  z-index: 1;
}

.cg-slot-insert-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(28px, 2.5vw, 40px);
  height: clamp(28px, 2.5vw, 40px);
  border-radius: 50%;
  border: none;
  background: #736a5c;
  color: #F6FAFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

.cg-slot-gap.show-btn .cg-slot-insert-btn {
  opacity: 1;
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════════
   CARD FADE-IN ANIMATION
══════════════════════════════════════════════════════ */
@keyframes card-pop-out {
  0%   { transform: scale(1);    opacity: 1; }
  100% { transform: scale(0.75); opacity: 0; }
}

@keyframes card-pop-in {
  0%   { transform: scale(0.75); opacity: 0.85; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

.card-pop-out {
  animation: card-pop-out 300ms ease-in forwards;
}

.card-pop-in {
  animation: card-pop-in 480ms ease-out both;
}


/* ══════════════════════════════════════════════════════
   SEARCH / ADD ICON BUTTONS (outfit generator & explore)
══════════════════════════════════════════════════════ */
.search-icon-btn,
.add-icon-btn,
.img-search-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #aaaaaa;
  background: #EFEEE6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  background: none;
  color: #F6FAFF;
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════
   EXPLORE SECTION (bottom half of collection generator)
══════════════════════════════════════════════════════ */
/* Site header is 71px tall + .results-header's own margin-bottom:40px
   = 111px of space above .top-half — NOT 82px. That stale constant
   under-budgeted by 29px, which is exactly how much the page overflowed
   the viewport (forcing a scrollbar) even with explore-more closed and
   no element sizing changed. */
.top-half {
  min-height: calc(100vh - 111px);
}

.explore-section {
  display: none;
  border-top: 1px solid rgba(74, 58, 53, 0.22);
  padding-top: 50px;
  position: relative;
}

.explore-section.is-visible {
  display: block;
  height: 100vh;
}

.explore-section-label {
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 clamp(40px, 2.08vw, 60px);
  margin-bottom: 6px;
}

.explore-section-title {
  font-family: 'LibreCaslonCondensed-SemiBold', serif;
  font-size: 30px;
  font-weight: normal;
  color: #2d5290;
  padding: 0 clamp(40px, 2.08vw, 60px);
  margin-bottom: 20px;
  line-height: 1.25;
}