/* Override Bootstrap font size */
:root {
  --bs-body-font-size: 1.1rem;
}

html, body {
  height: 100%;
  font-family: 'Montserrat','Lemon Milk', 'Bebas Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.site-shell {
  min-height: 100vh;           /* full viewport height */
  display: flex;
  flex-direction: column;
  background: var(--site-bg, #fff); /* fallback color */
  background-size: cover;      /* in case you use a bg image */
  background-position: center;
  background-repeat: no-repeat;
}

.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
    padding-right: calc(var(--bs-gutter-x) * 0);
    padding-left: calc(var(--bs-gutter-x) * 0);
}

.fxl-banner{
  position: relative;
  isolation: isolate;
  overflow: hidden; 
  min-height: 320px; 
  display:flex; 
  flex-direction:column;
}

#bannerPreview.fxl-banner {
    position: relative;
    min-height: 320px;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    overflow: hidden;
    display: flex
;
    flex-direction: column;
}

.fxl-banner.has-media{
  min-height: 13vh;
}
 
@media (min-width: 576px){
  .fxl-banner.has-media{ min-height: 15vh; }
} 

@media (min-width: 768px){
  .fxl-banner.has-media{ min-height: 20vh; }
}

@media (min-width: 992px){
  .fxl-banner.has-media{ min-height: 23vh; }
}

@media (min-width: 1200px){
  .fxl-banner.has-media{ min-height: 27vh; }
}

@media (min-width: 1400px){
  .fxl-banner.has-media{ min-height: 38vh; }
} 

.fxl-banner.text-only{
  padding: 15px 0;
  min-height: 180px;
}

.fxl-banner-bg{
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  z-index: 0;
}

.fxl-banner-inner{
  position: relative;
  z-index: 1;
  padding: 25px 30px;
  width:100%;
  display:flex; 
  flex: 1 0 auto; 
  margin: 0 auto;
}

.fxl-banner-title{
  /* fluid responsive size: min 28px, preferred with viewport, max 72px */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
  font-size: clamp(1.75rem, 3.2vw + 1rem, 4.5rem);
}

.fxl-banner-subtitle{
  color: #fff;
  opacity: .95;
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
  font-size: clamp(1rem, 1.1vw + .75rem, 1.5rem);
}

.fxl-banner.text-only .fxl-banner-title,
.fxl-banner.text-only .fxl-banner-subtitle{
  color: #111;
  text-shadow: none;
}

.fxl-banner.pos-top    { justify-content:flex-start; }
.fxl-banner.pos-center { justify-content:center; }
.fxl-banner.pos-bottom { justify-content:flex-end; }
.fxl-banner-content.align-left   { text-align:left; }
.fxl-banner-content.align-center { text-align:center; }
.fxl-banner-content.align-right  { text-align:right; }
.fxl-banner-content{ width: 100%; }

.fxl-banner-socials {
  min-height: 40px;
}

.fxl-banner-socials .social-link img {
  display:block;
  height: 45px;
  transition: transform .2s ease, opacity .2s ease;
  opacity: .85;
}

.fxl-banner-socials .social-link:hover img {
  transform: scale(1.15);
  opacity: 1;
 }

.social-icon {
  height: 45px;
  margin: 0 8px;
  transition: transform .3s ease;
}

.social-icon:hover {
    transform: scale(1.2);
}

/* Rich text component */
.rt-img-inline img, .rt-img-block img { display:block; width:100%; height:auto; }
.rt-img--s  { max-width: 160px; }
.rt-img--m  { max-width: 240px; }
.rt-img--l  { max-width: 360px; }
.rt-img--xl { max-width: 480px; }
/* Optional: tighten heading spacing a bit inside components */
.rt-heading { line-height: 1.2; }

.mobile-menu { background: #9d9d9d; }
.site-logo { height: 36px; width: auto; }
.site-header .nav .nav-link { color: inherit; opacity: .85; }
.site-header .nav .nav-link:hover { opacity: 1; }
#content { flex: 1 0 auto; }   /* grow to fill the space */


/* Album card */
.fxl-album-card{
  padding: 18px 16px;
  color: #fff;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.fxl-album-cover{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 10px;
  border-radius: 10px;
}

.fxl-album-title{
  font-size: clamp(1.6rem, 2.5vw, 3.2rem);
  margin: 6px 0 2px;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  letter-spacing: 3.5px;
}
.fxl-album-subtitle{
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  opacity: .95;
}

.album-coming-ribbon{
  position:absolute;
  top:12px; left:12px;
  padding:10px 12px;
  border-radius:10px;
  background: rgba(0,0,0,.65);
  color:#fff;
  backdrop-filter: blur(6px);
  z-index: 3;
  max-width: 70%;
}

.album-sleeve-wrap{
  position: relative;   /* ribbon anchors here */
  display: grid;
  place-items: center;
}



/* Corner ribbons */
.corner-ribbon{
  position:absolute;
  z-index: 20;
  pointer-events:none;
}

.corner-ribbon span{
  position:relative;
  display:block;
  background: rgba(180, 20, 40, .92);
  color:#fff;
  padding:10px 12px;
  font-weight:800;
  line-height:1.05;
  text-align:center;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

.corner-ribbon span small{
  display:block;
  font-weight:500;
  opacity:.9;
  margin-top:3px;
}

.corner-ribbon span::before,
.corner-ribbon span::after{
  content:"";
  position:absolute;
  bottom:-12px;
  width:0; height:0;
  border-top:12px solid rgba(120, 10, 25, .92); /* darker fold */
}

/* left fold */
.corner-ribbon span::before{ left:0; border-left:12px solid transparent; }

/* right fold */
.corner-ribbon span::after{ right:0; border-right:12px solid transparent; }

.corner-ribbon-top-right{
  top: 0;
  right: 0;
  width: 400px;
  transform: rotate(45deg);
  transform-origin: top right;
  text-align:center;
}

.corner-ribbon-top-left{
  top: 0;
  left: 0;
  width: 300px;
  transform: rotate(-45deg);
  transform-origin: top left;
  text-align:center;
}


.cover-ribbon {
  --f: 15px; /* control the folded part */
  --c: #b41428eb;
  position: absolute;
  top: 0px;
  color: #fff;
  z-index: 40;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  min-width: 390px;
  padding: .95em 3.8em;
  background: var(--c);
  border-bottom :var(--f) solid #0007;
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px))
}

.cover-ribbon small{
  display:block;
  font-weight:600;
  opacity:.95;
  margin-top: .15em;
}

.cover-corner-right {
  right: 10px;
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
}
.cover-corner-left {
  left: 10px;
  transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
}

@media (min-width: 992px) and (max-width: 1378px){
  .cover-ribbon{
    padding: .3em 2.8em;   /* makes it longer without fake text padding */
    font-size: .95rem;     /* optional: slightly smaller */
    max-width: none;
    min-width: 280px;
  }
}

@media (max-width: 992px){
  .cover-ribbon{
    --f: 12px;
    padding: .3em 2em;
    font-size: .95rem;
    min-width: 300px;
  }
}

@media (max-width: 576px){
  .cover-ribbon{
    --f: 10px;
    padding: .2em 1.6em; 
    font-size: .85rem;
    box-shadow: 0 6px 14px rgba(0,0,0,.22);
    min-width: 250px;
  }
  .cover-ribbon small{
    font-size: .72em;
  }
}

@media (max-width: 400px){
  .cover-ribbon{
    padding: .18em 1.25em;
    font-size: .72rem;
  }
}

/* Coming Soon Stamp */ 
.cover-stamp{
  position:absolute;
  bottom: 14px;     /* or top: 14px */
  left: 14px;       /* or right: 14px */
  width: 108px;
  height: 108px;
  z-index: 40;
  pointer-events:none;

  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

.cover-stamp__inner{
  position:absolute;
  inset: 5px;
  border-radius: 999px;
  border: 2px dashed rgba(0,0,0,.45); /* “record store” vibe */
  border-color: currentColor;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 6px;
}

.cover-stamp__title{
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.05;
}

.cover-stamp__date{
  margin-top: 4px;
  font-weight: 700;
  font-size: .68rem;
  opacity: .9;
}

/* Corner positions */
.cover-stamp--tl{ top:40px; left:40px; bottom:auto; right:auto; }
.cover-stamp--tr{ top:40px; right:40px; bottom:auto; left:auto; }
.cover-stamp--bl{ bottom:40px; left:40px; top:auto; right:auto; }
.cover-stamp--br{ bottom:40px; right:40px; top:auto; left:auto; }

/* Responsive spacing */
@media (min-width: 992px) and (max-width: 1378px){
  .cover-stamp--tl{ top:20px; left:20px; }
  .cover-stamp--tr{ top:20px; right:20px; }
  .cover-stamp--bl{ bottom:20px; left:20px; }
  .cover-stamp--br{ bottom:20px; right:20px; }
}

@media (max-width: 992px){
  .cover-stamp--tl{ top:15px; left:15px; }
  .cover-stamp--tr{ top:15px; right:15px; }
  .cover-stamp--bl{ bottom:15px; left:15px; }
  .cover-stamp--br{ bottom:15px; right:15px; }
} 

@media (max-width: 576px){
  .cover-stamp--tl{ top:20px; left:20px; }
  .cover-stamp--tr{ top:20px; right:20px; }
  .cover-stamp--bl{ bottom:20px; left:20px; }
  .cover-stamp--br{ bottom:20px; right:20px; }
}

/* responsive: shrink stamp on phones */
@media (max-width: 576px){
  .cover-stamp{ width: 88px; height: 88px; }
  .cover-stamp__inner{ inset: 4px; }
  .cover-stamp__title{ font-size: .68rem; }
  .cover-stamp__date{ font-size: .6rem; }
}




/* Links row */
.fxl-album-links{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fxl-link-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  min-width: 110px;
  transition: transform .12s ease, background .12s ease;
}
.fxl-link-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); }

/* Tracks */
.fxl-track-list{
  list-style: none;
  margin: 0;
  padding: 0 4px;
}
.fxl-track-list li{
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,.15);
}
.fxl-track-list li:last-child{ border-bottom: 0; }
.fxl-track-num{ opacity: .85; margin-right: 6px; }

/* Back sleeve (smaller) */
.fxl-album-back img{
  max-width: 72%;
  height: auto;
  border-radius: 10px;
}

/* Respect your rounded toggle */
.rounded-3{ border-radius: 1rem !important; }






/* MAYBE?????? */
.fxl-album-card { color:#fff; box-shadow:0 6px 24px rgba(0,0,0,.2); }
.fxl-album-media img { aspect-ratio: 1 / 1; object-fit: cover; }
.fxl-title { font-size: clamp(1.25rem, 1.1rem + 1vw, 1.75rem); }

.fxl-link { display:inline-flex; align-items:center; justify-content:center; }
.fxl-link .fxl-icon { mask-size:contain; -webkit-mask-size:contain; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; }
.fxl-link:hover .fxl-icon { transform: scale(1.06); }

.fxl-album-card { padding: 18px; }
.fxl-album-cover { width: 100%; height: auto; object-fit: cover; }

.fxl-album-links .social-icon { height: 28px; display: inline-block; object-fit: contain; }
.fxl-album-row .social-icon   { width: 22px; height: 22px; object-fit: contain; }
.fxl-album-hero .social-icon  { height: 25px; object-fit: contain; }

.fxl-track-list { list-style: none; padding-left: 0; }
.fxl-track-list li { display: flex; gap: 8px; align-items: baseline; }
.fxl-track-num { opacity: .6; min-width: 1.5rem; text-align: right; }

.fxl-countdown {
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.fxl-countdown span { font-weight: 700; }

:root {
  --album-aspect: 1/1;            /* square */
  --album-frame-max: 900px;       /* cap the visual size */
}

.album-sleeve-frame {
  aspect-ratio: var(--album-aspect);
  width: 100%;
  max-width: var(--album-frame-max);  /* <- keeps a certain size */
  background: #f7f7f7;
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
}

.album-sleeve-img,
.album-sleeve-bg {
  width: 100%;
  height: 100%;
  /* object-fit: contain;  /* no crop, no stretch */
  display: block;
  border-radius: inherit;
}

.album-sleeve-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.album-sleeve-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25) 50%, rgba(0,0,0,.10));
  z-index: 1;
}
.album-sleeve-body { position: relative; z-index: 2; }

.album-record-sleeve .album-img { position: relative; }
.album-record-sleeve .album-img-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.0) 65%);
}
.album-record-sleeve .album-text { position: relative; color: #fff; }
.white-space-preline { white-space: pre-line; }
.album-credits { opacity: .9; }

.album-sleeve-back {
  background-size: cover;
  background-position: center;
  min-height: 280px; /* adjust as needed */
}

.album-sleeve-body { position: relative; z-index: 1; }
.object-fit-cover { object-fit: cover; }

/* full canvas for positioned blocks */
.album-sleeve-canvas{position:absolute; inset:0; padding:10px; z-index:2;}

/* blocks: top/bottom + left/right */
.album-block{
  max-width:88%;
  font-size: clamp(0.75rem, 0.9vw + 0.55rem, 1rem);
  line-height: 1.35;
}
.album-block h6 {
  font-size: clamp(0.7rem, 0.8vw + 0.4rem, 0.9rem);
  margin-bottom: 0.35rem;
}
.album-block .rt-text {
  font-size: clamp(0.65rem, 0.8vw + 0.4rem, 0.9rem);
  line-height: 1.3;
}

.album-block.top{position:absolute; top:10px;}
.album-block.bottom{position:absolute; bottom:10px;}
.album-block.left{left:10px; text-align:left;}
.album-block.right{right:10px; text-align:right;}

/* keep text readable over busy art */
.album-block .rt-text{ text-shadow: 0 1px 2px rgba(0,0,0,.45); }

/* Sleeve (Poster) */
.fxl-sleeve-panel {
  overflow: hidden; /* keeps rounded corners clean */
}

.fxl-sleeve-art {
  padding: 1rem 1rem 0.5rem;
}

/* Coming soon overlay (simple version) */
.fxl-coming-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:12px;
  pointer-events:none;
}
.fxl-coming-badge{
  background: rgba(0,0,0,.70);
  color:#fff;
  padding:.5rem .75rem;
  font-weight:800;
  line-height:1.05;
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  max-width: 70%;
}

/* Poster overlay container inside cover frame */
.fxl-poster-overlay {
  position: absolute;
  inset: 0;
  padding: 1rem;
  z-index: 5;
  pointer-events: none;
}

.fxl-poster-tracks,
.fxl-poster-credits {
  position: absolute;
  max-width: 80%;
  pointer-events: none;
}

.fxl-poster-tracks { top: 1rem; }
.fxl-poster-credits { bottom: 1rem; }

.fxl-left { left: 1rem; text-align: left; }
.fxl-right { right: 1rem; text-align: right; }


.fxl-poster{
  background: #f6f3ee;          /* paper */
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.25);
}

.fxl-poster__band{
  padding: 14px 16px;
}

.fxl-poster__band--top{
  padding-bottom: 0.5em; 
}

.fxl-poster__band--bottom{
  padding-top: 0.5em; 
}

.fxl-poster__artist{
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 3.15rem;
}

.fxl-poster__title{
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: capitalize;
  font-size: 1.45rem;
  font-style: italic;
}

.fxl-poster__subtitle{
  opacity: .95;
  font-weight: 350;
  font-size: 1.75rem;
  text-transform: uppercase;
  margin-top: 0.65em;
}

.fxl-poster__art{
  padding: 3px 16px 10px 16px;
  min-height: 420px;
}

.fxl-poster__frame{
  width: 100%;
  max-width: 620px;
  aspect-ratio: var(--album-aspect);
  background: #e9e7e3;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.fxl-poster__frame-center{
  width: 90%;
  aspect-ratio: var(--album-aspect, 1 / 1);
  overflow: hidden;
  display: grid;
  place-items: center;
  margin: 0px auto;
}

.fxl-poster__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fxl-poster__pill{
  display: inline-block;
  background: rgba(0,0,0,.75);
  color: #fff;
  padding: .35rem .7rem;
  font-weight: 800;
  border-radius: 999px;
  font-size: .9rem;
}

.fxl-poster__release{
  display: inline-block;
  padding: .1rem .7rem .7rem .7rem;
}

.fxl-poster__release-text{
  display: block;
  padding: .1rem .7rem;
  letter-spacing: .05em;
  font-weight: 300;
  font-size: 2.15rem;
}

.fxl-poster__release-date{
  display: block;
  padding: .1rem .7rem;
  letter-spacing: .05em;
  font-weight: 300;
  font-size: 1.45rem;
}

.fxl-poster__meta{ 
  padding: 1.5rem .2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.fxl-poster__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fxl-poster__link .social-icon {
  height: 30px;
  object-fit: contain;
  opacity: 0.9;
  transition: transform .15s ease, opacity .15s ease;
}

.fxl-poster__link img{
  height: auto;
  display: block;
}

.fxl-poster__info{
  padding: 14px 16px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  font-size: .9rem;
  color: rgba(0,0,0,.85);
}

.fxl-poster__info h6{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .75rem;
  margin: 0 0 8px;
  opacity: .9;
}

.fxl-poster__link--mono img{
  filter: grayscale(1) contrast(1.1) brightness(.3);
  opacity: .9;
}

.border-poster{
  border: 1px solid #c6c6c6;
}

@media (min-width: 992px){
  .fxl-poster__frame{ max-width: 500px; }
  .fxl-poster__art{ min-height: 320px; }
}




/** FONTS **/
.ff-system{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.ff-roboto{ font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif; }
.ff-oswald{ font-family: "Oswald", system-ui, sans-serif; }
.ff-nunito{ font-family: "Nunito Sans", system-ui, sans-serif; }
.ff-montagu{ font-family: "Montagu Slab", Georgia, serif; }
.ff-bungee{ font-family: "Bungee Outline", system-ui, sans-serif; }
.ff-bebas{ font-family: "Bebas Neue", system-ui, sans-serif; }
.ff-lemonmilk{ font-family: "Lemon Milk", system-ui, sans-serif; }
.ff-montserrat{ font-family: "Montserrat", system-ui, sans-serif; }
.ff-inter{ font-family: "Inter", system-ui, sans-serif; }
.ff-playfair{ font-family: "Playfair Display", Georgia, serif; }
.ff-marcellus{ font-family: "Marcellus SC", Georgia, serif; }
.ff-italiana{ font-family: "Italiana", Georgia, serif; }
.ff-gracecover{ font-family: "Covered By Your Grace", cursive; }
.ff-fasterone{ font-family: "Faster One", system-ui, sans-serif; }
.ff-rampartone{ font-family: "Rampart One", system-ui, sans-serif; }
.ff-keyboard{ font-family: "Libertinus Keyboard", serif; }








footer  { flex-shrink: 0; }    /* keep footer at the bottom */

.site-footer{
  /* height & background */
  min-height: 120px;
  /* center-center the content */
  display: flex;
  align-items: center;
}

.site-footer .container,
.site-footer .container-fluid{
  padding: 16px;
}

.site-footer__inner{
  width: 100%;
  display: flex;
  flex-direction: column; 
  gap: 4px;
  justify-content: center;  
  align-items: center;      
}

.site-footer__text{
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: .95;
}

/* Photo Gallery Component Styles */
.photo-gallery-component {
  max-width: 100%;
}

.photo-gallery-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #f5f5f5;
}

.photo-gallery-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-gallery-item:hover .photo-gallery-img {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.photo-gallery-img.rounded {
  border-radius: 0.5rem;
}

/* Lightbox Styles */
.photo-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.lightbox-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
}

.lightbox-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 0.25rem;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  color: #000;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: background 0.2s;
  z-index: 10000;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: #fff;
}

.lightbox-close {
  top: 1rem;
  right: 1rem;
  font-size: 2.5rem;
  line-height: 1;
  padding: 0.25rem 0.75rem;
}

.lightbox-prev {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  color: #000;
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .lightbox-prev,
  .lightbox-next {
    font-size: 1.5rem;
    padding: 0.25rem 0.5rem;
  }

  .lightbox-close {
    font-size: 2rem;
  }
}