:root { --accent: #d62222; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(255, 12, 12, 1), -10px 10px rgba(255, 12, 12, 0.2), -10px -10px rgba(255, 12, 12, 1), 10px -10px rgba(255, 12, 12, 0.2); } 25% { box-shadow: -10px 10px rgba(255, 12, 12, 0.2), -10px -10px rgba(255, 12, 12, 1), 10px -10px rgba(255, 12, 12, 0.2), 10px 10px rgba(255, 12, 12, 1); } 50% { box-shadow: -10px -10px rgba(255, 12, 12, 1), 10px -10px rgba(255, 12, 12, 0.2), 10px 10px rgba(255, 12, 12, 1), -10px 10px rgba(255, 12, 12, 0.2); } 75% { box-shadow: 10px -10px rgba(255, 12, 12, 0.2), 10px 10px rgba(255, 12, 12, 1), -10px 10px rgba(255, 12, 12, 0.2), -10px -10px rgba(255, 12, 12, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #f9f9f9 }.button-2 { border: none; width: 100% !important; font-size: 22px !important; padding: 16px !important; margin-top: 0px !important; margin-left: 7px !important; font-weight: 600; } .buttons i { font-size: 34px; margin-right: 5px; float: left; top: -2px; } .messaging-center.inbox-header-icon { display: none; } /* Target the images within the main gallery carousel */ .owl-carousel.galleryPreview .item img { height: 500px; /* Adjust this height as needed for your design */ width: 100%; /* Make sure images take full width of their container */ object-fit: cover; /* This is the magic! It crops images to fit the height */ display: block; /* Ensures consistent display behavior */ } /* Optional: Adjust the height of the outer container if needed, though Owl Carousel usually sets owl-height dynamically. If you see extra space above/below, you might need to adjust the height on .owl-stage-outer or .owl-item if the images don't quite fill it. */ .owl-carousel.galleryPreview .owl-stage-outer { height: 500px !important; /* Ensure the stage outer matches your image height */ } /* Ensure the parent anchor tag also conforms to the image height */ .owl-carousel.galleryPreview .item { height: 100%; /* Make sure the anchor takes the full height of the item container */ display: flex; /* Helps ensure content aligns if you add text later */ align-items: center; /* Vertically centers the image if it's smaller */ justify-content: center; /* Horizontally centers the image */ } @media (max-width: 767px) { .owl-carousel.galleryPreview .item img { height: 350px; /* Smaller height for phones. Adjust this value as needed! */ } .owl-carousel.galleryPreview .owl-stage-outer { height: 350px !important; /* Ensure the stage outer matches the new phone height */ } } #block_X60iUtT .photoswipe-item { pointer-events: none !important; cursor: default !important; } #block_X60iUtT .photoswipe-item .mi.search { display: none !important; } /* ===== MYLISTING MOBILE BLACK BG FIX ===== */ /* Force white card */ .services-icons-grid .single-menu-item.element { background-color: #ffffff !important; border: 1px solid #eee !important; } /* Kill MyListing dark overlays */ .services-icons-grid .element::before, .services-icons-grid .element::after, .services-icons-grid .single-menu-item::before, .services-icons-grid .single-menu-item::after { content: none !important; background: none !important; } /* Fix image container (MAIN ISSUE) */ .services-icons-grid .menu-thumb, .services-icons-grid .menu-thumb a, .services-icons-grid .photoswipe-gallery, .services-icons-grid .photoswipe-item { background-color: #ffffff !important; } /* Remove dark filter MyListing adds on images */ .services-icons-grid .menu-thumb img { filter: none !important; background-color: #ffffff !important; } /* Disable PhotoSwipe dark behavior on mobile */ @media (max-width: 768px) { .services-icons-grid .photoswipe-gallery, .services-icons-grid .photoswipe-item { pointer-events: none !important; background: #ffffff !important; } /* Force everything white inside */ .services-icons-grid, .services-icons-grid * { background-color: transparent !important; } .services-icons-grid .single-menu-item { background-color: #ffffff !important; } /* Grid spacing */ .services-icons-grid .food-menu-items { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 5px !important; } /* Card */ .services-icons-grid .single-menu-item { padding: 7px !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } /* Content layout */ .services-icons-grid .gr-content { gap: 8px !important; } /* Keep container height but center content */ .services-icons-grid .menu-thumb a { position: relative !important; display: block !important; padding-bottom: 59% !important; /* KEEP THIS */ } /* Center image inside */ .services-icons-grid .menu-thumb img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70% !important; height: auto !important; } .food-menu-items .menu-content { padding: 1px !important; } /* Text */ .services-icons-grid .menu-item-title { font-size: 12px !important; line-height: 1.3 !important; text-align: center; word-break: break-word; padding:0px 7px 2px 7px; } }