/**
 * Каталог-брошура: рафт с корици, флипбук (прелистване) и продуктова галерия.
 * Публични стилове — отделни от site.css (одобреното демо не се пипа).
 * Ползва токените на демото (--accent, --ink, --line, --serif…).
 */

/* ---------- Рафт с корици ---------- */
.catalog-shelf{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:22px;
  margin-top:8px;
}
.catalog-book{
  display:flex;flex-direction:column;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  cursor:pointer;padding:0;transition:transform .2s, box-shadow .2s;
}
.catalog-book:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,20,18,.12)}
.catalog-book-cover{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--soft)}
.catalog-book-cover img{width:100%;height:100%;object-fit:cover;display:block}
.catalog-book-cover:after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent);opacity:.85}
.catalog-book-open{position:absolute;right:12px;bottom:12px;background:rgba(20,20,18,.78);color:#fff;font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px}
.catalog-book-meta{padding:15px 16px 17px}
.catalog-book-meta b{display:block;font-family:var(--serif);font-size:22px;line-height:1.05}
.catalog-book-meta em{display:block;color:var(--muted);font-style:normal;font-size:13px;margin-top:4px}
.catalog-book-meta span{display:inline-block;margin-top:10px;font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--accent2);font-weight:800}

/* ---------- Флипбук ---------- */
.flip-overlay{
  position:fixed;inset:0;z-index:1000;display:none;
  align-items:center;justify-content:center;
  background:rgba(18,18,16,.9);padding:22px;
}
.flip-overlay.open{display:flex}

/* Външен контур — рамка на каталога с логото и бяло паспарту */
.flip-frame{
  position:relative;display:flex;flex-direction:column;
  /* Ширината следва височината (135vh), за да прегръща книгата на десктоп,
     вместо тя да плава в празно поле. На телефон 135vh е огромно → пада на 100%. */
  width:min(1240px,135vh,100%);height:min(94vh,100%);
  background:var(--paper,#f5f1e8);
  border:1px solid #d7cfbf;border-radius:16px;
  box-shadow:0 30px 90px rgba(0,0,0,.55), inset 0 0 0 6px #fff;
  padding:14px 18px 12px;overflow:hidden;
}
.flip-head{
  display:flex;align-items:center;gap:14px;flex:0 0 auto;
  padding:2px 4px 12px;border-bottom:1px solid #e3ddd0;
}
.flip-logo{height:30px;width:auto;display:block}
.flip-name{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--ink)}
.flip-close{
  margin-left:auto;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:22px;cursor:pointer;line-height:1;
}
.flip-close:hover{background:var(--ink);color:#fff}

.flip-stage{flex:1 1 auto;display:flex;align-items:center;gap:8px;padding:10px 4px;min-height:0}
.flip-nav{
  flex:0 0 auto;width:50px;height:50px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:26px;cursor:pointer;line-height:1;transition:.15s;box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.flip-nav:hover{background:var(--ink);color:#fff}
.flip-nav[disabled]{opacity:.3;cursor:default}
.flip-viewport{
  flex:1 1 auto;height:100%;position:relative;
  display:flex;align-items:center;justify-content:center;
  perspective:2600px;
}
.book{height:100%;display:flex;align-items:center;justify-content:center}
.book-inner{position:relative;transform-style:preserve-3d}

.leaf{
  position:absolute;top:0;left:50%;width:50%;height:100%;
  transform-origin:left center;transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.42,.12,.22,1);
}
.book.single .leaf{left:0;width:100%}
.leaf.turned{transform:rotateY(-180deg)}

.leaf-face{
  position:absolute;inset:0;overflow:hidden;background:#fff;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 10px 34px rgba(0,0,0,.4);
}
.leaf-face img{width:100%;height:100%;object-fit:cover;display:block}
.leaf-back{transform:rotateY(180deg)}
.leaf-blank{background:linear-gradient(90deg,#e7e0d4,#fff)}

/* лека сянка към гърба, за да личи прегъвът като на истинска книга */
.leaf-front::after,.leaf-back::after{content:"";position:absolute;top:0;bottom:0;width:38px;pointer-events:none}
.leaf-front::after{left:0;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent)}
.leaf-back::after{right:0;background:linear-gradient(270deg,rgba(0,0,0,.18),transparent)}

.leaf-face .flip-tag{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-family:inherit;font-size:12px;font-weight:800;letter-spacing:.02em;
  padding:8px 16px;border:0;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.3);white-space:nowrap;
  cursor:pointer;pointer-events:auto;transition:transform .15s, box-shadow .15s;
}
.leaf-face .flip-tag:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.35)}

.flip-foot{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:9px;padding:10px 8px 2px;border-top:1px solid #e3ddd0}
.flip-pages{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.flip-dots{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;max-width:100%}
.flip-dot{width:8px;height:8px;border-radius:50%;background:#cfc7b7;border:0;cursor:pointer;padding:0;transition:.15s}
.flip-dot.on{background:var(--accent);transform:scale(1.3)}

/* ---------- Увеличение на снимка ---------- */
.pg-main{cursor:zoom-in}
.pg-zoom{position:fixed;inset:0;z-index:1200;display:none;background:rgba(10,10,9,.96);touch-action:none;overflow:hidden}
.pg-zoom.open{display:block}
.pg-zoom-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#pgZoomImg{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;user-select:none;-webkit-user-drag:none;cursor:zoom-in;will-change:transform}
.pg-zoom.zoomed #pgZoomImg{cursor:grab}
.pg-zoom-close{position:absolute;top:14px;right:16px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.45);color:#fff;font-size:24px;cursor:pointer;line-height:1}
.pg-zoom-hint{position:absolute;left:0;right:0;bottom:20px;text-align:center;color:rgba(255,255,255,.72);font-size:12px;pointer-events:none;transition:opacity .3s}
.pg-zoom.zoomed .pg-zoom-hint{opacity:0}

/* ---------- Продуктова галерия ---------- */
.pg-overlay{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;background:rgba(18,18,16,.82);padding:18px}
.pg-overlay.open{display:flex}
.pg-card{
  background:var(--paper,#f5f1e8);border-radius:16px;overflow:hidden;position:relative;
  width:min(980px,100%);max-height:92vh;display:grid;grid-template-columns:1.15fr .85fr;
}
.pg-close{position:absolute;right:12px;top:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(20,20,18,.7);color:#fff;font-size:22px;cursor:pointer;line-height:1}
.pg-gallery{background:#fff;padding:18px;display:flex;flex-direction:column;gap:12px;min-height:0}
.pg-main{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;background:var(--soft);border-radius:10px;overflow:hidden}
.pg-main img{max-width:100%;max-height:56vh;object-fit:contain;display:block}
.pg-thumbs{flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.pg-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent;flex:0 0 auto}
.pg-thumbs img.on{border-color:var(--accent)}
.pg-info{padding:26px 26px 24px;overflow-y:auto}
.pg-info h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:400;line-height:1.05;margin:8px 0 12px}
.pg-info p{color:#4a453e;line-height:1.6;margin:0 0 18px}
.pg-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.pg-tags span{font-size:11px;background:#efe9dd;border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:#5b544a}

.pg-form{display:grid;gap:10px;margin-top:6px}
.pg-form input,.pg-form textarea{border:1px solid var(--line);background:#fff;border-radius:9px;padding:12px 13px;font-size:16px;color:var(--ink);width:100%}
.pg-form textarea{min-height:70px;resize:vertical}
.pg-form .pg-required{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pg-hint{font-size:12px;color:var(--muted);margin:2px 0 0}
.pg-msg{font-size:13px;margin:4px 0 0}
.pg-msg.err{color:#b32d2e}
.pg-msg.ok{color:#1f6438}
.pg-done{text-align:center;padding:20px 0}
.pg-done b{font-family:var(--serif);font-size:24px;font-weight:400;display:block;margin-bottom:6px}

@media(max-width:820px){
  .flip-overlay{padding:10px}
  .flip-frame{border-radius:12px;padding:8px 9px 6px;box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 0 0 4px #fff}
  .flip-logo{height:22px}
  .flip-name{font-size:14px}
  /* стрелките са ВЪРХУ картината, за да ползва страницата цялата ширина */
  .flip-stage{position:relative;padding:6px 0;gap:0}
  .flip-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:38px;height:38px;font-size:20px;background:rgba(255,255,255,.92)}
  .flip-prev{left:2px}
  .flip-next{right:2px}
  /* на тъч няма hover — подсказката „Виж продукта" стои видима */
  .leaf-face.has-product .flip-tag{opacity:.96;bottom:12px;font-size:11px;padding:6px 13px}
  .pg-card{grid-template-columns:1fr;max-height:94vh;overflow-y:auto}
  .pg-main img{max-height:42vh}
  .pg-info{padding:20px}
  .pg-form .pg-required{grid-template-columns:1fr}
}

/* Единствен CTA бутон в продуктовия модал — пълна ширина, отдолу */
.pg-form .pg-cta{width:100%;min-height:52px;margin-top:6px;font-size:14px;letter-spacing:.01em}
.pg-viz-intro{margin-bottom:12px}