/* GLOBAL RESPONSIVE THEME CSS (POLISHED THEME) */

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* PRODUCT GRID */
.product-card { display: flex; flex-direction: column; border-radius: 6px; }
.product-card img { height: 160px; object-fit: contain; }
@media(max-width:768px){ .product-card img { height: 110px; } }

.product-card .title {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* HEADER RESPONSIVE FIX */
@media(max-width:992px){
    .amz-header .container-fluid { flex-direction:column; height:auto !important; padding:10px; gap:8px; }
    .amz-search { width:100%; }
    .amz-subnav { overflow-x:auto; white-space:nowrap; padding-left:8px; }
    .amz-mega { position:fixed !important; left:-260px; top:0; width:260px; height:100vh; background:#fff; overflow-y:auto; transition:left .3s; z-index:99999; }
    .amz-all.active .amz-mega { left:0; }
}

/* CATEGORY MENU */
@media(max-width:992px){
    .submenu { display:none !important; background:#fafafa; padding-left:15px; }
    .submenu-open > .submenu { display:block !important; }
    .submenu-toggle { font-size:18px; cursor:pointer; padding:5px; }
}

/* BANNER */
.banner-image { height:380px; object-fit:cover; }
@media(max-width:768px){ .banner-image { height:180px; } }

/* ===================== THEME POLISH PACK ===================== */

/* Typography Polish */
body {
    font-family: 'Public Sans', sans-serif;
    line-height: 1.55;
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin-bottom: .5rem;
}

/* Layout Polish */
.section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* Card Polish */
.card {
    border-radius: 10px !important;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-3px);
    transition: .2s;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Button Polish */
.btn-primary {
    background:#e83e10 !important;
    border:none;
    border-radius:6px;
    padding:6px 14px;
}

.btn-primary:hover {
    background:#c7320c !important;
}

/* Category Strip Polish */
.category-card img {
    height: 90px;
    object-fit: contain;
}

.category-card .card {
    border-radius: 12px;
    text-align:center;
}

/* Header Polish */
.amz-header img {
    border-radius: 4px;
}

/* Footer Polish */
footer {
    background: #222;
    color:#fff;
    padding: 40px 0;
    margin-top:40px;
}

footer a { color:#ccc; }
footer a:hover { color:white; }

@media(max-width:768px){
    footer .col-md-3 { text-align:center; margin-bottom:20px; }
}

/* Product Grid Cleanup */
.row.g-3 > [class*='col-'],
.row.g-2 > [class*='col-'] {
    padding:6px;
}

/* Shadows + smooth polish */
.card, .amz-header, .amz-subnav {
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}


<!-- ================= DARK MODE SYSTEM ================= -->
<style>
 :root {
     --bg:#ffffff;
     --text:#222;
     --card:#fff;
     --header:#e83e10;
     --nav:#3A3A3A;
 }
body.dark-mode {
    --bg:#1b1b1b;
    --text:#e6e6e6;
    --card:#262626;
    --header:#111;
    --nav:#000;
}
body{background:var(--bg);color:var(--text);}
.card{background:var(--card) !important;}
.amz-header{background:var(--header) !important;}
.amz-subnav{background:var(--nav) !important;}
.dark-toggle{cursor:pointer;padding:6px 10px;border-radius:4px;background:#fff;color:#000;font-size:14px;}
</style>

<script>
// Dark Mode Toggle
if(localStorage.getItem('darkMode')==='on'){document.body.classList.add('dark-mode');}
function toggleDark(){document.body.classList.toggle('dark-mode');localStorage.setItem('darkMode',document.body.classList.contains('dark-mode')?'on':'off');}
</script>

<!-- BUTTON -->
<div style="position:fixed;right:10px;bottom:80px;z-index:9999;">
<button onclick="toggleDark()" class="dark-toggle">🌙 Dark Mode</button>
</div>


<!-- ================= MOBILE BOTTOM NAV BAR ================= -->
<style>
 .mobile-bottom-bar{
     position:fixed;bottom:0;left:0;width:100%;height:55px;
     background:#fff;display:flex;justify-content:space-around;
     border-top:1px solid #ddd;z-index:9999;padding-top:6px;
 }
.mobile-bottom-bar a{
    text-align:center;font-size:12px;color:#333;text-decoration:none;
}
.mobile-bottom-bar i{font-size:20px;display:block;margin-bottom:2px;}
@media(min-width:768px){.mobile-bottom-bar{display:none;}}
</style>

<div class="mobile-bottom-bar">
<a href="/" ><i class="la la-home"></i>Home</a>
<a href="{{ route('website.categories.all') }}" ><i class="la la-list"></i>Categories</a>
<a href="{{ route('website.cart.view') }}" ><i class="la la-shopping-cart"></i>Cart</a>
<a href="{{ route('website.account.dashboard') }}" ><i class="la la-user"></i>Account</a>
</div>


<!-- ================= ADVANCED MEGA MENU (AMAZON STYLE) ================= -->
<style>
 .advanced-mega{
     display:none;position:absolute;top:100%;left:0;width:820px;
     background:#fff;border:1px solid #ddd;
     box-shadow:0 8px 20px rgba(0,0,0,0.15);
     padding:20px;z-index:9999;
 }
.amz-all:hover .advanced-mega{display:flex;gap:30px;}
.advanced-mega .col{
    width:33%;
}
.advanced-mega h4{
    font-size:14px;font-weight:700;margin-bottom:10px;
}
.advanced-mega a{
    display:block;font-size:13px;color:#333;margin-bottom:6px;
}
.advanced-mega a:hover{color:#e83e10;}

@media(max-width:992px){.advanced-mega{display:none!important;}}
</style>