:root {
  --dark-bg: #15171b;
  --mid-bg: #22242a;
  --accent: #ded6c1;
  --primary: #fff;
  --highlight: #cbb26a;
  --fade: rgba(0,0,0,0.6);
  --card-bg: #18191d;
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--dark-bg);
  color: var(--primary);
  font-family: 'Montserrat', Arial, sans-serif;
  min-height: 100%;
}
a {
  color: var(--highlight);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover { color: var(--accent);}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2vw;
}
/* Hero */
.hero {
  position: relative;
  min-height: 60vh;
  background: var(--fade);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
}
.hero-img {
  width: 100vw;
  max-height: 85vh;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.82) contrast(1.07);
  z-index: 1;
  position: absolute;
  left: 0; top: 0; height: 100%; width: 100%;
  transition: filter 0.2s;
}
.hero-content {
  z-index: 2;
  position: relative;
  padding: 2.5rem 1.5rem 2rem 1.5rem;
  background: rgba(20,20,25,0.45);
  border-radius: 1.5rem;
  max-width: 95vw;
  margin: 2vh auto 0 auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.hero-title {
  font-size: 2.8rem;
  letter-spacing: 0.03em;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: bold;
  margin: 0 0 0.5rem 0;
  color: var(--accent);
  text-shadow: 0 4px 24px #111a, 0 1px 2px #000b;
}
.hero-tagline {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  font-style: italic;
  opacity: 0.88;
  color: var(--primary);
}
.hero-slogan {
  margin-top: 0.4em;
  font-size: 1.08rem;
  color: var(--highlight);
  opacity: 0.85;
  line-height: 1.4;
}
.hero-btn {
  display: inline-block;
  background: var(--highlight);
  color: #222;
  border: none;
  font-weight: bold;
  border-radius: 2em;
  padding: 0.7em 2em;
  font-size: 1.07rem;
  margin-top: 2em;
  box-shadow: 0 2px 16px #000b;
  cursor: pointer;
  transition: background 0.22s, color 0.16s, transform 0.18s ease, box-shadow 0.18s ease;
}

.hero-btn:hover { 
  background: var(--accent); 
  color: #111; 
  transform: scale(1.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.hero-banner {
  background-image: url('../img/EchoesLeftUnheard_by_James_Noseworthy_detail.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 48vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-banner .hero-content {
  /* Optional: extra background for readability */
  background: rgba(20,20,25,0.53);
  border-radius: 1.3em;
  padding: 2.5rem 1.5rem 2rem 1.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
@media (max-width: 800px) {
  .hero-banner {
    min-height: 30vh;
    background-position: 60% 50%;
  }
}

/* About James */
.about-section {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: center;
  margin: 5vh 0 3vh 0;
  background: var(--card-bg);
  border-radius: 1.2em;
  box-shadow: 0 2px 24px #0006;
  padding: 3vw 2vw;
}
.about-pic {
  flex: 0 0 180px;
  max-width: 180px;
  border-radius: 50%;
  border: 4px solid var(--mid-bg);
  object-fit: cover;
  box-shadow: 0 4px 18px #000a;
}
.about-bio {
  flex: 1;
  min-width: 220px;
}
.about-bio h2 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--highlight);
}
.about-bio p {
  margin: 0 0 0.5em 0;
  font-size: 1.13rem;
  opacity: 0.96;
}
.about-bio .about-link {
  font-size: 1.01rem;
  color: var(--accent);
}
/* Rhythmic Abstraction */
.section-feature {
  margin: 5vh auto 3vh auto;
  background: linear-gradient(120deg, #1e1e25 40%, #232331 100%);
  padding: 2.5rem 2vw;
  border-radius: 1.3em;
  text-align: center;
  box-shadow: 0 1px 14px #0007;
  max-width: 1000px;
}
.section-feature h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.75rem;
  color: var(--accent);
  margin: 0 0 0.6em 0;
}
.section-feature p {
  font-size: 1.12rem;
  opacity: 0.95;
  margin: 0;
}
/* Gallery */
.gallery-section {
  margin: 7vh 0 4vh 0;
}
.gallery-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.65rem;
  color: var(--highlight);
  margin-bottom: 1.7rem;
  text-align: center;
}
.gallery-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2vw;
}
.painting-card {
  background: var(--card-bg);
  border-radius: 1.15em;
  box-shadow: 0 1px 12px #0007;
  width: 210px;
  margin-bottom: 2vh;
  overflow: hidden;
  transition: transform 0.13s;
  cursor: pointer;
}
.painting-card:hover {
  transform: scale(1.025);
  box-shadow: 0 2px 28px #000b;
}
.painting-img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid var(--mid-bg);
}
.painting-title {
  padding: 1em 1em 0.8em 1em;
  color: var(--primary);
  font-size: 1.13rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.01em;
  background: none;
}
/* Legacy Callout */
.legacy-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5vh auto 2vh auto;
  padding: 1.2em 2vw;
  border-radius: 1em;
  background: linear-gradient(90deg, #22242a 65%, #26293c 100%);
  color: var(--highlight);
  max-width: 680px;
  box-shadow: 0 1px 16px #0005;
}
.legacy-section img {
  height: 54px;
  margin-right: 1.4em;
  border-radius: 100px;
  border: 2px solid var(--mid-bg);
  background: #fff2;
}
.legacy-section .legacy-text {
  font-size: 1.13rem;
  font-weight: 500;
  opacity: 0.93;
}
/* Contact/Social */
.contact-section {
  margin: 5vh 0 1.7vh 0;
  text-align: center;
  padding: 2vw;
  background: var(--card-bg);
  border-radius: 1em;
  box-shadow: 0 1px 12px #0005;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.social-links a {
  display: inline-block;
  margin: 0 1.1em;
  font-size: 1.5rem;
  color: var(--highlight);
  opacity: 0.92;
  transition: color 0.16s, opacity 0.18s;
}
.social-links a:hover { color: var(--accent); opacity: 1;}
.qr-code {
  margin-top: 1em;
  width: 120px;
  border-radius: 0.7em;
  box-shadow: 0 1px 8px #0006;
  background: #fff;
  padding: 8px;
  display: inline-block;
}
/* Footer */
footer {
  text-align: center;
  color: #bbb;
  font-size: 0.95em;
  padding: 2.7em 0 1.7em 0;
  opacity: 0.75;
}
footer img {
  height: 32px; vertical-align: middle; margin-left: 0.7em;
}
/* Mobile */
@media (max-width: 800px) {
  .about-section { flex-direction: column; gap: 1.5em; align-items: flex-start;}
  .about-pic { margin-bottom: 1em;}
  .gallery-row { flex-direction: column; gap: 1.3em;}
  .painting-card { width: 95vw; max-width: 340px; }
  .hero-content { padding: 1.1em 0.7em;}
  .section-feature { padding: 1.2em 0.7em;}
}
@media (max-width: 500px) {
  .hero-title { font-size: 1.57rem;}
  .about-bio h2 { font-size: 1.25rem;}
  .gallery-title { font-size: 1.14rem;}
  .legacy-section { font-size: 0.95rem;}
}

.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}

/* NAVBAR STYLES */
.navbar {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(21, 23, 27, 0.93);
  backdrop-filter: blur(7px);
  box-shadow: 0 2px 18px #0007;
  transition: background 0.2s;
}
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2vw;
  display: flex;
  align-items: center;
  height: 68px;
  justify-content: space-between;
}
.nav-logo {
  display: flex;
  align-items: center;
  color: #fff;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 1.33rem;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.nav-logo img {
  height: 40px;
  margin-right: 0.5em;
  border-radius: 50%;
  background: #fff1;
  border: 1.5px solid #eee2;
  box-shadow: 0 1px 6px #0005;
}

.nav-menu {
  display: flex;
  align-items: center;
  margin: 0; padding: 0;
  list-style: none;
  gap: 2vw;
}
.nav-menu li { margin: 0; }
.nav-menu a {
  color: var(--primary);
  font-size: 1.06rem;
  font-weight: 500;
  text-decoration: none;
  opacity: 0.92;
  padding: 0.3em 0.6em;
  border-radius: 0.5em;
  transition: background 0.14s, color 0.13s;
}
.nav-menu a:hover,
.nav-menu .nav-btn:hover {
  background: var(--highlight);
  color: #232329;
}
.nav-btn {
  background: var(--highlight);
  color: #18191d !important;
  font-weight: 700;
  border-radius: 2em;
  padding: 0.45em 1.3em !important;
  margin-left: 1.5em;
  box-shadow: 0 2px 14px #0005;
}
.nav-btn:hover {
  background: var(--accent) !important;
  color: #111 !important;
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  width: 32px; height: 32px;
  margin-left: 1.2em;
}
.nav-hamburger span {
  background: #fff;
  display: block;
  height: 4px; width: 100%;
  border-radius: 2px;
  margin: 4px 0;
  transition: all 0.25s;
}

/* Hamburger/Responsive */
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav-menu {
	position: fixed;
	top: 68px; right: 0;
	background: rgba(21,23,27,0.98);
	flex-direction: column;
	width: 70vw; max-width: 340px;
	height: 100vh;
	box-shadow: -4px 0 32px #000a;
	align-items: flex-start;
	padding: 2em 1.2em;
	transform: translateX(100%);
	transition: transform 0.3s;
	gap: 1.5em;
	z-index: 200;
  }
  .nav-toggle:checked ~ .nav-menu {
	transform: translateX(0);
  }
  .nav-hamburger { display: flex; }
}
@media (max-width: 600px) {
  .nav-container { padding: 0 1vw;}
  .nav-logo { font-size: 1.03rem;}
}

/* LIGHTBOX STYLES */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(20,22,28,0.96);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.2s;
}
.lightbox.open {
  display: flex;
  animation: fadeIn 0.28s;
}
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
.lightbox-img {
  max-width: 92vw;
  max-height: 75vh;
  margin-bottom: 1.2em;
  border-radius: 1.1em;
  box-shadow: 0 6px 42px #000b;
  background: #222;
  object-fit: contain;
}
.lightbox-close {
  position: absolute;
  top: 2.2vw; right: 3vw;
  font-size: 2.8rem;
  color: var(--highlight);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  z-index: 2;
  transition: color 0.15s;
}
.lightbox-close:hover { color: var(--accent);}
.lightbox-caption {
  color: var(--primary);
  font-size: 1.22rem;
  margin-top: 0.4em;
  text-align: center;
  max-width: 84vw;
  opacity: 0.93;
  letter-spacing: 0.01em;
  font-family: 'Playfair Display', Georgia, serif;
}
@media (max-width: 650px) {
  .lightbox-img { max-height: 54vh;}
  .lightbox-caption { font-size: 1rem;}
}

.hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
}
.hero-imgs {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  z-index: 1;
  overflow: hidden;
}
.hero-img {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  /*transition: opacity 1.8s cubic-bezier(.65,.04,.35,1), transform 21s linear;*/
  /*transition: opacity 2.2s cubic-bezier(.65,.04,.35,1), transform 42s cubic-bezier(.65,.04,.35,1);*/
  transition: opacity 2.2s cubic-bezier(.65,.04,.35,1), transform 12s linear;
  will-change: opacity, transform;
  z-index: 1;
}
.hero-img.active {
  opacity: 1;
  z-index: 2;
  /*animation: heroPanZoom 24s linear alternate;*/
}
@keyframes heroPanZoom {
  0% { transform: scale(1.04) translateY(0); }
  100% { transform: scale(1.09) translateY(-6%); }
}
@media (max-width: 800px) {
  .hero { min-height: 42vh; }
  .hero-imgs, .hero-img { height: 64vw; min-height: 280px;}
}
@media (max-width: 500px) {
  .hero-imgs, .hero-img { min-height: 160px; }
}	
.art-strip-spacer {
  width: 100vw;
  max-width: 100%;
  overflow: hidden;
  margin: 2.3em 0 0.3em 0;
  display: flex;
  justify-content: center;
  background: #111824;
  box-shadow: 0 -2px 18px #0016, 0 4px 28px #0002;
}
.art-strip-spacer img {
  width: 100vw;
  min-width: 100%;
  height: 144px;
  max-height: 17vw;
  object-fit: cover;
  display: block;
  filter: brightness(0.98) contrast(1.07);
}
@media (max-width: 700px) {
  .art-strip-spacer img { height: 72px; }
}

.easel-section {
  text-align: center;
  margin: 5vh auto 3vh auto;
  background: var(--card-bg);
  border-radius: 1.2em;
  box-shadow: 0 2px 24px #0006;
  padding: 2.5rem 0 2.5rem 0;
  max-width: 1000px;
}
.easel-img {
  max-width: 90%;
  height: auto;
  border-radius: 0.8em;
  box-shadow: 0 4px 18px #000a;
  margin-bottom: 1.2rem;
}
.easel-text {
  flex: 1;
  min-width: 240px;
}
/* Hover effect for the "Check Availability" button */
.easel-text .hero-btn {
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.easel-text .hero-btn:hover {
  transform: scale(1.06);
  background: var(--accent);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.easel-text h3 {
  margin: 0.7rem 0 1rem 0;
  font-size: 1.6rem;
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--highlight);
}

.easel-text p {
  margin: 0 auto;
  font-size: 1.1rem;
  opacity: 0.95;
  max-width: 800px;
}
@media (max-width: 700px) {
  .easel-section { flex-direction: column; align-items: flex-start; }
  .easel-img { width: 100%; max-width: 100%; }
}

.reveal-on-scroll { opacity:0; transform: translateY(12px) scale(0.985); }
.reveal-on-scroll.is-visible { animation: fadeInZoom 0.9s ease both; }
@keyframes fadeInZoom { to { opacity:1; transform:none; } }

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1; transform: none; }
  .reveal-on-scroll.is-visible { animation: none; }
}

/* ===== Paintings page: tabs, chips, badges, modal, nav arrows ===== */
.tabs-section { margin: 5vh 0 2vh 0; }
.tabs {
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
}
.tab {
  background:#1b1d22; color:#ddd; border:1px solid #2a2c33; 
  padding:.55em 1.1em; border-radius:2em; font-weight:600; cursor:pointer;
  transition:background .18s, color .18s, transform .12s;
}
.tab:hover { background:#23262d; transform: translateY(-1px); }
.tab.is-active { background: var(--highlight); color:#1a1a1f; }
.tab-all { margin-left:.2rem; opacity:.92; }

.card-meta {
  display:flex; align-items:center; justify-content:space-between;
  padding:.65em .9em .9em .9em; gap:.6em; border-top:1px solid var(--mid-bg);
}
.status-chip {
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.86rem; padding:.28em .65em; border-radius:1em;
  background:#22262e; border:1px solid #2d3038; color:#dcdcdc;
}
.status-available { background:#12321a; color:#cfe8d2; border-color:#1d5230; }
.status-private   { background:#2b2431; color:#e2cfe8; border-color:#46304f; }
.status-exhibit   { background:#242f3a; color:#cee4f4; border-color:#2d495a; }

.badge-prints {
  display:inline-flex; align-items:center; gap:.38em;
  font-size:.84rem; padding:.32em .6em; border-radius:1em; 
  background:linear-gradient(135deg, #332d1b, #3f361a); color:#eadfbc;
  border:1px solid #5a512e; cursor:pointer; transition:filter .16s, transform .12s;
}
.badge-prints:hover { filter:brightness(1.08); transform: translateY(-1px); }

/* Lightbox arrows (builds on your existing .lightbox) */
.lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background:#0008; border:none; color:var(--highlight);
  font-size:2.2rem; line-height:1; padding:.2em .35em; border-radius:.3em;
  cursor:pointer; box-shadow:0 2px 18px #000a;
}
.lightbox-nav:hover { background:#000c; color:var(--accent); }
.lightbox-nav.prev { left:2vw; }
.lightbox-nav.next { right:2vw; }

/* Prints Modal */
.prints-modal {
  display:none; position:fixed; inset:0; z-index:9999; 
  background:rgba(10,12,16,0.88); align-items:center; justify-content:center;
}
.prints-modal.open { display:flex; animation: fadeIn .22s ease; }
.prints-modal__dialog {
  width:min(680px, 92vw); background:#1a1c21; border-radius:1rem; 
  box-shadow:0 10px 48px #000c; border:1px solid #2a2e36; position:relative;
}
.prints-modal__content { padding:1.4rem 1.3rem 1.7rem; }
.prints-modal__content h3 { margin:.2rem 0 .7rem; color:var(--accent); font-family:'Playfair Display', Georgia, serif; }
.prints-details { opacity:.95; font-size:1.03rem; }
.prints-modal__close {
  position:absolute; top:.4rem; right:.7rem; font-size:2rem;
  background:none; border:none; color:var(--highlight); cursor:pointer;
}
.prints-modal__close:hover { color:var(--accent); }

/* Masonry layout */
.masonry { column-count: 4; column-gap: 1.5rem; }
@media (max-width: 1200px){ .masonry { column-count: 3; } }
@media (max-width: 860px) { .masonry { column-count: 2; } }
@media (max-width: 560px) { .masonry { column-count: 1; } }

/* Cards flow naturally with real image ratio */
.masonry .painting-card {
  display: inline-block; width: 100%;
  margin: 0 0 1.5rem 0; break-inside: avoid;
  background: var(--card-bg); border-radius: 0.9rem;
  box-shadow: 0 1px 12px #0007; overflow: hidden; cursor: pointer;
  transition: transform .12s ease, box-shadow .16s ease;
}
.masonry .painting-card:hover { transform: translateY(-2px); box-shadow: 0 4px 24px #000a; }

.masonry .painting-img {
  width: 100%; height: auto; display: block;
  object-fit: contain; background: #16181d;
}

.masonry .painting-title { padding: .75rem .9rem .2rem; font-weight: 600; letter-spacing:.01em; }
.masonry .card-meta {
  display:flex; align-items:center; justify-content:space-between;
  padding: .3rem .9rem .9rem; gap:.7rem; flex-wrap:wrap;
}

/* Status chips */
.status-chip { font-size:.82rem; padding:.28rem .55rem; border-radius: 1rem; font-weight:600; letter-spacing:.02em; }
.status-available { background:#1b3e2a; color:#b8f1ca; }
.status-exhibit   { background:#2a314a; color:#ced9ff; }
.status-sold,
.status-private    { background:#3b2a2a; color:#ffd2d2; }

/* Prints badge (toggle via prints.available) */
.badge-prints { border:0; background:transparent; color:var(--highlight); font-weight:700; cursor:pointer; }
.badge-prints::before { content:"\1F58C\FE0F  "; } /* 🖌️ */

/* Filter bar */
.filterbar {
  position: sticky; top: 68px; z-index: 50;
  background: rgba(21,23,27,0.86); backdrop-filter: blur(8px);
  border-radius: 1rem; margin: 5vh 0 3vh; padding: .9rem 1rem;
  box-shadow: 0 2px 18px #0007;
}
.filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.filter-tab {
  background: #20222a; color:#fff; border:1px solid #2a2d36;
  padding:.45rem .8rem; border-radius:1.4rem; cursor:pointer; font-weight:600;
}
.filter-tab.active, .filter-tab:hover { background: var(--highlight); color:#222; border-color: transparent; }
.filter-meta {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.6rem; flex-wrap:wrap;
}
.legend .chip { margin-left:.35rem; font-size:.82rem; padding:.25rem .55rem; border-radius:1rem; }
.legend .chip-available { background:#1b3e2a; color:#b8f1ca; }
.legend .chip-exhibit   { background:#2a314a; color:#ced9ff; }
.legend .chip-sold      { background:#3b2a2a; color:#ffd2d2; }

/* Prints modal */
.prints-modal {
  padding: 0; border: none; border-radius: 1rem; max-width: 560px; width: min(92vw,560px);
  background: #1c1f26; color: #fff; box-shadow: 0 14px 60px #000c;
}
.prints-modal::backdrop { background: rgba(0,0,0,.6); }
.prints-close {
  position:absolute; right:.6rem; top:.2rem; background:transparent; border:0; color:var(--highlight);
  font-size:2rem; cursor:pointer;
}
.prints-body { padding: 1.4rem 1.3rem 1.6rem; }
.prints-body h3 { margin: 0 0 .4rem 0; font-family:'Playfair Display', Georgia, serif; color: var(--accent); }
.prints-body p { margin: .4rem 0 1rem; opacity:.95; }

/* mini thumbs under each card */
.subthumbs {
  display: flex;
  gap: .4rem;
  padding: 0 .9rem .9rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.subthumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: .35rem;
  background: #0f1217;
  border: 1px solid #262a33;
  box-shadow: 0 1px 6px #0006 inset;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  object-fit: cover; /* these are thumbs, crop is fine */
}
.subthumb:hover { transform: translateY(-1px); box-shadow: 0 2px 10px #0008 inset; border-color: #2e3340; }

.subthumbs-count {
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: .35rem;
  border: 1px dashed #2a2f3a;
  color: #cfc8b1; opacity: .9;
  font-size: .86rem; font-weight: 700;
}