/* Core */
.pbs-wrap{--pbs-cols-desktop:3;--pbs-cols-tablet:2;--pbs-cols-mobile:1;}
.pbs-section{margin:40px 0;}
.pbs-section-title{font-family:"Marcellus",serif;font-weight:700;font-size:28px;margin:0 0 16px;color:#333;letter-spacing:.5px}
.pbs-grid{display:grid;grid-template-columns:repeat(var(--pbs-cols-desktop),1fr);gap:22px}
@media(max-width:1024px){.pbs-grid{grid-template-columns:repeat(var(--pbs-cols-tablet),1fr)}}
@media(max-width:640px){.pbs-grid{grid-template-columns:repeat(var(--pbs-cols-mobile),1fr)}}
/* === Book Card Shadow (outer card) === */
.pbs-card {
  background: #fff;
  border: 1px solid #e6e9f0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* soft blue shadow */
  box-shadow: 0 6px 18px rgba(64, 95, 179, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pbs-card:hover {
  transform: translateY(-3px);
  /* slightly stronger blue on hover */
  box-shadow: 0 10px 24px rgba(64, 95, 179, 0.28);
}

/* === Placeholder for missing book covers === */
.pbs-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* subtle blue striped background */
  background: repeating-linear-gradient(
    45deg,
    #e8f0ff,
    #e8f0ff 10px,
    #dbe6fa 10px,
    #dbe6fa 20px
  );
  color: #4a6fd0; /* blueish text */
  font-weight: 600;
  font-family: 'Marcellus SC', serif;
  letter-spacing: 0.3px;
}

/* === Glossy reflection tint (for templates 9 & 10) === */
.pbs-card.template-10 .pbs-card-media::after,
.pbs-card.template-9  .pbs-card-media::after {
  background: linear-gradient(
    115deg,
    rgba(100, 140, 230, 0.25) 0%,
    rgba(255, 255, 255, 0) 45%
  );
}

.pbs-card-media{position:relative;aspect-ratio:3/4;background:#f7f7f7}
.pbs-card-media img{width:100%;height:100%;object-fit:cover;display:block}.pbs-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#e8f0ff,#e8f0ff 10px,#dbe6fa 10px,#dbe6fa 20px);color:#aaa;font-weight:600}
.pbs-card-body{padding:14px;display:flex;flex-direction:column;gap:12px}
.pbs-card-title{font-size:22px;margin:0;color:#222;font-weight:700;font-family:Marcellus SC;}
.pbs-card-actions{display:flex;gap:10px;flex-wrap:wrap}
.pbs-btn{display:inline-block;padding:5px 10px;border-radius:8px;font-weight:700;border:1px solid #a38100;color:#a38100;text-decoration:none;transition:all .2s}
.pbs-btn:hover{background:#a38100;color:#fff;border-color:#a38100}
.pbs-btn-solid{background:#a38100;color:#fff;border-color:#a38100}
.pbs-btn-solid:hover{filter:brightness(.95)}

/* Corner ribbons */
.pbs-badges.corner-ribbon .pbs-ribbon{position:absolute;top:14px;width:130px;height:28px;line-height:28px;color:#fff;font-weight:800;text-align:center;font-size:12px;letter-spacing:.6px;box-shadow:0 2px 4px rgba(0,0,0,.25);z-index:3}
.pbs-badges.corner-ribbon .pbs-ribbon.tl{left:-30px;transform:rotate(-45deg)}
.pbs-badges.corner-ribbon .pbs-ribbon.tr{right:-30px;transform:rotate(45deg)}
.pbs-badge-featured{background:#6a0dad}.pbs-badge-new{background:#1f9d55}.pbs-badge-hot{background:#b91c1c}
.pbs-badges.corner-ribbon .pbs-tag.extra{position:absolute;top:8px;left:8px;background:#444;color:#fff;padding:4px 8px;border-radius:6px;z-index:4}

/* Split corners */
.pbs-badges.split .pbs-badge{position:absolute;top:10px;padding:6px 10px;border-radius:8px;font-size:12px;font-weight:800;letter-spacing:.6px;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);z-index:3}
.pbs-badges.split .pbs-badge.tl{left:10px}.pbs-badges.split .pbs-badge.tr{right:10px}.pbs-badges.split .pbs-badge.tc{left:50%;transform:translateX(-50%)}

/* Flat labels */
.pbs-badges.flat{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:6px;flex-wrap:wrap;z-index:3}
.pbs-tag{font-size:12px;font-weight:800;padding:4px 8px;border-radius:6px;color:#fff}
.pbs-tag-featured{background:#6a0dad}.pbs-tag-new{background:#1f9d55}.pbs-tag-hot{background:#b91c1c}

/* 3D mockup option */
.pbs-card-media.mockup-3d{perspective:800px;padding:18px;background:transparent}
.pbs-card-media.mockup-3d img{border-radius:4px;transform:rotateY(-18deg);box-shadow:12px 12px 24px rgba(0,0,0,.15),0 0 0 2px rgba(0,0,0,.06);background:#fff}
.pbs-card-media.mockup-3d::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 70%,rgba(255,255,255,.25));pointer-events:none}
/* Keep glossy/zoomed image inside the media frame */
.pbs-card-media{
  overflow: hidden;           /* <-- key: clip the zoomed image */
  position: relative;         /* establish stacking context */
  contain: paint;             /* micro perf win, optional */
}

/* Ensure the text area sits above, just in case */
.pbs-card-body{
  position: relative;
  z-index: 2;
}

/* Media stays underneath the body */
.pbs-card-media{
  z-index: 1;
}

/* Make sure zoom originates from center */
.pbs-card.template-10 .pbs-card-media img,
.pbs-card.template-9  .pbs-card-media img {
  transform-origin: center center;
  display: block;
}

/* Glossy reflection tint (blue version) */
.pbs-card.template-10 .pbs-card-media::after,
.pbs-card.template-9  .pbs-card-media::after {
  background: linear-gradient(
    115deg,
    rgba(100, 140, 230, 0.25) 0%,
    rgba(255, 255, 255, 0) 45%
  );
}




/* Templates 1–8 basics */
.pbs-card.template-2{border-radius:8px;box-shadow:none;border:1px solid #ddd}
.pbs-card.template-3{box-shadow:0 12px 28px rgba(0,0,0,.12)}
.pbs-card.template-4 .pbs-card-media{background:#fff;border:1px solid #eee}
.pbs-card.template-5 .pbs-card-media{background:transparent}.pbs-card.template-5 .pbs-card-body{border-top:1px dashed #eee}
.pbs-card.template-6{border-radius:8px}.pbs-card.template-6 .pbs-card-title{font-size:16px}
.pbs-card.template-7 .pbs-card-title{font-size:20px}
.pbs-card.template-8{border:none;box-shadow:none}.pbs-card.template-8 .pbs-card-media{border-radius:10px;overflow:hidden}

/* Glossy tilt templates */
.pbs-card.template-9 .pbs-card-media img,.pbs-card.template-10 .pbs-card-media img{transition:transform .2s,box-shadow .2s;will-change:transform;box-shadow:0 10px 20px rgba(0,0,0,.2);background:#fff}
.pbs-card.template-9 .pbs-card-media::after,.pbs-card.template-10 .pbs-card-media::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 45%)}
.pbs-card.template-10 .pbs-card-media img{border-radius:8px}
.pbs-card.template-10{border-radius:14px;overflow:hidden}