/* Extracted from templates/portal/base.html on 2026-08-05.
* Base layout rules from the top of , ahead of the theme variables — position kept so the
* cascade is unchanged.
*/
/* MIRAVA: tighter grid for portrait book covers */
.pd-grid {
grid-template-columns: 380px 1fr !important;
gap: 32px !important;
}
@media(max-width: 768px) {
.pd-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}
/* MIRAVA: book cover styling — tight wrapper, no empty space */
.pd-gallery-wrap {
padding: 0 !important;
}
.pd-main-wrap {
background: transparent !important;
border: none !important;
padding: 0 !important;
overflow: visible !important;
cursor: zoom-in;
max-width: 380px !important;
margin: 0 !important;
position: relative;
}
.pd-main-img {
aspect-ratio: auto !important;
max-width: 100% !important;
width: 100% !important;
max-height: 580px !important;
margin: 0 !important;
display: block !important;
object-fit: contain !important;
border-radius: 4px !important;
filter: drop-shadow(0 14px 32px rgba(28,25,23,0.22)) drop-shadow(0 4px 8px rgba(28,25,23,0.12));
transition: transform 0.3s, filter 0.3s;
}
.pd-main-wrap:hover .pd-main-img {
transform: translateY(-3px) !important;
filter: drop-shadow(0 20px 40px rgba(28,25,23,0.28)) drop-shadow(0 6px 12px rgba(28,25,23,0.16));
}
/* MIRAVA mobile: center book cover + breathing space (declared AFTER desktop rule so it wins cascade) */
@media(max-width: 768px) {
.pd-main-wrap {
margin: 0 auto 20px auto !important;
max-width: 280px !important;
}
.pd-gallery-wrap { text-align: center !important; padding: 0 !important; }
}
/* Discount badge — top-left corner of book cover */
.pd-sale-badge {
top: 12px !important;
left: 12px !important;
transform: none !important;
background: #B91C1C !important;
color: #fff !important;
font-family: Georgia, serif !important;
font-weight: 700 !important;
font-size: 14px !important;
padding: 5px 11px !important;
border-radius: 4px !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
}
.pd-thumbs {
background: transparent !important;
border: none !important;
padding-top: 8px !important;
}
.pd-thumb {
border-radius: 6px !important;
box-shadow: 0 2px 8px rgba(28,25,23,0.12) !important;
background: transparent !important;
}
.pd-thumb.active {
box-shadow: 0 0 0 2px #EA580C, 0 4px 12px rgba(234,88,12,0.25) !important;
}