/**
 * Copyright © Caravel. All rights reserved.
 *
 * "Ar-condicionado na Black" widget (Block\Widget\AirConditioners, templates/widget/air-conditioners.phtml), after
 * the "ar" section of the Black Cassol mockup: filter tabs, arrows and a horizontal rail of product cards. Loaded by
 * the cassol_blackfriday_active layout handle next to black-friday.css, whose tokens (--bf-*) it reuses. Plain CSS
 * with its own class names (bf-ac__*); fonts are the theme's. The card stage is the shared .bf-stage of
 * product-stage.css.
 */

.bf-ac {
    --bf-ac-gutter: clamp(16px, 4vw, 48px);
    --bf-ac-gap: 16px;
    --bf-ac-ease: cubic-bezier(.2, .7, .2, 1);
    color: var(--bf-text);
    background: var(--bf-bg);
    border-top: 1px solid var(--bf-line);
    padding: clamp(40px, 5.6vw, 77px) 0;
}

.bf-ac__wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 var(--bf-ac-gutter);
}

/* ---------- heading, tabs and arrows ---------- */
.bf-ac__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.bf-ac__kick {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bf-red);
    margin-bottom: 14px;
}

.bf-ac__kick::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--bf-red);
}

.bf-ac__title {
    margin: 0;
    font-weight: 900;
    /* the mockup uses a condensed display font (Big Shoulders Display, 84px); with the theme font the same width
       needs about two thirds of that size */
    font-size: clamp(30px, 3.6vw, 54px);
    line-height: .95;
    text-transform: uppercase;
    color: var(--bf-text);
}

.bf-ac__tools {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.bf-ac__tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bf-ac__tabs button {
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid var(--bf-line-2);
    border-radius: 999px;
    background: transparent;
    font-weight: 700;
    font-size: 15px;
    color: var(--bf-muted);
    cursor: pointer;
    transition: color .2s, border-color .2s, background-color .2s;
}

.bf-ac__tabs button:hover {
    color: var(--bf-text);
    border-color: var(--bf-muted);
}

.bf-ac__tabs button[aria-pressed="true"] {
    background: var(--bf-text);
    color: #050505;
    border-color: var(--bf-text);
}

.bf-ac__arrows {
    display: flex;
    gap: 8px;
}

.bf-ac__arrows button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--bf-line-2);
    border-radius: 50%;
    background: transparent;
    color: var(--bf-text);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.bf-ac__arrows button:hover {
    background: var(--bf-text);
    color: #050505;
}

/* ---------- rail ---------- */
.bf-ac__rail {
    display: flex;
    gap: var(--bf-ac-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--bf-ac-gutter);
    padding: 6px var(--bf-ac-gutter) 20px;
    margin: 0 calc(var(--bf-ac-gutter) * -1);
    scrollbar-width: thin;
    scrollbar-color: var(--bf-line-2) transparent;
    transition: opacity .2s;
}

.bf-ac__rail--loading {
    opacity: .55;
}

.bf-ac__rail:focus-visible {
    outline: 2px solid var(--bf-outline);
    outline-offset: -2px;
}

.bf-ac__slot {
    scroll-snap-align: start;
    flex: 0 0 min(300px, 78vw);
    display: flex;
}

/* ---------- card ---------- */
.bf-ac__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--bf-line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--bf-surface);
    animation: bf-ac-in .5s var(--bf-ac-ease) both;
    transition: border-color .3s, transform .3s var(--bf-ac-ease);
}

.bf-ac__card:hover {
    border-color: var(--bf-line-2);
    transform: translateY(-3px);
}

@keyframes bf-ac-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* the stage (dark spotlight or white, "-X%" chip) is the shared .bf-stage of product-stage.css */
.bf-ac__card:hover .bf-stage img {
    transform: translateX(-50%) scale(1.04);
}

.bf-ac__card:hover .bf-stage--white img {
    transform: scale(1.04);
}

/* "N BTUs" pill over the stage, as in the mockup rail */
.bf-ac__btu {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    border: 1px solid var(--bf-line-2);
    border-radius: 999px;
    padding: 5px 10px;
    color: var(--bf-text);
    background: rgba(5, 5, 5, .7);
}

/* Two blocks, so the cards of the rail line up whatever the product has (same stack as the "Os mais desejados"
   cards): the chip and the name (three lines kept, so the names of the rail take the same room) against the image,
   the prices, the pickup link and the button against the bottom edge. A price line the product does not have ("De",
   Pix, installments) leaves the flow (x-show), so the prices of such a card sit lower, against the pickup link and
   the button; the rail stretches every slot to the tallest card, and the spare room opens between the two blocks. */
.bf-ac__body {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 20px;
    flex: 1;
}

.bf-ac__top,
.bf-ac__offer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bf-ac__offer {
    margin-top: auto;
    padding-top: 10px;
}

/* the line of the green "Economize R$ X" chip (as in "Os mais desejados"), kept at the height of the chip when
   there is no discount */
.bf-ac__eco-row {
    display: flex;
    align-items: center;
    min-height: 22px;
}

.bf-ac__eco {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(95, 211, 154, .1);
    color: var(--bf-ok);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.bf-ac__name {
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    min-height: 3.9em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bf-ac__name a {
    color: var(--bf-text);
}

.bf-ac__name a:hover {
    text-decoration: underline;
}

/* one line each (x-show removes the line the product does not have) */
.bf-ac__de,
.bf-ac__pix,
.bf-ac__par {
    line-height: 1.3;
}

.bf-ac__de {
    font-size: 14px;
    color: var(--bf-muted);
    font-variant-numeric: tabular-nums;
}

.bf-ac__de span {
    text-decoration: line-through;
}

/* the price of the card: the Pix price when the product has one, the final price otherwise */
.bf-ac__price {
    /* 36px of the condensed display font in the mockup */
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    color: var(--bf-text);
    font-variant-numeric: tabular-nums;
}

/* "7% à vista no PIX" under the Pix price, bold and small as on the product page */
.bf-ac__pix {
    font-size: 13px;
    font-weight: 700;
    color: var(--bf-text);
    font-variant-numeric: tabular-nums;
}

.bf-ac__par {
    font-size: 13px;
    color: var(--bf-muted);
    font-variant-numeric: tabular-nums;
}

/* the mockup's green "Retire hoje" line, as the button that opens the pickup drawer */
.bf-ac__pickup {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: var(--bf-ok);
    cursor: pointer;
}

.bf-ac__pickup:hover {
    text-decoration: underline;
}

.bf-ac__icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.bf-ac__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--bf-red);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 28px -8px rgba(189, 40, 33, .7);
    transition: filter .2s, opacity .2s;
}

.bf-ac__btn:hover:not(:disabled) {
    color: #fff;
    filter: brightness(1.12);
}

.bf-ac__btn:disabled {
    opacity: .75;
    cursor: not-allowed;
}

/* placeholder cards keep the rail height while a tab loads */
.bf-ac__card--empty {
    border-style: dashed;
    background: transparent;
    animation: none;
}

.bf-ac__ph {
    display: block;
    border-radius: 6px;
    background: var(--bf-surface-3);
    opacity: .6;
}

/* the ratio of the real stage (.bf-stage of product-stage.css), so the rail does not jump when the cards land */
.bf-ac__ph--stage {
    aspect-ratio: 1 / .9;
    border-radius: 0;
}

/* the chip line of the real card (22px); the three lines after it are the name */
.bf-ac__ph--chip {
    height: 20px;
    width: 40%;
    margin: 1px 0;
    border-radius: 999px;
}

.bf-ac__ph--line {
    height: 13px;
    width: 80%;
}

.bf-ac__ph--short {
    width: 50%;
}

/* the "Ver opções de retirada" line, with its margin */
.bf-ac__ph--pickup {
    width: 50%;
    margin-bottom: 10px;
}

.bf-ac__ph--price {
    height: 30px;
    width: 60%;
    margin-top: 8px;
}

.bf-ac__ph--btn {
    height: 44px;
    width: 100%;
    margin-top: 8px;
    border-radius: 999px;
}

.bf-ac__note {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--bf-muted);
}

.bf-ac__note--error {
    color: var(--bf-red);
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
    .bf-ac__head {
        margin-bottom: 18px;
    }

    .bf-ac__tabs button {
        min-height: 40px;
        padding: 0 16px;
        font-size: 14px;
    }

    .bf-ac__arrows {
        display: none;
    }

    .bf-ac__slot {
        flex-basis: min(260px, 78vw);
    }

    .bf-ac .bf-stage,
    .bf-ac__ph--stage {
        aspect-ratio: 1 / 1;
    }

    .bf-ac__price {
        font-size: 22px;
    }

    .bf-ac__name {
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .bf-ac__body {
        padding: 12px;
    }

    .bf-ac__de {
        font-size: 13px;
    }
}