/* wp-content/themes/hello-child/assets/css/cb-product-gallery.css
   CB Product Gallery — contain-first (no crop), refined sizing for best resolution
   v3.1.2
*/

/* --- variables kept from previous file --- */
:root{
  --cb-gap:14px;
  --cb-radius:14px;
  --cb-shadow:0 18px 48px rgba(0,0,0,.08);
  --cb-border:1px solid rgba(0,0,0,.08);
  --cb-thumb-size:200px;
  --cb-arrow-size:42px;
  --cb-lightbox-max-width:1200px;
  --cb-lightbox-bg:rgba(0,0,0,.45);
  --cb-dialog-bg:#ffffff;
  --cb-control-bg:rgba(255,255,255,.98);
  --cb-control-color:#222;
  --cb-border-strong:rgba(0,0,0,.25);
  --cb-transition-speed:.22s;
  --cb-focus-ring: 0 0 0 3px rgba(26,26,26,.08);
}

/* Layout container */
.cb-gallery{ display:grid; grid-template-columns:1fr; gap:var(--cb-gap); }

/* Main card */
.cb-gallery-main{
  position:relative; border-radius:var(--cb-radius); border:var(--cb-border);
  box-shadow:var(--cb-shadow); background:#fff; overflow:visible;
}

/* Frame: ensure no internal padding reduces available area */
.cb-frame{
  margin:0;
  aspect-ratio:1/1;
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:inherit;
  position:relative;
  padding: 0; /* important: allow image to use full frame */
}

/* Main image: always use contain (no crop), but grow to fill available space respecting natural size */
.cb-main-img{
  display:block;
  margin:0 auto;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain; /* NO COVER — never crop */
  transition:transform .18s ease;
  will-change:transform;
  cursor:zoom-in;
  -webkit-user-drag:none;
  /* Ensure images don't get stretched beyond natural size by CSS only;
     JS controls zoom and will not exceed natural size. */
}

/* Ensure image container uses available full height to allow larger display */
.cb-frame > img, .cb-frame .cb-main-img {
  max-width: calc(100% - 28px); /* slight breathing room for controls */
  max-height: calc(100% - 28px);
  box-sizing: border-box;
}

/* Zoom button styled like arrows (same visual language) */
.cb-zoom-btn{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:4;
  width:var(--cb-arrow-size);
  height:var(--cb-arrow-size);
  border-radius:50%;
  border:0 !important;
  display:grid;
  place-items:center;
  background:var(--cb-control-bg) !important;
  color:var(--cb-control-color) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  opacity:0;
  transform:translateY(6px);
  transition:all var(--cb-transition-speed) ease;
  cursor:pointer;
  outline:none;
}
.cb-frame:hover .cb-zoom-btn,
.cb-frame:focus-within .cb-zoom-btn{
  opacity:1; transform:translateY(0) scale(1);
}
.cb-zoom-btn svg{ width:22px; height:22px; stroke:currentColor; fill:none; }
.cb-zoom-btn:hover{
  background:#1a1a1a !important;
  color:#fff !important;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transform:translateY(-2px) scale(1.05);
}
.cb-zoom-btn:active{ transform:translateY(0) scale(.97); }
.cb-zoom-btn:focus{ box-shadow: var(--cb-focus-ring); }

/* Arrow buttons */
.cb-gallery .cb-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:var(--cb-arrow-size); height:var(--cb-arrow-size);
  border:0 !important; border-radius:50% !important;
  background:var(--cb-control-bg) !important; color:var(--cb-control-color) !important;
  display:grid; place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.12);
  transition:all var(--cb-transition-speed) ease; opacity:.95; cursor:pointer;
  outline: none;
}
.cb-prev{ left:calc(-1 * (var(--cb-arrow-size) / 2)); } .cb-next{ right:calc(-1 * (var(--cb-arrow-size) / 2)); }
.cb-gallery .cb-arrow:hover{ background:#1a1a1a !important; color:#fff !important; box-shadow:0 4px 14px rgba(0,0,0,.35); transform:translateY(-50%) scale(1.05); }
.cb-gallery .cb-arrow:active{ transform:translateY(-50%) scale(.97); }
.cb-gallery .cb-arrow:focus{ box-shadow: var(--cb-focus-ring); transform:translateY(-50%) scale(1.02); }

/* Thumbnails */
.cb-thumbs{
  display:grid; grid-auto-flow:column; grid-auto-columns:max-content;
  justify-content:flex-start; gap:var(--cb-gap); padding:4px; overflow-x:auto; scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.cb-thumb{
  border:1px solid rgba(0,0,0,.12) !important; border-radius:12px !important;
  background:#fff !important; padding:6px; box-sizing:border-box; outline:0 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.08); transition:all var(--cb-transition-speed) ease; cursor:pointer;
}
.cb-thumb:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 10px 24px rgba(0,0,0,.25); border-color:rgba(0,0,0,.35) !important; }
.cb-thumb.is-active{ border-color:var(--cb-border-strong) !important; box-shadow:0 8px 22px rgba(0,0,0,.15); transform:none; }
.cb-thumb::after{ display:none !important; }
.cb-thumb-img{ display:block; width:var(--cb-thumb-size); height:var(--cb-thumb-size); object-fit:contain; border-radius:8px; transition:transform .2s ease; -webkit-user-drag:none; }
.cb-thumb:hover .cb-thumb-img{ transform:scale(1.06); }

/* Lightbox overlay + dialog */
.cb-lightbox{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:var(--cb-lightbox-bg); }
.cb-lightbox.is-open{ display:flex; }
.cb-lightbox__dialog{
  position:relative; max-width:var(--cb-lightbox-max-width); width:calc(100vw - 48px);
  max-height:calc(100vh - 48px); border-radius:14px; overflow:hidden;
  background:var(--cb-dialog-bg); box-shadow:0 30px 80px rgba(0,0,0,.12);
}
.cb-lightbox__body{ position:relative; display:grid; place-items:center; width:100%; height:100%; background:transparent; }
.cb-lightbox__img{
  display:block; max-width:96%; max-height:calc(100vh - 96px);
  width:auto; height:auto; object-fit:contain; background:transparent; -webkit-user-drag:none;
}

/* Close button styled like arrows */
.cb-lightbox__close{
  position:absolute; top:10px; right:10px; z-index:5;
  width:38px; height:38px; border:0; border-radius:50%;
  background:var(--cb-control-bg); color:var(--cb-control-color);
  display:grid; place-items:center; box-shadow:0 2px 12px rgba(0,0,0,.35); cursor:pointer;
  transition:all .18s ease; outline:none;
}
.cb-lightbox__close:hover{ background:#1a1a1a; color:#fff; box-shadow:0 8px 30px rgba(0,0,0,.45); transform:translateY(-2px) scale(1.03); }
.cb-lightbox__close:focus{ box-shadow: var(--cb-focus-ring); }

/* Utility: disables page scroll when lightbox open */
.cb-no-scroll{ overflow:hidden !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cb-main-img, .cb-thumb, .cb-thumb-img, .cb-gallery .cb-arrow, .cb-lightbox .cb-arrow { transition:none !important; animation:none !important; }
}

/* Responsive tweaks */
@media (max-width:600px){
  :root{ --cb-thumb-size:120px; }
  .cb-prev{ left:-18px; } .cb-next{ right:-18px; }
  .cb-lightbox__dialog{ width:calc(100vw - 24px); border-radius:10px; }
  .cb-frame{ aspect-ratio:4/5; }
}
@media (max-width:380px){
  .cb-gallery .cb-arrow, .cb-lightbox .cb-arrow{ width:36px; height:36px; }
}

/* helper sr-only */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }