/**
 * Search panel suggestions. Uses the site's own tokens (gold, ink, soft, the
 * uppercase letterspaced label) so the panel reads as part of the shop rather
 * than a bolted-on widget.
 */

.sss-host {
    width: 100%;
    max-width: 1000px;
    margin: 6px auto 0;
    padding: 0 20px 40px;
    text-align: left;
}

.sss-block + .sss-block {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--halo-line, #e6e6e6);
}

.sss-title {
    margin: 0 0 12px;
    color: var(--halo-copy, #767676);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Chips */
.sss-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sss-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid var(--halo-line, #e6e6e6);
    border-radius: 20px;
    background: #fff;
    color: var(--halo-ink, #1c1f27) !important;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    transition: border-color .2s ease, background .2s ease;
}

.sss-chip:hover {
    border-color: var(--halo-gold, #d4a11e);
    background: var(--halo-soft, #f9f9f9);
}

/* Product cards */
.sss-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.sss-card {
    display: block;
    color: var(--halo-ink, #1c1f27) !important;
}

.sss-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
    background: var(--halo-soft, #f9f9f9);
    object-fit: cover;
}

.sss-card-body {
    display: block;
}

.sss-card-name {
    display: -webkit-box;
    overflow: hidden;
    /* Two lines keeps every card the same height; product names here run long
       ("MARLBORO ICE BLAST MEGA 8 (1 PACKETS X 20'S)"). */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    line-height: 1.35;
}

.sss-card-price {
    display: block;
    margin-top: 3px;
    color: var(--halo-gold-ink, #8a6d1f);
    font-size: 12px;
    font-weight: 700;
}

.sss-card:hover .sss-card-name {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .sss-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .sss-host { padding-bottom: 28px; }
    .sss-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .sss-chip { padding: 7px 12px; font-size: 12px; }
}

/* ---------------------------------------------------------------------------
 * 2026-09-09 修：面板内容多了滚不动
 *
 * Woodmart 的全屏搜索面板是固定高度的覆盖层，我们把建议内容追加进去之后，
 * 内容比一屏高，但面板本身不滚动，下面的商品就永远看不到（手机上尤其明显）。
 * 给面板本身开纵向滚动。写得比较具体是为了只影响这个面板，不动主题别处。
 * ------------------------------------------------------------------------ */
.wd-search-full-screen {
    overflow-y: auto;
    overscroll-behavior: contain;      /* 滚到底不要把body一起带着滚 */
    -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
}

/* 底部留白，最后一行商品不会被贴到屏幕边缘、也不会被手机手势条盖住 */
.sss-host {
    padding-bottom: max(40px, env(safe-area-inset-bottom, 0px));
}

/* 分类标签上的商品数量 */
.sss-chip-n {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--halo-soft, #f1f1f1);
    color: var(--halo-copy, #767676);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.sss-chip:hover .sss-chip-n {
    background: rgba(255, 255, 255, .22);
    color: inherit;
}

/* ---------------------------------------------------------------------------
 * 打折卡片：左上角角标 + 原价删除线（2026-09-09 加）
 *
 * 之前价格是后端 get_price_html() 剥掉标签后的纯文本，出来是
 * "$11.80 $10.80" —— 两个数字并排、原价没删除线，顾客分不清哪个是现价。
 * 现在前端分成 <del> 和 <ins> 两个元素，样式在这里。
 * ------------------------------------------------------------------------ */
.sss-card--sale {
    position: relative;   /* 角标的定位基准 */
}

.sss-card-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    padding: 3px 7px;
    border-radius: 3px;
    background: var(--halo-gold, #b8912f);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
    pointer-events: none;   /* 不挡卡片本身的点击 */
}

/* 原价：划掉、弱化 */
.sss-price-was {
    margin-right: 6px;
    color: var(--halo-copy, #999);
    font-weight: 400;
    text-decoration: line-through;
}

/* 现价：强调 */
.sss-price-now {
    color: var(--halo-gold, #b8912f);
    font-weight: 700;
    text-decoration: none;   /* <ins> 默认带下划线，去掉 */
}

@media (max-width: 767px) {
    .sss-card-badge {
        top: 4px;
        left: 4px;
        padding: 2px 5px;
        font-size: 10px;
    }
    .sss-price-was { margin-right: 4px; }
}