/* Phones: "i" quick-info button on every product tile list (js/ift-listing-info.js). */

@media (min-width: 768px) {
  .ift-li-btn, .ift-li-tip { display: none !important; }
}

@media (max-width: 767.98px) {
  .product-miniature .thumbnail-container { position: relative; }

  .ift-li-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #dbe2ea;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #0f766e;
    box-shadow: 0 1px 3px rgba(15, 17, 17, .08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ift-li-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .ift-li-btn[aria-expanded="true"] { border-color: #0f766e; background: #0f766e; color: #fff; }
  .ift-li-btn:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }

  .ift-li-tip {
    position: fixed;
    z-index: 1060;
    width: min(380px, calc(100vw - 24px));
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    transition: opacity .18s ease, transform .2s cubic-bezier(.4, 0, .2, 1);
  }
  .ift-li-tip[hidden] { display: none; }
  .ift-li-tip.is-below { transform: translate3d(0, -6px, 0); }
  .ift-li-tip.is-visible { opacity: 1; transform: none; }
  .ift-li-tip__card {
    max-height: calc(100vh - 24px);
    overflow: auto;
    border: 1px solid #e3e6e6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 17, 17, .18), 0 4px 14px rgba(15, 17, 17, .08);
    overscroll-behavior: contain;
  }
  .ift-li-tip__head { position: relative; padding: 12px 52px 10px 16px; border-bottom: 1px solid #eef1f4; }
  .ift-li-tip__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e3e6e6;
    border-radius: 50%;
    background: #fff;
    color: #374151;
    cursor: pointer;
  }
  .ift-li-tip__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .ift-li-tip__close:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
  .ift-li-tip__eyebrow {
    margin: 0 0 4px;
    color: #0f766e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .ift-li-tip__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #0f1111;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .ift-li-tip__body {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding: 13px 16px 15px;
  }
  .ift-li-tip__body--noimg { grid-template-columns: 1fr; }
  .ift-li-tip__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 6px;
    border: 1px solid #e3e6e6;
    border-radius: 10px;
    background: #fff;
  }
  .ift-li-tip__media img { width: 100%; height: 100%; object-fit: contain; }
  .ift-li-tip__meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .ift-li-tip__brand { margin: 0; color: #565959; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .ift-li-tip__ref { margin: 0; color: #6b7280; font-size: 12px; }
  .ift-li-tip__desc {
    display: -webkit-box;
    margin: 2px 0 0;
    overflow: hidden;
    color: #4b5563;
    font-size: 12.5px;
    line-height: 1.45;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
  }
  .ift-li-tip__points { margin: 2px 0 0; padding: 0; list-style: none; color: #374151; font-size: 12.5px; line-height: 1.4; }
  .ift-li-tip__points li { position: relative; margin: 0 0 3px; padding-left: 14px; }
  .ift-li-tip__points li::before {
    content: "";
    position: absolute;
    top: .5em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0f766e;
  }
  .ift-li-tip__stock {
    align-self: flex-start;
    margin: 2px 0 0;
    padding: 3px 8px;
    border: 1px solid #86efac;
    border-radius: 999px;
    background: #f0fdf4;
    color: #166534;
    font-size: 11px;
    font-weight: 700;
  }
  .ift-li-tip__stock.is-order { border-color: #fcd34d; background: #fffbeb; color: #b45309; }
  .ift-li-tip__stock.is-out { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
  .ift-li-tip__price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 2px; }
  .ift-li-tip__price { color: #0f172a; font-size: 17px; font-weight: 800; }
  .ift-li-tip__price-old { color: #9ca3af; font-size: 13px; font-weight: 600; }
  .ift-li-tip__cta {
    align-self: flex-start;
    margin-top: 4px;
    color: #0f766e !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
  }
  .ift-li-tip__loading { margin: 0; padding: 18px 16px; color: #6b7280; font-size: 13px; }
  .ift-li-tip__arrow {
    position: absolute;
    bottom: -7px;
    left: var(--ift-li-tip-arrow, 50%);
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-right: 1px solid #e3e6e6;
    border-bottom: 1px solid #e3e6e6;
    background: #fff;
    transform: rotate(45deg);
  }
  .ift-li-tip.is-below .ift-li-tip__arrow {
    top: -7px;
    bottom: auto;
    border: 0;
    border-top: 1px solid #e3e6e6;
    border-left: 1px solid #e3e6e6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ift-li-tip { transition: none; }
}