/* Product photos: every photo on desktop, a swipe row with thumbnails on phones and tablets.
   Markup: woocommerce/single-product/product-image.php. Behaviour: assets/js/gallery.js. */

.tt-gallery{--tt-g-bg:#f3f1ec;--tt-g-gap:12px;position:relative;}
.tt-gallery img{display:block;width:100%;height:auto;}
.tt-gallery__open{display:block;width:100%;padding:0 !important;margin:0;border:0 !important;background:var(--tt-g-bg) !important;
  border-radius:8px;overflow:hidden;cursor:zoom-in;min-width:0 !important;}
.tt-gallery__open:focus-visible{outline:3px solid #8a6d3b;outline-offset:2px;}
.tt-gallery__item{margin:0;}

/* ---------- Desktop: all photos, no slider ---------- */
@media (min-width:1001px){
  .tt-gallery__track{display:grid;grid-template-columns:1fr 1fr;gap:var(--tt-g-gap);grid-auto-flow:row dense;}
  /* Portrait and square photos pair up at the product shot's own 4:5 shape; a landscape scene
     takes the full row at its own 3:2, so nothing is cropped away. */
  .tt-gallery__item.is-port .tt-gallery__open,
  .tt-gallery__item.is-sq .tt-gallery__open{aspect-ratio:4/5;}
  .tt-gallery__item.is-port img,
  .tt-gallery__item.is-sq img{width:100%;height:100%;object-fit:contain;}
  .tt-gallery__item.is-land{grid-column:1 / -1;}
  /* One photo only, or the first photo when it stands alone: full width. */
  .tt-gallery[data-count="1"] .tt-gallery__item{grid-column:1 / -1;}
  .tt-gallery[data-count="1"] .tt-gallery__open{aspect-ratio:auto;}
  .tt-gallery__item.is-more{display:none;}
  .tt-gallery.is-all .tt-gallery__item.is-more{display:block;}
  .tt-gallery__bar,.tt-gallery__thumbs{display:none;}
  .tt-gallery__more{display:block;width:100%;margin-top:var(--tt-g-gap);height:52px;border:1px solid #23342a !important;
    border-radius:26px;background:#fff !important;color:#23342a !important;font-weight:600;font-size:1rem;cursor:pointer;}
  .tt-gallery__more:hover{background:#23342a !important;color:#fff !important;}
  .tt-gallery.is-all .tt-gallery__more{display:none;}
}

/* ---------- Phone and tablet: swipe row, counter, arrows, thumbnails ---------- */
@media (max-width:1000px){
  .tt-gallery__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:0;border-radius:8px;}
  .tt-gallery__track::-webkit-scrollbar{display:none;}
  .tt-gallery__item{flex:0 0 100%;scroll-snap-align:center;}
  /* Square: a portrait product shot loses little, a landscape scene gets thinner bands than 4:5. */
  .tt-gallery__open{border-radius:0;aspect-ratio:1/1;max-height:62vh;width:100%;}
  .tt-gallery__open img{width:100%;height:100%;object-fit:contain;}
  .tt-gallery__more{display:none;}

  /* Counter and arrows sit under the photo, in the open, not on top of it. */
  .tt-gallery__bar{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .tt-gallery__count{font-size:1rem;color:#4a524c;font-variant-numeric:tabular-nums;}
  .tt-gallery__count b{color:#1f2a22;}

  .tt-gallery__thumbs{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding:2px 2px 6px;scrollbar-width:none;}
  .tt-gallery__thumbs::-webkit-scrollbar{display:none;}
  .tt-gallery__thumb{flex:0 0 64px;height:64px;padding:0 !important;min-width:0 !important;border:2px solid transparent !important;
    border-radius:8px;overflow:hidden;background:var(--tt-g-bg) !important;cursor:pointer;opacity:.75;}
  .tt-gallery__thumb img{width:100%;height:100%;object-fit:cover;}
  .tt-gallery__thumb.is-on{border-color:#23342a !important;opacity:1;}
}

/* Arrow buttons (gallery bar and lightbox): real 48px targets with a visible chevron. */
.tt-gallery__nav,.tt-lightbox__nav{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  padding:0 !important;min-width:0 !important;border:1px solid #d8d5cc !important;border-radius:50%;background:#fff !important;
  color:#1f2a22 !important;cursor:pointer;}
.tt-gallery__nav span,.tt-lightbox__nav span{width:11px;height:11px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;}
.tt-gallery__nav--prev span,.tt-lightbox__nav--prev span{transform:translateX(2px) rotate(45deg);}
.tt-gallery__nav--next span,.tt-lightbox__nav--next span{transform:translateX(-2px) rotate(225deg);}
.tt-gallery__nav:disabled{opacity:.35;cursor:default;}
.tt-gallery__nav:not(:disabled):hover,.tt-lightbox__nav:hover{border-color:#1f2a22 !important;}

/* ---------- Full-screen viewer ---------- */
.tt-lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#111;color:#fff;}
.tt-lightbox::backdrop{background:rgba(0,0,0,.85);}
.tt-lightbox[open]{display:block;}
.tt-lightbox__stage{position:absolute;inset:56px 0 72px;display:flex;align-items:center;justify-content:center;touch-action:pan-y pinch-zoom;}
.tt-lightbox__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.tt-lightbox__close{position:absolute;top:8px;right:8px;width:48px;height:48px;padding:0 !important;min-width:0 !important;border:0 !important;
  border-radius:50%;background:rgba(255,255,255,.14) !important;color:#fff !important;font-size:2rem;line-height:1;cursor:pointer;}
.tt-lightbox__nav{position:absolute;bottom:12px;}
.tt-lightbox__nav--prev{left:calc(50% - 110px);}
.tt-lightbox__nav--next{right:calc(50% - 110px);}
.tt-lightbox__count{position:absolute;bottom:24px;left:0;right:0;margin:0;text-align:center;font-size:1rem;pointer-events:none;}
@media (min-width:1001px){
  .tt-lightbox__stage{inset:56px 96px 24px;}
  .tt-lightbox__nav{top:calc(50% - 24px);bottom:auto;}
  .tt-lightbox__nav--prev{left:24px;}
  .tt-lightbox__nav--next{right:24px;}
  .tt-lightbox__count{bottom:auto;top:20px;}
}
html.tt-lightbox-on{overflow:hidden;}