/**
* 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 InstaFeed Store
* @Description	Shoppable Instagram for PrestaShop: feed blocks, gallery page and products tagged on your photos.
* @Version		1.0.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/>
*/

/**
 * Front office of the module. Everything is namespaced under .sgkifs- so the
 * module can never repaint the merchant theme, and no font, colour or width is
 * imposed: the block inherits from wherever it is dropped.
 *
 * The columns, the gap, the radius and every colour arrive as custom properties
 * set on the block element itself, by the PHP that read them from the block row.
 * They are merchant settings, and a static stylesheet cannot hold two blocks
 * with two different skins.
 *
 * No library: the grid is CSS grid, the masonry is CSS columns, the carousel is
 * a natively scrollable list with scroll snapping, and the lightbox is a dialog
 * built in fifty lines. Where the module this one replaces shipped jQuery, Owl
 * Carousel, Isotope, Fancybox and Font Awesome, this one ships nothing.
 */

.sgkifs-block {
    --sgkifs-cols-xxl: 8;
    --sgkifs-cols-xl: 6;
    --sgkifs-cols-lg: 5;
    --sgkifs-cols-md: 4;
    --sgkifs-cols-sm: 3;
    --sgkifs-cols-xs: 2;
    --sgkifs-cols: var(--sgkifs-cols-xl);
    --sgkifs-gap: 14px;
    --sgkifs-radius: 8px;
    --sgkifs-border: 0px;
    --sgkifs-border-color: #e6e6ec;
    --sgkifs-overlay: rgba(0, 0, 0, .55);
    --sgkifs-text: #fff;
    --sgkifs-title-color: #1e1e26;
    --sgkifs-title-size: 20px;
    --sgkifs-follow-color: #fff;
    --sgkifs-follow-bg: #d41414;
    --sgkifs-nav-color: #1e1e26;
    --sgkifs-nav-bg: #fff;
    --sgkifs-mark-color: #fff;
    --sgkifs-mark-size: 22px;
    --sgkifs-shadow: none;
    --sgkifs-block-bg: transparent;
    --sgkifs-block-padding: 0px;
    --sgkifs-pad: 100%;
    display: block;
    width: 100%;
    margin: 0 0 1.5rem;
    padding: var(--sgkifs-block-padding);
    background-color: var(--sgkifs-block-bg);
    border-radius: var(--sgkifs-radius);
}

/* Aspect ratios. The padding hack rather than aspect-ratio alone: it is exact
   on every browser the shops still receive, and aspect-ratio is layered on top
   where it is supported. */

.sgkifs-ratio--1-1 { --sgkifs-pad: 100%; }
.sgkifs-ratio--4-5 { --sgkifs-pad: 125%; }
.sgkifs-ratio--3-4 { --sgkifs-pad: 133.3333%; }
.sgkifs-ratio--4-3 { --sgkifs-pad: 75%; }
.sgkifs-ratio--16-9 { --sgkifs-pad: 56.25%; }

.sgkifs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: calc(var(--sgkifs-gap) + 4px);
}

.sgkifs-title {
    margin: 0;
    font-size: var(--sgkifs-title-size);
    line-height: 1.25;
    color: var(--sgkifs-title-color);
}

.sgkifs-follow {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--sgkifs-follow-color);
    background-color: var(--sgkifs-follow-bg);
}

.sgkifs-follow:hover,
.sgkifs-follow:focus-visible {
    opacity: .9;
    color: var(--sgkifs-follow-color);
}

.sgkifs-viewport {
    position: relative;
}

.sgkifs-list {
    display: grid;
    grid-template-columns: repeat(var(--sgkifs-cols), minmax(0, 1fr));
    gap: var(--sgkifs-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sgkifs-item {
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.sgkifs-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--sgkifs-radius);
    border: var(--sgkifs-border) solid var(--sgkifs-border-color);
    box-shadow: var(--sgkifs-shadow);
    background-color: rgba(0, 0, 0, .06);
}

.sgkifs-tile::before {
    content: "";
    display: block;
    padding-top: var(--sgkifs-pad);
}

.sgkifs-ratio--auto .sgkifs-tile::before {
    display: none;
}

.sgkifs-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform .5s ease, filter .3s ease;
}

.sgkifs-ratio--auto .sgkifs-img {
    position: static;
    height: auto;
}

/* Hover effects. Each is a single declaration so a merchant switching between
   them never inherits a leftover from the previous one. */

.sgkifs-hover--zoom .sgkifs-tile:hover .sgkifs-img,
.sgkifs-hover--zoom .sgkifs-tile:focus-within .sgkifs-img {
    transform: scale(1.08);
}

.sgkifs-hover--fade .sgkifs-tile:hover .sgkifs-img,
.sgkifs-hover--fade .sgkifs-tile:focus-within .sgkifs-img {
    filter: brightness(.75);
}

.sgkifs-hover--lift .sgkifs-tile {
    transition: transform .3s ease;
}

.sgkifs-hover--lift .sgkifs-tile:hover,
.sgkifs-hover--lift .sgkifs-tile:focus-within {
    transform: translateY(-4px);
}

.sgkifs-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: .75rem;
    line-height: 1;
    color: #fff;
    background-color: rgba(0, 0, 0, .45);
}

.sgkifs-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px;
    color: var(--sgkifs-text);
    background-color: var(--sgkifs-overlay);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.sgkifs-tile:hover .sgkifs-overlay,
.sgkifs-tile:focus-within .sgkifs-overlay,
.sgkifs-block--idle .sgkifs-overlay {
    opacity: 1;
}

.sgkifs-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .8125rem;
    font-weight: 600;
}

.sgkifs-caption {
    font-size: .8125rem;
    line-height: 1.35;
    overflow: hidden;
}

/* The whole tile is clickable, but the hotspots sit above it: a customer
   aiming at a product must reach the product, not the photo. */

.sgkifs-hit {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
    text-indent: -9999px;
    overflow: hidden;
}

.sgkifs-marks {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.sgkifs-mark {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    text-decoration: none;
    line-height: 0;
}

.sgkifs-mark__dot {
    display: block;
    width: var(--sgkifs-mark-size);
    height: var(--sgkifs-mark-size);
    border-radius: 50%;
    border: 2px solid var(--sgkifs-mark-color);
    background-color: rgba(0, 0, 0, .35);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    transition: transform .2s ease;
}

.sgkifs-mark__dot::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin: calc(50% - 3px) auto 0;
    border-radius: 50%;
    background-color: var(--sgkifs-mark-color);
}

.sgkifs-mark:hover .sgkifs-mark__dot,
.sgkifs-mark:focus-visible .sgkifs-mark__dot {
    transform: scale(1.2);
}

.sgkifs-mark__label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 6;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
    max-width: 200px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: .75rem;
    line-height: 1.3;
    text-align: center;
    color: #1e1e26;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}

.sgkifs-mark:hover .sgkifs-mark__label,
.sgkifs-mark:focus-visible .sgkifs-mark__label {
    opacity: 1;
    visibility: visible;
}

.sgkifs-mark__name {
    font-weight: 600;
}

.sgkifs-mark__price {
    font-weight: 700;
}

/* Masonry: CSS columns. No script, no reflow on load, and no library. */

.sgkifs-block--masonry .sgkifs-list {
    display: block;
    columns: var(--sgkifs-cols);
    column-gap: var(--sgkifs-gap);
}

.sgkifs-block--masonry .sgkifs-item {
    break-inside: avoid;
    margin-bottom: var(--sgkifs-gap);
}

.sgkifs-block--masonry .sgkifs-tile::before {
    display: none;
}

.sgkifs-block--masonry .sgkifs-img {
    position: static;
    height: auto;
}

/* Carousel: a natively scrollable, snapping track. Usable with a finger, a
   wheel, a trackpad and the keyboard before a single line of script runs. */

.sgkifs-block--carousel .sgkifs-list {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.sgkifs-block--carousel .sgkifs-list::-webkit-scrollbar {
    display: none;
}

.sgkifs-block--carousel .sgkifs-item {
    flex: 0 0 calc((100% - (var(--sgkifs-cols) - 1) * var(--sgkifs-gap)) / var(--sgkifs-cols));
    scroll-snap-align: start;
}

.sgkifs-nav {
    position: absolute;
    top: 50%;
    z-index: 7;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--sgkifs-nav-color);
    background-color: var(--sgkifs-nav-bg);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}

.sgkifs-nav[hidden] {
    display: none;
}

.sgkifs-nav--prev { left: 4px; }
.sgkifs-nav--next { right: 4px; }

.sgkifs-more {
    margin-top: var(--sgkifs-gap);
    text-align: center;
}

.sgkifs-more__btn {
    padding: 10px 22px;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--sgkifs-follow-color);
    background-color: var(--sgkifs-follow-bg);
}

.sgkifs-more__btn[disabled] {
    opacity: .6;
    cursor: default;
}

.sgkifs-gallerylink {
    margin: 10px 0 0;
    text-align: center;
    font-size: .875rem;
}

/* Shoppable lightbox */

.sgkifs-lb {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: rgba(10, 10, 16, .82);
}

.sgkifs-lb[hidden] {
    display: none;
}

.sgkifs-lb__dialog {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    overflow: hidden;
    border-radius: 12px;
    background-color: #fff;
    color: #1e1e26;
}

.sgkifs-lb__media {
    flex: 1 1 340px;
    min-width: 0;
    background-color: #000;
}

.sgkifs-lb__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 90vh;
    object-fit: contain;
}

.sgkifs-lb__side {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    padding: 20px;
    overflow-y: auto;
}

.sgkifs-lb__title {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 700;
}

.sgkifs-lb__caption {
    margin: 0 0 16px;
    font-size: .8125rem;
    line-height: 1.4;
    opacity: .8;
}

.sgkifs-lb__products {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sgkifs-lb__product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sgkifs-lb__thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    object-fit: cover;
    background-color: rgba(0, 0, 0, .06);
}

.sgkifs-lb__info {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .8125rem;
}

.sgkifs-lb__name {
    display: block;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

.sgkifs-lb__price {
    display: block;
    font-weight: 700;
}

.sgkifs-lb__cart {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 14px;
    border: 0;
    border-radius: 6px;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--sgkifs-follow-color, #fff);
    background-color: var(--sgkifs-follow-bg, #d41414);
}

.sgkifs-lb__cart[disabled] {
    opacity: .5;
    cursor: default;
}

.sgkifs-lb__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #1e1e26;
    background-color: rgba(255, 255, 255, .92);
}

.sgkifs-page__empty {
    padding: 24px 0;
    text-align: center;
    opacity: .7;
}

@media (max-width: 1399px) { .sgkifs-block { --sgkifs-cols: var(--sgkifs-cols-xl); } }
@media (min-width: 1400px) { .sgkifs-block { --sgkifs-cols: var(--sgkifs-cols-xxl); } }
@media (max-width: 1199px) { .sgkifs-block { --sgkifs-cols: var(--sgkifs-cols-lg); } }
@media (max-width: 991px)  { .sgkifs-block { --sgkifs-cols: var(--sgkifs-cols-md); } }
@media (max-width: 767px)  { .sgkifs-block { --sgkifs-cols: var(--sgkifs-cols-sm); } }
@media (max-width: 575px)  { .sgkifs-block { --sgkifs-cols: var(--sgkifs-cols-xs); } }

/* No hover on a touch screen: showing the overlay only on hover would hide the
   counters behind a gesture nobody makes there. */
@media (hover: none) {
    .sgkifs-overlay {
        opacity: 1;
        background-color: transparent;
        background-image: linear-gradient(to top, var(--sgkifs-overlay), rgba(0, 0, 0, 0) 60%);
    }

    .sgkifs-mark__label {
        opacity: 1;
        visibility: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgkifs-img,
    .sgkifs-overlay,
    .sgkifs-mark__dot,
    .sgkifs-mark__label,
    .sgkifs-hover--lift .sgkifs-tile {
        transition: none;
    }

    .sgkifs-block--carousel .sgkifs-list {
        scroll-behavior: auto;
    }

    .sgkifs-hover--zoom .sgkifs-tile:hover .sgkifs-img,
    .sgkifs-hover--lift .sgkifs-tile:hover {
        transform: none;
    }
}