/* === Pizza Bros custom UI (Option 2): uniform images + info-overlay descriptions ===
   Added 2026-06. Self-contained; remove the <link>/<script> includes to disable. */

/* 1) Uniform 5:4 product images across the menu grid */
.allproductcontainer .pizza-img.text-center,
.row.products .pizza-img.text-center {
    max-height: none !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}
.allproductcontainer .pizza-img.text-center img,
.row.products .pizza-img.text-center img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 5 / 4 !important;
    object-fit: cover !important;
    display: block;
}

/* keep the Customize pill above the overlay + clickable */
.pizza-img.text-center .customize { z-index: 5 !important; }

/* 2) Description overlay: slides up over the LOWER part of the image, scrollable */
.pb-desc-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 72%;
    box-sizing: border-box;
    padding: 28px 12px 12px;
    background: linear-gradient(to top, rgba(18,18,18,.95) 55%, rgba(18,18,18,.80) 82%, rgba(18,18,18,0) 100%);
    color: #fff;
    text-align: left;
    font-size: 12px;
    line-height: 1.45;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(101%);          /* hidden below the image */
    transition: transform .32s ease;
    z-index: 2;
}
.pb-desc-overlay p { margin: 0 !important; color: #fff !important; }
.box-1.descopen .pb-desc-overlay { transform: translateY(0); }   /* slide up */

/* 3) Info "i" toggle pinned to the right edge of the product name.
   min-height keeps 1- and 2-line names the same block height (dropdowns stay aligned);
   the bottom margin guarantees a gap so the name never touches the size dropdown. */
.box-1 .white-box h4 {
    position: relative !important;
    padding: 0 30px 0 6px !important;
    margin: 4px 0 9px !important;
    min-height: 36px !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.pb-info-btn {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    border: none;
    background: #f0a92b;
    color: #161616;
    width: 22px; height: 22px;
    border-radius: 50%;
    font: italic 700 13px/22px Georgia, 'Times New Roman', serif;
    padding: 0;
    text-align: center;
}
.pb-info-btn:hover { background: #e59c1c; }
.box-1.descopen .pb-info-btn { background: #161616; color: #f0a92b; }