[data-section="specials-26"] {
    background-color: var(--colour-base-5, #474f54);
    background-image: radial-gradient(#fff7 1.5px, transparent 1.5px), radial-gradient(#fff7 1.5px, #fff0 1.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    position: relative;
    overflow: hidden;
    border-bottom: 0.6rem solid #000a;
    padding-bottom: 3rem;
}

[data-section="specials-26"] > .header {
    background-image: url(/img/special/26/special-pointer.svg);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: cover;
    margin: 0 auto 1.5rem;
    width: 100%;
    max-width: 91rem;
    display: flex;
    justify-content: center;
    aspect-ratio: 1 / 0.22;
    position: relative;
    z-index: 1;
    align-items: start;
}
[data-section="specials-26"] .header-tip {
    width: 100%;
    max-width: 91rem;
    aspect-ratio: 1 / 0.22;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);

    &::before {
        content: url(/img/special/26/special-pointer.svg);
        display: block;
        position: absolute;
        z-index: 0;
        inset: auto 0 -5px 0;
        filter: drop-shadow(1px 2px 6px #000a);
    }
}


[data-section="specials-26"] > .header .heading,
[data-section="specials-26"] > .header .tag {
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}

[data-section="specials-26"] > .header::after {
    content: "";
    flex: 0 1 38.2%;
    background-image: url(/img/special/26/low-price-deals.webp);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    aspect-ratio: 1 / 0.382;
    max-width: 618px;
    margin-bottom: 6%;
}

/* 
    @media (min-width: 100rem) {
        [data-section="specials-26"] > .header::after {
            margin-bottom: 9rem;
            margin-top: 4vw;
        }
    }
    */
.special-box-tab-wrapper {
    --gap: 2rem;
}
.special-box-tab {
    --gap: inherit;
    --four-quarters: calc( 100% - (3 * var(--gap)) );
    --one-quarter: calc(0.25 * var(--four-quarters));
    /*border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;*/
    border-radius: 12px;
    /* height: min-content;
        margin: 10rem auto; */
    overflow: clip;
    /* filter: drop-shadow(2px 4px 9px #0005); */
    /*filter: drop-shadow(2px 3px 4px #000);*/
    box-shadow: var(--box-shadow-4);
    display: grid;
    grid-template-rows: min-content min-content min-content 1fr;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    align-items: start;
    color: #000;
    justify-content: stretch;
    transition-property: transform, box-shadow, outline;
    transition-duration:100ms;
    transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
    /*transition: transform var(--speed-2) var(--ease-out-3), box-shadow var(--speed-2) var(--ease-out-3);*/
    /* transform-origin: 50% 100%; */
    transform: scale3d(1,1,1);
    /* transform-style: preserve-3d;
        backface-visibility: hidden; */
    /* will-change: transform, filter; */
    will-change: transform, box-shadow;
    background-color: #fff;
    color: var(--colour-base-13);
    background-image: linear-gradient(to bottom, #fff 50%, var(--tab-colour, #f00) 50%);
    border: none;
    outline: 5px transparent var(--colour-base) !important;

    width: clamp(17.5rem, var(--one-quarter), 100vw);
    /*flex: auto;*/
}

@media (width < 43rem){
    .special-box-tab{
        width: auto;

        &  > .content {
            mask-size: 101%;
        }
    }
}

.special-box-tab:hover,
.special-box-tab:focus {
    /* filter: drop-shadow(1px 2px 3px #0008); */
    /*filter: drop-shadow(3px 7px 8px #000);*/
    box-shadow: var(--box-shadow-2);
    transform: scale3d(0.99,0.99,0.99);
    transition-duration:200ms;
    transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    /*transition: transform var(--speed-1) var(--ease-in-3), box-shadow var(--speed-1) var(--ease-in-3);*/
    color: var(--colour-base-15);
}
.special-box-tab:focus-visible {
    outline: 5px solid var(--colour-base-15) !important;
}

.special-box-tab:active {
    /* filter: drop-shadow(0px 0px 0px #0000); */
    /*filter: drop-shadow(1px 1px 1px #000);*/
    transition-duration:100ms;
    box-shadow: var(--box-shadow-1);
    /*transition: transform var(--speed-1) var(--ease-in-3), box-shadow var(--speed-1) var(--ease-in-3);*/
    /* transform: scale(1); */
    /* transform: scale3d(1,1,1); */
}
/* .special-box-tab .content {
        position: relative;
        z-index: 2;
        width: 100%;
        padding-top: 470px;
        grid-column: 1;
        grid-row: 1;
    } */

.special-box-tab > .header {
    grid-row: 1;
    grid-column: 1 / -1;
    position: relative;
    /*aspect-ratio: 1/0.382;*/
    padding: 2rem 0 0;
    /*display: flex;
    justify-content: center;
    align-items: stretch;
    text-align: center;*/
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color: #fff;
}

.special-box-tab > .img {
    grid-row: 2;
    grid-column: 1 / -1;
    position: relative;
    z-index: 1;
    padding: 0 2rem;
    background-color: #fff;
}

.special-box-tab > .content {
    margin-top: -1rem;
    grid-row: 3;
    grid-column: 1 / -1;
    position: relative;
    min-height: 4rem;
    padding: 0 2rem;
    /*transform: scale3d(1,1,1);*/
    /*-webkit-font-smoothing: subpixel-antialiased;*/
    /*-webkit-filter: blur(0);*/
    padding: 0 0 3.5rem;
    mask-image: url(/img/special/26/special-pointer.svg);
    mask-size: cover;
    mask-position: 50% 100%;
    /*margin: 0 0 3rem;*/
    background-color: #fff;
    z-index: 1;
    pointer-events: none;
}

.special-box-tab > .content .pricing {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    /*margin: 1em 0;*/
    gap: 0.3125em 1.6875em;
    text-align: center;
}

.special-box-tab > .content .price {
    --fs: 2rem;
    --text-opsz: 32;
    --text-wght: var(--font-weight-normal);
    font-size: var(--fs);
    font-size: var(--prices-base-font-size);
    /*font-style: italic;*/
    line-height: 1;
    display: grid;
    grid-auto-flow: row;
    /* justify-content: center; */
    gap: 0.1em;
    align-items: center;
    will-change: transform;
}

/*.special-box-tab > .content .pricing .title {*/
.special-box-tab .pricing-title {
    font-size: 0.8rem;
    --text-opsz: 14;
    grid-column: 1/-1;
    font-style: italic;
    text-align: center;
    display: block;
    width: 62%;
    margin: 0 auto;
    will-change: transform;
}
.special-box-tab .pricing-title::after {
    content: '';
    display: block;
    /*border-top: 1px solid var(--colour-base-5);*/
    background-color: var(--colour-base-5);
    height: 1px;
    width: 100%;
    /*transform: scale(1.38,1);*/
    /*opacity: 0.2;*/
    margin: 0.38em 0 0.62em;
    will-change: transform;
}

.special-box-tab > .content .price .amount {
    font-size: var(--fs);
    height: 1em;
    line-height: 1;
    --text-opsz: 36;
    --text-wght: 600;
}

.special-box-tab > .content .price .amount + * {
    font-size: calc(var(--fs) * 0.375);
    --text-opsz: 14;
}

.special-box-tab > .actions {
    grid-row: 4;
    grid-column: 1 / -1;
    /* position: relative; */
    padding: 1rem 2rem 2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    text-align: center;
    position: relative;
    background-color: var(--tab-colour, #f00);
    align-self: stretch;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    /*border-top: 5rem solid var(--tab-colour, #f00);
    margin-top: -5rem;*/
}
.special-box-tab > .actions::before{
    content: url(/img/special/26/special-pointer.svg);
    position: absolute;
    inset: auto 0 100% 0;
    /*background-color: var(--tab-colour, #f00);*/
    filter: drop-shadow(0 2px 15px #0005);
}

.special-box-tab > .actions .pure-button {
    --text-wght: 700;
    --button-border-radius: var(--border-radius-4);
    --button-line-height: 3;
    --button-padding: 0 3em;
    --letter-spacing: 0.05em;
    box-shadow: var(--elevation-z0) !important;
    margin-top: auto;
}

.special-box-tab > .actions .pure-button::after {
    content: "";
    position: absolute;
    inset: 0;
}

special-box-tab .actions::before {
    /*content: '';*/
    aspect-ratio: 1 / 0.22;
    background-color: #fff;
    display: block;
    width: 100%;
    mask-image: url(/img/special/26/special-pointer.svg);
    mask-size: cover;
    mask-position: 50% 100%;
    margin: 0 0 3rem;
}

.special-box-tab > .header .price {
    /*display: flex;
    flex-direction: column;
    align-items: center;*/
    text-align: center;
    /*background-color: var(--tab-colour, #f00);
        color: #fff;*/
}

.special-box-tab > .header .price .title {
    font-size: 0.8rem;
    --text-opsz: 14;
    font-style: italic;
    display: block;
}

.special-box-tab > .header .price .amount {
    font-size: 2.5rem;
    height: 1em;
    line-height: 1;
    --text-opsz: 36;
    --text-wght: 600;
    will-change: transform;
}


.special-box-tab .car-header {
    --text-opsz: 18;
    font-size: 1.125rem;
    flex: 0 100%;
    color: #fff;
}

.special-box-tab .car-header .heading {
    --text-opsz: inherit;
    font-size: 1em;
    margin: 0;
}

.special-box-tab .car-header .sub-heading {
    font-size: 0.875em;
    margin: 0;
}


.special-box-tab > .img img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.special-box-tab::before {
    mask-image: url("data:image/svg+xml,%3Csvg id='b' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 104'%3E%3Cpath d='M2.8587,35.1085L93.9707.2968c2.909-1.1115,6.0293,1.0367,6.0293,4.1508v99.1025L2.1082,43.0408c-3.1305-1.9351-2.6873-6.6188.7506-7.9324Z'%3E%3C/path%3E%3C/svg%3E");
    inset: 0 0 auto;
    /*content: "";*/
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    background-color: var(--tab-colour, #f00);
    mask-repeat: no-repeat;
    mask-size: 100%;
    align-self: stretch;
    mask-position: 0 0;
    z-index: 0;
}

.special-box-tab::after {
    /* position: absolute;
        inset: 0; */
    /*content: "";*/
    background-image: url("data:image/svg+xml,%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 768'%3E%3Cpath d='M2.8587,35.1085L93.9707.2968c2.909-1.1115,6.0293,1.0367,6.0293,4.1508v763.5525H0V39.2531c.0068-1.7222.9907-3.4309,2.8587-4.1447Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    background-position: 0 0;
    grid-column: 1/-1;
    grid-row: 1/-1;
    align-self: stretch;
    z-index: -1;
}

.special-box-tab-wrapper {
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
    margin: 0 auto 4rem;
    width: 100%;
    display: grid;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    --gap: 2rem;
}




@media (min-width: 43rem) {
    .special-box-tab-wrapper {
        gap: 2rem 1rem;
        /*translate: 0 1rem;*/
    }
}

@media (min-width: 64rem) {
    .special-box-tab-wrapper {
        gap: 2rem;
    }
}

@media (min-width: 68rem) {
    .special-box-tab-wrapper {
        gap: 2rem;
        /*translate: 0 -1.2rem;*/
    }
}