 .ph-head{display:flex;align-items:center;gap:14px;margin:10px 0 18px}.ph-head h1{font-weight:850;font-size:clamp(1.5rem,5vw,2.1rem);margin:0;color:#173b65}.ph-head p{margin:3px 0;color:#60758a}.ph-logo{margin-inline-start:auto;font-size:2rem;color:#1565c0;background:#deecff;border-radius:15px;padding:10px}.ph-search{display:flex;align-items:center;gap:10px;background:white;border:2px solid #c5dcf7;border-radius:15px;padding:12px 16px;margin-bottom:20px;color:#1565c0}.ph-search input{width:100%;border:0;outline:0;color:#173b65;background:transparent}.ph-section{background:#fff;border:1px solid #c7daf0;border-bottom:4px solid #2875c7;border-radius:19px;margin-bottom:16px;padding:15px;box-shadow:0 5px 18px #174c8010}.ph-title{display:flex;align-items:center;gap:10px}.ph-shopicon{display:grid;place-items:center;width:49px;height:49px;flex-shrink:0;border-radius:13px;background:#deecff;color:#1565c0;font-size:1.6rem}.ph-titletext{flex:1;min-width:0}.ph-title h2{font-size:clamp(1rem,3.5vw,1.35rem);font-weight:800;margin:0;overflow-wrap:anywhere}.ph-title p{font-size:.84rem;color:#657587;margin:4px 0}.ph-open{background:#d8f6e5;color:#11623a;border-radius:50px;padding:6px 9px;font-size:.73rem;white-space:nowrap}.ph-tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;color:#22588d;font-size:.77rem}.ph-tags span{background:#eaf3ff;border-radius:20px;padding:5px 9px}.ph-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:5px 2px 13px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.ph-strip::-webkit-scrollbar{display:none}.ph-product{flex:0 0 130px;width:130px;scroll-snap-align:start;border:1px solid #c5d9f1;background:white;border-radius:12px;padding:7px;text-align:right;box-shadow:0 3px 10px #153b6312;color:#1a3858}.ph-product:focus-visible{outline:3px solid #1565c0}.ph-picture{width:100%;aspect-ratio:1;display:grid;place-items:center;background:#f5f9ff;border-radius:9px;overflow:hidden;color:#1c65ac;font-size:2rem}.ph-picture img{width:100%;height:100%;object-fit:contain}.ph-product-name{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:.85rem;margin:8px 0}.ph-product strong{font-size:.92rem}.ph-product small{font-size:.7rem}.ph-all{display:block;text-align:center;text-decoration:none;border-top:1px solid #e2ebf6;padding-top:11px;font-weight:700}.ph-overlay[hidden]{display:none}.ph-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-end;justify-content:center}.ph-shade{position:absolute;inset:0;background:#061b32a8}.ph-sheet{position:relative;background:#fff;border-radius:24px 24px 0 0;width:min(100%,600px);max-height:90dvh;display:flex;flex-direction:column;animation:phRise .23s ease;box-shadow:0 -5px 35px #001b3750}.ph-handle{width:45px;height:5px;background:#c5d2e0;border-radius:20px;margin:10px auto}.ph-close{position:absolute;top:14px;left:16px;border:0;background:#edf4fc;border-radius:50%;width:35px;height:35px;color:#193d66}.ph-body{padding:10px 20px 18px;overflow-y:auto}.ph-large{height:180px;display:grid;place-items:center;background:#f6faff;border-radius:15px;margin-bottom:15px}.ph-large img{max-width:100%;height:100%;object-fit:contain}.ph-body h2{font-size:1.4rem;font-weight:800}.ph-variant{display:flex;align-items:center;gap:12px;border:1px solid #c7d9ef;border-radius:12px;padding:12px;margin:8px 0;cursor:pointer}.ph-variant:has(input:checked){border:2px solid #1565c0;background:#eff6ff}.ph-variant span{flex:1}.ph-sheetfoot{padding:12px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid #e1eaf5;background:#fff}.ph-sheetfoot .btn{padding:13px;font-weight:800}.ph-body .ph-large i{font-size:4rem;color:#1769b9}@keyframes phRise{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}body.ph-locked{overflow:hidden}

/* Standalone responsive product dialog, independent of Bootstrap card and image rules. */
.ph-overlay[hidden]{display:none!important}
.ph-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-end;justify-content:center}
.ph-shade{position:absolute;inset:0;background:rgba(5,24,48,.72)}
.ph-sheet{position:relative;isolation:isolate;display:flex;flex-direction:column;width:min(100%,600px);height:auto;max-height:calc(100dvh - 24px);min-height:0;overflow:hidden;border-radius:24px 24px 0 0;background:#fff;color:#173b65;box-shadow:0 -10px 40px #001a3540;box-sizing:border-box}
.ph-handle{flex:none;width:46px;height:5px;margin:10px auto 7px;border-radius:12px;background:#bed0e4}
.ph-close{position:absolute;top:11px;left:12px;z-index:4;display:grid;place-items:center;width:38px;height:38px;border:1px solid #b9d6f6;border-radius:50%;background:#fff;color:#135aa4}
#phModalBody{display:block;flex:1 1 auto;min-height:0;max-width:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ph-body{display:block;width:100%;min-width:0;box-sizing:border-box;padding:12px 16px 20px;overflow:visible}
.ph-body .ph-large{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:clamp(145px,26dvh,220px);margin:0 0 16px;box-sizing:border-box;padding:12px;overflow:hidden;border-radius:14px;background:#f3f8ff}
.ph-body .ph-large img{position:static!important;display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;float:none!important;margin:0!important}
.ph-body h2{position:static;display:block;clear:both;width:100%;margin:0 0 9px;font-size:clamp(1.05rem,4.5vw,1.35rem);line-height:1.55;font-weight:800;overflow-wrap:anywhere;white-space:normal}
.ph-body p{margin:0 0 12px;line-height:1.6;overflow-wrap:anywhere}
.ph-body h3{margin:14px 0 8px}
.ph-variant{display:flex;align-items:center;gap:10px;width:100%;min-width:0;box-sizing:border-box;margin:8px 0;padding:12px;border:1px solid #c6d9ef;border-radius:12px;cursor:pointer;flex-wrap:wrap}
.ph-variant:has(input:checked){border-color:#1565c0;background:#eff6ff}
.ph-variant span{flex:1 1 120px;min-width:0;overflow-wrap:anywhere}
.ph-variant strong{white-space:nowrap}
.ph-sheetfoot{position:relative;z-index:2;flex:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #e1eaf5;background:#fff}
.ph-sheetfoot .btn{padding:12px;font-weight:800}
body.ph-locked{overflow:hidden}
@media(min-width:700px){.ph-sheet{margin-bottom:16px;border-radius:24px}}

/* Product dialog v3: image and text are distinct non-overlapping flow boxes. */
#phOverlay .ph-sheet{height:min(680px,94dvh);max-height:94dvh;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box}
#phOverlay .ph-sheet-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:14px 16px 18px;display:flex;flex-direction:column;gap:14px}
#phOverlay .ph-modal-image{position:relative!important;flex:0 0 auto!important;display:flex!important;align-items:center;justify-content:center;width:100%!important;height:clamp(140px,25dvh,200px)!important;min-height:140px;max-height:200px;overflow:hidden!important;border-radius:14px;background:#f1f7ff;clear:both;float:none!important}
#phOverlay .ph-modal-image img{position:static!important;display:block!important;float:none!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;margin:0!important;padding:8px!important;box-sizing:border-box!important;transform:none!important}
#phOverlay .ph-modal-details{position:static!important;display:block!important;flex:0 0 auto!important;clear:both!important;width:100%!important;min-width:0!important;overflow:visible!important;float:none!important;box-sizing:border-box!important}
#phOverlay .ph-modal-details h2{position:static!important;clear:both!important;margin:0 0 9px!important;font-size:clamp(17px,4.4vw,23px)!important;line-height:1.6!important;overflow-wrap:anywhere}
#phOverlay .ph-modal-details p{position:static!important;clear:both!important;line-height:1.6!important;margin:0 0 10px!important;overflow-wrap:anywhere}
#phOverlay .ph-modal-details h3{font-size:16px;font-weight:800;margin:12px 0 8px}
#phOverlay .ph-sheetfoot{flex:0 0 auto;position:relative;z-index:2;background:#fff}
