/* Disable the tap highlight on mobile */
  * {-webkit-tap-highlight-color: transparent;-webkit-focus-ring-color: transparent;outline: none;}
  
  .info-head::-webkit-scrollbar,.grid::-webkit-scrollbar {display: none;}

  :root { --bg:ghostwhite;; --card:#fff; --text:#0f0f0f; --muted:#666; --accent:#0a84ff; --shadow:0 6px 20px rgba(0,0,0,.08); }
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;}
  .wrap{max-width:960px;margin:0 auto;padding:16px;}
  #openSearch{width:7rem; font-weight: 400;font-size: 18px;}
  h1{font-size:1.2rem;margin:8px 0 19px;}
  
   /* Search modal specific */
  #searchModal .panel{padding:9px 12px;}
  #searchInput{display:flex;padding:10px;border:1px solid #ddd;border-radius:5px;margin-bottom:12px;font-size: 17px;}
  
  #searchList{list-style:none;padding:0;margin:0;max-height:70vh;overflow:auto;}
  #searchList li{padding:10px;border-bottom:1px solid #eee;}
  #searchList a{text-decoration:none;color:var(--accent);font-weight:600;}
  .cancel-btn{background:none;border:none;color:var(--accent);font-weight:600;font-size:1rem;cursor:pointer;}
  

  /* Home cards (20) */
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;}
  .card{
    background:var(--text);border-radius:3px;box-shadow:var(--shadow);color:white;aspect-ratio: 16 / 10;
    padding:14px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;
    font-weight:700;font-size:1rem;cursor:pointer;min-height:96px;position:relative;
    clip-path: polygon(0 0, 100% 0, 100% 83%, 77% 83%, 69% 100%, 0 100%);
  }
  .card:active {clip-path: none;-webkit-clip-path: none;}
  .badge{display:flex;gap:10px;position:absolute;top:10px;right:10px;}
  .badge a svg{width:22px;height:22px}
  #navToggle{position: fixed; top: 142px; right:-2px; z-index:3; background:#111;border-radius: 10px;padding:2px 15px 9px 3px}
  #navToggle.flipped svg {transform: scaleX(-1);}
  #sideNav {position: fixed;top: 143px;right: -62px;width: 50px;height: auto;background: #111;color: white;display: flex;flex-direction: column;align-items: center;transition: right 0.3s ease;z-index: 2;}
  #sideNav.open {right: 77px;}

  .emoji-row {display: flex;justify-content: space-between;gap: 4px;background: var(--text);list-style: none;margin:0;padding: 0 19px 8px 29px;font-size: 20px;clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%);}
  .emoji-row li {flex: 1;text-align: center;}

  .modal{position:fixed;inset:0;opacity: 0;transform: scale(0.85);visibility: hidden;transform-origin: bottom center;transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;z-index:3;}
  .modal.open{opacity: 1;transform: scale(1);transition: transform 0.3s ease, opacity 0.3s ease;visibility: visible;}

  .modal.swipe-left {transform: translateX(-5px);}
  .modal.swipe-right {transform: translateX(5px);}
  .modal.swipe-down {transform: translateY(80px) scale(0.6);opacity: 0.4;filter: blur(1px);transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, filter 0.5s ease;}
  
  
  .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4);}
  .panel{position:absolute;inset:0;background:var(--card);display:flex;flex-direction:column;}
  .panel-header{padding:12px 14px 12px 14px;display:flex;align-items:center;justify-content:space-between;color: var(--card);background: var(--text);}
  .tooltip {position: absolute;top: 105px; left:10px;display: inline-block;cursor: pointer;font-size: 14px;color: dimgrey;}
  .tooltip .tooltiptext {visibility: hidden;width: max-content;max-width: 210px;background: rgba(0,0,0,0.85);color: #fff;text-align: left;border-radius: 4px;padding: 7px 7px 7px 8px;position: absolute;z-index: 1;bottom: 135%;left: 83%;transform: translateX(-50%);opacity: 0;transition: opacity 0.3s;}
  .tooltip:hover {color: darkgrey;}
  .tooltip:hover .tooltiptext {visibility: visible;opacity: 1;}
  .copied-toast {position: absolute;background: rgba(0,0,0,0.8);color: #fff;padding: 6px 12px;border-radius: 8px;font-size: 0.9rem;pointer-events: none;z-index: 9999;animation: fadeInOut 2s ease forwards;}
  @keyframes fadeInOut {0% { opacity: 0; transform: translate(-50%, 10px); }10%, 90% { opacity: 1; transform: translate(-50%, 0); }100% { opacity: 0; transform: translate(-50%, -10px); }}
  
  #sheetInput{position: fixed;
    top: 9px;
    left: 12px;
    padding: 5px 0px 5px 0px;
    border-radius: 3px;
    border: 1px solid dimgrey;
    border-width: 0px;
    width:44px;
    font-size: 12px;
    font-weight: 600;
    background: var(--text);
    color: dimgrey;
    z-index: 4;
    caret-color: transparent;
    clip-path: polygon(12% 5%, 88% 5%, 100% 0, 100% 100%, 88% 95%, 12% 95%, 0 100%, 0 0);
      transition: all 0.25s ease;
  }
     
    #sheetInput:focus {
      left: 15px;
      border-color: var(--accent);
      border-width:1px 2px 1px 2px;
      padding-left:2px;
      color: #f8fdff;
      font-size: 14px;
    }
    #sheetInput:focus::placeholder {
  color: #f8fdff
}
#sheetInput.loading::placeholder {
  color: #f8fdff;
}
#sheetInput.loading {
  background: var(--text);
  color: white;
  pointer-events: none;
  cursor: not-allowed;
  left: 15px;
  font-size: 14px;
  transition: all 0.25s ease;
}
    
  .panel-title{font-weight:400; font-size:45px; max-width: 50%;}
  .contact-icons, .emoji-row{display:flex;gap:20px;margin-top:88px;padding-top:1px;}
  .emoji-row{margin-top:0;}
  svg{width:26px;height:26px}
  svg:active {scale: 0.9;transform: translateY(1px);}
  .sheetLink.activeLink {border-bottom:1px solid dimgrey; filter: brightness(0.69);}

  /* Products grid */
  .grid{background: var(--bg);padding: 16px 13px 12px 13px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;overflow:auto;flex:1;transform-origin: center;transition: transform 0.5s ease-in-out;}
  .grid.scaled {transform: scale(0.98);filter: brightness(0.99);border-top: black 2px solid;}
  .tile{background:#fff;border:1px solid #eee;border-radius:14px;position:relative;scale:0.97;aspect-ratio:1/1.25;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); min-width: 0; }
  .tile:active {scale: 0.98;transform:}
  .imgbox{position:relative;width:100%;height:24%;padding-top:70%;background:#f1f1f1;overflow:hidden;}
  .imgbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .meta{padding:8px 5px 30px 7px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .tile .name {transition: all 0.3s ease;}
  .name{font-size:.9rem;max-width: 85%;font-weight:400;overflow:hidden;text-overflow:clip;white-space:nowrap;}
  .name.hide {opacity: 0;visibility: hidden;transform: scale(0.95);transition: all 0.3s ease;}
  .price{position: absolute;margin-top: 42px;font-weight:600;color:var(--accent);font-size:.9rem;text-overflow: clip;white-space: nowrap;word-spacing: -2px;}

  /* Extra info overlay (drops from top, scrollable) */
  .info{position:absolute;font-size: 15px;inset:0;background:rgba(255,255,255,.97);transform:translateY(-100%);transition:transform .22s ease;display:flex;flex-direction:column;z-index:3; font-weight:600;}
  .info strong{font-weight:400; line-height: 1.3;}
  .tile.open .info{transform:translateY(-5px);}
  .info-head{padding:8px 5px;justify-content:space-between;align-items:center;gap:10px;overflow:scroll;border-bottom: 5px solid rgba(255,255,255,.97);}
  .info-body{padding:10px;overflow:auto; -webkit-overflow-scrolling:touch; font-size:.95rem;line-height:1.35;}
  .icon-btn{border:none;background:#eee;border-radius:10px;padding:6px 8px;font-weight:700;cursor:pointer;}
  .info-btns{opacity: 0;position: absolute;visibility: hidden;transition: opacity 0.3s ease;float:right;right: 8px; display: flex; gap: 9px; padding:2px; margin-top: 40px;}
  .info-btns.show {opacity: 1;visibility: visible;display: flex;align-items: center;}
  .search-toggle,.share-btn ,.emoji-btn{font-size:20px;border:none;background: none; border-radius:3px;padding:1px;cursor:pointer;}
  .share-btn{transform: translateY(-1.2px)}

  /* Bottom nav inside dialog */
  .bottom-bar{position:sticky;bottom:0;background:#fff;border-top:1px solid #eee;padding:10px;display:flex;gap:10px;z-index:5;}
  .bar-btn{flex:1;border:none;border-radius:12px;padding:12px 10px;font-weight:800;background:#f2f2f2;color:var(--accent);cursor:pointer;}
  .bar-btn.primary{color:green;}
  .bottom-bar #cancelBtn {color: var(--text);}

  /* Fullscreen gallery */
  .gallery{position:fixed;inset:0;background:#000;display:none;align-items:center;justify-content:center;flex-direction:column;}
  .gallery.open{display:flex;z-index:3;}
  .gallery img{max-width:100vw;max-height:auto;object-fit:contain;}
  .gal-top{position:absolute;top:10px;padding: 0px 7px;right:10px;display:flex;justify-content:space-between;align-items:center;background: var(--text);}
  .gal-btn{border:none;border-radius:10px;padding:8px 12px;font-weight:800;background:#fff;}
  .gal-nav{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:space-between;padding:0 16px;}
  .gal-nav .gal-btn{opacity:.9}
  .sr{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
  
  .row{display:flex;justify-content:space-between;align-items:center;padding:16px 10px 10px 16px;background:#fff;}
  .left, .right{display:flex;align-items:center;gap:10px;}
  .right{gap: 0}
  .icon-btn{display:grid;border:1px solid transparent;background:transparent;cursor:pointer;color:#111;padding:0;}
  .icon-btn:hover{background:rgba(0,0,0,0.04);}
  select{padding:8px 0px 8px 10px;margin: 0 5px 0 7px;border-radius:3px;border:2px solid var(--accent);font-size:14px;font-weight: 800;background: var(--text);color: var(--card);clip-path: polygon(5% 5%, 100% 5%, 100% 0, 100% 100%, 100% 95%, 5% 95%, 0 100%, 0 0);}
  #street{color:var(--muted);font-size:14px;text-transform:lowercase;}

  .wa-dialog {position: fixed;top: 0;inset: 0;background: rgba(0,0,0,0.45);display: flex;align-items: flex-start; justify-content: center;opacity: 0;pointer-events: none;transition: opacity 0.25s ease;z-index: 4;}
  .wa-dialog.open {opacity: 1;pointer-events: auto;}
  .wa-box {background: var(--text);color: var(--card);border-radius: 4px;width: 100%;max-width: 380px;padding: 16px 16px 12px 16px;transform: translateY(30px) scale(0.96);transition: transform 0.25s ease;}
  .wa-dialog.open .wa-box {transform: translateY(0) scale(1);}
  .wa-title {font-size: 1.1rem;font-weight: 400;margin: 0px 0 10px 0;}
  .wa-box input {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 8px;font-size: 0.95rem;outline: none;margin-bottom: 14px;}
  .wa-input-wrap {position: relative;display: flex;align-items: center;}
  .wa-input-wrap input {flex: 1;width: 100%;padding: 10px 32px 10px 10px; /* space for clear btn */border: 1px solid #ddd;border-radius: 8px;font-size: 0.95rem;outline: none;}
  .wa-clear {position: absolute;right: 8px;transform: translateY(-24%);background: none;border: none;font-size: 21px;line-height: 1;color: #999;cursor: pointer;opacity: 0;pointer-events: none;transition: opacity 0.2s ease;}
  .wa-input-wrap input:not(:placeholder-shown) + .wa-clear,
  .wa-input-wrap input:focus:not(:placeholder-shown) + .wa-clear {opacity: 1;pointer-events: auto;}
  .wa-actions {display: flex;justify-content: flex-end;gap: 10px;}
  .wa-actions button {padding: 6px 14px;border-radius: 6px;border: none;cursor: pointer;}
  .wa-actions .primary {background: #0cc143;color: #fff;}
  
  .loader-overlay {
  position: fixed;
  inset: 0;
  background: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.4s ease;
  color: #0a84ff;
  font-family: system-ui, sans-serif;
}

.loader-overlay.hide {
  opacity: 0;
  pointer-events: none;
}

.loader-box {
  text-align: center;
}

.loader-svg {
  margin-bottom: 14px;
}

.loader-text p {
  display: none;
  font-size: 1rem;
  color: var(--card);
  margin: 0;
}

.loader-text p.active {
  display: block;
}

.toast {
  position: fixed;
  bottom: 15px;
  right: 15px;
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 5;
  background: var(--text);
  white-space: pre-line;
}

.toast.show {
  opacity: 1;
}

.mini-ads {
  position: fixed;
  top: 15px;
  right: 15px;
  width: 100px;
  height: 60px;
  background: #fff;
  border-radius: 1px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 11% 100%, 0 80%);
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 3;
}

.mini-ads.show {
  opacity: 1;
}

.mini-ads img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.next-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text);
  display: flex;
}

.next-btn:hover {
  opacity: 0.7;
}

@keyframes vibrate {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-3px); }
  50%  { transform: translateX(3px); }
  75%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

.vibrate {
  animation: vibrate 0.12s linear infinite;
}
  
  @media (min-width:560px){.cards{grid-template-columns:repeat(4,1fr);} .grid{grid-template-columns:repeat(4,1fr);}}
  
  @media (max-height: 600px) {
  .panel-title {font-size: 31px;}
  .tooltip {top: 83px;left: 6px;}
  #navToggle {top: 114px;}
  #sideNav {top: 115px;}
  .contact-icons {margin-top: 60px;}
  .mini-ads {top: 6px;width: 94px;height: 54px;}
}