/*
Theme Name: Storefront Child
Theme URI: https://exploretourtravel.com/
Description: Minimal child theme for Storefront. Layout polish + PDP gallery styles + tiny lightbox.
Author: Explore Dev
Template: storefront
Version: 1.0.0
*/

/* ================================
 * Canvas width + spacing
 * ================================ */
.single-product .site-content .col-full,
.storefront-breadcrumb,
.et-hero,
.ri-hybrid-gallery {
  max-width: 1200px !important;
  margin: 0 auto !important;
 
}


.fancybox__toolbar {
  top: var(--fancybox-toolbar-offset, 64px) !important;
}
/* Hide all Fancybox toolbar buttons except close */
.fancybox__toolbar .fancybox__button--zoom,
.fancybox__toolbar .fancybox__button--fullscreen,
.fancybox__toolbar .fancybox__button--slideshow,
.fancybox__toolbar .fancybox__button--thumbs {
  display: none !important;
}

.fancybox__toolbar .fancybox__button--close {
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 6px;
  padding: 6px;
  font-size: 16px;
}

/* ================================
 * Fancybox Caption Position Fix
 * ================================ */
.fancybox__caption {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  background: rgba(0, 0, 0, 0.6); /* Optional: dark overlay for readability */
  color: #fff;
  padding: 8px 16px;
  width: 100%;
  text-align: center;
  z-index: 9999;
  font-size: 16px; /* Adjust for brand tone */
}

/* ================================
 * PDP Gallery Layout — GetYourGuide Style
 * ================================ */

/* Container */
.ri-hybrid-gallery{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* 3-column grid; give the row a fixed height; make columns stretch */
.ri-hybrid-top{
  --rowH: 440px;                     /* height of the whole top band */
  display:grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  align-items:stretch;
}

/* Each tile must fill its grid cell (no max-*) */
.ri-hero,
.ri-center,
.ri-right-item{
  width:100%;
  height:var(--rowH);
  overflow:hidden;
}



/* Right column: two equal halves of the row height */
.ri-right{
  display:grid;
  grid-template-rows: 1fr 1fr;
  gap:12px;
}
.ri-right-item{ height:auto; }       /* height now comes from the rows above */

/* Media should cover the tile */
.ri-img,
.ri-hero img,
.ri-center img,
.ri-right-item img,
.ri-center video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}

/* Only if an earlier rule is still forcing a uniform radius */
.ri-right-item a { border-radius: 0 !important; }

/* Optional: if your center should be portrait, keep it portrait without changing row height */
.ri-center{ aspect-ratio:auto; }     /* we use height; no need for aspect-ratio */

/* Overlay button */
.ri-viewall-overlay{
  position:absolute; right:12px; bottom:12px;
  background:rgba(0,0,0,.6); color:#fff; padding:6px 12px;
  border-radius:6px; font-size:.875rem; cursor:pointer;
	
}


/* Make anchors fill their tiles so fancybox clicks anywhere */
.ri-hero a,
.ri-center a,
.ri-right-item a{ display:block; width:100%; height:100%; }

/* LEFT HERO — welcoming entry curve */
.ri-hero a,
.ri-hero img {
  border-radius: 24px 0 0 20px !important; /* TL TR BR BL */
  overflow: hidden;
}

/* CENTER VIDEO — neutral but smooth transition */
.ri-center a,
.ri-center img,
.ri-center video {
  border-radius: 16px !important;
  overflow: hidden;
}

/* RIGHT TOP — visual continuation upwards */
.ri-right-item:first-child a,
.ri-right-item:first-child img {
  border-radius: 0 24px 0 0 !important; /* TL TR BR BL */
  overflow: hidden;
}

/* RIGHT BOTTOM — visual rest and completion */
.ri-right-item:last-child a,
.ri-right-item:last-child img {
  border-radius: 0 0 24px 0 !important; /* TL TR BR BL */
  overflow: hidden;
}

/* Optional: slight glow on the bottom-right end tile (resting point) */
.ri-right-item:last-child {
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.ri-right-item:last-child {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.ri-hybrid-top figure {
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
/* Fix white corner bleed behind rounded images */
.ri-right-item,
.ri-hero,
.ri-center {
  border-radius: inherit;
  overflow: hidden;              /* force image/video to clip cleanly */
  background: transparent !important; /* remove white base layer */
}

/* Apply corner shapes directly to the container instead of the img */
.ri-hero {
  border-radius: 24px 0 0 20px !important;
}
.ri-center {
  border-radius: 16px !important;
}
.ri-right-item:first-child {
  border-radius: 0 24px 0 0 !important;
}
.ri-right-item:last-child {
  border-radius: 0 0 24px 0 !important;
}

/* Ensure child elements don’t override corners */
.ri-hero img,
.ri-center img,
.ri-right-item img,
.ri-center video {
  border-radius: 0 !important;   /* prevents double rounding mismatch */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}




/* If you previously had a uniform radius on all right items, remove or neutralize it: */
/* .ri-right-item a { border-radius: 0; }  <-- optional if needed to override old rules */

/* Optional: simplify on mobile if right tiles become two columns */
@media (max-width: 980px){
  .ri-right-item:first-child a,
  .ri-right-item:last-child a,
  .ri-right-item:first-child .ri-img,
  .ri-right-item:last-child .ri-img {
    border-radius: 12px; /* or keep the custom radii if you prefer */
  }
}


/* Responsive: stack on mobile and use a shallower row */
@media (max-width: 980px){
  .ri-hybrid-top{
    grid-template-columns:1fr;
    --rowH: 54vw;                    /* nice responsive height */
  }
  .ri-right{ grid-template-columns:1fr 1fr; grid-template-rows:none; }
}
@media (max-width: 640px){
  .ri-hybrid-gallery{ padding:0 12px; }
}


/* Hide Storefront prev/next beside gallery */
nav.storefront-product-pagination,
.storefront-product-pagination a,
.storefront-product-pagination span {
  display: none !important;
}