/* Glass PIM — slider.css v1.5.0 */

/* ── Widget wrapper ──────────────────────────────────────────────── */
.gpim-widget { --gpim-gap: 18px; }

.gpim-widget__header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.gpim-widget__title {
    font-family: var(--gpim-font-h, inherit);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 700; color: var(--gpim-heading, inherit);
    margin: 0 0 4px;
}
.gpim-widget__subtitle {
    font-size: 14px; color: var(--gpim-text-m, #6b7280); margin: 0;
}

/* ── Slider controls ─────────────────────────────────────────────── */
.gpim-slider-nav { display: flex; gap: 6px; flex-shrink: 0; }
.gpim-slider-arrow {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--gpim-surface, #fff);
    border: 1.5px solid var(--gpim-border, #e2e6ef);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s, border-color .15s;
    color: var(--gpim-text, #1a1d2e);
}
.gpim-slider-arrow:hover {
    background: var(--gpim-accent, #1a1d2e); color: var(--gpim-accent-txt, #fff);
    border-color: var(--gpim-accent, #1a1d2e);
}
.gpim-slider-arrow svg { width: 16px; height: 16px; }

/* ── Track ───────────────────────────────────────────────────────── */
.gpim-widget__track-wrap { overflow: hidden; border-radius: var(--gpim-radius, 10px); }
.gpim-widget__track { display: flex; will-change: transform; }

/* ── Grid mode ───────────────────────────────────────────────────── */
.gpim-widget--grid .gpim-widget__track-wrap { overflow: visible; }
.gpim-widget--grid .gpim-widget__track {
    display: grid !important;
    grid-template-columns: repeat(var(--gpim-cols, 4), 1fr);
    gap: var(--gpim-gap);
    transform: none !important;
    transition: none !important;
    width: auto !important;
}
.gpim-widget--grid .gpim-widget__item { width: auto !important; flex-shrink: unset !important; }

/* ── Slider mode items ───────────────────────────────────────────── */
.gpim-widget--slider .gpim-widget__item {
    padding-right: var(--gpim-gap);
}
.gpim-widget--slider .gpim-widget__item:last-child { padding-right: 0; }

/* ── Product card (widget) ───────────────────────────────────────── */
.gpim-widget .gpim-product-card {
    height: 100%; background: var(--gpim-surface, #fff);
    border: 1px solid var(--gpim-border, #e2e6ef);
    border-radius: var(--gpim-radius, 10px); overflow: hidden;
    box-shadow: var(--gpim-shadow, 0 2px 8px rgba(0,0,0,.06));
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex; flex-direction: column;
}
.gpim-widget .gpim-product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--gpim-shadow-h, 0 8px 28px rgba(0,0,0,.12));
}
.gpim-widget .gpim-product-card__img-wrap {
    display: block; overflow: hidden; position: relative;
    aspect-ratio: 1; background: var(--gpim-bg, #f5f6fa);
}
.gpim-widget .gpim-product-card__img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s ease;
}
.gpim-widget .gpim-product-card:hover .gpim-product-card__img { transform: scale(1.05); }
.gpim-widget .gpim-product-card__badges {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: flex; flex-direction: column; gap: 4px;
}
.gpim-widget .gpim-product-card__hover-actions {
    position: absolute; bottom: 0; left: 0; right: 0;
    transform: translateY(100%); transition: transform .22s ease;
    background: var(--gpim-accent, #1a1d2e); padding: 10px 14px;
}
.gpim-widget .gpim-product-card:hover .gpim-product-card__hover-actions { transform: translateY(0); }
.gpim-widget .gpim-product-card__atc {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    color: var(--gpim-accent-txt, #fff) !important; font-size: 13px; font-weight: 600;
    text-decoration: none !important; width: 100%;
}
.gpim-widget .gpim-product-card__body {
    padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.gpim-widget .gpim-product-card__code {
    font-size: 10px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--gpim-accent, #1a1d2e); opacity: .7;
}
.gpim-widget .gpim-product-card__name {
    font-family: var(--gpim-font-h, inherit); font-size: 14px; font-weight: 600;
    color: var(--gpim-text, #1a1d2e); line-height: 1.35; margin: 0;
}
.gpim-widget .gpim-product-card__name a { color: inherit; text-decoration: none; }
.gpim-widget .gpim-product-card__name a:hover { color: var(--gpim-accent, #1a1d2e); }
.gpim-widget .gpim-product-card__price {
    font-size: 16px; font-weight: 700; color: var(--gpim-price, var(--gpim-accent, #1a1d2e));
    margin-top: auto; padding-top: 8px;
}
.gpim-widget .gpim-product-card__stars {
    display: flex; align-items: center; gap: 2px; color: var(--gpim-star, #f59e0b);
}
.gpim-widget .gpim-product-card__stars span { font-size: 11px; color: var(--gpim-text-m, #6b7280); margin-left: 3px; }

/* Dots */
.gpim-slider-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.gpim-dot {
    width: 8px; height: 8px; border-radius: 99px;
    background: var(--gpim-border, #e2e6ef);
    border: none; cursor: pointer; transition: all .2s;
}
.gpim-dot--active { background: var(--gpim-accent, #1a1d2e); width: 22px; }

/* Badges */
.gpim-badge { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--gpim-radius-bdg, 6px); }
.gpim-badge-sale     { background: var(--gpim-sale, #dc2626); color: #fff; }
.gpim-badge-new      { background: var(--gpim-accent, #1a1d2e); color: var(--gpim-accent-txt, #fff); }
.gpim-badge-featured { background: var(--gpim-star, #f59e0b); color: #fff; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media(max-width: 1024px) {
    .gpim-widget--grid .gpim-widget__track { grid-template-columns: repeat(3, 1fr); }
}
@media(max-width: 768px) {
    .gpim-widget--grid .gpim-widget__track { grid-template-columns: repeat(2, 1fr); }
    .gpim-widget__header { flex-direction: column; }
    .gpim-slider-nav { align-self: flex-end; }
}
@media(max-width: 480px) {
    .gpim-widget--grid .gpim-widget__track { grid-template-columns: 1fr; }
}
