body{
    margin:0;
    background:#111;
    color:#fff;
    font-family:Arial,sans-serif;
}

.container{
    max-width:1100px;
    margin:auto;
    padding:15px;
}

h1,h2{
    color:#F28C28;
    text-align:center;
}

.status-box{
    background:#1d1d1d;
    border:1px solid #333;
    border-radius:12px;
    padding:12px;
    text-align:center;
    font-weight:bold;
    margin-bottom:15px;
}

.info-box{
    background:#1a1a1a;
    border:1px solid #333;
    border-radius:12px;
    padding:12px;
    text-align:center;
    color:#ccc;
    margin-bottom:20px;
}

.categories{
    display:flex;
    gap:10px;
    overflow-x:auto;
    margin-bottom:20px;
}

.categories button{
    white-space:nowrap;
}

.products{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:15px;
}

.product{
    background:#1d1d1d;
    border:1px solid #333;
    border-radius:12px;
    padding:15px;
}

.product h3{
    margin:0;
    color:#F28C28;
}

.product .price{
    margin:10px 0;
    color:#ccc;
}

button{
    border:none;
    border-radius:8px;
    padding:12px;
    font-weight:bold;
    cursor:pointer;
}

.orange{
    background:#F28C28;
    color:#000;
}

.green{
    background:#28a745;
    color:#fff;
}

.gray{
    background:#555;
    color:#fff;
}

.cart,
.checkout{
    background:#1a1a1a;
    border:1px solid #333;
    border-radius:12px;
    padding:15px;
    margin-top:20px;
}

.cart-item{
    border-bottom:1px solid #333;
    padding:10px 0;
}

.total{
    text-align:center;
    font-size:1.4rem;
    color:#F28C28;
    font-weight:bold;
    margin-top:15px;
}

input,
textarea,
select{
    width:100%;
    box-sizing:border-box;
    margin:8px 0 15px;
    padding:12px;
    border:none;
    border-radius:8px;
    font-size:1rem;
}

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.8);
    justify-content:center;
    align-items:center;
    z-index:999;
}

.modal-box{
    background:#222;
    border-radius:15px;
    padding:20px;
    width:95%;
    max-width:600px;
    max-height:90vh;
    overflow:auto;
}

@media(max-width:700px){

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

}
.brand-box{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:15px 0 10px;
}

.brand-box img{
    width:140px;
    height:140px;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 0 15px rgba(0,0,0,.35);
}

@media (max-width:600px){
    .brand-box img{
        width:120px;
        height:120px;
    }
}

.hidden{
    display:none !important;
}

.option-section{
    margin-top:18px;
    margin-bottom:22px;
    clear:both;
}

.option-section-title{
    color:#F28C28;
    font-weight:bold;
    margin-bottom:10px;
}

.option-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 18px;
    direction:ltr;
}

.option-grid label,
.recommendation-option,
.extra-line{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    direction:ltr;
    text-align:left;
    margin:0;
    cursor:pointer;
    line-height:1.25;
}

.option-grid input[type="checkbox"],
.recommendation-option input[type="checkbox"],
.extra-line input[type="checkbox"]{
    width:20px;
    height:20px;
    min-width:20px;
    margin:0;
    padding:0;
    flex:0 0 20px;
    accent-color:#F28C28;
    cursor:pointer;
}

.recommendation-option{
    margin-bottom:12px;
    color:#fff;
    font-weight:bold;
}

.options-disabled{
    opacity:.45;
}

@media (max-width:480px){
    .option-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px 12px;
    }

    .option-grid label{
        font-size:.95rem;
    }
}

@media (max-width:350px){
    .option-grid{
        grid-template-columns:1fr;
    }
}


/* ===== Mobile checkbox layout fix v11 ===== */
@media (max-width:700px){
    .modal-box{
        width:calc(100% - 20px) !important;
        max-width:none !important;
        padding:16px !important;
    }

    .option-grid{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px 14px !important;
        width:100% !important;
        direction:ltr !important;
    }

    .option-grid label,
    .recommendation-option,
    .extra-line{
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:8px !important;
        width:auto !important;
        margin:0 !important;
        padding:0 !important;
        direction:ltr !important;
        text-align:left !important;
        line-height:1.25 !important;
    }

    .option-grid label span,
    .recommendation-option span,
    .extra-line span{
        display:inline !important;
        width:auto !important;
        margin:0 !important;
        padding:0 !important;
    }

    .option-grid input[type="checkbox"],
    .recommendation-option input[type="checkbox"],
    .extra-line input[type="checkbox"]{
        display:inline-block !important;
        position:static !important;
        float:none !important;
        width:20px !important;
        height:20px !important;
        min-width:20px !important;
        max-width:20px !important;
        margin:0 !important;
        padding:0 !important;
        flex:0 0 20px !important;
    }

    .recommendation-option{
        margin-bottom:14px !important;
    }
}

@media (max-width:360px){
    .option-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:10px 8px !important;
    }

    .option-grid label{
        font-size:.88rem !important;
    }
}