/**
 * Copyright © MadHat. All rights reserved.
 * Loop54 Luma frontend styles (search, listing, mini-search).
 */

.loop54 { position: relative; }
.loop54--loading { opacity: .6; pointer-events: none; }

/* --- Filter / sort bar (Image 2) --- */
.loop54-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.loop54-facets { display: flex; flex-wrap: wrap; gap: .5rem; }
.loop54-pill { position: relative; }
.loop54-pill__toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem; border: 1px solid #d0d0d0; border-radius: 999px;
    background: #f3f3f3; cursor: pointer; font-size: .9rem; line-height: 1;
}
.loop54-pill.is-open .loop54-pill__toggle { border-color: #1a1a1a; background: #fff; }
.loop54-pill__value { font-weight: 600; }
.loop54-pill__caret { font-size: .7rem; }
.loop54-pill__menu {
    position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0;
    min-width: 260px; max-height: 340px; overflow: auto;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .5rem;
}
.loop54-options { list-style: none; margin: 0; padding: 0; }
.loop54-option {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .5rem .6rem; border: 0; background: none; text-align: left;
    cursor: pointer; border-radius: 6px; font-size: .9rem;
}
.loop54-option:hover { background: #f5f5f5; }
.loop54-option.is-selected { font-weight: 600; }
.loop54-option__count { color: #888; margin-left: auto; }
.loop54-checkbox input { accent-color: #2563eb; }

/* --- Active filter chips --- */
.loop54-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.loop54-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem; border: 1px solid #cbd5e1; border-radius: 999px;
    background: #eef2ff; cursor: pointer; font-size: .85rem;
}
.loop54-chip--clear { background: none; }
.loop54-chip__x { font-weight: 700; }

.loop54-count-row { margin: .5rem 0 1rem; }
.loop54-count { font-weight: 700; font-size: 1.05rem; }

/* --- Product grid (Image 2) --- */
.loop54-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.loop54-empty { padding: 2rem; text-align: center; color: #666; grid-column: 1 / -1; }
.loop54-card {
    position: relative; display: flex; flex-direction: column; gap: .4rem;
    border: 1px solid #ececec; border-radius: 12px; padding: 1rem; background: #fff;
}
/* Promotional labels + "From" badge, stacked top-left (mirrors the native theme's
   .left-top-section). Styles are self-contained here because the theme's label CSS
   is scoped to native .product-item selectors and does not reach .loop54-card. */
.loop54-card__labels {
    position: absolute; top: 0; left: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
    text-align: center;
}
.loop54-card__badge {
    background: #e11d48; color: #fff; font-size: .75rem; font-weight: 700;
    padding: .25rem .6rem; border-radius: 12px 0 12px 0;
}
.loop54-card .product-labels {
    display: flex; flex-direction: column; gap: .1rem;
}
.loop54-card .product-labels.offer-percent {
    background: #e11d48; color: #fff; font-size: .8rem; font-weight: 600;
    padding: .1rem .5rem; border-radius: 12px 0 12px 0;
}
.loop54-card .product-label { line-height: 1.3; }
.loop54-card .product-label.reward-label {
    display: inline-flex; align-items: center; gap: .15rem; font-weight: 700;
}
.loop54-card .product-label.reward-label .operator { opacity: .8; }
.loop54-card__media img { width: 100%; max-width: 150px; height: auto; margin: 0 auto; display: block; object-fit: contain; aspect-ratio: 1 / 1; }
.loop54-card__tags { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.loop54-card__tag {
    font-size: .72rem; padding: .2rem .5rem; border-radius: 999px; background: #f0fdf4; border: 1px solid #bbf7d0;
}
.loop54-card__tag--portions { background: #1a1a1a; color: #fff; border: 0; }
.loop54-card__strength { display: inline-flex; gap: 2px; }
.loop54-dot { width: 8px; height: 8px; border-radius: 50%; background: #d4d4d4; display: inline-block; }
.loop54-dot.is-filled { background: #e11d48; }
.loop54-card__name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; color: #1a1a1a; text-decoration: none; }
.loop54-card__name:hover { text-decoration: underline; }
.loop54-card__subrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.loop54-card__subtitle { color: #666; font-size: .85rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.loop54-card__rating { display: flex; align-items: center; gap: .35rem; margin-left: auto; flex-shrink: 0; }
.loop54-stars {
    --rating: 0%;
    display: inline-block; width: 84px; height: 16px;
    background:
        linear-gradient(90deg, #f59e0b var(--rating), #d4d4d4 var(--rating));
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 16.8px);
    mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 16.8px);
}
.loop54-card__reviews { color: #888; font-size: .8rem; }
.loop54-card__pack {
    display: flex; align-items: center; gap: .5rem; justify-content: space-between;
    border: 1px solid #d0d0d0; border-radius: 8px; padding: .5rem .75rem;
}
.loop54-card__pack-price { font-weight: 700; margin-left: auto; }
.loop54-card__actions { margin: 0; }
.loop54-card__buy { display: flex; align-items: stretch; gap: .5rem; }
.loop54-card__buy .loop54-card__pack { flex: 1; min-width: 0; }
.loop54-card__pack-select { flex: 1; min-width: 0; border: 1px solid #d0d0d0; border-radius: 8px; padding: .5rem .75rem; font-weight: 700; background: #fff; cursor: pointer; }
.loop54-card__buy .loop54-btn { width: auto; flex: 0 0 auto; }
.loop54-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    width: 100%; padding: .6rem 1rem; border: 0; border-radius: 8px;
    background: #2563eb; color: #fff; font-weight: 700; cursor: pointer;
}
.loop54-btn:disabled { background: #cbd5e1; cursor: not-allowed; }
.loop54-btn--apply { background: #16a34a; }
.loop54-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; }
.loop54-card__save { color: #e11d48; font-weight: 700; }
.loop54-card__stock.is-in { color: #16a34a; }
.loop54-card__stock.is-out { color: #9ca3af; }
.loop54-card__perpiece { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: #444; }
.loop54-card__perpiece-was { text-decoration: line-through; color: #9ca3af; }
.loop54-card__discount { color: #e11d48; font-weight: 700; }

/* --- Pagination --- */
.loop54-pagination { display: flex; gap: .5rem; align-items: center; justify-content: center; margin: 1.5rem 0; flex-wrap: wrap; }
.loop54-page {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border: 0; border-radius: 50%; text-decoration: none; font-weight: 700; font-size: .9rem;
    background: #e5e7eb; color: #1f2937;
}
.loop54-page:hover { background: #d1d5db; }
.loop54-page.is-current { background: #fff; color: #dc2626; border: 2px solid #dc2626; }
/* Prev and next share the same look: accent red when clickable, gray when
   disabled at a boundary. */
.loop54-page--nav,
.loop54-page--next { background: #dc2626; color: #fff; }
.loop54-page--nav:hover,
.loop54-page--next:hover { background: #b91c1c; }
.loop54-page svg { width: 16px; height: 16px; }
.loop54-page--disabled { cursor: not-allowed; pointer-events: none; }
.loop54-page--nav.loop54-page--disabled,
.loop54-page--next.loop54-page--disabled { background: #e5e7eb; color: #9ca3af; }
.loop54-page-gap { padding: 0 .25rem; color: #9ca3af; }

.loop54-loader {
    position: absolute; inset: 0; z-index: 10; background: rgba(255,255,255,.5);
}
.loop54-loader::after {
    content: ""; position: absolute; top: 40px; left: 50%; width: 34px; height: 34px;
    margin-left: -17px; border: 3px solid #ddd; border-top-color: #2563eb; border-radius: 50%;
    animation: loop54-spin .8s linear infinite;
}
@keyframes loop54-spin { to { transform: rotate(360deg); } }

/* --- Recommendations --- */
.loop54-recs { margin: 2rem 0; }
.loop54-recs__title { font-size: 1.2rem; margin-bottom: 1rem; }
.loop54-recs__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }

/* --- Mini search (Image 1) --- */
/* The bar (and the dropdown anchored to it) is ~50% wide on desktop, centered. */
.loop54-minisearch { position: relative; }
@media (min-width: 769px) {
    .loop54-minisearch { width: 50%; margin-left: auto; margin-right: auto; }
}
.loop54-minisearch__control { position: relative; display: flex; align-items: center; border: 2px solid #1a1a1a; border-radius: 8px; background: #fff; }
.loop54-minisearch__input { flex: 1; border: 0; padding: .8rem 1rem; font-size: 1rem; outline: none; background: transparent; }
/* The module ships its own clear (×) button — hide the browser's native
   search-input cancel control so the bar doesn't show two cross icons. */
.loop54-minisearch__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.loop54-minisearch__clear, .loop54-minisearch__submit { border: 0; background: none; cursor: pointer; padding: 0 .8rem; font-size: 1.1rem; }
.loop54-minisearch__submit { border-left: 1px solid #e5e5e5; }
.loop54-minisearch__dropdown {
    position: absolute; z-index: 60; top: calc(100% + .5rem); left: 0; right: 0;
    background: #fff; border: 1px solid #e5e5e5; border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.15); padding: 1rem; max-height: 70vh; overflow: auto;
}
.loop54-msd { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
.loop54-msd__showall { grid-column: 1 / -1; display: block; text-align: center; padding: .9rem; background: #333; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 700; }
.loop54-msd__heading { font-size: 1rem; font-weight: 700; margin: 0 0 .75rem; }
.loop54-msd__row { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid #f0f0f0; }
.loop54-msd__row:last-child { border-bottom: 0; }
.loop54-msd__row.is-active { background: #f8fafc; }
.loop54-msd__thumb img { width: 56px; height: 56px; object-fit: contain; border-radius: 50%; border: 1px solid #f0f0f0; }
.loop54-msd__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.loop54-msd__name { display: block; font-weight: 700; color: #1a1a1a; text-decoration: none; line-height: 1.3; }
.loop54-msd__subtitle { color: #888; font-size: .82rem; }
/* Pack/price selector box with the add-to-cart button beside it (reference layout). */
.loop54-msd__buy { display: flex; align-items: stretch; gap: .5rem; margin-top: .4rem; }
.loop54-msd__pack { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border: 1px solid #d0d0d0; border-radius: 6px; padding: .5rem .75rem; }
.loop54-msd__pack-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loop54-msd__pack-select { flex: 1; min-width: 0; border: 1px solid #d0d0d0; border-radius: 6px; padding: .5rem .75rem; font-weight: 700; background: #fff; cursor: pointer; }
.loop54-msd__pack-price { flex-shrink: 0; display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; }
.loop54-msd__meta { display: flex; gap: .5rem; font-size: .78rem; align-items: center; margin-top: .25rem; }
.loop54-msd__perpiece-was { text-decoration: line-through; color: #9ca3af; }
.loop54-msd__discount { color: #e11d48; font-weight: 700; }
.loop54-msd__save { color: #e11d48; font-weight: 700; margin-left: auto; }
.loop54-msd__cart-form { display: flex; }
.loop54-msd__cart { border: 0; border-radius: 6px; cursor: pointer; width: 44px; font-size: 1.1rem; background: #2563eb; color: #fff; }
.loop54-msd__cart.is-added { background: #16a34a; }
.loop54-msd__side { border-left: 1px solid #eee; padding-left: 1.5rem; }
.loop54-msd__brands { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-bottom: 1.25rem; }
.loop54-brand-pill { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid #d0d0d0; border-radius: 999px; padding: .35rem .35rem .35rem .9rem; background: #fff; cursor: pointer; color: inherit; text-decoration: none; }
a.loop54-brand-pill:hover, a.loop54-brand-pill:visited { color: inherit; text-decoration: none; }
.loop54-brand-pill__go { background: #2563eb; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.loop54-msd__categories { list-style: none; margin: 0; padding: 0; }
.loop54-msd__category { border: 0; background: none; color: #1a1a1a; cursor: pointer; padding: .3rem 0; text-align: left; }
.loop54-msd__category:hover { text-decoration: underline; }
.loop54-msd__empty { padding: 1rem; color: #666; }

@media (max-width: 768px) {
    .loop54-msd { grid-template-columns: 1fr; }
    .loop54-msd__side { border-left: 0; padding-left: 0; }
    .loop54-msd__brands { flex-direction: row; flex-wrap: wrap; }
}

/* --- PDP related products slider (Luma/Porto; Hyvä uses Tailwind markup) --- */
.loop54-related { margin: 2rem 0; }
.loop54-related .block-title strong { font-size: 1.4rem; font-weight: 700; }
.loop54-related__wrap { position: relative; margin-top: 1rem; }
.loop54-related__track {
    display: flex; gap: 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: .25rem;
}
.loop54-related__track::-webkit-scrollbar { display: none; }
.loop54-related__slide {
    flex: 0 0 100%; max-width: 100%;
    scroll-snap-align: start; display: flex;
}
.loop54-related__slide .loop54-card { width: 100%; }
@media (min-width: 640px) {
    .loop54-related__slide { flex-basis: calc((100% - 1rem) / 2); max-width: calc((100% - 1rem) / 2); }
}
@media (min-width: 1024px) {
    .loop54-related__slide { flex-basis: calc((100% - 3rem) / 4); max-width: calc((100% - 3rem) / 4); }
}
.loop54-related__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid #d0d0d0;
    background: #fff; cursor: pointer; font-size: 1rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.loop54-related__nav:disabled { opacity: .3; cursor: default; }
.loop54-related__nav--prev { left: -12px; }
.loop54-related__nav--next { right: -12px; }

/* --- Paginated category listing (?page=N, N > 1) hides the category
   intro/outro sections; page 1 shows them. The body class comes from the
   server on direct loads (Observer\ApplyResultLayoutHandles) and from the
   listing JS on AJAX page changes. The Hyvä frontend ships the same rule
   inline in its result/page.phtml (Hyvä does not load this stylesheet). --- */
body.loop54-paged .category-short-description,
body.loop54-paged .highlighted-products-out,
body.loop54-paged .category-description-bottom { display: none; }