/**
* 2010-2026 SwissGeek | Web Developer Freelance
*
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https:// opensource.org/licenses/OSL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https:// devdocs.prestashop.com/ for more information.
*
* @Module		SGK Product Selected
* @Description	Displays a responsive slider of products selected from a category, on the home page, in a side column and in the footer.
* @Version		2.2.0
* @Copyright	SwissGeek | Web Developer Freelance <https://swissgeek.dev/>
* @support		Support Requests <https://admin.swissgeek.dev/forms/ticket?styled=1&with_logo=1>
* @Blog			Breaking News <https://news.swissgeek.dev/> <https://news.prestageek.ch/>
* @Addons		Developments <https://prestageek.ch/> <https://add.swissgeek.dev/>
*
* @license		http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*				Valid for 1 website (or project) for each purchase of license International Registered 
*				Trademark & Property of SwissGeek. More information on <https://swissgeek.dev/license/>
*/

/* SGKProductSelected — front office.
   Every selector is scoped under .sgkps / .sgkps-card so the block can never repaint the
   host theme, and the host theme can never make the slider disappear.

   The proportions, weights and colours below were calibrated against a real ST-themes Panda
   installation so the block sits inside that theme without looking foreign: one-line product
   name at .875rem, price at 1rem/700, heading in small caps with the tab-style underline, and
   the action bar sliding up from the bottom edge of the picture. The rules are written from
   scratch — none of the theme's own code is reused. */

.sgkps {
    --sgkps-gap: 20px;
    --sgkps-c: var(--sgkps-c-xs, 2);
    --sgkps-ink: #444;
    --sgkps-price: var(--sgkps-ink);
    --sgkps-muted: #999;
    --sgkps-rule: #f4f5f6;
    --sgkps-rule-strong: #b2b2b2;
    --sgkps-accent: #e54d26;
    --sgkps-surface: #fff;
    --sgkps-bar: #ccc;
    --sgkps-bar-hover: #888;
    --sgkps-nav-size: 40px;
    --sgkps-pt: 0px;
    --sgkps-pb: 0px;
    --sgkps-mt: 0px;
    --sgkps-mb: 34px;
    --sgkps-title-size: 16px;
    --sgkps-title-mb: 20px;
    --sgkps-title-color: var(--sgkps-ink);
    --sgkps-title-hover: var(--sgkps-accent);
    --sgkps-card-bg: transparent;
    --sgkps-card-hover: transparent;
    --sgkps-bg: transparent;
    display: block;
    position: relative;
    margin: var(--sgkps-mt) 0 var(--sgkps-mb);
    padding: var(--sgkps-pt) 0 var(--sgkps-pb);
    box-sizing: border-box;
    max-width: 100%;
    color: var(--sgkps-ink);
}

/* ── Block background ─────────────────────────────────────────────────── */

.sgkps--hasbg {
    background-color: var(--sgkps-bg);
}

.sgkps__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.sgkps__bgimg,
.sgkps__bgvideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* The parallax offset is written by the script as a second translation; keeping the
   centring in a custom property means the two never fight over the transform. */
.sgkps__bgimg--paral {
    --sgkps-paral: 0px;
    transform: translate(-50%, calc(-50% + var(--sgkps-paral)));
    will-change: transform;
}

/* Everything except the background layer sits above it. */
.sgkps__inner {
    position: relative;
    z-index: 1;
}

/* ── Block width, in twelfths ─────────────────────────────────────────── */

.sgkps--w12 { width: 100%; }
.sgkps--w9 { width: 75%; }
.sgkps--w8 { width: 66.6667%; }
.sgkps--w6 { width: 50%; }
.sgkps--w4 { width: 33.3333%; }
.sgkps--w3 { width: 25%; }

.sgkps *,
.sgkps *::before,
.sgkps *::after {
    box-sizing: border-box;
}

/* The hidden attribute comes from the user agent sheet: any author display declaration on
   the same element beats it silently. The slider toggles [hidden] from script. */
.sgkps[hidden],
.sgkps [hidden] {
    display: none !important;
}

.sgkps__inner {
    position: relative;
    min-width: 0;
    max-width: 100%;
}

/* ── Grid instead of slider ───────────────────────────────────────────── */

/* The track keeps its flex model and simply wraps: one layout engine for both modes means a
   card can never look different depending on which one is on. */
.sgkps--grid .sgkps__track {
    flex-wrap: wrap;
    transform: none !important;
    row-gap: calc(var(--sgkps-gap) * 1.4);
}

.sgkps--grid .sgkps__viewport {
    overflow: visible;
}

/* ── Heading ──────────────────────────────────────────────────────────── */

.sgkps__head {
    display: flex;
    align-items: stretch;
    margin: 0 0 var(--sgkps-title-mb);
}

.sgkps__head--left {
    justify-content: flex-start;
}

.sgkps__head--center {
    justify-content: center;
}

.sgkps__head--right {
    justify-content: flex-end;
}

/* The bordered variant is the tab-style heading: a light rule across the whole width, and a
   darker one under the words themselves, overlapping it by the same 2 px. */
.sgkps__head--bordered {
    border-bottom: 2px solid var(--sgkps-rule);
}

.sgkps__title {
    margin: 0;
    padding: 6px 0;
    font-size: var(--sgkps-title-size);
    line-height: 1.5;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--sgkps-title-color);
    overflow-wrap: break-word;
}

.sgkps__head--bordered .sgkps__title {
    border-bottom: 2px solid var(--sgkps-rule-strong);
    margin-bottom: -2px;
    padding-right: 6px;
    padding-left: 6px;
}

.sgkps__titlelink {
    color: inherit;
    text-decoration: none;
}

.sgkps__titlelink:hover,
.sgkps__titlelink:focus {
    color: var(--sgkps-title-hover);
    text-decoration: none;
}

/* ── Stage, viewport and track ────────────────────────────────────────── */

.sgkps__stage {
    position: relative;
    min-width: 0;
}

.sgkps__viewport {
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    margin: 0 calc(var(--sgkps-gap) / -2);
}

.sgkps__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    transform: translate3d(0, 0, 0);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.sgkps__track.is-dragging {
    transition: none;
}

/* When the products do not fill the row — four cards on a five-column screen, or a grid whose
   last row is short — they are centred rather than pushed against the left edge. The class is
   posted by the script once it has measured, because whether the row overflows depends on the
   viewport, not on the settings. */
.sgkps__track.is-centred {
    justify-content: center;
}

.sgkps--grid .sgkps__track {
    justify-content: center;
}

.sgkps__slide {
    flex: 0 0 calc(100% / var(--sgkps-c));
    width: calc(100% / var(--sgkps-c));
    max-width: calc(100% / var(--sgkps-c));
    min-width: 0;
    padding: 0 calc(var(--sgkps-gap) / 2);
    list-style: none;
    display: flex;
}

/* ── Navigation ───────────────────────────────────────────────────────── */

.sgkps__nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: var(--sgkps-nav-size);
    height: var(--sgkps-nav-size);
    margin-top: calc(var(--sgkps-nav-size) / -2);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .4);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background-color .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The arrows sit ON the edge of the viewport, never outside it. Hanging them out by half
   their width looks tidier on a wide screen but pushes the page 4 px past the viewport as
   soon as the container is only as wide as the window — measured at 1200 and 992 px. Left
   overflow counts towards document.scrollWidth in Chromium, so it is a real horizontal
   scrollbar, not a cosmetic detail. */
.sgkps__nav--prev {
    left: 0;
}

.sgkps__nav--next {
    right: 0;
}

.sgkps:hover .sgkps__nav,
.sgkps__nav:focus {
    opacity: 1;
}

.sgkps__nav:hover {
    background: rgba(0, 0, 0, .8);
}

.sgkps__nav[disabled] {
    color: #777;
    cursor: auto;
}

.sgkps__chevron {
    display: block;
    width: 9px;
    height: 9px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.sgkps__nav--prev .sgkps__chevron {
    transform: rotate(45deg);
    margin-left: 3px;
}

.sgkps__nav--next .sgkps__chevron {
    transform: rotate(-135deg);
    margin-right: 3px;
}

/* ── Dots ─────────────────────────────────────────────────────────────── */

.sgkps__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.sgkps__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cfcfcf;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.sgkps__dot.is-active {
    background: var(--sgkps-accent);
    transform: scale(1.25);
}

/* ── Product card ─────────────────────────────────────────────────────── */

.sgkps-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    background: var(--sgkps-card-bg);
    transition: background-color .2s ease;
}

.sgkps-card:hover {
    background: var(--sgkps-card-hover);
}

.sgkps-card__media {
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.sgkps-card__imglink {
    display: block;
    position: relative;
    line-height: 0;
}

.sgkps-card__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    transition: opacity .3s ease-in-out;
}

.sgkps-card__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.sgkps-card--hoverswap:hover .sgkps-card__img--cover {
    opacity: 0;
}

.sgkps-card--hoverswap:hover .sgkps-card__img--hover {
    opacity: 1;
}

.sgkps-card__noimg {
    display: block;
    width: 100%;
    padding-top: 100%;
    background: #f3f3f3;
}

/* ── Labels ───────────────────────────────────────────────────────────── */

.sgkps-card__flags {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.sgkps-card__flag {
    display: inline-block;
    padding: 2px 4px;
    font-size: .75rem;
    line-height: 1.5;
    font-weight: 400;
    white-space: nowrap;
    color: #fff;
    background: #7a7a7a;
    border: 1px solid transparent;
}

.sgkps-card__flag--discount,
.sgkps-card__flag--discount-percentage,
.sgkps-card__flag--discount-amount,
.sgkps-card__flag--on-sale {
    background: var(--sgkps-accent);
}

/* The presenter can hand over a label with no type at all; the template writes --default
   for it, and a class a template writes deserves a rule of its own rather than relying on
   whatever the base declaration happens to be. */
.sgkps-card__flag--default {
    background: #7a7a7a;
}

.sgkps-card__flag--new {
    background: #2c8c4b;
}

.sgkps-card__flag--pack {
    background: #2b6cb0;
}

.sgkps-card__flag--out_of_stock {
    background: #8a8a8a;
}

/* ── Action bar ───────────────────────────────────────────────────────── */

/* A full width bar sliding up from under the picture, not floating pills: the buttons share
   the width, and the one being pointed at takes three shares and reveals its label. */
.sgkps-card__actions {
    position: absolute;
    left: 0;
    bottom: -35px;
    width: 100%;
    z-index: 6;
    display: flex;
    background: var(--sgkps-bar);
    transition: bottom .3s ease-in-out;
}

.sgkps-card:hover .sgkps-card__actions,
.sgkps-card:focus-within .sgkps-card__actions {
    bottom: 0;
}

.sgkps-card__action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 30px;
    padding: 0 6px;
    font-size: .75rem;
    line-height: 30px;
    color: #fff;
    background: var(--sgkps-bar);
    border: 0;
    border-right: 1px solid #f5f5f5;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: flex .3s ease-in-out, background-color .3s ease-in-out;
}

.sgkps-card__action:last-child {
    border-right: 0;
}

.sgkps-card__action:hover,
.sgkps-card__action:focus {
    flex: 3;
    background: var(--sgkps-bar-hover);
    color: #fff;
    text-decoration: none;
}

.sgkps-card__label {
    display: none;
}

.sgkps-card__action:hover .sgkps-card__label,
.sgkps-card__action:focus .sgkps-card__label {
    display: inline-block;
}

.sgkps-icon {
    display: block;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.sgkps-icon--eye {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Cpath d='M1.5 12S5 5.5 12 5.5 22.5 12 22.5 12 19 18.5 12 18.5 1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
}

.sgkps-icon--cart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Cpath d='M2 3h3l2.4 12.2a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21 7H6'/%3E%3Ccircle cx='10' cy='20' r='1.3'/%3E%3Ccircle cx='18' cy='20' r='1.3'/%3E%3C/svg%3E");
}

/* ── Card body ────────────────────────────────────────────────────────── */

.sgkps-card__body {
    padding-top: 8px;
    text-align: center;
    min-width: 0;
}

.sgkps--column .sgkps-card__body {
    text-align: left;
}

.sgkps-card__brand {
    margin: 0 0 6px;
    padding: 0;
    font-size: .75rem;
    color: var(--sgkps-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* One line, clipped: a two-line name on one card and a one-line name on the next would put
   the prices of a row at different heights. */
.sgkps-card__name {
    margin: 0 0 6px;
    padding: 0;
    height: 1.5em;
    font-size: .875rem;
    line-height: 1.5em;
    font-weight: 400;
    overflow: hidden;
}

.sgkps-card__name a {
    display: block;
    color: var(--sgkps-ink);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sgkps-card__name a:hover,
.sgkps-card__name a:focus {
    color: var(--sgkps-accent);
    text-decoration: none;
}

.sgkps-card__prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
}

.sgkps--column .sgkps-card__prices {
    justify-content: flex-start;
}

.sgkps-card__price,
.sgkps-card__regular,
.sgkps-card__saving {
    margin-right: 4px;
    white-space: nowrap;
}

.sgkps-card__price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sgkps-price);
}

.sgkps-card__regular {
    font-size: .875rem;
    color: var(--sgkps-muted);
    text-decoration: line-through;
}

.sgkps-card__saving {
    font-size: .875rem;
    padding: 0 4px;
    color: var(--sgkps-ink);
}

/* ── Short description ────────────────────────────────────────────────── */

.sgkps-card__desc {
    margin: 0 0 6px;
    padding: 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--sgkps-muted);
    overflow-wrap: break-word;
}

/* The trimmed variant is already cut server side; the clamp only guards against a very
   narrow card turning three lines into six. */
.sgkps-card__desc--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Countdown ────────────────────────────────────────────────────────── */

.sgkps-card__countdown {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 5px 6px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .75rem;
    line-height: 1.4;
}

/* The action bar slides over the countdown when the card is pointed at: both live at the
   bottom edge, and showing them stacked would double the height of the picture. */
.sgkps-card:hover .sgkps-card__countdown,
.sgkps-card:focus-within .sgkps-card__countdown {
    opacity: 0;
}

.sgkps-card__cdunit b {
    font-weight: 700;
    margin-right: 1px;
}

/* ── View more ────────────────────────────────────────────────────────── */

.sgkps__more {
    margin-top: 18px;
    text-align: center;
}

.sgkps__morebtn {
    display: inline-block;
    padding: 9px 22px;
    border: 1px solid var(--sgkps-rule-strong);
    color: var(--sgkps-ink);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.sgkps__morebtn:hover,
.sgkps__morebtn:focus {
    background: var(--sgkps-accent);
    border-color: var(--sgkps-accent);
    color: #fff;
    text-decoration: none;
}

/* Used when the heading is switched off: the track still needs a name for a screen reader,
   and an anonymous region is worse than an invisible label. */
.sgkps-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Responsive column counts ─────────────────────────────────────────── */
/* Same ladder as the reference theme: 480 / 768 / 992 / 1200 / 1440, plus 1600 for a block
   rendered by a full width hook. */

/* ── Visibility per device ────────────────────────────────────────────── */
/* 992 px is the boundary the reference theme uses to tell a phone from a desktop. */

@media (max-width: 991px) {
    .sgkps--nomob {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .sgkps--nodesk {
        display: none !important;
    }

    /* A block narrower than the page only makes sense once there is room for it. */
    .sgkps--w9,
    .sgkps--w8,
    .sgkps--w6,
    .sgkps--w4,
    .sgkps--w3 {
        display: inline-block;
        vertical-align: top;
    }
}

@media (max-width: 991px) {
    .sgkps--w9,
    .sgkps--w8,
    .sgkps--w6,
    .sgkps--w4,
    .sgkps--w3 {
        width: 100%;
    }
}

@media (min-width: 480px) {
    .sgkps {
        --sgkps-c: var(--sgkps-c-sm, 2);
    }
}

@media (min-width: 768px) {
    .sgkps {
        --sgkps-c: var(--sgkps-c-md, 3);
    }
}

@media (min-width: 992px) {
    .sgkps {
        --sgkps-c: var(--sgkps-c-lg, 4);
    }
}

@media (min-width: 1200px) {
    .sgkps {
        --sgkps-c: var(--sgkps-c-xl, 5);
    }
}

@media (min-width: 1440px) {
    .sgkps {
        --sgkps-c: var(--sgkps-c-xxl, 5);
    }
}

@media (min-width: 1600px) {
    .sgkps--fw {
        --sgkps-c: var(--sgkps-c-fw, 6);
    }
}

@media (max-width: 991px) {
    .sgkps {
        --sgkps-nav-size: 34px;
    }

    .sgkps__nav {
        opacity: 1;
    }

    /* A touch screen has no hover: the bar stays up, and the labels stay hidden so the
       buttons keep equal shares. */
    .sgkps-card__actions {
        bottom: 0;
    }
}

@media (max-width: 575px) {
    .sgkps__title {
        font-size: calc(var(--sgkps-title-size) - 1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgkps__track,
    .sgkps-card,
    .sgkps-card__img,
    .sgkps-card__actions,
    .sgkps-card__action,
    .sgkps__morebtn,
    .sgkps__nav {
        transition: none !important;
    }

    /* Parallax is motion by definition: a visitor who asked for less of it gets none. */
    .sgkps__bgimg--paral {
        transform: translate(-50%, -50%) !important;
    }
}