/* =========================================================
   COMMON / NON-HOMEPAGE STYLES
   Global, header, modal, product details, shop, reviews, etc.
   ========================================================= */

/*==============================
 GOOGLE FONT
==============================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==============================
 ROOT
==============================*/
:root{
    --primary:#2563eb;
    --secondary:#4f46e5;
    --success:#10b981;
    --danger:#ef4444;
    --warning:#f59e0b;
    --dark:#0f172a;
    --text:#475569;
    --white:#ffffff;
    --bg:#f3f7ff;
    --shadow:0 20px 50px rgba(0,0,0,.08);
    --radius:20px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:var(--bg);
    color:var(--dark);
    overflow-x:hidden;
    width: 100%;
}

/* মূল সাইট স্ট্রাকচার - ফাঁকা জায়গা দূর করার জন্য অটো হাইট করা হয়েছে */
.site-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    background: var(--white);
    box-shadow: 0 0 40px rgba(0,0,0,0.06);
    position: relative;
    height: auto;
}

img{
    display:block;
    width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    border:none;
    cursor:pointer;
    font-family:inherit;
}

/*==============================
 HEADER
==============================*/
.header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    padding:18px 5%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(255,255,255,.90);
    backdrop-filter:blur(18px);
    box-shadow:0 10px 35px rgba(0,0,0,.05);
}

/* Login Button Design */
.login-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(45deg, #2563eb, #4f46e5);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
    transition: all 0.35s ease;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

.login-btn i {
    font-size: 15px;
}


.logo{
    font-size:32px;
    font-weight:800;
    color:#111827;
}

.logo span{
    color:var(--primary);
}

.navbar{
    display:flex;
    gap:30px;
    align-items:center;
}

.navbar a{
    font-size:16px;
    font-weight:600;
    position:relative;
    transition:.35s;
}

.navbar a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:3px;
    background:#2563eb;
    border-radius:50px;
    transition:.35s;
}

.navbar a:hover{
    color:#2563eb;
}

.navbar a:hover::after,
.navbar .active::after{
    width:100%;
}

.header-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.search-box{
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#fff;
    border-radius:50px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.search-box input{
    width:220px;
    height:46px;
    padding:0 18px;
    border:none;
    outline:none;
    font-size:15px;
}

.search-box button{
    width:50px;
    height:46px;
    background:linear-gradient(45deg, #2563eb, #4f46e5);
    color:#fff;
    font-size:16px;
}

.header-icons{
    display:flex;
    align-items:center;
    gap:20px;
    font-size:20px;
}

.header-icons i{
    cursor:pointer;
    transition:.35s;
}

.cart{
    position:relative;
}

.cart span{
    position:absolute;
    top:-8px;
    right:-8px;
    width:20px;
    height:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    font-weight:700;
}

/*==============================
      LOGIN MODAL POPUP
==============================*/
.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.login-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.login-modal-box {
    background: #ffffff;
    padding: 35px 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 430px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    transform: scale(0.7);
    transition: transform 0.3s ease;
}

.login-modal-overlay.active .login-modal-box {
    transform: scale(1);
}

.close-modal-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal-btn:hover {
    color: #ef4444;
}

.modal-icon {
    font-size: 50px;
    color: #2563eb;
    margin-bottom: 15px;
}

.login-modal-box h2 {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.login-modal-box p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 25px;
}

.modal-ok-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(45deg, #2563eb, #4f46e5);
    color: #fff;
    font-weight: 600;
    border-radius: 30px;
    transition: background 0.3s, transform 0.2s;
}

.modal-ok-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}
/* ==============================
   LARAVEL FRONTEND ADDITIONS
============================== */
main { min-height: 60vh; }

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef4ff;
    color: var(--primary);
    font-size: 20px;
}

.header-icon-link,
.cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
}

.hero-image-placeholder,
.product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #94a3b8;
    background: linear-gradient(135deg, #f8fafc, #eef4ff);
}

.hero-image-placeholder i { font-size: 64px; }
.product-image-placeholder i { font-size: 42px; }

.slider .slide { color: inherit; }
.slider-dots button { border: 0; padding: 0; }

.title-row > div p {
    margin-top: 6px;
    color: #64748b;
    font-size: 14px;
}

.product-category-name {
    display: block;
    margin-bottom: 7px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.product-card h3 a:hover { color: var(--primary); }

.product-card-actions {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 8px;
}

.details-btn,
.cart-btn {
    min-height: 42px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
}

.details-btn {
    color: var(--primary);
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.details-btn:hover { background: #dbeafe; }
.cart-btn:disabled { opacity: .55; cursor: not-allowed; }

.empty-home-state {
    grid-column: 1 / -1;
    padding: 45px 20px;
    text-align: center;
    color: #64748b;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #f8fafc;
}

.empty-home-state i {
    margin-bottom: 12px;
    color: #94a3b8;
    font-size: 42px;
}

.empty-home-state h3 { margin-bottom: 6px; color: var(--dark); }

.service-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 40px 5%;
    background: #fff;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #f8fafc;
}

.service-item > i {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
}

.service-item h3 { margin-bottom: 4px; font-size: 14px; }
.service-item p { color: #64748b; font-size: 11px; line-height: 1.5; }

.footer {
    color: #cbd5e1;
    background: #0f172a;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 44px;
    padding: 62px 5% 44px;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 15px;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
}

.footer-logo span { color: #60a5fa; }
.footer-brand > p { max-width: 380px; font-size: 13px; line-height: 1.8; }

.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.footer-socials a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.08);
    transition: .3s;
}

.footer-socials a:hover {
    transform: translateY(-3px);
    background: var(--primary);
}

.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-column h3 { margin-bottom: 8px; color: #fff; font-size: 16px; }
.footer-column a, .footer-column p { color: #94a3b8; font-size: 13px; line-height: 1.7; }
.footer-column a:hover { color: #fff; }
.footer-contact p { display: flex; gap: 9px; align-items: flex-start; }
.footer-contact i { margin-top: 5px; color: #60a5fa; }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 5%;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #94a3b8;
    font-size: 12px;
}

.footer-bottom div { display: flex; align-items: center; gap: 10px; }
.footer-bottom i { color: #fff; font-size: 24px; }

.top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    box-shadow: 0 12px 30px rgba(37,99,235,.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: .3s;
}

.top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    z-index: 10001;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.toast {
    position: fixed;
    right: 24px;
    bottom: 82px;
    z-index: 10002;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    border-radius: 12px;
    color: #fff;
    background: #0f172a;
    box-shadow: 0 16px 35px rgba(15,23,42,.22);
    opacity: 0;
    transform: translateY(12px);
    transition: .3s;
}
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
    .header { flex-wrap: wrap; gap: 16px; }
    .menu-toggle { display: inline-flex; order: 2; }
    .header-right { order: 3; width: 100%; justify-content: space-between; }
    .navbar {
        position: absolute;
        top: 76px;
        left: 5%;
        right: 5%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 14px;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        background: #fff;
        box-shadow: var(--shadow);
    }
    .navbar.open { display: flex; }
    .navbar a { padding: 12px; }
    .navbar a::after { display: none; }
    .service-strip { grid-template-columns: repeat(2, 1fr); }
    .footer-main { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .header { padding: 14px 4% !important; }
    .logo { font-size: 25px; }
    .header-right { align-items: stretch; }
    .search-box { flex: 1; }
    .search-box input { width: 100%; min-width: 0; }
    .header-icons { gap: 12px; }
    .login-btn { padding: 8px 12px; font-size: 0; }
    .login-btn i { font-size: 16px; }
    .product-card-actions { grid-template-columns: 1fr; }
    .service-strip { grid-template-columns: 1fr; }
    .footer-main { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 520px) {
    .header-right { flex-direction: column; }
    .header-icons { justify-content: center; }
    .hero { padding: 22px 4%; }
    .hero-box { border-radius: 22px; }
    .hero-left h1 { font-size: 34px; }
    .products, .categories { padding-left: 4%; padding-right: 4%; }
    .title-row h2, .section-heading h2 { font-size: 28px; }
}


/* এই code public/frontend/css/style.css-এর একদম শেষে যোগ করুন */

.header {
    padding: 0;
}

.header-container {
    width: min(1300px, 92%);
    min-height: 82px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.mobile-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eef4ff;
    color: var(--primary);
    font-size: 20px;
}

.footer-container,
.footer-bottom {
    width: min(1300px, 90%);
    margin-left: auto;
    margin-right: auto;
}

.footer-container {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
}

.footer-brand {
    max-width: 340px;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 11px;
}

.footer-col a:hover {
    color: #60a5fa;
}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6;
}

.footer-contact-list i {
    margin-top: 4px;
    color: #60a5fa;
}

.footer-bottom {
    padding-top: 25px;
    border-top: 1px solid rgba(148, 163, 184, .2);
    text-align: center;
}

.language-dropdown {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 10px;
}

.language-dropdown select {
    border: 0;
    outline: none;
    background: transparent;
    color: #cbd5e1;
    appearance: none;
}

.login-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.login-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.login-modal-box {
    position: relative;
    width: min(100%, 410px);
    padding: 36px 30px 30px;
    border-radius: 20px;
    background: #fff;
    text-align: center;
    box-shadow: 0 25px 60px rgba(15, 23, 42, .25);
    transform: translateY(20px) scale(.96);
    transition: .3s;
}

.login-modal-overlay.active .login-modal-box {
    transform: translateY(0) scale(1);
}

.close-modal-btn {
    position: absolute;
    top: 12px;
    right: 17px;
    background: transparent;
    color: #64748b;
    font-size: 27px;
}

.modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dbeafe;
    color: #2563eb;
    font-size: 28px;
}

.login-modal-box h2 {
    margin-bottom: 10px;
    color: #0f172a;
    font-size: 24px;
}

.login-modal-box p {
    margin-bottom: 24px;
    color: #64748b;
    line-height: 1.7;
}

.modal-ok-btn {
    width: 100%;
    min-height: 45px;
    border-radius: 30px;
    background: linear-gradient(45deg, #2563eb, #4f46e5);
    color: #fff;
    font-weight: 700;
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 992px) {
    .header-container {
        min-height: 72px;
        flex-wrap: wrap;
        padding: 10px 0;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: 2;
    }

    .logo {
        order: 1;
    }

    .header-right {
        order: 3;
        margin-left: auto;
    }

    .navbar {
        order: 4;
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
    }

    .navbar.mobile-open {
        display: flex;
    }

    .navbar a {
        padding: 12px;
    }

    .navbar a::after {
        display: none;
    }

    .search-box {
        display: none;
    }

    .footer-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .header-container {
        width: 94%;
    }

    .logo {
        font-size: 24px;
    }

    .header-icons {
        gap: 11px;
    }

    .wishlist-link {
        display: none;
    }

    .login-btn {
        padding: 8px 11px;
    }

    .login-btn span {
        display: none;
    }

    .footer-container {
        grid-template-columns: 1fr;
    }
}

/* FINAL RESPONSIVE LAYOUT OVERRIDES */
:root{--site-width:1120px;--section-x:32px}
body{background:#eef4ff}
.site-wrapper{width:min(var(--site-width),calc(100% - 32px));max-width:var(--site-width);margin:0 auto;background:#fff;box-shadow:0 0 35px rgba(15,23,42,.06)}
.header{width:100%;padding:0!important;background:rgba(255,255,255,.96)}
.header-container{width:min(var(--site-width),calc(100% - 32px));min-height:76px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:22px}
.logo{flex:0 0 auto;font-size:28px}.navbar{gap:24px}.navbar a{font-size:14px}.header-right{gap:14px}.search-box input{width:180px;height:40px;font-size:13px}.search-box button{width:44px;height:40px}.header-icons{gap:14px;font-size:18px}.login-btn{padding:8px 14px;font-size:13px}
.hero{width:100%;padding:32px var(--section-x) 64px}.hero-box{min-height:400px;padding:44px 40px;border-radius:24px;gap:34px}.hero-left,.hero-right{width:50%;min-width:0}.hero-left h1{font-size:clamp(38px,4.2vw,52px)}.hero-left p{max-width:430px}.slider{width:min(100%,350px);height:300px;border-radius:18px}.slide img{width:100%;height:100%;object-fit:contain;padding:8px;background:#fff}.badge1{top:16px;left:-34px}.badge2{right:-40px;bottom:22px}
.categories{width:100%;padding:64px var(--section-x)}.section-heading{margin-bottom:34px}.section-heading h2,.title-row h2{font-size:clamp(28px,3vw,36px)}.category-container{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.category-card{min-width:0;padding:20px 10px;border-radius:16px}.category-card i{font-size:32px}.category-card h3{font-size:13px}.category-card span{font-size:10px}
.products{width:100%;padding:58px var(--section-x) 64px}.title-row{margin-bottom:30px}.product-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.product-card{min-width:0;padding:14px;border-radius:16px}.product-img{height:155px;margin-bottom:12px}.product-img img{max-width:145px;max-height:145px;object-fit:contain}.product-card h3{min-height:38px;font-size:13px;line-height:1.45}.product-category-name{font-size:10px}.rating{font-size:11px}.price span{font-size:17px}.product-card-actions{grid-template-columns:.85fr 1.15fr;gap:7px}.details-btn,.cart-btn{min-height:38px;padding:7px 8px;font-size:10px}
.service-strip{width:100%;padding:34px var(--section-x);grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.service-item{min-width:0;padding:16px}
.footer{width:100%}.footer-container{width:min(var(--site-width),calc(100% - 32px));margin:0 auto;padding:54px 0 38px;display:grid;grid-template-columns:1.55fr 1fr 1fr 1.2fr;gap:42px;align-items:start}.footer-brand,.footer-col{min-width:0}.footer-col ul{list-style:none}.footer-col li{margin-bottom:10px}.footer-bottom{width:min(var(--site-width),calc(100% - 32px));margin:0 auto;padding:18px 0;border-top:1px solid rgba(148,163,184,.2)}
.shop-banner,.shop-content,.pd-container,.pd-description-section,.pd-specification-section,.related-products-section{width:min(var(--site-width),calc(100% - 32px));margin-left:auto;margin-right:auto}
@media(max-width:1100px){.header-container{flex-wrap:wrap;padding:10px 0}.mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;order:2}.logo{order:1}.header-right{order:3;margin-left:auto}.navbar{order:4;width:100%;display:none;flex-direction:column;align-items:stretch;gap:0;padding:10px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;box-shadow:0 14px 30px rgba(15,23,42,.1)}.navbar.mobile-open,.navbar.open{display:flex}.navbar a{padding:11px 12px}.navbar a::after{display:none}.search-box{display:none}.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.footer-container{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){:root{--section-x:22px}.hero-box{flex-direction:column;text-align:center;padding:38px 24px}.hero-left,.hero-right{width:100%}.hero-left p{margin-left:auto;margin-right:auto}.slider{max-width:380px}.badge1{left:0}.badge2{right:0}.category-container{grid-template-columns:repeat(3,minmax(0,1fr))}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.service-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.site-wrapper{width:min(100%,calc(100% - 16px))}.header-container{width:calc(100% - 20px)}.logo{font-size:24px}.header-icons{gap:10px}.wishlist-link{display:none}.login-btn{padding:8px 10px}.login-btn span{display:none}.hero{padding-top:18px}.hero-box{min-height:auto;border-radius:18px}.hero-left h1{font-size:34px}.slider{height:280px}.products,.categories{padding-top:48px;padding-bottom:50px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.category-container{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.product-card{padding:11px}.product-img{height:125px}.product-img img{max-width:115px;max-height:120px}.product-card-actions{grid-template-columns:1fr}.service-strip{grid-template-columns:1fr}.footer-container{grid-template-columns:1fr;gap:28px}}
@media(max-width:420px){:root{--section-x:12px}.category-card{padding:14px 5px}.category-card i{font-size:25px}.category-card h3{font-size:11px}.category-card span{display:none}.product-card{padding:9px}.product-img{height:105px}.product-card h3{min-height:34px;font-size:11px}.details-btn,.cart-btn{font-size:9px}.details-btn i,.cart-btn i{display:none}}




/* =========================================================
   FINAL HOME PAGE RESPONSIVE FIX
   ========================================================= */

body {
    background: #eef4ff;
}

/* =========================================================
   COMMON SECTION WIDTH
   ========================================================= */

.hero,
.categories,
.products,
.service-strip {
    width: min(1120px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer-container {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 54px 0 38px;
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr 1.2fr;
    gap: 42px;
    align-items: start;
}

.footer-bottom {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

/* ==================================================
   PRODUCT DETAILS PAGE
================================================== */

.product-details-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 42px 24px 70px;
}

.pd-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
}

/* ==================================================
   PRODUCT GALLERY
================================================== */

.pd-gallery {
    width: 100%;
    min-width: 0;
}

.pd-main-image {
    position: relative;
    width: 100%;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #dfe6f1;
    border-radius: 20px;
    background: #ffffff;
}

.pd-main-image > img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 22px;
    object-fit: contain;
    object-position: center;
}

.pd-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.pd-thumb-button {
    width: 76px;
    height: 76px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #dce3ee;
    border-radius: 11px;
    background: #ffffff;
    cursor: pointer;
    transition: 0.25s ease;
}

.pd-thumb-button:hover {
    border-color: #315bea;
    transform: translateY(-2px);
}

.pd-thumb-button img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 7px;
}

.pd-thumb-button:has(.pd-active) {
    border: 2px solid #315bea;
}

/* ==================================================
   PRODUCT INFORMATION
================================================== */

.pd-details {
    min-width: 0;
    padding: 8px 0;
}

.pd-category-label {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 13px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: #e8efff;
    color: #315bea;
    font-size: 13px;
    font-weight: 700;
}

.pd-details h1 {
    margin: 0 0 20px;
    color: #0f172a;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
}

.pd-meta-list {
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
}

.pd-meta-list p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.5;
}

.pd-meta-list strong {
    min-width: 65px;
    color: #0f172a;
    font-weight: 700;
}

/* ==================================================
   PRICE
================================================== */

.pd-price-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    margin: 22px 0;
}

.pd-new-price {
    color: #315bea;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.pd-old-price {
    color: #94a3b8;
    font-size: 19px;
    font-weight: 600;
    text-decoration: line-through;
}

/* ==================================================
   OFFER, STOCK AND COLOR
================================================== */

.pd-offer-banner {
    margin-bottom: 20px;
    padding: 13px 16px;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 14px;
    font-weight: 700;
}

.pd-stock-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-size: 15px;
}

.stock-available {
    color: #16a34a;
    font-weight: 700;
}

.stock-unavailable {
    color: #dc2626;
    font-weight: 700;
}

.pd-color {
    margin-top: 18px;
}

.pd-color h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 15px;
}

.pd-color-box {
    width: 74px;
    height: 74px;
    padding: 5px;
    overflow: hidden;
    border: 2px solid #315bea;
    border-radius: 10px;
    background: #ffffff;
}

.pd-color-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==================================================
   SHORT DESCRIPTION
================================================== */

.pd-short-description {
    margin-top: 20px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
}

/* ==================================================
   PRODUCT BUTTONS
================================================== */

.pd-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 28px;
}

.pd-buy-btn,
.pd-cart-btn {
    min-height: 50px;
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s ease;
}

.pd-buy-btn {
    border: 1px solid #315bea;
    background: #315bea;
    color: #ffffff;
}

.pd-buy-btn:hover {
    background: #2448c8;
    border-color: #2448c8;
    transform: translateY(-2px);
}

.pd-cart-btn {
    border: 1px solid #315bea;
    background: #ffffff;
    color: #315bea;
}

.pd-cart-btn:hover {
    background: #eef3ff;
    transform: translateY(-2px);
}

.pd-buy-btn:disabled,
.pd-cart-btn:disabled {
    border-color: #cbd5e1;
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    transform: none;
}

/* ==================================================
   DESCRIPTION AND SPECIFICATION
================================================== */

.pd-description-section,
.pd-specification-section {
    margin-top: 42px;
    padding: 28px 30px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
}

.pd-description-section h2,
.pd-specification-section h2 {
    position: relative;
    margin: 0 0 24px;
    padding-bottom: 12px;
    color: #0f172a;
    font-size: 25px;
    font-weight: 800;
}

.pd-description-section h2::after,
.pd-specification-section h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 3px;
    border-radius: 999px;
    background: #315bea;
}

.pd-description-content {
    color: #475569;
    font-size: 15px;
    line-height: 1.85;
}

.pd-description-content p {
    margin: 0 0 14px;
}

/* ==================================================
   SPECIFICATION TABLE
================================================== */

.pd-specification-table {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.pd-spec-row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    border-bottom: 1px solid #e2e8f0;
}

.pd-spec-row:last-child {
    border-bottom: 0;
}

.pd-spec-title,
.pd-spec-value {
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.6;
}

.pd-spec-title {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 700;
}

.pd-spec-value {
    border-left: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
}

/* ==================================================
   RELATED PRODUCTS
================================================== */

.related-products-section {
    margin-top: 48px;
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 992px) {
    .product-details-container {
        padding: 30px 20px 60px;
    }

    .pd-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .pd-main-image {
        height: 500px;
    }

    .pd-details {
        padding: 0;
    }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {
    .product-details-container {
        padding: 20px 14px 45px;
    }

    .pd-main-image {
        height: 370px;
        border-radius: 15px;
    }

    .pd-main-image > img {
        padding: 14px;
    }

    .pd-thumb-button {
        width: 64px;
        height: 64px;
    }

    .pd-details h1 {
        font-size: 29px;
    }

    .pd-new-price {
        font-size: 27px;
    }

    .pd-buttons {
        grid-template-columns: 1fr;
    }

    .pd-description-section,
    .pd-specification-section {
        margin-top: 28px;
        padding: 21px 17px;
        border-radius: 14px;
    }

    .pd-description-section h2,
    .pd-specification-section h2 {
        font-size: 21px;
    }

    .pd-spec-row {
        grid-template-columns: 1fr;
    }

    .pd-spec-title,
    .pd-spec-value {
        padding: 11px 13px;
    }

    .pd-spec-value {
        border-top: 1px solid #e2e8f0;
        border-left: 0;
    }
}

/* ==================================================
   PRODUCT DETAILS BACKGROUND
================================================== */

.product-details-container {
    background: #eef4ff;
    border-radius: 0;
}

/* Main product image zoom */
.pd-main-image {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.pd-main-image > img {
    cursor: zoom-in;
    transition: transform 0.15s ease;
    transform-origin: center center;
    will-change: transform;
}

/* Thumbnail */
.pd-thumb-button {
    border: 1px solid #d8e1ee;
    background: #ffffff;
}

.pd-thumb-button:hover {
    border-color: #315bea;
}

.pd-thumb-button.pd-thumb-active {
    border: 2px solid #315bea;
    box-shadow: 0 0 0 2px rgba(49, 91, 234, 0.12);
}

.pd-thumb-button img {
    pointer-events: none;
}

/* Zoom করার সময় */
.pd-main-image.is-zooming > img {
    transform: scale(2.2);
    cursor: zoom-out;
}

/* Mobile-এ mouse zoom বন্ধ থাকবে */
@media (max-width: 767px) {
    .pd-main-image > img {
        transform: none !important;
        cursor: default;
    }
}

/* =========================================
   HEADER AND BODY SAME WIDTH
========================================= */

.header-container,
.navbar-container,
.main-header .container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Search area */
.header-search,
.search-box,
.search-container {
    flex: 1;
    max-width: 360px;
}

/* Header items vertically aligned */
.main-header,
.header-wrapper,
.header-container {
    align-items: center;
}

/* Tablet */
@media (max-width: 992px) {
    .header-container,
    .navbar-container,
    .main-header .container {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .header-container,
    .navbar-container,
    .main-header .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .header-search,
    .search-box,
    .search-container {
        max-width: none;
        width: 100%;
    }
}

/* =========================================================
   FOOTER CONTAINMENT FIX (MATCH BODY/WRAPPER WIDTH)
   ========================================================= */

/* ফুটারের মূল ব্যাকগ্রাউন্ড যাতে বডির সমান উইড্থ নেয় */
.footer {
    width: 100% !important;
    max-width: 1120px !important; /* বডির মোট প্রস্থ */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* ফুটারের ভিতরের কন্টেন্ট সামঞ্জস্য রাখা */
.footer-container {
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.footer-bottom {
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* মোবাইল ও ট্যাবলেট ভার্সন অ্যাডজাস্টমেন্ট */
@media (max-width: 992px) {
    .footer {
        max-width: 100% !important;
    }
}

@media (max-width: 700px) {
    .footer-container,
    .footer-bottom {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* =========================================================
   HEADER CONTAINMENT FIX (MATCH BODY/WRAPPER WIDTH)
   ========================================================= */

/* হেডার/নেভবার কন্টেইনারকে বডির প্রস্থে সীমাবদ্ধ রাখা */
header, 
.header, 
.navbar,
.top-bar {
    width: 100% !important;
    max-width: 1120px !important; /* বডির সমান মোট প্রস্থ */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* হেডারের ভিতরের কন্টেন্ট সামঞ্জস্য রাখা */
.header-container,
.navbar-container {
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* মোবাইল ও ট্যাবলেট ভার্সন অ্যাডজাস্টমেন্ট */
@media (max-width: 992px) {
    header, 
    .header, 
    .navbar {
        max-width: 100% !important;
    }
}

/* =========================================================
   MOBILE FOOTER 2-COLUMN GRID LAYOUT
   ========================================================= */

@media (max-width: 768px) {
    /* ফুটার কন্টেইনারকে ২ কলামের গ্রিডে রূপান্তর */
    .footer-container, 
    .footer-content, 
    .footer-grid,
    .footer .row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* ২টি সমান কলাম */
        gap: 20px 15px !important; /* সারির গ্যাপ ২০px, কলামের গ্যাপ ১৫px */
        align-items: start !important;
    }

    /* প্রথম কলাম (GPointx ব্র্যান্ডিং/লোগো সেকশন) ফুল উইড্থ পাবে */
    .footer-container > div:first-child,
    .footer-content > div:first-child,
    .footer-box:first-child,
    .footer-col:first-child {
        grid-column: span 2 !important; /* ১মে থাকা লোগো ও ডেসক্রিপশন পুরো ২ কলাম জুড়ে থাকবে */
        margin-bottom: 10px !important;
    }

    /* সোশ্যাল আইকন ও ড্রপডাউন এলাইনমেন্ট */
    .footer-container p {
        font-size: 13px !important;
    }

    /* ফুটারের শিরোনামসমূহ */
    .footer-container h4,
    .footer-container h3,
    .footer-box h4 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    /* লিংক এবং টেক্সট সাইজ রেসপন্সিভ করা */
    .footer-container ul li a,
    .footer-container p,
    .footer-container span {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }
}

/* =========================================================
   REMOVE EXTRA VERTICAL SPACING & GAP FIX
   ========================================================= */

/* ১. বডি এবং মেইন কন্টেইনারের অতিরিক্ত মার্জিন/প্যাডিং উঠিয়ে দেওয়া */
body, 
main, 
.wrapper, 
.content-wrapper,
.product-details-page {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: #f2f5fc !important; /* পেজের মূল হালকা নীল/ধূসর ব্যাকগ্রাউন্ড কালার */
}

/* ২. প্রতিটি কার্ড/সেকশনের বাইরের অতিরিক্ত মার্জিন কমানো */
.product-details,
.product-description,
.product-specification,
.specification-box,
.description-box,
.details-box {
    margin-top: 15px !important;    /* ওপরের সাথে গ্যাপ কমানো (১৫px) */
    margin-bottom: 15px !important; /* নিচের সাথে গ্যাপ কমানো (১৫px) */
}

/* ৩. প্রথম কার্ডটি যাতে হেডারের সাথে গ্যাপ না রাখে */
.product-details:first-child,
.product-details-container > div:first-child {
    margin-top: 0 !important;
}

/* ৪. ফুটারের ঠিক আগের সেকশনের মার্জিন রিমুভ করা */
.product-specification:last-child,
.specification-box:last-child {
    margin-bottom: 0 !important;
}

/* ৫. ফুটারের নিজস্ব অতিরিক্ত মার্জিন রিমুভ করা */
footer, 
.footer {
    margin-top: 20px !important; /* ফুটার ঠিক স্পেসিফিকেশনের সাথে সুন্দর গ্যাপে লেগে থাকবে */
}

/* =========================================================
   PAGE BACKGROUND TO WHITE FIX
   ========================================================= */

/* ১. পুরো পেজ ও মূল কন্টেইনারের ব্যাকগ্রাউন্ড সাদা করা */
body, 
main, 
.wrapper, 
.content-wrapper,
.product-details-page,
.site-main {
    background-color: #ffffff !important; /* সম্পূর্ণ সাদা ব্যাকগ্রাউন্ড */
}

/* ২. প্রোডাক্ট কার্ড ও সেকশনগুলোর বর্ডার ও ব্যাকগ্রাউন্ড অ্যাডজাস্টমেন্ট */
.product-details,
.product-description,
.product-specification,
.specification-box,
.description-box,
.details-box {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important; /* হালকা বর্ডার যাতে সাদা ব্যাকগ্রাউন্ডে কার্ডগুলো আলাদা বোঝা যায় */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important; /* হালকা সফট শ্যাডো */
}

/* ৩. হেডার ও ফুটারের ব্যাকগ্রাউন্ড অ্যাডজাস্টমেন্ট (প্রয়োজন অনুযায়ী) */
header, 
.header, 
.navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* =========================================================
   PERFECT PAGE CONTAINMENT & ALIGNMENT FIX
   ========================================================= */

/* ১. পুরো বডির ব্যাকগ্রাউন্ড এক সমান সাদা করা */
html, body {
    background-color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
}

/* ২. হেডার, বডি এবং ফুটারের মূল কন্টেইনারকে একই সাইজে এলাইন করা */
header, 
.header, 
.navbar,
main,
.main-content,
.container,
.site-wrapper,
footer,
.footer {
    width: 100% !important;
    max-width: 1200px !important; /* সবার প্রস্থ সমান ১২০০px */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* ৩. মাঝের নীল ব্যাকগ্রাউন্ড রিমুভ করে সম্পূর্ণ এক লেআউট তৈরি করা */
main, .main-content, .product-details-page {
    background-color: transparent !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* ৪. প্রতিটি প্রোডাক্ট সেকশনের মার্জিন ও অ্যালাইনমেন্ট সামঞ্জস্য করা */
.product-details,
.product-description,
.product-specification,
.specification-box,
.description-box {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}

/* ৫. মোবাইল ডিভাইসে ১০০% উইড্থ বজায় রাখা */
@media (max-width: 1220px) {
    header, .header, .navbar,
    main, .main-content,
    footer, .footer,
    .product-details, .product-description, .product-specification {
        max-width: 95% !important;
    }
}

/* =========================================================
   REMOVE GAP BETWEEN BODY CONTENT & FOOTER
   ========================================================= */

/* ১. মেইন কন্টেইনার এবং পেজের ব্যাকগ্রাউন্ড গ্যাপ রিমুভ */
main, 
.main-content, 
.site-main,
.product-details-page {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ২. শেষ সেকশন/স্পেসিফিকেশন বক্সের নিচের মার্জিন শূন্য করা */
.product-specification,
.specification-box,
.product-details-container > div:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ৩. ফুটারের ওপরের মার্জিন পুরোপুরি জিরো (0) করা */
footer, 
.footer {
    margin-top: 0 !important;
    padding-top: 40px; /* ফুটারের ভিতরের কন্টেন্টের প্যাডিং ঠিক রাখার জন্য */
}

/* =========================================================
   MATCH EXACT BACKGROUND & COLOR THEME FROM IMAGE
   ========================================================= */

/* ১. পুরো স্ক্রিনের (Outer Background) হালকা নীল-ধূসর রঙ */
html, body {
    background-color: #f3f6fc !important; /* প্রফেশনাল হালকা আইস-ব্লু শেড */
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Poppins', sans-serif;
}

/* ২. মূল মাঝখানের বডি কন্টেইনার (Inner Main Container - White Area) */
main,
.main-content,
.site-main,
.wrapper,
.content-wrapper,
.product-details-page {
    width: 100% !important;
    max-width: 1120px !important; /* ইমেজের মতো মাঝখানে এলাইনমেন্ট */
    margin: 0 auto !important;
    background-color: #ffffff !important; /* মাঝখানের সাদা ক্যানভাস */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.03) !important; /* হালকা বর্ডার শ্যাডো */
    box-sizing: border-box !important;
}

/* ৩. হেডার ও নেভবার থিম সামঞ্জস্য করা */
header, 
.header, 
.navbar {
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #eaeeef !important;
}

/* ৪. হিরো সেকশন ব্যাকগ্রাউন্ড (Hero Section Warm Soft Blue/Gray) */
.hero-box,
.hero-section {
    background-color: #f1f5fa !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
}

/* ৫. ক্যাটাগরি এবং প্রোডাক্ট কার্ডগুলোর হালকা ব্যাকগ্রাউন্ড শেড */
.category-card,
.product-card,
.product-details,
.product-description,
.product-specification,
.specification-box {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
}

/* ৬. ফুটার সেকশন এলাইনমেন্ট ও ফাকাহীন ডিজাইন */
footer, 
.footer {
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    margin-top: 0 !important; /* বডির সাথে সরাসরি যুক্ত থাকবে */
}

/* =========================================================
   SWAP BACKGROUND COLORS (WHITE BODY & LIGHT BLUE CARDS)
   ========================================================= */

/* ১. পুরো বডি এবং মেইন এরিয়ার ব্যাকগ্রাউন্ড সাদা করা */
html, 
body, 
main, 
.main-content, 
.site-main, 
.wrapper, 
.content-wrapper,
.product-details-page {
    background-color: #ffffff !important; /* সম্পূর্ণ ধবধবে সাদা বডি */
}

/* ২. প্রোডাক্ট ডিটেইলস, ডেসক্রিপশন এবং স্পেসিফিকেশন কার্ডগুলোর ব্যাকগ্রাউন্ড হালকা নীল করা */
.product-details,
.product-description,
.product-specification,
.specification-box,
.description-box,
.details-box,
.hero-box,
.hero-section {
    background-color: #eef2f9 !important; /* কার্ডগুলোর সুন্দর হালকা সফট-ব্লু ব্যাকগ্রাউন্ড */
    border: 1px solid #dbe3f0 !important; /* হালকা বর্ডার যাতে সাদা ব্যাকগ্রাউন্ডে সুন্দর ফুটে ওঠে */
    border-radius: 16px !important;
}

/* ৩. স্পেসিফিকেশনের ভেতরের টেবিল বা বক্সের ব্যাকগ্রাউন্ড অ্যাডজাস্টমেন্ট */
.specification-box table,
.specification-box .table,
.product-specification table {
    background-color: #ffffff !important; /* স্পেসিফিকেশন টেবিলের ভেতরটা সাদা থাকলে রিডেবিলিটি ভালো থাকে */
    border-radius: 8px !important;
    overflow: hidden;
}

/* ৪. ইমেজ কন্টেইনার অ্যাডজাস্টমেন্ট (প্রয়োজন হলে) */
.product-gallery,
.product-image-box {
    background-color: #ffffff !important;
    border-radius: 12px !important;
}



/* ==================================================
   PRODUCT TOP RATING
================================================== */

.pd-top-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -6px 0 20px;
}

.pd-top-rating span {
    color: #64748b;
    font-size: 13px;
}

.pd-average-stars,
.pd-review-stars {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #f59e0b;
}

/* ==================================================
   PRODUCT REVIEW SECTION
================================================== */

.pd-review-section {
    margin-top: 42px;
    padding: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
}

.pd-review-summary {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-bottom: 25px;
    margin-bottom: 26px;
    border-bottom: 1px solid #e2e8f0;
}

.pd-review-summary h2 {
    margin: 0 0 7px;
    color: #0f172a;
    font-size: 26px;
}

.pd-review-summary p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.pd-review-score {
    min-width: 170px;
    padding: 18px;
    border-radius: 14px;
    background: #f8fafc;
    text-align: center;
}

.pd-review-score > strong {
    display: block;
    color: #0f172a;
    font-size: 38px;
    line-height: 1;
}

.pd-review-score > span {
    display: block;
    margin-top: 7px;
    color: #64748b;
    font-size: 12px;
}

.pd-review-score .pd-average-stars {
    justify-content: center;
    margin-top: 9px;
    font-size: 17px;
}

.pd-review-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    gap: 28px;
    align-items: start;
}

.pd-review-form-card,
.pd-review-list-card {
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: #ffffff;
}

.pd-review-form-card h3,
.pd-review-list-heading h3 {
    margin: 0 0 22px;
    color: #0f172a;
    font-size: 20px;
}

.pd-review-list-heading h3 span {
    color: #64748b;
    font-size: 15px;
}

.review-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.review-form-group {
    margin-bottom: 18px;
}

.review-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
}

.review-form-group label span {
    color: #dc2626;
}

.review-form-group input,
.review-form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    outline: none;
    background: #ffffff;
    color: #0f172a;
    font-family: inherit;
    font-size: 14px;
    transition: 0.2s ease;
}

.review-form-group textarea {
    resize: vertical;
}

.review-form-group input:focus,
.review-form-group textarea:focus {
    border-color: #315bea;
    box-shadow:
        0 0 0 3px rgba(49, 91, 234, 0.12);
}

.review-star-input {
    display: flex;
    align-items: center;
    gap: 5px;
}

.review-star-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    font-size: 28px;
    cursor: pointer;
    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.review-star-button:hover {
    transform: scale(1.1);
}

.review-star-button.active {
    color: #f59e0b;
}

#selectedRatingText {
    display: block;
    margin-top: 7px;
    color: #64748b;
    font-size: 12px;
}

.review-submit-button {
    min-height: 48px;
    padding: 12px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 10px;
    background: #315bea;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s ease;
}

.review-submit-button:hover {
    background: #2448c8;
    transform: translateY(-2px);
}

.review-field-error {
    display: block;
    margin-top: 6px;
    color: #dc2626;
    font-size: 12px;
}

.review-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    margin-bottom: 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.review-alert-success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.review-alert-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.pd-review-list {
    display: grid;
    gap: 15px;
}

.pd-review-item {
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.pd-review-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

.pd-review-user {
    display: flex;
    align-items: center;
    gap: 11px;
}

.pd-review-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #315bea;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
}

.pd-review-user h4 {
    margin: 0 0 3px;
    color: #0f172a;
    font-size: 14px;
}

.pd-review-user time {
    color: #94a3b8;
    font-size: 12px;
}

.pd-review-item p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
}

.pd-review-stars {
    flex-shrink: 0;
    font-size: 13px;
}

.pd-no-review {
    padding: 45px 20px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    text-align: center;
}

.pd-no-review i {
    margin-bottom: 12px;
    color: #94a3b8;
    font-size: 38px;
}

.pd-no-review h4 {
    margin: 0 0 6px;
    color: #0f172a;
}

.pd-no-review p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

@media (max-width: 900px) {
    .pd-review-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .pd-review-section {
        margin-top: 28px;
        padding: 20px 15px;
        border-radius: 14px;
    }

    .pd-review-summary {
        flex-direction: column;
        align-items: stretch;
    }

    .pd-review-score {
        width: 100%;
    }

    .review-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pd-review-form-card,
    .pd-review-list-card {
        padding: 18px 15px;
    }

    .pd-review-item-header {
        flex-direction: column;
    }
}


/* =========================================================
   SHOP / PRODUCT / REVIEW STYLES
   Merged from the additional stylesheet supplied by the user.
   ========================================================= */

/* =========================================================
   SHOP / ALL PRODUCTS PAGE
========================================================= */

.site-wrapper.shop-page {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 60px;
}

/* =========================================================
   SHOP BANNER
========================================================= */

.shop-banner {
    padding: 36px 42px;
    margin-bottom: 24px;
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        #f5f8ff 0%,
        #eef4ff 100%
    );
}

.shop-banner span {
    display: inline-block;
    margin-bottom: 8px;
    color: #315efb;
    font-size: 13px;
    font-weight: 600;
}

.shop-banner h1 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 38px;
    line-height: 1.2;
}

.shop-banner p {
    max-width: 650px;
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

/* =========================================================
   SHOP CONTENT
========================================================= */

.shop-content {
    display: block;
    width: 100%;
}

/* =========================================================
   HORIZONTAL FILTER AREA
========================================================= */

.shop-sidebar {
    position: static;
    width: 100%;
    margin-bottom: 30px;
}

.shop-sidebar form {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.5fr)
        minmax(180px, 1fr)
        minmax(180px, 1fr)
        minmax(135px, auto)
        minmax(125px, auto);
    align-items: end;
    gap: 14px;
    width: 100%;
    padding: 18px;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.filter-card {
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.filter-card h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.filter-card input,
.filter-card select {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid #ccd7e6;
    border-radius: 9px;
    outline: none;
    background: #ffffff;
    color: #1e293b;
    font-family: inherit;
    font-size: 13px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.filter-card input::placeholder {
    color: #94a3b8;
}

.filter-card input:focus,
.filter-card select:focus {
    border-color: #315efb;
    box-shadow: 0 0 0 3px rgba(49, 94, 251, 0.12);
}

/* Filter Buttons */

.filter-submit-btn,
.filter-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.filter-submit-btn {
    border: 1px solid #315efb;
    background: #315efb;
    color: #ffffff;
}

.filter-submit-btn:hover {
    border-color: #2449d8;
    background: #2449d8;
    transform: translateY(-1px);
}

.filter-reset-btn {
    border: 1px solid #d5deeb;
    background: #ffffff;
    color: #334155;
}

.filter-reset-btn:hover {
    border-color: #315efb;
    color: #315efb;
    transform: translateY(-1px);
}

/* =========================================================
   PRODUCT AREA
========================================================= */

.shop-products-area {
    width: 100%;
    min-width: 0;
}

.shop-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.shop-result-header h2 {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: 28px;
    line-height: 1.3;
}

.shop-result-header p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

/* =========================================================
   PRODUCT GRID
========================================================= */

.product-grid.shop-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

/* =========================================================
   PRODUCT CARD
========================================================= */

.shop-product-grid .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.shop-product-grid .product-card:hover {
    transform: translateY(-5px);
    border-color: #b8c9ef;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

/* =========================================================
   SALE BADGE
========================================================= */

.shop-product-grid .sale {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 11px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.shop-product-grid .sale.red {
    background: #ff4d5a;
}

.shop-product-grid .sale.blue {
    background: #315efb;
}

/* =========================================================
   PRODUCT IMAGE
========================================================= */

.shop-product-grid .product-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f8fafc;
    text-decoration: none;
}

.shop-product-grid .product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.shop-product-grid .product-card:hover .product-img img {
    transform: scale(1.04);
}

.shop-product-grid .image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #94a3b8;
    font-size: 36px;
}

/* =========================================================
   CATEGORY
========================================================= */

.shop-product-grid .product-category-name {
    display: block;
    margin: 14px 16px 5px;
    color: #315efb;
    font-size: 11px;
    font-weight: 600;
}

/* =========================================================
   PRODUCT NAME
========================================================= */

.shop-product-grid .product-card h3 {
    min-height: 42px;
    margin: 0;
    padding: 0 16px;
    font-size: 15px;
    line-height: 1.4;
}

.shop-product-grid .product-card h3 a {
    color: #0f172a;
    text-decoration: none;
}

.shop-product-grid .product-card h3 a:hover {
    color: #315efb;
}

/* =========================================================
   RATING
========================================================= */

.shop-product-grid .rating {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 28px;
    padding: 8px 16px 0;
}

.shop-product-grid .rating i {
    color: #ff9f00;
    font-size: 13px;
}

.shop-product-grid .rating-count {
    margin-left: 4px;
    color: #64748b;
    font-size: 11px;
}

/* =========================================================
   PRICE
========================================================= */

.shop-product-grid .price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding: 14px 16px 12px;
}

.shop-product-grid .price span {
    color: #315efb;
    font-size: 20px;
    font-weight: 700;
}

.shop-product-grid .price del {
    color: #94a3b8;
    font-size: 13px;
}

/* =========================================================
   VIEW BUTTON
========================================================= */

.shop-product-grid .view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    margin: 0 16px 16px;
    border: 1px solid #315efb;
    border-radius: 10px;
    background: #ffffff;
    color: #315efb;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.shop-product-grid .view-btn:hover {
    background: #315efb;
    color: #ffffff;
    transform: translateY(-1px);
}

/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state {
    grid-column: 1 / -1;
    padding: 60px 20px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

.empty-state i {
    margin-bottom: 12px;
    color: #94a3b8;
    font-size: 42px;
}

.empty-state p {
    margin: 0;
}

/* =========================================================
   PAGINATION
========================================================= */

.frontend-pagination {
    margin-top: 30px;
}

.frontend-pagination nav {
    display: flex;
    justify-content: center;
}

.frontend-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.frontend-pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
}

.frontend-pagination .active .page-link,
.frontend-pagination .page-link:hover {
    border-color: #315efb;
    background: #315efb;
    color: #ffffff;
}

.frontend-pagination .disabled .page-link {
    cursor: not-allowed;
    opacity: 0.45;
}

/* =========================================================
   RESPONSIVE - LARGE TABLET
========================================================= */

@media (max-width: 1050px) {
    .shop-sidebar form {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .filter-submit-btn,
    .filter-reset-btn {
        width: 100%;
    }
}

/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 800px) {
    .site-wrapper.shop-page {
        width: min(100% - 24px, 1120px);
        padding-top: 24px;
    }

    .shop-banner {
        padding: 30px 28px;
    }

    .shop-banner h1 {
        font-size: 32px;
    }

    .shop-sidebar form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .product-grid.shop-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 600px) {
    .site-wrapper.shop-page {
        width: min(100% - 20px, 1120px);
        padding-top: 18px;
        padding-bottom: 40px;
    }

    .shop-banner {
        padding: 25px 20px;
        margin-bottom: 18px;
        border-radius: 14px;
    }

    .shop-banner h1 {
        font-size: 27px;
    }

    .shop-banner p {
        font-size: 13px;
    }

    .shop-sidebar {
        margin-bottom: 22px;
    }

    .shop-sidebar form {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
        border-radius: 14px;
    }

    .filter-card input,
    .filter-card select,
    .filter-submit-btn,
    .filter-reset-btn {
        height: 44px;
    }

    .shop-result-header h2 {
        font-size: 24px;
    }

    .product-grid.shop-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .shop-product-grid .product-card h3 {
        min-height: 38px;
        padding: 0 12px;
        font-size: 13px;
    }

    .shop-product-grid .product-category-name {
        margin: 12px 12px 4px;
    }

    .shop-product-grid .rating {
        padding: 7px 12px 0;
    }

    .shop-product-grid .rating i {
        font-size: 11px;
    }

    .shop-product-grid .price {
        padding: 12px;
    }

    .shop-product-grid .price span {
        font-size: 16px;
    }

    .shop-product-grid .price del {
        font-size: 11px;
    }

    .shop-product-grid .view-btn {
        min-height: 38px;
        margin: 0 12px 12px;
        font-size: 12px;
    }
}

/* =========================================================
   RESPONSIVE - SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .product-grid.shop-product-grid {
        grid-template-columns: 1fr;
    }

    .shop-product-grid .product-img {
        aspect-ratio: 4 / 3;
    }
}

/* ==================================================
   PRODUCT TOP RATING
================================================== */

.pd-top-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -6px 0 20px;
}

.pd-top-rating span {
    color: #64748b;
    font-size: 13px;
}

.pd-average-stars,
.pd-review-stars {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #f59e0b;
}

/* ==================================================
   PRODUCT REVIEW SECTION
================================================== */

.pd-review-section {
    margin-top: 42px;
    padding: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
}

.pd-review-summary {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-bottom: 25px;
    margin-bottom: 26px;
    border-bottom: 1px solid #e2e8f0;
}

.pd-review-summary h2 {
    margin: 0 0 7px;
    color: #0f172a;
    font-size: 26px;
}

.pd-review-summary p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.pd-review-score {
    min-width: 170px;
    padding: 18px;
    border-radius: 14px;
    background: #f8fafc;
    text-align: center;
}

.pd-review-score > strong {
    display: block;
    color: #0f172a;
    font-size: 38px;
    line-height: 1;
}

.pd-review-score > span {
    display: block;
    margin-top: 7px;
    color: #64748b;
    font-size: 12px;
}

.pd-review-score .pd-average-stars {
    justify-content: center;
    margin-top: 9px;
    font-size: 17px;
}

.pd-review-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    gap: 28px;
    align-items: start;
}

.pd-review-form-card,
.pd-review-list-card {
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: #ffffff;
}

.pd-review-form-card h3,
.pd-review-list-heading h3 {
    margin: 0 0 22px;
    color: #0f172a;
    font-size: 20px;
}

.pd-review-list-heading h3 span {
    color: #64748b;
    font-size: 15px;
}

.review-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.review-form-group {
    margin-bottom: 18px;
}

.review-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
}

.review-form-group label span {
    color: #dc2626;
}

.review-form-group input,
.review-form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    outline: none;
    background: #ffffff;
    color: #0f172a;
    font-family: inherit;
    font-size: 14px;
    transition: 0.2s ease;
}

.review-form-group textarea {
    resize: vertical;
}

.review-form-group input:focus,
.review-form-group textarea:focus {
    border-color: #315bea;
    box-shadow:
        0 0 0 3px rgba(49, 91, 234, 0.12);
}

.review-star-input {
    display: flex;
    align-items: center;
    gap: 5px;
}

.review-star-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    font-size: 28px;
    cursor: pointer;
    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.review-star-button:hover {
    transform: scale(1.1);
}

.review-star-button.active {
    color: #f59e0b;
}

#selectedRatingText {
    display: block;
    margin-top: 7px;
    color: #64748b;
    font-size: 12px;
}

.review-submit-button {
    min-height: 48px;
    padding: 12px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 10px;
    background: #315bea;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s ease;
}

.review-submit-button:hover {
    background: #2448c8;
    transform: translateY(-2px);
}

.review-field-error {
    display: block;
    margin-top: 6px;
    color: #dc2626;
    font-size: 12px;
}

.review-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    margin-bottom: 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.review-alert-success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.review-alert-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.pd-review-list {
    display: grid;
    gap: 15px;
}

.pd-review-item {
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.pd-review-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

.pd-review-user {
    display: flex;
    align-items: center;
    gap: 11px;
}

.pd-review-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #315bea;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
}

.pd-review-user h4 {
    margin: 0 0 3px;
    color: #0f172a;
    font-size: 14px;
}

.pd-review-user time {
    color: #94a3b8;
    font-size: 12px;
}

.pd-review-item p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
}

.pd-review-stars {
    flex-shrink: 0;
    font-size: 13px;
}

.pd-no-review {
    padding: 45px 20px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    text-align: center;
}

.pd-no-review i {
    margin-bottom: 12px;
    color: #94a3b8;
    font-size: 38px;
}

.pd-no-review h4 {
    margin: 0 0 6px;
    color: #0f172a;
}

.pd-no-review p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

@media (max-width: 900px) {
    .pd-review-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .pd-review-section {
        margin-top: 28px;
        padding: 20px 15px;
        border-radius: 14px;
    }

    .pd-review-summary {
        flex-direction: column;
        align-items: stretch;
    }

    .pd-review-score {
        width: 100%;
    }

    .review-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pd-review-form-card,
    .pd-review-list-card {
        padding: 18px 15px;
    }

    .pd-review-item-header {
        flex-direction: column;
    }
}

/* Fixed frontend header */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999 !important;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Header fixed হওয়ায় content নিচে নামানো */
body {
    padding-top: 86px;
}


/* =========================================================
   SHOP PAGE FINAL ADJUSTMENTS
========================================================= */

/* Header/search bar এবং filter form-এর মাঝে ফাঁকা */
.shop-page {
    padding-top: 52px;
}

/* Filter form একটু নিচে */
.shop-sidebar {
    margin-top: 18px;
    margin-bottom: 30px;
}

/* All Products heading একটু ভিতরে */
.shop-result-header {
    padding-left: 14px;
    padding-right: 14px;
}

/* Desktop-এ প্রতি সারিতে ৫টি product */
.product-grid.shop-product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

/* ৫টি card হওয়ায় card compact করা */
.shop-product-grid .product-card h3 {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
}

.shop-product-grid .product-category-name {
    margin: 12px 12px 4px;
    font-size: 10px;
}

.shop-product-grid .rating {
    padding: 7px 12px 0;
}

.shop-product-grid .rating i {
    font-size: 11px;
}

.shop-product-grid .price {
    gap: 6px;
    padding: 12px;
}

.shop-product-grid .price span {
    font-size: 17px;
}

.shop-product-grid .price del {
    font-size: 11px;
}

.shop-product-grid .view-btn {
    min-height: 38px;
    margin: 0 12px 12px;
    font-size: 11px;
}

/* Large screen */
@media (min-width: 1200px) {
    .site-wrapper.shop-page {
        width: min(1400px, calc(100% - 40px));
    }
}

/* Laptop */
@media (max-width: 1199px) {
    .product-grid.shop-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Tablet */
@media (max-width: 900px) {
    .product-grid.shop-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Small tablet */
@media (max-width: 700px) {
    .product-grid.shop-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shop-result-header {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Mobile */
@media (max-width: 420px) {
    .product-grid.shop-product-grid {
        grid-template-columns: 1fr;
    }
}

.shop-product-grid {
    padding-left: 14px;
    padding-right: 14px;
}

.pd-buy-form {
    flex: 1;
    margin: 0;
}

.pd-buy-form .pd-buy-btn {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {

    .header {
        padding: 8px 8px;
    }

    .header-container {
        display: grid;
        grid-template-columns:
            auto
            minmax(90px, 1fr)
            28px
            30px
            32px;
        align-items: center;
        gap: 4px;
        width: 100%;
    }

    /* Logo */
    .logo {
        grid-column: 1;
        font-size: 14px;
        line-height: 1;
        white-space: nowrap;
    }

    .logo span {
        font-size: inherit;
    }

    /* Hide normal navbar */
    .navbar {
        display: none;
    }

    /* Flatten right side into grid */
    .header-right {
        display: contents;
    }

    /* Search */
    .search-box {
        grid-column: 2;
        display: flex !important;
        width: 100%;
        min-width: 0;
        height: 32px;
        margin: 0;
    }

    .search-box input {
        display: block !important;
        width: 100%;
        min-width: 0;
        height: 32px;
        padding: 0 7px;
        border-radius: 16px 0 0 16px;
        font-size: 9px;
    }

    .search-box button {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 0 16px 16px 0;
        font-size: 12px;
    }

    /* Header icons */
    .header-icons {
        display: contents;
    }

    .wishlist-link {
        display: none;
    }

    /* Cart */
    .cart {
        grid-column: 3;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .cart-count {
        position: absolute;
        top: -5px;
        right: -4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 9px;
        line-height: 16px;
    }

    /* Login */
    .login-btn {
        grid-column: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 50%;
        font-size: 13px;
    }

    .login-btn span {
        display: none;
    }

    /* Menu */
    .mobile-menu-toggle {
        grid-column: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        margin: 0;
        border-radius: 10px;
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE HEADER — ONE LINE
   Logo | Search | Cart | Login | Menu
   ========================================================= */

@media (max-width: 768px) {
    .header {
        padding: 8px 10px !important;
    }

    .header-container {
        width: 100% !important;
        min-height: 52px !important;
        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;
        grid-template-columns:
            auto
            minmax(64px, 0.92fr)
            28px
            30px
            32px !important;

        align-items: center !important;
        column-gap: 5px !important;
        row-gap: 0 !important;
        flex-wrap: nowrap !important;
    }

    .header-container > .logo {
        grid-column: 1 !important;
        grid-row: 1 !important;

        margin: 0 0 0 4px !important;
        font-size: 15px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .header-container > .navbar {
        display: none !important;
    }

    .header-container > .navbar.mobile-open,
    .header-container > .navbar.open {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        left: 8px !important;
        right: 8px !important;
        z-index: 1000 !important;

        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;

        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12) !important;
    }

    .header-right {
        display: contents !important;
    }

    .search-box {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        margin: 0 4px !important;

        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .search-box input {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;

        padding: 0 7px 0 9px !important;
        border: 0 !important;
        outline: none !important;

        font-size: 9px !important;
    }

    .search-box button {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        font-size: 12px !important;
    }

    .header-icons {
        display: contents !important;
    }

    .wishlist-link {
        display: none !important;
    }

    .cart {
        grid-column: 3 !important;
        grid-row: 1 !important;

        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
        font-size: 14px !important;
    }

    .cart-count,
    .cart span {
        top: -5px !important;
        right: -4px !important;

        width: auto !important;
        min-width: 15px !important;
        height: 15px !important;
        padding: 0 4px !important;

        font-size: 8px !important;
        line-height: 15px !important;
    }

    .login-btn {
        grid-column: 4 !important;
        grid-row: 1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        margin: 0 !important;

        border-radius: 50% !important;
        font-size: 12px !important;
    }

    .login-btn span {
        display: none !important;
    }

    .mobile-menu-toggle {
        grid-column: 5 !important;
        grid-row: 1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        margin: 0 !important;

        border-radius: 9px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 420px) {
    .header {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .header-container {
        grid-template-columns:
            auto
            minmax(60px, 1fr)
            25px
            27px
            29px !important;

        column-gap: 3px !important;
    }

    .header-container > .logo {
        font-size: 13px !important;
    }

    .search-box,
    .search-box input,
    .search-box button {
        height: 29px !important;
    }

    .search-box button {
        flex-basis: 29px !important;
        width: 29px !important;
    }

    .cart {
        width: 25px !important;
        height: 25px !important;
        font-size: 13px !important;
    }

    .login-btn {
        width: 27px !important;
        min-width: 27px !important;
        height: 27px !important;
    }

    .mobile-menu-toggle {
        width: 29px !important;
        min-width: 29px !important;
        height: 29px !important;
    }
}


@media (max-width: 420px) {
    .header-container > .logo {
        margin-left: 3px !important;
    }

    .search-box {
        margin-left: 3px !important;
        margin-right: 3px !important;
    }
}

@media (max-width: 768px) {

    /* Header/Search আর main image-এর মাঝে gap */
    .product-details-container {
        padding-top: 22px !important;
    }

    .pd-container {
        margin-top: 10px !important;
    }

    /* Main image border একটু compact */
    .pd-main-image {
        width: calc(100% - 16px) !important;
        margin-left: auto !important;
        margin-right: auto !important;

        border-radius: 12px !important;
    }

    .pd-main-image img {
        padding: 6px !important;
    }
}


/* =========================================================
   SHOP CARDS — HOME STYLE ON MOBILE
========================================================= */

.shop-product-grid .shop-mobile-rating,
.shop-product-grid .shop-mobile-actions {
    display: none;
}

@media (max-width: 600px) {

    .product-grid.shop-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        padding-left: 5px;
        padding-right: 5px;
    }

    .shop-product-grid .product-card {
        padding: 0 !important;
        overflow: hidden;
        border: 1px solid #dbe3ee;
        border-radius: 15px;
        background: #ffffff;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    }

    .shop-product-grid .product-img {
        width: 100%;
        height: 145px !important;
        aspect-ratio: auto !important;
        margin: 0;
        overflow: hidden;
        border-bottom: 1px solid #e2e8f0;
        background: #ffffff;
    }

    .shop-product-grid .product-img img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        padding: 0;
        object-fit: cover;
        object-position: center;
    }

    .shop-product-grid .sale {
        top: 12px;
        left: 10px;
        min-height: 27px;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 10px;
    }

    .shop-product-grid .product-category-name {
        display: none !important;
    }

    .shop-product-grid .shop-card-title-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px;
        min-height: 40px;
        padding: 8px 7px 5px;
    }

    .shop-product-grid .shop-card-title-row h3 {
        min-width: 0;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 11px !important;
        line-height: 1.2;
    }

    .shop-product-grid .shop-card-title-row h3 a {
        display: block;
        overflow: hidden;
        color: #0f172a;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shop-product-grid .shop-mobile-rating {
        display: flex;
        align-items: center;
        gap: 1px;
        min-height: 0;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

    .shop-product-grid .shop-mobile-rating i {
        color: #ff9f00;
        font-size: 7px;
    }

    .shop-product-grid .shop-mobile-rating .rating-count {
        margin-left: 1px;
        color: #64748b;
        font-size: 7px;
    }

    .shop-product-grid .price {
        justify-content: center;
        gap: 5px;
        margin: 0;
        padding: 8px 7px 10px;
    }

    .shop-product-grid .price span {
        color: #315efb;
        font-size: 16px;
        font-weight: 700;
    }

    .shop-product-grid .price del {
        color: #94a3b8;
        font-size: 9px;
    }

    .shop-product-grid > .product-card > .view-btn {
        display: none !important;
    }

    .shop-product-grid .shop-mobile-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        margin: auto 8px 10px !important;
    }

    .shop-product-grid .shop-mobile-actions .details-btn,
    .shop-product-grid .shop-mobile-actions .cart-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
        min-height: 36px;
        margin: 0;
        padding: 6px 8px;
        border-radius: 999px;
        font-size: 9px;
        font-weight: 700;
        text-decoration: none;
    }

    .shop-product-grid .shop-mobile-actions .details-btn {
        border: 1px solid #bfdbfe;
        background: #eff6ff;
        color: #315efb;
    }

    .shop-product-grid .shop-mobile-actions .cart-btn {
        border: none;
        background: linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );
        color: #ffffff;
    }

    .shop-product-grid .shop-mobile-actions .cart-btn:disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }

    .shop-product-grid .shop-mobile-cart-form {
        width: 100%;
        margin: 0;
    }
}

/* =========================================================
   CATEGORY PRODUCT SLIDER
========================================================= */

.category-product-rows {
    display: grid;
    gap: 32px;
}

.category-product-row {
    min-width: 0;
    padding: 18px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}

.category-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.category-row-header h2 {
    margin: 0 0 3px;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.3;
}

.category-row-header p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
}

.category-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #315efb;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.category-product-viewport {
    width: 100%;
    overflow: hidden;
}

.category-product-track.shop-product-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px;
    width: 100%;
    padding: 0;
    transform: translateX(0);
    will-change: transform;
}

.category-product-track > .product-card {
    flex: 0 0 calc(
        (100% - 56px) / 5
    );
    width: calc(
        (100% - 56px) / 5
    );
    min-width: 0;
}

.category-product-track.is-sliding {
    transition: transform 0.55s ease;
}

/* Mobile: তিনটি product */
@media (max-width: 768px) {

    .category-product-rows {
        gap: 20px;
    }

    .category-product-row {
        padding: 10px 8px;
        border-radius: 14px;
    }

    .category-row-header {
        margin-bottom: 12px;
        padding: 0 3px;
    }

    .category-row-header h2 {
        font-size: 17px;
    }

    .category-row-header p,
    .category-view-all {
        font-size: 9px;
    }

    .category-product-track.shop-product-grid {
        gap: 7px;
    }

    .category-product-track > .product-card {
        flex: 0 0 calc(
            (100% - 14px) / 3
        ) !important;

        width: calc(
            (100% - 14px) / 3
        ) !important;
    }

    .category-product-track
    .product-img {
        height: 105px !important;
    }

    .category-product-track
    .shop-card-title-row {
        min-height: 35px;
        padding: 6px 4px 3px;
    }

    .category-product-track
    .shop-card-title-row h3 {
        font-size: 9px !important;
    }

    .category-product-track
    .shop-mobile-rating i {
        font-size: 5px;
    }

    .category-product-track
    .shop-mobile-rating
    .rating-count {
        font-size: 5px;
    }

    .category-product-track
    .price {
        padding: 6px 3px 8px;
    }

    .category-product-track
    .price span {
        font-size: 12px;
    }

    .category-product-track
    .price del {
        font-size: 7px;
    }

    .category-product-track
    .shop-mobile-actions {
        gap: 5px !important;
        margin: auto 4px 7px !important;
    }

    .category-product-track
    .shop-mobile-actions
    .details-btn,

    .category-product-track
    .shop-mobile-actions
    .cart-btn {
        min-height: 29px;
        padding: 4px 3px;
        font-size: 7px;
    }

    .category-product-track
    .shop-mobile-actions i {
        display: none;
    }

    .category-product-track
    .sale {
        top: 7px;
        left: 6px;
        min-height: 21px;
        padding: 3px 6px;
        font-size: 7px;
    }
}

/* =========================================================
   CATEGORY SLIDER CARD HOVER STABILITY
========================================================= */

.category-product-track .product-card,
.category-product-track .product-card:hover {
    transform: none !important;
}

.category-product-track .product-card:hover {
    border-color: #b8c9ef;
    box-shadow: 0 8px 24px rgba(
        15,
        23,
        42,
        0.08
    );
}

/* Hover করলে image বড় হবে না */
.category-product-track
.product-card:hover
.product-img img {
    transform: none !important;
}

/* Card movement বন্ধ */
.category-product-track .product-card,
.category-product-track .product-card:hover {
    transform: none !important;
}

/* Image zoom বন্ধ */
.category-product-track
.product-card:hover
.product-img img {
    transform: none !important;
}

/* View button movement বন্ধ */
.category-product-track .view-btn,
.category-product-track .view-btn:hover,
.category-product-track .view-btn:focus,
.category-product-track .view-btn:active {
    transform: none !important;
}

/* ==========================================
   PRODUCT CARD & LAYOUT FIXES
========================================== */

/* ১. সব কার্ডের হাইট সমান ও ফ্লেক্স কন্টেইনার করা */
.shop-product-grid, 
.category-product-track {
    display: flex !important;
    align-items: stretch !important;
}

.shop-products-area .product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

/* ২. প্রাইস ও রেগুলার প্রাইস একলাইনে পাশাপাশি রাখা */
.shop-products-area .product-card .price {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* ==========================================
   BUTTON CONTAINER & BUTTONS
========================================== */

/* ৩. বাটন কন্টেইনার একদম নিচে নামানো ও প্যাডিং দেওয়া */
.shop-products-area .product-card-actions {
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 0 2px 4px 2px !important;
    box-sizing: border-box !important;
}

/* ৪. Details বাটন */
.shop-products-area .product-card-actions .details-btn {
    flex: 0 0 auto !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    height: 30px !important;
    border-radius: 50px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
}

/* ৫. Add To Cart ফর্ম ও বাটন */
.shop-products-area .product-card-actions form {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    margin: 0 !important;
}

.shop-products-area .product-card-actions .cart-btn {
    width: 100% !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    height: 30px !important;
    border-radius: 50px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    box-sizing: border-box !important;
}

/* ৬. বাটন আইকন সাইজ */
.shop-products-area .product-card-actions i {
    font-size: 9px !important;
}

/* প্রডাক্ট নামের মার্জিন এবং গ্যাপ একদম শূন্য করা */
.product-card h3 {
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* রেটিং ডানে থাকবে এবং নামের ঠিক গা ঘেঁষে নিচে থাকবে */
.product-card div[aria-label*="out of 5 stars"] {
    margin-top: 2px !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
    justify-content: flex-end !important;
}

/* Footer-এর উপরের অতিরিক্ত ফাঁকা জায়গা সরানো */
.footer-container {
    padding-top: 20px !important;
}

/* Footer content উপরের দিকে থাকবে */
.footer-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Footer social media icons */
.footer .social-icons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.footer .social-icons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #bfdbfe !important;
    font-size: 18px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.footer .social-icons a:hover {
    color: #3b82f6 !important;
    transform: translateY(-2px) !important;
}

.pd-order-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 13px 15px;
    border: 1px solid #dbe5f3;
    border-radius: 11px;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
}

.pd-order-info span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pd-order-info i {
    color: #315bea;
}

.pd-order-info strong {
    color: #0f172a;
}

.cart .cart-count[hidden] {
    display: none !important;
}

.login-modal-box .auth-subtitle {
    margin-bottom: 18px;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 20px;
    padding: 5px;
    border-radius: 12px;
    background: #eef2ff;
}

.auth-tab {
    padding: 10px;
    border-radius: 9px;
    color: #64748b;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
}

.auth-tab.active {
    color: #fff;
    background: linear-gradient(45deg, #2563eb, #4f46e5);
    box-shadow: 0 5px 14px rgba(37, 99, 235, .22);
}

.auth-form { display: none; text-align: left; }
.auth-form.active { display: block; }
.auth-tabs.auth-tabs-hidden { display: none; }
.auth-panel-title { color: #0f172a; text-align: center; font-size: 19px; margin: 0 0 7px; }
.login-modal-box .auth-panel-help { color: #64748b; font-size: 13px; line-height: 1.55; text-align: center; margin: 0 0 18px; }
.auth-notice { margin-bottom: 13px; padding: 10px 12px; border-radius: 9px; color: #166534; background: #dcfce7; font-size: 13px; line-height: 1.5; }

.auth-field {
    display: block;
    margin-bottom: 14px;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}

.auth-field > span:first-child { display: block; margin-bottom: 6px; }

.auth-input-wrap {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid #dbe3ef;
    border-radius: 11px;
    background: #f8fafc;
}

.auth-input-wrap:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.auth-input-wrap > i { color: #64748b; }
.auth-input-wrap input { width: 100%; border: 0; outline: 0; color: #0f172a; background: transparent; font: inherit; font-weight: 400; }
.toggle-password { flex: 0 0 auto; color: #64748b; background: transparent; }

.remember-row { display: flex; align-items: center; gap: 7px; margin: 2px 0 15px; color: #64748b; font-size: 12px; }
.remember-row input { accent-color: #2563eb; }

.auth-submit-btn {
    width: 100%;
    padding: 12px;
    border-radius: 30px;
    color: #fff;
    background: linear-gradient(45deg, #2563eb, #4f46e5);
    font-weight: 700;
}

.login-modal-box .auth-switch-text { margin: 14px 0 0; text-align: center; font-size: 12px; }
.auth-switch-text button { color: #2563eb; background: transparent; font-weight: 700; }

.auth-alert { margin-bottom: 13px; padding: 9px 11px; border-radius: 8px; color: #b91c1c; background: #fee2e2; font-size: 12px; }

.customer-account { display: flex; align-items: center; gap: 7px; }
.customer-name { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 30px; color: #fff; background: linear-gradient(45deg, #2563eb, #4f46e5); font-size: 13px; font-weight: 600; }
.customer-logout { width: 34px; height: 34px; border-radius: 50%; color: #ef4444; background: #fee2e2; }

.cart-ajax-toast {
    position: fixed;
    top: 92px;
    left: 50%;
    z-index: 11000;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100% - 30px);
    padding: 12px 18px;
    border-radius: 12px;
    color: #fff;
    background: #16a34a;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .2);
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transform: translate(-50%, -12px);
    transition: opacity .25s ease, transform .25s ease;
}
.cart-ajax-toast.error { background: #dc2626; }
.cart-ajax-toast.show { opacity: 1; transform: translate(-50%, 0); }
form[data-submitting="true"] [type="submit"] { cursor: wait; opacity: .72; }

@media (max-width: 768px) {
    .header-container:has(.customer-account) {
        grid-template-columns: auto minmax(50px, 1fr) 25px 59px 32px !important;
    }

    .customer-account {
        grid-column: 4 !important;
        grid-row: 1 !important;
        width: 59px;
        display: grid;
        grid-template-columns: 27px 27px;
        gap: 5px;
    }

    .customer-name,
    .customer-logout {
        width: 27px !important;
        min-width: 27px !important;
        height: 27px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        font-size: 12px !important;
    }

    .customer-name > span { display: none !important; }
    .customer-account form { display: block; margin: 0; }
    .cart-ajax-toast { top: 74px; font-size: 11px; }
}

@media (max-width: 420px) {
    .header-container:has(.customer-account) {
        grid-template-columns: auto minmax(42px, 1fr) 23px 55px 29px !important;
    }
    .customer-account { width: 55px; grid-template-columns: 25px 25px; }
    .customer-name, .customer-logout { width: 25px !important; min-width: 25px !important; height: 25px !important; }
}

@media (max-width: 480px) {
    .login-modal-box { max-height: 92vh; padding: 25px 20px; overflow-y: auto; }
    .modal-icon { margin-bottom: 8px; font-size: 38px; }
    .login-modal-box h2 { font-size: 19px; }
}

/* Final desktop width alignment */
@media (min-width: 769px) {
    :root {
        --site-width: 1320px;
        --section-x: 34px;
    }

    .site-wrapper,
    .header,
    .header-container,
    main,
    .main-content,
    .footer,
    .footer-container,
    .footer-bottom {
        max-width: 1320px !important;
    }

    .header-container {
        justify-content: flex-start !important;
        gap: 16px !important;
    }

    .header-container > .logo {
        flex: 0 0 auto !important;
        font-size: 27px !important;
        margin-right: 2px !important;
    }

    .header-primary-search {
        order: 2;
        flex: 1 1 440px !important;
        width: auto !important;
        min-width: 300px !important;
        max-width: 520px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        border: 2px solid #d9e4ff !important;
        border-radius: 15px !important;
        background: #f8faff !important;
        box-shadow: 0 8px 24px rgba(37, 99, 235, .10) !important;
        overflow: hidden !important;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
    }

    .header-primary-search:focus-within {
        border-color: #3763f4 !important;
        background: #fff !important;
        box-shadow: 0 10px 28px rgba(37, 99, 235, .18) !important;
    }

    .header-primary-search .search-leading-icon {
        flex: 0 0 auto;
        margin-left: 16px;
        color: #7890b8;
        font-size: 15px;
    }

    .header-primary-search input {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        padding: 0 14px !important;
        color: #172033 !important;
        background: transparent !important;
        font-size: 13px !important;
    }

    .header-primary-search input::placeholder {
        color: #8090aa !important;
        opacity: 1 !important;
    }

    .header-primary-search button {
        flex: 0 0 54px !important;
        width: 54px !important;
        height: 48px !important;
        border-radius: 0 13px 13px 0 !important;
        color: #fff !important;
        background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
        font-size: 17px !important;
    }

    .header-container > .navbar {
        order: 3;
        flex: 0 0 auto;
        gap: 17px !important;
    }

    .header-container > .navbar a {
        font-size: 13px !important;
    }

    .header-container > .header-right {
        order: 4;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .header-container > .mobile-menu-toggle {
        order: 5;
        flex: 0 0 auto;
    }
}

@media (max-width: 768px) {
    .header-primary-search .search-leading-icon {
        display: none !important;
    }
}

/* =========================================================
   SMART MOBILE FOOTER
========================================================= */
@media (max-width: 768px) {
    .footer .footer-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px 18px !important;
        width: 100% !important;
        padding: 28px 18px 20px !important;
    }

    .footer .footer-brand {
        grid-column: 1 / -1 !important;
        max-width: none;
        margin: 0 !important;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    }

    .footer .footer-logo {
        margin-bottom: 10px;
        font-size: 24px;
        line-height: 1;
    }

    .footer .brand-text {
        max-width: 420px;
        margin: 0;
        color: #b8c4d8;
        font-size: 11px !important;
        line-height: 1.65 !important;
    }

    .footer .social-icons {
        gap: 8px !important;
        margin-top: 14px !important;
    }

    .footer .social-icons a {
        width: 32px;
        height: 32px;
        border: 1px solid rgba(96, 165, 250, 0.18);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.055);
        font-size: 14px !important;
    }

    .footer .footer-col {
        min-width: 0;
        gap: 0;
    }

    .footer .footer-col > br {
        display: none;
    }

    .footer .footer-col h4 {
        position: relative;
        margin: 0 0 13px !important;
        padding-bottom: 8px;
        color: #f8fafc;
        font-size: 12px !important;
        letter-spacing: 0.3px;
    }

    .footer .footer-col h4::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 28px;
        height: 2px;
        border-radius: 99px;
        background: #3b82f6;
        content: "";
    }

    .footer .footer-col ul {
        margin: 0;
        padding: 0;
    }

    .footer .footer-col li {
        margin-bottom: 8px;
    }

    .footer .footer-col a,
    .footer .footer-col p {
        font-size: 11px !important;
        line-height: 1.55 !important;
    }

    .footer .footer-container > .footer-col:nth-child(4) {
        grid-column: 1 / -1 !important;
        padding-top: 2px;
    }

    .footer .footer-contact-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .footer .footer-contact-list li {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        margin: 0;
        padding: 9px 11px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.045);
    }

    .footer .footer-contact-list li > a:first-child {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .footer .footer-contact-list i {
        flex: 0 0 16px;
        margin: 0;
        color: #60a5fa;
        text-align: center;
    }

    .footer .footer-contact-list a {
        min-width: 0;
        overflow-wrap: anywhere;
        color: #cbd5e1;
    }

    .footer .footer-bottom {
        width: calc(100% - 36px) !important;
        min-height: 0;
        margin: 0 18px !important;
        padding: 14px 0 17px !important;
        border-top-color: rgba(148, 163, 184, 0.16);
    }

    .footer .footer-bottom p {
        margin: 0;
        font-size: 10px;
        line-height: 1.4;
    }

    .top-btn {
        right: 14px;
        bottom: 14px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 380px) {
    .footer .footer-container {
        gap: 20px 12px !important;
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    .footer .footer-bottom {
        width: calc(100% - 28px) !important;
        margin-right: 14px !important;
        margin-left: 14px !important;
    }
}