/**
 * Qing Product Grid widget styles.
 *
 * Card layout: image on top, then title, then a description clamped to a
 * set number of lines. Column count, gaps and the clamp are all driven by
 * the widget's controls, so the values here are only the defaults.
 */

.qing-productGrid {
    --qing-pg-text: #2f2b28;
    --qing-pg-muted: #8a9099;
}

.qing-productGrid__grid {
    display: grid;
    /* Overridden by the Columns control. minmax(0, 1fr) instead of 1fr so a
       long unbreakable word can't force a column wider than its share. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 40px;
}

/* ---------- Card ---------- */
.qing-productGrid .productCard {
    display: flex;
    flex-direction: column;
    min-width: 0; /* lets the text truncate instead of stretching the column */
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* ---------- Media ---------- */
.qing-productGrid .productCard__media {
    position: relative;
    aspect-ratio: 1;
    margin-bottom: 14px;
    overflow: hidden;
}

.qing-productGrid .productCard__imageLink {
    display: block;
    width: 100%;
    height: 100%;
}

.qing-productGrid .productCard__img {
    width: 100%;
    height: 100%;
    /* contain by default: product shots on white shouldn't be cropped. */
    object-fit: contain;
    transition: transform 0.4s ease;
}

/* ---------- Badge ---------- */
.qing-productGrid .productCard__badge {
    position: absolute;
    top: 8px;
    left: 0;
    z-index: 2;
    display: inline-block;
    padding: 3px 10px;
    background: #c9a227;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Notched ribbon tail, as in the reference design. clip-path keeps it a
   single element (no extra markup, and it follows the background colour). */
.qing-productGrid.qing-badge-ribbon .productCard__badge {
    padding-right: 16px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%);
}

/* ---------- Favorite ---------- */
.qing-productGrid .productCard__favorite {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: #c9ccd1;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.qing-productGrid .productCard__favorite svg,
.qing-productGrid .productCard__favorite i {
    display: block;
    /* Clicks land on the span so the JS toggle and keyboard handler both
       see the same target. */
    pointer-events: none;
    line-height: 1;
}

.qing-productGrid .productCard__favorite:hover,
.qing-productGrid .productCard__favorite:focus-visible {
    transform: scale(1.12);
}

.qing-productGrid .productCard__favorite.is-active {
    color: #e0245e;
}

/* The built-in heart ships as an outline (fill="none" on the element). That is
   a presentation attribute, which loses to any CSS selector, so this fills the
   shape once active. currentColor keeps it in step with the Active Color
   control instead of hard-coding a second pink. */
.qing-productGrid .productCard__favorite.is-active .qing-heart {
    fill: currentColor;
}

/* ---------- Content ---------- */
.qing-productGrid .productCard__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qing-productGrid .productCard__titleWrap {
    margin: 0 0 6px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

.qing-productGrid .productCard__title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--qing-pg-text);
    text-decoration: none;
    font-weight: inherit;
}

.qing-productGrid .productCard__title:hover {
    text-decoration: none;
}

/* Description: clamped to 2 lines by default, overflow hidden.
   -webkit-line-clamp is the only cross-browser way to clamp by line count;
   it needs the -webkit-box display and vertical orientation to work. */
.qing-productGrid .productCard__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: var(--qing-pg-muted);
    font-size: 13px;
    line-height: 1.5;
    /* Belt and braces for the clamp: a very long unbroken string would
       otherwise push past the card instead of being cut off. */
    overflow-wrap: anywhere;
}

/* ============================================================
 * Pagination
 * ============================================================ */
.qing-productGrid__pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 36px;
}

.qing-productGrid__pageCount {
    font-size: 13px;
    color: #9a938c;
}

.qing-productGrid__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qing-productGrid__page {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One rule for links and the current-page span together: paginate_links emits
   <a class="page-numbers"> for other pages but <span class="page-numbers current">
   for the active one, and both need the same box. */
.qing-productGrid__page > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #e5e0d8;
    border-radius: 6px;
    background-color: #fff;
    color: #2f2b28;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.qing-productGrid__page > a:hover,
.qing-productGrid__page > a:focus-visible {
    border-color: #c9c2b6;
    background-color: #faf8f5;
}

.qing-productGrid__page > .current {
    border-color: #b89b5e;
    background-color: #b89b5e;
    color: #fff;
}

/* The gap between number ranges. Not interactive, so it gets no box. */
.qing-productGrid__page > .dots {
    border-color: transparent;
    background-color: transparent;
    /* Slightly narrower: the ellipsis needs less room than a number. */
    min-width: 24px;
    padding: 0;
}

.qing-productGrid__chevron {
    display: block;
    /* Clicks belong to the link, not the icon. */
    pointer-events: none;
}

/* ---- Arrows-only mode ----
   The number links are still generated so the markup stays the same; they are
   just hidden. `.dots` goes too, otherwise an ellipsis floats between the two
   arrows with nothing between them. */
.qing-productGrid__pagination--arrowsOnly .qing-productGrid__page > .page-numbers:not(.prev):not(.next) {
    display: none;
}

@media (max-width: 480px) {

    /* Phones: keep the row to the arrows plus the current page, so a long
       pagination list does not wrap into several lines. */
    .qing-productGrid__page > .page-numbers:not(.prev):not(.next):not(.current) {
        display: none;
    }
}

/* ---------- Hover: zoom + gallery swap ----------
   Two layers stacked in the same box: the primary image and, when the
   product has a gallery, its first gallery image. Hover cross-fades
   between them. Cards without a gallery image only zoom.
   !important is needed because the Hover Zoom control writes
   scale(1) from a widget-scoped selector, which outranks this file. */
.qing-productGrid .productCard__imageLink {
    position: relative;
}

.qing-productGrid .productCard__img {
    transition: transform 0.45s ease, opacity 0.45s ease;
}

.qing-productGrid .productCard:hover .productCard__img,
.qing-productGrid .productCard:focus-within .productCard__img {
    transform: scale(var(--qing-pg-zoom, 1.06)) !important;
}

/* Only cards that actually rendered a second layer stack them, so a
   product with no gallery image keeps the zoom above and nothing else. */
.qing-productGrid .productCard__media.has-hoverImage .productCard__img {
    position: absolute;
    top: 0;
    left: 0;
}

.qing-productGrid .productCard__img--hover {
    opacity: 0;
}

.qing-productGrid .productCard:hover .productCard__img--hover,
.qing-productGrid .productCard:focus-within .productCard__img--hover {
    opacity: 1;
}

/* Scoped to .has-hoverImage on purpose: --primary exists on every card, so
   an unscoped rule would fade the only image of a gallery-less product out to
   nothing on hover instead of just zooming it. */
.qing-productGrid .productCard:hover .productCard__media.has-hoverImage .productCard__img--primary,
.qing-productGrid .productCard:focus-within .productCard__media.has-hoverImage .productCard__img--primary {
    opacity: 0;
}

/* An animated zoom is what this query asks us to drop. The swap stays,
   just instant. */
@media (prefers-reduced-motion: reduce) {

    .qing-productGrid .productCard__img {
        transition: none;
    }

    .qing-productGrid .productCard:hover .productCard__img,
    .qing-productGrid .productCard:focus-within .productCard__img {
        transform: none !important;
    }
}