/* Letras del Camino v2.3.69 — ONE shared viewer design and page-turn effect.
 * Both the product and article templates opt in via ldc-viewer-* classes.
 * The product's WooCommerce CTA, statistics and images remain product-only. */

/* Same outer shell size, corner rounding and panel proportions. */
body.ldc-book-viewer .ldc-viewer-shell.ldc-sv-shell,
body.single-product .ldc-viewer-shell.ldc-product-modal-shell {
  width:min(100%,1390px);
  height:calc(100% - 2px);
  max-height:940px;
  min-height:0;
  grid-template-columns:minmax(0,1fr) minmax(330px,35%);
  border-radius:27px;
  border:1px solid rgba(174,128,59,.2);
  overflow:hidden;
}

/* Shared navigation: one selector and rule set for both types of page. */
:is(.ldc-sv-shell,.ldc-product-modal-shell) .ldc-viewer-navigation {
  position:relative;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  grid-column:1;
  gap:17px;
  width:100%;
  min-height:66px;
  padding:9px 22px;
  border:0;
  border-top:1px solid #e5ddd2;
  border-radius:0;
  margin:0;
  left:auto;right:auto;bottom:auto;
  transform:none;
  background:rgba(249,246,240,.97);
  box-shadow:0 -5px 22px rgba(64,42,19,.04);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
:is(.ldc-sv-shell,.ldc-product-modal-shell) .ldc-viewer-arrow {
  display:grid;
  place-items:center;
  flex:0 0 43px;
  width:43px;height:43px;min-width:43px;min-height:43px;
  padding:0;
  border:1px solid #dfd1bc;
  border-radius:50%;
  background:#fff;
  color:#946a2f;
  cursor:pointer;
  font:24px/1 Arial,sans-serif;
  transition:background .2s,border-color .2s;
}
:is(.ldc-sv-shell,.ldc-product-modal-shell) .ldc-viewer-arrow svg {
  display:block;width:19px;height:19px;flex:none;margin:auto;
}
:is(.ldc-sv-shell,.ldc-product-modal-shell) .ldc-viewer-arrow:hover:not(:disabled) {
  background:rgba(174,128,59,.13);
  color:#946a2f;
  border-color:#ae803b;
}
:is(.ldc-sv-shell,.ldc-product-modal-shell) .ldc-viewer-arrow:disabled {
  opacity:.35;cursor:default;
}
:is(.ldc-sv-shell,.ldc-product-modal-shell) .ldc-viewer-arrow:focus-visible {
  outline:2px solid #ae803b;outline-offset:3px;
}
:is(.ldc-sv-shell,.ldc-product-modal-shell) .ldc-viewer-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:73px;
  gap:0;
  color:#4b4238;
  font:600 16px/1.2 var(--ldc-title),Georgia,serif;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
:is(.ldc-sv-shell,.ldc-product-modal-shell) .ldc-viewer-count > * { padding-inline:0; }
:is(.ldc-sv-shell,.ldc-product-modal-shell) .ldc-viewer-count b {color:#4b4238;}

/* ONE turn effect: the article leaves and the product's temporary image
 * layers are animated by exactly the same classes and JS driver. */
@keyframes ldcViewerTurnInNext {from{opacity:.38;transform:rotateY(13deg) translateX(28px)}to{opacity:1;transform:rotateY(0) translateX(0)}}
@keyframes ldcViewerTurnOutNext {from{opacity:1;transform:rotateY(0)}to{opacity:0;transform:rotateY(-13deg) translateX(-28px)}}
@keyframes ldcViewerTurnInBack {from{opacity:.38;transform:rotateY(-13deg) translateX(-28px)}to{opacity:1;transform:rotateY(0) translateX(0)}}
@keyframes ldcViewerTurnOutBack {from{opacity:1;transform:rotateY(0)}to{opacity:0;transform:rotateY(13deg) translateX(28px)}}
.ldc-turn-enter-next{animation:ldcViewerTurnInNext .38s ease-out both;z-index:2;}
.ldc-turn-leave-next{animation:ldcViewerTurnOutNext .38s ease-in both;z-index:1;}
.ldc-turn-enter-back{animation:ldcViewerTurnInBack .38s ease-out both;z-index:2;}
.ldc-turn-leave-back{animation:ldcViewerTurnOutBack .38s ease-in both;z-index:1;}

/* A product has a native scroll-snap/swipe track; only for arrow/keyboard
 * navigation is a visual overlay used to reproduce the exact book effect. */
.single-product .ldc-viewer-gallery-overlay {
  position:absolute;
  z-index:7;
  top:0;right:0;left:0;bottom:66px;
  overflow:hidden;
  perspective:1400px;
  pointer-events:none;
  background:radial-gradient(circle at 15% 10%,rgba(255,255,255,.75),transparent 34%),linear-gradient(145deg,#e8ded0 0%,#f5f0e9 55%,#e8ddce 100%);
}
.single-product .ldc-viewer-gallery-layer {
  position:absolute;inset:0;
  width:100%;height:100%;margin:0;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,2vw,25px);
  flex:none;scroll-snap-align:none;
  transform-origin:left center;backface-visibility:hidden;
}
.single-product .ldc-viewer-gallery-layer img {max-height:100%!important;max-width:100%!important;object-fit:contain;}

@media(max-width:1100px) and (min-width:901px) {
  body.ldc-book-viewer .ldc-viewer-shell.ldc-sv-shell,
  body.single-product .ldc-viewer-shell.ldc-product-modal-shell {
    grid-template-columns:minmax(0,1fr) minmax(310px,38%);
  }
}
@media(max-width:900px) {
  body.ldc-book-viewer .ldc-viewer-shell.ldc-sv-shell,
  body.single-product .ldc-viewer-shell.ldc-product-modal-shell {
    width:100%;height:100%;max-height:none;min-height:0;
    border-radius:19px;
    grid-template-columns:minmax(0,1fr);
  }
  :is(.ldc-sv-shell,.ldc-product-modal-shell) .ldc-viewer-navigation {min-height:64px;padding:7px 10px;}
  .single-product .ldc-viewer-gallery-overlay {bottom:64px;}
  .single-product .ldc-viewer-gallery-layer {padding:8px;}
  /* Same remaining viewport, outer spacing and rounded card as the book. */
  body.single-product .site-header {z-index:5100;}
  body.admin-bar.single-product {--ldc-product-admin-h:46px;}
  body.single-product .ldc-product-viewer-page,
  body.admin-bar.single-product .ldc-product-viewer-page {
    position:fixed;
    z-index:5000;
    top:calc(72px + var(--ldc-product-admin-h,0px));
    bottom:0;left:0;right:0;
    width:100%;height:auto;min-height:0;
    padding:7px;
    display:flex;align-items:stretch;justify-content:center;
    overflow:hidden;
  }
  body.single-product .ldc-product-viewer-page > .ldc-product-viewer-article {display:flex;flex:1 1 auto;min-height:0;min-width:0;}
  body.single-product .ldc-viewer-shell.ldc-product-modal-shell {
    display:grid;
    grid-template-rows:minmax(165px,52%) minmax(0,1fr);
    overflow:hidden;
    margin:auto;
  }
  body.single-product .ldc-product-stage {grid-row:1;min-height:0;grid-template-rows:minmax(0,1fr) 64px;}
  body.single-product .ldc-product-panel {grid-row:2;min-height:0;}
}
@media(prefers-reduced-motion:reduce) {
  .ldc-turn-enter-next,.ldc-turn-leave-next,.ldc-turn-enter-back,.ldc-turn-leave-back{animation:none!important;}
}


/* v2.3.70 — A single natural vertical reader for mobile product pages.
   The desktop layout still uses exactly the same grid children as before.
   This is presentation only: WooCommerce actions and gallery handlers stay intact. */
.single-product .ldc-product-mobile-scroller { display:contents; }
@media (max-width:760px) {
  /* The header and close X remain fixed; only the combined product body scrolls. */
  body.single-product .ldc-viewer-shell.ldc-product-modal-shell {
    display:block;
    grid-template-rows:none;
    grid-template-columns:none;
    overflow:hidden;
  }
  body.single-product .ldc-product-mobile-scroller {
    --ldc-product-photo-height:min(calc((100vw - 30px) * var(--ldc-product-photo-ratio, 1) + 14px), 68dvh);
    --ldc-product-nav-height:64px;
    --ldc-product-photo-peek:76px;
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:#c4ae8d transparent;
    background:#fffdf9;
    scroll-behavior:auto;
  }
  body.single-product .ldc-product-mobile-scroller::-webkit-scrollbar {width:4px;}
  body.single-product .ldc-product-mobile-scroller::-webkit-scrollbar-thumb {background:#c4ae8d;border-radius:5px;}
  /* Keep only a small strip of the artwork above the navigation as the
     reader scrolls down. Scrolling up restores the complete artwork. */
  body.single-product .ldc-product-stage {
    position:sticky;
    z-index:3;
    top:calc(var(--ldc-product-photo-peek) - var(--ldc-product-photo-height));
    display:grid;
    grid-template-rows:var(--ldc-product-photo-height) var(--ldc-product-nav-height);
    width:100%;
    height:calc(var(--ldc-product-photo-height) + var(--ldc-product-nav-height));
    min-height:0;
    max-height:none;
    aspect-ratio:auto;
    margin:0;
    padding:0;
    border-bottom:1px solid #e5ddd2;
    border-radius:0;
  }
  /* A one-image product has no navigation bar: keep the photo proportions
     and the same natural sticky peek without reserving an empty 64px row. */
  body.single-product .ldc-product-stage:not(:has(.ldc-product-gallery-controls)) {
    grid-template-rows:var(--ldc-product-photo-height);
    height:var(--ldc-product-photo-height);
    top:calc(var(--ldc-product-photo-peek) - var(--ldc-product-photo-height));
  }
  body.single-product .ldc-product-gallery-track {
    grid-row:1;
    width:100%;
    height:var(--ldc-product-photo-height);
    min-height:0;
    overscroll-behavior-y:auto;
  }
  body.single-product .ldc-product-gallery-slide {height:100%;padding:7px;}
  body.single-product .ldc-product-gallery-image {
    display:block;
    width:100%!important;
    height:100%!important;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:9px;
  }
  body.single-product .ldc-product-gallery-controls {
    grid-row:2;
    height:var(--ldc-product-nav-height);
    min-height:var(--ldc-product-nav-height);
    padding:7px 10px;
    z-index:10;
  }
  body.single-product .ldc-product-panel {display:contents;}
  body.single-product .ldc-product-panel-scroll {
    display:block;
    flex:none;
    min-height:0;
    height:auto;
    max-height:none;
    overflow:visible;
    padding:20px 18px 36px;
    background:#fffdf9;
    border:0;
  }
  body.single-product .ldc-product-panel-actions {
    position:sticky;
    bottom:0;
    left:auto;
    right:auto;
    z-index:11;
    display:flex;
    width:100%;
    min-height:75px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    border-top:1px solid #e5ddd2;
    background:#faf8f4;
    box-shadow:0 -5px 20px rgba(64,42,19,.07);
  }
  body.single-product .ldc-product-close {position:absolute;top:12px;right:12px;z-index:18;}
  /* The book-turn overlay must cover the picture only, not the controls. */
  body.single-product .ldc-viewer-gallery-overlay {bottom:var(--ldc-product-nav-height);}
}
@media (max-width:390px) {
  body.single-product .ldc-product-mobile-scroller {--ldc-product-photo-height:min(calc((100vw - 26px) * var(--ldc-product-photo-ratio, 1) + 14px), 68dvh);}
  body.single-product .ldc-product-panel-actions {gap:7px;padding:9px 8px calc(9px + env(safe-area-inset-bottom,0px));}
}

/* v2.3.71 — Finger swipes now use the same shared book-turn as the arrows.
   Horizontal browser scroll-snap is disabled only for touch on phone screens;
   pan-y preserves natural scrolling down into the product description. */
@media (max-width:760px) and (pointer:coarse) {
  body.single-product .ldc-product-gallery-track {touch-action:pan-y;}
}
@media (max-width:760px) {
  /* A slim gold rule replaces the 64px buttons and the remaining artwork
     shrinks to a small peek. The reader can then use almost the full screen. */
  body.single-product .ldc-product-mobile-scroller.is-gallery-compact {
    --ldc-product-nav-height:9px;
    --ldc-product-photo-peek:23px;
  }
  body.single-product .ldc-product-stage {
    transition:top .22s ease, height .22s ease, grid-template-rows .22s ease;
  }
  body.single-product .ldc-product-gallery-controls {
    transition:height .22s ease,min-height .22s ease,padding .22s ease;
  }
  body.single-product .ldc-product-mobile-scroller.is-gallery-compact .ldc-product-gallery-controls {
    overflow:hidden;
    padding:0;
    gap:0;
    border-top:1px solid #d3c2a9;
    border-bottom:1px solid #d3c2a9;
    background:#f0e7da;
    box-shadow:none;
    pointer-events:none;
  }
  body.single-product .ldc-product-mobile-scroller.is-gallery-compact .ldc-product-gallery-controls > * {
    visibility:hidden;
    opacity:0;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.single-product .ldc-product-stage,
  body.single-product .ldc-product-gallery-controls {transition:none!important;}
}