/* ============================================================
   mobile-ui-v3.css  —  Balgopaladress_Kunj
   Loads AFTER site.css + mobile-ui-v2.css so these win.
   Fixes: 1) product images square & not cut/stretched on phones
          2) footer columns readable on iPhone (no 1-letter wrapping)
          3) image lightbox (click photo -> full view with close X)
   ============================================================ */

/* ---------- 1. PRODUCT IMAGES: consistent square, whole image visible ---------- */

/* Product CARD (grid) thumbnail — square, fills nicely */
.card .imgw { aspect-ratio: 1 / 1; overflow: hidden; }
.card .imgw a { display:block; width:100%; height:100%; }
.card .imgw img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;            /* fills the square; cards look uniform */
    display: block;
}

/* Product DETAIL main image — square frame, show the WHOLE photo (no crop) */
.pd .main {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
}
.pd .main img {
    width: 100%;
    height: 100%;
    object-fit: contain;          /* deity/dress never cut on the detail view */
    aspect-ratio: auto !important;
    border-radius: 10px;
}

/* Detail thumbnails — even squares */
.pd .pgal, .pd .thumbs { display:flex; gap:9px; margin-top:11px; flex-wrap:wrap; }
.pthumb, .pd .thumbs .th {
    width: 64px; height: 64px; border-radius: 9px;
    border: 2px solid var(--line); background: var(--cream);
    overflow: hidden; cursor: pointer; padding:0;
}
.pthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.pthumb.on { border-color: var(--maroon); }

@media (max-width: 768px) {
    /* detail page stacks; keep the image a tidy square, centered */
    .pd { grid-template-columns: 1fr !important; gap: 20px !important; }
    .pd .main { max-width: 440px; margin: 0 auto; width:100%; }
    .pd .pgal, .pd .thumbs { justify-content: center; }
}

/* ---------- 2. FOOTER: readable columns on phones ---------- */
@media (max-width: 768px) {
    footer .cols {
        grid-template-columns: 1fr 1fr !important;   /* 2 tidy columns, not 4 slivers */
        gap: 22px 18px !important;
        padding: 30px 20px 20px !important;
    }
    footer .cols > div:first-child { grid-column: 1 / -1; }  /* brand/intro spans full width */
    footer h5 { margin-bottom: 10px; font-size: 13px; }
    footer a, footer p { font-size: 12.5px; overflow-wrap: normal; word-break: normal; }
    footer .nm { font-size: 18px; }
}
@media (max-width: 380px) {
    footer .cols { grid-template-columns: 1fr !important; }  /* single column on tiny phones */
    footer .cols > div:first-child { grid-column: auto; }
}

/* ---------- 3. IMAGE LIGHTBOX (full-screen photo viewer) ---------- */
.lbx {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(20,6,10,.92);
    display: none; align-items: center; justify-content: center;
    padding: 24px;
}
.lbx.open { display: flex; }
.lbx img {
    max-width: 94vw; max-height: 88vh;
    object-fit: contain; border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.lbx-close {
    position: absolute; top: 16px; right: 18px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.15); border: none; cursor: pointer;
    color: #fff; font-size: 26px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.lbx-close:hover { background: rgba(255,255,255,.28); }