:root {
  --bg: #fff8fc;
  --card: rgba(255,255,255,.88);
  --text: #312530;
  --muted: #806c79;
  --line: #efd8e5;
  --pink: #ff74b8;
  --violet: #8d7cff;
  --blue: #73dcff;
  --shadow: 0 20px 52px rgba(71, 43, 63, .13);
  --side: 292px;
  --button-bg: #ffffff;
  --button-text: #3a2b35;
  font-family: "Inter", "Noto Sans JP", "Noto Sans KR", system-ui, sans-serif;
}
[data-theme="dark"] {
  --bg: #16111a;
  --card: rgba(35,28,40,.9);
  --text: #fff4fb;
  --muted: #c4aebb;
  --line: rgba(255,255,255,.12);
  --pink: #ff86c5;
  --violet: #a69aff;
  --blue: #78ddff;
  --shadow: 0 20px 52px rgba(0,0,0,.34);
  --button-bg: #2b2231;
  --button-text: #fff4fb;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--pink) 24%, transparent) 0, transparent 32rem),
    radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--violet) 24%, transparent) 0, transparent 30rem),
    var(--bg);
}
a { color: inherit; text-decoration: none; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side);
  padding: 22px 18px;
  background: color-mix(in srgb, var(--card) 86%, transparent);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.logo {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 17px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  box-shadow: var(--shadow);
}
.brand strong { display: block; font-size: 18px; }
.brand span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.35; }

.side-action-buttons {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.side-action {
  display: block;
  text-align: center;
  border-radius: 16px;
  padding: 11px 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  box-shadow: 0 10px 24px rgba(255, 116, 184, .2);
}
.side-action.secondary {
  background: linear-gradient(135deg, var(--violet), var(--blue));
}

.side-menu {
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.side-menu a {
  padding: 9px 10px;
  border-radius: 13px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}
.side-menu a:hover {
  background: color-mix(in srgb, var(--pink) 14%, transparent);
  color: var(--pink);
}
.parent-link {
  color: var(--pink) !important;
  background: transparent;
  font-size: 13px !important;
  padding-left: 10px !important;
}
.sub-links {
  display: grid;
  gap: 3px;
  margin: 2px 0 6px 14px;
  padding-left: 13px;
  border-left: 2px solid color-mix(in srgb, var(--pink) 38%, transparent);
}
.sub-links a {
  position: relative;
  font-size: 12.5px;
  padding: 7px 8px;
}
.sub-links a::before {
  content: "└";
  margin-right: 6px;
  color: var(--pink);
  opacity: .65;
}
.menu-title {
  margin: 15px 8px 4px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 16px;
}
.lang-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.lang-switch button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}
.lang-switch button:hover {
  border-color: var(--pink);
  color: var(--pink);
}
.booth-link {
  margin-top: 10px;
  display: block;
  text-align: center;
  border-radius: 999px;
  padding: 10px;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--pink), var(--violet));
}

.page {
  margin-left: var(--side);
  padding: 0 clamp(20px, 4.5vw, 72px) 40px;
}
.topbar {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.mobile-menu { display: none; }
.auth { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.auth a, .mode-toggle, .primary {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--button-bg);
  color: var(--button-text);
  padding: 10px 16px;
  font-weight: 900;
  cursor: pointer;
}
.mode-toggle {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.primary {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--pink), var(--violet)) !important;
}

.hero {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-end;
  padding: 42px 0 22px;
}
.eyebrow {
  margin: 0 0 8px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0;
  max-width: 920px;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.hero p {
  max-width: 720px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.section-head {
  margin: 40px 0 18px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 22px;
}
.section-head h2, .card h2 {
  margin: 0;
  font-size: clamp(26px, 3.5vw, 44px);
  letter-spacing: -.04em;
}
.section-head p, .card p {
  color: var(--muted);
  line-height: 1.72;
}
.text-link {
  color: var(--violet);
  font-weight: 950;
}

.photo-wall {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-auto-rows: 252px;
  gap: 16px;
}
.shot {
  overflow: hidden;
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: relative;
}
.shot.large { grid-row: span 2; }
.shot-img { height: 100%; background-size: 160% 160%; }
.img-a { background: linear-gradient(135deg, #ff9dcc, #ffd18e, #8de6ff); }
.img-b { background: linear-gradient(135deg, #83e4ff, #a694ff, #ffc4e0); }
.img-c { background: linear-gradient(135deg, #66d9ff, #7b8bff, #ffacd5); }
.img-d { background: linear-gradient(135deg, #bd845c, #ffd3a4, #fff0d3); }
.img-e { background: linear-gradient(135deg, #423c75, #a07cff, #ff8fc8); }
.shot-img::after, .cat-img::after {
  content: "";
  display: block;
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 36% 34%, rgba(255,255,255,.9) 0 8%, transparent 9%),
    radial-gradient(circle at 55% 48%, rgba(255,255,255,.72) 0 12%, transparent 13%),
    radial-gradient(circle at 48% 70%, rgba(255,255,255,.42) 0 8%, transparent 9%);
}
.shot-info {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  padding: 13px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(10px);
}
.shot-info strong { display: block; }
.shot-info p { margin: 5px 0 8px; color: var(--muted); font-size: 13px; }
.shot-info span { color: var(--pink); font-weight: 950; }

.two-col {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: var(--shadow);
  padding: 28px;
  backdrop-filter: blur(14px);
  position: relative;
}
.step-card {
  padding-top: 28px;
}
.inline-step {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 7px;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  background: linear-gradient(135deg, var(--pink), var(--violet));
}
.serial-form, .keygen-form {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
input, select, button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--button-bg);
  color: var(--button-text);
  padding: 13px 14px;
  font: inherit;
}
button {
  border: 0;
  color: white;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  font-weight: 950;
  cursor: pointer;
}

.hierarchy-list {
  margin-bottom: 16px;
  padding: 0 0 2px;
}
.tree-root {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  background: linear-gradient(135deg, var(--pink), var(--violet));
}
.tree-children {
  margin-top: 12px;
  padding-left: 18px;
  border-left: 2px solid color-mix(in srgb, var(--pink) 45%, transparent);
  display: grid;
  gap: 8px;
}
.tree-children span {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.gallery-categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.gallery-categories article {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.cat-img { height: 180px; }
.gallery-categories h3 { margin: 16px 16px 6px; font-size: 17px; }
.gallery-categories p { margin: 0 16px 18px; color: var(--muted); font-size: 14px; }

.ticket {
  margin-top: 18px;
  padding: 15px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--pink) 13%, transparent);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.ticket span { color: var(--pink); font-weight: 950; }

.community-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.community-grid a {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 20px;
}
.community-grid strong, .community-grid span { display: block; }
.community-grid span { margin-top: 7px; color: var(--muted); }

footer {
  margin-top: 54px;
  padding: 28px 0 16px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
footer strong { color: var(--text); }
footer a { color: var(--violet); font-weight: 950; }

@media (max-width: 1100px) {
  :root { --side: 250px; }
  .photo-wall { grid-template-columns: 1fr 1fr; }
  .shot.large { grid-row: span 1; }
  .gallery-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .sidebar { transform: translateX(-100%); transition: .2s; }
  .sidebar.open { transform: translateX(0); }
  .page { margin-left: 0; }
  .topbar { justify-content: space-between; }
  .mobile-menu {
    display: block;
    width: auto;
    border: 1px solid var(--line);
    color: var(--button-text);
    background: var(--button-bg);
    border-radius: 12px;
    padding: 9px 12px;
  }
  .hero, .section-head { flex-direction: column; align-items: flex-start; }
  .two-col, .photo-wall, .community-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gallery-categories { grid-template-columns: 1fr; }
}

.compact-head {
  margin-top: 20px;
}
.compact-head h2 {
  font-size: clamp(25px, 3.2vw, 40px);
}

.field-label {
  display: grid;
  gap: 7px;
}
.field-label span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}
.field-label small {
  margin-top: -2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.gift-guide {
  display: inline-block;
  margin-top: 2px;
  color: var(--violet);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.inline-step {
  background: transparent !important;
  color: var(--pink) !important;
  width: auto !important;
  height: auto !important;
  margin-right: 5px !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  border: 0 !important;
}

/* v8 menu tree refinement */
.side-menu .parent-link {
  background: transparent !important;
  border: 0 !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  padding: 7px 10px !important;
  font-weight: 900 !important;
}
.side-menu .parent-link:hover {
  background: transparent !important;
  color: var(--pink) !important;
}
.sub-links {
  margin: 8px 0 12px 16px !important;
  padding-left: 16px !important;
  border-left: 2px solid color-mix(in srgb, var(--pink) 40%, transparent) !important;
}
.sub-links a {
  padding: 9px 8px !important;
  border-radius: 0 !important;
  font-size: 13.5px !important;
  font-weight: 850 !important;
}
.sub-links a::before {
  content: "" !important;
  margin: 0 !important;
}
.sub-links a:hover {
  background: transparent !important;
}

.mission-section {
  margin-top: 48px;
}
.reward-row {
  margin-top: 18px !important;
}
.mission-thumbs {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.mission-thumbs article {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--button-bg) 80%, transparent);
}
.mini-img {
  height: 128px;
  background-size: 160% 160%;
}
.mini-img::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 35% 34%, rgba(255,255,255,.88) 0 9%, transparent 10%),
    radial-gradient(circle at 57% 50%, rgba(255,255,255,.68) 0 12%, transparent 13%);
}
.mission-thumbs span {
  display: block;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

@media (max-width: 900px) {
  .mission-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .mission-thumbs {
    grid-template-columns: 1fr;
  }
}

/* v9 sidebar category layout */
.menu-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 8px;
}
.menu-row .menu-title {
  margin: 0;
}
.menu-view-all {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
.menu-view-all:hover {
  color: var(--pink) !important;
  background: transparent !important;
}
.side-menu > a:not(.menu-view-all) {
  padding-left: 0;
}
.side-menu .sub-links {
  margin: 0 0 18px 10px !important;
  padding-left: 22px !important;
  border-left: 2px solid color-mix(in srgb, var(--pink) 42%, transparent) !important;
}
.side-menu .sub-links a {
  padding: 10px 8px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.35;
}
.side-menu .sub-links a:hover {
  color: var(--pink) !important;
  background: transparent !important;
}
.mode-toggle {
  min-width: 58px;
  width: 58px;
  font-size: 14px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
[data-theme="dark"] .mode-toggle {
  border-color: color-mix(in srgb, var(--violet) 50%, var(--line));
  background: color-mix(in srgb, var(--violet) 22%, var(--button-bg));
}

/* v10 sidebar alignment and hero refinements */
.home-button {
  display: block;
  margin: 0 0 14px;
  padding: 12px 14px !important;
  border: 1px solid var(--line);
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--button-bg) 82%, transparent) !important;
  color: var(--muted) !important;
  font-weight: 950 !important;
}
.home-button:hover {
  border-color: color-mix(in srgb, var(--pink) 42%, var(--line));
  color: var(--pink) !important;
  background: color-mix(in srgb, var(--pink) 8%, var(--button-bg)) !important;
}

.single-sub {
  margin-top: 8px !important;
  margin-bottom: 18px !important;
}

.hero p br {
  display: block;
  content: "";
  margin-top: 4px;
}

.ticket {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
}
.ticket strong {
  font-size: 13px;
  color: var(--muted);
}
.ticket span {
  font-size: 18px;
}

/* v11 gallery card metadata */
.shot-info small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  opacity: .78;
}
.shot-info strong {
  margin-bottom: 8px;
}
.shot-info span {
  display: block;
}
/* v11: home is normal menu item again */
.side-menu > a[data-i18n="menuHome"] {
  margin-bottom: 10px;
}

/* v12 sidebar hover state like highlighted rounded pill */
.side-menu .sub-links a {
  border-radius: 16px !important;
  transition: background .15s ease, color .15s ease;
}
.side-menu .sub-links a:hover {
  background: color-mix(in srgb, var(--pink) 14%, var(--button-bg)) !important;
  color: var(--pink) !important;
}

/* v13 verification concept */
.candidate-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--button-bg) 72%, transparent);
}
.candidate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.candidate-head strong,
.security-panel strong,
.policy-note strong {
  display: block;
  font-size: 15px;
  font-weight: 950;
}
.candidate-head p,
.policy-note p,
.security-panel p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.candidate-head > span {
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pink) 15%, var(--button-bg));
  color: var(--pink);
  font-size: 12px;
  font-weight: 950;
}
.candidate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.candidate-grid label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  cursor: pointer;
}
.candidate-grid input {
  width: 16px;
  height: 16px;
  accent-color: var(--pink);
}
.candidate-grid span {
  font-weight: 950;
}
.candidate-grid small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.policy-note,
.security-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--pink) 7%, var(--card));
  border: 1px dashed color-mix(in srgb, var(--pink) 34%, var(--line));
}
.candidate-panel > button {
  margin-top: 14px;
}
.security-panel {
  background: color-mix(in srgb, var(--violet) 8%, var(--card));
  border-color: color-mix(in srgb, var(--violet) 34%, var(--line));
}
@media (max-width: 680px) {
  .candidate-grid { grid-template-columns: 1fr; }
  .candidate-head { flex-direction: column; }
}

/* v14 fold menu categories for growing product lists */
.fold-menu {
  margin: 4px 0 8px;
}
.fold-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px 9px 10px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 950;
  cursor: pointer;
  border-radius: 14px;
  user-select: none;
}
.fold-menu summary::-webkit-details-marker {
  display: none;
}
.fold-menu summary::before {
  content: "▸";
  color: var(--pink);
  font-size: 12px;
  transition: transform .15s ease;
}
.fold-menu[open] summary::before {
  transform: rotate(90deg);
}
.fold-menu summary:hover {
  background: color-mix(in srgb, var(--pink) 10%, var(--button-bg));
  color: var(--pink);
}
.fold-menu .sub-links {
  margin: 4px 0 12px 18px !important;
}

/* v15 recent 5 products directly visible, older products folded */
.recent-products {
  margin: 0 0 14px 10px;
  padding-left: 22px;
  border-left: 2px solid color-mix(in srgb, var(--pink) 42%, transparent);
}
.recent-products a {
  display: block;
  padding: 10px 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  border-radius: 16px;
}
.recent-products a:hover {
  background: color-mix(in srgb, var(--pink) 14%, var(--button-bg));
  color: var(--pink);
}
.fold-menu {
  margin-left: 0;
}
.fold-menu summary {
  margin-left: 0;
}
.fold-menu .sub-links {
  margin-left: 18px !important;
}

/* Firefox */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 22%, transparent) transparent;
}
.sidebar:hover,
.sidebar:focus-within {
  scrollbar-color: color-mix(in srgb, var(--muted) 62%, transparent) transparent;
}

/* Chrome / Edge / Safari */
.sidebar::-webkit-scrollbar {
  width: 8px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  border-radius: 999px;
}
.sidebar:hover::-webkit-scrollbar-thumb,
.sidebar:focus-within::-webkit-scrollbar-thumb,
.sidebar.is-scrolling::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 62%, transparent);
}

.side-menu a,
.recent-products a,
.fold-menu summary,
.fold-menu .sub-links a {
  white-space: normal;
  overflow-wrap: anywhere;
}

.more-products {
  margin-top: 6px;
}
.more-products summary {
  color: var(--muted);
}
.more-products summary:hover {
  color: var(--pink);
}

/* v22: v16 기준, side-menu 전용 오버레이 스크롤바 */

/* 메인 페이지는 v16의 흐름을 그대로 유지 */
.page {
  margin-left: var(--side);
}

/* sidebar 자체는 스크롤하지 않고 고정 레이아웃 유지 */
.sidebar {
  overflow: visible !important;
  padding-right: 18px !important;
  margin-right: 0 !important;
}

/* 실제 스크롤은 메뉴 영역만 담당 */
.side-menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: visible !important;
  padding-right: 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.side-menu::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

/* 상품명은 줄바꿈/말줄임 없이 한 줄 전체 표시 */
.recent-products a,
.fold-menu .sub-links a,
.side-menu .sub-links a {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* 메뉴 안쪽 폭을 스크롤바가 줄이지 않도록 유지 */
.recent-products {
  margin-right: 0 !important;
  padding-right: 0 !important;
}
.side-menu .sub-links {
  padding-right: 0 !important;
}

/* 스크롤바는 메뉴바 오른쪽 바깥에 떠 있는 별도 표시 레이어 */
.side-menu-scroll-layer {
  position: fixed;
  left: calc(var(--side) + 8px);
  top: 190px;
  width: 8px;
  height: 420px;
  pointer-events: none;
  z-index: 80;
  opacity: .24;
  transition: opacity .16s ease;
}
.sidebar:hover .side-menu-scroll-layer,
.sidebar:focus-within .side-menu-scroll-layer,
.side-menu.is-scrolling + .side-menu-scroll-layer {
  opacity: 1;
}
.side-menu-scroll-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  min-height: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
  transform: translateY(0);
}
.sidebar:hover .side-menu-scroll-thumb,
.sidebar:focus-within .side-menu-scroll-thumb,
.side-menu.is-scrolling + .side-menu-scroll-layer .side-menu-scroll-thumb {
  background: color-mix(in srgb, var(--muted) 72%, transparent);
}

/* 언어 버튼 영역은 하단 고정 컨트롤처럼 보이도록 구분선 */
.sidebar-bottom {
  border-top: 1px solid color-mix(in srgb, var(--pink) 26%, var(--line));
  padding-top: 16px !important;
}

/* fold는 v16처럼 하나만 유지 */
.more-products {
  margin-top: 8px !important;
  margin-bottom: 42px !important;
}

@media (max-width: 900px) {
  .side-menu {
    overflow: visible !important;
  }
  .side-menu-scroll-layer {
    display: none !important;
  }
}

/* v24 fixes: translations + side-menu scroll movement */
.sidebar {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

.side-menu {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.side-menu::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.recent-products a,
.fold-menu .sub-links a,
.side-menu .sub-links a {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.side-menu-scroll-layer {
  position: fixed !important;
  left: calc(var(--side) + 8px) !important;
  width: 8px !important;
  pointer-events: none !important;
  z-index: 80 !important;
  opacity: .24;
  transition: opacity .16s ease;
}
.sidebar:hover .side-menu-scroll-layer,
.sidebar:focus-within .side-menu-scroll-layer,
.side-menu.is-scrolling + .side-menu-scroll-layer {
  opacity: 1;
}
.side-menu-scroll-thumb {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 8px;
  min-height: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
  transform: translateY(0);
}
.sidebar:hover .side-menu-scroll-thumb,
.sidebar:focus-within .side-menu-scroll-thumb,
.side-menu.is-scrolling + .side-menu-scroll-layer .side-menu-scroll-thumb {
  background: color-mix(in srgb, var(--muted) 72%, transparent);
}

.sidebar-bottom {
  flex: 0 0 auto !important;
  border-top: 1px solid color-mix(in srgb, var(--pink) 26%, var(--line)) !important;
  padding-top: 16px !important;
}

/* v25 compact menu spacing */
.more-products {
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}
.menu-title {
  margin-top: 14px !important;
  margin-bottom: 6px !important;
}
.menu-row {
  margin-top: 14px !important;
  margin-bottom: 6px !important;
}
.recent-products {
  margin-bottom: 8px !important;
}
.recent-products a,
.fold-menu .sub-links a,
.side-menu .sub-links a {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  line-height: 1.25 !important;
}
.sub-links {
  gap: 1px !important;
  margin-bottom: 8px !important;
}
.fold-menu summary {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}
.side-menu {
  gap: 2px !important;
}
.side-menu a {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

/* v25 hero badge button */
.hero-content {
  position: relative;
}
.hero-badge-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pink) 32%, var(--line));
  background: color-mix(in srgb, var(--pink) 10%, var(--card));
  color: var(--pink);
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 12px 30px rgba(236, 101, 184, .10);
}
.hero-badge-button:hover {
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #fff;
  border-color: transparent;
}
@media (min-width: 980px) {
  .hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 28px;
    align-items: end;
  }
  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content p {
    grid-column: 1;
  }
  .hero-badge-button {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
    margin-top: 0;
    white-space: nowrap;
  }
}

/* v26 gallery card mini product thumbnails */
.shot-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 14px;
  align-items: end;
}
.shot.large .shot-info {
  grid-template-columns: minmax(0, 1fr) 84px;
}
.shot-copy {
  min-width: 0;
}
.shot-copy small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.shot-copy strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  line-height: 1.15;
}
.shot:not(.large) .shot-copy strong {
  font-size: 16px;
}
.shot-copy span {
  color: var(--pink);
  font-weight: 950;
}
.shot-thumb {
  position: relative;
  width: 74px;
  height: 74px;
  justify-self: end;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 20px rgba(40, 24, 54, .10);
  overflow: hidden;
  background: linear-gradient(135deg, #ffe2ef, #e5f7ff);
}
.shot.large .shot-thumb {
  width: 84px;
  height: 84px;
}
.shot-thumb::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.85) 0 14%, transparent 15%),
    radial-gradient(circle at 39% 58%, rgba(255,255,255,.95) 0 6%, transparent 7%),
    radial-gradient(circle at 61% 58%, rgba(255,255,255,.95) 0 6%, transparent 7%),
    radial-gradient(circle at 50% 70%, rgba(255,255,255,.85) 0 18%, transparent 19%);
}
.shot-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.65) 0 10%, transparent 11%),
    radial-gradient(circle at 78% 82%, rgba(255,255,255,.25) 0 18%, transparent 19%);
  mix-blend-mode: screen;
}
.thumb-a { background: linear-gradient(135deg, #ffd2ec, #ffccaf, #a9f0ff); }
.thumb-b { background: linear-gradient(135deg, #d4f6ff, #b1a5ff, #ffd4e8); }
.thumb-c { background: linear-gradient(135deg, #9de9ff, #8ca0ff, #ffcae3); }
.thumb-d { background: linear-gradient(135deg, #ffe6b7, #f2c1a2, #fff6df); }
.thumb-e { background: linear-gradient(135deg, #8260d8, #dca0ff, #ffc7dc); }

@media (max-width: 760px) {
  .shot-info {
    grid-template-columns: minmax(0, 1fr) 64px;
  }
  .shot.large .shot-thumb,
  .shot-thumb {
    width: 64px;
    height: 64px;
  }
}

/* v27 gallery card: smaller product thumbnails + two-line post titles */
.shot-info {
  grid-template-columns: minmax(0, 1fr) 56px !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 14px !important;
}
.shot.large .shot-info {
  grid-template-columns: minmax(0, 1fr) 62px !important;
}
.shot-copy small {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}
.shot-copy strong {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  line-height: 1.25 !important;
  min-height: 2.5em;
  margin-bottom: 6px !important;
}
.shot.large .shot-copy strong {
  font-size: 19px !important;
}
.shot:not(.large) .shot-copy strong {
  font-size: 16px !important;
}
.shot-thumb {
  width: 56px !important;
  height: 56px !important;
  border-radius: 13px !important;
  align-self: center;
}
.shot.large .shot-thumb {
  width: 62px !important;
  height: 62px !important;
}
.shot-thumb::before {
  inset: 6px !important;
}
@media (max-width: 760px) {
  .shot-info,
  .shot.large .shot-info {
    grid-template-columns: minmax(0, 1fr) 52px !important;
  }
  .shot.large .shot-thumb,
  .shot-thumb {
    width: 52px !important;
    height: 52px !important;
  }
}

/* v28: show gallery category longer after thumbnail size reduction */
.shot-copy small {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 12px !important;
  letter-spacing: -.02em;
}
.shot:not(.large) .shot-copy small {
  font-size: 11.5px !important;
}
.shot-info {
  grid-template-columns: minmax(0, 1fr) 48px !important;
  gap: 10px !important;
}
.shot.large .shot-info {
  grid-template-columns: minmax(0, 1fr) 54px !important;
}
.shot-thumb {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
}
.shot.large .shot-thumb {
  width: 54px !important;
  height: 54px !important;
}
.shot-thumb::before {
  inset: 5px !important;
}

/* v29: ranking badges + slightly lower product thumbnail */
.shot {
  position: relative;
}

.rank-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 8px 18px rgba(42, 27, 51, .08);
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.rank-badge.crown {
  color: #7a4b00;
  background: linear-gradient(135deg, rgba(255,245,202,.95), rgba(255,223,136,.88));
  border-color: rgba(255,234,167,.95);
}

.shot-thumb {
  margin-top: 6px !important; /* lower slightly for visual centering */
  align-self: center;
}

.shot.large .shot-thumb {
  margin-top: 8px !important;
}

@media (max-width: 760px) {
  .rank-badge {
    top: 12px;
    left: 12px;
    padding: 5px 9px;
    font-size: 11px;
  }
}

/* v30: translatable, cute rank badges with dark-mode-safe colors */
.rank-badge {
  color: #5e4954 !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  box-shadow: 0 10px 22px rgba(55, 34, 67, .10);
  font-size: 11.5px;
  font-weight: 950;
  letter-spacing: -.01em;
  gap: 4px;
}
.rank-1 {
  color: #7a5608 !important;
  background: linear-gradient(135deg, #fff7d5, #ffe39f) !important;
  border-color: #ffe6a8 !important;
}
.rank-2 {
  color: #5a5866 !important;
  background: linear-gradient(135deg, #f7f7fb, #dbdef0) !important;
  border-color: #e6e7f3 !important;
}
.rank-3 {
  color: #775045 !important;
  background: linear-gradient(135deg, #ffe7dd, #f3c6b8) !important;
  border-color: #f6d4c9 !important;
}
.rank-4 {
  color: #8a4f78 !important;
  background: linear-gradient(135deg, #ffe8f4, #f9d7eb) !important;
  border-color: #f9deed !important;
}
.rank-5 {
  color: #4d6b7a !important;
  background: linear-gradient(135deg, #ecfbff, #d8f1fb) !important;
  border-color: #e0f6ff !important;
}
[data-theme="dark"] .rank-badge {
  color: #4f3f4a !important;
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(255,255,255,.90) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}
[data-theme="dark"] .rank-1 {
  color: #7a5608 !important;
  background: linear-gradient(135deg, #fff2c0, #ffd97b) !important;
}
[data-theme="dark"] .rank-2 {
  color: #565665 !important;
  background: linear-gradient(135deg, #f5f6fb, #d4d8ea) !important;
}
[data-theme="dark"] .rank-3 {
  color: #765046 !important;
  background: linear-gradient(135deg, #ffdccc, #ebb8a7) !important;
}
[data-theme="dark"] .rank-4 {
  color: #8a4b76 !important;
  background: linear-gradient(135deg, #ffe0ef, #f1c6e0) !important;
}
[data-theme="dark"] .rank-5 {
  color: #496a7a !important;
  background: linear-gradient(135deg, #e5f9ff, #c7eaf8) !important;
}

/* v31: recent thumbnail card under ranked gallery */
.recent-thumbs-card {
  margin-top: 18px;
  padding: 26px 28px;
}
.recent-head h3 {
  margin: 6px 0 4px;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -.03em;
}
.recent-head p:last-child {
  margin: 0;
}
.recent-thumbs-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.recent-thumbs-grid article {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--button-bg) 84%, transparent);
  box-shadow: 0 8px 20px rgba(50, 28, 66, .06);
}
.recent-mini {
  aspect-ratio: 1 / 1;
  background-size: 160% 160%;
  position: relative;
}
.recent-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.92) 0 10%, transparent 11%),
    radial-gradient(circle at 55% 48%, rgba(255,255,255,.74) 0 14%, transparent 15%),
    radial-gradient(circle at 68% 68%, rgba(255,255,255,.28) 0 18%, transparent 19%);
}
.mini-a { background: linear-gradient(135deg, #ff9dcc, #ffd18e, #8de6ff); }
.mini-b { background: linear-gradient(135deg, #83e4ff, #a694ff, #ffc4e0); }
.mini-c { background: linear-gradient(135deg, #66d9ff, #7b8bff, #ffacd5); }
.mini-d { background: linear-gradient(135deg, #bd845c, #ffd3a4, #fff0d3); }
.mini-e { background: linear-gradient(135deg, #423c75, #a07cff, #ff8fc8); }
.mini-f { background: linear-gradient(135deg, #ffc3dc, #ffc58f, #b8f2ff); }
.mini-g { background: linear-gradient(135deg, #8ad7ff, #9a9cff, #ffd7e6); }
.mini-h { background: linear-gradient(135deg, #ffddc8, #ffd77a, #d8efc8); }
.mini-i { background: linear-gradient(135deg, #ffc5f0, #a5d8ff, #c9a9ff); }
.mini-j { background: linear-gradient(135deg, #d8c3ff, #ffb0d3, #ffe0ae); }

@media (max-width: 980px) {
  .recent-thumbs-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 760px) {
  .recent-thumbs-card {
    padding: 22px 20px;
  }
  .recent-thumbs-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }
  .recent-head h3 {
    font-size: 22px;
  }
}
@media (max-width: 560px) {
  .recent-thumbs-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }
  .recent-thumbs-grid article {
    border-radius: 14px;
  }
}

/* v32 recent uploads strip between connectors gallery and auth area */
.recent-strip {
  margin-top: 18px;
  margin-bottom: 20px;
  padding: 24px 28px;
}
.recent-strip-head h2 {
  margin: 6px 0 4px;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -.03em;
}
.recent-strip-head p:last-child {
  margin: 0;
}
.recent-strip-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.recent-item {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--button-bg) 84%, transparent);
  box-shadow: 0 8px 20px rgba(50, 28, 66, .06);
}
.recent-mini {
  aspect-ratio: 1 / 1;
  background-size: 160% 160%;
  position: relative;
}
.recent-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.92) 0 10%, transparent 11%),
    radial-gradient(circle at 55% 48%, rgba(255,255,255,.74) 0 14%, transparent 15%),
    radial-gradient(circle at 68% 68%, rgba(255,255,255,.28) 0 18%, transparent 19%);
}
.mini-a { background: linear-gradient(135deg, #ff9dcc, #ffd18e, #8de6ff); }
.mini-b { background: linear-gradient(135deg, #83e4ff, #a694ff, #ffc4e0); }
.mini-c { background: linear-gradient(135deg, #66d9ff, #7b8bff, #ffacd5); }
.mini-d { background: linear-gradient(135deg, #bd845c, #ffd3a4, #fff0d3); }
.mini-e { background: linear-gradient(135deg, #423c75, #a07cff, #ff8fc8); }
.mini-f { background: linear-gradient(135deg, #ffc3dc, #ffc58f, #b8f2ff); }
.mini-g { background: linear-gradient(135deg, #8ad7ff, #9a9cff, #ffd7e6); }
.mini-h { background: linear-gradient(135deg, #ffddc8, #ffd77a, #d8efc8); }
.mini-i { background: linear-gradient(135deg, #ffc5f0, #a5d8ff, #c9a9ff); }
.mini-j { background: linear-gradient(135deg, #d8c3ff, #ffb0d3, #ffe0ae); }

@media (max-width: 980px) {
  .recent-strip-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 760px) {
  .recent-strip {
    padding: 22px 20px;
  }
  .recent-strip-grid {
    gap: 10px;
  }
  .recent-strip-head h2 {
    font-size: 22px;
  }
}
@media (max-width: 560px) {
  .recent-strip-grid {
    gap: 8px;
  }
  .recent-item {
    border-radius: 14px;
  }
}

/* v33: simplify recent uploads heading */
.recent-strip {
  padding-top: 18px;
}
.recent-strip-head {
  margin-bottom: 2px;
}
.recent-strip-head .recent-label {
  margin: 0;
}
.recent-strip-head h2,
.recent-strip-head p:not(.recent-label) {
  display: none !important;
}
.recent-strip-grid {
  margin-top: 12px;
}

/* v34: tighter hero for more visible images on main page */
.brand strong {
  font-size: 20px !important;
}
.hero {
  padding: 28px 0 14px !important;
  align-items: flex-start !important;
}
.hero-copy {
  width: 100%;
}
.hero .eyebrow {
  margin-bottom: 10px !important;
  font-size: 14px !important;
  letter-spacing: .10em !important;
}
.hero h1 {
  max-width: 920px;
  font-size: clamp(24px, 3vw, 38px) !important;
  line-height: 1.1 !important;
}
.hero-text-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}
.hero-text-row p {
  margin: 0 !important;
  max-width: none !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}
.hero-badge-button {
  margin-top: 0 !important;
  white-space: nowrap;
  padding: 12px 16px !important;
  align-self: center;
}
.section-head.compact-head {
  margin-top: 26px !important;
}

@media (max-width: 760px) {
  .hero {
    padding: 22px 0 12px !important;
  }
  .hero-text-row {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }
  .hero-badge-button {
    justify-self: start;
  }
}

/* v34: recent uploads interactive thumbnail strip */
.recent-strip-head .recent-label {
  margin: 0 !important;
}
.recent-item {
  position: relative;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.recent-item::after {
  content: "↗";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.recent-item:hover,
.recent-item:focus-visible {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(50, 28, 66, .12);
  border-color: color-mix(in srgb, var(--pink) 30%, var(--line));
}
.recent-item:hover::after,
.recent-item:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.recent-mini {
  transition: transform .22s ease;
}
.recent-item:hover .recent-mini,
.recent-item:focus-visible .recent-mini {
  transform: scale(1.06);
}
.recent-like {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--pink);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 4px 10px rgba(42, 27, 51, .06);
}
[data-theme="dark"] .recent-like {
  background: rgba(255,255,255,.90);
  color: #ff67b7;
}
[data-theme="dark"] .recent-item::after {
  background: rgba(255,255,255,.88);
  color: #2d2330;
}

/* v35: main-page emphasis on images */
.hero {
  padding: 20px 0 10px !important;
}
.hero-copy {
  display: block;
}
.hero-subtitle {
  margin: 0 0 6px !important;
  color: var(--muted);
  font-size: 14px !important;
  font-weight: 800;
  letter-spacing: .02em;
}
.hero h1 {
  margin: 0 0 10px !important;
  font-size: clamp(40px, 5.2vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.05em !important;
}
.hero-text-row {
  margin-top: 4px;
}
.hero-text-row p {
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.hero-badge-button {
  padding: 11px 15px !important;
  font-size: 13px !important;
}
.section-head.compact-head {
  margin-top: 18px !important;
}

/* Ranked connectors gallery cards: make text smaller so the image feels more important */
.shot-copy small {
  font-size: 11.5px !important;
}
.shot.large .shot-copy strong {
  font-size: 16px !important;
  line-height: 1.2 !important;
}
.shot:not(.large) .shot-copy strong {
  font-size: 14px !important;
  line-height: 1.2 !important;
}
.shot-copy strong {
  margin-bottom: 4px !important;
}
.shot-copy span {
  font-size: 11px !important;
}

/* Recent Uploads likes: move to bottom-left for consistency */
.recent-like {
  top: auto !important;
  left: 8px !important;
  bottom: 8px !important;
}

@media (max-width: 760px) {
  .hero-subtitle {
    font-size: 13px !important;
  }
  .hero h1 {
    font-size: 42px !important;
  }
  .hero-text-row p {
    font-size: 14px !important;
  }
}

/* v36: sticky floating topbar controls */
.topbar {
  position: sticky !important;
  top: 10px !important;
  z-index: 120 !important;
  height: auto !important;
  min-height: 62px;
  padding: 8px 0 10px !important;
  background: transparent !important;
}
.auth {
  margin-left: auto;
  width: fit-content;
  padding: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(54, 28, 71, .08);
  border: 1px solid color-mix(in srgb, var(--pink) 12%, var(--line));
}
.auth a, .mode-toggle, .primary {
  padding: 10px 14px !important;
}
.auth .badge-link {
  background: color-mix(in srgb, var(--pink) 10%, var(--button-bg));
  color: var(--pink);
  border-color: color-mix(in srgb, var(--pink) 28%, var(--line));
}
[data-theme="dark"] .auth {
  background: color-mix(in srgb, var(--card) 74%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

/* v36: main title hierarchy and softer color */
.hero {
  padding: 12px 0 8px !important;
}
.hero-subtitle {
  margin: 0 0 2px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: none;
}
.hero h1 {
  margin: 0 0 8px !important;
  color: color-mix(in srgb, var(--text) 88%, var(--muted)) !important;
  font-size: clamp(42px, 5.4vw, 68px) !important;
  line-height: 0.98 !important;
  letter-spacing: -.05em !important;
}
.hero-text-row {
  display: block !important;
  margin-top: 0 !important;
}
.hero-text-row p {
  max-width: 760px !important;
  font-size: 15px !important;
  line-height: 1.48 !important;
}
.hero-badge-button {
  display: none !important;
}
.section-head.compact-head {
  margin-top: 12px !important;
}

/* v36: image ratio up, text a bit smaller */
.photo-wall {
  grid-auto-rows: 266px !important;
  gap: 16px;
}
.shot {
  cursor: pointer;
  transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease;
}
.shot::after {
  content: "↗";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 3;
}
.shot:hover,
.shot:focus-visible {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 16px 34px rgba(45, 26, 60, .14);
  border-color: color-mix(in srgb, var(--pink) 32%, var(--line));
}
.shot:hover::after,
.shot:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.shot-img {
  transition: transform .24s ease;
}
.shot:hover .shot-img,
.shot:focus-visible .shot-img {
  transform: scale(1.045);
}
.shot-info {
  bottom: 14px !important;
  left: 14px !important;
  right: 14px !important;
  padding: 10px 12px !important;
}
.shot-copy small {
  font-size: 11px !important;
}
.shot.large .shot-copy strong {
  font-size: 15px !important;
  min-height: 2.2em !important;
}
.shot:not(.large) .shot-copy strong {
  font-size: 13px !important;
  min-height: 2.2em !important;
}
.shot-copy span {
  font-size: 10.5px !important;
}

/* Recent likes keep bottom-left for consistency */
.recent-like {
  left: 8px !important;
  bottom: 8px !important;
  top: auto !important;
}

@media (max-width: 900px) {
  .topbar {
    top: 6px !important;
  }
  .auth {
    gap: 8px;
    padding: 5px;
  }
}

@media (max-width: 760px) {
  .topbar {
    position: sticky !important;
  }
  .auth {
    padding: 5px;
  }
  .hero h1 {
    font-size: 44px !important;
  }
  .hero-text-row p {
    font-size: 14px !important;
  }
}

/* v37: top buttons order, softer title, more image-focused gallery */
.hero h1 {
  font-size: clamp(34px, 4.7vw, 56px) !important;
  color: color-mix(in srgb, var(--text) 82%, #6f6176) !important;
  line-height: 1.0 !important;
}
.hero-subtitle {
  font-size: 12.5px !important;
  opacity: .95;
}
.hero-text-row p {
  font-size: 14.5px !important;
  line-height: 1.42 !important;
}
.auth {
  gap: 8px !important;
}
.auth a, .mode-toggle, .primary {
  font-size: 13px !important;
  padding: 10px 13px !important;
}
.auth .badge-link {
  order: -1;
}

/* Gallery layout: avoid overly tall #1 card, use wide/square feeling suited for VRC screenshots */
.photo-wall {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 224px !important;
  gap: 18px !important;
  align-items: stretch;
}
.shot.hero-rank {
  grid-column: 1 / span 2 !important;
  grid-row: span 1 !important;
}
.shot {
  border-radius: 30px !important;
}
.shot-img {
  background-size: 135% 135% !important;
}
.shot-info {
  padding: 9px 11px !important;
  border-radius: 24px !important;
  max-width: calc(100% - 28px);
}
.shot.hero-rank .shot-info {
  max-width: calc(100% - 28px);
}
.shot-copy small {
  font-size: 10.8px !important;
  margin-bottom: 3px !important;
}
.shot.hero-rank .shot-copy strong {
  font-size: 13px !important;
  line-height: 1.16 !important;
  min-height: 2.15em !important;
}
.shot:not(.hero-rank) .shot-copy strong {
  font-size: 12px !important;
  line-height: 1.16 !important;
  min-height: 2.15em !important;
}
.shot-copy span {
  font-size: 10px !important;
}
.shot-thumb {
  width: 44px !important;
  height: 44px !important;
  border-radius: 11px !important;
  margin-top: 4px !important;
}
.shot.hero-rank .shot-thumb {
  width: 50px !important;
  height: 50px !important;
}
.rank-badge {
  top: 12px !important;
  left: 12px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
}

/* Stronger click / hover feel on ranking cards */
.shot:hover,
.shot:focus-visible {
  transform: translateY(-5px) scale(1.018) !important;
  box-shadow: 0 18px 36px rgba(45, 26, 60, .16) !important;
}
.shot:hover .shot-img,
.shot:focus-visible .shot-img {
  transform: scale(1.05) !important;
}
.shot::after {
  right: 10px !important;
  bottom: 10px !important;
}

/* Keep images visible on mobile too */
@media (max-width: 980px) {
  .photo-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 220px !important;
  }
  .shot.hero-rank {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 760px) {
  .photo-wall {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 240px !important;
    gap: 14px !important;
  }
  .shot.hero-rank {
    grid-column: auto !important;
  }
  .hero h1 {
    font-size: 36px !important;
  }
  .shot.hero-rank .shot-copy strong,
  .shot:not(.hero-rank) .shot-copy strong {
    font-size: 12px !important;
  }
}

/* v38 refinements */

/* simpler, cleaner light/dark mode button */
.mode-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 78px !important;
  line-height: 1 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.mode-toggle span,
.mode-toggle em {
  font-style: normal;
}
.mode-toggle:hover {
  transform: translateY(-1px);
}

/* slightly smaller and softer main title */
.hero h1 {
  font-size: clamp(32px, 4.25vw, 50px) !important;
  color: color-mix(in srgb, var(--text) 74%, #8a7b90) !important;
}
.hero-subtitle {
  color: color-mix(in srgb, var(--muted) 88%, #8c7c93) !important;
}

/* make first ranking card less excessively wide */
.photo-wall {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 236px !important;
  gap: 18px !important;
}
.shot.hero-rank {
  grid-column: 1 / span 2 !important;
  min-height: 268px !important;
}
.shot.hero-rank .shot-img {
  background-size: 118% 118% !important;
}
.shot.hero-rank .shot-info {
  max-width: calc(100% - 30px) !important;
}

/* make ranked cards feel more image-forward */
.shot {
  overflow: hidden !important;
}
.shot-img {
  background-size: 128% 128% !important;
}
.shot-info {
  padding: 8px 11px !important;
  background: rgba(255,255,255,.80) !important;
  backdrop-filter: blur(10px);
}
[data-theme="dark"] .shot-info {
  background: rgba(34, 29, 41, .72) !important;
}
.shot-copy small {
  font-size: 10.5px !important;
}
.shot.hero-rank .shot-copy strong {
  font-size: 12.5px !important;
}
.shot:not(.hero-rank) .shot-copy strong {
  font-size: 11.5px !important;
}
.shot-copy span {
  font-size: 10px !important;
}

/* consistent click affordance */
.shot::after {
  right: 11px !important;
  bottom: 11px !important;
  width: 19px !important;
  height: 19px !important;
}

@media (max-width: 980px) {
  .shot.hero-rank {
    min-height: 248px !important;
  }
}
@media (max-width: 760px) {
  .mode-toggle {
    min-width: 72px !important;
    font-size: 13px !important;
  }
  .hero h1 {
    font-size: 34px !important;
  }
  .shot.hero-rank {
    min-height: 236px !important;
  }
}

/* v39: cleaner mode toggle */
.mode-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 82px !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 14px !important;
}
.mode-toggle .mode-sun,
.mode-toggle .mode-moon,
.mode-toggle .mode-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mode-toggle .mode-sun,
.mode-toggle .mode-moon {
  font-size: 14px;
}
.mode-toggle .mode-sep {
  opacity: .55;
  font-size: 13px;
  transform: translateY(-.5px);
}
[data-theme="dark"] .mode-toggle .mode-sep {
  opacity: .7;
}

/* v39: ranking layout
   - #1 and #2: same height, slightly taller
   - #3/#4/#5: same square-like cards */
.photo-wall {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: 286px !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.photo-wall > .shot {
  min-height: 286px !important;
}
.photo-wall > .shot.hero-rank {
  grid-column: 1 / span 7 !important;
  grid-row: 1 !important;
}
.photo-wall > .shot:nth-child(2) {
  grid-column: 8 / span 5 !important;
  grid-row: 1 !important;
}
.photo-wall > .shot:nth-child(3) {
  grid-column: 1 / span 4 !important;
  grid-row: 2 !important;
}
.photo-wall > .shot:nth-child(4) {
  grid-column: 5 / span 4 !important;
  grid-row: 2 !important;
}
.photo-wall > .shot:nth-child(5) {
  grid-column: 9 / span 4 !important;
  grid-row: 2 !important;
}

/* keep 1st card bigger than before, but not excessively wide */
.shot.hero-rank .shot-img {
  background-size: 120% 120% !important;
}
.photo-wall > .shot:nth-child(2) .shot-img {
  background-size: 124% 124% !important;
}

/* cards 3/4/5 square-like and consistent */
.photo-wall > .shot:nth-child(3),
.photo-wall > .shot:nth-child(4),
.photo-wall > .shot:nth-child(5) {
  aspect-ratio: 1 / 1;
}

/* keep info panels balanced */
.photo-wall > .shot:nth-child(2) .shot-info,
.photo-wall > .shot:nth-child(3) .shot-info,
.photo-wall > .shot:nth-child(4) .shot-info,
.photo-wall > .shot:nth-child(5) .shot-info {
  max-width: calc(100% - 28px) !important;
}
.shot.hero-rank .shot-copy strong,
.photo-wall > .shot:nth-child(2) .shot-copy strong {
  font-size: 12.5px !important;
}
.photo-wall > .shot:nth-child(3) .shot-copy strong,
.photo-wall > .shot:nth-child(4) .shot-copy strong,
.photo-wall > .shot:nth-child(5) .shot-copy strong {
  font-size: 11.5px !important;
}

/* responsive */
@media (max-width: 980px) {
  .photo-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 250px !important;
  }
  .photo-wall > .shot,
  .photo-wall > .shot.hero-rank {
    min-height: 250px !important;
    aspect-ratio: auto !important;
  }
  .photo-wall > .shot.hero-rank {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .photo-wall > .shot:nth-child(2) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 1 / 1;
  }
}
@media (max-width: 760px) {
  .mode-toggle {
    min-width: 76px !important;
    padding: 10px 12px !important;
  }
  .photo-wall {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 238px !important;
    gap: 14px !important;
  }
  .photo-wall > .shot,
  .photo-wall > .shot.hero-rank,
  .photo-wall > .shot:nth-child(2),
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 238px !important;
    aspect-ratio: auto !important;
  }
}

/* v40: prevent overlap of 3/4/5 cards on narrower desktop widths */
@media (max-width: 1260px) and (min-width: 981px) {
  .photo-wall {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-auto-rows: 268px !important;
    gap: 16px !important;
  }

  /* keep 1st and 2nd same height */
  .photo-wall > .shot,
  .photo-wall > .shot.hero-rank,
  .photo-wall > .shot:nth-child(2) {
    min-height: 268px !important;
  }

  /* keep 3/4/5 as square cards without overlap */
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* compact text box for 3/4/5 so it never collides */
  .photo-wall > .shot:nth-child(3) .shot-info,
  .photo-wall > .shot:nth-child(4) .shot-info,
  .photo-wall > .shot:nth-child(5) .shot-info {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    max-width: calc(100% - 20px) !important;
    padding: 8px 10px !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 8px !important;
    border-radius: 20px !important;
  }

  .photo-wall > .shot:nth-child(3) .shot-thumb,
  .photo-wall > .shot:nth-child(4) .shot-thumb,
  .photo-wall > .shot:nth-child(5) .shot-thumb {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    margin-top: 2px !important;
  }

  .photo-wall > .shot:nth-child(3) .shot-copy small,
  .photo-wall > .shot:nth-child(4) .shot-copy small,
  .photo-wall > .shot:nth-child(5) .shot-copy small {
    font-size: 9.5px !important;
    margin-bottom: 2px !important;
  }

  .photo-wall > .shot:nth-child(3) .shot-copy strong,
  .photo-wall > .shot:nth-child(4) .shot-copy strong,
  .photo-wall > .shot:nth-child(5) .shot-copy strong {
    font-size: 10.5px !important;
    line-height: 1.14 !important;
    min-height: 2.05em !important;
    margin-bottom: 3px !important;
  }

  .photo-wall > .shot:nth-child(3) .shot-copy span,
  .photo-wall > .shot:nth-child(4) .shot-copy span,
  .photo-wall > .shot:nth-child(5) .shot-copy span {
    font-size: 9.5px !important;
  }

  .photo-wall > .shot:nth-child(3)::after,
  .photo-wall > .shot:nth-child(4)::after,
  .photo-wall > .shot:nth-child(5)::after {
    right: 8px !important;
    bottom: 8px !important;
    width: 17px !important;
    height: 17px !important;
    font-size: 10px !important;
  }
}

/* v41: final ranking grid safety pass */

/* prevent page-level horizontal scrollbar from gallery/sidebar overflow */
html,
body {
  overflow-x: hidden !important;
}
.page,
.photo-wall,
.recent-strip,
.two-col {
  min-width: 0 !important;
}

/* Replace the ranking grid with stable 6-column layout:
   top row: #1 and #2 same height
   bottom row: #3/#4/#5 square-like and never overlapping */
.photo-wall {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 18px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.photo-wall > .shot {
  min-width: 0 !important;
  min-height: 0 !important;
  grid-row: auto !important;
  overflow: hidden !important;
}

/* #1 / #2: equal-height large cards */
.photo-wall > .shot.hero-rank {
  grid-column: 1 / span 3 !important;
  grid-row: 1 !important;
  height: clamp(250px, 24vw, 315px) !important;
  aspect-ratio: auto !important;
}

.photo-wall > .shot:nth-child(2) {
  grid-column: 4 / span 3 !important;
  grid-row: 1 !important;
  height: clamp(250px, 24vw, 315px) !important;
  aspect-ratio: auto !important;
}

/* #3 / #4 / #5: evenly divided square cards */
.photo-wall > .shot:nth-child(3) {
  grid-column: 1 / span 2 !important;
  grid-row: 2 !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}
.photo-wall > .shot:nth-child(4) {
  grid-column: 3 / span 2 !important;
  grid-row: 2 !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}
.photo-wall > .shot:nth-child(5) {
  grid-column: 5 / span 2 !important;
  grid-row: 2 !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}

/* compact but readable info panels, clipped inside each card */
.photo-wall .shot-info {
  max-width: none !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  box-sizing: border-box !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  gap: 8px !important;
  padding: 8px 10px !important;
}
.photo-wall .shot-thumb {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
}
.photo-wall .shot-copy {
  min-width: 0 !important;
}
.photo-wall .shot-copy small {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.photo-wall .shot-copy strong {
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

/* keep hover inside normal layout flow */
.photo-wall > .shot:hover,
.photo-wall > .shot:focus-visible {
  z-index: 5;
}

/* sidebar should not create document horizontal scrolling */
.sidebar,
.side-menu {
  overflow-x: clip !important;
}

/* responsive: keep stable, never overlap */
@media (max-width: 980px) {
  .photo-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .photo-wall > .shot.hero-rank,
  .photo-wall > .shot:nth-child(2),
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 250px !important;
    aspect-ratio: auto !important;
  }
}
@media (max-width: 640px) {
  .photo-wall {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .photo-wall > .shot.hero-rank,
  .photo-wall > .shot:nth-child(2),
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    height: 238px !important;
  }
}

/* v42: rebuild width composition for a more stable gallery layout */

/* 1) Keep the main content from stretching too wide on large monitors */
.page > * {
  width: min(100%, 1280px) !important;
  margin-inline: auto !important;
}
.hero,
.section-head,
.photo-wall,
.recent-strip,
.two-col {
  max-width: 1280px !important;
}

/* 2) Rebuild ranking grid with a simpler, more stable structure
      Row 1: #1 and #2 = same size large cards
      Row 2: #3/#4/#5 = equal square cards */
.photo-wall {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

/* reset old size assumptions */
.photo-wall > .shot,
.photo-wall > .shot.hero-rank,
.photo-wall > .shot:nth-child(2),
.photo-wall > .shot:nth-child(3),
.photo-wall > .shot:nth-child(4),
.photo-wall > .shot:nth-child(5) {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* top row: two large cards with the same width/height */
.photo-wall > .shot.hero-rank {
  grid-column: 1 / span 3 !important;
  grid-row: 1 !important;
  aspect-ratio: 1.62 / 1 !important;
}
.photo-wall > .shot:nth-child(2) {
  grid-column: 4 / span 3 !important;
  grid-row: 1 !important;
  aspect-ratio: 1.62 / 1 !important;
}

/* bottom row: three square cards */
.photo-wall > .shot:nth-child(3) {
  grid-column: 1 / span 2 !important;
  grid-row: 2 !important;
  aspect-ratio: 1 / 1 !important;
}
.photo-wall > .shot:nth-child(4) {
  grid-column: 3 / span 2 !important;
  grid-row: 2 !important;
  aspect-ratio: 1 / 1 !important;
}
.photo-wall > .shot:nth-child(5) {
  grid-column: 5 / span 2 !important;
  grid-row: 2 !important;
  aspect-ratio: 1 / 1 !important;
}

/* 3) Make the text panel fit safely inside every card */
.photo-wall .shot-info {
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
  grid-template-columns: minmax(0, 1fr) 46px !important;
  gap: 9px !important;
  padding: 9px 11px !important;
}
.photo-wall .shot-thumb {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 12px !important;
}
.photo-wall .shot-copy {
  min-width: 0 !important;
}
.photo-wall .shot-copy small {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10.5px !important;
}
.photo-wall > .shot.hero-rank .shot-copy strong,
.photo-wall > .shot:nth-child(2) .shot-copy strong {
  font-size: 12px !important;
  line-height: 1.18 !important;
  min-height: 2.15em !important;
}
.photo-wall > .shot:nth-child(3) .shot-copy strong,
.photo-wall > .shot:nth-child(4) .shot-copy strong,
.photo-wall > .shot:nth-child(5) .shot-copy strong {
  font-size: 11px !important;
  line-height: 1.18 !important;
  min-height: 2.15em !important;
}
.photo-wall .shot-copy span {
  font-size: 10px !important;
}

/* 4) Responsive behavior: step down cleanly */
@media (max-width: 1180px) {
  .page > * {
    width: min(100%, 1080px) !important;
  }
  .photo-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  .photo-wall > .shot.hero-rank,
  .photo-wall > .shot:nth-child(2) {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 1.45 / 1 !important;
  }
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4) {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  .photo-wall > .shot:nth-child(5) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: 1.85 / 1 !important;
  }
}

@media (max-width: 860px) {
  .page > * {
    width: 100% !important;
  }
  .photo-wall {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .photo-wall > .shot.hero-rank,
  .photo-wall > .shot:nth-child(2),
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 1.55 / 1 !important;
  }
}


/* v52: restart from v42. No sidebar fold animation. Ranking cards use left profile image + heart under profile image */

/* 1) Do not animate the menu fold; keep it simple and stable */
.fold-menu summary::before,
.fold-menu .sub-links,
.fold-menu .sub-links a {
  transition: none !important;
  animation: none !important;
}

/* 2) Ranking card info layout: profile image on the left */
.photo-wall .shot-info {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  display: block !important;
  min-height: 88px !important;
  padding: 12px 14px 12px 82px !important;
  border-radius: 22px !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.photo-wall .shot-thumb {
  position: absolute !important;
  left: 14px !important;
  top: 12px !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 14px !important;
  justify-self: auto !important;
}

.photo-wall .shot-copy {
  min-width: 0 !important;
}

.photo-wall .shot-copy small {
  display: block !important;
  margin: 0 0 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.photo-wall > .shot.hero-rank .shot-copy strong,
.photo-wall > .shot:nth-child(2) .shot-copy strong {
  display: block !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.22 !important;
  min-height: 2.4em !important;
}

.photo-wall > .shot:nth-child(3) .shot-copy strong,
.photo-wall > .shot:nth-child(4) .shot-copy strong,
.photo-wall > .shot:nth-child(5) .shot-copy strong {
  display: block !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  min-height: 2.35em !important;
}

/* 3) Heart sits under the profile image, centered and stable */
.photo-wall .shot-copy span {
  position: absolute !important;
  left: 14px !important;
  bottom: 10px !important;
  width: 52px !important;
  text-align: center !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: var(--pink) !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* 4) Keep the left block proportional on smaller cards */
@media (max-width: 1180px) {
  .photo-wall .shot-info {
    min-height: 84px !important;
    padding: 11px 13px 11px 78px !important;
  }
  .photo-wall .shot-thumb {
    left: 13px !important;
    top: 11px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
  .photo-wall .shot-copy span {
    left: 13px !important;
    width: 50px !important;
    bottom: 10px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 860px) {
  .photo-wall .shot-info {
    min-height: 82px !important;
    padding: 11px 12px 11px 74px !important;
  }
  .photo-wall .shot-thumb {
    left: 12px !important;
    top: 11px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }
  .photo-wall .shot-copy span {
    left: 12px !important;
    width: 48px !important;
    bottom: 10px !important;
    font-size: 10.5px !important;
  }
}


/* v53: future-ready like buttons + fixed top controls */

/* Top-right controls follow the viewport while scrolling */
.topbar {
  position: fixed !important;
  top: 12px !important;
  right: 18px !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  z-index: 2200 !important;
  background: transparent !important;
}
.auth {
  margin-left: auto;
  width: fit-content;
  padding: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 84%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(54, 28, 71, .08);
  border: 1px solid color-mix(in srgb, var(--pink) 12%, var(--line));
}
[data-theme="dark"] .auth {
  background: color-mix(in srgb, var(--card) 74%, transparent);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

/* Prevent fixed controls from covering the first hero area too tightly */
.page {
  padding-top: 86px !important;
}

/* Each heart is now a future clickable like button */
.like-button {
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none;
  border-radius: 999px;
  transition: transform .14s ease, opacity .14s ease, color .14s ease, background-color .14s ease;
}
.like-button:hover,
.like-button:focus-visible {
  transform: scale(1.08);
  color: var(--pink) !important;
  outline: none;
}
.like-button.is-liked {
  color: var(--pink) !important;
  font-weight: 950;
}

/* Ranking heart still stays under the profile image */
.photo-wall .shot-copy .like-button {
  position: absolute !important;
  left: 14px !important;
  bottom: 10px !important;
  width: 52px !important;
  text-align: center !important;
  font-size: 11px !important;
  line-height: 1 !important;
  z-index: 6 !important;
}

/* Recent Uploads heart remains clickable at the lower-left */
.recent-like.like-button {
  position: absolute !important;
  left: 8px !important;
  right: auto !important;
  bottom: 8px !important;
  top: auto !important;
  z-index: 4 !important;
}

@media (max-width: 760px) {
  .topbar {
    top: 10px !important;
    right: 12px !important;
    left: 12px !important;
  }
  .auth {
    max-width: 100%;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .page {
    padding-top: 100px !important;
  }
  .photo-wall .shot-copy .like-button {
    left: 12px !important;
    width: 48px !important;
  }
}


/* v54: ranking card info folds on the left, then expands to the right */

.photo-wall > .shot .shot-info {
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  bottom: 14px !important;
  width: 84px !important;
  min-height: 112px !important;
  padding: 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(48, 29, 63, .08);
  transition:
    width .38s cubic-bezier(.22,.8,.25,1),
    background-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease !important;
}

[data-theme="dark"] .photo-wall > .shot .shot-info {
  background: rgba(34,29,41,.78) !important;
}

.photo-wall > .shot:hover .shot-info,
.photo-wall > .shot:focus-visible .shot-info,
.photo-wall > .shot:focus-within .shot-info {
  width: calc(100% - 28px) !important;
  min-height: 92px !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(48, 29, 63, .14);
}

/* profile image stays on the left from the beginning */
.photo-wall > .shot .shot-thumb {
  position: absolute !important;
  left: 14px !important;
  top: 12px !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  border-radius: 14px !important;
  transform: none !important;
  margin: 0 !important;
  box-shadow: 0 6px 14px rgba(52,28,72,.10);
}

/* full overlay area for text and like count */
.photo-wall > .shot .shot-copy {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
}

/* gallery name and title stay hidden until the panel opens */
.photo-wall > .shot .shot-copy small,
.photo-wall > .shot .shot-copy strong {
  position: absolute !important;
  left: 80px !important;
  right: 14px !important;
  opacity: 0 !important;
  transform: translateX(-8px) !important;
  transition:
    opacity .18s ease,
    transform .22s ease !important;
  transition-delay: 0s !important;
  overflow: hidden !important;
}

.photo-wall > .shot .shot-copy small {
  top: 15px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.photo-wall > .shot .shot-copy strong {
  top: 33px !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

.photo-wall > .shot:hover .shot-copy small,
.photo-wall > .shot:hover .shot-copy strong,
.photo-wall > .shot:focus-visible .shot-copy small,
.photo-wall > .shot:focus-visible .shot-copy strong,
.photo-wall > .shot:focus-within .shot-copy small,
.photo-wall > .shot:focus-within .shot-copy strong {
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition-delay: .20s !important;
}

/* like button under the profile image with more breathing room */
.photo-wall > .shot .shot-copy .like-button {
  position: absolute !important;
  left: 14px !important;
  top: 76px !important;
  bottom: auto !important;
  width: 50px !important;
  text-align: center !important;
  font-size: 11px !important;
  line-height: 1 !important;
  z-index: 8 !important;
  transform: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* keep the like button aligned under the profile image even when opened */
.photo-wall > .shot:hover .shot-copy .like-button,
.photo-wall > .shot:focus-visible .shot-copy .like-button,
.photo-wall > .shot:focus-within .shot-copy .like-button {
  left: 14px !important;
  top: 76px !important;
  width: 50px !important;
}

/* slightly larger text for #1 and #2 cards */
.photo-wall > .shot.hero-rank .shot-copy strong,
.photo-wall > .shot:nth-child(2) .shot-copy strong {
  font-size: 15px !important;
  line-height: 1.22 !important;
}

.photo-wall > .shot:nth-child(3) .shot-copy strong,
.photo-wall > .shot:nth-child(4) .shot-copy strong,
.photo-wall > .shot:nth-child(5) .shot-copy strong {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

@media (max-width: 860px) {
  .photo-wall > .shot .shot-info {
    width: 80px !important;
    min-height: 108px !important;
  }
  .photo-wall > .shot:hover .shot-info,
  .photo-wall > .shot:focus-visible .shot-info,
  .photo-wall > .shot:focus-within .shot-info {
    width: calc(100% - 24px) !important;
  }
  .photo-wall > .shot .shot-thumb {
    left: 12px !important;
    top: 12px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }
  .photo-wall > .shot .shot-copy .like-button {
    left: 12px !important;
    top: 72px !important;
    width: 46px !important;
    font-size: 10.5px !important;
  }
  .photo-wall > .shot .shot-copy small,
  .photo-wall > .shot .shot-copy strong {
    left: 74px !important;
    right: 12px !important;
  }
}


/* v55: fixed folded/open panel height + like button same style as Recent Uploads */

/* Keep ranking info panel height identical before/after hover */
.photo-wall > .shot .shot-info,
.photo-wall > .shot:hover .shot-info,
.photo-wall > .shot:focus-visible .shot-info,
.photo-wall > .shot:focus-within .shot-info {
  min-height: 92px !important;
  height: 92px !important;
}

/* Folded width stays compact, but height no longer changes */
.photo-wall > .shot .shot-info {
  width: 84px !important;
}

.photo-wall > .shot:hover .shot-info,
.photo-wall > .shot:focus-visible .shot-info,
.photo-wall > .shot:focus-within .shot-info {
  width: calc(100% - 28px) !important;
}

/* Align profile image inside the fixed-height panel */
.photo-wall > .shot .shot-thumb {
  top: 11px !important;
  left: 14px !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
}

/* Ranking like button uses the same pill/chip feeling as Recent Uploads */
.photo-wall > .shot .shot-copy .like-button {
  position: absolute !important;
  left: 14px !important;
  top: auto !important;
  bottom: 10px !important;
  width: auto !important;
  min-width: 48px !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.86) !important;
  color: var(--pink) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  box-shadow: 0 4px 10px rgba(42, 27, 51, .06) !important;
  transform: none !important;
  z-index: 8 !important;
}

/* Keep same position even after panel opens */
.photo-wall > .shot:hover .shot-copy .like-button,
.photo-wall > .shot:focus-visible .shot-copy .like-button,
.photo-wall > .shot:focus-within .shot-copy .like-button {
  left: 14px !important;
  bottom: 10px !important;
  top: auto !important;
  transform: none !important;
}

/* Dark mode: match Recent Uploads readable chip */
[data-theme="dark"] .photo-wall > .shot .shot-copy .like-button {
  background: rgba(255,255,255,.90) !important;
  color: #ff67b7 !important;
}

/* Text position adjusted to the fixed 92px panel */
.photo-wall > .shot .shot-copy small {
  top: 14px !important;
}
.photo-wall > .shot .shot-copy strong {
  top: 32px !important;
}

/* Mobile: fixed height too */
@media (max-width: 860px) {
  .photo-wall > .shot .shot-info,
  .photo-wall > .shot:hover .shot-info,
  .photo-wall > .shot:focus-visible .shot-info,
  .photo-wall > .shot:focus-within .shot-info {
    min-height: 88px !important;
    height: 88px !important;
  }

  .photo-wall > .shot .shot-info {
    width: 80px !important;
  }

  .photo-wall > .shot:hover .shot-info,
  .photo-wall > .shot:focus-visible .shot-info,
  .photo-wall > .shot:focus-within .shot-info {
    width: calc(100% - 24px) !important;
  }

  .photo-wall > .shot .shot-thumb {
    left: 12px !important;
    top: 10px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }

  .photo-wall > .shot .shot-copy .like-button,
  .photo-wall > .shot:hover .shot-copy .like-button,
  .photo-wall > .shot:focus-visible .shot-copy .like-button,
  .photo-wall > .shot:focus-within .shot-copy .like-button {
    left: 12px !important;
    bottom: 9px !important;
    min-width: 46px !important;
  }
}


/* v56: ranking like hover only on the like chip + dark arrow readability */

/* Ranking like button should not scale when the whole card opens */
.photo-wall > .shot:hover .shot-copy .like-button,
.photo-wall > .shot:focus-visible .shot-copy .like-button,
.photo-wall > .shot:focus-within .shot-copy .like-button {
  transform: none !important;
}

/* Ranking like button scales only when the like button itself is hovered/focused */
.photo-wall > .shot .shot-copy .like-button:hover,
.photo-wall > .shot .shot-copy .like-button:focus-visible {
  transform: scale(1.08) !important;
}

/* Keep Recent Uploads like behavior consistent */
.recent-like.like-button:hover,
.recent-like.like-button:focus-visible {
  transform: scale(1.08) !important;
}

/* Hover arrow should stay dark on the white circle in dark mode, same as Recent Uploads */
[data-theme="dark"] .shot::after {
  background: rgba(255,255,255,.88) !important;
  color: #2d2330 !important;
}

[data-theme="dark"] .shot:hover::after,
[data-theme="dark"] .shot:focus-visible::after {
  color: #2d2330 !important;
}


/* v57: folded ranking profile block center alignment */
.photo-wall > .shot .shot-info {
  width: 76px !important; /* 14px left + 48px profile + 14px right */
}

/* Keep expanded state full-width */
.photo-wall > .shot:hover .shot-info,
.photo-wall > .shot:focus-visible .shot-info,
.photo-wall > .shot:focus-within .shot-info {
  width: calc(100% - 28px) !important;
}

/* Heart chip centered to the folded block/profile image */
.photo-wall > .shot .shot-copy .like-button {
  left: 12px !important;
  width: 52px !important;
  min-width: 52px !important;
}

/* When opened, keep the heart aligned under the profile image */
.photo-wall > .shot:hover .shot-copy .like-button,
.photo-wall > .shot:focus-visible .shot-copy .like-button,
.photo-wall > .shot:focus-within .shot-copy .like-button {
  left: 12px !important;
  width: 52px !important;
  min-width: 52px !important;
}

@media (max-width: 860px) {
  .photo-wall > .shot .shot-info {
    width: 74px !important; /* 12px left + 46px profile + 16px visual breathing room */
  }
  .photo-wall > .shot:hover .shot-info,
  .photo-wall > .shot:focus-visible .shot-info,
  .photo-wall > .shot:focus-within .shot-info {
    width: calc(100% - 24px) !important;
  }
  .photo-wall > .shot .shot-copy .like-button,
  .photo-wall > .shot:hover .shot-copy .like-button,
  .photo-wall > .shot:focus-visible .shot-copy .like-button,
  .photo-wall > .shot:focus-within .shot-copy .like-button {
    left: 9px !important;
    width: 52px !important;
    min-width: 52px !important;
  }
}


/* v59: preserve the asymmetric ranking layout, but scale it responsively without reordering */

/* Keep the original 1-2 / 3-4-5 composition at all normal widths */
.photo-wall {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-areas:
    "rank1 rank1 rank1 rank2 rank2 rank2"
    "rank3 rank3 rank4 rank4 rank5 rank5" !important;
  gap: clamp(12px, 1.4vw, 22px) !important;
  align-items: stretch !important;
}

.photo-wall > .shot:nth-child(1) { grid-area: rank1 !important; }
.photo-wall > .shot:nth-child(2) { grid-area: rank2 !important; }
.photo-wall > .shot:nth-child(3) { grid-area: rank3 !important; }
.photo-wall > .shot:nth-child(4) { grid-area: rank4 !important; }
.photo-wall > .shot:nth-child(5) { grid-area: rank5 !important; }

/* Never let width breakpoints rearrange these cards */
.photo-wall > .shot,
.photo-wall > .shot.hero-rank,
.photo-wall > .shot:nth-child(2),
.photo-wall > .shot:nth-child(3),
.photo-wall > .shot:nth-child(4),
.photo-wall > .shot:nth-child(5) {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Top row: both #1 and #2 keep the same wide aspect */
.photo-wall > .shot:nth-child(1),
.photo-wall > .shot:nth-child(2) {
  aspect-ratio: 1.62 / 1 !important;
}

/* Bottom row: #3 #4 #5 stay square and scale together */
.photo-wall > .shot:nth-child(3),
.photo-wall > .shot:nth-child(4),
.photo-wall > .shot:nth-child(5) {
  aspect-ratio: 1 / 1 !important;
}

/* Scale internal overlays smoothly with the card size */
.photo-wall > .shot .shot-info {
  left: clamp(10px, 1vw, 14px) !important;
  bottom: clamp(10px, 1vw, 14px) !important;
  width: clamp(76px, 8vw, 84px) !important;
  min-height: clamp(88px, 8.5vw, 92px) !important;
  height: clamp(88px, 8.5vw, 92px) !important;
  border-radius: clamp(22px, 2vw, 26px) !important;
}

.photo-wall > .shot:hover .shot-info,
.photo-wall > .shot:focus-visible .shot-info,
.photo-wall > .shot:focus-within .shot-info {
  width: calc(100% - (clamp(10px, 1vw, 14px) * 2)) !important;
  min-height: clamp(88px, 8.5vw, 92px) !important;
  height: clamp(88px, 8.5vw, 92px) !important;
}

.photo-wall > .shot .shot-thumb {
  left: clamp(10px, 1vw, 14px) !important;
  top: clamp(9px, .9vw, 11px) !important;
  width: clamp(44px, 4.2vw, 48px) !important;
  height: clamp(44px, 4.2vw, 48px) !important;
  min-width: clamp(44px, 4.2vw, 48px) !important;
}

.photo-wall > .shot .shot-copy .like-button,
.photo-wall > .shot:hover .shot-copy .like-button,
.photo-wall > .shot:focus-visible .shot-copy .like-button,
.photo-wall > .shot:focus-within .shot-copy .like-button {
  left: clamp(8px, .85vw, 12px) !important;
  bottom: clamp(8px, .85vw, 10px) !important;
  width: auto !important;
  min-width: clamp(48px, 4.4vw, 52px) !important;
  font-size: clamp(9px, .85vw, 10px) !important;
}

.photo-wall > .shot .shot-copy small,
.photo-wall > .shot .shot-copy strong {
  left: clamp(68px, 6.1vw, 80px) !important;
  right: clamp(10px, 1vw, 14px) !important;
}

.photo-wall > .shot .shot-copy small {
  top: clamp(12px, 1vw, 15px) !important;
  font-size: clamp(9px, .9vw, 11px) !important;
}

.photo-wall > .shot .shot-copy strong,
.photo-wall > .shot.hero-rank .shot-copy strong,
.photo-wall > .shot:nth-child(2) .shot-copy strong,
.photo-wall > .shot:nth-child(3) .shot-copy strong,
.photo-wall > .shot:nth-child(4) .shot-copy strong,
.photo-wall > .shot:nth-child(5) .shot-copy strong {
  top: clamp(28px, 2.3vw, 33px) !important;
  font-size: clamp(10px, 1vw, 13px) !important;
  line-height: 1.18 !important;
}

.rank-badge {
  top: clamp(10px, .95vw, 12px) !important;
  left: clamp(10px, .95vw, 12px) !important;
  padding: clamp(4px, .55vw, 6px) clamp(8px, .75vw, 10px) !important;
  font-size: clamp(9px, .85vw, 11px) !important;
}

/* Disable any older responsive re-layout rules from previous versions */
@media (max-width: 1180px) {
  .photo-wall {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-areas:
      "rank1 rank1 rank1 rank2 rank2 rank2"
      "rank3 rank3 rank4 rank4 rank5 rank5" !important;
  }
  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2) { aspect-ratio: 1.62 / 1 !important; }
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) { aspect-ratio: 1 / 1 !important; }
}

@media (max-width: 860px) {
  .photo-wall {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-areas:
      "rank1 rank1 rank1 rank2 rank2 rank2"
      "rank3 rank3 rank4 rank4 rank5 rank5" !important;
    gap: 10px !important;
  }
  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2) { aspect-ratio: 1.62 / 1 !important; }
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) { aspect-ratio: 1 / 1 !important; }
}

/* Only on very small screens, keep the layout intact by letting the whole ranking strip scroll horizontally */
@media (max-width: 640px) {
  .photo-wall {
    grid-template-columns: repeat(6, minmax(110px, 1fr)) !important;
    min-width: 700px;
    overflow-x: auto !important;
    padding-bottom: 8px;
  }
}


/* v60: apply v26-style floating scrollbar for long side menu categories */

/* Keep product/category names from wrapping or being shortened */
.recent-products a,
.fold-menu .sub-links a,
.side-menu .sub-links a {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Sidebar layout: the menu area scrolls, bottom language/BOOTH area stays stable */
.sidebar {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

.side-menu {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-right: 0 !important;
}
.side-menu::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

/* Do not let internal scrollbar reduce menu item width */
.recent-products {
  margin-right: 0 !important;
  padding-right: 0 !important;
}
.side-menu .sub-links {
  padding-right: 0 !important;
}

/* Floating scrollbar layer outside the sidebar/menu, like v26 */
.side-menu-scroll-layer {
  position: fixed !important;
  left: calc(var(--side) + 8px) !important;
  top: 190px;
  width: 8px !important;
  height: 420px;
  pointer-events: none !important;
  z-index: 120 !important;
  opacity: .24;
  transition: opacity .16s ease, background-color .16s ease !important;
}

.sidebar:hover .side-menu-scroll-layer,
.sidebar:focus-within .side-menu-scroll-layer,
.side-menu.is-scrolling + .side-menu-scroll-layer {
  opacity: 1 !important;
}

.side-menu-scroll-thumb {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 8px !important;
  min-height: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 42%, transparent) !important;
  transform: translateY(0);
}

.sidebar:hover .side-menu-scroll-thumb,
.sidebar:focus-within .side-menu-scroll-thumb,
.side-menu.is-scrolling + .side-menu-scroll-layer .side-menu-scroll-thumb {
  background: color-mix(in srgb, var(--muted) 72%, transparent) !important;
}

/* Bottom fixed-control feeling, same as v26 direction */
.sidebar-bottom {
  border-top: 1px solid color-mix(in srgb, var(--pink) 26%, var(--line));
  padding-top: 16px !important;
}

/* Keep fold behavior simple: no extra animation */
.fold-menu summary::before,
.fold-menu .sub-links,
.fold-menu .sub-links a {
  transition: none !important;
  animation: none !important;
}

.more-products {
  margin-top: 8px !important;
  margin-bottom: 42px !important;
}

@media (max-width: 900px) {
  .side-menu {
    overflow: visible !important;
  }
  .side-menu-scroll-layer {
    display: none !important;
  }
}


/* v61: move Monthly Mission above auth area + reduce main page heading sizes */

/* Main page big section titles are intentionally smaller and lighter */
.section-head h2,
.card h2 {
  font-size: clamp(20px, 2.1vw, 26px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.035em !important;
}

/* Connectors Gallery title: still important, but no longer oversized */
.section-head.compact-head h2 {
  font-size: clamp(24px, 2.4vw, 30px) !important;
}

/* Card title spacing after reducing size */
.card h2 {
  margin-bottom: 8px !important;
}

/* Monthly mission is now between Recent Uploads and verification/auth cards */
.mission-section {
  margin-top: 22px !important;
  margin-bottom: 26px !important;
}

/* Keep the mission card compact after the move */
.mission-section .card {
  padding: 24px 28px !important;
}

.mission-section .ticket {
  margin: 18px 0 18px !important;
  padding: 16px !important;
}

.mission-thumbs {
  gap: 12px !important;
}

/* Key generator / verification area comes closer after mission */
.two-col {
  margin-top: 28px !important;
}

@media (max-width: 760px) {
  .section-head h2,
  .card h2 {
    font-size: 21px !important;
  }

  .section-head.compact-head h2 {
    font-size: 24px !important;
  }

  .mission-section .card {
    padding: 22px 20px !important;
  }
}


/* v62: simplify mission header and make mission cards look like Recent Uploads */

/* Remove the large mission title; only eyebrow + text remain */
.mission-section h2 {
  display: none !important;
}
.mission-section .mission-text {
  margin: 0 0 18px !important;
  font-size: 15px !important;
  color: var(--muted) !important;
}

/* Mission card layout should feel like Recent Uploads, but show only 5 cards */
.mission-recent-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 8px !important;
}

.mission-item {
  aspect-ratio: 1 / 1 !important;
}

.mission-item .recent-mini {
  height: 100% !important;
  min-height: 0 !important;
}

/* Monthly mission should not show old label captions under the cards */
.mission-thumbs article span:not(.recent-like) {
  display: none !important;
}

/* Slightly tighter ticket area to match the simplified section */
.mission-section .ticket {
  margin: 0 0 18px !important;
}

/* Mobile handling */
@media (max-width: 900px) {
  .mission-recent-grid {
    grid-template-columns: repeat(5, minmax(100px, 1fr)) !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
  }
  .mission-item {
    min-width: 100px !important;
  }
}


/* v63: unify Reward layout with Community */
.reward-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: 8px !important;
  margin-bottom: 34px !important;
}

.reward-grid a {
  min-height: 122px;
  display: block;
}

.reward-grid strong {
  font-size: 18px;
}

.reward-grid span {
  line-height: 1.55;
}

@media (max-width: 760px) {
  .reward-grid {
    grid-template-columns: 1fr !important;
  }
}


/* v64: reward cards width match community/connectors cards + tighten sidebar spacing */

.reward-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 8px !important;
  margin-bottom: 34px !important;
  align-items: stretch !important;
}

.reward-grid a {
  min-height: 122px;
  display: block;
  width: 100% !important;
  box-sizing: border-box !important;
}

.reward-grid a:nth-child(1) {
  grid-column: 1 / 2 !important;
}
.reward-grid a:nth-child(2) {
  grid-column: 2 / 3 !important;
}

/* On smaller layouts, keep the same visual rhythm as community cards */
@media (max-width: 760px) {
  .reward-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .reward-grid {
    grid-template-columns: 1fr !important;
  }
  .reward-grid a:nth-child(1),
  .reward-grid a:nth-child(2) {
    grid-column: auto !important;
  }
}

/* Sidebar spacing normalization around "more products" and "event" */
.more-products {
  margin-top: 6px !important;
  margin-bottom: 14px !important;
}

.more-products + .menu-title,
.more-products + .menu-row,
.fold-menu + .menu-title,
.fold-menu + .menu-row {
  margin-top: 0 !important;
}

.side-menu .menu-title {
  margin-top: 8px !important;
  margin-bottom: 6px !important;
}

.side-menu .menu-row {
  margin-top: 8px !important;
  margin-bottom: 6px !important;
}

.side-menu .sub-links,
.side-menu .single-sub {
  margin-bottom: 8px !important;
}

.side-menu details.fold-menu {
  margin-bottom: 10px !important;
}

/* Specifically tighten the gap before Event section */
.side-menu .more-products + .menu-title[data-i18n="menuEventTitle"],
.side-menu .more-products + .menu-row {
  margin-top: 0 !important;
}


/* v65: smaller "more products" text + sparkling badge button + fixed theme button hover */

/* Match "더 많은 상품 펼치기" text size closer to the sidebar "전체보기" label */
.more-products summary {
  font-size: 12px !important;
  font-weight: 900 !important;
  color: var(--muted) !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.more-products summary:hover,
.more-products[open] summary {
  color: var(--pink) !important;
}

/* Top action buttons: keep all fixed for a cleaner, consistent feel */
.auth a:hover,
.auth a:focus-visible,
.mode-toggle:hover,
.mode-toggle:focus-visible {
  transform: none !important;
}

/* Badge check button: slightly more playful spacing for emoji prefix/suffix */
.badge-link {
  letter-spacing: -.01em;
}


/* v66: make Monthly Mission heart chips match Recent Uploads exactly */
.mission-recent-grid .recent-like,
.mission-item .recent-like,
.mission-item .like-button {
  left: 10px !important;
  bottom: 10px !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  transform: none !important;
}

.mission-recent-grid .recent-item:hover .recent-like,
.mission-item:hover .recent-like,
.mission-item:focus-visible .recent-like,
.mission-item:focus-within .recent-like {
  transform: scale(1.06) !important;
}

/* Keep mission cards visually aligned with Recent Uploads cards */
.mission-recent-grid .recent-item {
  overflow: hidden;
}


/* v67: make Monthly Mission like chips exactly match Recent Uploads */
.mission-recent-grid .recent-like,
.mission-item .recent-like,
.mission-item .like-button {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  bottom: auto !important;
  right: auto !important;
  z-index: 2 !important;
  padding: 3px 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.86) !important;
  color: var(--pink) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  box-shadow: 0 4px 10px rgba(42, 27, 51, .06) !important;
  min-width: 0 !important;
  width: auto !important;
  transform: none !important;
  transition: none !important;
}

[data-theme="dark"] .mission-recent-grid .recent-like,
[data-theme="dark"] .mission-item .recent-like,
[data-theme="dark"] .mission-item .like-button {
  background: rgba(255,255,255,.90) !important;
  color: #ff67b7 !important;
  border-color: rgba(255,255,255,.95) !important;
}

/* Match Recent Uploads hover behavior: card and image react, not the heart chip itself */
.mission-recent-grid .recent-item:hover,
.mission-recent-grid .recent-item:focus-visible {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 28px rgba(50, 28, 66, .12) !important;
  border-color: color-mix(in srgb, var(--pink) 30%, var(--line)) !important;
}

.mission-recent-grid .recent-item:hover .recent-mini,
.mission-recent-grid .recent-item:focus-visible .recent-mini {
  transform: scale(1.06) !important;
}

/* Cancel old mission-only heart scaling overrides */
.mission-recent-grid .recent-item:hover .recent-like,
.mission-item:hover .recent-like,
.mission-item:focus-visible .recent-like,
.mission-item:focus-within .recent-like {
  transform: none !important;
}


/* v68: Monthly Mission cards should match Recent Uploads cards exactly (show 5 only) */

/* Keep Monthly Mission grid at 5 cards */
.mission-recent-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

/* Use the exact same recent-like appearance */
.mission-recent-grid .recent-like {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 2 !important;
  padding: 3px 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.86) !important;
  color: var(--pink) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  box-shadow: 0 4px 10px rgba(42, 27, 51, .06) !important;
  transform: none !important;
  transition: none !important;
  min-width: 0 !important;
  width: auto !important;
}

[data-theme="dark"] .mission-recent-grid .recent-like {
  background: rgba(255,255,255,.90) !important;
  color: #ff67b7 !important;
}

/* Match Recent Uploads hover behavior exactly */
.mission-recent-grid .recent-item:hover,
.mission-recent-grid .recent-item:focus-visible {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 28px rgba(50, 28, 66, .12) !important;
  border-color: color-mix(in srgb, var(--pink) 30%, var(--line)) !important;
}

.mission-recent-grid .recent-item:hover::after,
.mission-recent-grid .recent-item:focus-visible::after {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.mission-recent-grid .recent-item:hover .recent-mini,
.mission-recent-grid .recent-item:focus-visible .recent-mini {
  transform: scale(1.06) !important;
}

/* Cancel any older mission-only like-chip behavior */
.mission-recent-grid .recent-item:hover .recent-like,
.mission-recent-grid .recent-item:focus-visible .recent-like,
.mission-recent-grid .recent-item:focus-within .recent-like {
  transform: none !important;
}

@media (max-width: 900px) {
  .mission-recent-grid {
    grid-template-columns: repeat(5, minmax(100px, 1fr)) !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
  }
  .mission-recent-grid .recent-item {
    min-width: 100px !important;
  }
}


/* v69: Recent Uploads / Monthly Mission like buttons bottom-left + button hover grow */

/* Place like chips at the bottom-left for both Recent Uploads and Monthly Mission */
#recent-shots .recent-like,
#mission .recent-like {
  top: auto !important;
  bottom: 10px !important;
  left: 10px !important;
  right: auto !important;
  transform: none !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
}

/* Hover/focus effect should enlarge the like button itself, like the earlier behavior */
#recent-shots .recent-like:hover,
#recent-shots .recent-like:focus-visible,
#mission .recent-like:hover,
#mission .recent-like:focus-visible {
  transform: scale(1.08) !important;
  box-shadow: 0 8px 18px rgba(42, 27, 51, .12) !important;
}

/* Keep card hover from moving the heart chip separately */
#recent-shots .recent-item:hover .recent-like,
#recent-shots .recent-item:focus-visible .recent-like,
#mission .recent-item:hover .recent-like,
#mission .recent-item:focus-visible .recent-like,
#mission .recent-item:focus-within .recent-like {
  transform: none !important;
}

/* If the button itself is hovered while the card is also hovered, preserve the enlargement */
#recent-shots .recent-item:hover .recent-like:hover,
#recent-shots .recent-item:focus-visible .recent-like:focus-visible,
#mission .recent-item:hover .recent-like:hover,
#mission .recent-item:focus-visible .recent-like:focus-visible {
  transform: scale(1.08) !important;
}


/* v70: folded rank panel balance + half-transparent folded frame + slow sidebar fold */

/* Folded ranking panel: trim right side a little more so profile/heart feel visually centered */
.photo-wall > .shot .shot-info {
  width: 70px !important;
  border-color: color-mix(in srgb, var(--line) 50%, transparent) !important;
  background: rgba(255,255,255,.52) !important;
}

[data-theme="dark"] .photo-wall > .shot .shot-info {
  background: rgba(34,29,41,.48) !important;
  border-color: color-mix(in srgb, var(--line) 45%, transparent) !important;
}

/* Keep the opened state clearer and full-width */
.photo-wall > .shot:hover .shot-info,
.photo-wall > .shot:focus-visible .shot-info,
.photo-wall > .shot:focus-within .shot-info {
  width: calc(100% - 28px) !important;
  background: rgba(255,255,255,.78) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .photo-wall > .shot:hover .shot-info,
[data-theme="dark"] .photo-wall > .shot:focus-visible .shot-info,
[data-theme="dark"] .photo-wall > .shot:focus-within .shot-info {
  background: rgba(34,29,41,.78) !important;
  border-color: var(--line) !important;
}

/* Slightly pull the profile/heart block left to match the narrower folded panel */
.photo-wall > .shot .shot-thumb {
  left: 11px !important;
}

.photo-wall > .shot .shot-copy .like-button {
  left: 8px !important;
}

.photo-wall > .shot:hover .shot-thumb,
.photo-wall > .shot:focus-visible .shot-thumb,
.photo-wall > .shot:focus-within .shot-thumb {
  left: 14px !important;
}

.photo-wall > .shot:hover .shot-copy .like-button,
.photo-wall > .shot:focus-visible .shot-copy .like-button,
.photo-wall > .shot:focus-within .shot-copy .like-button {
  left: 14px !important;
}

/* Sidebar "more products" slow fold animation */
.fold-menu.more-products .sub-links {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden !important;
  transform: translateY(-6px);
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  transition:
    max-height .48s cubic-bezier(.22,.8,.25,1),
    opacity .32s ease,
    transform .32s ease,
    padding-top .32s ease,
    margin-bottom .32s ease !important;
  will-change: max-height, opacity, transform;
}

.fold-menu.more-products.is-open .sub-links {
  opacity: 1;
  transform: translateY(0);
  padding-top: 4px !important;
  margin-bottom: 10px !important;
}

.fold-menu.more-products summary::before {
  transition: transform .28s ease !important;
}

.fold-menu.more-products.is-open summary::before {
  transform: rotate(90deg) !important;
}

/* gently fade/slide each child when opened */
.fold-menu.more-products .sub-links a {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .24s ease, transform .24s ease, background-color .18s ease, color .18s ease !important;
}

.fold-menu.more-products.is-open .sub-links a {
  opacity: 1;
  transform: translateY(0);
}

.fold-menu.more-products.is-open .sub-links a:nth-child(1) { transition-delay: .06s; }
.fold-menu.more-products.is-open .sub-links a:nth-child(2) { transition-delay: .10s; }
.fold-menu.more-products.is-open .sub-links a:nth-child(3) { transition-delay: .14s; }
.fold-menu.more-products.is-open .sub-links a:nth-child(4) { transition-delay: .18s; }
.fold-menu.more-products.is-open .sub-links a:nth-child(5) { transition-delay: .22s; }

@media (max-width: 860px) {
  .photo-wall > .shot .shot-info {
    width: 68px !important;
  }
  .photo-wall > .shot .shot-thumb {
    left: 10px !important;
  }
  .photo-wall > .shot .shot-copy .like-button {
    left: 7px !important;
  }
}


/* v71: make expanded "more products" list spacing match the main gallery list */
.fold-menu.more-products .sub-links {
  margin: 0 0 14px 10px !important;
  padding-left: 22px !important;
  border-left: 2px solid color-mix(in srgb, var(--pink) 42%, transparent) !important;
}

.fold-menu.more-products .sub-links a {
  display: block !important;
  padding: 10px 8px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  border-radius: 16px !important;
}

.fold-menu.more-products .sub-links a::before {
  content: none !important;
}

.fold-menu.more-products.is-open .sub-links {
  padding-top: 0 !important;
  margin-bottom: 14px !important;
}


/* v72: ranking profile thumb hover + tighter folded more-products spacing */

/* ranking profile thumbnail can be clicked to open profile view */
.photo-wall > .shot .shot-thumb {
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, left .28s ease !important;
}

.photo-wall > .shot .shot-thumb:hover,
.photo-wall > .shot .shot-thumb:focus-visible {
  transform: scale(1.06) !important;
  box-shadow: 0 10px 24px rgba(52, 34, 61, .18) !important;
}

/* keep hover growth even when the ranking card itself is not opened yet */
.photo-wall > .shot:hover .shot-thumb:hover,
.photo-wall > .shot:focus-visible .shot-thumb:focus-visible,
.photo-wall > .shot:focus-within .shot-thumb:focus-visible {
  transform: scale(1.06) !important;
}

/* Normalize “more products” line spacing to match the top recent-products list more closely */
.fold-menu.more-products .sub-links {
  margin: 0 0 14px 10px !important;
  padding: 0 0 0 22px !important;
  border-left: 2px solid color-mix(in srgb, var(--pink) 42%, transparent) !important;
  line-height: normal !important;
}

.fold-menu.more-products .sub-links a {
  display: block !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  border-radius: 16px !important;
}

.fold-menu.more-products .sub-links a + a {
  margin-top: 0 !important;
}

.fold-menu.more-products .sub-links a::before {
  content: none !important;
}

.fold-menu.more-products.is-open .sub-links {
  padding-top: 0 !important;
  margin-bottom: 14px !important;
}

/* ensure animated container doesn't add extra vertical spacing between items */
.fold-menu.more-products .sub-links a {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .24s ease, transform .24s ease, background-color .18s ease, color .18s ease !important;
}
.fold-menu.more-products.is-open .sub-links a {
  opacity: 1;
  transform: translateY(0);
}


/* v73: clickable / draggable floating sidebar scrollbar */

/* Make the custom floating scrollbar interactive on desktop */
.side-menu-scroll-layer {
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 300 !important;
  width: 12px !important;
  left: calc(var(--side) + 6px) !important;
}

.side-menu-scroll-thumb {
  width: 12px !important;
  cursor: grab;
  touch-action: none;
  transition: background-color .14s ease, opacity .14s ease;
}

.side-menu-scroll-thumb:active,
.side-menu-scroll-layer.is-dragging .side-menu-scroll-thumb {
  cursor: grabbing;
  background: color-mix(in srgb, var(--muted) 90%, transparent) !important;
}

/* On mobile, hide the custom scrollbar and use normal touch scrolling */
@media (max-width: 900px) {
  .side-menu-scroll-layer {
    display: none !important;
    pointer-events: none !important;
  }

  .sidebar.open {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar.open .side-menu {
    overflow-y: visible !important;
  }
}


/* v75: based on v73. Keep original wide visible scrollbar, but reduce opacity only when hovering the scrollbar itself */

/* Reset to v73-style visible width */
.side-menu-scroll-layer {
  width: 12px !important;
  opacity: .72 !important;
}

.side-menu-scroll-thumb {
  width: 12px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  opacity: 1 !important;
}

/* Do not change opacity just from hovering the whole sidebar */
.sidebar:hover .side-menu-scroll-layer,
.sidebar:focus-within .side-menu-scroll-layer,
.side-menu.is-scrolling + .side-menu-scroll-layer {
  opacity: .72 !important;
}

/* Only when hovering the scrollbar area itself, make it about half transparent */
.side-menu-scroll-layer:hover {
  opacity: .5 !important;
}

.side-menu-scroll-layer:hover .side-menu-scroll-thumb {
  opacity: .55 !important;
}

/* Dragging should remain visible enough */
.side-menu-scroll-layer.is-dragging {
  opacity: .7 !important;
}

.side-menu-scroll-layer.is-dragging .side-menu-scroll-thumb {
  opacity: .75 !important;
}


/* v76: sidebar floating scrollbar opacity tweak */
.side-menu-scroll-layer {
  opacity: .2 !important;
}

.side-menu-scroll-thumb {
  opacity: 1 !important;
}

.sidebar:hover .side-menu-scroll-layer,
.sidebar:focus-within .side-menu-scroll-layer,
.side-menu.is-scrolling + .side-menu-scroll-layer {
  opacity: .2 !important;
}

.side-menu-scroll-layer:hover {
  opacity: .5 !important;
}

.side-menu-scroll-layer:hover .side-menu-scroll-thumb {
  opacity: 1 !important;
}

.side-menu-scroll-layer.is-dragging {
  opacity: .5 !important;
}

.side-menu-scroll-layer.is-dragging .side-menu-scroll-thumb {
  opacity: 1 !important;
}


/* v77: floating sidebar scrollbar opacity
   - default: 20%
   - only when the mouse is directly over the scrollbar bar area: 70%
*/
.side-menu-scroll-layer {
  opacity: .2 !important;
}

.side-menu-scroll-thumb {
  opacity: 1 !important;
}

/* Do not brighten it just because the whole sidebar is hovered or scrolling */
.sidebar:hover .side-menu-scroll-layer,
.sidebar:focus-within .side-menu-scroll-layer,
.side-menu.is-scrolling + .side-menu-scroll-layer {
  opacity: .2 !important;
}

/* Only when the cursor is directly on the scrollbar bar/click area */
.side-menu-scroll-layer:hover,
.side-menu-scroll-layer:focus-within {
  opacity: .7 !important;
}

.side-menu-scroll-layer:hover .side-menu-scroll-thumb,
.side-menu-scroll-layer:focus-within .side-menu-scroll-thumb {
  opacity: 1 !important;
}

/* While dragging, keep the stronger visibility as well */
.side-menu-scroll-layer.is-dragging {
  opacity: .7 !important;
}

.side-menu-scroll-layer.is-dragging .side-menu-scroll-thumb {
  opacity: 1 !important;
}


/* v78: mobile layout hard fix for actual connectorsplanet.com view */
@media (max-width: 820px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .sidebar {
    width: min(86vw, 292px) !important;
    max-width: 292px !important;
    transform: translateX(-100%) !important;
    transition: transform .22s ease !important;
    z-index: 500 !important;
  }

  .sidebar.open {
    transform: translateX(0) !important;
  }

  .page {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 18px 36px !important;
    overflow-x: hidden !important;
  }

  .topbar {
    position: sticky !important;
    top: 8px !important;
    z-index: 350 !important;
    min-height: auto !important;
    height: auto !important;
    padding: 8px 0 10px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .mobile-menu {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    font-size: 22px !important;
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
    box-shadow: 0 8px 24px rgba(54, 28, 71, .08) !important;
  }

  .auth {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: calc(100% - 58px) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 28px !important;
  }

  .auth a,
  .auth .primary,
  .auth .mode-toggle {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
  }

  .auth .badge-link {
    flex-basis: 100% !important;
    text-align: center !important;
  }

  .mode-toggle {
    width: auto !important;
    min-width: 80px !important;
    height: 42px !important;
  }

  .hero {
    padding: 16px 0 8px !important;
    margin: 0 !important;
    display: block !important;
  }

  .hero-copy,
  .hero-text-row {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-subtitle {
    font-size: 13px !important;
    line-height: 1.45 !important;
    word-break: keep-all !important;
  }

  .hero h1 {
    font-size: clamp(38px, 13vw, 58px) !important;
    line-height: .98 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .hero-text-row p {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    word-break: keep-all !important;
  }

  .section-head,
  .section-head.compact-head {
    display: block !important;
    margin-top: 18px !important;
  }

  .section-head h2,
  .section-head.compact-head h2 {
    font-size: 30px !important;
    line-height: 1.1 !important;
  }

  .photo-wall {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .photo-wall > .shot,
  .photo-wall > .shot.large {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 280px !important;
  }

  .recent-strip,
  .mission-section,
  .card {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .recent-strip-grid,
  .mission-recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow-x: visible !important;
  }

  .recent-strip-grid .recent-item,
  .mission-recent-grid .recent-item {
    min-width: 0 !important;
    width: 100% !important;
    aspect-ratio: 1 / .78 !important;
  }

  .two-col,
  .reward-grid,
  .community-grid,
  .badge-grid,
  .gallery-categories {
    grid-template-columns: 1fr !important;
  }

  .side-menu-scroll-layer {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .page {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .auth {
    max-width: calc(100% - 56px) !important;
    gap: 6px !important;
  }

  .auth a,
  .auth .primary,
  .auth .mode-toggle {
    font-size: 12px !important;
    padding: 9px 12px !important;
  }

  .hero h1 {
    font-size: clamp(34px, 12vw, 48px) !important;
  }

  .recent-strip-grid,
  .mission-recent-grid {
    grid-template-columns: 1fr !important;
  }
}


/* v79: mobile top controls fixed + closable side menu + stable ranking cards */
@media (max-width: 820px) {
  body {
    overflow-x: hidden !important;
  }

  .page {
    margin-left: 0 !important;
    padding-top: 126px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Keep the mobile control area visible while scrolling */
  .topbar {
    position: fixed !important;
    top: 10px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 1200 !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  }

  .mobile-menu {
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 1300 !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    pointer-events: auto;
  }

  .auth {
    position: fixed !important;
    top: 10px !important;
    left: 76px !important;
    right: 14px !important;
    z-index: 1200 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    padding: 7px !important;
    border-radius: 28px !important;
    pointer-events: auto;
  }

  .auth a,
  .auth .primary,
  .auth .mode-toggle {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1 !important;
    padding: 10px 13px !important;
  }

  .auth .badge-link {
    flex-basis: 100% !important;
    text-align: center !important;
  }

  .mode-toggle {
    min-width: 76px !important;
    width: auto !important;
    height: 38px !important;
  }

  /* Sidebar can be opened and closed with the same hamburger button */
  .sidebar {
    z-index: 1000 !important;
    width: min(86vw, 292px) !important;
    max-width: 292px !important;
    transform: translateX(-104%) !important;
    transition: transform .22s ease !important;
    padding-top: 78px !important;
  }

  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 18px 0 42px rgba(49, 31, 58, .18);
  }

  /* The ranking cards should not inherit the desktop 1-2 / 3-4-5 grid on mobile */
  .photo-wall {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    grid-auto-rows: auto !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .photo-wall > .shot,
  .photo-wall > .shot.hero-rank,
  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2),
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 248px !important;
    aspect-ratio: 1.36 / 1 !important;
  }

  .photo-wall > .shot .shot-info {
    width: 70px !important;
  }

  .photo-wall > .shot:hover .shot-info,
  .photo-wall > .shot:focus-visible .shot-info,
  .photo-wall > .shot:focus-within .shot-info {
    width: calc(100% - 28px) !important;
  }

  .hero h1 {
    font-size: clamp(38px, 12vw, 54px) !important;
    line-height: .98 !important;
  }

  .section-head h2,
  .section-head.compact-head h2 {
    font-size: clamp(28px, 8vw, 36px) !important;
  }
}

@media (max-width: 430px) {
  .page {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 132px !important;
  }

  .auth a,
  .auth .primary,
  .auth .mode-toggle {
    font-size: 12px !important;
    padding: 9px 11px !important;
  }

  .photo-wall > .shot,
  .photo-wall > .shot.hero-rank,
  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2),
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    min-height: 232px !important;
    aspect-ratio: 1.25 / 1 !important;
  }
}


/* v80: Pinterest-like ranking layout
   Cards keep their intended size/aspect ratio and wrap to the next line when space is not enough.
   They no longer stretch/shrink just because the viewport width changes. */

/* Reset the older CSS-grid rank layout */
.photo-wall {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 1280px !important;
  min-width: 0 !important;
  overflow: visible !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  grid-auto-rows: auto !important;
}

/* Base fixed card behavior */
.photo-wall > .shot,
.photo-wall > .shot.hero-rank,
.photo-wall > .shot:nth-child(1),
.photo-wall > .shot:nth-child(2),
.photo-wall > .shot:nth-child(3),
.photo-wall > .shot:nth-child(4),
.photo-wall > .shot:nth-child(5) {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* Wide cards: #1 and #2 */
.photo-wall > .shot:nth-child(1),
.photo-wall > .shot:nth-child(2) {
  flex-basis: 430px !important;
  width: 430px !important;
  aspect-ratio: 1.55 / 1 !important;
}

/* Square cards: #3, #4, #5 */
.photo-wall > .shot:nth-child(3),
.photo-wall > .shot:nth-child(4),
.photo-wall > .shot:nth-child(5) {
  flex-basis: 286px !important;
  width: 286px !important;
  aspect-ratio: 1 / 1 !important;
}

/* Width breakpoints only change wrapping capacity, not the card design */
@media (max-width: 1180px) {
  .photo-wall {
    gap: 16px !important;
  }

  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2) {
    flex-basis: 400px !important;
    width: 400px !important;
  }

  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    flex-basis: 260px !important;
    width: 260px !important;
  }
}

/* Tablet/mobile: when a card is wider than the screen, only then it becomes full width */
@media (max-width: 820px) {
  .photo-wall {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2) {
    flex-basis: min(100%, 400px) !important;
    width: min(100%, 400px) !important;
    aspect-ratio: 1.55 / 1 !important;
  }

  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    flex-basis: min(100%, 260px) !important;
    width: min(100%, 260px) !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Very narrow phones: prevent horizontal overflow but keep the same aspect types */
@media (max-width: 430px) {
  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2),
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2) {
    aspect-ratio: 1.55 / 1 !important;
  }

  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    aspect-ratio: 1 / 1 !important;
  }
}


/* v81: mixed thumbnail examples for ranking cards
   Pinterest-like wrap layout with vertical / wide / square examples. */

/* ranking wall keeps natural wrapping */
.photo-wall {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  grid-auto-rows: auto !important;
}

/* reset all rank card placement */
.photo-wall > .shot,
.photo-wall > .shot.hero-rank,
.photo-wall > .shot:nth-child(1),
.photo-wall > .shot:nth-child(2),
.photo-wall > .shot:nth-child(3),
.photo-wall > .shot:nth-child(4),
.photo-wall > .shot:nth-child(5) {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* #1: vertical portrait example */
.photo-wall > .shot:nth-child(1) {
  flex-basis: 268px !important;
  width: 268px !important;
  aspect-ratio: 3 / 4.15 !important;
}

/* #2: wide landscape example */
.photo-wall > .shot:nth-child(2) {
  flex-basis: 520px !important;
  width: 520px !important;
  aspect-ratio: 1.72 / 1 !important;
}

/* #3: square example */
.photo-wall > .shot:nth-child(3) {
  flex-basis: 286px !important;
  width: 286px !important;
  aspect-ratio: 1 / 1 !important;
}

/* #4: medium wide example */
.photo-wall > .shot:nth-child(4) {
  flex-basis: 360px !important;
  width: 360px !important;
  aspect-ratio: 1.28 / 1 !important;
}

/* #5: vertical portrait example */
.photo-wall > .shot:nth-child(5) {
  flex-basis: 260px !important;
  width: 260px !important;
  aspect-ratio: 3 / 4.35 !important;
}

/* make fake thumbnail backgrounds feel more like mixed image examples */
.photo-wall > .shot:nth-child(1) .shot-img,
.photo-wall > .shot:nth-child(5) .shot-img {
  background-size: 150% 112% !important;
  background-position: center top !important;
}

.photo-wall > .shot:nth-child(2) .shot-img {
  background-size: 118% 118% !important;
  background-position: center center !important;
}

.photo-wall > .shot:nth-child(3) .shot-img {
  background-size: 132% 132% !important;
  background-position: center center !important;
}

.photo-wall > .shot:nth-child(4) .shot-img {
  background-size: 125% 125% !important;
  background-position: center center !important;
}

/* keep folded profile chip usable on narrow vertical cards */
.photo-wall > .shot:nth-child(1) .shot-info,
.photo-wall > .shot:nth-child(5) .shot-info {
  width: 70px !important;
  min-height: 112px !important;
}

.photo-wall > .shot:nth-child(1):hover .shot-info,
.photo-wall > .shot:nth-child(1):focus-visible .shot-info,
.photo-wall > .shot:nth-child(1):focus-within .shot-info,
.photo-wall > .shot:nth-child(5):hover .shot-info,
.photo-wall > .shot:nth-child(5):focus-visible .shot-info,
.photo-wall > .shot:nth-child(5):focus-within .shot-info {
  width: calc(100% - 28px) !important;
}

/* responsive: keep card type, only reduce fixed widths when needed */
@media (max-width: 1180px) {
  .photo-wall > .shot:nth-child(1) {
    flex-basis: 248px !important;
    width: 248px !important;
  }

  .photo-wall > .shot:nth-child(2) {
    flex-basis: 470px !important;
    width: 470px !important;
  }

  .photo-wall > .shot:nth-child(3) {
    flex-basis: 250px !important;
    width: 250px !important;
  }

  .photo-wall > .shot:nth-child(4) {
    flex-basis: 330px !important;
    width: 330px !important;
  }

  .photo-wall > .shot:nth-child(5) {
    flex-basis: 240px !important;
    width: 240px !important;
  }
}

@media (max-width: 820px) {
  .photo-wall {
    gap: 14px !important;
  }

  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(5) {
    flex-basis: min(100%, 260px) !important;
    width: min(100%, 260px) !important;
    aspect-ratio: 3 / 4.15 !important;
  }

  .photo-wall > .shot:nth-child(2) {
    flex-basis: min(100%, 430px) !important;
    width: min(100%, 430px) !important;
    aspect-ratio: 1.72 / 1 !important;
  }

  .photo-wall > .shot:nth-child(3) {
    flex-basis: min(100%, 260px) !important;
    width: min(100%, 260px) !important;
    aspect-ratio: 1 / 1 !important;
  }

  .photo-wall > .shot:nth-child(4) {
    flex-basis: min(100%, 360px) !important;
    width: min(100%, 360px) !important;
    aspect-ratio: 1.28 / 1 !important;
  }
}

@media (max-width: 430px) {
  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2),
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(5) {
    aspect-ratio: 3 / 4.05 !important;
  }

  .photo-wall > .shot:nth-child(2) {
    aspect-ratio: 1.72 / 1 !important;
  }

  .photo-wall > .shot:nth-child(3) {
    aspect-ratio: 1 / 1 !important;
  }

  .photo-wall > .shot:nth-child(4) {
    aspect-ratio: 1.28 / 1 !important;
  }
}


/* v82: keep #3 off the first row even when there is extra width.
   Mixed aspect ratios remain, but layout is explicitly:
   row 1 = #1 + #2
   row 2 = #3 + #4 + #5 */

.photo-wall {
  display: grid !important;
  grid-template-columns: 268px minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 18px !important;
  align-items: start !important;
  justify-content: start !important;
}

/* wipe the flex behavior from v81 */
.photo-wall > .shot,
.photo-wall > .shot.hero-rank,
.photo-wall > .shot:nth-child(1),
.photo-wall > .shot:nth-child(2),
.photo-wall > .shot:nth-child(3),
.photo-wall > .shot:nth-child(4),
.photo-wall > .shot:nth-child(5) {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
}

/* explicit placement */
.photo-wall > .shot:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  aspect-ratio: 3 / 4.15 !important;
}

.photo-wall > .shot:nth-child(2) {
  grid-column: 2 / 4 !important;
  grid-row: 1 !important;
  aspect-ratio: 1.72 / 1 !important;
}

.photo-wall > .shot:nth-child(3) {
  grid-column: 1 !important;
  grid-row: 2 !important;
  aspect-ratio: 1 / 1 !important;
}

.photo-wall > .shot:nth-child(4) {
  grid-column: 2 !important;
  grid-row: 2 !important;
  aspect-ratio: 1.28 / 1 !important;
}

.photo-wall > .shot:nth-child(5) {
  grid-column: 3 !important;
  grid-row: 2 !important;
  aspect-ratio: 3 / 4.35 !important;
}

/* keep the more portrait feeling for 1 and 5 */
.photo-wall > .shot:nth-child(1) .shot-img,
.photo-wall > .shot:nth-child(5) .shot-img {
  background-size: 150% 112% !important;
  background-position: center top !important;
}

.photo-wall > .shot:nth-child(2) .shot-img {
  background-size: 118% 118% !important;
  background-position: center center !important;
}

.photo-wall > .shot:nth-child(3) .shot-img {
  background-size: 132% 132% !important;
  background-position: center center !important;
}

.photo-wall > .shot:nth-child(4) .shot-img {
  background-size: 125% 125% !important;
  background-position: center center !important;
}

/* responsive steps */
@media (max-width: 1220px) {
  .photo-wall {
    grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 980px) {
  .photo-wall {
    grid-template-columns: 1fr 1fr !important;
  }

  .photo-wall > .shot:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .photo-wall > .shot:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    aspect-ratio: 1.28 / 1 !important;
  }

  .photo-wall > .shot:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .photo-wall > .shot:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    aspect-ratio: 1 / 1 !important;
  }

  .photo-wall > .shot:nth-child(5) {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    aspect-ratio: 1.72 / 1 !important;
  }
}

@media (max-width: 640px) {
  .photo-wall {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2),
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    grid-column: 1 !important;
  }

  .photo-wall > .shot:nth-child(1) { grid-row: 1 !important; aspect-ratio: 3 / 4.05 !important; }
  .photo-wall > .shot:nth-child(2) { grid-row: 2 !important; aspect-ratio: 1.72 / 1 !important; }
  .photo-wall > .shot:nth-child(3) { grid-row: 3 !important; aspect-ratio: 1 / 1 !important; }
  .photo-wall > .shot:nth-child(4) { grid-row: 4 !important; aspect-ratio: 1.28 / 1 !important; }
  .photo-wall > .shot:nth-child(5) { grid-row: 5 !important; aspect-ratio: 3 / 4.2 !important; }
}


/* v83: Pinterest-like fixed card sizes
   Cards no longer grow with the container width.
   The layout reflows/wraps instead of resizing cards too much. */

.photo-wall {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 1280px !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  grid-auto-rows: auto !important;
  overflow: visible !important;
}

/* Reset all older grid/flex growth rules */
.photo-wall > .shot,
.photo-wall > .shot.hero-rank,
.photo-wall > .shot:nth-child(1),
.photo-wall > .shot:nth-child(2),
.photo-wall > .shot:nth-child(3),
.photo-wall > .shot:nth-child(4),
.photo-wall > .shot:nth-child(5) {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Fixed card size types */
.photo-wall > .shot:nth-child(1) {
  width: 280px !important;
  flex-basis: 280px !important;
  aspect-ratio: 3 / 4.15 !important;
}

.photo-wall > .shot:nth-child(2) {
  width: 520px !important;
  flex-basis: 520px !important;
  aspect-ratio: 1.72 / 1 !important;
}

.photo-wall > .shot:nth-child(3) {
  width: 286px !important;
  flex-basis: 286px !important;
  aspect-ratio: 1 / 1 !important;
  break-before: always;
}

.photo-wall > .shot:nth-child(4) {
  width: 330px !important;
  flex-basis: 330px !important;
  aspect-ratio: 1.28 / 1 !important;
}

.photo-wall > .shot:nth-child(5) {
  width: 260px !important;
  flex-basis: 260px !important;
  aspect-ratio: 3 / 4.35 !important;
}

/* Force 3rd card to start a new line after #1 and #2 on wide screens */
.photo-wall > .shot:nth-child(3)::before {
  content: "";
}

/* More stable fake image crop examples */
.photo-wall > .shot:nth-child(1) .shot-img,
.photo-wall > .shot:nth-child(5) .shot-img {
  background-size: 145% 112% !important;
  background-position: center top !important;
}

.photo-wall > .shot:nth-child(2) .shot-img {
  background-size: 118% 118% !important;
  background-position: center center !important;
}

.photo-wall > .shot:nth-child(3) .shot-img {
  background-size: 132% 132% !important;
  background-position: center center !important;
}

.photo-wall > .shot:nth-child(4) .shot-img {
  background-size: 124% 124% !important;
  background-position: center center !important;
}

/* On medium screens, reduce card sizes slightly but keep the type balance */
@media (max-width: 1180px) {
  .photo-wall {
    gap: 16px !important;
  }

  .photo-wall > .shot:nth-child(1) {
    width: 250px !important;
    flex-basis: 250px !important;
  }

  .photo-wall > .shot:nth-child(2) {
    width: 460px !important;
    flex-basis: 460px !important;
  }

  .photo-wall > .shot:nth-child(3) {
    width: 250px !important;
    flex-basis: 250px !important;
  }

  .photo-wall > .shot:nth-child(4) {
    width: 310px !important;
    flex-basis: 310px !important;
  }

  .photo-wall > .shot:nth-child(5) {
    width: 240px !important;
    flex-basis: 240px !important;
  }
}

/* Tablet: cards wrap naturally. Wide cards no longer become huge. */
@media (max-width: 820px) {
  .photo-wall {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(5) {
    width: min(100%, 260px) !important;
    flex-basis: min(100%, 260px) !important;
  }

  .photo-wall > .shot:nth-child(2) {
    width: min(100%, 430px) !important;
    flex-basis: min(100%, 430px) !important;
  }

  .photo-wall > .shot:nth-child(3) {
    width: min(100%, 260px) !important;
    flex-basis: min(100%, 260px) !important;
  }

  .photo-wall > .shot:nth-child(4) {
    width: min(100%, 330px) !important;
    flex-basis: min(100%, 330px) !important;
  }
}

/* Phone: only here cards become full-width to avoid horizontal overflow */
@media (max-width: 430px) {
  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2),
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  .photo-wall > .shot:nth-child(1) { aspect-ratio: 3 / 4.05 !important; }
  .photo-wall > .shot:nth-child(2) { aspect-ratio: 1.72 / 1 !important; }
  .photo-wall > .shot:nth-child(3) { aspect-ratio: 1 / 1 !important; }
  .photo-wall > .shot:nth-child(4) { aspect-ratio: 1.28 / 1 !important; }
  .photo-wall > .shot:nth-child(5) { aspect-ratio: 3 / 4.2 !important; }
}


/* v84: mobile sidebar stability fixes
   - sidebar menu scroll area no longer overlaps language buttons
   - mobile menu content scroll works with touch drag
   - top auth area no longer covers sidebar while it is open */
@media (max-width: 820px) {
  html, body {
    overflow-x: hidden !important;
  }

  body.sidebar-open-mobile {
    overflow: hidden !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: min(86vw, 292px) !important;
    max-width: 292px !important;
    padding: 78px 0 14px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1450 !important;
    overscroll-behavior: contain !important;
  }

  .sidebar.open {
    transform: translateX(0) !important;
  }

  .side-menu {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding: 0 24px 12px !important;
    margin: 0 !important;
    scrollbar-width: none !important;
  }

  .side-menu::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .side-menu-scroll-layer {
    display: none !important;
  }

  .sidebar-bottom {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
    padding: 14px 24px 0 !important;
    background: var(--card) !important;
    border-top: 1px solid color-mix(in srgb, var(--pink) 26%, var(--line)) !important;
  }

  .lang-switch,
  .booth-link {
    position: relative !important;
    z-index: 2 !important;
  }

  .topbar {
    position: fixed !important;
    top: 10px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 1200 !important;
  }

  .mobile-menu {
    z-index: 1600 !important;
  }

  .auth {
    z-index: 1200 !important;
    transition: opacity .18s ease, visibility .18s ease !important;
  }

  body.sidebar-open-mobile .auth {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.sidebar-open-mobile .page::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(37, 24, 43, 0.18);
    z-index: 900;
    pointer-events: auto;
  }

  .brand,
  .side-action-buttons {
    padding-left: 24px !important;
    padding-right: 24px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .side-action-buttons {
    margin-bottom: 8px !important;
  }

  /* tighten menu spacing so the scroll area fits above the fixed bottom zone */
  .menu-row,
  .menu-title,
  .sub-links,
  .recent-products,
  .fold-menu,
  .single-sub {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* v85: mobile drawer close button visibility + bottom safe spacing */
@media (max-width: 820px) {
  /* The close button must be above the drawer, not hidden behind it */
  .topbar {
    z-index: 2200 !important;
  }

  .mobile-menu {
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 2400 !important;
    pointer-events: auto !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid color-mix(in srgb, var(--pink) 24%, var(--line)) !important;
    color: var(--text) !important;
    box-shadow: 0 10px 28px rgba(48, 29, 63, .14) !important;
    backdrop-filter: blur(12px);
  }

  body.sidebar-open-mobile .mobile-menu {
    display: inline-grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  [data-theme="dark"] .mobile-menu {
    background: rgba(43,34,49,.92) !important;
  }

  /* Drawer must fill the viewport and include enough bottom padding for BOOTH */
  .sidebar {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    background: color-mix(in srgb, var(--card) 96%, #fff) !important;
  }

  .sidebar-bottom {
    padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
    background: color-mix(in srgb, var(--card) 98%, #fff) !important;
  }

  .booth-link {
    margin-bottom: 0 !important;
  }

  /* Make sure the menu scroll area stops before the fixed bottom controls */
  .side-menu {
    padding-bottom: 18px !important;
  }
}


/* v86: fill the mobile sidebar bottom cut area with the same white/card background */
@media (max-width: 820px) {
  .sidebar {
    background: #fff !important;
  }

  [data-theme="dark"] .sidebar {
    background: var(--card) !important;
  }

  .sidebar::after {
    content: "";
    position: fixed;
    left: 0;
    bottom: 0;
    width: min(86vw, 292px);
    height: max(28px, env(safe-area-inset-bottom));
    background: #fff;
    z-index: 1;
    pointer-events: none;
  }

  [data-theme="dark"] .sidebar::after {
    background: var(--card);
  }

  .sidebar-bottom {
    background: #fff !important;
    padding-bottom: 22px !important;
    position: relative !important;
    z-index: 3 !important;
  }

  [data-theme="dark"] .sidebar-bottom {
    background: var(--card) !important;
  }

  .booth-link,
  .lang-switch {
    position: relative !important;
    z-index: 4 !important;
  }
}


/* v88: revert to v86 mobile header layout, reduce the empty left gap */
@media (max-width: 820px) {
  /* keep the v86 order:
     badge row on top, login / signup / light-dark row below */
  .auth {
    top: 10px !important;
    left: 70px !important;
    right: 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px !important;
    border-radius: 28px !important;
  }

  .auth .badge-link {
    flex-basis: 100% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .auth a[data-i18n="login"],
  .auth .primary,
  .auth .mode-toggle {
    flex: 0 0 auto !important;
    margin-top: 6px !important;
  }

  .mobile-menu {
    left: 14px !important;
  }
}

@media (max-width: 430px) {
  .auth {
    left: 70px !important;
    right: 14px !important;
  }
}


/* v89: mobile header box should sit neatly next to the menu button
   without the left side jutting out behind it */
@media (max-width: 820px) {
  .auth {
    left: 86px !important;
    right: 14px !important;
  }
}

@media (max-width: 430px) {
  .auth {
    left: 86px !important;
    right: 14px !important;
  }
}


/* v90: mobile header compact badge + robust drawer scroll lock */
@media (max-width: 820px) {
  /* Header should not stretch left behind the menu button.
     It hugs the right side and keeps the original order:
     top = badge, bottom = login / signup / mode. */
  .auth {
    top: 16px !important;
    left: auto !important;
    right: 14px !important;
    width: 268px !important;
    max-width: calc(100vw - 104px) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px !important;
    border-radius: 28px !important;
    box-sizing: border-box !important;
  }

  .auth .badge-link {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .auth a[data-i18n="login"],
  .auth .primary,
  .auth .mode-toggle {
    flex: 0 0 auto !important;
  }

  .auth a[data-i18n="login"] {
    min-width: 70px !important;
    text-align: center !important;
  }

  .auth .primary {
    min-width: 86px !important;
    text-align: center !important;
  }

  .auth .mode-toggle {
    min-width: 74px !important;
    width: 74px !important;
  }

  .mobile-menu {
    top: 16px !important;
    left: 14px !important;
  }

  /* When the drawer is open, prevent the page behind it from scrolling.
     This avoids the sidebar appearing to move up and exposing the bottom. */
  body.sidebar-open-mobile {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }

  body.sidebar-open-mobile .sidebar,
  body.sidebar-open-mobile .side-menu {
    touch-action: pan-y !important;
  }

  /* Make the drawer visually fill past the bottom, so no background leaks out. */
  .sidebar {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding-bottom: 0 !important;
    background: #fff !important;
  }

  [data-theme="dark"] .sidebar {
    background: var(--card) !important;
  }

  .sidebar-bottom {
    padding-bottom: 42px !important;
    background: #fff !important;
  }

  [data-theme="dark"] .sidebar-bottom {
    background: var(--card) !important;
  }

  .sidebar::after {
    height: 64px !important;
    background: #fff !important;
  }

  [data-theme="dark"] .sidebar::after {
    background: var(--card) !important;
  }
}

@media (max-width: 430px) {
  .auth {
    top: 16px !important;
    right: 14px !important;
    width: 268px !important;
    max-width: calc(100vw - 104px) !important;
  }

  .auth .badge-link {
    font-size: 12px !important;
  }
}

/* v92: mobile auth controls collapse into a small toggle button
   - initial mobile header stays compact like the hamburger menu
   - badge / login / signup / light-dark controls open as a floating panel */
.mobile-auth-toggle {
  display: none;
}

@media (max-width: 820px) {
  .page {
    padding-top: 84px !important;
  }

  .topbar {
    position: fixed !important;
    top: 10px !important;
    left: 14px !important;
    right: 14px !important;
    height: 56px !important;
    min-height: 56px !important;
    z-index: 2200 !important;
    pointer-events: none !important;
  }

  .mobile-menu {
    top: 16px !important;
    left: 14px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .mobile-auth-toggle {
    position: fixed !important;
    top: 16px !important;
    right: 14px !important;
    z-index: 2300 !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    border: 1px solid color-mix(in srgb, var(--pink) 24%, var(--line)) !important;
    background: rgba(255,255,255,.92) !important;
    color: var(--text) !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 10px 28px rgba(48, 29, 63, .14) !important;
    backdrop-filter: blur(12px) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  [data-theme="dark"] .mobile-auth-toggle {
    background: rgba(43,34,49,.92) !important;
  }

  .auth {
    top: 76px !important;
    left: auto !important;
    right: 14px !important;
    width: 268px !important;
    max-width: calc(100vw - 28px) !important;
    z-index: 2250 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(.98) !important;
    transform-origin: top right !important;
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease !important;
  }

  body.auth-open-mobile .auth {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  body.sidebar-open-mobile .auth,
  body.sidebar-open-mobile .mobile-auth-toggle {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .auth .badge-link {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .auth a[data-i18n="login"],
  .auth .primary,
  .auth .mode-toggle {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .page {
    padding-top: 84px !important;
  }

  .auth {
    top: 76px !important;
    right: 14px !important;
    width: min(268px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
  }
}


/* v93: move the mobile auth close button into the expanded panel,
   next to the badge check button. */
.mobile-auth-close {
  display: none;
}

.mobile-auth-break {
  display: none;
}

@media (max-width: 820px) {
  body.auth-open-mobile .mobile-auth-toggle {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-auth-close {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    border: 1px solid color-mix(in srgb, var(--pink) 28%, var(--line)) !important;
    background: rgba(255,255,255,.88) !important;
    color: var(--text) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 8px 20px rgba(48, 29, 63, .10) !important;
    cursor: pointer !important;
  }

  [data-theme="dark"] .mobile-auth-close {
    background: rgba(43,34,49,.88) !important;
  }

  .auth .badge-link {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .auth a[data-i18n="login"] {
    margin-left: 0 !important;
  }
}

@media (max-width: 430px) {
  .mobile-auth-close {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* v93.1: force login/signup/theme controls to start below the badge + close row. */
@media (max-width: 820px) {
  .mobile-auth-break {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 0 !important;
    margin: -7px 0 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .auth a[data-i18n="login"],
  .auth .primary,
  .auth .mode-toggle {
    flex: 0 0 auto !important;
  }
}

/* Keep the auth opener hidden while the mobile sidebar drawer is open. */
@media (max-width: 820px) {
  body.sidebar-open-mobile .mobile-auth-toggle {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* v94: mobile auth panel replaces the sparkle button in the same top-right position.
   - When opened, the sparkle opener disappears.
   - The expanded auth panel starts where the opener was.
   - The close button is smaller and aligned to the badge button height. */
@media (max-width: 820px) {
  body.auth-open-mobile .mobile-auth-toggle {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .auth {
    top: 16px !important;
    left: 76px !important;
    right: 14px !important;
    width: auto !important;
    max-width: none !important;
    overflow: hidden !important;
    transform-origin: top right !important;
  }

  body.auth-open-mobile .auth {
    transform: translateY(0) scale(1) !important;
  }

  .auth .badge-link {
    flex: 0 1 auto !important;
    width: min(248px, calc(100% - 44px)) !important;
    max-width: calc(100% - 44px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    min-height: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  .mobile-auth-close {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    box-shadow: 0 6px 16px rgba(48, 29, 63, .09) !important;
    align-self: center !important;
  }

  .mobile-auth-break {
    margin-top: -5px !important;
  }
}

@media (max-width: 430px) {
  .auth {
    top: 16px !important;
    left: 76px !important;
    right: 14px !important;
    width: auto !important;
    max-width: none !important;
  }

  .mobile-auth-close {
    flex-basis: 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 11px !important;
    font-size: 17px !important;
  }
}


/* v96: align the mobile badge button width with the lower login / signup / mode row. */
@media (max-width: 820px) {
  .auth {
    row-gap: 7px !important;
  }

  .auth .badge-link {
    flex: 0 0 calc(100% - 41px) !important;
    width: calc(100% - 41px) !important;
    max-width: calc(100% - 41px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .mobile-auth-close {
    flex: 0 0 34px !important;
    width: 34px !important;
    justify-self: flex-end !important;
  }

  .auth a[data-i18n="login"],
  .auth .primary {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .auth .mode-toggle {
    flex: 0 0 74px !important;
    width: 74px !important;
    min-width: 74px !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 430px) {
  .auth .badge-link {
    flex-basis: calc(100% - 39px) !important;
    width: calc(100% - 39px) !important;
    max-width: calc(100% - 39px) !important;
  }

  .mobile-auth-close {
    flex-basis: 32px !important;
    width: 32px !important;
  }

  .auth .mode-toggle {
    flex-basis: 72px !important;
    width: 72px !important;
    min-width: 72px !important;
  }
}

/* v97: mobile compact Pinterest ranking layout
   Mobile only: row 1 = #1 + #2, row 2 = #3 + #4 + #5.
   Cards are intentionally smaller so the ranking section can be seen at a glance. */
@media (max-width: 820px) {
  .section-head.compact-head {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .photo-wall {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 9px !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .photo-wall > .shot,
  .photo-wall > .shot.hero-rank,
  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2),
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    flex: none !important;
    grid-row: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .photo-wall > .shot:nth-child(1) {
    grid-column: 1 / span 3 !important;
    grid-row: 1 !important;
    aspect-ratio: 1 / 1.18 !important;
  }

  .photo-wall > .shot:nth-child(2) {
    grid-column: 4 / span 3 !important;
    grid-row: 1 !important;
    aspect-ratio: 1 / 1.18 !important;
  }

  .photo-wall > .shot:nth-child(3) {
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
    aspect-ratio: 1 / 1.08 !important;
  }

  .photo-wall > .shot:nth-child(4) {
    grid-column: 3 / span 2 !important;
    grid-row: 2 !important;
    aspect-ratio: 1 / 1.08 !important;
  }

  .photo-wall > .shot:nth-child(5) {
    grid-column: 5 / span 2 !important;
    grid-row: 2 !important;
    aspect-ratio: 1 / 1.08 !important;
  }

  .photo-wall > .shot .shot-img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  .photo-wall > .shot:nth-child(1) .shot-img,
  .photo-wall > .shot:nth-child(2) .shot-img,
  .photo-wall > .shot:nth-child(5) .shot-img {
    background-size: 145% 112% !important;
    background-position: center top !important;
  }

  .photo-wall > .shot:nth-child(3) .shot-img,
  .photo-wall > .shot:nth-child(4) .shot-img {
    background-size: 132% 132% !important;
    background-position: center center !important;
  }

  .rank-badge {
    top: 6px !important;
    left: 6px !important;
    min-width: 0 !important;
    padding: 4px 7px !important;
    border-radius: 999px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    box-shadow: 0 5px 12px rgba(55, 34, 67, .10) !important;
  }

  .photo-wall > .shot .shot-info,
  .photo-wall > .shot:hover .shot-info,
  .photo-wall > .shot:focus-visible .shot-info,
  .photo-wall > .shot:focus-within .shot-info {
    left: 6px !important;
    right: auto !important;
    bottom: 6px !important;
    top: auto !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 5px !important;
    border-radius: 14px !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
  }

  .photo-wall > .shot .shot-thumb,
  .photo-wall > .shot:hover .shot-thumb,
  .photo-wall > .shot:focus-visible .shot-thumb,
  .photo-wall > .shot:focus-within .shot-thumb {
    position: absolute !important;
    left: 5px !important;
    top: 5px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 10px !important;
    transform: none !important;
  }

  .photo-wall > .shot .shot-copy small,
  .photo-wall > .shot .shot-copy strong {
    display: none !important;
  }

  .photo-wall > .shot .shot-copy .like-button,
  .photo-wall > .shot:hover .shot-copy .like-button,
  .photo-wall > .shot:focus-visible .shot-copy .like-button,
  .photo-wall > .shot:focus-within .shot-copy .like-button {
    position: absolute !important;
    left: 5px !important;
    right: auto !important;
    top: auto !important;
    bottom: -14px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 18px !important;
    padding: 2px 4px !important;
    border-radius: 999px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    transform: none !important;
    z-index: 10 !important;
  }

  .photo-wall > .shot:hover,
  .photo-wall > .shot:focus-visible {
    transform: translateY(-2px) scale(1.01) !important;
  }
}

@media (max-width: 430px) {
  .photo-wall {
    gap: 8px !important;
  }

  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2),
  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .photo-wall > .shot:nth-child(1),
  .photo-wall > .shot:nth-child(2) {
    aspect-ratio: 1 / 1.16 !important;
  }

  .photo-wall > .shot:nth-child(3),
  .photo-wall > .shot:nth-child(4),
  .photo-wall > .shot:nth-child(5) {
    aspect-ratio: 1 / 1.04 !important;
  }

  .rank-badge {
    top: 5px !important;
    left: 5px !important;
    padding: 3px 6px !important;
    font-size: 9px !important;
  }

  .photo-wall > .shot .shot-info,
  .photo-wall > .shot:hover .shot-info,
  .photo-wall > .shot:focus-visible .shot-info,
  .photo-wall > .shot:focus-within .shot-info {
    left: 5px !important;
    bottom: 5px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 4px !important;
    border-radius: 13px !important;
  }

  .photo-wall > .shot .shot-thumb,
  .photo-wall > .shot:hover .shot-thumb,
  .photo-wall > .shot:focus-visible .shot-thumb,
  .photo-wall > .shot:focus-within .shot-thumb {
    left: 4px !important;
    top: 4px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .photo-wall > .shot .shot-copy .like-button,
  .photo-wall > .shot:hover .shot-copy .like-button,
  .photo-wall > .shot:focus-visible .shot-copy .like-button,
  .photo-wall > .shot:focus-within .shot-copy .like-button {
    left: 4px !important;
    bottom: -13px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 17px !important;
    font-size: 8px !important;
  }
}

/* v98: mobile ranking profile/heart stack cleanup
   - Keep profile thumbnails and hearts in the same fixed position on every rank card.
   - Keep the heart button inside the card so it no longer sinks below the thumbnail panel. */
@media (max-width: 820px) {
  .photo-wall > .shot .shot-info,
  .photo-wall > .shot:hover .shot-info,
  .photo-wall > .shot:focus-visible .shot-info,
  .photo-wall > .shot:focus-within .shot-info {
    position: absolute !important;
    left: 6px !important;
    bottom: 6px !important;
    top: auto !important;
    right: auto !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 61px !important;
    min-height: 61px !important;
    max-height: 61px !important;
    padding: 5px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: block !important;
    box-sizing: border-box !important;
    transform: none !important;
    z-index: 8 !important;
  }

  .photo-wall > .shot .shot-copy,
  .photo-wall > .shot:hover .shot-copy,
  .photo-wall > .shot:focus-visible .shot-copy,
  .photo-wall > .shot:focus-within .shot-copy {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .photo-wall > .shot .shot-thumb,
  .photo-wall > .shot:hover .shot-thumb,
  .photo-wall > .shot:focus-visible .shot-thumb,
  .photo-wall > .shot:focus-within .shot-thumb {
    position: absolute !important;
    left: 5px !important;
    top: 5px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
    transform: none !important;
    z-index: 2 !important;
  }

  .photo-wall > .shot .shot-copy .like-button,
  .photo-wall > .shot:hover .shot-copy .like-button,
  .photo-wall > .shot:focus-visible .shot-copy .like-button,
  .photo-wall > .shot:focus-within .shot-copy .like-button {
    position: absolute !important;
    left: 5px !important;
    right: auto !important;
    top: auto !important;
    bottom: 5px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 0 !important;
    line-height: 1 !important;
    transform: none !important;
    z-index: 3 !important;
  }

  .photo-wall > .shot .shot-copy .like-button::before {
    content: "♡" !important;
    font-size: 11px !important;
    line-height: 1 !important;
    color: var(--pink) !important;
    font-weight: 950 !important;
  }

  .photo-wall > .shot .shot-copy .like-button:hover,
  .photo-wall > .shot .shot-copy .like-button:focus-visible {
    transform: scale(1.08) !important;
  }
}

@media (max-width: 430px) {
  .photo-wall > .shot .shot-info,
  .photo-wall > .shot:hover .shot-info,
  .photo-wall > .shot:focus-visible .shot-info,
  .photo-wall > .shot:focus-within .shot-info {
    left: 5px !important;
    bottom: 5px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 57px !important;
    min-height: 57px !important;
    max-height: 57px !important;
    padding: 4px !important;
    border-radius: 13px !important;
  }

  .photo-wall > .shot .shot-thumb,
  .photo-wall > .shot:hover .shot-thumb,
  .photo-wall > .shot:focus-visible .shot-thumb,
  .photo-wall > .shot:focus-within .shot-thumb {
    left: 4px !important;
    top: 4px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 10px !important;
  }

  .photo-wall > .shot .shot-copy .like-button,
  .photo-wall > .shot:hover .shot-copy .like-button,
  .photo-wall > .shot:focus-visible .shot-copy .like-button,
  .photo-wall > .shot:focus-within .shot-copy .like-button {
    left: 4px !important;
    bottom: 4px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
  }

  .photo-wall > .shot .shot-copy .like-button::before {
    font-size: 10.5px !important;
  }
}


/* v99: mobile ranking cards stay closed, and Recent Uploads / Monthly Mission use a denser 2-column mobile grid. */
@media (max-width: 820px) {
  /* Ranking cards: show only the compact profile + heart stack on mobile.
     Remove the expanding/opening feel and the corner arrow. */
  .photo-wall > .shot,
  .photo-wall > .shot:hover,
  .photo-wall > .shot:focus-visible,
  .photo-wall > .shot:focus-within {
    transform: none !important;
  }

  .photo-wall > .shot::after,
  .photo-wall > .shot:hover::after,
  .photo-wall > .shot:focus-visible::after,
  .photo-wall > .shot:focus-within::after {
    display: none !important;
    opacity: 0 !important;
    transform: none !important;
  }

  .photo-wall > .shot .shot-img,
  .photo-wall > .shot:hover .shot-img,
  .photo-wall > .shot:focus-visible .shot-img,
  .photo-wall > .shot:focus-within .shot-img {
    transform: none !important;
  }

  .photo-wall > .shot .shot-info,
  .photo-wall > .shot:hover .shot-info,
  .photo-wall > .shot:focus-visible .shot-info,
  .photo-wall > .shot:focus-within .shot-info {
    transition: none !important;
  }

  /* Recent Uploads / Monthly Mission: keep two columns on mobile instead of one oversized card per row. */
  .recent-strip-grid,
  .mission-recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow-x: visible !important;
  }

  .recent-strip-grid .recent-item,
  .mission-recent-grid .recent-item {
    min-width: 0 !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
  }

  .recent-strip-grid .recent-mini,
  .mission-recent-grid .recent-mini {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: 100% !important;
  }
}

@media (max-width: 430px) {
  .recent-strip-grid,
  .mission-recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .recent-strip-grid .recent-item,
  .mission-recent-grid .recent-item {
    aspect-ratio: 1 / 1 !important;
  }
}