/* Main stylesheet */
.container {
    width: 90%;
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px;
    align-self: center;
    justify-self: center;
}

/* ============================= */
/* RESET / BASE */
/* ============================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #00ff88;
}

ul li {
    list-style: none;
}

body {
    font-family: 'Rajdhani', sans-serif;
    /*background: #061005;*/
    background: url("/wp-content/themes/druk4farmer/assets/retrogreen-tractor.jpg") no-repeat center center fixed;
    background-size: cover;
    color: #baffdf;
    overflow-x: hidden;
    margin: 0;
}

html {
    overflow-x: hidden;
}

.section-title,
.logo,
.hero-slide__title {
    font-family: 'Orbitron', sans-serif;
}

.section-title {
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 2rem;
    letter-spacing: 2px;
    color: #00ff88;
    text-align: center;
}


/* ============================= */
/* BUTTONS */
/* ============================= */

.btn {
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    border: 2px solid #00ff88;
    transition: all .3s ease;
    cursor: pointer;
}

.btn--primary {
    background: linear-gradient(90deg, #002b1a, #00cc66);
    color: #baffdf;
    box-shadow: 0 0 15px #00ff88;
}

.btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px #00ff88;
}

.btn--secondary {
    background: transparent;
    color: #00ff88;
}

.btn--secondary:hover {
    background: #00ff88;
    color: #001a10;
}


/* ============================= */
/* HERO SLIDER */
/* ============================= */

.hero-slider {
    position: relative;
    min-height: 45vh;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 255, 136, 0.25);
    margin: -70px 30px 0 30px;
    overflow: hidden;
    backdrop-filter: blur(6px) brightness(.5);
    background: repeating-linear-gradient(
            0deg,
            rgba(0, 255, 136, .06) 0px,
            rgba(0, 255, 136, .06) 1px,
            transparent 1px,
            transparent 60px
    ),
    repeating-linear-gradient(
            90deg,
            rgba(0, 255, 136, .06) 0px,
            rgba(0, 255, 136, .06) 1px,
            transparent 1px,
            transparent 60px
    );
}

.hero-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(0, 255, 136, .03) 4px
    );
}

.hero-slider__title {
    text-align: center;
    margin-bottom: 10px;
}

.hero_slider__text {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.2rem;
}

.hero-slider::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    backdrop-filter: blur(6px) brightness(.7);
    background: /* linia pozioma środka */ linear-gradient(rgba(0, 255, 136, .25), rgba(0, 255, 136, .25)) 0 50% / 100% 1px no-repeat,
        /* linia pionowa środka */ linear-gradient(rgba(0, 255, 136, .25), rgba(0, 255, 136, .25)) 50% 0 / 1px 100% no-repeat,
        /* target corners */ linear-gradient(#00ff88, #00ff88) 0 0 / 40px 2px no-repeat,
    linear-gradient(#00ff88, #00ff88) 0 0 / 2px 40px no-repeat,
    linear-gradient(#00ff88, #00ff88) 100% 0 / 40px 2px no-repeat,
    linear-gradient(#00ff88, #00ff88) 100% 0 / 2px 40px no-repeat,
    linear-gradient(#00ff88, #00ff88) 0 100% / 40px 2px no-repeat,
    linear-gradient(#00ff88, #00ff88) 0 100% / 2px 40px no-repeat,
    linear-gradient(#00ff88, #00ff88) 100% 100% / 40px 2px no-repeat,
    linear-gradient(#00ff88, #00ff88) 100% 100% / 2px 40px no-repeat;
}

.hero-slide {
    position: absolute;
    opacity: 0;
    transition: opacity .6s ease;
    text-align: center;
    width: 100%;
}

.hero-slide.is-active {
    opacity: 1;
}

.hero-slide__title {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #00ff88;
    text-shadow: 0 0 15px #00ff88;
}

.hero-slide__subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: .8;
}

.hero-slide__cta {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.hero-slider__dots {
    position: absolute;
    bottom: 40px;
    display: flex;
    gap: 12px;
}

.hero-slider__dot {
    width: 12px;
    height: 12px;
    border: 2px solid #00ff88;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.hero-slider__image {
    width: 60%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    display: flex;
    align-self: center;
}

.hero-slider__image::after {
    content: "";
    position: absolute;
    inset: -40px;
    pointer-events: none;

    background: linear-gradient(rgba(0, 255, 136, .2), rgba(0, 255, 136, .2)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(0, 255, 136, .2), rgba(0, 255, 136, .2)) 0 50% / 100% 1px no-repeat;
}

.hero-slider__content {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-slider__dot.is-active {
    background: #00ff88;
    box-shadow: 0 0 10px #00ff88;
}

.hero-slider__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 60px;
}

.hero-slider__card .btn-default {
    margin-top: 20px;
}


/* ============================= */
/* PRODUCTS */
/* ============================= */


.products__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    flex-wrap: wrap;
    height: 100%;
}

.product-card__link {
    height: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
}

.product-card {
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 20px;
    transition: all .3s ease;
    height: 100%;
    flex: 1;
}

.product-card:hover {
    box-shadow: 0 0 20px rgba(0, 255, 136, 1);
}

.product-card__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-card__title {
    margin: 15px 0;
    font-size: 1rem;
    text-transform: uppercase;
    color: #00ff88;
    text-align: center;
}

.product-card__cta {
    display: flex;
    font-size: 1rem !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 15px !important;
    margin-top: auto;
    align-self: center;
}


/* ============================= */
/* CONTACT */
/* ============================= */

.contact-section {
    padding: 80px 0;
    border-top: 1px solid rgba(0, 255, 136, 0.25);
}

.contact-section .btn-default {
    display: flex;
    align-self: center;
    justify-self: center;
}

.contact-section .btn-default:hover {
    background: #00ff88 !important;
}

.contact-section__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.form__group {
    margin-bottom: 20px;
}

.form__input,
.form__textarea {
    width: 100%;
    padding: 5px;
    background: #001a10;
    border: 1px solid #00ff88;
    color: #baffdf;
}

.form__textarea {
    min-height: 120px;
}


/* ============================= */
/* SOCIAL BOX */
/* ============================= */

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

.social-box__icons {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    justify-content: center;
    gap: 100px;
}

.social-box__icons .btn-default svg {
    width: 60px;
}

.social-box__icons .btn-default {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-default, .button.button.product_type_simple, .button.product_type_variable {
    font-size: 1.2rem;
    padding: 20px 30px !important;
    text-decoration: none;
    color: #00ff88;
    transition: all .45s ease;
    position: relative;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button {
    color: #00ff88;
    font-size: 1.2rem;
    font-family: Rajdhani, sans-serif;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover {
    scale: 1.1;
    background: none;
}

.btn-default::before, .button.button.product_type_simple::before, .button.product_type_variable::before {
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    background: repeating-linear-gradient(
            90deg,
            #00ff88 0 6px,
            transparent 6px 14px
    ) top left / 100% 2px no-repeat,
    repeating-linear-gradient(
            90deg,
            #00ff88 0 6px,
            transparent 6px 14px
    ) bottom left / 100% 2px no-repeat,
    repeating-linear-gradient(
            0deg,
            #00ff88 0 6px,
            transparent 6px 14px
    ) top left / 2px 100% no-repeat,
    repeating-linear-gradient(
            0deg,
            #00ff88 0 6px,
            transparent 6px 14px
    ) top right / 2px 100% no-repeat;

    opacity: .6;
    transition: opacity .45s ease;
}

.btn-default::after, .button.button.product_type_simple::after, .button.product_type_variable::after {
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    background: linear-gradient(#00ff88, #00ff88) top left / 0 2px no-repeat,
    linear-gradient(#00ff88, #00ff88) bottom left / 0 2px no-repeat,
    linear-gradient(#00ff88, #00ff88) top left / 2px 0 no-repeat,
    linear-gradient(#00ff88, #00ff88) top right / 2px 0 no-repeat;
    opacity: 0;
    transition: background-size .45s cubic-bezier(.4, 0, .2, 1),
    opacity .2s ease;
}

.btn-default:hover::before, .button.button.product_type_simple:hover::before, .button.product_type_variable:hover::before {
    opacity: 0;
}

.btn-default:hover::after, .button.button.product_type_simple:hover::after, .button.product_type_variable:hover::after {
    opacity: 1;
    background: linear-gradient(#00ff88, #00ff88) top left / 100% 2px no-repeat,
    linear-gradient(#00ff88, #00ff88) bottom left / 100% 2px no-repeat,
    linear-gradient(#00ff88, #00ff88) top left / 2px 100% no-repeat,
    linear-gradient(#00ff88, #00ff88) top right / 2px 100% no-repeat;
}

.btn-default:hover, .button.button.product_type_simple:hover, .button.product_type_variable:hover::before {
    background: rgb(62, 255, 101);
    color: #001a10;
    scale: 1.1;
    box-shadow: 0 0 20px #00ff2a;
}

.btn-secondary {
    font-size: 1.2rem;
    padding: 20px 30px;
    text-decoration: none;
    color: #001014;
    background: #00e5ff;
    transition: all .45s ease;
    position: relative;
    box-shadow: 0 0 12px rgba(0, 229, 255, .5);
}

.btn-secondary::before {
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    background: repeating-linear-gradient(
            90deg,
            #00e5ff 0 6px,
            transparent 6px 14px
    ) top left / 100% 2px no-repeat,
    repeating-linear-gradient(
            90deg,
            #00e5ff 0 6px,
            transparent 6px 14px
    ) bottom left / 100% 2px no-repeat,
    repeating-linear-gradient(
            0deg,
            #00e5ff 0 6px,
            transparent 6px 14px
    ) top left / 2px 100% no-repeat,
    repeating-linear-gradient(
            0deg,
            #00e5ff 0 6px,
            transparent 6px 14px
    ) top right / 2px 100% no-repeat !important;

    opacity: .5;
    transition: opacity .45s ease;
}

.btn-secondary:hover {
    background: #00f7ff;
    color: #001014;
    scale: 1.1;
    box-shadow: 0 0 25px #00e5ff, 0 0 60px rgba(0, 229, 255, .6);
}

.btn-warning {
    font-size: 1.2rem;
    padding: 20px 30px;
    text-decoration: none;
    color: #1a1200;
    background: #ddbb32;
    transition: all .45s ease;
    position: relative;
    box-shadow: 0 0 12px rgba(255, 208, 0, .5);
}

.btn-warning::before {
    content: "";
    position: absolute;
    inset: -3px;
    pointer-events: none;
    background: repeating-linear-gradient(
            90deg,
            #ffd000 0 6px,
            transparent 6px 14px
    ) top left / 100% 2px no-repeat,
    repeating-linear-gradient(
            90deg,
            #ffd000 0 6px,
            transparent 6px 14px
    ) bottom left / 100% 2px no-repeat,
    repeating-linear-gradient(
            0deg,
            #ffd000 0 6px,
            transparent 6px 14px
    ) top left / 2px 100% no-repeat,
    repeating-linear-gradient(
            0deg,
            #ffd000 0 6px,
            transparent 6px 14px
    ) top right / 2px 100% no-repeat;

    opacity: .5;
    transition: opacity .45s ease;
}

.btn-warning:hover {
    background: #ffdd00;
    color: #1a1200;
    scale: 1.1;
    box-shadow: 0 0 25px #ffd000, 0 0 60px rgba(255, 208, 0, .6);
}

.btn-youtube {
    color: #fff;
    background: rgba(255, 0, 0, 0.5);
}

.btn-youtube::before {
    background: repeating-linear-gradient(90deg, #ff0000 0 6px, transparent 6px 14px) top left / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, #ff0000 0 6px, transparent 6px 14px) bottom left / 100% 2px no-repeat,
    repeating-linear-gradient(0deg, #ff0000 0 6px, transparent 6px 14px) top left / 2px 100% no-repeat,
    repeating-linear-gradient(0deg, #ff0000 0 6px, transparent 6px 14px) top right / 2px 100% no-repeat;
}

.btn-youtube::after {
    background: linear-gradient(#ff0000, #ff0000) top left / 0 2px no-repeat,
    linear-gradient(#ff0000, #ff0000) bottom left / 0 2px no-repeat,
    linear-gradient(#ff0000, #ff0000) top left / 2px 0 no-repeat,
    linear-gradient(#ff0000, #ff0000) top right / 2px 0 no-repeat;
}

.btn-youtube:hover::after {
    opacity: 1;
    background: linear-gradient(#ff0000, #ff0000) top left / 100% 2px no-repeat,
    linear-gradient(#ff0000, #ff0000) bottom left / 100% 2px no-repeat,
    linear-gradient(#ff0000, #ff0000) top left / 2px 100% no-repeat,
    linear-gradient(#ff0000, #ff0000) top right / 2px 100% no-repeat;
}

.btn-youtube:hover {
    box-shadow: 0 0 20px #ff0000;
    background: rgba(255, 0, 0, 1);
}

.btn-tiktok {
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
}

.btn-tiktok::before {
    background: repeating-linear-gradient(90deg, #ff0050 0 6px, transparent 6px 14px) top left / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, #ff0050 0 6px, transparent 6px 14px) bottom left / 100% 2px no-repeat,
    repeating-linear-gradient(0deg, #00f2ea 0 6px, transparent 6px 14px) top left / 2px 100% no-repeat,
    repeating-linear-gradient(0deg, #00f2ea 0 6px, transparent 6px 14px) top right / 2px 100% no-repeat;
}

.btn-tiktok::after {
    background: linear-gradient(#ff0050, #ff0050) top left / 0 2px no-repeat,
    linear-gradient(#ff0050, #ff0050) bottom left / 0 2px no-repeat,
    linear-gradient(#00f2ea, #00f2ea) top left / 2px 0 no-repeat,
    linear-gradient(#00f2ea, #00f2ea) top right / 2px 0 no-repeat;
}

.btn-tiktok:hover::after {
    opacity: 1;
    background: linear-gradient(#ff0050, #ff0050) top left / 100% 2px no-repeat,
    linear-gradient(#ff0050, #ff0050) bottom left / 100% 2px no-repeat,
    linear-gradient(#00f2ea, #00f2ea) top left / 2px 100% no-repeat,
    linear-gradient(#00f2ea, #00f2ea) top right / 2px 100% no-repeat;
}

.btn-tiktok:hover {
    box-shadow: 0 0 12px #ff0050,
    0 0 20px #00f2ea;
    background: rgba(0, 0, 0, 1);
}


.btn-facebook {
    color: #fff;
    background: rgba(24, 119, 242, 0.5);
}

.btn-facebook::before {
    background: repeating-linear-gradient(90deg, #1877f2 0 6px, transparent 6px 14px) top left / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, #1877f2 0 6px, transparent 6px 14px) bottom left / 100% 2px no-repeat,
    repeating-linear-gradient(0deg, #1877f2 0 6px, transparent 6px 14px) top left / 2px 100% no-repeat,
    repeating-linear-gradient(0deg, #1877f2 0 6px, transparent 6px 14px) top right / 2px 100% no-repeat;
}

.btn-facebook::after {
    background: linear-gradient(#1877f2, #1877f2) top left / 0 2px no-repeat,
    linear-gradient(#1877f2, #1877f2) bottom left / 0 2px no-repeat,
    linear-gradient(#1877f2, #1877f2) top left / 2px 0 no-repeat,
    linear-gradient(#1877f2, #1877f2) top right / 2px 0 no-repeat;
}

.btn-facebook:hover::after {
    opacity: 1;
    background: linear-gradient(#1877f2, #1877f2) top left / 100% 2px no-repeat,
    linear-gradient(#1877f2, #1877f2) bottom left / 100% 2px no-repeat,
    linear-gradient(#1877f2, #1877f2) top left / 2px 100% no-repeat,
    linear-gradient(#1877f2, #1877f2) top right / 2px 100% no-repeat;
}

.btn-facebook:hover {
    box-shadow: 0 0 20px #1877f2;
    background: rgba(24, 119, 242, 1);
}


.btn-olx {
    color: #002b29;
    background: rgba(35, 229, 219, 0.5);
}

.btn-olx::before {
    background: repeating-linear-gradient(90deg, #23e5db 0 6px, transparent 6px 14px) top left / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, #23e5db 0 6px, transparent 6px 14px) bottom left / 100% 2px no-repeat,
    repeating-linear-gradient(0deg, #23e5db 0 6px, transparent 6px 14px) top left / 2px 100% no-repeat,
    repeating-linear-gradient(0deg, #23e5db 0 6px, transparent 6px 14px) top right / 2px 100% no-repeat;
}

.btn-olx::after {
    background: linear-gradient(#23e5db, #23e5db) top left / 0 2px no-repeat,
    linear-gradient(#23e5db, #23e5db) bottom left / 0 2px no-repeat,
    linear-gradient(#23e5db, #23e5db) top left / 2px 0 no-repeat,
    linear-gradient(#23e5db, #23e5db) top right / 2px 0 no-repeat;
}

.btn-olx:hover::after {
    opacity: 1;
    background: linear-gradient(#23e5db, #23e5db) top left / 100% 2px no-repeat,
    linear-gradient(#23e5db, #23e5db) bottom left / 100% 2px no-repeat,
    linear-gradient(#23e5db, #23e5db) top left / 2px 100% no-repeat,
    linear-gradient(#23e5db, #23e5db) top right / 2px 100% no-repeat;
}

.btn-olx:hover {
    box-shadow: 0 0 20px #23e5db;
    background: rgba(35, 229, 219, 1);
}

/* ============================= */
/* FOOTER */
/* ============================= */

.site-footer {
    padding: 60px 0;
    border-top: 1px solid rgba(0, 255, 136, 0.3);
    font-size: .9rem;
}

.site-footer__inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.footer-author {
    padding: 15px 0;
}

.footer-author__link {
    color: #00ff88;
    text-decoration: none;
}

.footer-author__link:hover {
    text-shadow: 0 0 10px #00ff88;
}


/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 992px) {

    .products__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-section__inner {
        grid-template-columns: 1fr;
    }

    .hero-slide__title {
        font-size: 2rem;
    }


    .single-product div.product {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
    }

    .summary {
        order: 1;
        margin-bottom: 0 !important;
    }

    .product-media-wrapper {
        order: 2;
    }

    .related.products {
        order: 3;
        width: 100%;
    }

}

@media (max-width: 576px) {

    .products__grid {
        grid-template-columns: 1fr;
    }

    .hero-slide__cta {
        flex-direction: column;
    }
}

/* ============================= */
/* HEADER */
/* ============================= */

.header {
    margin: 40px 0;
    z-index: 2;
}

.blueprint-box {
    position: relative;
    background: rgba(0, 20, 10, 0.5);
    backdrop-filter: blur(6px) hue-rotate(0deg);
}

.blueprint-box::before {
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    background: repeating-linear-gradient(
            90deg,
            rgba(0, 255, 136, 0.35) 0 6px,
            transparent 3px 15px
    ) top left / 100% 2px no-repeat,
    repeating-linear-gradient(
            90deg,
            rgba(0, 255, 136, 0.35) 0 6px,
            transparent 3px 15px
    ) bottom left / 100% 2px no-repeat,
    repeating-linear-gradient(
            0deg,
            rgba(0, 255, 136, 0.35) 0 6px,
            transparent 3px 15px
    ) top left / 2px 100% no-repeat,
    repeating-linear-gradient(
            0deg,
            rgba(0, 255, 136, 0.35) 0 6px,
            transparent 3px 15px
    ) top right / 2px 100% no-repeat,
    linear-gradient(#00ff88, #00ff88) 50% 0 / 20px 2px no-repeat, linear-gradient(#00ff88, #00ff88) 50% 100% / 20px 2px no-repeat, linear-gradient(#00ff88, #00ff88) 0 50% / 2px 20px no-repeat, linear-gradient(#00ff88, #00ff88) 100% 50% / 2px 20px no-repeat;
}

.blueprint-box {
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.08);
    overflow: visible;
}

.blueprint-box .target {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.blueprint-box .target::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 255, 136, .25), rgba(0, 255, 136, .25)) 0 50% / 40px 1px no-repeat,
    linear-gradient(rgba(0, 255, 136, .25), rgba(0, 255, 136, .25)) 50% 0 / 1px 40px no-repeat,
    linear-gradient(rgba(0, 255, 136, .25), rgba(0, 255, 136, .25)) 100% 50% / 40px 1px no-repeat,
    linear-gradient(rgba(0, 255, 136, .25), rgba(0, 255, 136, .25)) 50% 100% / 1px 40px no-repeat;
}

/* Tworzymy osobne pseudo-elementy narożników */
.blueprint-box::after {
    content: "";
    position: absolute;
    inset: -30px;
    pointer-events: none;

    background: /* ================= DASH EXTENSIONS ========= */ /* TOP LEFT */ repeating-linear-gradient(
            to right,
            rgba(0, 255, 136, .7) 0px 6px,
            transparent 6px 14px
    ) -60px 28px / 80px 2px no-repeat,
    repeating-linear-gradient(
            to bottom,
            rgba(0, 255, 136, .7) 0px 6px,
            transparent 6px 14px
    ) 28px -60px / 2px 80px no-repeat,
        /* TOP RIGHT */ repeating-linear-gradient(
            to left,
            rgba(0, 255, 136, .7) 0 6px,
            transparent 6px 14px
    ) calc(100% + 60px) 28px / 80px 2px no-repeat,
    repeating-linear-gradient(
            to bottom,
            rgba(0, 255, 136, .7) 0 6px,
            transparent 6px 14px
    ) calc(100% - 28px) -60px / 2px 80px no-repeat,
        /* BOTTOM LEFT */ repeating-linear-gradient(
            to right,
            rgba(0, 255, 136, .7) 0 6px,
            transparent 6px 14px
    ) -60px calc(100% - 28px) / 80px 2px no-repeat,
    repeating-linear-gradient(
            to top,
            rgba(0, 255, 136, .7) 0 6px,
            transparent 6px 14px
    ) 28px calc(100% + 60px) / 2px 80px no-repeat,
        /* BOTTOM RIGHT */ repeating-linear-gradient(
            to left,
            rgba(0, 255, 136, .7) 0 6px,
            transparent 6px 14px
    ) calc(100% + 58px) calc(100% - 28px) / 80px 2px no-repeat,
    repeating-linear-gradient(
            to top,
            rgba(0, 255, 136, .7) 0 6px,
            transparent 6px 14px
    ) calc(100% - 28px) calc(100% + 60px) / 2px 80px no-repeat,
        /* ================= PLUS SIGNS ================= */ /* TOP LEFT + */ linear-gradient(rgba(0, 255, 136, 1), rgba(0, 255, 136, 1)) 22px 28px / 16px 2px no-repeat,
    linear-gradient(rgba(0, 255, 136, 1), rgba(0, 255, 136, 1)) 28px 22px / 2px 16px no-repeat,
        /* TOP RIGHT + */ linear-gradient(rgba(0, 255, 136, 1), rgba(0, 255, 136, 1)) calc(100% - 22px) 28px / 16px 2px no-repeat,
    linear-gradient(rgba(0, 255, 136, 1), rgba(0, 255, 136, 1)) calc(100% - 28px) 22px / 2px 16px no-repeat,
        /* BOTTOM LEFT + */ linear-gradient(rgba(0, 255, 136, 1), rgba(0, 255, 136, 1)) 22px calc(100% - 28px) / 16px 2px no-repeat,
    linear-gradient(rgba(0, 255, 136, 1), rgba(0, 255, 136, 1)) 28px calc(100% - 22px)/ 2px 16px no-repeat,
        /* BOTTOM RIGHT + */ linear-gradient(rgba(0, 255, 136, 1), rgba(0, 255, 136, 1)) calc(100% - 22px) calc(100% - 28px) / 16px 2px no-repeat,
    linear-gradient(rgba(0, 255, 136, 1), rgba(0, 255, 136, 1)) calc(100% - 28px) calc(100% - 22px) / 2px 16px no-repeat;
}

.header__inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
}

/* ============================= */
/* LOGO */
/* ============================= */

.logo {
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    color: #00ff88;
    letter-spacing: 2px;
    text-shadow: 0 0 10px #00ff88;
}

.woocommerce ul.products li.product a img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.woocommerce-Price-amount {
    font-size: 1.4rem;
    font-weight: 500;
    color: #00cc66;
    text-align: center;
}

.woocommerce ul.products li.product .price {
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.4rem;
    font-weight: 500;
}

/* ============================= */
/* MENU DESKTOP */
/* ============================= */

.main-navigation ul {
    list-style: none; /* usuwa kropki */
    display: flex; /* poziomo */
    gap: 70px;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    position: relative;
    text-decoration: none;
    color: #baffdf;
    text-transform: uppercase;
    font-size: 1.25rem;
    letter-spacing: 1px;
    padding: 6px 0;
    transition: color .3s ease;
}

.main-navigation a:hover {
    color: #00ff88;
    text-shadow: 0 0 8px #00ff88;
}

.main-navigation a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #00ff88;
    box-shadow: 5px 0 5px rgba(0, 255, 136, .6);
    transform: translateX(-50%);
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.main-navigation a::before {
    content: "";
    position: absolute;
    inset: -20px -10px;
    background: radial-gradient(
            circle at center,
            rgba(0, 255, 136, .15),
            transparent 70%
    );
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.main-navigation a:hover {
    color: #00ff88;
    text-shadow: 0 0 6px rgba(0, 255, 136, .7);
}

.main-navigation a:hover::after {
    width: 100%;
}

.main-navigation a:hover::before {
    opacity: 1;
}

.nav-toggle {
    display: none;
}

.header__logo {
    mask: url('/wp-content/themes/druk4farmer/assets/logo_plain.svg') no-repeat center / cover;
    -webkit-mask: url('/wp-content/themes/druk4farmer/assets/logo_plain.svg') no-repeat center / cover;
    background: #fff;
    height: 106px;
    width: 106px;
    margin-right: 25px;
}

.header__logo_wrapper {
    display: flex;
    align-items: center;
    overflow: visible;
    transition: all .4s ease
}

.header__logo_wrapper:hover {
    /*filter: drop-shadow(0 0 8px rgba(0, 255, 4, 0.93));*/
}

.swiper-slide {
    position: relative;
    display: flex !important;
}

.swiper-wrapper {
    height: 100%
}

.swiper {
    height: 70vh;
}

.swiper-button-prev, .swiper-button-next {
    color: #00cc66;
}

.swiper-button-next, .swiper-button-prev {
    color: #00cc66;
    fill: #00cc66;
    text-shadow: 0 0 10px #00ff88;
    transition: all .2s ease;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    filter: drop-shadow(0 0 8px #00ff88);
    scale: 1.2;
}

.swiper-pagination-bullet {
    background: #000000 !important;
    border: 1px solid #00ff21 !important;
}

.swiper-pagination-bullet-active {
    background: #14b129 !important;
}

/* ============================= */
/* CONTACT FORM */
/* ============================= */

.contact-form {
    display: flex;
    flex-direction: column;
    padding: 40px;
    justify-content: center;
    align-items: center;
}

.form {
    flex-grow: 1;
    width: 100%;
}

.form__input, .form__textarea {
    padding: 10px;
}

input::placeholder {
    color: #409e4c;
}

input::-webkit-input-placeholder {
    color: #409e4c;
}

input::-moz-placeholder {
    color: #409e4c;
}

input:-ms-input-placeholder {
    color: #409e4c;
}


textarea::placeholder {
    color: #409e4c;
}

textarea::-webkit-input-placeholder {
    color: #409e4c;
}

textarea::-moz-placeholder {
    color: #409e4c;
}

textarea:-ms-input-placeholder {
    color: #409e4c;
}

button {
    border: none;
    background: none;
}

.products {
    padding: 40px 0 0 0;
}

.products .container, .social-box .container {
    display: flex;
    flex-direction: column;
}

.contact-section .container {
    padding: 0;
}

.contact-image {
    flex: 0 0 280px;
}

.contact-image img {
    width: 100%;
    height: auto;
}

.contact-image img {
    filter: drop-shadow(0 0 10px rgba(255, 0, 150, .6));
}

.button {
    background: none !important;
}

.button:hover, button:active {
    color: inherit !important;
}

.product .woocommerce-loop-product__title {
    text-align: center;
    line-height: 1.7rem;
}

.woocommerce ul.products li.product .button {
    display: flex;
    align-self: center;
    justify-self: center;
    margin-top: auto;
}

.woocommerce .woocommerce-ordering .orderby {
    padding: 10px;
    background: #000;
    border: 2px dashed #00cc66;
    color: #609e7d;
}

.woocommerce .woocommerce-ordering .orderby:focus-visible {
    border: 2px solid #00cc66;
    outline: none !important;
}

select option:checked {
    background: #409e4c !important;
    color: #000 !important;
}

select option {
    background: none !important;
}

/* ============================= */
/* ADJUSTMENTS */
/* ============================= */

.page-template-default main.container article {
    width: 100%;
}

ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    justify-content: center;
}

ul.products li.product {
    display: flex;
    flex-direction: column;
    width: auto !important;
    float: none;
    clear: none;
    margin: 0;
}

ul.products li.product a.woocommerce-LoopProduct-link {
    flex-grow: 1;
}

ul.products li.product .button {
    margin-top: auto;
}

ul.products::before,
ul.products::after {
    display: none;
    content: none !important;
}

/* ============================= */
/* SINGLE PRODUCT */
/* ============================= */

.single-product h1 {
    font-size: 2.7rem;
    margin-bottom: 2rem;
}

.single-product .product {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.single-product .woocommerce-tabs {
    flex: 0.9;
    display: block;
}

.wc-tabs li {
    background: #001a10 !important;
    color: #00cc66 !important;
    border-color: #00cc66 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
    box-shadow: 2px 2px 0 #00cc66 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
    box-shadow: -2px 2px 0 #00cc66 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
    box-shadow: 2px 2px 0 #001a10;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    box-shadow: -2px 2px 0 #001a10;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: #0c6;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):hover a {
    color: #1dff92;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-color: #00cc66 !important;
}

.wc-tabs li.active {
    color: #001a10 !important;
    background: #00cc66 !important;
}


.woocommerce div.product div.images .flex-control-thumbs li {
    width: calc(100% / 6);
}

.woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
    float: left;
    clear: none;
}

.woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(6n+1) {
    clear: left;
}

tr.woocommerce-product-attributes-item {
    border-bottom: 1px solid rgba(0, 204, 102, 0.64) !important;
}

/* ============================= */
/* POSTY */
/* ============================= */

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.post-card {
    border: 1px solid #00cc66;
    overflow: hidden;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: .2s;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

.post-thumb img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.post-content {
    padding: 20px;
}

.post-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.post-meta {
    font-size: 13px;
    opacity: .6;
    margin-bottom: 10px;
}

.pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.pagination .page-numbers {
    padding: 10px 14px;
    border: 1px solid #ddd;
    margin: 0 4px;
    text-decoration: none;
}

.pagination .current {
    background: #000;
    color: #fff;
    border-color: #000;
}

.single-post .post-hero {
    width: 100%;
    flex: 0 0 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    margin-bottom: 30px;
}

.single-post .post-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.single-post .container article {
    width: 100%;
}

.single-post article h1 {
    margin: 20px 0;
}

.antibot {
    display: none;
}

.btn-default {
    cursor: pointer;
}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 992px) {

    .nav-toggle {
        display: flex;
        z-index: 1001;
    }

    .main-navigation {
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        background: rgba(0, 20, 10, 0.95);
        border-top: 1px solid rgba(0, 255, 136, 0.35);
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s ease;
    }

    .main-navigation.is-open {
        max-height: 500px;
    }

    .main-navigation ul {
        flex-direction: column;
        padding: 30px;
        gap: 20px;
    }

    .contact-image {
        display: none;
    }

    .social-box__icons {
        display: grid;
        flex-wrap: wrap;
        gap: 20px;
        grid-template-columns: repeat(2, 1fr);
    }

    .social-box__icons .btn-default svg {
        width: 50px;
    }

    .social-box__icons .btn-default {
        padding: 20px;
    }

    .products {
        padding: 30px 0 0 0;
    }

    .header__logo_wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .header__logo {
        margin-bottom: 10px;
    }

    .header {
        display: flex;
    }

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        gap: 10px;
    }

    .nav-toggle__bar {
        width: 30px;
        height: 4px;
        background: #00cc66;
    }

    .swiper-slide {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .hero-slider {
        margin: 30px !important;
    }

    .hero-slider__card {
        padding: 30px;
    }

    .hero-slider__card .btn-warning {
        text-align: center;
    }

    .hero-slider__image, .hero-slider__content {
        width: calc(100% - 80px);
    }

    .hero-slider__content {
        margin-bottom: 40px;
    }

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

    .single-product main.container.blueprint-box {
        width: 99%;
        padding: 20px;
    }

    .single-product .wc-tabs-wrapper {
        width: 100%;
    }

    .single-product .woocommerce-tabs {
        flex: 1;
    }

    .single-product .entry-content p {
        text-align: justify;
    }

    .search-item {
        width: 100% !important;
    }

    .search-item .thumb {
        width: 100% !important;
        height: 240px !important;
        object-fit: cover;
    }

    body {
        background: url("/wp-content/themes/druk4farmer/assets/retrogreen-tractor.jpg") no-repeat 73% center fixed;
    }
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: spin .6s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.related.products ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.related.products ul.products li.product {
    width: auto;
    margin: 0;
}

@media (max-width: 1024px) {
    .related.products ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .related.products ul.products {
        grid-template-columns: 1fr;
    }
}

.product-extra-box {
    width: 100%;
    height: 100%;
    display: flex;
    background: #ddbb32;
    padding: 40px;
    color: #1a1200;
    font-weight: 500;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    gap: 60px;
}

.btn-dark-o {
    color: #1a1200;
    border: 2px dashed #1a1200;
    padding: 10px 15px;
    cursor: pointer;
    transition: all .2s;
}

.btn-dark-o:hover {
    background: #1a1200;
    color: #ffd000;
    border-color: #ffd000;
    scale: 1.1;
}

.product-extra-box h2 {
    margin-bottom: 20px;
}

#got-idea {
    margin-top: 50px;
    padding: 3px;
}

.yellowprint-box {
    position: relative;
    background: rgba(20, 20, 0, 0.5);
    backdrop-filter: blur(6px) hue-rotate(0deg);
}

.yellowprint-box::before {
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    background: repeating-linear-gradient(
            90deg,
            rgba(255, 221, 0, 0.35) 0 6px,
            transparent 3px 15px
    ) top left / 100% 2px no-repeat,
    repeating-linear-gradient(
            90deg,
            rgba(255, 221, 0, 0.35) 0 6px,
            transparent 3px 15px
    ) bottom left / 100% 2px no-repeat,
    repeating-linear-gradient(
            0deg,
            rgba(255, 221, 0, 0.35) 0 6px,
            transparent 3px 15px
    ) top left / 2px 100% no-repeat,
    repeating-linear-gradient(
            0deg,
            rgba(255, 221, 0, 0.35) 0 6px,
            transparent 3px 15px
    ) top right / 2px 100% no-repeat,
    linear-gradient(#ffdd00, #ffdd00) 50% 0 / 20px 2px no-repeat, linear-gradient(#ffdd00, #ffdd00) 50% 100% / 20px 2px no-repeat, linear-gradient(#ffdd00, #ffdd00) 0 50% / 2px 20px no-repeat, linear-gradient(#ffdd00, #ffdd00) 100% 50% / 2px 20px no-repeat;
}

.yellowprint-box {
    box-shadow: 0 0 20px rgba(255, 221, 0, 0.08);
    overflow: visible;
}

.yellowprint-box .target {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.yellowprint-box .target::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 221, 0, .25), rgba(255, 221, 0, .25)) 0 50% / 40px 1px no-repeat,
    linear-gradient(rgba(255, 221, 0, .25), rgba(255, 221, 0, .25)) 50% 0 / 1px 40px no-repeat,
    linear-gradient(rgba(255, 221, 0, .25), rgba(255, 221, 0, .25)) 100% 50% / 40px 1px no-repeat,
    linear-gradient(rgba(255, 221, 0, .25), rgba(255, 221, 0, .25)) 50% 100% / 1px 40px no-repeat;
}

.yellowprint-box::after {
    content: "";
    position: absolute;
    inset: -30px;
    pointer-events: none;

    background: repeating-linear-gradient(
            to right,
            rgba(255, 221, 0, .7) 0px 6px,
            transparent 6px 14px
    ) -60px 28px / 80px 2px no-repeat,
    repeating-linear-gradient(
            to bottom,
            rgba(255, 221, 0, .7) 0px 6px,
            transparent 6px 14px
    ) 28px -60px / 2px 80px no-repeat,
    repeating-linear-gradient(
            to left,
            rgba(255, 221, 0, .7) 0 6px,
            transparent 6px 14px
    ) calc(100% + 60px) 28px / 80px 2px no-repeat,
    repeating-linear-gradient(
            to bottom,
            rgba(255, 221, 0, .7) 0 6px,
            transparent 6px 14px
    ) calc(100% - 28px) -60px / 2px 80px no-repeat,
    repeating-linear-gradient(
            to right,
            rgba(255, 221, 0, .7) 0 6px,
            transparent 6px 14px
    ) -60px calc(100% - 28px) / 80px 2px no-repeat,
    repeating-linear-gradient(
            to top,
            rgba(255, 221, 0, .7) 0 6px,
            transparent 6px 14px
    ) 28px calc(100% + 60px) / 2px 80px no-repeat,
    repeating-linear-gradient(
            to left,
            rgba(255, 221, 0, .7) 0 6px,
            transparent 6px 14px
    ) calc(100% + 58px) calc(100% - 28px) / 80px 2px no-repeat,
    repeating-linear-gradient(
            to top,
            rgba(255, 221, 0, .7) 0 6px,
            transparent 6px 14px
    ) calc(100% - 28px) calc(100% + 60px) / 2px 80px no-repeat,
    linear-gradient(rgba(255, 221, 0, 1), rgba(255, 221, 0, 1)) 22px 28px / 16px 2px no-repeat,
    linear-gradient(rgba(255, 221, 0, 1), rgba(255, 221, 0, 1)) 28px 22px / 2px 16px no-repeat,
    linear-gradient(rgba(255, 221, 0, 1), rgba(255, 221, 0, 1)) calc(100% - 22px) 28px / 16px 2px no-repeat,
    linear-gradient(rgba(255, 221, 0, 1), rgba(255, 221, 0, 1)) calc(100% - 28px) 22px / 2px 16px no-repeat,
    linear-gradient(rgba(255, 221, 0, 1), rgba(255, 221, 0, 1)) 22px calc(100% - 28px) / 16px 2px no-repeat,
    linear-gradient(rgba(255, 221, 0, 1), rgba(255, 221, 0, 1)) 28px calc(100% - 22px)/ 2px 16px no-repeat,
    linear-gradient(rgba(255, 221, 0, 1), rgba(255, 221, 0, 1)) calc(100% - 22px) calc(100% - 28px) / 16px 2px no-repeat,
    linear-gradient(rgba(255, 221, 0, 1), rgba(255, 221, 0, 1)) calc(100% - 28px) calc(100% - 22px) / 2px 16px no-repeat;
}

.related.products {
    border-top: 1px solid #00cc66;
}

.related.products {
    padding: 20px 0 0 0;
}

.related.products h2 {
    margin-bottom: 20px;
}

.search-page {
    padding: 40px 0;
}

#live-search {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background: #00cc66;
    color: #000;
}

#live-results {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

.search-page .container {
    flex-direction: column;
}

.search-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    border: 1px solid #00cc66;
    color: #00cc66;
    text-decoration: none;
    align-items: center;
    gap: 10px;
    width: 48%;
    transition: all 0.4s;
}

.search-item:hover {
    box-shadow: 1px 1px 10px #00cc66;
    background: rgba(0, 204, 102, 0.22);
}

.search-page h1 {
    margin-bottom: 20px;
}

.search-item .thumb {
    width: 360px;
    height: 360px;
    object-fit: cover;
}

.search-item .title {
    font-size: 20px !important;
}

.header-cart,
.cart-contents {
    display: none !important;
}

.single-product div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* LEWA */
.woocommerce-product-gallery {
    grid-column: 1;
}

/* VIDEO POD GALERIĄ */
.product-youtube-video {
    grid-column: 1;
}

/* PRAWA */
.summary,
.woocommerce-tabs.wc-tabs-wrapper {
    grid-column: 2;
}

/* RELATED FULL WIDTH */
.related.products {
    grid-column: 1 / -1;
}

/* FIX starego Woo */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
    width: 100% !important;
    float: none !important;
}

/* VIDEO */
.product-youtube-video iframe {
    width: 100%;
    aspect-ratio: 16/9;
}

.summary .woocommerce-tabs {
    margin-top: 20px;
}

.single-product div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "gallery summary"
        "video   summary"
        "related related";
    gap: 40px;
}

/* przypisania */
.woocommerce-product-gallery {
    grid-area: gallery;
}

.summary,
.woocommerce-tabs.wc-tabs-wrapper {
    grid-area: summary;
}

.product-youtube-video {
    grid-area: video;
}

.related.products {
    grid-area: related;
}

.footer-navigation {
    padding: 15px 0;
}

.cmplz-service-header, .cookies-per-purpose, .purpose, .cookies-per-purpose div {
    background: rgba(46, 46, 46, 0.5) !important;
    border: 1px solid rgba(46, 46, 46, 0.5) !important;
}

.form__info {
    margin-bottom: 20px;
}

.woocommerce div.product form.cart .variations select {
    background: #00cc66 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=) no-repeat right center;
    padding: 10px 5px;
}

.woocommerce-variation-add-to-cart {
    display: none;
}

.woocommerce-variation-price .price .amount {
    color: #000;
    background: #00ff88;
    padding: 5px 10px;
    border-radius: 3px;
}