:root{--o:#fc4100;--ink:#282321;--muted:#766e69;--line:#eee5e0;--bg:#fff8f4}
*{box-sizing:border-box}
body{margin:0;font-family:"Noto Sans Bengali","Hind Siliguri",Arial,sans-serif;color:var(--ink);line-height:1.6}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
.wrap{width:min(1160px,92%);margin:auto}
.top{background:#282321;color:#fff;padding:8px;text-align:center;font-size:13px}
.head{display:flex;align-items:center;gap:24px;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;color:var(--ink)}
/* Brand mark is only the first span; do not apply logo styles to the brand name. */
.brand>span:first-child{display:grid;place-items:center;background:var(--o);color:#fff;border-radius:12px;width:43px;height:43px;flex:0 0 43px;font-size:27px}
.brand>span:last-child{display:block;min-width:0;width:auto;height:auto;flex:1 1 auto;background:transparent;color:var(--ink);font-size:inherit;line-height:1.4;overflow-wrap:normal;word-break:normal}
.brand small{display:block;width:auto;height:auto;background:transparent;color:var(--muted);font-size:10px;font-weight:400;line-height:1.5}
.search{display:flex;flex:1}
.search input{flex:1;min-width:0;border:1px solid #ddd;padding:11px;border-radius:8px 0 0 8px}
.search button{border:0;background:var(--o);color:white;padding:0 18px;border-radius:0 8px 8px 0}
.cart{color:var(--o);font-weight:bold;white-space:nowrap}
nav{border-block:1px solid var(--line)}
.nav{display:flex;gap:25px;padding:12px 0;overflow:auto;white-space:nowrap}
.hero{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(110deg,#fff0e7,#fffaf6);border-radius:22px;padding:48px 6%;margin:28px 0 38px;min-height:300px}
.hero small{color:var(--o);letter-spacing:1.5px}
.hero h1{font-size:clamp(30px,4vw,48px);line-height:1.25}
.hero em{color:var(--o);font-style:normal}
.hero p{color:var(--muted)}
.heroicon{background:var(--o);color:white;width:220px;height:220px;flex-shrink:0;border-radius:48%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:35px;box-shadow:0 20px 40px #fc410033}
.heroicon strong{text-align:center;font-size:27px;line-height:1.1}
.btn{display:inline-block;background:var(--o);color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:bold;cursor:pointer;text-align:center}
.btn:hover{background:#dd3800}
.btn:disabled{background:#aaa}
.full{width:100%}
.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:20px 0 55px}
.product{border:1px solid var(--line);border-radius:13px;overflow:hidden}
.photo{height:215px;background:#fff2ea;display:grid;place-items:center;overflow:hidden;color:#ffb18e;font-size:65px}
.photo img{width:100%;height:100%;object-fit:cover}
.pad{padding:14px}
.pad small{color:var(--muted)}
.pad h3{font-size:16px;min-height:48px;margin:5px 0}
.price{display:block;color:var(--o);font-size:21px;margin:10px 0}
.empty{padding:35px;text-align:center;background:var(--bg);border-radius:12px;margin:20px 0}
.page{padding-top:28px;padding-bottom:55px}
.page h1{font-size:29px}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:35px}
.detailphoto{min-height:350px;border-radius:15px;background:var(--bg);display:grid;place-items:center;font-size:80px;color:#ffb18e;overflow:hidden}
.detailphoto img{width:100%;max-height:560px;object-fit:contain}
.detail label,.panel label,.auth label{display:grid;gap:6px;margin:12px 0}
.detail input,.panel input,.panel textarea,.panel select,.auth input{width:100%;border:1px solid #ddd;border-radius:7px;padding:10px}
.detail input{max-width:100px}
.panel{padding:22px;border:1px solid var(--line);border-radius:13px}
.checkout{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start}
.tablewrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:620px;margin:20px 0}
th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--bg)}
.qty{width:70px;padding:8px}
.link{background:none;border:0;color:var(--o);text-decoration:underline;cursor:pointer}
.summary{margin:20px 0 0 auto;max-width:400px;padding:20px;border:1px solid var(--line);border-radius:12px}
.error{color:#a22;background:#fff0ee;padding:10px}
.success{max-width:650px;text-align:center;margin:60px auto;padding:40px;border:1px solid var(--line);border-radius:16px}
.auth{max-width:430px;margin:55px auto;padding:25px;border:1px solid var(--line);border-radius:15px;width:92%}
footer{margin-top:45px;background:#282321;color:#fff;padding:30px 0;font-size:14px}
@media(max-width:850px){.head{flex-wrap:wrap}.search{order:3;flex-basis:100%}.products{grid-template-columns:repeat(3,minmax(0,1fr))}.heroicon{width:160px;height:160px}.checkout{grid-template-columns:1fr}}
@media(max-width:600px){.brand{font-size:18px}.hero{padding:25px 6%;min-height:220px}.hero h1{font-size:28px}.heroicon{width:95px;height:110px;font-size:22px}.heroicon strong{font-size:17px}.hero p{font-size:13px}.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.photo{height:150px}.pad{padding:10px}.pad h3{font-size:14px}.pad .btn{font-size:12px;padding:9px 4px}.detail{grid-template-columns:1fr}.detailphoto{min-height:250px}.checkout{grid-template-columns:1fr}}
@media(max-width:380px){.brand{font-size:15px;gap:7px}.brand>span:first-child{width:36px;height:36px;flex-basis:36px;font-size:22px}.brand small{font-size:9px}}
/* Shining Plus BD - Premium Menu Hover Effect */
nav {
    position: relative;
    z-index: 1000;
    background: #fff;
}

.nav {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.nav a {
    display: inline-block;
    position: relative;
    padding: 8px 12px;
    border-radius: 7px;
    color: var(--ink);
    font-weight: 500;
    transition: color 0.25s ease,
                background-color 0.25s ease,
                transform 0.25s ease;
}

/* Mouse hover */
.nav a:hover {
    color: var(--o);
    background: #fff0e8;
    transform: translateY(-2px);
}

/* Orange underline animation */
.nav a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 2px;
    background: var(--o);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.nav a:hover::after {
    transform: scaleX(1);
}

/* Keyboard accessibility */
.nav a:focus-visible {
    outline: 2px solid var(--o);
    outline-offset: 2px;
}

/* Mobile: keep touch navigation comfortable */
@media (max-width: 600px) {
    .nav {
        gap: 10px;
    }

    .nav a {
        padding: 8px 10px;
    }

    .nav a:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav a,
    .nav a::after {
        transition: none;
    }
}

.logo-brand {
    display: inline-flex;
    align-items: center;
    max-width: 150px;
    overflow: hidden;
}

.site-logo {
    display: block;
    width: 130px;
    max-width: 100%;
    height: 45px;
    object-fit: contain;
}

@media (max-width: 600px) {
    .logo-brand {
        max-width: 110px;
    }

    .site-logo {
        width: 100px;
        height: 38px;
    }
}

.logo-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    max-width: 100%;
}

.site-logo {
    display: block;
    width: 65px;
    height: 45px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-name {
    color: #FF4E00;
    font-size: 21px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .logo-brand {
        gap: 6px;
    }

    .site-logo {
        width: 42px;
        height: 36px;
    }

    .brand-name {
        font-size: 15px;
    }
}

/* Shining Plus BD - Inferno Orange Brand Name */
header.wrap.head a.logo-brand span.brand-name {
    color: #FF4E00 !important;
    font-size: 21px;
    font-weight: 700;
    white-space: nowrap;
}

/* Mobile size */
@media (max-width: 600px) {
    header.wrap.head a.logo-brand span.brand-name {
        font-size: 15px;
    }
}

header.wrap.head a.logo-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    text-decoration: none;
}

header.wrap.head a.logo-brand img.site-logo {
    width: 55px;
    height: 45px;
    object-fit: contain;
    flex-shrink: 0;
}

header.wrap.head a.logo-brand span.brand-name {
    color: #FF4E00 !important;
    font-size: 21px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 600px) {
    header.wrap.head a.logo-brand img.site-logo {
        width: 40px;
        height: 36px;
    }

    header.wrap.head a.logo-brand span.brand-name {
        font-size: 15px;
    }
}