:root {
  --dtlsm-bg: #ffffff;
  --dtlsm-tile-bg: #f6fbfb;
  --dtlsm-tile-border: #e0f0f0;
  --dtlsm-text: #0f3b3b;
  --dtlsm-accent: #00a7a4;
  --dtlsm-tip-text: #ffffff;
  --dtlsm-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.dtlsm-wrap { position: relative; background: rgba(255,255,255,0.95); backdrop-filter: saturate(1.2) blur(2px); z-index:20; padding:.4rem 0; border-bottom:1px solid var(--dtlsm-tile-border); }
.dtlsm-wrap.dtlsm-sticky { position: sticky; top: 72px; }
.dtlsm { list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(90px,1fr); gap:.6rem; margin:0; padding:.15rem 1rem; overflow-x:auto; scroll-snap-type:x proximity; }
.dtlsm::-webkit-scrollbar { height:6px; } .dtlsm::-webkit-scrollbar-thumb { background:#d6eaea; border-radius:999px; }
.dtlsm-item { position:relative; scroll-snap-align:start; }
.dtlsm-btn { display:grid; place-items:center; text-align:center; gap:.35rem; padding:.55rem .45rem; border-radius:10px; background:var(--dtlsm-tile-bg); border:1px solid var(--dtlsm-tile-border); color:var(--dtlsm-text); text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.05); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.dtlsm-btn:hover, .dtlsm-btn:focus { transform:translateY(-1px); border-color:var(--dtlsm-accent); outline:none; box-shadow:0 8px 18px rgba(0,167,164,.12); }
.dtlsm-icon { width:24px; height:24px; } .dtlsm-icon img, .dtlsm-icon svg { width:100%; height:100%; display:block; }
.dtlsm-label { font-size:.76rem; line-height:1.1; font-weight:600; letter-spacing:.1px; }
.dtlsm-btn:hover .dtlsm-label, .dtlsm-btn:focus .dtlsm-label { text-decoration: underline; text-underline-offset: 2px; }

/* Tooltip */
.dtlsm-tip { position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(6px) scale(.98); opacity:0; visibility:hidden; background: linear-gradient(135deg, #0a7f91, #118c9b); color:var(--dtlsm-tip-text); padding:.5rem .6rem; border-radius:8px; min-width:180px; text-align:left; pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility .18s ease; box-shadow:0 12px 28px rgba(10,127,145,.28); z-index:50; }
.dtlsm-tip:after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:8px solid transparent; border-top-color: #0a7f91; }
.dtlsm-tip-title { display:block; font-weight:700; font-size:.86rem; }
.dtlsm-tip-note { display:block; opacity:.9; font-style:normal; font-size:.78rem; }
.dtlsm-tip-price { display:inline-block; margin-top:.25rem; font-weight:700; font-size:.86rem; color:#bdf5f3; }
.dtlsm-item:hover .dtlsm-tip, .dtlsm-item:focus-within .dtlsm-tip { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1); }

/* Inline SVG scaling guarantee */
.dtlsm-icon svg{width:100%;height:100%;display:block;}

/* Mobile tweaks */
@media (max-width: 900px){
  .dtlsm-wrap.dtlsm-sticky { top: 60px; }
}
@media (max-width: 480px){
  .dtlsm { grid-auto-columns: minmax(44%, 1fr); row-gap:.5rem; }
}