:root {
    --y: #fdf100;
    --b: #111;
}

/* riga prodotto: immagine + contenuto */
.prod-row {
    display: grid;
    grid-template-columns: 200px 1fr; /* immagine a sinistra */
    column-gap: 8px;
    align-items: center;
}

/* box immagine bianco */
.prod-imgbox {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 180px;
}

.prod-img {
    width: 100%;
    max-width: 200px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* testo */
/*.prod-title {
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
    margin: 0 0 10px;
    color: #111;
}*/
.prod-codice {
    color: #2f2f2f;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.0;
    margin: 0 0 10px;
}
.prod-title {
    color: #2f2f2f;
    font-weight: 900;
    font-size: 20px;
    line-height: 1.0;
    margin: 0 0 10px;
}

.prod-desc {
    margin: 0 0 12px;
    font-size: 11px;
    line-height: 1.25;
    color: #222;
    max-width: 420px;
}

/* barra azioni sotto testo */
.prod-actions {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.prod-more {
    /*background: #000;*/
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    font-size: 12px;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    background-image: url('../img/gui/sfondotestonero.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.prod-btn {
    width: 44px;
    height: 44px;
    /*background: var(--y);*/
    color: #000;
    display: grid;
    place-items: center;
    text-decoration: none;
    /*border-left: 2px solid #000;*/
    padding: 5px 12px;
}

.prod-icon {
    width: 22px;
    height: 22px;
}

.side-btn {
    width: 100%;
    background: var(--y);
    border: 0;
    padding: 10px 14px;
    font-weight: 900;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.side-dot {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #000;
    display: inline-block;
}

.cat-title {
    color: #2c3a2c; /* verde/grigio come screenshot */
    font-weight: 900;
    letter-spacing: .5px;
    font-size: 24px;
    margin-bottom: 22px;
    text-transform: uppercase;
}

/* Box immagine */
.photo-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 26px;
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .photo-card img {
        max-width: 100%;
        max-height: 520px;
        object-fit: contain;
        display: block;
    }

.photo-zoom {
    position: absolute;
    right: 14px;
    bottom: 10px;
    opacity: .35;
    font-size: 28px;
    color: #000;
}

.zoom {
    position: absolute;
    right: 14px;
    bottom: 10px;
    color: #000;
    opacity: .35;
    font-size: 26px;
}

/* stars */
.stars {
    color: var(--y);
    letter-spacing: 3px;
    font-size: 26px;
    margin-bottom: 10px;
}

.kpi {
    color: #2a2a2a;
    font-weight: 900;
    margin-bottom: 6px;
}

/* feature icons row */
.features {
    margin-top: 24px;
    padding: 18px 0 10px;
    color: #2a2a2a;
    font-weight: 800;
    font-size: 13px;
}

.feat {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.feat-ico {
    width: 56px;
    height: 56px;
    /*border-radius: 16px;
    border: 3px solid #2a2a2a;
    display: grid;*/
    place-items: center;
    color: #dcdcdc;
    opacity: .9;
    flex: 0 0 auto;
}

    .feat-ico i {
        font-size: 26px;
        color: #dcdcdc;
    }

.feat-txt {
    color: #2a2a2a;
}

.sep {
    height: 4px;
    background: var(--y);
    margin: 22px 0 18px;
}

/* spec table */
.spec {
    background: transparent;
    color: #000;
    font-weight: 800;
    font-size: 14px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

    .spec td {
        background: #fff;
        padding: 8px 12px;
    }

        .spec td:first-child {
            width: 68%;
        }

        .spec td:last-child {
            width: 32%;
            text-align: right;
            font-weight: 900;
        }

/* right lower text & CTA */
.lower-text {
    color: #2a2a2a;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.35;
}

/* Colonna destra */
.prod-kicker {
    color: #2f2f2f;
    font-weight: 900;
    font-size: 32px;
    line-height: 1.0;
    margin: 0 0 10px;
}


.prod-desc {
    color: #2a2a2a;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.25;
    max-width: 520px;
    margin-bottom: 22px;
}

/* Prezzo */
.price-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 22px 0 18px;
}

.price-label {
    color: #2f2f2f;
    font-weight: 900;
    font-size: 36px;
    white-space: nowrap;
}

.price-box {
    position: relative;
    padding: 10px 18px;
    min-width: 260px;
    text-align: center;
    font-weight: 900;
    font-size: 38px;
    color: #2f2f2f;
    background: transparent;
}

    /* bordo “sopra” perfetto */
    .price-box::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 5;
        /* SVG inline: stroke giallo, fill trasparente */
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpolygon points='4,0 100,0 96,40 0,40' fill='none' stroke='%23F2C200' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center/100% 100%;
    }

.price-sub {
    color: #5a5a5a;
    font-weight: 700;
    font-size: 13px;
    margin-left: 8px;
}

/* Bottoni “a taglio” */
.btn-slab {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: 0;
    border-radius: 0;
    padding: 0 18px;
    text-decoration: none;
    white-space: nowrap;
}

.btn-darkslab {
    background: #1a1a1a;
    color: #fff;
}
    .btn-darkslab:visited,
    .btn-darkslab:hover,
    .btn-darkslab:active {
        color: #FFF;
    }

.btn-yellowslab:visited,
.btn-yellowslab:hover,
.btn-yellowslab:active {
    color: #000;
}

.btn-yellowslab {
    background: var(--y);
    color: #000;
}

.btn-icon {
    width: 54px;
    padding: 0;
    display: grid;
    place-items: center;
}

.slab-row {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
}

    .slab-row > * {
        margin: 0;
    }

    .slab-row .btn-slab + .btn-slab {
        border-left: 3px solid #000;
    }

.hint-links {
    color: #3a3a3a;
    font-weight: 700;
    font-size: 13px;
    margin-top: 16px;
}

    .hint-links a {
        color: #3a3a3a;
        text-decoration: none;
    }

        .hint-links a:hover {
            text-decoration: underline;
        }
/* Bottom bar */
.bottom-bar {
    position: relative;
    /*left: 0;
    right: 0;
    bottom: 0;*/
    /*background: #101010;*/
    /*border-top: 1px solid #1f1f1f;*/
    padding: 10px 0;
    z-index: 1030;
}

.bottom-item {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none;
    border-radius: 10px;
    gap: 10px;
    padding: 0 14px;
}

.bottom-dark {
    background: #151515;
    color: var(--y);
}

.bottom-yellow {
    background: var(--y);
    color: #000;
}

.bottom-red {
    background: #d40000;
    color: #fff;
}

.bottom-black {
    background: #151515;
    color: #fff;
}

@media (max-width: 992px) {
    .prod-kicker, .prod-title {
        font-size: 34px;
    }

    .price-label {
        font-size: 28px;
    }

    .price-box {
        font-size: 30px;
        min-width: 220px;
    }

    .photo-card {
        min-height: 360px;
    }
}







.cta-bar {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cta-note {
    color: #2a2a2a;
    font-weight: 800;
    font-size: 12px;
    width: 100%;
}

.cta-price {
    background: #fff;
    color: #000;
    font-weight: 900;
    font-size: 34px;
    padding: 10px 14px;
    min-width: 210px;
}

.cta-btn {
    background: var(--y);
    color: #000;
    font-weight: 900;
    border: 0;
    height: 58px;
    padding: 0 18px;
    text-transform: uppercase;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.cta-cart {
    width: 58px;
    height: 58px;
    background: #1a1a1a;
    display: grid;
    place-items: center;
    color: #fff;
    border: 0;
}

.bottom-actions {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-slab {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: 0;
    border-radius: 0;
    padding: 0 16px;
    text-decoration: none;
    white-space: nowrap;
}

.btn-darkslab {
    background: #1a1a1a;
    color: #fff;
}

.btn-yellowslab {
    background: var(--y);
    color: #000;
}

.cart-wrapper {
    padding: 20px 0;
}

.cart-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 30px;
    color: #222;
}

.cart-item {
    padding: 28px 0 22px;
    border-bottom: 2px solid #e3cc00;
}

.cart-imgbox {
    width: 100%;
    max-width: 230px;
    aspect-ratio: 1 / 1;
    border: 1px solid #8c8c8c;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    display: block;
}

.cart-product-title {
    font-size: 22px;
    line-height: 1.05;
    font-weight: 800;
    color: #222;
    margin: 0px 0 28px;
}

.cart-price-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.cart-price-box {
    display: inline-block;
    min-width: 210px;
    padding: 4px 10px;
    border: 1px solid #6d6d6d;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    color: #222;
    background: #fff;
}

.qty-spinner {
    margin-left: 8px;
}

.price-update {
    animation: priceFlash .35s ease;
}

@keyframes priceFlash {
    0% {
        background: #fff3cd;
    }

    100% {
        background: transparent;
    }
}

.cart-old-price {
    font-size: 20px;
    font-weight: 700;
    color: #6b6b6b;
    text-decoration: line-through;
}

.cart-discount {
    background: #f22316;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    padding: 8px 14px;
}

.cart-stock,
.cart-shipping {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: #666;
}

.cart-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 28px;
    padding-top: 6px;
}

.qty-box {
    display: flex;
    border: 1px solid #aaa;
    background: #efefef;
    min-width: 104px;
    height: 72px;
}

.qty-value {
    width: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: #222;
    border-right: 1px solid #aaa;
}

.qty-buttons {
    width: 40px;
    display: flex;
    flex-direction: column;
}

.qty-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #222;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    background: #f7f7f7;
}

    .qty-btn:first-child {
        border-bottom: 1px solid #aaa;
    }

.cart-final-price {
    font-size: 30px;
    font-weight: 800;
    color: #222;
    white-space: nowrap;
    padding-top: 10px;
}

.cart-delete {
    color: #a8a8a8;
    font-size: 48px;
    line-height: 1;
    text-decoration: none;
    padding-top: 2px;
}

    .cart-delete:hover {
        color: #666;
    }

.cart-item-remove {
    opacity: 0;
    transform: translateX(40px);
    transition: all .35s ease;
}

.cart-summary {
    background: #f3f3f3;
}

.promo-box {
    background: #1c1c1c;
    padding: 12px;
}

.promo-input {
    border: none;
    background: transparent;
    color: white;
    width: 100%;
    font-weight: 700;
}

    .promo-input::placeholder {
        color: #ccc;
    }

.promo-btn {
    background: transparent;
    border: none;
    color: white;
    font-weight: 900;
    padding-left: 20px;
    font-size:10px;
}

.checkout-btn {
    background: #1c1c1c;
    color: white;
    border: none;
    padding: 15px 30px;
    font-weight: 900;
}

@media (max-width: 991px) {
    .cart-actions {
        justify-content: flex-start;
        padding-top: 0;
    }

    .cart-product-title {
        margin-top: 0;
    }
}


@media (max-width: 992px) {
    .prod-title {
        font-size: 34px;
    }

    .prod-kicker {
        font-size: 28px;
    }

    .thumb {
        width: 48%;
        height: 140px;
    }

    .photo-card {
        min-height: 360px;
    }

    .price-box {
        min-width: 220px;
        font-size: 30px;
    }


}


































/* responsive */
@media (max-width: 576px) {
    .prod-row {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

    .prod-desc {
        max-width: none;
    }
}