/* ====================================
   BASE STYLES
   ==================================== */
    body {margin:4px 8px;font-family: 'Roboto', 'Arial', 'sans-serif';}
    h1, h2, h3, h4, h5, h6 {font-weight:normal;}
    .break {display:none;}
    #modalDetailsDescription .business-name {font-weight:bold}
    .mobile-only-image {display: none;}
    .desktop-only-image {display: block;}
    .small-screen-message {display: none;}
    .large-screen-message {display:none;}
    .wrap {padding: 0;}
    .modal-content h5 {font-size:3vh;font-weight:bold;}
    .nopromotions {text-align:center;}
    a, .preset-button-container a {text-decoration:none !important;}
    a:hover, .preset-button-container a:hover {text-decoration:underline !important;}

/* ====================================
   HEADER SECTION
   ==================================== */
     .headsection {font-family: 'Roboto', 'Arial', 'sans-serif';padding: 5px 0 5px 0;width: 100%;background-color: white;display: grid;grid-template-columns: 1fr auto 1fr;align-items: center;}
    .headsectionbuttons {justify-self: start;}
    .headsectionbuttons, .headsectiontitle, .headsectionselect {font-family: 'Roboto', 'Arial', 'sans-serif';}
    .headsectiontitle {justify-self: center;}
    .headsectiontitle h1 {text-align:center;font-weight:600;}
    .headsectionselect {justify-self: end;text-align: right;}
    .headsectionselect select {border-radius:5px;width:35%;}
    .open-direction-modal-button {padding: 5px 15px;font-size: 14px;text-align: center;color: white;background-color: #007bff;border: none;border-radius: 5px;cursor: pointer;margin-top: 0;}
    .open-direction-modal-button:hover {background-color:#015abb;}
    #search-button {background-color: #007bff;border:none;border-radius:5px;color:white;cursor: pointer;}
    #search-button:hover {background-color:#015abb;}
    #search-dropdown {display: none;position: absolute;top: 3vw;right: 10px;background: white;text-align:left;border: 1px solid #ccc;border-radius: 5px;padding: 20px;margin-top: 5px;z-index: 1000;box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
    .search-field {justify-content: space-between;align-items: center;margin-bottom: 20px;}
    .search-field label {margin-right:20px;}
    .search-field input {margin-left: auto;margin-bottom:5px !important;}
    .search-field input, .search-field select {width:11vw;float:right;height:28px;} 
    .search-field select {padding: 2px 0 !important;}
    #search-results h4, #search-results h5{text-align:left;}
    #submit-section {text-align:right;margin-top:20px}
    #submit-section button {padding: 5px 15px;font-size: 15px;border-radius: 5px;border: solid 1px silver;}
    #submit-section button:hover {background-color:gainsboro;color:white;}

/* ====================================
   MODAL STYLES
   ==================================== */
    #myModal .modal-content {width: 70%;}
    .modal {display: none;position: fixed;z-index: 1000; left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.4);}
    .modal-content {font-size:1.5vw; background-color: #fefefe;height: fit-content;margin: 2% auto 0 auto;padding: 2.5%;border: 1px solid #888;border-radius: 10px;width: 50%;font-family: 'Roboto', 'Arial', 'sans-serif';}
    #modalDetailsHeader {font-size: 20px; font-weight: bold; margin:0;text-align:center;}
    .modal-content img {border-radius: 5px; margin: 0;width:100%;}
    .modal-content .modalcopyright {font-size: 12px; text-align:center;margin-top:5%;}
    .modalbusinessname {font-weight:bold;}
    #modalDetailsImage {display:unset !important;}
    #modalDetailsDescription .phone {font-weight:bold;}
    #closeDetailsModalBtn {margin-bottom: -25px; margin-top: -10px;text-align: right;float:right;}
    .close {color: #aaa;float: right;font-size: 28px;font-weight: bold;cursor: pointer;margin-top: -10px;}
    .modal-content .modalcopyright {font-size: 12px; text-align:center;margin-top:5%;}
    .modal-content #modalDetailsDescription p, .modal-content .modaldescription p {font-size: 16px;line-height: 1.3;margin:0;-webkit-text-size-adjust: 100%;-ms-text-size-adjust:100%;-moz-text-size-adjust: 100%;}
    .modal-content .modaldescription p.copyright {font-size:12px;margin:20px 0 0 0 !important;text-align:left !important;}
    .modal-content .promotion-description {margin:10px 0 15px 0;white-space: normal;overflow-wrap: break-word;word-break: break-word;}
    .modal-content ul li {margin-bottom:1vh;}
    .qrcode {margin-top:-20px;}
    .qrcode img {width:130px; height:auto; padding:5px;}
    .qrcode p {text-align:center;}
    .modaldescription-qrcode {display: flex;}
    .modaldescription {flex: 1;}
    .copyright {text-align:center;}

/* ====================================
   GRID CONTAINER - BASE (DESKTOP)
   ==================================== */
    .full-width-area {padding: 0;transition: margin-left 0.3s ease;background-color: white;}
    .grid-container {display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px;width: 100%;padding: 0;}
    .grid-item {border: solid 1px lightblue;border-radius: 10px;background-color: white;width: unset;box-shadow: 2px 0 5px rgb(0 0 0 / 10%);padding: 10px;font-family: 'Roboto', 'Arial', 'sans-serif';font-size: 14px;position: relative;display: flex;flex-direction: column;}
    .grid-item p {vertical-align: top; margin: 0;}

/* ====================================
   FULL-WIDTH IMAGE LAYOUT
   ==================================== */
    .grid-item-fullwidth {display: flex;flex-direction: column;}
    .promotion-container {width:100%;height:82%;border-radius: 5px;}
    .open-modal-button {padding: 3px 0; font-size: 14px;color: white;background-color: #e13939;border: none;border-radius: 5px;cursor: pointer;margin-bottom:0;width: 100px;position:relative;}
    .open-modal-button:hover {background-color:#1D5391;}
    .image-wrapper .moredetails {position:absolute;width:36%;text-align: center;}
    .content-wrapper .promotitle h3 {display:none;}
    .image-wrapper {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;overflow: hidden;border-radius:5px;}
    .desktop-only-image {width: 100%;height: auto;max-height: 100%;object-fit: contain;display: block;}

/* ====================================
   PRESET LAYOUT - BASE (DESKTOP)
   ==================================== */
    .grid-item-preset {display: flex;flex-direction: column;}
    .preset-promotion-container {display: flex;flex-direction: unset;height: 83.5%;border-radius: 5px;overflow: hidden;}
    .preset-image-wrapper {text-align:center;height: 100%;flex-shrink: 0;}
    .preset-image-wrapper img {object-fit: cover;border-radius: 5px;}
    .preset-promotion-image {width: 100%;height: 100%;object-fit: cover;border-radius:5px !important;}
    .preset-content-wrapper {padding: 0 20px 20px 20px;flex-direction: column;flex: 1;display: flex;}
    .promotitle {width: 100%;height: auto;overflow: hidden;}
    .promotitle h3 {margin: 0;word-wrap: break-word;overflow-wrap: break-word;hyphens: auto;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    .preset-subtitle {word-wrap: break-word;overflow-wrap: break-word;hyphens: auto;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    .preset-button-container a {padding: 10px 20px !important;}
    .presetpromobutton {width: auto;min-width: 30%;max-width: 70%;text-align:center;display: inline-block;padding: 10px 20px !important;border-radius: 5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

/* ====================================
   RESPONSIVE: MEDIUM DESKTOP (798px - 950px)
   ==================================== */
   @media (min-width: 798px) and (max-width: 950px) {
    .grid-container {grid-template-columns: repeat(2, 1fr);gap: 1vw;overflow-x: hidden;}
    .grid-item {height: calc((99vh - clamp(105px, 105px + (100vw - 960px) / 239 * 15, 145px)) / 2);min-height: 0;overflow: hidden;padding: 6px;}
    .headsection {padding: 0;}
    .headsectiontitle h1 {font-size:1.5vw;}
    .headsectionselect select {font-size:1.5vw !important;padding:0.3vw 1vw;}
    .open-direction-modal-button {font-size:1.4vw !important;padding:0.4vw 1vw;}
    .open-modal-button {font-size:1.35vw;padding:.45vw 0;width: 9.8vw;}
     #modalDetailsHeader {font-size: clamp(15px, 1.5vw, 30px);line-height: 1;letter-spacing: -.02em;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow-wrap: break-word;overflow: hidden;width: 95%;}
     #modalDetailsHeader .modal-promotion-title {width:95%;line-height: 1; letter-spacing: -.02em;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow-wrap: break-word;overflow: hidden;}
     #modalDetailsImageWrapper .preset-promotion-container {display: flex !important;flex-direction: row !important;border-radius: 5px;overflow: hidden;}
     #modalDetailsImageWrapper .preset-image-wrapper {width: 37.5%;flex-shrink: 0;margin: 0 0 0 1.24%; height: 100%;padding-bottom: 1.2%; box-sizing: border-box;}
     #modalDetailsImageWrapper .preset-image-wrapper img {max-width: 100% !important;object-fit: cover;max-height: 100% !important;height: 98% !important;margin-top: 3.75%!important;}
     #modalDetailsImageWrapper .preset-content-wrapper {display: flex;flex-direction: column;gap:.5rem; justify-content: center;overflow: hidden;padding-bottom: 0 !important;padding-left: 1.2vw;padding-right: 1.2vw;flex: 1;}
     #modalDetailsImageWrapper .promotitle {overflow: hidden;flex-shrink: 0;}
     #modalDetailsImageWrapper .promotitle h3 {line-height: 1;letter-spacing: -.02em;}
     #modalDetailsImageWrapper .preset-button-container a {padding: 1.5vh 1.8vw !important;}
     #modalDetailsImageWrapper .presetbottomline {line-height: 1;}
    .preset-promotion-container, .promotion-container {display: flex !important;flex-direction: row !important;height: 77% !important;}
    .preset-image-wrapper {width: 36%;flex-shrink: 0;margin: 0 0 0 1.24%;height: 100%;padding-bottom: 1.25%;box-sizing: border-box;}
    .preset-image-wrapper img {max-width: 100% !important;object-fit: cover;max-height: 100% !important;height: calc(100% - 0.8vh);margin-top: clamp(-19px, calc(-14px + (100vw - 960px) / 239 * -5), -14px);}
    .preset-content-wrapper {display: flex;flex-direction: column;gap:.4rem; justify-content: center;padding-bottom: 0 !important;padding-left: 1.1vw; padding-right: 1.1vw;}
    .promotitle {overflow: hidden;flex-shrink: 0;}
    .promotitle h3 {line-height: 1;letter-spacing: -.02em;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow-wrap: break-word;}
    .preset-subtitle {letter-spacing: -.02em !important;overflow:hidden; line-height: 1;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;flex-shrink: 0;}
    .preset-button-container {flex-shrink: 0;}
    .preset-button-container a {padding: 1.3vh 1.2vw !important;}
    .presetbottomline {letter-spacing: -.02em !important;line-height: 1;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;flex-shrink: 0;}
    .image-wrapper p.moredetails {left: clamp(22px, calc(1.21vw + 10.5px), 25px) !important;width: clamp(140px, calc(16.87vw - 17.3px), 181px) !important;position: absolute;top:10px;text-align: center;}
    .description p, .preset-description p {font-size: clamp(10.9px, 1.26vw, 13.7px);line-height: .95;min-height: 0;max-height: 25px;margin: .7vh 0 0 0;overflow: visible;text-size-adjust: none;transform: scale(1);height: unset;}
    .content-wrapper .promotitle h3 {display:none;}
    .modal-content .promotion-description {font-size: 1.8vw !important;}
    .modal-content .modaldescription p {font-size: 1.8vw !important;line-height: 1.35;}
    .modal-content .modaldescription p.copyright {font-size: 1.4vw !important;margin:20px 0 0 0 !important;text-align:left;}
    .qrcode {margin-top: 0;}
    .qrcode img {width: 11vw !important;}
    .qrcode p {margin: 0 0 5px 0;font-size: 1.4vw !important;}
    .copyright {font-size: 1.4vw !important;margin-top:10px;}
    #search-button {font-size:1.5vw;padding: 0.5vw 1vw;}
    #search-dropdown {font-size:1.5vw;padding: 10px 20px 20px 20px;width:30vw;margin-top:0;margin-top:10px;}
    .search-field {justify-content: space-between;align-items: center;margin-bottom: 20px;}
    .search-field label {margin-right:20px;}
    .search-field input {margin-left: auto;margin-bottom:5px !important;font-size:1.5vw !important;}
    .search-field input, .search-field select {width:16vw;float:right;height:27px;} 
    .search-field select {padding: 2px 0 !important;font-size: 1.5vw !important;}
    #search-results h4, #search-results h5 {text-align:left;font-size:1.5vw !important;}
    #submit-search {font-size:1.5vw !important; padding: 5px 10px;}
}

/* ====================================
   RESPONSIVE: MEDIUM DESKTOP (798px - 960px)
   ==================================== */
   @media (min-width: 798px) and (max-width: 960px) {
    .image-wrapper p.moredetails {left: clamp(17px, calc(-13.558px + 3.704vw), 22px) !important;width: clamp(122px, calc(8.7px + 14.198vw), 145px) !important;position: absolute;text-align: center;}
    .description, .preset-description {height: unset !important;}    
}

/* ====================================
   RESPONSIVE: MEDIUM DESKTOP (951px - 1199px)
   ==================================== */
   @media (min-width: 951px) and (max-width: 1199px) {
    .grid-container {grid-template-columns: repeat(2, 1fr);gap: 1vw;overflow-x: hidden;}
    .grid-item {height: calc((100vh - clamp(130px, 130px + (100vw - 960px) / 239 * 15, 145px)) / 2);min-height: 0;overflow: hidden;}
    .headsection {padding: 0;}
    .headsectiontitle h1 {font-size:1.3vw;}
    .headsectionselect select {font-size:1.2vw !important;padding:0.4vw 1vw;}
    .open-direction-modal-button {font-size:1.2vw;padding:0.4vw 1vw;}
    .open-modal-button {font-size:1.18vw;padding:.39vw 0;width: 9vw;position: relative;z-index: 10;}
     #modalDetailsHeader {font-size: clamp(15px, 1.5vw, 30px);line-height: 1;letter-spacing: -.02em;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow-wrap: break-word;overflow: hidden;width: 95%;}
     #modalDetailsHeader .modal-promotion-title {width:95%;line-height: 1; letter-spacing: -.02em;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow-wrap: break-word;overflow: hidden;}
     #modalDetailsImageWrapper .preset-promotion-container {display: flex !important;flex-direction: row !important;border-radius: 5px;overflow: hidden;}
     #modalDetailsImageWrapper .preset-image-wrapper {width: 36%;flex-shrink: 0;margin: 0 0 0 1.24%;height: unset; box-sizing: border-box;}
     #modalDetailsImageWrapper .preset-image-wrapper img {max-width: 100% !important;object-fit: cover;max-height: 100% !important;height: 98% !important;margin-top: 2.65%!important;}
     #modalDetailsImageWrapper .preset-content-wrapper {display: flex;flex-direction: column;justify-content: center;gap:.7rem;padding-bottom: 0 !important;padding-left: 1.1vw;padding-right: 1.1vw; flex: 1;}
     #modalDetailsImageWrapper .preset-button-container a {padding: 1.35vh 1.2vw !important;}
     #modalDetailsImageWrapper .promotitle h3 {line-height: 1; letter-spacing: -.02em;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow-wrap: break-word;}
    .preset-promotion-container, .promotion-container {display: flex !important;flex-direction: row !important;height: 85% !important;}
    .preset-image-wrapper {width: 36%;flex-shrink: 0;margin: 0 0 0 1.24%;height: 100%;padding-bottom: 1.25%;box-sizing: border-box;}
    .preset-image-wrapper img {max-width: 100% !important;object-fit: cover;max-height: 100% !important;height: calc(100% - 0.8vh);margin-top: clamp(-19px, calc(-14px + (100vw - 960px) / 239 * -5), -14px);}
    .preset-content-wrapper {display: flex;flex-direction: column;justify-content: center;gap:.7rem;padding-bottom: 0 !important;padding-left: 1.1vw; padding-right: 1.1vw;}
    .promotitle, #modalDetailsImageWrapper .promotitle {overflow: hidden;flex-shrink: 0;}
    .promotitle h3 {line-height: 1; letter-spacing: -.02em;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow-wrap: break-word;}
    .preset-subtitle, #modalDetailsImageWrapper .preset-subtitle {overflow:hidden;letter-spacing: -.02em !important;line-height: 1.0;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;flex-shrink: 0;}
    .preset-button-container, #modalDetailsImageWrapper .preset-button-container {flex-shrink: 0;}
    .preset-button-container a {padding: 1.4vh 1.2vw !important;}
    .presetbottomline, #modalDetailsImageWrapper .presetbottomline {letter-spacing: -.02em !important;overflow: hidden;line-height: 1.0;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;flex-shrink: 0;}
    .image-wrapper p.moredetails {left: clamp(22px, calc(1.21vw + 10.5px), 25px) !important;width: clamp(140px, calc(16.87vw - 17.3px), 181px) !important;position: absolute;top:10px;text-align: center;}
    .description p, .preset-description p {font-size: clamp(10.7px, 1.25vw, 13.3px) !important;line-height:.9;margin-top: 5px;min-height: 0;max-height: 35px;overflow: visible;-webkit-text-size-adjust: none !important;text-size-adjust: none !important;transform: scale(1) !important;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
    .description, .preset-description {margin: 0 0 -5px 0 !important;height: 42px;overflow: hidden;}
    .content-wrapper .promotitle h3 {display:none;}
    .modal-content .promotion-description {font-size: clamp(1.7vh, 1.45vw, 22vh) !important;}
    .modal-content .modaldescription p {font-size: clamp(1.7vh, 1.35vw, 22vh) !important;line-height: 1.35;}
    .modal-content .modaldescription p.copyright {font-size: clamp(1.4vh, 1vw, 15vh) !important;margin:20px 0 0 0 !important;text-align:left;}
    .qrcode {margin-top: 0;}
    .qrcode img {width: 11vw !important;}
    .qrcode p {margin: 0 0 5px 0;font-size: clamp(1.7vh, 1.35vw, 22vh);}
    .copyright {font-size: clamp(1.4vh, 1vw, 15vh) !important;margin-top:10px;}
    #search-button {font-size:1.35vw;padding: 0.45vw 1vw;}
    #search-dropdown {font-size:1.35vw;padding: 10px 20px 20px 20px;width:30vw;}
    .search-field {justify-content: space-between;align-items: center;margin-bottom: 20px;}
    .search-field label {margin-right:20px;}
    .search-field input {margin-left: auto;margin-bottom:5px !important;font-size:1.35vw;}
    .search-field input, .search-field select {width:16vw;float:right;height:28px;} 
    .search-field select {padding: 2px 0 !important;font-size: 1.35vw !important;}
    #search-results h4, #search-results h5 {text-align:left;font-size:1.35vw;}
    #submit-search {font-size:1.3vw; padding: 5px 10px;}
}
   
@media only screen and (min-width: 1000px) and (max-width: 1050px) and (min-height: 700px) and (max-height: 799px) {
     body {margin: 4px 8px}
    .grid-item {height: calc((89vh - clamp(151px, 151px + (100vw - 960px) / 239 * 15, 145px)) / 2);}
    .headsection {padding:0;}
    .headsectiontitle h1 {font-size: 1.35vw;}
    .headsectionselect select {font-size: 1.25vw !important}
    .open-direction-modal-button {font-size: 1.25vw !important;padding: 0.5vw 1vw;}
    .modal-content img {height:unset !important;}
    .promotion-container, .preset-promotion-container {height: 71.5% !important;}
    .description, .preset-description {height: unset;overflow: unset;}
    .description p, .preset-description p {font-size: clamp(14px, 2.5vw, 13.3px) !important;line-height: 2.08vh;margin: 1.5vh 0 0 0;height:65px;max-height: 65px;}
    .content-wrapper .promotitle h3 {display:none;}
    .copyright {margin-top: 20px !important;}
    #search-button {padding: 0.55vw 1vw;}
    #search-dropdown {font-size:1.35vw;padding: 10px 20px 20px 20px;width:30vw;}
    .search-field {justify-content: space-between;align-items: center;margin-bottom: 20px;}
    .search-field label {margin-right:20px;}
    .search-field input {margin-left: auto;margin-bottom:5px !important;font-size:1.35vw !important;}
    .search-field input, .search-field select {width:16vw;float:right;height:28px;} 
    .search-field select {padding: 2px 0 !important;font-size: 1.35vw !important;}
    #search-results h4, #search-results h5 {text-align:left;font-size:1.35vw;}
}

/* ====================================
   RESPONSIVE: LARGE DESKTOP (1200px+)
   ==================================== */
    @media (min-width: 1200px) {
    .grid-container {grid-template-columns: repeat(2, 1fr);gap: 10px;overflow-x: hidden;}
    .grid-item {height: calc((95vh - clamp(108px, 108px + (120vw - 1200px) / 32, 145px)) / 2);min-height: 0;overflow: hidden;}
    .headsection {padding: 0;}
    .headsectiontitle h1 {font-size:1.15vw;}
    .headsectionselect select {font-size:1.1vw !important;padding: 0.35vw 1vw;}
    .open-direction-modal-button {font-size:1.1vw !important;}
    .open-modal-button {font-size:.98vw !important;padding:.38vw 0;width: 8.5vw;position: relative;z-index: 10;}
     #modalDetailsHeader {font-size: clamp(16px, 1.3vw, 32px) !important;}
     #modalDetailsHeader .modal-promotion-title {width:95%;line-height: 1; letter-spacing: -.02em;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow-wrap: break-word;overflow: hidden;}
     #modalDetailsImageWrapper .preset-promotion-container {display: flex !important;flex-direction: row !important;border-radius: 5px;overflow: hidden;}
     #modalDetailsImageWrapper .preset-image-wrapper {width: 36%;flex-shrink: 0;margin: 0 0 0 1.25%;height: 100%;padding-bottom: 1.25%;box-sizing: border-box;}
     #modalDetailsImageWrapper .preset-image-wrapper img {max-width: 100% !important;object-fit: cover;max-height: 100% !important;height: 99% !important;margin-top: 3.75%!important;}
     #modalDetailsImageWrapper .preset-content-wrapper {display: flex;flex-direction: column;justify-content: center;gap:.95rem;padding-bottom: 0 !important;padding-left: 1.1vw;padding-right: 1.1vw;flex: 1;}
     #modalDetailsImageWrapper .promotitle {overflow:hidden;flex-shrink: 0;}
     #modalDetailsImageWrapper .promotitle h3 {line-height: 1;letter-spacing: -.02em;}
     #modalDetailsImageWrapper .preset-subtitle {line-height:1.1;}
     #modalDetailsImageWrapper .preset-button-container a {padding: 1.3vh 1.2vw !important;}
     #modalDetailsImageWrapper .presetbottomline {letter-spacing: -.02em !important;line-height: .9;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;flex-shrink: 0;}
    .promotion-container {width:100%;height: 83%;}
    .preset-promotion-container {display: flex !important;flex-direction: row !important;height: 83%; }
    .preset-image-wrapper {width: 36%;flex-shrink: 0;margin: 0 0 0 1.25%;height: 100%;padding-bottom: 1.25%;box-sizing: border-box;}
    .preset-image-wrapper img {max-width: 100% !important;object-fit: cover;max-height: unset !important;height: calc(100% - 0.8vh);margin-top: clamp(-25px, calc(-16px + (100vw - 1200px) / 720 * -9), -15px);}
    .preset-content-wrapper {display: flex;flex-direction: column;justify-content: center;gap:.6rem;padding-bottom: 0 !important;padding-left: 1.1vw;padding-right: 1.1vw;}
    .promotitle {overflow: hidden;flex-shrink: 0;}
    .promotitle h3 {line-height:1;letter-spacing: -.02em;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow-wrap: break-word;overflow:visible !important;}
    .preset-subtitle {letter-spacing: -.02em !important;line-height: 1;overflow:hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;flex-shrink: 0;}
    .preset-button-container {flex-shrink: 0;}
    .preset-button-container a {padding: 1.1vh 1.1vw !important;}
    .presetbottomline {letter-spacing: -.02em !important;line-height: .9;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;flex-shrink: 0;}
    .description, .preset-description {margin: 0 0 -5px 0 !important;}
    .description p, .preset-description p {font-size: clamp(1.3vh, 1.12vw, 24vh) !important;line-height: 1 !important;min-height: 0 !important;max-height:25px;margin: .7vh 0 0 0 !important;overflow: visible !important;text-size-adjust: none !important;transform: scale(1) !important;height: unset;}
    .image-wrapper p.moredetails {left: clamp(26px, calc(11px + 1.25vw), 32px) !important;width: clamp(184px, calc(-11px + 16.25vw), 262px) !important;position: absolute;text-align: center;top:10px;}
    .content-wrapper .promotitle h3 {display:none;}
    .modal-content .promotion-description {font-size: clamp(1.6vh, 1.22vw, 22vh) !important;}
    .modal-content .modaldescription p {font-size: clamp(1.6vh, 1.22vw, 22vh) !important;line-height: 1.35;}
    .modal-content .modaldescription p.copyright {font-size: clamp(1.2vh, .85vw, 15vh) !important;margin:20px 0 0 0 !important;text-align:left;}
    .qrcode {margin-top: 0;}
    .qrcode img {width: 10vw !important;}
    .qrcode p {margin: 0 0 5px 0;font-size: clamp(1.6vh, 1.22vw, 22vh);}
    .copyright {font-size: clamp(1.2vh, .85vw, 15vh) !important;margin-top:20px;}
}

@media only screen and (min-width: 1350px) and (max-width: 1450px) and (min-height: 1000px) and (max-height: 1050px) {
    body {margin: 10px 8px 10px 8px !important;}
   .grid-item {height: calc((100vh - clamp(270px, 230px + (100vw - 960px) / 239 * 15, 145px)) / 2) !important;}
    .headsection {padding: 0 0 10px 0 !important;}
    .headsectiontitle h1 {font-size: 1.25vw;}
    .headsectionselect select {font-size: 1.1vw !important; padding: 0.35vw 1vw;}
    .open-direction-modal-button {font-size: 1.1vw !important;padding: 0.35vw 1vw;}
     #modalDetailsImageWrapper .preset-content-wrapper {display: flex;flex-direction: column;justify-content: center;gap:1.6rem;padding-bottom: 0 !important;padding-left: 1.1vw;padding-right: 1.1vw;flex: 1;}
    .promotion-container, .preset-promotion-container {height: clamp(295px, calc(24vw - 29px), 319px) !important;}
    .preset-button-container a {padding: 1.1vh 1.2vw !important;}
    .description p, .preset-description p {font-size: 1.2vw !important;line-height: 1.8vh !important;margin: .7vh 0 0 0 !important;max-height: 25px;}
    .preset-content-wrapper {display: flex;flex-direction: column;justify-content: center;gap: 1.5rem;}
    .content-wrapper .promotitle h3 {display:none;}
    .copyright {margin-top: 30px !important;}
    #search-button {font-size: 1.1vw !important; padding: 7px 10px !important;}
    #search-dropdown {font-size:1.2vw;padding: 10px 20px 20px 20px;width: 30vw;margin-top: 10px;}
    .search-field {justify-content: space-between;align-items: center;margin-bottom: 20px;}
    .search-field label {margin-right:20px;}
    .search-field input {margin-left: auto;margin-bottom:5px !important;font-size:1.2vw;}
    .search-field input, .search-field select {width:16vw;float:right;height:30px;} 
    .search-field select {padding: 2px 0 !important;font-size: 1.2vw !important;}
    #search-results h4, #search-results h5 {text-align:left;font-size:1.2vw;}
    #submit-search {font-size:1.2vw; padding: 5px 10px;}
}

/* ====================================
   RESPONSIVE: LARGE DESKTOP (1681px+)
   ==================================== */
@media (min-width: 1681px) {
    .promotitle h3 {line-height:1;letter-spacing: -.02em;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow-wrap: break-word;}
    #modalDetailsImageWrapper .promotitle h3 {line-height:1.1;}
    .preset-subtitle {letter-spacing: -.02em !important;line-height: 1.1;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;flex-shrink: 0;}
    #modalDetailsImageWrapper .preset-content-wrapper {gap:.6rem;margin-top:-10px;}
    .preset-button-container {flex-shrink: 0;}
    .preset-button-container a {padding: 1.2vh .8vw !important;}
    .preset-content-wrapper {gap:1.3rem;}
    #modalDetailsImageWrapper .preset-button-container a {padding: 1.3vh 1.2vw !important;}
    .presetbottomline {letter-spacing: -.02em !important;line-height: 1;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;flex-shrink: 0;}
   .image-wrapper p.moredetails {left: clamp(29px, calc(-7.747px + 2.186vw), 37px) !important;width: clamp(265px, calc(12.396px + 15.027vw), 320px) !important;position: absolute;top:10px;text-align: center;}
    #search-dropdown {font-size:1.1vw;padding: 10px 20px 20px 20px;width:30vw;margin-top:0;}
    .search-field {justify-content: space-between;align-items: center;margin-bottom: 20px;}
    .search-field label {margin-right:20px;}
    .search-field input {margin-left: auto;margin-bottom:5px !important;font-size:1.1vw !important;}
    .search-field input, .search-field select {width:16vw;float:right;height:32px;} 
    .search-field select {padding: 2px 0 !important;font-size: 1.1vw !important;}
    #search-results h4, #search-results h5 {text-align:left;font-size:1.1vw !important;}
    #submit-search {font-size:1.1vw !important; padding: 5px 10px;}
}

/* ====================================
   RESPONSIVE: LARGE DESKTOP (2048px+)
   ==================================== */
@media (min-width: 2048px) {   
.wrap {display:none !important;}
.large-screen-message {display:block;font-size: 68px;text-align:center;margin-top:250px;}
}

/* ====================================
   RESPONSIVE: MOBILE LANDSCAPE (481px - 797px)
   ==================================== */
    @media (min-width: 481px) and (max-width: 797px) {
     .wrap {height:570px; overflow-y:auto;}
    .grid-container {display: block;overflow-x: hidden;}
    .grid-item {background-color: white;height: unset;margin-bottom: 20px;}
    .grid-item .description {line-height:15px; font-size:15px;}
    .grid-item img {width: 100%; height: unset;}
    .headsection {padding: 10px 0 5px 0;display: unset;grid-template-columns: unset;align-items: center;}
    .headsectionbuttons {display:block;margin: 0 auto;text-align:center;width:100%;}
    .headsectiontitle {display:block; margin: 0 auto; width:100%;text-align:center;}
    .headsectiontitle h1 {font-size: 20px;font-weight: bold;}
    .headsectionselect {align-content: center !important;display: flex;flex-wrap: wrap;justify-content: center;margin-bottom: 10px;}
    .headsectionselect select {margin-right: 10px;font-size: 14px !important;}
    .headsectionselect #category-select {width:38%; height:28px;}
    .headsectionselect #group-select {width:41%; height:28px;}
    .open-direction-modal-button {display:inline-block;}
    .modalbusinessname {margin-top:20px;}
     #modalDetailsHeader {font-size: 16px;line-height: 1;letter-spacing: -.02em;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow-wrap: break-word;overflow: hidden;width: 95%;}
     #modalDetailsHeader .modal-promotion-title {width:95%;line-height: 1; letter-spacing: -.02em;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow-wrap: break-word;overflow: hidden;}
     #modalDetailsImageWrapper .preset-image-wrapper {margin: 0 0 5px 5px;}
     #modalDetailsImageWrapper .presetbottomline {letter-spacing: -.02em !important;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;flex-shrink: 0;}
     #modalDetailsImageWrapper .preset-content-wrapper {display: flex;flex-direction: column;gap:.3rem;justify-content: center;padding: 0 2vw;line-height:1;}
    .modal-content {font-size:14px !important;width:80% !important;}
    .preset-promotion-container {height: auto !important;}
    .preset-image-wrapper {width: 35.5%;flex-shrink: 0;margin: 0 0 15px 15px;}
    .preset-image-wrapper img {margin: 5px 0 0 0 !important;width: 100% !important;height: auto;object-fit: cover;}
    .preset-content-wrapper {display: flex;flex-direction: column;gap:.7rem;justify-content: center;padding: 0 2vw;line-height:1;}
    .image-wrapper p.moredetails {left: clamp(21px, calc(2.85vw + 7.3px), 30px) !important;width: clamp(139px, calc(32.66vw - 18.1px), 242px) !important;position: absolute;top:10px;text-align: center;}
    .promotitle {overflow: hidden;flex-shrink: 0;}
    .promotitle h3 {line-height:1;letter-spacing: -.02em;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow-wrap: break-word;}
    .preset-subtitle {line-height: 1.1;overflow:hidden;word-wrap: break-word;overflow-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    .preset-button-container a, .preset-button-container span {padding: 10px 20px !important;white-space: nowrap !important;}
    .presetpromobutton {width: auto !important;min-width: 45%;max-width: 70%;white-space: nowrap !important;overflow: hidden;text-overflow: ellipsis;padding: 10px 20px !important;}
    .presetbottomline {letter-spacing: -.02em !important;line-height: 1;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;flex-shrink: 0;}
    .description p, .preset-description p {font-size: clamp(13px, 2.3vw, 16px) !important;line-height: 1.15 !important;height: auto !important;min-height: 0 !important;max-height: none;margin: 10px 0 0 0 !important;overflow: visible !important;-webkit-text-size-adjust: none !important;text-size-adjust: none !important;transform: scale(1) !important;}
    .promotion-container .promotitle {display:none;}
    .content-wrapper .promotitle h3 {display:none;}
    .modal-content .promotion-description {font-size: clamp(14px, 2.3vw, 16px) !important;line-height: 1.2;margin:10px 0 20px 0;-webkit-text-size-adjust: 100%;-ms-text-size-adjust:100%;-moz-text-size-adjust: 100%;}
    .modal-content .modaldescription p {font-size: clamp(14px, 2.3vw, 16px) !important;line-height: 1.3;margin:0;-webkit-text-size-adjust: 100%;-ms-text-size-adjust:100%;-moz-text-size-adjust: 100%;}
    .modal-content .modaldescription p.copyright {font-size: clamp(13px, 2.3vw, 16px) !important;margin:20px 0 0 0 !important;text-align:left !important;}
    .qrcode {margin-top: 0;}
    .qrcode p {margin: 0 0 5px 0;font-size: 2.5vw !important;}
    .qrcode img {width: 110px;}
    .copyright {font-size: 11px !important; margin-top:0px !important;}
    #search-button {padding: 0 15px;height: 28px;font-size:14px;}
    #search-dropdown {font-size:2.3vw;padding: 10px 20px 20px 20px;width:45vw;margin-top:0;top: 23vh;}
    .search-field {justify-content: space-between;align-items: center;margin-bottom: 20px;}
    .search-field label {margin-right:20px;}
    .search-field input {margin-left: auto;margin-bottom:5px !important;font-size:2.3vw !important;}
    .search-field input, .search-field select {width:22vw;float:right;height:28px;} 
    .search-field select {padding: 2px 0 !important;font-size: 2.3vw !important;margin-right:0}
    #search-results h4, #search-results h5 {text-align:left;font-size:2.3vw !important;}
    #submit-search {font-size:2.3vw !important; padding: 5px 10px;}
}

@media (min-width: 360px) and (max-width: 414px) {
    .preset-image-wrapper img, .image-wrapper img  {height: clamp(120px, calc(22.1vh - .4px), 180px) !important;;width: auto;margin:20px auto 0 auto;object-fit: contain !important;border-radius:5px !important;}
    .preset-promotion-container, .promotion-container {height: clamp(180px, calc(27.04vh + 3.33px), 205px) !important; padding:0;border-bottom-right-radius:unset;border-bottom-left-radius:unset;border-top-left-radius:10px;border-top-right-radius:10px;}
}

@media (max-width: 325px) {
   .preset-image-wrapper img, .image-wrapper img {height: clamp(110px, calc(4vh + 99px), 125px) !important;width: auto !important;margin:20px auto 0 auto;object-fit: contain !important;border-radius:5px !important;}
   .preset-promotion-container, .promotion-container {height: clamp(135px, calc(4.57vh + 124px), 150px) !important;width:auto !important;padding:0;border-bottom-right-radius:unset;border-bottom-left-radius:unset;border-top-left-radius:5px;border-top-right-radius:5px;}
   .grid-item {height: clamp(205px, calc(4.57vh + 195px), 230px) !important;padding:0;margin:0;border-radius: 5px !important;box-shadow: 2px 0 3px rgb(0 0 0 / 10%) !important;}
   .title-description p, .preset-description p {color:black;font-size:12px !important;line-height: 1.1;min-height: 0 !important;max-height: none !important;margin:0 !important;overflow: hidden !important;-webkit-text-size-adjust: none !important;text-size-adjust: none !important;transform: scale(1) !important;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
}

/* ====================================
   RESPONSIVE: MOBILE PORTRAIT (350> <480px)
   ==================================== */
@media (min-width: 350px) and (max-width: 480px) {
     *,*::before,*::after {box-sizing: border-box;}
    .grid-container {display: grid !important;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 8px;}
    .grid-item {height: clamp(255px, calc((90vh - 250px) / 2), 380px);padding:0px;margin-bottom: 30px;}
    .grid-item .placeholderimage {height:70%;border-radius: 10px;}
    .preview-header {margin-bottom:10px;}
    .headsection {padding: 0;display: unset;grid-template-columns: 1fr auto 1fr;align-items: center;}
    .headsectionbuttons {display:block;margin: 0 auto;text-align:center;}
    .headsectiontitle {display:block; margin: 0 auto; text-align:center;justify-self: center;}
    .headsectiontitle h1 {font-size: clamp(14px, 5.5vw, 18px) !important;margin: 10px auto 10px auto !important;line-height:1;}
    .headsectionselect {justify-self: end;margin-bottom: 20px; text-align:center;}
    .headsectionselect select {font-size: 14px !important;height: 30px;}
    .open-direction-modal-button {display:inline-block;}
    .preset-image-wrapper, .image-wrapper {width:100%;}
    .preset-image-wrapper .open-modal-button, .image-wrapper p.moredetails .open-modal-button {border-radius:10px;height:30px !important;width:100% !important;position: absolute;left:0;bottom:0;font-size:15px !important;}
    .preset-subtitle, .preset-button-container, .presetbottomline {display:none !important;}
    .placeholderimage {width: 100%;height: 75%;object-fit: cover;object-position: center;}  
    .image-wrapper .moredetails {width:100%;position:unset;}
    .image-wrapper {display:unset !important;}
    .preset-image-wrapper img, .image-wrapper img {height: clamp(110px, calc(4vh + 105px), 145px) !important;width: auto !important;margin:25px auto 0 auto !important;object-fit: contain !important;border-radius:5px !important;}
    .preset-promotion-container, .promotion-container {height: clamp(135px, calc(4.57vh + 135px), 170px) !important;width:auto !important;padding:0;border-bottom-right-radius:unset;border-bottom-left-radius:unset;border-top-left-radius:5px;border-top-right-radius:5px;}
    .content-wrapper .promotitle h3, .preset-content-wrapper .promotitle h3 {font-weight:500 !important;font-size:12px !important;text-align:center !important;padding:0 5px !important;letter-spacing: -.03em !important;line-height:1 !important;overflow: hidden !important;word-wrap: break-word;overflow-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
    .promotitle {margin:0;position: absolute;top: 8px;left: 0;}
    .description, .preset-description {padding:4px 6px 10px 6px !important;}
    .description p, .preset-description p {color:black;font-size:13px !important;line-height: 1.1 !important;min-height: 0 !important;max-height: none !important;margin:0 !important;overflow: hidden !important;-webkit-text-size-adjust: none !important;text-size-adjust: none !important;transform: scale(1) !important;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
    .break {display:contents;}
    .copyright {margin-top: 10px;font-size:12px;}
    .modal-content {font-size:16px;padding:20px;width:90% !important;}
    #closeDetailsModalBtn {margin-top: -20px;margin-right: -15px;}
    .modal-content h2 {font-size:16px !important;font-weight:600 !important;margin: 0 auto !important;padding:0 5px !important;text-align: center;line-height:1; overflow: hidden !important;word-wrap: break-word;overflow-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
    .modal-content #modalDetailsDescription, .modal-content .modaldescription {font-size:16px;line-height: 1.2;}
    .modal-content .promotion-description {font-size:16px !important;}
    .modal-content .modaldescription p.copyright {font-size:12px !important;}
    #modalQrcode {display:none;}
    .bp-modal {align-items: normal;padding-top: 20px;}
    .bp-modal-body {padding: 20px 20px;}
    .bp-modal-header h3 {font-size:17px !important;font-weight:600 !important;padding:0 5px !important;letter-spacing: -.02em !important;text-align: left;line-height:1.3; overflow: hidden !important;word-wrap: break-word;overflow-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;height:40px;}
    .bp-modal-body p, .bp-modal-body input, .bp-modal-body button {font-size:16px;}
    #search-button {font-size: 13.5px !important;padding: 4px 10px;height:27px !important;}
    #search-dropdown {font-size:4.3vw;padding: 10px 10px 20px 10px;width:91vw;margin-top:0;top: 35vw;}
    .search-field {justify-content: space-between;align-items: center;margin-bottom: 20px;}
    .search-field label {margin-right:20px;}
    .search-field input {margin-left: auto;margin-bottom:5px !important;font-size:4.3vw !important;}
    .search-field input, .search-field select {width:42vw;float:right;height:28px;} 
    .search-field select {padding: 2px 0 !important;font-size: 4.3vw !important;margin-right:0}
    #search-results h4, #search-results h5 {text-align:left;font-size:4.3vw !important;}
    #submit-search {font-size:4.3vw !important; padding: 5px 10px;}
}

/* ====================================
   RESPONSIVE: MOBILE PORTRAIT (230> <349px)
   ==================================== */
@media (min-width: 230px) and (max-width: 349px) {
    *,*::before,*::after {box-sizing: border-box;}
    .grid-container {display: grid !important;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 8px;border-radius: 5px !important;box-shadow: 2px 0 3px rgb(0 0 0 / 10%) !important;}
    .grid-item {height: clamp(215px, calc(4.57vh + 200px), 235px) !important;margin:0 0 30px 0;padding:0 !important;}
    .grid-item .placeholderimage {height:70%;}
    .preview-header {margin-bottom:10px;}
    .headsection {padding: 0;display: unset;grid-template-columns: 1fr auto 1fr;align-items: center;}
    .headsectionbuttons {display:block;margin: 0 auto;text-align:center;}
    .headsectiontitle {display:block; margin: 0 auto; text-align:center;justify-self: center;}
    .headsectiontitle h1 {font-size: clamp(14px, 5.5vw, 18px) !important;margin: 10px auto 10px auto !important;line-height:1;}
    .headsectionselect {justify-self: end;margin-bottom: 20px; text-align:center;}
    .headsectionselect select {font-size: 14px !important;height: 25px !important;}
    .open-direction-modal-button {display:inline-block;font-size: 12px !important;}
    #closeDetailsModalBtn {margin-top: -10px;margin-right: -5px;}
    .modal-content {font-size:15.5px;padding:18px;width:90% !important;}
    .modal-content .close {font-size: 20px;}
    .modal-content h2 {font-size:14px !important;font-weight:600 !important;margin-top:5px !important;padding:0 5px !important;text-align: center !important;line-height:1; overflow: hidden !important;word-wrap: break-word;overflow-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
    .modal-content h5 {font-size:18px !important;}
    .modal-content p, .modal-content ul li {font-size:14px;}
    .modal-content ul {margin: 0;padding: 0 0 0 15px;}
    .modal-content #modalDetailsDescription p, .modal-content .modaldescription p {font-size:12.5;}
    #closeDetailsModalBtn {margin-top: -10px;margin-right: -5px;}
    .placeholderimage {width: 100%;height: 75%;object-fit: cover;object-position: center;} 
    .preset-content-wrapper, .content-wrapper {flex-direction: unset;flex: unset;display: unset;width:100% !important;height:100% !important;padding:0;}
    .preset-image-wrapper, .image-wrapper {width:100%;}
    .preset-image-wrapper img, .image-wrapper img {height: clamp(110px, calc(4vh + 99px), 125px) !important;width: auto !important;margin:25px auto 0 auto !important;object-fit: contain !important;border-radius:5px !important;}
    .preset-promotion-container, .promotion-container {height: clamp(140px, calc(4.57vh + 124px), 150px) !important;width:auto !important;padding:0;border-bottom-right-radius:unset;border-bottom-left-radius:unset;border-top-left-radius:5px;border-top-right-radius:5px;}
    .description p, .preset-description p {color:black;font-size:12px !important;line-height: 1.1;min-height: 0 !important;max-height: none !important;margin: 2px 0 0 0 !important;overflow: hidden !important;-webkit-text-size-adjust: none !important;text-size-adjust: none !important;transform: scale(1) !important;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
    .preset-image-wrapper .open-modal-button, .image-wrapper p.moredetails .open-modal-button {border-radius:5px;height:25px;width:100% !important;position: absolute;left:0;bottom:0;font-size:12px !important;}
    .content-wrapper .promotitle h3,.preset-content-wrapper .promotitle h3 {font-size:11px !important;font-weight:500 !important;padding:0 5px !important;letter-spacing: -.03em !important;text-align: center;line-height:1; overflow: hidden !important;word-wrap: break-word;overflow-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
    .promotitle {margin:0;position: absolute;top: 8px;left: 0;}
    .promotitle h3 {font-size: 13px !important;}
    .preset-subtitle, .preset-button-container, .presetbottomline {display:none !important;}
    .description, .preset-description {padding: 3px 2px !important;width: 95%;margin: 0 auto;}
    .break {display:contents;}
    .image-wrapper {width:unset;display: unset;}
    .image-wrapper .moredetails {width:100%;position:unset;}
    .modal-content .promotion-description {font-size:14px;}
    .modal-content #modalDetailsDescription p, .modal-content .modaldescription p {font-size:12.5;}
    .modal-content .modaldescription p.copyright {font-size:10px !important;margin-top:10px !important;}
     #modalQrcode {display:none !important;}
    .copyright {margin-top: 7px;font-size:9.5px;}
    .bp-modal-header h3 {font-size:16px !important;font-weight:600 !important;padding:0 5px !important;letter-spacing: -.02em !important;text-align: left;line-height:1.3; overflow: hidden !important;word-wrap: break-word;overflow-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;height:35px;}
    #search-button {font-size: 13px !important;padding: 4px 10px;height:26px !important;}
    #search-dropdown {font-size:4.3vw;padding: 10px 10px 20px 10px;width:88vw;margin-top:0;top: 38vw;}
    .search-field {justify-content: space-between;align-items: center;margin-bottom: 20px;}
    .search-field label {margin-right:20px;}
    .search-field input {margin-left: auto;margin-bottom:5px !important;font-size:4.3vw !important;}
    .search-field input, .search-field select {width:43vw;float:right;height:28px;} 
    .search-field select {padding: 2px 0 !important;font-size: 4.3vw !important;margin-right:0}
    #search-results h4, #search-results h5 {text-align:left;font-size:4.3vw !important;}
    #submit-search {font-size:4.3vw !important; padding: 5px 10px;}
}

@media (width: 320px) 
       and (min-height: 240px) 
       and (max-height: 580px) {
    .modal-content .promotion-description {font-size: 14px;line-height: 1.2;}
    .modal-content #modalDetailsDescription p, .modal-content .modaldescription p {font-size: 14px;line-height: 1.2;}
}

@media (max-width: 250px) {
.small-screen-message {display:block;font-size:13.5px;padding:15px;text-align:center;}
.wrap {display:none;}
}

@media (min-width: 320px) and (max-width: 480px) {
  .mobile-only-image {display: block !important;border-radius: 5px !important;}
  .desktop-only-image {display: none !important;}
}

/* ====================================
   UTILITY CLASSES & FIXES
   ==================================== */

/* Button accessibility */
button, .open-modal-button, .open-direction-modal-button {-webkit-tap-highlight-color: transparent;touch-action: manipulation;}

/* Prevent content overflow */
.preset-subtitle, .presetbottomline, .preset-description p, .description p {word-wrap: break-word;overflow-wrap: break-word;hyphens: auto;}

/* Ensure smooth font scaling */
* {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

/* Prevent zoom on input focus (iOS) */
input, select, textarea {font-size: 15px !important;}

a:hover {text-decoration: underline;}

/* ====================================
   PRINT STYLES
   ==================================== */
@media print {
    .headsection {display: none;}
    .modal {display: none;}
    .grid-container {grid-template-columns: repeat(2, 1fr);}
    .moredetails {display: none;}
}