/* ========================================================================== 
   FANZA product package / sample media
   ========================================================================== */
:root{
  --mn-package-ratio:800 / 538;
  --mn-sample-ratio:16 / 9;
  --mn-sample-gap:12px;
}

/* Product package images only. Actress/profile images intentionally keep their
   own portrait ratios. */
.c-product-card>.c-thumb,
.c-product-horizontal>.c-thumb,
.c-product-compact>.c-thumb,
.c-ranking-item>.c-thumb,
.c-home-rank__item>.c-thumb,
.c-product-hero__media>.c-thumb,
.c-cta-feature__grid>.c-thumb{
  aspect-ratio:var(--mn-package-ratio)!important;
}

.c-product-card>.c-thumb>img,
.c-product-horizontal>.c-thumb>img,
.c-product-compact>.c-thumb>img,
.c-ranking-item>.c-thumb>img,
.c-home-rank__item>.c-thumb>img,
.c-product-hero__media>.c-thumb>img,
.c-cta-feature__grid>.c-thumb>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* The generic UI kit uses SAMPLE as an empty-thumb placeholder. Never overlay
   that placeholder on a real product image. */
.c-thumb.has-image::before{display:none!important;content:none!important}

/* UIKIT-style thumbnail status labels. Keep them concise and readable on
   landscape jackets; ranking cards reserve the left corner for the rank. */
.c-thumb__badges{max-width:calc(100% - 12px);align-items:flex-start}
.c-thumb__badges .c-badge{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 1px 5px rgba(15,18,22,.16)}
.c-home-rank__item .c-thumb__badges{right:6px;left:auto;justify-content:flex-end}
.c-product-hero__media .c-thumb__badges .c-badge:nth-child(n+3){display:none}

/* Sidebar product jackets. */
.c-side-product{
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:10px;
}
.c-side-product__thumb{
  width:92px!important;
  aspect-ratio:var(--mn-package-ratio)!important;
}
.c-side-product__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Sample carousel: each image occupies roughly two thirds of the track while
   keeping the next item visible. */
.c-carousel--samples .c-carousel__track,
.c-product-section .c-carousel:has(.c-product-sample) .c-carousel__track{
  grid-auto-columns:minmax(240px,66.666%);
  gap:var(--mn-sample-gap);
  padding:2px 2px 8px;
  scroll-padding-inline:2px;
}
.c-product-sample{
  position:relative;
  width:100%!important;
  aspect-ratio:var(--mn-sample-ratio);
  margin:0!important;
  overflow:hidden;
  border-radius:0!important;
  background:#111!important;
  cursor:zoom-in;
  box-shadow:0 1px 0 rgba(20,24,28,.04);
}
.c-product-sample>img{
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  border-radius:0!important;
  object-fit:cover!important;
  object-position:center;
  transition:transform .18s ease,opacity .18s ease;
}
.c-product-sample:hover>img{transform:scale(1.015);opacity:.96}
.c-product-sample:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Dedicated sample lightbox. Full-size view uses contain intentionally so the
   enlarged source is never cropped; cover remains the rule for thumbnails. */
html.is-sample-lightbox-open,
html.is-sample-lightbox-open body{overflow:hidden}
.c-sample-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 52px;
  grid-template-rows:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:52px 22px 22px;
  background:rgba(12,13,15,.94);
  opacity:0;
  visibility:hidden;
  transition:opacity .16s ease,visibility .16s ease;
}
.c-sample-lightbox.is-open{opacity:1;visibility:visible}
.c-sample-lightbox__figure{
  grid-column:2;
  grid-row:1;
  display:grid;
  place-items:center;
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  margin:0;
}
.c-sample-lightbox__image{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100vh - 106px);
  object-fit:contain;
  border-radius:0;
  box-shadow:0 16px 60px rgba(0,0,0,.35);
}
.c-sample-lightbox__close,
.c-sample-lightbox__prev,
.c-sample-lightbox__next{
  display:grid;
  place-items:center;
  border:0;
  border-radius:var(--r40);
  background:rgba(255,255,255,.12);
  color:#fff;
  line-height:1;
  backdrop-filter:blur(4px);
}
.c-sample-lightbox__close:hover,
.c-sample-lightbox__prev:hover,
.c-sample-lightbox__next:hover{background:rgba(255,255,255,.22)}
.c-sample-lightbox__close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  font-size:23px;
}
.c-sample-lightbox__prev,
.c-sample-lightbox__next{
  width:44px;
  height:44px;
  font-size:22px;
}
.c-sample-lightbox__prev{grid-column:1;grid-row:1}
.c-sample-lightbox__next{grid-column:3;grid-row:1}
.c-sample-lightbox__counter{
  grid-column:1/-1;
  grid-row:2;
  color:rgba(255,255,255,.78);
  font-size:10px;
  text-align:center;
}

@media(max-width:720px){
  :root{--mn-sample-gap:10px}
  .c-product-hero{grid-template-columns:minmax(150px,190px) minmax(0,1fr)!important}
  .c-side-product{grid-template-columns:86px minmax(0,1fr)!important}
  .c-side-product__thumb{width:86px!important}
  .c-carousel--samples .c-carousel__track,
  .c-product-section .c-carousel:has(.c-product-sample) .c-carousel__track{grid-auto-columns:82%}
  .c-sample-lightbox{grid-template-columns:38px minmax(0,1fr) 38px;gap:6px;padding:48px 8px 16px}
  .c-sample-lightbox__prev,.c-sample-lightbox__next{width:34px;height:34px;font-size:18px}
  .c-sample-lightbox__image{max-height:calc(100vh - 92px)}
  .c-thumb__badges .c-badge{max-width:126px}
}

@media(max-width:520px){
  .c-product-hero{grid-template-columns:1fr!important}
  .c-product-hero__media{width:100%}
}

@media(max-width:420px){
  .c-side-product{grid-template-columns:80px minmax(0,1fr)!important}
  .c-side-product__thumb{width:80px!important}
  .c-carousel--samples .c-carousel__track,
  .c-product-section .c-carousel:has(.c-product-sample) .c-carousel__track{grid-auto-columns:88%}
}