/* ============================================================
   PHOENIX CATALOG — PAGE-ONLY STYLES
   فقط برای Template: page-catalog.php
   ============================================================ */

body.phx-catalog-page{
  background:#002f30;
  color:#fff;
  overflow-x:hidden;
}

body.phx-catalog-page .phx-catalog-shell{
  --cat-deep:#002e2e;
  --cat-deeper:#001f20;
  --cat-teal:#00d7d2;
  --cat-soft:#a7d8d5;
  width:100%;
  overflow:hidden;
  background:var(--cat-deep);
}

/* ============================================================
   HERO — 1905 × 600 style / same compact height as site heroes
   Header remains the existing global header, only positioned over
   this hero on this page.
   ============================================================ */

body.phx-catalog-page>header.navbar{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  margin:20px 40px 0!important;
  z-index:100!important;
}

.phx-catalog-hero{
  position:relative;
  width:100%;
  height:600px;
  min-height:600px;
  max-height:600px;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  padding:0;
}

.phx-catalog-hero-media{
  position:absolute;
  inset:0;
  z-index:-3;
}
.phx-catalog-hero-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  filter:saturate(.78) contrast(1.08) brightness(.76);
}
.phx-catalog-hero-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(
      90deg,
      rgba(0,20,21,.10) 0%,
      rgba(0,31,31,.24) 38%,
      rgba(0,43,43,.68) 70%,
      rgba(0,40,40,.94) 100%
    );
}

.phx-catalog-hero-inner{
  width:min(1680px,calc(100% - 96px));
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  direction:rtl;
}
.phx-catalog-hero-copy{
  width:min(610px,46%);
  max-width:610px;
  margin-right:auto;
  direction:rtl;
  text-align:right;
  padding-top:35px;
}
.phx-catalog-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--cat-teal);
  font-size:14px;
  font-weight:800;
  margin-bottom:18px;
}
.phx-catalog-kicker:after{
  content:"";
  width:34px;
  height:1px;
  background:currentColor;
  display:block;
}
.phx-catalog-hero h1{
  margin:0;
  color:#fff;
  font-size:46px;
  line-height:1.42;
  font-weight:850;
  letter-spacing:-.8px;
}
.phx-catalog-hero p{
  margin:20px 0 0;
  color:#eaf6f5;
  font-size:15px;
  line-height:2.2;
  max-width:560px;
}
.phx-catalog-hero-actions{
  display:flex;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px;
}
.phx-catalog-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 23px;
  border-radius:28px;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  transition:transform .25s ease,background .25s ease;
}
.phx-catalog-btn-primary{
  color:#002c2d;
  background:var(--cat-teal);
  border:1px solid var(--cat-teal);
}
.phx-catalog-btn-ghost{
  color:var(--cat-teal);
  border:1px solid var(--cat-teal);
  background:rgba(0,20,21,.18);
}
.phx-catalog-btn:hover{transform:translateY(-2px)}

/* No extra cover/mockup is rendered in the Hero. */

/* ============================================================
   INTRO
   ============================================================ */

.phx-catalog-intro{
  background:#003d3c;
  padding:58px 7vw 54px;
  text-align:center;
}
.phx-catalog-intro-inner{max-width:850px;margin:auto}
.phx-catalog-intro .phx-catalog-kicker{justify-content:center}
.phx-catalog-intro .phx-catalog-kicker:before{
  content:"";
  width:34px;
  height:1px;
  background:currentColor;
}
.phx-catalog-intro h2{
  margin:0;
  color:#fff;
  font-size:32px;
  line-height:1.55;
}
.phx-catalog-intro p{
  margin:17px auto 0;
  color:#c8e2e0;
  font-size:14px;
  line-height:2.25;
  max-width:700px;
}

/* ============================================================
   VIEWER — framed digital book
   ============================================================ */

.phx-catalog-viewer-section{
  background:
    radial-gradient(circle at 50% 20%,#07504d 0%,#003637 45%,#001f20 100%);
  padding:76px 5vw 90px;
}

.phx-catalog-section-head{
  text-align:center;
  max-width:850px;
  margin:0 auto 34px;
}
.phx-catalog-section-head .phx-catalog-kicker{justify-content:center}
.phx-catalog-section-head .phx-catalog-kicker:before{
  content:"";
  width:34px;
  height:1px;
  background:currentColor;
}
.phx-catalog-section-head h2{
  margin:0;
  color:#fff;
  font-size:31px;
  line-height:1.5;
}
.phx-catalog-section-head p{
  margin:10px 0 0;
  color:#9fc7c5;
  font-size:13px;
  line-height:2;
}

.phx-catalog-viewer{
  width:min(1320px,100%);
  margin:auto;
}

.phx-catalog-viewer-frame{
  position:relative;
  padding:22px 22px 0;
  border:1px solid rgba(80,220,214,.18);
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(7,53,54,.96),rgba(2,30,31,.98));
  box-shadow:
    0 32px 80px rgba(0,0,0,.38),
    0 0 0 1px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.phx-catalog-book-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:3px;
  background:#001d1e;
  perspective:2600px;
  perspective-origin:50% 50%;
  isolation:isolate;
}


/* ============================================================
 * CATALOG PLAY OVERLAY — scoped only to the catalog viewer
 * ============================================================ */
.phx-catalog-play{
  position:absolute;
  left:50%;
  top:50%;
  z-index:30;
  transform:translate(-50%,-50%);
  min-width:210px;
  min-height:62px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid rgba(111,236,225,.48);
  border-radius:999px;
  background:rgba(0,31,32,.82);
  color:#e7fffc;
  box-shadow:
    0 18px 45px rgba(0,0,0,.32),
    0 0 0 8px rgba(0,215,210,.045),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  font:700 14px/1 inherit;
  transition:transform .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease,opacity .35s ease;
}
.phx-catalog-play:hover{
  transform:translate(-50%,-50%) scale(1.035);
  background:rgba(0,45,45,.92);
  border-color:rgba(111,236,225,.78);
  box-shadow:
    0 22px 55px rgba(0,0,0,.38),
    0 0 0 10px rgba(0,215,210,.055),
    inset 0 1px 0 rgba(255,255,255,.13);
}
.phx-catalog-play:focus-visible{
  outline:2px solid rgba(111,236,225,.9);
  outline-offset:5px;
}
.phx-catalog-play[hidden]{display:none}
.phx-catalog-play-icon{
  position:relative;
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(111,236,225,.45);
  border-radius:50%;
  background:rgba(0,215,210,.10);
}
.phx-catalog-play-icon::before{
  content:"";
  width:0;
  height:0;
  margin-left:3px;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:10px solid currentColor;
}
.phx-catalog-play-text{white-space:nowrap}
.phx-catalog-play.is-playing{
  opacity:0;
  pointer-events:none;
}
.phx-catalog-viewer.is-started .phx-catalog-play{
  opacity:1;
  pointer-events:auto;
  min-width:56px;
  width:56px;
  min-height:56px;
  height:56px;
  padding:0;
  gap:0;
  border-radius:50%;
  background:rgba(0,31,32,.72);
  box-shadow:0 14px 35px rgba(0,0,0,.28),0 0 0 7px rgba(0,215,210,.04),inset 0 1px 0 rgba(255,255,255,.10);
}
.phx-catalog-viewer.is-started .phx-catalog-play .phx-catalog-play-text{
  display:none;
}
.phx-catalog-viewer.is-started .phx-catalog-play.is-playing{
  opacity:1;
  pointer-events:auto;
}
.phx-catalog-play.is-playing .phx-catalog-play-icon::before{
  width:10px;
  height:14px;
  margin:0;
  border:0;
  border-left:3px solid currentColor;
  border-right:3px solid currentColor;
}
.phx-catalog-play.is-playing:hover{
  transform:translate(-50%,-50%) scale(1.06);
}


.phx-catalog-sheet{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transform-origin:100% 50%;
  transform:rotateY(0deg) translateZ(0);
  will-change:transform;
  z-index:2;
}

/*
 * Natural book-page motion:
 * - starts at the outside edge of the page
 * - bends slightly as it crosses the spine
 * - slows gently before landing
 * - adds a moving fold shadow and a very subtle paper edge
 */
/* Natural book-page turn — scoped only to the catalog sheet. */
.phx-catalog-sheet.is-turn-next{
  transform-origin:100% 50%;
  animation:phxCatalogBookNext 1.12s cubic-bezier(.22,.78,.18,1) forwards;
}
.phx-catalog-sheet.is-turn-prev{
  transform-origin:0 50%;
  animation:phxCatalogBookPrev 1.12s cubic-bezier(.22,.78,.18,1) forwards;
}

.phx-catalog-sheet.is-turn-next::before,
.phx-catalog-sheet.is-turn-prev::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:48%;
  z-index:20;
  pointer-events:none;
  opacity:0;
  will-change:opacity,transform;
}
.phx-catalog-sheet.is-turn-next::before{
  right:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.035) 32%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.42) 100%);
  transform-origin:100% 50%;
  animation:phxCatalogBookShadowNext 1.12s ease-in-out forwards;
}
.phx-catalog-sheet.is-turn-prev::before{
  left:0;
  background:linear-gradient(270deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.035) 32%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.42) 100%);
  transform-origin:0 50%;
  animation:phxCatalogBookShadowPrev 1.12s ease-in-out forwards;
}

.phx-catalog-sheet.is-turn-next::after,
.phx-catalog-sheet.is-turn-prev::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  z-index:21;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.18) 35%,rgba(0,0,0,.46) 100%);
  box-shadow:0 0 12px rgba(255,255,255,.14);
  opacity:0;
}
.phx-catalog-sheet.is-turn-next::after{
  right:0;
  animation:phxCatalogBookEdgeNext 1.12s ease-in-out forwards;
}
.phx-catalog-sheet.is-turn-prev::after{
  left:0;
  animation:phxCatalogBookEdgePrev 1.12s ease-in-out forwards;
}

@keyframes phxCatalogBookNext{
  0%{transform:rotateY(0deg) translateZ(0) scaleX(1)}
  12%{transform:rotateY(-12deg) translateZ(5px) scaleX(.999)}
  30%{transform:rotateY(-52deg) translateZ(17px) scaleX(.992)}
  50%{transform:rotateY(-96deg) translateZ(25px) scaleX(.982)}
  68%{transform:rotateY(-137deg) translateZ(17px) scaleX(.991)}
  86%{transform:rotateY(-169deg) translateZ(6px) scaleX(.998)}
  100%{transform:rotateY(-180deg) translateZ(0) scaleX(1)}
}
@keyframes phxCatalogBookPrev{
  0%{transform:rotateY(0deg) translateZ(0) scaleX(1)}
  12%{transform:rotateY(12deg) translateZ(5px) scaleX(.999)}
  30%{transform:rotateY(52deg) translateZ(17px) scaleX(.992)}
  50%{transform:rotateY(96deg) translateZ(25px) scaleX(.982)}
  68%{transform:rotateY(137deg) translateZ(17px) scaleX(.991)}
  86%{transform:rotateY(169deg) translateZ(6px) scaleX(.998)}
  100%{transform:rotateY(180deg) translateZ(0) scaleX(1)}
}
@keyframes phxCatalogBookShadowNext{
  0%,10%{opacity:0;transform:translateX(0) scaleX(.12)}
  30%{opacity:.28;transform:translateX(-10%) scaleX(.48)}
  50%{opacity:.72;transform:translateX(-32%) scaleX(1)}
  70%{opacity:.42;transform:translateX(-64%) scaleX(.72)}
  100%{opacity:0;transform:translateX(-100%) scaleX(.10)}
}
@keyframes phxCatalogBookShadowPrev{
  0%,10%{opacity:0;transform:translateX(0) scaleX(.12)}
  30%{opacity:.28;transform:translateX(10%) scaleX(.48)}
  50%{opacity:.72;transform:translateX(32%) scaleX(1)}
  70%{opacity:.42;transform:translateX(64%) scaleX(.72)}
  100%{opacity:0;transform:translateX(100%) scaleX(.10)}
}
@keyframes phxCatalogBookEdgeNext{
  0%{opacity:.06;transform:translateX(0)}
  50%{opacity:.82;transform:translateX(-20%)}
  100%{opacity:.12;transform:translateX(-100%)}
}
@keyframes phxCatalogBookEdgePrev{
  0%{opacity:.06;transform:translateX(0)}
  50%{opacity:.82;transform:translateX(20%)}
  100%{opacity:.12;transform:translateX(100%)}
}

.phx-catalog-face{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:#fff;
  overflow:hidden;
  box-shadow:
    0 28px 55px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.08);
}
.phx-catalog-face canvas{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
}
.phx-catalog-face-back{
  transform:rotateY(180deg);
}

.phx-catalog-sheet:not(.is-turn-next):not(.is-turn-prev)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.025),transparent 18%,transparent 78%,rgba(0,0,0,.09));
  opacity:.5;
}

.phx-catalog-empty{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  background:linear-gradient(135deg,#063f3e,#002b2c);
  color:#d9f2f0;
}
.phx-catalog-empty[hidden]{display:none}
.phx-catalog-empty-mark{
  width:66px;
  height:66px;
  border:1px solid rgba(0,215,210,.55);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--cat-teal);
  font-size:26px;
  font-weight:900;
}
.phx-catalog-empty strong{font-size:20px}
.phx-catalog-empty span{font-size:13px;color:#9ec7c4}

/* Loading overlay intentionally removed: page rendering is silent. */

/* ============================================================
   MEDIA-LIKE PLAYBACK BAR — scoped only to the catalog viewer
   Hidden until Play; functional pause / seek / fullscreen controls.
   ============================================================ */
/* ============================================================
   CONTROL BAR — one clean row
   Hidden until the catalog is started. Scoped to this viewer only.
   ============================================================ */
/* ============================================================
   CATALOG CONTROLS — scoped only to this viewer
   ============================================================ */

/* Navigation buttons sit outside the book pages, centered vertically. */
.phx-catalog-viewer .phx-catalog-controls{
  position:relative;
  min-height:64px;
  display:block;
  margin:0;
  padding:0;
  color:#a8cecc;
  border-top:0;
  direction:ltr;
}

.phx-catalog-viewer .phx-catalog-control-nav{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:block;
}

.phx-catalog-viewer .phx-catalog-nav{
  position:absolute;
  top:50%;
  z-index:36;
  transform:translateY(-50%);
  width:46px;
  min-width:46px;
  height:46px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(111,236,225,.20);
  border-radius:50%;
  background:rgba(0,31,32,.72);
  color:#cde8e5;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.20);
  pointer-events:auto;
  transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease;
}
.phx-catalog-viewer .phx-catalog-nav[data-catalog-prev]{left:4px;}
.phx-catalog-viewer .phx-catalog-nav[data-catalog-next]{right:4px;}
.phx-catalog-viewer .phx-catalog-nav:hover{
  color:var(--cat-teal);
  background:rgba(0,45,45,.92);
  border-color:rgba(0,215,210,.42);
  transform:translateY(-50%) scale(1.04);
}
.phx-catalog-viewer .phx-catalog-nav:disabled{
  opacity:.35;
  cursor:default;
  transform:translateY(-50%);
}
.phx-catalog-arrow{
  font-size:28px;
  line-height:1;
  font-weight:300;
}
.phx-catalog-nav span:not(.phx-catalog-arrow){
  display:none;
}

/* Page counter remains below the book, centered. */
.phx-catalog-viewer .phx-catalog-page-counter{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:120px;
  color:#6e9997;
  direction:ltr;
  font-size:11px;
  letter-spacing:.2px;
}
.phx-catalog-viewer .phx-catalog-page-counter b{color:#fff;font-size:14px}
.phx-catalog-viewer .phx-catalog-page-counter i{font-style:normal;color:#517a78}

/* Zoom, fullscreen and download remain below the book, outside the pages. */
.phx-catalog-viewer .phx-catalog-tools{
  position:absolute;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  direction:ltr;
  border-left:0;
  padding:0;
}
.phx-catalog-viewer .phx-catalog-tools button,
.phx-catalog-viewer .phx-catalog-tools a{
  appearance:none;
  min-width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:transparent;
  border:1px solid transparent;
  border-radius:7px;
  color:#c2ddda;
  font:700 12px/1 inherit;
  cursor:pointer;
  text-decoration:none;
  padding:0 10px;
  transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease;
}
.phx-catalog-viewer .phx-catalog-tools button:hover,
.phx-catalog-viewer .phx-catalog-tools a:hover{
  color:var(--cat-teal);
  background:rgba(0,215,210,.06);
  border-color:rgba(0,215,210,.18);
  transform:translateY(-1px);
}
.phx-catalog-viewer .phx-catalog-tools span{
  min-width:45px;
  text-align:center;
  color:#79a4a2;
  font-size:11px;
}

/* When not started, the bottom controls remain available but the central
   Play control is the only start action. */
.phx-catalog-viewer:not(.is-started) .phx-catalog-controls{
  visibility:visible;
}

/* Keep the book itself completely independent from the controls. */
.phx-catalog-viewer .phx-catalog-book-stage{
  overflow:visible;
}
.phx-catalog-viewer .phx-catalog-book{
  position:relative;
  z-index:2;
}

@media(max-width:700px){
  .phx-catalog-viewer .phx-catalog-nav{
    width:40px;
    min-width:40px;
    height:40px;
  }
  .phx-catalog-viewer .phx-catalog-nav[data-catalog-prev]{left:-2px;}
  .phx-catalog-viewer .phx-catalog-nav[data-catalog-next]{right:-2px;}
  .phx-catalog-viewer .phx-catalog-tools{
    right:0;
    gap:1px;
  }
  .phx-catalog-viewer .phx-catalog-tools button,
  .phx-catalog-viewer .phx-catalog-tools a{
    min-width:34px;
    height:34px;
    padding:0 7px;
  }
}

/* ============================================================
   TOC — preserve existing design
   ============================================================ */

.phx-catalog-toc-section{
  background:#edf6f5;
  color:#073b3d;
  padding:82px 7vw 90px;
}
.phx-catalog-toc-inner{max-width:1120px;margin:auto}
.phx-catalog-section-head-left{
  text-align:right;
  margin:0 0 36px;
  max-width:none;
}
.phx-catalog-section-head-left .phx-catalog-kicker{
  justify-content:flex-start;
  color:#078d87;
}
.phx-catalog-section-head-left h2{
  color:#073b3d;
  font-size:31px;
}
.phx-catalog-toc-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 70px;
}
.phx-catalog-toc-item{
  width:100%;
  display:grid;
  grid-template-columns:60px 1fr 40px;
  align-items:center;
  gap:15px;
  text-align:right;
  border:0;
  border-bottom:1px solid rgba(7,59,61,.12);
  background:transparent;
  padding:22px 0;
  cursor:pointer;
  color:#073b3d;
  font-family:inherit;
}
.phx-catalog-toc-item:hover .phx-catalog-toc-title{color:#008f89}
.phx-catalog-toc-num{
  color:#00a9a3;
  font-weight:800;
  font-size:12px;
}
.phx-catalog-toc-title{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  font-size:15px;
  font-weight:800;
  transition:color .2s;
}
.phx-catalog-toc-title-fa{display:block}
.phx-catalog-toc-title-en{display:block;font-size:.78em;font-weight:500;opacity:.72;text-align:left;direction:ltr}
.phx-catalog-toc-page{
  color:#789493;
  font-size:11px;
}
.phx-catalog-toc-empty{
  grid-column:1/-1;
  color:#718c8c;
  padding:25px 0;
}

/* ============================================================
   CTA — preserve existing design
   ============================================================ */

.phx-catalog-cta{
  position:relative;
  min-height:365px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#003233 var(--phx-catalog-cta-image) center/cover no-repeat;
}
.phx-catalog-cta-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,38,39,.2),rgba(0,42,42,.78) 62%,rgba(0,42,42,.96) 100%);
}
.phx-catalog-cta-copy{
  position:relative;
  z-index:2;
  width:min(600px,48vw);
  margin-right:8vw;
  text-align:right;
}
.phx-catalog-cta-copy h2{
  margin:0;
  color:#fff;
  font-size:35px;
  line-height:1.5;
}
.phx-catalog-cta-copy p{
  margin:15px 0 0;
  color:#d6ebea;
  font-size:14px;
  line-height:2;
}
.phx-catalog-cta-copy a{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:25px;
  padding:12px 24px;
  border:1px solid var(--cat-teal);
  border-radius:26px;
  color:var(--cat-teal);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  transition:transform .25s ease;
}
.phx-catalog-cta-copy a:hover{transform:translateY(-2px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1100px){
  body.phx-catalog-page>header.navbar{
    left:0!important;
    right:0!important;
    margin:14px 16px 0!important;
  }
  .phx-catalog-hero-inner{
    width:calc(100% - 64px);
  }
  .phx-catalog-hero-copy{
    width:min(680px,70%);
  }
  .phx-catalog-hero h1{font-size:38px}
}

@media(max-width:700px){
  body.phx-catalog-page>header.navbar{
    left:0!important;
    right:0!important;
    margin:10px 10px 0!important;
  }
  .phx-catalog-hero{
    height:600px;
    min-height:600px;
    max-height:none;
    align-items:flex-end;
  }
  .phx-catalog-hero-inner{
    width:100%;
    padding:0 7vw 58px;
    align-items:flex-end;
  }
  .phx-catalog-hero-copy{
    width:100%;
    max-width:none;
    padding-top:110px;
  }
  .phx-catalog-hero h1{font-size:29px}
  .phx-catalog-hero p{font-size:12.5px}
  .phx-catalog-hero-actions{margin-top:20px}

  .phx-catalog-intro{padding:58px 7vw}
  .phx-catalog-intro h2,
  .phx-catalog-section-head h2,
  .phx-catalog-section-head-left h2{font-size:26px}

  .phx-catalog-viewer-section{padding:62px 3vw 70px}
  .phx-catalog-viewer-frame{padding:10px 10px 0}
  .phx-catalog-controls{
    min-height:112px;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "counter counter"
      "nav tools";
    gap:5px;
    padding:4px 4px 7px;
  }
  .phx-catalog-page-counter{grid-area:counter}
  .phx-catalog-control-nav{grid-area:nav}
  .phx-catalog-tools{grid-area:tools;border-left:0;padding-left:0}
  .phx-catalog-nav,
  .phx-catalog-tools button,
  .phx-catalog-tools a{min-width:34px;padding:0 7px}
  .phx-catalog-tools{justify-content:flex-end}

  .phx-catalog-toc-section{padding:65px 7vw 75px}
  .phx-catalog-toc-list{grid-template-columns:1fr}
  .phx-catalog-toc-item{grid-template-columns:45px 1fr 35px}

  .phx-catalog-cta{min-height:370px}
  .phx-catalog-cta-copy{
    width:100%;
    margin:0;
    padding:48px 7vw;
  }
  .phx-catalog-cta-copy h2{font-size:27px}
}

/* ============================================================
   PHOENIX CATALOG — TRUE OPEN-BOOK FLIPBOOK OVERRIDE
   Scoped exclusively to Catalog Viewer.
   ============================================================ */
.phx-catalog-book-stage{
  overflow:hidden;
  perspective:2200px;
  perspective-origin:50% 50%;
  background:linear-gradient(180deg,#061f20 0%,#001719 100%);
}
.phx-catalog-book{
  position:relative;
  width:100%;
  height:100%;
  display:block;
  transform-style:preserve-3d;
  isolation:isolate;
  background:#111;
  box-shadow:0 26px 65px rgba(0,0,0,.42);
}
.phx-catalog-page-static,
.phx-catalog-flip-sheet{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  overflow:hidden;
  background:#fff;
}
.phx-catalog-page-static canvas,
.phx-catalog-flip-face canvas{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  display:block;
  object-fit:contain;
  background:#fff;
}
.phx-catalog-page-left{left:0;z-index:2;border-radius:3px 0 0 3px;}
.phx-catalog-page-right{right:0;z-index:1;border-radius:0 3px 3px 0;}
.phx-catalog-page-left:after,
.phx-catalog-page-right:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.phx-catalog-page-left:after{background:linear-gradient(90deg,rgba(0,0,0,.05),transparent 8%,transparent 94%,rgba(0,0,0,.18));}
.phx-catalog-page-right:after{background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 8%,transparent 94%,rgba(255,255,255,.035));}

.phx-catalog-flip-sheet{
  right:0;
  left:auto;
  z-index:12;
  overflow:visible;
  transform-origin:0% 50%;
  transform:rotateY(0deg);
  transform-style:preserve-3d;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
  will-change:transform;
  pointer-events:none;
}
.phx-catalog-flip-face{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#fff;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.phx-catalog-flip-front{transform:rotateY(0deg);z-index:2;}
.phx-catalog-flip-back{transform:rotateY(180deg);z-index:1;}
.phx-catalog-flip-sheet.is-turn-next{
  right:0;
  left:auto;
  transform-origin:0% 50%;
  animation:phxCatalogTrueFlipNext 1.25s cubic-bezier(.18,.72,.18,1) forwards;
}
.phx-catalog-flip-sheet.is-turn-prev{
  left:0;
  right:auto;
  transform-origin:100% 50%;
  animation:phxCatalogTrueFlipPrev 1.25s cubic-bezier(.18,.72,.18,1) forwards;
}
.phx-catalog-flip-sheet.is-turn-next .phx-catalog-flip-front,
.phx-catalog-flip-sheet.is-turn-prev .phx-catalog-flip-front{
  box-shadow:0 18px 42px rgba(0,0,0,.32);
}
.phx-catalog-flip-sheet:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(0,0,0,.42) 55%,rgba(255,255,255,.18));
  box-shadow:0 0 14px rgba(0,0,0,.22);
  opacity:0;
  z-index:10;
}
.phx-catalog-flip-sheet.is-turn-next:after{left:0;animation:phxCatalogSpineEdgeNext 1.25s ease forwards;}
.phx-catalog-flip-sheet.is-turn-prev:after{right:0;animation:phxCatalogSpineEdgePrev 1.25s ease forwards;}

.phx-catalog-spine{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:3px;
  transform:translateX(-50%);
  z-index:20;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.38),rgba(255,255,255,.12),rgba(0,0,0,.42));
  box-shadow:0 0 12px rgba(0,0,0,.32),0 0 2px rgba(255,255,255,.2);
}
.phx-catalog-book-shadow{
  position:absolute;
  left:50%;
  top:0;
  width:12%;
  height:100%;
  transform:translateX(-50%);
  z-index:19;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.18),transparent);
}

@keyframes phxCatalogTrueFlipNext{
  0%{transform:rotateY(0deg);}
  18%{transform:rotateY(-32deg);}
  42%{transform:rotateY(-86deg);}
  55%{transform:rotateY(-104deg);}
  72%{transform:rotateY(-148deg);}
  88%{transform:rotateY(-174deg);}
  100%{transform:rotateY(-180deg);}
}
@keyframes phxCatalogTrueFlipPrev{
  0%{transform:rotateY(0deg);}
  18%{transform:rotateY(32deg);}
  42%{transform:rotateY(86deg);}
  55%{transform:rotateY(104deg);}
  72%{transform:rotateY(148deg);}
  88%{transform:rotateY(174deg);}
  100%{transform:rotateY(180deg);}
}
@keyframes phxCatalogSpineEdgeNext{
  0%{opacity:0;transform:translateX(0);}
  45%{opacity:.7;transform:translateX(-2px);}
  100%{opacity:0;transform:translateX(-8px);}
}
@keyframes phxCatalogSpineEdgePrev{
  0%{opacity:0;transform:translateX(0);}
  45%{opacity:.7;transform:translateX(2px);}
  100%{opacity:0;transform:translateX(8px);}
}

@media (max-width:900px){
  .phx-catalog-book-stage{aspect-ratio:16/9;}
  .phx-catalog-viewer-frame{padding:12px 12px 0;}
  .phx-catalog-spine{width:2px;}
}

/* Each catalog source page is 16:9, therefore the open book itself is 32:9. */
.phx-catalog-book-stage{
  aspect-ratio:32/9;
  max-height:min(70vh,620px);
}
@media (max-width:900px){
  .phx-catalog-book-stage{
    aspect-ratio:32/9;
    max-height:none;
  }
}

/* ============================================================
   CATALOG BOOK — ORDERED TWO-PAGE SPREAD / DEEP SPINE
   Scoped only to the catalog viewer. Pages remain native 16:9.
   ============================================================ */
.phx-catalog-book-stage{
  aspect-ratio:32/9;
  max-height:min(72vh,680px);
  overflow:hidden;
  perspective:2800px;
  perspective-origin:50% 48%;
}
.phx-catalog-book{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  isolation:isolate;
  background:#101616;
  box-shadow:0 32px 75px rgba(0,0,0,.48);
}
.phx-catalog-page-static,
.phx-catalog-next-spread-page,
.phx-catalog-flip-sheet{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  overflow:hidden;
  background:#fff;
}
.phx-catalog-page-static canvas,
.phx-catalog-next-spread-page canvas,
.phx-catalog-flip-face canvas{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  display:block;
  object-fit:contain;
  background:#fff;
}
.phx-catalog-page-left{left:0;z-index:2;border-radius:4px 0 0 4px;}
.phx-catalog-page-right{right:0;z-index:2;border-radius:0 4px 4px 0;}
.phx-catalog-next-spread{position:absolute;inset:0;z-index:1;pointer-events:none;}
.phx-catalog-next-spread-page{background:#fff;}
.phx-catalog-next-spread-left{left:0;}
.phx-catalog-next-spread-right{right:0;}
.phx-catalog-next-spread-page:after,
.phx-catalog-page-static:after{
  content:"";position:absolute;inset:0;pointer-events:none;
}
.phx-catalog-page-left:after{background:linear-gradient(90deg,rgba(0,0,0,.035),transparent 10%,transparent 92%,rgba(0,0,0,.12));}
.phx-catalog-page-right:after{background:linear-gradient(90deg,rgba(0,0,0,.17),transparent 10%,transparent 92%,rgba(255,255,255,.03));}
.phx-catalog-next-spread-left:after{background:linear-gradient(90deg,rgba(0,0,0,.04),transparent 10%,transparent 94%,rgba(0,0,0,.10));}
.phx-catalog-next-spread-right:after{background:linear-gradient(90deg,rgba(0,0,0,.13),transparent 9%,transparent 95%,rgba(255,255,255,.025));}

/* The book has a real recessed gutter, not a decorative hairline. */
.phx-catalog-spine{
  position:absolute;
  left:50%;top:-1.5%;bottom:-1.5%;
  width:18px;
  transform:translateX(-50%);
  z-index:25;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,.48) 0%,
    rgba(0,0,0,.20) 22%,
    rgba(255,255,255,.10) 43%,
    rgba(0,0,0,.46) 62%,
    rgba(0,0,0,.60) 100%);
  box-shadow:
    inset 4px 0 7px rgba(0,0,0,.20),
    inset -4px 0 8px rgba(0,0,0,.28),
    0 0 16px rgba(0,0,0,.32);
  border-radius:8px;
}
.phx-catalog-book-shadow{
  position:absolute;
  left:50%;top:0;width:19%;height:100%;
  transform:translateX(-50%);
  z-index:24;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.34) 0%,rgba(0,0,0,.18) 22%,transparent 68%);
  filter:blur(2px);
}

.phx-catalog-flip-sheet{
  right:0;left:auto;z-index:18;
  overflow:visible;
  transform-origin:0% 50%;
  transform-style:preserve-3d;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
  will-change:transform;
  pointer-events:none;
}
.phx-catalog-flip-face{
  position:absolute;inset:0;overflow:hidden;background:#fff;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.phx-catalog-flip-front{transform:rotateY(0deg);z-index:2;box-shadow:-12px 0 30px rgba(0,0,0,.14);}
.phx-catalog-flip-back{transform:rotateY(180deg);z-index:1;box-shadow:12px 0 32px rgba(0,0,0,.18);}
.phx-catalog-flip-sheet.is-turn-next{
  right:0;left:auto;transform-origin:0% 50%;
  animation:phxCatalogBookNext 1.25s cubic-bezier(.22,.74,.18,1) forwards;
}
.phx-catalog-flip-sheet.is-turn-prev{
  left:0;right:auto;transform-origin:100% 50%;
  animation:phxCatalogBookPrev 1.25s cubic-bezier(.22,.74,.18,1) forwards;
}

/* While turning, the prepared target spread is underneath. */
.phx-catalog-book.is-turning .phx-catalog-page-static{z-index:1;}
.phx-catalog-book.is-turning .phx-catalog-next-spread{z-index:3;opacity:0;}
.phx-catalog-book.is-turning .phx-catalog-flip-sheet{z-index:20;}

@keyframes phxCatalogBookNext{
  0%{transform:rotateY(0deg);filter:drop-shadow(-2px 0 2px rgba(0,0,0,.10));}
  22%{transform:rotateY(-34deg);filter:drop-shadow(-10px 4px 12px rgba(0,0,0,.22));}
  45%{transform:rotateY(-82deg);filter:drop-shadow(-18px 6px 20px rgba(0,0,0,.30));}
  58%{transform:rotateY(-112deg);filter:drop-shadow(12px 7px 24px rgba(0,0,0,.32));}
  76%{transform:rotateY(-150deg);filter:drop-shadow(16px 6px 20px rgba(0,0,0,.28));}
  91%{transform:rotateY(-173deg);filter:drop-shadow(10px 4px 12px rgba(0,0,0,.18));}
  100%{transform:rotateY(-180deg);filter:none;}
}
@keyframes phxCatalogBookPrev{
  0%{transform:rotateY(0deg);filter:drop-shadow(2px 0 2px rgba(0,0,0,.10));}
  22%{transform:rotateY(34deg);filter:drop-shadow(10px 4px 12px rgba(0,0,0,.22));}
  45%{transform:rotateY(82deg);filter:drop-shadow(18px 6px 20px rgba(0,0,0,.30));}
  58%{transform:rotateY(112deg);filter:drop-shadow(-12px 7px 24px rgba(0,0,0,.32));}
  76%{transform:rotateY(150deg);filter:drop-shadow(-16px 6px 20px rgba(0,0,0,.28));}
  91%{transform:rotateY(173deg);filter:drop-shadow(-10px 4px 12px rgba(0,0,0,.18));}
  100%{transform:rotateY(180deg);filter:none;}
}

@media(max-width:900px){
  .phx-catalog-book-stage{aspect-ratio:16/9;max-height:none;}
  .phx-catalog-book{width:100%;}
  .phx-catalog-page-static,
  .phx-catalog-next-spread-page,
  .phx-catalog-flip-sheet{width:100%;}
  .phx-catalog-page-left,.phx-catalog-next-spread-left{left:0;right:auto;}
  .phx-catalog-page-right,.phx-catalog-next-spread-right{display:none;}
  .phx-catalog-spine{width:10px;}
}

/* Reveal the complete next/previous spread underneath the turning leaf so
   pagination is always 1|2, then 3|4, then 5|6 ... with no blank right page. */
.phx-catalog-book.is-turning .phx-catalog-next-spread{
  z-index:4;
  opacity:0;
  animation:phxCatalogRevealSpread 1.25s ease forwards;
}
.phx-catalog-book.is-turning .phx-catalog-page-static{
  z-index:2;
}
@keyframes phxCatalogRevealSpread{
  0%,43%{opacity:0;}
  58%{opacity:.96;}
  72%,100%{opacity:1;}
}

/* v4: keep the next spread physically underneath the turning leaf.
   The old right page is removed from the visual stack only while it turns,
   so page 3|4 is already waiting underneath and no side becomes blank. */
.phx-catalog-book.is-turning .phx-catalog-next-spread{
  opacity:1 !important;
  z-index:1 !important;
  animation:none !important;
}
.phx-catalog-book.is-turning .phx-catalog-page-left{z-index:2;}
.phx-catalog-book.is-turning .phx-catalog-page-right{z-index:1;visibility:hidden;}
.phx-catalog-book.is-turning .phx-catalog-flip-sheet{z-index:30;}
.phx-catalog-book.is-turning .phx-catalog-next-spread-page{z-index:1;}

/* A deeper physical gutter for the open-book impression. */
.phx-catalog-spine{
  width:28px;
  background:linear-gradient(90deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.32) 18%,
    rgba(255,255,255,.10) 38%,
    rgba(0,0,0,.50) 57%,
    rgba(0,0,0,.72) 100%);
  box-shadow:
    inset 7px 0 11px rgba(0,0,0,.28),
    inset -7px 0 12px rgba(0,0,0,.36),
    0 0 22px rgba(0,0,0,.42);
  border-radius:11px;
}
.phx-catalog-book-shadow{
  width:24%;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,.44) 0%,
    rgba(0,0,0,.25) 24%,
    rgba(0,0,0,.10) 42%,
    transparent 70%);
  filter:blur(3px);
}

/* v4: user-adjustable automatic turn timing. */
.phx-catalog-viewer{
  --phx-catalog-auto-hold: 3600ms;
  --phx-catalog-turn-duration: 1250ms;
}
@media(max-width:900px){
  .phx-catalog-spine{width:14px;}
}

/* ============================================================
   v5 — ADVANCED PHYSICAL PAGE CURL
   The turning leaf is built from narrow vertical page slices so the
   free edge bends progressively instead of behaving like a flat card.
   Scoped only to the catalog viewer.
   ============================================================ */
.phx-catalog-viewer{
  --phx-catalog-auto-hold: 3000ms;
  --phx-catalog-turn-duration: 1450ms;
}
.phx-catalog-book-stage{
  perspective:3200px;
  perspective-origin:50% 46%;
  background:
    radial-gradient(ellipse at 50% 52%,rgba(255,255,255,.035),transparent 58%),
    linear-gradient(180deg,#061f20 0%,#001719 100%);
}
.phx-catalog-book{
  transform-style:preserve-3d;
  box-shadow:0 38px 90px rgba(0,0,0,.52);
}
.phx-catalog-page-static,
.phx-catalog-next-spread-page{
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
.phx-catalog-flip-sheet{
  transform-style:preserve-3d;
  overflow:visible;
  perspective:1800px;
  transform-origin:0 50%;
}
.phx-catalog-flip-face{
  display:block;
  overflow:visible;
  background:#fff;
  transform-style:preserve-3d;
  box-shadow:none!important;
}
.phx-catalog-page-slice{
  position:absolute;
  top:0;
  bottom:0;
  width:5.555555%;
  overflow:hidden;
  background-repeat:no-repeat;
  background-color:#fff;
  transform-origin:0 50%;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,filter;
  box-shadow:inset -1px 0 rgba(0,0,0,.07);
}
.phx-catalog-page-slice:nth-child(1){left:0%;}
.phx-catalog-page-slice:nth-child(2){left:5.555555%;}
.phx-catalog-page-slice:nth-child(3){left:11.11111%;}
.phx-catalog-page-slice:nth-child(4){left:16.666665%;}
.phx-catalog-page-slice:nth-child(5){left:22.22222%;}
.phx-catalog-page-slice:nth-child(6){left:27.777775%;}
.phx-catalog-page-slice:nth-child(7){left:33.33333%;}
.phx-catalog-page-slice:nth-child(8){left:38.888885%;}
.phx-catalog-page-slice:nth-child(9){left:44.44444%;}
.phx-catalog-page-slice:nth-child(10){left:49.999995%;}
.phx-catalog-page-slice:nth-child(11){left:55.55555%;}
.phx-catalog-page-slice:nth-child(12){left:61.111105%;}
.phx-catalog-page-slice:nth-child(13){left:66.66666%;}
.phx-catalog-page-slice:nth-child(14){left:72.222215%;}
.phx-catalog-page-slice:nth-child(15){left:77.77777%;}
.phx-catalog-page-slice:nth-child(16){left:83.333325%;}
.phx-catalog-page-slice:nth-child(17){left:88.88888%;}
.phx-catalog-page-slice:nth-child(18){left:94.444435%;}

.phx-catalog-flip-sheet.is-turn-next .phx-catalog-page-slice{
  animation:phxCatalogCurlNext var(--phx-catalog-turn-duration) cubic-bezier(.16,.72,.18,1) forwards;
  animation-delay:calc(var(--slice-index) * -18ms);
}
.phx-catalog-flip-sheet.is-turn-prev .phx-catalog-page-slice{
  animation:phxCatalogCurlPrev var(--phx-catalog-turn-duration) cubic-bezier(.16,.72,.18,1) forwards;
  animation-delay:calc(var(--slice-index) * -18ms);
}
@keyframes phxCatalogCurlNext{
  0%{transform:rotateY(0deg) translateZ(0);filter:brightness(1);}
  28%{transform:rotateY(calc(var(--curl-angle) * .38)) translateZ(4px);filter:brightness(.96);}
  50%{transform:rotateY(calc(var(--curl-angle) * .72)) translateZ(9px);filter:brightness(.88);}
  68%{transform:rotateY(calc(var(--curl-angle) * .92)) translateZ(4px);filter:brightness(.94);}
  100%{transform:rotateY(-180deg) translateZ(0);filter:brightness(1);}
}
@keyframes phxCatalogCurlPrev{
  0%{transform:rotateY(0deg) translateZ(0);filter:brightness(1);}
  28%{transform:rotateY(calc(var(--curl-angle) * .38)) translateZ(4px);filter:brightness(.96);}
  50%{transform:rotateY(calc(var(--curl-angle) * .72)) translateZ(9px);filter:brightness(.88);}
  68%{transform:rotateY(calc(var(--curl-angle) * .92)) translateZ(4px);filter:brightness(.94);}
  100%{transform:rotateY(180deg) translateZ(0);filter:brightness(1);}
}

/* Physical paper edge and deeper gutter. */
.phx-catalog-spine{
  width:34px;
  background:linear-gradient(90deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.42) 16%,
    rgba(255,255,255,.08) 36%,
    rgba(0,0,0,.48) 57%,
    rgba(0,0,0,.78) 100%);
  box-shadow:
    inset 9px 0 14px rgba(0,0,0,.34),
    inset -9px 0 15px rgba(0,0,0,.42),
    0 0 28px rgba(0,0,0,.48);
  border-radius:14px;
}
.phx-catalog-book-shadow{
  width:28%;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,.50) 0%,rgba(0,0,0,.30) 24%,rgba(0,0,0,.11) 44%,transparent 72%);
  filter:blur(4px);
}

@media(max-width:900px){
  .phx-catalog-spine{width:12px;}
  .phx-catalog-flip-sheet{perspective:1200px;}
}

.phx-catalog-page-slice-back{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-color:#fff;
  transform:rotateY(180deg);
  transform-origin:50% 50%;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
}
.phx-catalog-flip-back{display:none!important;}
@keyframes phxCatalogCurlNext{
  0%{transform:translateX(0) rotateY(0deg) translateZ(0);filter:brightness(1);}
  28%{transform:translateX(1.2%) rotateY(calc(var(--curl-angle) * .38)) translateZ(4px);filter:brightness(.96);}
  50%{transform:translateX(2.8%) rotateY(calc(var(--curl-angle) * .72)) translateZ(9px);filter:brightness(.88);}
  68%{transform:translateX(4.1%) rotateY(calc(var(--curl-angle) * .92)) translateZ(4px);filter:brightness(.94);}
  100%{transform:translateX(5.555555%) rotateY(-180deg) translateZ(0);filter:brightness(1);}
}
@keyframes phxCatalogCurlPrev{
  0%{transform:translateX(0) rotateY(0deg) translateZ(0);filter:brightness(1);}
  28%{transform:translateX(-1.2%) rotateY(calc(var(--curl-angle) * .38)) translateZ(4px);filter:brightness(.96);}
  50%{transform:translateX(-2.8%) rotateY(calc(var(--curl-angle) * .72)) translateZ(9px);filter:brightness(.88);}
  68%{transform:translateX(-4.1%) rotateY(calc(var(--curl-angle) * .92)) translateZ(4px);filter:brightness(.94);}
  100%{transform:translateX(-5.555555%) rotateY(180deg) translateZ(0);filter:brightness(1);}
}

/* ============================================================
   V6 — CINEMATIC BOOK FRAME / NON-INTRUSIVE FRAME ART
   Scoped exclusively to Catalog Viewer.
   The frame image lives behind the book and can be replaced from
   the Catalog admin without touching page content or page geometry.
   ============================================================ */
.phx-catalog-viewer-frame{
  position:relative;
  overflow:hidden;
  padding:18px 18px 0;
  background:
    radial-gradient(circle at 50% 42%,rgba(16,91,87,.18),transparent 45%),
    linear-gradient(180deg,#061f20 0%,#001719 100%);
}
.phx-catalog-frame-art{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:var(--phx-catalog-frame-image,url("../images/catalog/catalog-frame-default.png"));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.92;
  filter:saturate(.88) contrast(1.03);
}
.phx-catalog-frame-art:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 48%,transparent 34%,rgba(0,15,16,.18) 72%,rgba(0,8,9,.52) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12),transparent 25%,transparent 76%,rgba(0,0,0,.32));
}
.phx-catalog-frame-art:after{
  content:"";
  position:absolute;
  left:2.2%;right:2.2%;top:3.5%;bottom:5.5%;
  border:1px solid rgba(135,235,225,.16);
  border-radius:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -18px 35px rgba(0,0,0,.18),
    0 0 45px rgba(0,0,0,.18);
}
.phx-catalog-book-stage{
  position:relative;
  z-index:2;
  width:min(94%,1500px);
  margin:0 auto;
  background:transparent;
  overflow:visible;
  isolation:isolate;
}
.phx-catalog-book{
  position:relative;
  width:94%;
  height:92%;
  margin:auto;
  align-self:center;
  background:transparent;
  transform-style:preserve-3d;
  box-shadow:none;
}
.phx-catalog-book:before{
  content:"";
  position:absolute;
  inset:-1.8% -1.15% -2.8%;
  z-index:0;
  pointer-events:none;
  border-radius:10px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.02) 8%,rgba(0,0,0,.10) 84%,rgba(0,0,0,.34)),
    linear-gradient(90deg,#172c2c,#081515 48%,#172c2c);
  box-shadow:
    0 30px 48px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.45);
  transform:translateZ(-10px);
}
.phx-catalog-book:after{
  content:"";
  position:absolute;
  left:1%;right:1%;bottom:-3.2%;height:7%;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.52),transparent 70%);
  filter:blur(7px);
  transform:translateZ(-16px);
}
.phx-catalog-page-static,
.phx-catalog-next-spread,
.phx-catalog-flip-sheet{
  z-index:2;
}
.phx-catalog-spine{
  z-index:45;
  width:38px;
  background:linear-gradient(90deg,
    rgba(0,0,0,.78),
    rgba(0,0,0,.46) 18%,
    rgba(255,255,255,.10) 37%,
    rgba(0,0,0,.56) 55%,
    rgba(0,0,0,.82));
  box-shadow:
    inset 10px 0 15px rgba(0,0,0,.36),
    inset -10px 0 16px rgba(0,0,0,.44),
    0 0 28px rgba(0,0,0,.52);
  border-radius:15px;
}
.phx-catalog-book-shadow{
  z-index:44;
  width:31%;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,.56) 0%,
    rgba(0,0,0,.34) 22%,
    rgba(0,0,0,.12) 45%,
    transparent 72%);
  filter:blur(5px);
}
.phx-catalog-controls,
.phx-catalog-media-controls{
  position:relative;
  z-index:60;
}

@media(max-width:900px){
  .phx-catalog-book-stage{width:100%;}
  .phx-catalog-book{width:96%;height:94%;}
  .phx-catalog-spine{width:14px;}
}


/* ============================================================
   V6 — FINAL FLIP ENGINE OVERRIDE
   The parent leaf carries the full book turn; the narrow slices add
   only a restrained local curl/highlight so the page does not look
   like a flat rotating card.
   ============================================================ */
.phx-catalog-flip-sheet.is-turn-next,
.phx-catalog-flip-sheet.is-turn-prev{
  animation-name:phxCatalogLeafTurnFinal;
  animation-duration:var(--phx-catalog-turn-duration);
  animation-timing-function:cubic-bezier(.18,.76,.16,1);
  animation-fill-mode:forwards;
}
@keyframes phxCatalogLeafTurnFinal{
  0%{transform:rotateY(0deg) translateZ(0);}
  14%{transform:rotateY(-18deg) translateZ(3px);}
  34%{transform:rotateY(-66deg) translateZ(8px);}
  52%{transform:rotateY(-106deg) translateZ(11px);}
  70%{transform:rotateY(-145deg) translateZ(7px);}
  88%{transform:rotateY(-172deg) translateZ(2px);}
  100%{transform:rotateY(-180deg) translateZ(0);}
}
.phx-catalog-flip-sheet.is-turn-prev{
  animation-name:phxCatalogLeafTurnPrevFinal;
}
@keyframes phxCatalogLeafTurnPrevFinal{
  0%{transform:rotateY(0deg) translateZ(0);}
  14%{transform:rotateY(18deg) translateZ(3px);}
  34%{transform:rotateY(66deg) translateZ(8px);}
  52%{transform:rotateY(106deg) translateZ(11px);}
  70%{transform:rotateY(145deg) translateZ(7px);}
  88%{transform:rotateY(172deg) translateZ(2px);}
  100%{transform:rotateY(180deg) translateZ(0);}
}
.phx-catalog-page-slice{
  transform-style:preserve-3d;
  perspective:1600px;
}
.phx-catalog-page-slice-back{
  transform:rotateY(180deg) translateZ(.5px);
}
.phx-catalog-flip-sheet.is-turn-next .phx-catalog-page-slice,
.phx-catalog-flip-sheet.is-turn-prev .phx-catalog-page-slice{
  animation-duration:var(--phx-catalog-turn-duration);
  animation-timing-function:cubic-bezier(.18,.76,.16,1);
  animation-fill-mode:forwards;
  animation-delay:0ms;
}
@keyframes phxCatalogCurlNextFinal{
  0%{filter:brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0));transform:rotateY(0deg) translateZ(0) skewY(0deg);}
  24%{filter:brightness(.98) drop-shadow(-3px 4px 5px rgba(0,0,0,.10));transform:rotateY(-8deg) translateZ(calc((var(--slice-index) - 8.5) * -0.9px)) skewY(calc((var(--slice-index) - 8.5) * .10deg));}
  48%{filter:brightness(.88) drop-shadow(-7px 5px 12px rgba(0,0,0,.20));transform:rotateY(-18deg) translateZ(calc((var(--slice-index) - 8.5) * -1.8px)) skewY(calc((var(--slice-index) - 8.5) * .18deg));}
  70%{filter:brightness(.93) drop-shadow(-5px 4px 9px rgba(0,0,0,.15));transform:rotateY(-10deg) translateZ(calc((var(--slice-index) - 8.5) * -1.1px)) skewY(calc((var(--slice-index) - 8.5) * .11deg));}
  100%{filter:brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0));transform:rotateY(0deg) translateZ(0) skewY(0deg);}
}
@keyframes phxCatalogCurlPrevFinal{
  0%{filter:brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0));transform:rotateY(0deg) translateZ(0) skewY(0deg);}
  24%{filter:brightness(.98) drop-shadow(3px 4px 5px rgba(0,0,0,.10));transform:rotateY(8deg) translateZ(calc((var(--slice-index) - 8.5) * 0.9px)) skewY(calc((var(--slice-index) - 8.5) * -.10deg));}
  48%{filter:brightness(.88) drop-shadow(7px 5px 12px rgba(0,0,0,.20));transform:rotateY(18deg) translateZ(calc((var(--slice-index) - 8.5) * 1.8px)) skewY(calc((var(--slice-index) - 8.5) * -.18deg));}
  70%{filter:brightness(.93) drop-shadow(5px 4px 9px rgba(0,0,0,.15));transform:rotateY(10deg) translateZ(calc((var(--slice-index) - 8.5) * 1.1px)) skewY(calc((var(--slice-index) - 8.5) * -.11deg));}
  100%{filter:brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0));transform:rotateY(0deg) translateZ(0) skewY(0deg);}
}
.phx-catalog-flip-sheet.is-turn-next .phx-catalog-page-slice{
  animation-name:phxCatalogCurlNextFinal;
}
.phx-catalog-flip-sheet.is-turn-prev .phx-catalog-page-slice{
  animation-name:phxCatalogCurlPrevFinal;
}


/* ============================================================
   PHX CATALOG — STABLE REAL-SPREAD PAGE TURN
   This block is intentionally scoped to the catalog viewer only.
   The destination spread is pre-rendered before every turn.
   ============================================================ */

.phx-catalog-viewer .phx-catalog-book{
  position:relative;
  isolation:isolate;
  perspective:2200px;
  transform-style:preserve-3d;
  background:#fff;
  overflow:visible;
}

.phx-catalog-viewer .phx-catalog-page-static,
.phx-catalog-viewer .phx-catalog-next-spread-page{
  background:#fff;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.phx-catalog-viewer .phx-catalog-page-static canvas,
.phx-catalog-viewer .phx-catalog-next-spread-page canvas{
  background:#fff !important;
  object-fit:contain;
}

.phx-catalog-viewer .phx-catalog-page-static{
  transition:none !important;
  opacity:1;
  visibility:visible;
}

.phx-catalog-viewer .phx-catalog-next-spread{
  z-index:1 !important;
  opacity:1 !important;
  visibility:visible;
  pointer-events:none;
}

.phx-catalog-viewer .phx-catalog-next-spread-page{
  z-index:1;
}

.phx-catalog-viewer .phx-catalog-flip-sheet{
  z-index:40 !important;
  width:50%;
  height:100%;
  top:0;
  bottom:auto;
  overflow:visible;
  background:transparent;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  perspective:2200px;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
  box-shadow:none;
  animation-duration:var(--phx-catalog-turn-duration) !important;
  animation-timing-function:cubic-bezier(.18,.72,.16,1) !important;
  animation-fill-mode:forwards !important;
}

.phx-catalog-viewer .phx-catalog-flip-face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#fff !important;
  box-shadow:0 16px 42px rgba(0,0,0,.22);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.phx-catalog-viewer .phx-catalog-flip-front{
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  transform:none;
  z-index:2;
}

.phx-catalog-viewer .phx-catalog-flip-front img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#fff;
  user-select:none;
  -webkit-user-drag:none;
}

.phx-catalog-viewer .phx-catalog-flip-back{
  display:none !important;
}

.phx-catalog-viewer .phx-catalog-flip-sheet.is-turn-next{
  left:auto;
  right:0;
  transform-origin:0% 50%;
  animation-name:phxCatalogStableFlipNext !important;
}

.phx-catalog-viewer .phx-catalog-flip-sheet.is-turn-prev{
  left:0;
  right:auto;
  transform-origin:100% 50%;
  animation-name:phxCatalogStableFlipPrev !important;
}

.phx-catalog-viewer .phx-catalog-book.is-turning-next .phx-catalog-page-right{
  visibility:hidden !important;
}
.phx-catalog-viewer .phx-catalog-book.is-turning-prev .phx-catalog-page-left{
  visibility:hidden !important;
}

/* Destination spread replaces the old spread only after the leaf has
   crossed the gutter. This avoids both premature flashes and empty frames. */
.phx-catalog-viewer .phx-catalog-book.is-crossed .phx-catalog-next-spread{
  z-index:30 !important;
}
.phx-catalog-viewer .phx-catalog-book.is-crossed .phx-catalog-page-static{
  visibility:hidden !important;
}

.phx-catalog-viewer .phx-catalog-book.is-crossed .phx-catalog-flip-sheet{
  z-index:40 !important;
}

/* A clean physical sheet: no sliced tiles, no exposed transparent back. */
.phx-catalog-viewer .phx-catalog-page-slice{
  display:none !important;
}

.phx-catalog-viewer .phx-catalog-spine{
  z-index:60 !important;
  pointer-events:none;
}

@keyframes phxCatalogStableFlipNext{
  0%{
    transform:rotateY(0deg);
    filter:drop-shadow(-2px 2px 3px rgba(0,0,0,.10));
  }
  22%{
    transform:rotateY(-32deg);
    filter:drop-shadow(-10px 4px 14px rgba(0,0,0,.20));
  }
  48%{
    transform:rotateY(-82deg);
    filter:drop-shadow(-17px 5px 22px rgba(0,0,0,.28));
  }
  62%{
    transform:rotateY(-112deg);
    filter:drop-shadow(12px 6px 24px rgba(0,0,0,.25));
  }
  80%{
    transform:rotateY(-151deg);
    filter:drop-shadow(15px 5px 18px rgba(0,0,0,.18));
  }
  100%{
    transform:rotateY(-180deg);
    filter:none;
  }
}

@keyframes phxCatalogStableFlipPrev{
  0%{
    transform:rotateY(0deg);
    filter:drop-shadow(2px 2px 3px rgba(0,0,0,.10));
  }
  22%{
    transform:rotateY(32deg);
    filter:drop-shadow(10px 4px 14px rgba(0,0,0,.20));
  }
  48%{
    transform:rotateY(82deg);
    filter:drop-shadow(17px 5px 22px rgba(0,0,0,.28));
  }
  62%{
    transform:rotateY(112deg);
    filter:drop-shadow(-12px 6px 24px rgba(0,0,0,.25));
  }
  80%{
    transform:rotateY(151deg);
    filter:drop-shadow(-15px 5px 18px rgba(0,0,0,.18));
  }
  100%{
    transform:rotateY(180deg);
    filter:none;
  }
}

/* Minimal central Play/Pause — the book remains the visual focus. */
.phx-catalog-viewer .phx-catalog-play{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:80 !important;
  background:rgba(7,35,36,.78) !important;
  border:1px solid rgba(255,255,255,.42) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.30),inset 0 0 0 1px rgba(255,255,255,.06) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff !important;
}

.phx-catalog-viewer .phx-catalog-play-text{
  display:none !important;
}

.phx-catalog-viewer .phx-catalog-play-icon{
  width:0;
  height:0;
  margin-left:4px;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:13px solid #fff;
}

.phx-catalog-viewer .phx-catalog-play.is-playing .phx-catalog-play-icon{
  width:13px;
  height:17px;
  margin-left:0;
  border:0;
  position:relative;
}
.phx-catalog-viewer .phx-catalog-play.is-playing .phx-catalog-play-icon:before,
.phx-catalog-viewer .phx-catalog-play.is-playing .phx-catalog-play-icon:after{
  content:"";
  position:absolute;
  top:0;
  width:4px;
  height:17px;
  border-radius:2px;
  background:#fff;
}
.phx-catalog-viewer .phx-catalog-play.is-playing .phx-catalog-play-icon:before{left:0;}
.phx-catalog-viewer .phx-catalog-play.is-playing .phx-catalog-play-icon:after{right:0;}

.phx-catalog-viewer .phx-catalog-play:hover{
  transform:translate(-50%,-50%) scale(1.06) !important;
}

/* Navigation stays beside the book, never over the page artwork. */
.phx-catalog-viewer .phx-catalog-nav{
  min-width:92px;
  height:48px;
  border-radius:24px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

@media(max-width:900px){
  .phx-catalog-viewer .phx-catalog-book{
    perspective:1400px;
  }
  .phx-catalog-viewer .phx-catalog-flip-sheet{
    perspective:1400px;
  }
  .phx-catalog-viewer .phx-catalog-play{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
  }
}

/* ============================================================
   V7 — Viewer polish / stable spread / control separation
   Scoped only to .phx-catalog-viewer.
   ============================================================ */
.phx-catalog-viewer .phx-catalog-viewer-frame{position:relative;}
.phx-catalog-viewer .phx-catalog-book-stage{position:relative;z-index:2;overflow:visible;}
.phx-catalog-viewer .phx-catalog-book{z-index:2;}

/* The navigation belongs to the book sides, not the bottom toolbar. */
.phx-catalog-viewer .phx-catalog-control-nav-stage{
  position:absolute;
  inset:18px 18px 78px;
  z-index:75;
  pointer-events:none;
  direction:ltr;
}
.phx-catalog-viewer .phx-catalog-control-nav-stage .phx-catalog-nav{
  position:absolute;
  top:50%;
  width:50px;
  min-width:50px;
  height:50px;
  padding:0;
  border-radius:50%;
  transform:translateY(-50%);
  pointer-events:auto;
  background:rgba(2,27,28,.76);
  border:1px solid rgba(126,236,228,.28);
  color:#e9fffc;
  box-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.phx-catalog-viewer .phx-catalog-control-nav-stage .phx-catalog-nav[data-catalog-prev]{left:calc(3% + 2px);}
.phx-catalog-viewer .phx-catalog-control-nav-stage .phx-catalog-nav[data-catalog-next]{right:calc(3% + 2px);}
.phx-catalog-viewer .phx-catalog-control-nav-stage .phx-catalog-nav:hover{transform:translateY(-50%) scale(1.07);color:#00e0da;border-color:rgba(0,215,210,.62);}
.phx-catalog-viewer .phx-catalog-control-nav-stage .phx-catalog-nav:disabled{opacity:.28;transform:translateY(-50%);}
.phx-catalog-viewer .phx-catalog-arrow{font-size:30px;line-height:1;}

/* Bottom bar contains only zoom/fullscreen/download and the page counter. */
.phx-catalog-viewer .phx-catalog-controls{
  position:relative;
  min-height:58px;
  height:58px;
  z-index:70;
  display:block;
  margin:0;
  padding:0;
  direction:ltr;
}
.phx-catalog-viewer .phx-catalog-tools{right:10px;bottom:10px;}
.phx-catalog-viewer .phx-catalog-page-counter{bottom:15px;}

/* Exactly one central Play/Pause button; while playing it becomes deliberately subtle. */
.phx-catalog-viewer .phx-catalog-play{z-index:80;}
.phx-catalog-viewer .phx-catalog-play.is-playing{
  opacity:.24 !important;
  transform:translate(-50%,-50%) scale(.94) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.18),0 0 0 5px rgba(0,215,210,.025) !important;
}
.phx-catalog-viewer .phx-catalog-play.is-playing:hover,
.phx-catalog-viewer .phx-catalog-play.is-playing:focus-visible{
  opacity:.82 !important;
  transform:translate(-50%,-50%) scale(1.03) !important;
}
.phx-catalog-viewer .phx-catalog-play:not(.is-playing){opacity:1 !important;}

/* Never hide a finished spread while the viewer is holding between turns. */
.phx-catalog-viewer .phx-catalog-book:not(.is-turning) .phx-catalog-page-static{visibility:visible!important;opacity:1!important;z-index:2!important;}
.phx-catalog-viewer .phx-catalog-book:not(.is-turning) .phx-catalog-next-spread{visibility:hidden!important;opacity:0!important;z-index:1!important;}
.phx-catalog-viewer .phx-catalog-book.is-turning .phx-catalog-next-spread{visibility:visible!important;opacity:1!important;z-index:1!important;}
.phx-catalog-viewer .phx-catalog-book.is-turning-next .phx-catalog-page-right{visibility:hidden!important;}
.phx-catalog-viewer .phx-catalog-book.is-turning-prev .phx-catalog-page-left{visibility:hidden!important;}

/* Default cinematic frame remains behind the book and can be replaced from admin. */
.phx-catalog-viewer-frame .phx-catalog-frame-art{z-index:0;}
.phx-catalog-viewer-frame .phx-catalog-book-stage{z-index:2;}

@media(max-width:900px){
  .phx-catalog-viewer .phx-catalog-control-nav-stage{inset:8px 6px 68px;}
  .phx-catalog-viewer .phx-catalog-control-nav-stage .phx-catalog-nav{width:42px;min-width:42px;height:42px;}
  .phx-catalog-viewer .phx-catalog-tools{right:4px;bottom:8px;}
}

/* ============================================================
   V8 — ATOMIC TWO-PAGE SPREAD / NO WHITE RIGHT PAGE
   Final scoped override for the Catalog Viewer only.
   ============================================================ */
.phx-catalog-viewer .phx-catalog-book.is-turning-next .phx-catalog-page-right,
.phx-catalog-viewer .phx-catalog-book.is-turning-prev .phx-catalog-page-left{
  visibility:visible !important;
  opacity:1 !important;
}

/* The complete destination Spread is revealed only at the crossing point;
   until then the complete current Spread stays intact underneath the leaf. */
.phx-catalog-viewer .phx-catalog-book.is-turning .phx-catalog-page-static{
  visibility:visible !important;
  opacity:1 !important;
}
.phx-catalog-viewer .phx-catalog-book.is-turning:not(.is-crossed) .phx-catalog-next-spread{
  z-index:1 !important;
  opacity:1 !important;
  visibility:visible !important;
}
.phx-catalog-viewer .phx-catalog-book.is-crossed .phx-catalog-next-spread{
  z-index:30 !important;
  opacity:1 !important;
  visibility:visible !important;
}
.phx-catalog-viewer .phx-catalog-book.is-crossed .phx-catalog-page-static{
  visibility:hidden !important;
  opacity:0 !important;
}

/* Once a turn is finished, both pages are always simultaneously visible. */
.phx-catalog-viewer .phx-catalog-book:not(.is-turning) .phx-catalog-page-static{
  visibility:visible !important;
  opacity:1 !important;
  z-index:2 !important;
}
.phx-catalog-viewer .phx-catalog-book:not(.is-turning) .phx-catalog-next-spread{
  visibility:hidden !important;
  opacity:0 !important;
  z-index:1 !important;
}

/* ============================================================
   V9 — REAL CLOSED COVER + ATOMIC OPEN SPREAD
   Final scoped override: never hide one side of a finished spread.
   ============================================================ */
.phx-catalog-viewer .phx-catalog-book.is-turning-next .phx-catalog-page-right,
.phx-catalog-viewer .phx-catalog-book.is-turning-prev .phx-catalog-page-left,
.phx-catalog-viewer .phx-catalog-book.is-turning .phx-catalog-page-static{
  visibility:visible !important;
  opacity:1 !important;
}
.phx-catalog-viewer .phx-catalog-book.is-turning .phx-catalog-page-static{
  z-index:2 !important;
}
.phx-catalog-viewer .phx-catalog-book.is-turning .phx-catalog-next-spread{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.phx-catalog-viewer .phx-catalog-book:not(.is-turning) .phx-catalog-page-static{
  visibility:visible !important;
  opacity:1 !important;
  z-index:2 !important;
}
.phx-catalog-viewer .phx-catalog-book.is-turning .phx-catalog-flip-sheet{
  z-index:40 !important;
}

/* ============================================================
   V30 — TRUE PDF SPREAD / NO-WHITE-GAP OVERRIDE
   Scoped only to the Phoenix catalog viewer.
   PDF pages are always paired 1|2, 3|4, 5|6 ... .
   ============================================================ */
.phx-catalog-viewer .phx-catalog-page-static{
  opacity:1!important;
  visibility:visible!important;
  display:block!important;
}
.phx-catalog-viewer .phx-catalog-page-right{
  visibility:visible!important;
  opacity:1!important;
}
.phx-catalog-viewer .phx-catalog-next-spread{
  visibility:visible!important;
  pointer-events:none!important;
  opacity:0!important;
  z-index:3!important;
}
.phx-catalog-viewer .phx-catalog-next-spread-page{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  background:#fff!important;
}
.phx-catalog-viewer .phx-catalog-next-spread-page canvas{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
.phx-catalog-viewer .phx-catalog-book.is-turning .phx-catalog-page-static{
  visibility:visible!important;
  opacity:1!important;
  z-index:2!important;
}
.phx-catalog-viewer .phx-catalog-book.is-turning .phx-catalog-page-right,
.phx-catalog-viewer .phx-catalog-book.is-turning-next .phx-catalog-page-right,
.phx-catalog-viewer .phx-catalog-book.is-turning-prev .phx-catalog-page-left{
  visibility:visible!important;
  opacity:1!important;
}
.phx-catalog-viewer .phx-catalog-book.is-turning .phx-catalog-next-spread{
  opacity:1!important;
  visibility:visible!important;
  z-index:1!important;
}
.phx-catalog-viewer .phx-catalog-book.is-turning .phx-catalog-flip-sheet{
  z-index:50!important;
}
.phx-catalog-viewer .phx-catalog-flip-back{
  display:flex!important;
  align-items:stretch;
  justify-content:stretch;
  background:#fff!important;
  z-index:1;
}
.phx-catalog-viewer .phx-catalog-flip-back img{
  display:block;
  width:100%;height:100%;object-fit:contain;background:#fff;
}
.phx-catalog-viewer .phx-catalog-flip-sheet.is-turn-next{
  right:0!important;left:auto!important;transform-origin:0 50%!important;
  animation-name:phxCatalogStableFlipNext!important;
}
.phx-catalog-viewer .phx-catalog-flip-sheet.is-turn-prev{
  left:0!important;right:auto!important;transform-origin:100% 50%!important;
  animation-name:phxCatalogStableFlipPrev!important;
}
/* The central Play/Pause is one control; while running it is deliberately subtle. */
.phx-catalog-viewer .phx-catalog-play{
  opacity:.82!important;
}
.phx-catalog-viewer .phx-catalog-play.is-playing{
  opacity:.34!important;
}
.phx-catalog-viewer .phx-catalog-play.is-playing:hover,
.phx-catalog-viewer .phx-catalog-play:focus-visible{
  opacity:.95!important;
}
/* Navigation belongs beside the book, never on top of the bottom toolbar. */
.phx-catalog-viewer .phx-catalog-control-nav-stage{
  position:absolute!important;
  inset:0!important;
  z-index:70!important;
  pointer-events:none!important;
}
.phx-catalog-viewer .phx-catalog-control-nav-stage .phx-catalog-nav{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  pointer-events:auto!important;
}
.phx-catalog-viewer .phx-catalog-control-nav-stage .phx-catalog-nav:first-child{left:-72px!important;right:auto!important;}
.phx-catalog-viewer .phx-catalog-control-nav-stage .phx-catalog-nav:last-child{right:-72px!important;left:auto!important;}
@media(max-width:1100px){
  .phx-catalog-viewer .phx-catalog-control-nav-stage .phx-catalog-nav:first-child{left:-50px!important;}
  .phx-catalog-viewer .phx-catalog-control-nav-stage .phx-catalog-nav:last-child{right:-50px!important;}
}
@media(max-width:900px){
  .phx-catalog-viewer .phx-catalog-control-nav-stage .phx-catalog-nav:first-child{left:8px!important;}
  .phx-catalog-viewer .phx-catalog-control-nav-stage .phx-catalog-nav:last-child{right:8px!important;}
}
/* Final layer choreography: left page stays anchored while the right leaf turns;
   the destination right page is revealed under the leaf, so the book never flashes white. */
.phx-catalog-viewer .phx-catalog-book.is-turning-next .phx-catalog-page-left{z-index:12!important;}
.phx-catalog-viewer .phx-catalog-book.is-turning-next .phx-catalog-page-right{z-index:3!important;}
.phx-catalog-viewer .phx-catalog-book.is-turning-next .phx-catalog-next-spread{z-index:4!important;}
.phx-catalog-viewer .phx-catalog-book.is-turning-next .phx-catalog-next-spread-left{z-index:1!important;}
.phx-catalog-viewer .phx-catalog-book.is-turning-next .phx-catalog-next-spread-right{z-index:5!important;}
.phx-catalog-viewer .phx-catalog-book.is-turning-prev .phx-catalog-page-right{z-index:12!important;}
.phx-catalog-viewer .phx-catalog-book.is-turning-prev .phx-catalog-page-left{z-index:3!important;}
.phx-catalog-viewer .phx-catalog-book.is-turning-prev .phx-catalog-next-spread{z-index:4!important;}
.phx-catalog-viewer .phx-catalog-book.is-turning-prev .phx-catalog-next-spread-left{z-index:5!important;}
.phx-catalog-viewer .phx-catalog-book.is-turning-prev .phx-catalog-next-spread-right{z-index:1!important;}


/* FINAL IMAGE-PAGES FIX — empty sides are transparent/absent, never white. */
.phx-catalog-viewer .phx-catalog-page-static,
.phx-catalog-viewer .phx-catalog-next-spread-page,
.phx-catalog-viewer .phx-catalog-flip-face,
.phx-catalog-viewer .phx-catalog-flip-back,
.phx-catalog-viewer .phx-catalog-flip-face img{
  background:transparent !important;
}
.phx-catalog-viewer .phx-catalog-page-static.is-empty,
.phx-catalog-viewer .phx-catalog-next-spread-page.is-empty{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.phx-catalog-viewer .phx-catalog-next-spread-page:not(.is-empty) canvas{
  background:transparent !important;
}

/* Responsive CTA natural-image fit: scoped to catalog page and disabled above 1400px. */
.phx-catalog-cta-natural-image{display:none}
@media (max-width:1400px){
  body.phx-catalog-page .phx-catalog-cta{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;height:auto;background-color:#003233;background-image:none!important;overflow:hidden}
  body.phx-catalog-page .phx-catalog-cta-natural-image,body.phx-catalog-page .phx-catalog-cta-overlay,body.phx-catalog-page .phx-catalog-cta-copy{grid-area:1/1;min-width:0}
  body.phx-catalog-page .phx-catalog-cta-natural-image{display:block;position:relative;inset:auto;width:100%;height:auto;max-width:none;object-fit:contain;align-self:center;justify-self:stretch;border:0;border-radius:0}
  body.phx-catalog-page .phx-catalog-cta-overlay{position:relative;inset:auto;width:100%;height:100%;min-height:0;background:linear-gradient(90deg,rgba(0,30,32,.78),rgba(0,30,32,.38));pointer-events:none}
  body.phx-catalog-page .phx-catalog-cta-copy{position:relative;z-index:2;align-self:center;justify-self:stretch;width:100%;max-width:900px;box-sizing:border-box;margin:0 auto;padding:clamp(18px,3vw,42px) clamp(16px,4vw,54px)}
  body.phx-catalog-page .phx-catalog-cta-copy h2{font-size:clamp(19px,2.1vw,30px);line-height:1.45}
  body.phx-catalog-page .phx-catalog-cta-copy p{font-size:clamp(11px,1vw,14px);line-height:1.9}
  body.phx-catalog-page .phx-catalog-cta-copy a{font-size:clamp(11px,.95vw,13px);padding:clamp(8px,.9vw,12px) clamp(13px,1.6vw,22px)}
}
@media (max-width:780px){body.phx-catalog-page .phx-catalog-cta-overlay{background:linear-gradient(180deg,rgba(0,30,32,.48),rgba(0,30,32,.80))}body.phx-catalog-page .phx-catalog-cta-copy{padding:clamp(18px,4vw,30px) 16px;text-align:center}}
@media (max-width:480px){body.phx-catalog-page .phx-catalog-cta-copy{padding:16px 12px}body.phx-catalog-page .phx-catalog-cta-copy h2{font-size:clamp(17px,5vw,21px)}}