/* Bundles (/postcards) page styles */
:root {
  --small-topbar-h: 75px;
  --filter-height-compact: 80px;
  --filter-height-expanded: 142px;
}

.page-postcard-bundles {
  background: #FFFFFF;
}

.spacer-12 {
  height: 12px;
}

/* Small Top Bar (mirrors SmallTopBar) */
.small-top-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #3D2F2B;
  box-shadow: none;
  height: var(--small-topbar-h);
}

.small-top-bar .stb-inner {
  height: var(--small-topbar-h);
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.small-top-bar .brand-left {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #FCF9F6;
}

.small-top-bar .brand-left .logo {
  display: block;
}

.small-top-bar .brand-left .brand-words {
  font-family: 'Forum', serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}

.small-top-bar .brand-left .amour {
  letter-spacing: 4.3px;
}

.small-top-bar .brand-left .lacarte {
  letter-spacing: 1px;
}

.stb-progress {
  flex: 1;
  display: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-left: 5em;
  margin-right: 5em;
}

.stb-progress .line {
  flex: 1;
  height: 1px;
  background: #FCF9F6;
}

.stb-progress .milestone {
  white-space: nowrap;
  font-family: 'Forum', serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .27px;
  color: #74605B;
}

.stb-progress .milestone.active {
  color: #FCF9F6;
}

.stb-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-left: auto;
}

.stb-nav .nav-item {
  position: relative;
  color: #FCF9F6;
  text-decoration: none;
  font: 400 15px/1 'Source Serif 4', serif;
}

.stb-nav .nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.6px;
  background: #FCF9F6;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}

.stb-nav .nav-item:hover::after {
  transform: scaleX(1);
}

.stb-nav .burger {
  display: none;
  background: none;
  border: 0;
  color: #FCF9F6;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* Profile dropdown (auth flow) */
.profile-dropdown {
  position: absolute;
  right: 40px;
  top: calc(var(--small-topbar-h) - 4px);
  background: #3D2F2B;
  border: none;
  border-radius: 0 0 0.5em 0.5em;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  width: 220px;
  padding: 8px;
}

.profile-dropdown .profile-email {
  font: 400 14px/1.4 'Open Sans', system-ui, sans-serif;
  color: #ffffff;
  padding: 8px;
  border-bottom: 1px solid #E5E7EB;
}

.profile-dropdown .profile-action {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 8px;
  color: #ffffff;
  background: transparent;
  border: 0;
  text-decoration: none;
  font: 400 14px/1.4 'Open Sans', system-ui, sans-serif;
  cursor: pointer;
}

.profile-dropdown .profile-action:hover {
  background: #F3F4F6;
}

@media (min-width: 1200px) {
  .stb-progress {
    display: flex;
  }
}

@media (max-width: 500px) {
  .stb-nav .burger {
    display: inline-block;
  }

  .stb-nav .nav-item {
    display: none;
  }
}

/* Header video */
.header-video-inner {
  padding: 0 40px;
}

@media (max-width: 900px) {
  .header-video-inner {
    padding: 0;
  }
}

.header-video-el {
  width: 100%;
  max-height: 40em;
  display: block;
  background: #000;
}

.header-video-wrap { position: relative; }
.header-video-el { object-fit: cover; }
.header-video-overlay {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.7);
  padding: 10px 12px 1em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  gap: 6px;
}
.btn-brown {
  background: #3D2F2B;
  color: #FCF9F6;
  border: 0;
  padding: 18px 14px;
  font: 300 16px / 1 'Open Sans', system-ui, sans-serif;
  cursor: pointer;
}
.overlay-note {
  font-family: 'Forum', serif;
  font-size: 16px;
  color: #3D2F2B;
  opacity: 0.9;
}

/* Responsive header overlay + button sizing */
@media (max-width: 1000px) {
  .header-video-overlay {
    right: 10px;
    bottom: 10px;
    width: 50%;
  }
  .btn-brown {
    padding: 12px 10px;
    font-size: 14px;
  }
  .overlay-note { font-size: 14px; }
}

@media (max-width: 650px) {
  .header-video-overlay {
    right: 10px;
    bottom: 10px;
    width: 60%;
  }
  .btn-brown {
    padding: 9px 7px;
    font-size: 12px;
  }
  .overlay-note { font-size: 12px; }
}

/* Sticky filters */
.filters-sticky {
  position: sticky;
  top: var(--small-topbar-h);
  z-index: 900;
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.filters-inner {
  padding: 12px 40px 16px;
}

@media (max-width: 900px) {
  .filters-inner {
    padding: 12px 24px 16px;
  }
}

.filters-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.filters-row.no-filters {
  justify-content: space-between; /* left group vs drafts button */
}

.filters-left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.filters-scroll {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.dropdown-btn {
  padding: 15px;
  border: 1px solid #EEEEEE;
  background: #fff;
  font: 400 14px/1 'Basis Grotesque', system-ui, sans-serif;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative; /* anchor for filter dropdown */
}

.dropdown-btn .chev {
  width: 16px;
  height: 16px;
  display: inline-block;
}

.all-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  color: #005AC8;
  font: 400 14px/1 'Open Sans', system-ui, sans-serif;
  cursor: pointer;
}

.results {
  color: #999;
  font: 400 14px/1 'Open Sans', system-ui, sans-serif;
}

.btn-blue {
  background: #005AC8;
  color: #fff;
  height: 3em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  font: 300 16px/1 'Open Sans', system-ui, sans-serif;
}

.btn-blue[disabled] {
  background: #A0A0A0;
  cursor: not-allowed;
}

/* Per-filter dropdown (popover) */
.filter-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1200;
}

.filter-menu {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) -1px 0 10px 0;
  min-width: min-content;
  width: max-content;
  max-width: max-content;
  height: 160px;
}

.filter-menu-scroll {
  max-height: 384px;
  height: 160px;
  overflow: auto;
}

.fm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 8px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  font: 400 16px/24px 'Basis Grotesque', ui-sans-serif, 'Helvetica Neue', Arial, sans-serif;
  color: #000;
  cursor: pointer;
}

.fm-mark {
  width: 20px;
  height: 20px;
  border: 1px solid #333;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fm-mark svg {
  width: 1.25rem;
  height: 1.25rem;
}

.selected-chips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F3F3F3;
  border: 1px solid #E0E0E0;
  border-radius: 9999px;
  height: 28px;
  padding: 0 10px;
  font: 400 12px/1 'Open Sans', system-ui, sans-serif;
  color: #333;
}

.chip .x {
  cursor: pointer;
  color: #777;
}

/* Content row */
.content-inner {
  padding: 0 40px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .content-inner {
    padding: 0 24px;
  }
}

.side-menu {
  width: 240px;
  padding: 24px 40px 24px 0;
  display: none;
}

@media (min-width: 1060px) {
  .side-menu {
    display: block;
  }
}

.menu-title {
  font: 500 16px/1.5 'Open Sans', system-ui, sans-serif;
  color: #000;
  margin: 0 0 8px;
  letter-spacing: 0.3px;
}

.menu-item {
  display: block;
  width: fit-content;
  font: 300 12px/1.333 'Open Sans', system-ui, sans-serif;
  color: #000;
  margin-top: 8px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}

.side-menu .menu-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 0.1em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}

.side-menu .menu-item:hover::after {
  transform: scaleX(1);
}

.menu-link {
  margin-top: 24px;
  font: 500 16px/1.5 'Open Sans', system-ui, sans-serif;
  color: #000;
  cursor: pointer;
}

.grid-area {
  flex: 1;
  min-width: 0;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 560px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 840px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Postcard tile */
.tile {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 1.5em;
  cursor: pointer;
}

.tile .preview {
  position: relative;
  width: 100%;
}

.tile .preview::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.tile .envelope, .tile .postcard {
  position: absolute;
}

.tile .envelope {
  right: 0;
  top: 0;
  max-height: 76.66%;
  border-radius: 4px;
  object-fit: cover;
  object-position: top center;
  filter: drop-shadow(-20px 20px 16px rgba(0,0,0, 0.7))
}

.tile .postcard-wrap {
  left: 0;
  bottom: 0;
  width: 70%;
  height: 87.5%;
  display: flex;
  align-items: flex-end;
}

.tile .postcard {
  max-width: 66.66%;
  /* Match Flutter FittedBox(contain, bottomLeft): do not exceed wrapper */
  object-fit: contain;
  object-position: left bottom;
  border-radius: 4px;
  box-shadow: -8px 8px 18px rgba(0, 0, 0, 0.3);
  transition: transform .2s ease, box-shadow .2s ease;
}

.tile .envelope {
  transition: transform .2s ease, opacity .2s ease;
}

.tile:hover .postcard {
  transform: none;
}

.tile:hover .envelope {
  transform: none;
  opacity: 1;
}

.tile .info {
  padding-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

/* Color chip diamond inside circle */
.chip-diamond {
  position: relative;
  width: 24px;
  height: 24px;
}

.chip-diamond::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 1px solid #D8D8D8;
}

.chip-diamond .diamond {
  position: absolute;
  inset: 0;
  transform: rotate(-45deg);
  border-radius: 2px;
}

.product {
  text-align: center;
}

.product .title {
  position: relative;
  display: inline-block;
  font-family: 'Forum', serif;
  font-weight: 400;
  font-size: 16px;
  color: #333;
}

.product .title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease-out;
}

.tile:hover .product .title::after {
  transform: scaleX(1);
}

.product .subtitle {
  margin-top: 2px;
  color: #767676;
  font: 400 12px/1.333 'Open Sans', system-ui, sans-serif;
}

/* Pagination */
.pagination {
  height: 136px;
  padding: 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.page-btn, .arrow-btn {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 0;
  background: transparent;
  color: #333;
  cursor: pointer;
}

.page-btn.current {
  border: 1px solid #BBBBBB;
}

.arrow-btn {
  width: 48px;
  height: 48px;
  background: #333;
  color: #fff;
}

.ellipsis {
  padding: 0 12px;
}

/* Filters modal */
dialog#filters-dialog {
  border: 0;
  border-radius: 8px;
  padding: 0;
  max-width: min(720px, 92vw);
  width: 100%;
}

dialog#filters-dialog::backdrop {
  background: rgba(0, 0, 0, 0.3);
}

.fd-content {
  display: flex;
  flex-direction: column;
}

.fd-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.fd-title {
  font: 500 18px/1.2 'Source Serif 4', serif;
  color: #3D2F2B;
}

.fd-close {
  margin-left: auto;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.fd-body {
  max-height: min(60vh, 520px);
  overflow: auto;
  padding: 12px 16px;
}

.fd-group {
  margin-bottom: 16px;
}

.fd-group-title {
  font: 600 14px/1.4 'Open Sans', system-ui, sans-serif;
  margin-bottom: 8px;
}

.fd-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}

.fd-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fd-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #eee;
}

.btn-text {
  background: transparent;
  border: 0;
  color: #005AC8;
  cursor: pointer;
  font: 400 14px/1 'Open Sans', system-ui, sans-serif;
}

.fd-spacer {
  flex: 1;
}

/* Login dialog */
dialog#login-dialog {
  border: 0;
  border-radius: 0px;
  padding: 0;
  max-width: min(448px, 92vw);
  width: 100%;
  max-height: 92vh; /* avoid vertical clipping; allow inner scroll */
}

dialog#login-dialog::backdrop {
  background: rgba(51, 51, 51, 0.2);
}

/* Inquiry dialog: mirror Login dialog look */
dialog#inquiry-dialog {
  border: 0;
  border-radius: 0px;
  padding: 0;
  max-width: min(560px, 92vw);
  width: 100%;
  max-height: 92vh;
}

dialog#inquiry-dialog::backdrop {
  background: rgba(51, 51, 51, 0.2);
}

.li-content {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  max-height: 92vh; /* constrain to viewport */
}

.li-header {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid #eee;
}

.li-title {
  font: 500 18px/1.2 'Source Serif 4', serif;
  color: #3D2F2B;
}

.li-close {
  margin-left: auto;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.li-body {
  padding: 24px;
  flex: 1 1 auto;
  overflow: auto; /* scroll body when height is limited */
}

.li-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border: 1px solid #D1D5DB;
  background: #fff;
  border-radius: 9999px;
  margin-bottom: 12px;
  font: 400 14px/1 'Open Sans', system-ui, sans-serif;
  color: #111827;
}

.li-ico {
  display: inline-block;
  width: 20px;
  text-align: center;
  margin-right: 8px;
}

.li-divider {
  height: 24px;
}

.li-box {
  background: #F3F4F6;
  border-radius: 0px;
  padding: 20px;
}

.li-box .btn-blue {
  width: 100%
}

/* Make brown button expand in box too */
.li-box .btn-brown { width: 100%; }

.li-subtitle {
  text-align: center;
  color: #1F2937;
  margin-bottom: 12px;
  font: 300 14px/1 'Open Sans', system-ui, sans-serif;
}

.li-field {
  display: block;
  margin-bottom: 12px;
  position: relative;
}

.li-field input {
  width: 100%;
  height: 3em;
  background: #fff;
  border-radius: 0;
  border: none;
  padding: 0 16px;
  font: 400 14px/1 'Open Sans', system-ui, sans-serif;
}

.li-field input:focus {
  outline: none;
  border-color: #111827;
  box-shadow: 0 0 0 1px #111827;
}

.li-pass .li-toggle {
  position: absolute;
  right: 8px;
  top: 0.9em;
  border: 0;
  background: transparent;
  color: #6B7280;
  cursor: pointer;
}

.li-submit {
  width: 100%;
  height: 52px;
  border: 0;
  color: #fff;
  background: #111827;
  border-radius: 9999px;
  font: 400 16px/1 'Open Sans', system-ui, sans-serif;
  cursor: pointer;
}

.li-error {
  color: red;
  min-height: 16px;
  margin-bottom: 8px;
  font: 400 12px/1 'Open Sans', system-ui, sans-serif;
}

/* Textarea styling consistent with inputs */
.li-field .li-textarea {
  width: 100%;
  min-height: 120px;
  background: #fff;
  border-radius: 0;
  border: none;
  padding: 12px 16px;
  resize: vertical;
  font: 400 14px/1.4 'Open Sans', system-ui, sans-serif;
}
.li-field .li-textarea:focus {
  outline: none;
  border-color: #111827;
  box-shadow: 0 0 0 1px #111827;
}

/* Inline spinner used in some blue buttons; reuse for brown button */
.spinner_aj0A { transform-origin: center; animation: spinner_KYSC .75s infinite linear; fill: #fff; }
@keyframes spinner_KYSC { to { transform: rotate(360deg); } }

.li-links {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.li-link {
  background: transparent;
  border: 0;
  color: #005AC8;
  cursor: pointer;
  font: 400 14px/1 'Open Sans', system-ui, sans-serif;
}

/* Loading skeletons */
.skeleton-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 560px) {
  .skeleton-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 840px) {
  .skeleton-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.skeleton-tile .sk-preview {
  position: relative;
  width: 100%;
  background: #F3F3F3;
  border-radius: 4px;
  overflow: hidden;
}

.skeleton-tile .sk-preview::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.skeleton-tile .sk-line {
  height: 12px;
  background: #F3F3F3;
  border-radius: 4px;
  margin-top: 8px;
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 100%);
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}