/* ========================================
   MINI GRID
   ======================================== */

.row {
    --grid-gap: 24px;

    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
    width: 100%;
}

/* Colunas padrão */
.col-1  {
    grid-column: span 1;
}
.col-2  {
    grid-column: span 2;
}
.col-3  {
    grid-column: span 3;
}
.col-4  {
    grid-column: span 4;
}
.col-5  {
    grid-column: span 5;
}
.col-6  {
    grid-column: span 6;
}
.col-7  {
    grid-column: span 7;
}
.col-8  {
    grid-column: span 8;
}
.col-9  {
    grid-column: span 9;
}
.col-10 {
    grid-column: span 10;
}
.col-11 {
    grid-column: span 11;
}
.col-12 {
    grid-column: span 12;
}


/* ========================================
   SM - >= 576px
   ======================================== */

@media (min-width: 576px) {

    .col-sm-1  {
        grid-column: span 1;
    }
    .col-sm-2  {
        grid-column: span 2;
    }
    .col-sm-3  {
        grid-column: span 3;
    }
    .col-sm-4  {
        grid-column: span 4;
    }
    .col-sm-5  {
        grid-column: span 5;
    }
    .col-sm-6  {
        grid-column: span 6;
    }
    .col-sm-7  {
        grid-column: span 7;
    }
    .col-sm-8  {
        grid-column: span 8;
    }
    .col-sm-9  {
        grid-column: span 9;
    }
    .col-sm-10 {
        grid-column: span 10;
    }
    .col-sm-11 {
        grid-column: span 11;
    }
    .col-sm-12 {
        grid-column: span 12;
    }

}


/* ========================================
   MD - >= 768px
   ======================================== */

@media (min-width: 768px) {

    .col-md-1  {
        grid-column: span 1;
    }
    .col-md-2  {
        grid-column: span 2;
    }
    .col-md-3  {
        grid-column: span 3;
    }
    .col-md-4  {
        grid-column: span 4;
    }
    .col-md-5  {
        grid-column: span 5;
    }
    .col-md-6  {
        grid-column: span 6;
    }
    .col-md-7  {
        grid-column: span 7;
    }
    .col-md-8  {
        grid-column: span 8;
    }
    .col-md-9  {
        grid-column: span 9;
    }
    .col-md-10 {
        grid-column: span 10;
    }
    .col-md-11 {
        grid-column: span 11;
    }
    .col-md-12 {
        grid-column: span 12;
    }

}


/* ========================================
   LG - >= 992px
   ======================================== */

@media (min-width: 992px) {

    .col-lg-1  {
        grid-column: span 1;
    }
    .col-lg-2  {
        grid-column: span 2;
    }
    .col-lg-3  {
        grid-column: span 3;
    }
    .col-lg-4  {
        grid-column: span 4;
    }
    .col-lg-5  {
        grid-column: span 5;
    }
    .col-lg-6  {
        grid-column: span 6;
    }
    .col-lg-7  {
        grid-column: span 7;
    }
    .col-lg-8  {
        grid-column: span 8;
    }
    .col-lg-9  {
        grid-column: span 9;
    }
    .col-lg-10 {
        grid-column: span 10;
    }
    .col-lg-11 {
        grid-column: span 11;
    }
    .col-lg-12 {
        grid-column: span 12;
    }

}


/* ========================================
   XL - >= 1200px
   ======================================== */

@media (min-width: 1200px) {

    .col-xl-1  {
        grid-column: span 1;
    }
    .col-xl-2  {
        grid-column: span 2;
    }
    .col-xl-3  {
        grid-column: span 3;
    }
    .col-xl-4  {
        grid-column: span 4;
    }
    .col-xl-5  {
        grid-column: span 5;
    }
    .col-xl-6  {
        grid-column: span 6;
    }
    .col-xl-7  {
        grid-column: span 7;
    }
    .col-xl-8  {
        grid-column: span 8;
    }
    .col-xl-9  {
        grid-column: span 9;
    }
    .col-xl-10 {
        grid-column: span 10;
    }
    .col-xl-11 {
        grid-column: span 11;
    }
    .col-xl-12 {
        grid-column: span 12;
    }

}

/* ========================================
   ALINHAMENTO DO CONTEÚDO DAS COLUNAS
   ======================================== */

/* Esquerda */
.justify-content-start {
    display: flex;
    justify-content: flex-start;
}

/* Centro */
.justify-content-center {
    display: flex;
    justify-content: center;
}

/* Direita */
.justify-content-end {
    display: flex;
    justify-content: flex-end;
}

/* Alinhamento vertical */
.align-items-start {
    align-items: flex-start;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: flex-end;
}


/* ========================================
   ALINHAMENTO APENAS DO TEXTO
   ======================================== */

.text-start {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-end {
    text-align: right;
}


/* ========================================
   POSIÇÃO DO ELEMENTO DENTRO DA CÉLULA GRID
   ======================================== */

.justify-self-start {
    justify-self: start;
}

.justify-self-center {
    justify-self: center;
}

.justify-self-end {
    justify-self: end;
}



/* ========================================
   ALERTAS DO SHOP
   ======================================== */

.swal2-container.shop-alert-container {
    padding-top: calc(16px + env(safe-area-inset-top));
}

.swal2-popup.swal2-toast.shop-alert {
    width: min(420px, calc(100vw - 32px));
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius, 22px);
    background: var(--surface, var(--paper));
    color: var(--ink);
    font-family: inherit;
    box-shadow: 0 8px 30px var(--shadow, #00000020);
}

.shop-alert .swal2-title {
    color: var(--ink);
    font-size: 15px;
}

.shop-alert .swal2-html-container {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.shop-alert .swal2-close {
    color: var(--muted);
    border-radius: 8px;
}

.shop-alert .swal2-close:hover {
    color: var(--accent);
}

.shop-alert .swal2-close:focus-visible {
    outline: 2px solid var(--accent);
    box-shadow: none;
}

.shop-alert .swal2-timer-progress-bar {
    background: var(--accent);
}

/* ========================================
   ACHADINHO INATIVO
   ======================================== */

.product--inactive {
    cursor: default;
}

.product--inactive:hover {
    transform: none;
    border-color: var(--line);
}

.product--inactive .product-image {
    position: relative;
    cursor: default;
}

.product--inactive .product-image img {
    filter: grayscale(100%);
    opacity: 0.65;
}

.product--inactive .product-content {
    opacity: 0.6;
}

.inactive-ribbon {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

    padding: 9px 6px;
    background: #242424e6;
    color: #ffffff;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}