:root {
    /* ==========================================
       BRAND COLORS — Photocity
       TODO brand: validare arancione esatto con file vettoriale ufficiale.
       Valore attuale: #F15A24 (arancione acceso saturato).
       ========================================== */
    --brand: #FF6600;
    --white: #FFFFFF;
    --silver: #efefef;
    --border: #E8E2D8;
    --radius: 14px;
    --shadow: 0 4px 12px rgba(26,23,19,0.06), 0 2px 4px rgba(26,23,19,0.04);
    --font: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


.grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: 10px;
    gap: 16px;
    font-family: var(--font);
}

.product {
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    text-align: center;
}

.product:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--brand);
}


.product-img img {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.product-list {
}

.product-title {
    margin: 0px;
    padding: 10px;
    text-align: left;
}

.product-text {
    margin: 0px;
    padding: 10px 10px 5px 10px;
    text-align: left;
}

.product-title.s {
    background-color: var(--silver);
}

.product-title.w {
    background-color: var(--white);
}


.product-button {
    margin: 0px;
    padding: 10px;
    text-align: center;
}







.grid-1  {    grid-template-columns: repeat(1, 1fr);}
.grid-2  {    grid-template-columns: repeat(2, 1fr);}
.grid-3  {    grid-template-columns: repeat(3, 1fr);}
.grid-4  {    grid-template-columns: repeat(4, 1fr);}
.grid-5  {    grid-template-columns: repeat(5, 1fr);}
.grid-6  {    grid-template-columns: repeat(6, 1fr);}
.grid-7  {    grid-template-columns: repeat(7, 1fr);}
.grid-8  {    grid-template-columns: repeat(8, 1fr);}
.grid-9  {    grid-template-columns: repeat(9, 1fr);}
.grid-10 {    grid-template-columns: repeat(10, 1fr);}
.grid-11 {    grid-template-columns: repeat(11, 1fr);}
.grid-12 {    grid-template-columns: repeat(12, 1fr);}



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

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

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


/* --------------------------------------- */
/* Smartphone */
/* --------------------------------------- */
@media (max-width: 767px) {
    .grid {
        margin: 20px;
    }


    .grid-xs-1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

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

    .grid-xs-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .grid-xs-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .grid-xs-5 {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .grid-xs-6 {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    .grid-xs-7 {
        grid-template-columns: repeat(7, 1fr) !important;
    }
    .grid-xs-8 {
        grid-template-columns: repeat(8, 1fr) !important;
    }
    .grid-xs-9 {
        grid-template-columns: repeat(9, 1fr) !important;
    }
    .grid-xs-10 {
        grid-template-columns: repeat(10, 1fr) !important;
    }
    .grid-xs-11 {
        grid-template-columns: repeat(11, 1fr) !important;
    }
    .grid-xs-12 {
        grid-template-columns: repeat(12, 1fr) !important;
    }
}

/* --------------------------------------- */
/* Tablet */
/* --------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .grid {
        margin: 15px;
    }

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

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

    .grid-xs-3 {
        grid-template-columns: repeat(3, 1fr) ;
    }

    .grid-xs-4 {
        grid-template-columns: repeat(4, 1fr) ;
    }

    .grid-xs-5 {
        grid-template-columns: repeat(5, 1fr) ;
    }

    .grid-xs-6 {
        grid-template-columns: repeat(6, 1fr) ;
    }

    .grid-xs-7 {
        grid-template-columns: repeat(7, 1fr) ;
    }

    .grid-xs-8 {
        grid-template-columns: repeat(8, 1fr) ;
    }

    .grid-xs-9 {
        grid-template-columns: repeat(9, 1fr) ;
    }

    .grid-xs-10 {
        grid-template-columns: repeat(10, 1fr) ;
    }

    .grid-xs-11 {
        grid-template-columns: repeat(11, 1fr) ;
    }

    .grid-xs-12 {
        grid-template-columns: repeat(12, 1fr) ;
    }


    .grid-sm-1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

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

    .grid-sm-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .grid-sm-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .grid-sm-5 {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .grid-sm-6 {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .grid-sm-7 {
        grid-template-columns: repeat(7, 1fr) !important;
    }

    .grid-sm-8 {
        grid-template-columns: repeat(8, 1fr) !important;
    }

    .grid-sm-9 {
        grid-template-columns: repeat(9, 1fr) !important;
    }

    .grid-sm-10 {
        grid-template-columns: repeat(10, 1fr) !important;
    }

    .grid-sm-11 {
        grid-template-columns: repeat(11, 1fr) !important;
    }

    .grid-sm-12 {
        grid-template-columns: repeat(12, 1fr) !important;
    }
}

/* --------------------------------------- */
/* Desktop Small */
/* --------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
    .product-title {
        padding: 10px 20px 5px 20px;
    }
    .product-text {
        padding: 5px 20px 5px 20px;
    }

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

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

    .grid-xs-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-xs-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-xs-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-xs-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-xs-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .grid-xs-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid-xs-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .grid-xs-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .grid-xs-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .grid-xs-12 {
        grid-template-columns: repeat(12, 1fr);
    }


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

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

    .grid-sm-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-sm-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-sm-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-sm-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-sm-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .grid-sm-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid-sm-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .grid-sm-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .grid-sm-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .grid-sm-12 {
        grid-template-columns: repeat(12, 1fr);
    }


    .grid-md-1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

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

    .grid-md-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .grid-md-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .grid-md-5 {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .grid-md-6 {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .grid-md-7 {
        grid-template-columns: repeat(7, 1fr) !important;
    }

    .grid-md-8 {
        grid-template-columns: repeat(8, 1fr) !important;
    }

    .grid-md-9 {
        grid-template-columns: repeat(9, 1fr) !important;
    }

    .grid-md-10 {
        grid-template-columns: repeat(10, 1fr) !important;
    }

    .grid-md-11 {
        grid-template-columns: repeat(11, 1fr) !important;
    }

    .grid-md-12 {
        grid-template-columns: repeat(12, 1fr) !important;
    }
}

/* --------------------------------------- */
/* Desktop Big */
/* --------------------------------------- */
@media (min-width: 1200px) {
     
    .product-title { 
        padding: 10px 20px 5px 20px;
    }

    .product-text {
        padding: 5px 20px 5px 20px;
    }


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

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

    .grid-xs-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-xs-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-xs-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-xs-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-xs-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .grid-xs-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid-xs-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .grid-xs-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .grid-xs-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .grid-xs-12 {
        grid-template-columns: repeat(12, 1fr);
    }


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

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

    .grid-sm-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-sm-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-sm-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-sm-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-sm-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .grid-sm-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid-sm-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .grid-sm-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .grid-sm-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .grid-sm-12 {
        grid-template-columns: repeat(12, 1fr);
    }



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

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

    .grid-md-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-md-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-md-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-md-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-md-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .grid-md-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid-md-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .grid-md-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .grid-md-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .grid-md-12 {
        grid-template-columns: repeat(12, 1fr);
    }



    .grid-lg-1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

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

    .grid-lg-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .grid-lg-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .grid-lg-5 {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .grid-lg-6 {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .grid-lg-7 {
        grid-template-columns: repeat(7, 1fr) !important;
    }

    .grid-lg-8 {
        grid-template-columns: repeat(8, 1fr) !important;
    }

    .grid-lg-9 {
        grid-template-columns: repeat(9, 1fr) !important;
    }

    .grid-lg-10 {
        grid-template-columns: repeat(10, 1fr) !important;
    }

    .grid-lg-11 {
        grid-template-columns: repeat(11, 1fr) !important;
    }

    .grid-lg-12 {
        grid-template-columns: repeat(12, 1fr) !important;
    }
}