/* ---- header --------------------------------------------------------- */
.header{
    position:sticky; top:0; z-index:100;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    padding:12px 16px;
    background:rgba(14,13,12,.92); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
}
.logo{ width:56px; height:56px; object-fit:contain; justify-self:center; }
.lang-btn{
    justify-self:end;
    background:var(--surface-2); border:1px solid var(--line);
    padding:8px 14px; border-radius:999px; font-weight:700;
}

/* ---- category nav --------------------------------------------------- */
.categories{
    display:flex; gap:8px; overflow-x:auto;
    padding:12px 16px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.categories::-webkit-scrollbar{ display:none; }
.category-btn{
    background:var(--surface-2); border:1px solid var(--line);
    border-radius:999px; padding:9px 16px; white-space:nowrap; font-weight:600;
}

/* ---- products ------------------------------------------------------- */
#products{ display:flex; flex-direction:column; gap:28px; padding:6px 0 150px; }
.category-section{ padding:0 16px; }
.category-title{
    font-size:22px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
}
.category-title::after{
    content:""; display:block; width:42px; height:3px; margin-top:6px;
    background:linear-gradient(90deg,var(--ember),var(--ember-2)); border-radius:2px;
}

.product-grid{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-top:14px; }
.product-card{
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden;
    display:flex; flex-direction:column;
}
.product-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.product-info{ padding:14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-name{ font-size:16px; font-weight:700; }
.old-price{ text-decoration:line-through; color:var(--muted); font-size:13px; }
.price{ color:var(--ember); font-size:20px; font-weight:800; }
.product-controls{ margin-top:auto; padding-top:8px; }

.add-btn{
    width:100%; border:none; border-radius:var(--radius-sm);
    background:linear-gradient(135deg,var(--ember),var(--ember-2)); color:#1a0f06;
    padding:11px; font-weight:800; letter-spacing:.3px;
}
.qty-controls{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.qty-controls button{
    width:42px; height:42px; border:none; border-radius:12px;
    background:var(--surface-2); color:var(--text); font-size:20px; font-weight:700;
}
.qty-controls span{ font-weight:800; font-size:18px; }

/* ---- cart bar ------------------------------------------------------- */
.cart-bar{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
    background:linear-gradient(135deg,var(--ember),var(--ember-2)); color:#1a0f06;
    border-radius:var(--radius); padding:15px 18px;
    display:flex; align-items:center; justify-content:space-between;
    box-shadow:0 12px 30px rgba(255,90,31,.35);
}
#cartSummary{ font-weight:800; }
.cart-bar button{
    border:none; background:#1a0f06; color:var(--text);
    padding:10px 18px; border-radius:12px; font-weight:700;
}

/* ---- checkout ------------------------------------------------------- */
#orderItems{ margin-bottom:6px; }
.summary-line{ padding:6px 0; border-bottom:1px solid var(--line); }
.modal-content input, .modal-content textarea{ margin-top:10px; }
.location-row{ display:flex; gap:8px; margin-top:10px; }
.location-row input{ flex:1; margin-top:0; }
#gpsBtn{
    width:54px; flex:0 0 auto; border:1px solid var(--line);
    border-radius:var(--radius-sm); background:var(--surface-2);
}
#gpsBtn.captured{ background:var(--ok); border-color:transparent; }
#placeOrderBtn{
    width:100%; margin-top:16px; border:none; border-radius:var(--radius-sm);
    background:linear-gradient(135deg,var(--ember),var(--ember-2)); color:#1a0f06;
    padding:15px; font-weight:800; letter-spacing:.3px;
}

/* ---- floating order tracker (bottom-right) -------------------------- */
.tracker{ position:fixed; right:16px; bottom:96px; z-index:130; }
.tracker-bubble{
    width:74px; height:74px; border-radius:50%; border:none; padding:7px;
    background:var(--surface); display:grid; place-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 0 0 1px var(--line);
}
.tracker .ring{ width:60px; height:60px; }
.tracker.is-done .ring-fg{ stroke:var(--ok); filter:drop-shadow(0 0 4px rgba(52,168,90,.6)); }
.tracker.is-declined .ring-fg{ stroke:var(--danger); filter:none; }

.tracker-popover{
    position:absolute; right:0; bottom:86px; width:240px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:14px; box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.tracker-popover .pop-title{ font-weight:800; margin-bottom:2px; }
.tracker-popover .pop-sub{ color:var(--muted); font-size:14px; }
.tracker-popover .dismiss{ margin-top:12px; width:100%; }

/* ---- responsive: tablet & up --------------------------------------- */
@media (min-width:700px){
    .product-grid{ grid-template-columns:repeat(3,1fr); }
    .logo{ width:64px; height:64px; }
}
@media (min-width:1000px){
    .product-grid{ grid-template-columns:repeat(4,1fr); }
    .category-section{ max-width:1120px; margin-inline:auto; }
    .categories{ max-width:1120px; margin-inline:auto; }
}