/* ======================================================
           PORCELAINA — COMPLETE STYLESHEET
           Matches: www.porcelaina.com.bd
           Primary: #d41f27 | Font: Inter
        ====================================================== */
        * { box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; color: #4d4d4d; margin: 0; -webkit-font-smoothing: antialiased; }
        a { text-decoration: none; transition: color .3s; }
        img { max-width: 100%; } 
        .gradient-color{
     background: linear-gradient(
        to right,
        #E7AA51 0%,
        #E7AA51 20%,
        #FFE49A 40%,
        #E7AA51 60%,
        #AC7031 80%,
        #8D5A1B 100%
    ); 

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

        /* ── SPACING ── */
        .pl__50  { padding-left:  50px; } @media(max-width:767px){.pl__50{padding-left:16px;}}
        .pr__50  { padding-right: 50px; } @media(max-width:767px){.pr__50{padding-right:16px;}}
        .p__50   { padding: 50px; }       @media(max-width:767px){.p__50{padding:30px 16px;}}
        .pt__50  { padding-top: 50px; }   @media(max-width:767px){.pt__50{padding-top:30px;}}
        .pb__50  { padding-bottom: 50px;}
        .mb__30  { margin-bottom: 30px; }
        .mt__30  { margin-top: 30px; }

        /* ── TOP BAR ── */
        .top-bar { background: #fff; border-bottom: 1px solid #f0f0f0; padding: 7px 0; font-size: 13px; color: #555; }
        .top-bar a { color: #555; font-size: 13px; }
        .top-bar a:hover { color: #d41f27; }
        .top-bar i { margin-right: 4px; }

        /* ── MIDDLE NAV ── */
        .mid-nav { background: #fff; padding: 10px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,.07); }
        .logo-text { font-size: 36px; font-weight: 900; letter-spacing: 3px; color: #111; line-height: 1; font-family: 'Inter', sans-serif; text-transform: uppercase; }
        .logo-text:hover { color: #111; }

        /* Search */
        .search-wrap { display: flex; background: #f5f5f5; border-radius: 30px; overflow: hidden; height: 44px; }
        .search-wrap input { flex: 1; border: none; background: transparent; padding: 0 20px; font-size: 14px; color: #555; outline: none; }
        .search-wrap select { border: none; background: transparent; border-left: 1px solid #e0e0e0; padding: 0 14px; font-size: 13px; color: #555; outline: none; cursor: pointer; appearance: auto; }
        .search-wrap button { background: #d41f27; border: none; color: #fff; padding: 0 22px; font-size: 15px; cursor: pointer; transition: background .2s; border-radius: 0 30px 30px 0; }
        .search-wrap button:hover { background: #b5161c; }

        /* Nav Icons */
        .nav-icons { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
        .nav-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #333; transition: background .2s; font-size: 18px; }
        .nav-icon-btn:hover { background: #f5f5f5; color: #d41f27; }
        .nav-icon-btn .ic-badge { position: absolute; top: 4px; right: 4px; background: #d41f27; color: #fff; font-size: 9px; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }

        /* ── BOTTOM NAV (Category Bar) ── */
        .cat-nav { background: #fff; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
        .cat-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; overflow-x: auto; }
        .cat-nav ul li a { display: block; padding: 10px 16px; font-size: 13.5px; font-weight: 500; color: #2b2d42; white-space: nowrap; }
        .cat-nav ul li a:hover, .cat-nav ul li a.active { color: #d41f27; }
        .cat-nav ul li a.hot { color: #d41f27; font-weight: 600; }

        /* ── HERO SLIDER ── */
        .home-slider .swiper-slide img { width: 100%; display: block; object-fit: cover; max-height: 580px; }
        .home-slider .swiper-button-next, .home-slider .swiper-button-prev { width: 40px; height: 40px; background: rgba(255,255,255,.85); border-radius: 50%; transition: .3s; }
        .home-slider .swiper-button-next::after, .home-slider .swiper-button-prev::after { font-size: 14px; font-weight: 800; color: #222; }
        .home-slider .swiper-button-next:hover, .home-slider .swiper-button-prev:hover { background: #d41f27; }
        .home-slider .swiper-button-next:hover::after, .home-slider .swiper-button-prev:hover::after { color: #fff; }
        .home-slider .swiper-pagination-bullet-active { background: #d41f27; }

        /* ── SECTION HEADER ── */
        .sec-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
        .sec-header h3 { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #111; margin: 0; }
        .view-all-btn { font-size: 13px; font-weight: 500; color: #d41f27; border: 1px solid #d41f27; padding: 7px 22px; border-radius: 30px; transition: .3s; }
        .view-all-btn:hover { background: #d41f27; color: #fff; }

        /* ── CATEGORY CARDS ── */
        .cat-card { text-align: center; }
        .cat-card .cat-img { display: block; overflow: hidden; border-radius: 6px; height: 220px; background: #f5f5f5; }
        @media(max-width:1399px){ .cat-card .cat-img { height: 180px; } }
        @media(max-width:991px){ .cat-card .cat-img  { height: 220px; } }
        @media(max-width:575px){ .cat-card .cat-img  { height: 160px; } }
        .cat-card .cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
        .cat-card:hover .cat-img img { transform: scale(1.08); opacity: .85; }
        .cat-card h5 { margin-top: 10px; margin-bottom: 0; font-size: 15px; font-weight: 600; }
        .cat-card h5 a { color: #111; }
        .cat-card h5 a:hover { color: #d41f27; }

        /* ── PRODUCT CARDS ── */
        .pc-item { position: relative; }
        .pc-img { position: relative; overflow: hidden; border: 1px solid #ececec; border-radius: 6px; background: #fafafa; }
        .pc-img img { width: 100%; display: block; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; transition: transform .5s; }

        /* Pre-init swiper: slides won't stack at 100% width before JS */
        .feature-slider .swiper-wrapper { display: flex; }
        .feature-slider .swiper-slide { flex: 0 0 calc(100% / 2); max-width: calc(100% / 2); }
        @media(min-width:768px)  { .feature-slider .swiper-slide { flex: 0 0 calc(100%/3); max-width: calc(100%/3); } }
        @media(min-width:992px)  { .feature-slider .swiper-slide { flex: 0 0 calc(100%/4); max-width: calc(100%/4); } }
        @media(min-width:1200px) { .feature-slider .swiper-slide { flex: 0 0 calc(100%/5); max-width: calc(100%/5); } }
        @media(min-width:1400px) { .feature-slider .swiper-slide { flex: 0 0 calc(100%/6); max-width: calc(100%/6); } }
        .pc-item:hover .pc-img img { transform: scale(1.04); }

        /* Wishlist / Quickview icons */
        .pc-wish, .pc-quick { position: absolute; right: 10px; width: 34px; height: 34px; background: #fff; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #333; cursor: pointer; transition: .3s; opacity: 0; transform: translateX(12px); z-index: 3; }
        .pc-wish  { top: 10px; }
        .pc-quick { top: 52px; }
        .pc-item:hover .pc-wish, .pc-item:hover .pc-quick { opacity: 1; transform: translateX(0); }
        .pc-wish:hover, .pc-quick:hover { background: #d41f27; color: #fff; }

        /* Discount badge */
        .pc-discount { position: absolute; top: 10px; left: 10px; background: #d41f27; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 3px; z-index: 3; text-transform: uppercase; }

        /* Add-to-cart bottom bar */
        .pc-btn-group { position: absolute; bottom: -54px; left: 0; right: 0; padding: 0 10px 10px; display: flex; gap: 6px; transition: bottom .35s, opacity .35s; opacity: 0; z-index: 3; }
        .pc-item:hover .pc-btn-group { bottom: 0; opacity: 1; }
        .pc-cart-btn { flex: 1; background: #111; color: #fff; border: none; border-radius: 30px; padding: 9px 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .2s; white-space: nowrap; }
        .pc-cart-btn:hover { background: #d41f27; }
        .pc-buy-btn { background: #fff; color: #111; border: 1px solid #ddd; border-radius: 30px; padding: 9px 12px; font-size: 13px; font-weight: 500; cursor: pointer; transition: .2s; white-space: nowrap; }
        .pc-buy-btn:hover { background: #d41f27; color: #fff; border-color: #d41f27; }

        /* Product text */
        .pc-info { margin-top: 12px; }
        .pc-info h5 { font-size: 15px; font-weight: 500; margin: 0 0 4px; }
        .pc-info h5 a { color: #111; }
        .pc-info h5 a:hover { color: #d41f27; }
        .pc-price { font-size: 15px; font-weight: 600; color: #333; }
        .pc-old-price { font-size: 13px; font-weight: 400; color: #aaa; text-decoration: line-through; margin-right: 5px; }

        /* ── CAROUSEL ARROWS (feature-slider) ── */
        .feature-slider { position: relative; }
        .feature-slider .swiper-button-next, .feature-slider .swiper-button-prev { width: 38px; height: 38px; background: #fff; border-radius: 50%; transition: .3s; box-shadow: 0 2px 8px rgba(0,0,0,.15); opacity: 0; }
        .feature-slider .swiper-button-next::after, .feature-slider .swiper-button-prev::after { font-size: 13px; font-weight: 800; color: #333; }
        .feature-slider .swiper-button-next:hover, .feature-slider .swiper-button-prev:hover { background: #d41f27; }
        .feature-slider .swiper-button-next:hover::after, .feature-slider .swiper-button-prev:hover::after { color: #fff; }
        .feature-slider:hover .swiper-button-next, .feature-slider:hover .swiper-button-prev { opacity: 1; }

        /* ── TAB PILLS ── */
        .tab-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; border: none; }
        .tab-pills .nav-link { border: 1px solid #282828; border-radius: 30px; color: #282828; font-size: 13px; padding: 5px 18px; background: #fff; }
        .tab-pills .nav-link.active { background: #282828; color: #fff; }
        .tab-pills .nav-link:hover:not(.active) { background: #f5f5f5; }

        /* ── AD BANNERS ── */
        .ad-block { display: block; overflow: hidden; }
        .ad-block img { width: 100%; display: block; object-fit: cover; transition: transform .6s; }
        .ad-block:hover img { transform: scale(1.02); }
        .three-banners .ad-block img { height: 280px; }

        /* ── FOOTER ── */
        .site-footer { background: #111827; padding: 70px 0 40px; color: rgba(255,255,255,.75); }
        .site-footer .f-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #fff; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid #d41f27; display: inline-block; }
        .site-footer ul { list-style: none; padding: 0; margin: 0; }
        .site-footer ul li { margin-bottom: 10px; }
        .site-footer ul li a { color: rgba(255,255,255,.65); font-size: 14px; transition: .3s; }
        .site-footer ul li a:hover { color: #d41f27; padding-left: 4px; }
        .site-footer ul li i { width: 20px; margin-right: 6px; color: rgba(255,255,255,.4); }
        .f-logo { font-size: 34px; font-weight: 900; letter-spacing: 3px; color: #fff; margin-bottom: 14px; display: block; }
        .f-desc { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.55); margin-bottom: 20px; }
        .f-socials a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.6); font-size: 15px; margin-right: 8px; transition: .3s; }
        .f-socials a:hover { background: #d41f27; border-color: #d41f27; color: #fff; }
        .f-subscribe { display: flex; background: rgba(255,255,255,.1); border-radius: 30px; overflow: hidden; max-width: 380px; }
        .f-subscribe input { flex: 1; border: none; background: transparent; color: #fff; padding: 10px 18px; font-size: 13px; outline: none; }
        .f-subscribe input::placeholder { color: rgba(255,255,255,.4); }
        .f-subscribe button { background: #d41f27; border: none; color: #fff; padding: 0 20px; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 0 30px 30px 0; white-space: nowrap; }
        .f-subscribe button:hover { background: #b5161c; }
        .f-divider { border-top: 1px solid rgba(255,255,255,.08); margin-top: 50px; padding-top: 25px; }
        .copyright-bar { background: #000; padding: 11px 0; text-align: center; color: rgba(255,255,255,.6); font-size: 13px; }

/* ======================================================
   RESPONSIVE ENHANCEMENTS
====================================================== */

/* Section Paddings & Margins */
.section-padding { padding: 60px 0; }
@media (max-width: 767px) {
    .section-padding { padding: 30px 0; }
    .pb__50 { padding-bottom: 30px !important; }
    .mb__30 { margin-bottom: 15px !important; }
    .mt__30 { margin-top: 15px !important; }
}

/* Header & Nav */
@media (max-width: 1199px) {
    .logo-text { font-size: 26px; }
    .mid-nav { padding: 12px 0; }
    .nav-icons { gap: 12px; }
    .nav-icon-btn { width: 36px; height: 36px; font-size: 18px; }
}

@media (max-width: 767px) {
    .logo-text { font-size: 19px !important; letter-spacing: 0.5px !important; }
    .nav-icons { gap: 4px !important; }
    .nav-icon-btn { width: 32px !important; height: 32px !important; font-size: 15px !important; }
    .nav-icon-btn .ic-badge { top: 2px !important; right: 2px !important; width: 14px !important; height: 14px !important; font-size: 8px !important; }

    /* Product Cards Touch Enhancements */
    .pc-img { overflow: visible !important; }
    .pc-btn-group {
        position: static !important;
        opacity: 1 !important;
        padding: 8px 0 0 !important;
        margin-top: 6px !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .pc-cart-btn, .pc-buy-btn {
        width: 100% !important;
        text-align: center !important;
        padding: 8px 4px !important;
        font-size: 11.5px !important;
        border-radius: 20px !important;
        white-space: normal !important;
    }
    .pc-wish, .pc-quick {
        opacity: 1 !important;
        transform: none !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }
    .pc-wish { top: 6px !important; right: 6px !important; }
    .pc-quick { top: 40px !important; right: 6px !important; }

    /* Search Bar Mobile adjustments */
    .search-wrap { height: 40px !important; }
    .search-wrap input { padding: 0 12px !important; font-size: 13px !important; }
    .search-wrap select { padding: 0 8px !important; font-size: 12px !important; max-width: 110px !important; }
    .search-wrap button { padding: 0 16px !important; font-size: 14px !important; }
}

@media (max-width: 575px) {
    .logo-text { font-size: 17px !important; letter-spacing: 0.2px !important; }
    .mid-nav { padding: 8px 0 !important; }
    .nav-icons { gap: 3px !important; }
    .nav-icon-btn { width: 28px !important; height: 28px !important; font-size: 14px !important; }
    
    /* Search Bar Extra Narrow Screens adjustments */
    .search-wrap input { padding: 0 8px !important; font-size: 12px !important; }
    .search-wrap select { padding: 0 6px !important; font-size: 11px !important; max-width: 90px !important; text-overflow: ellipsis; }
    .search-wrap button { padding: 0 12px !important; }
}

/* Category Sidebar Margin */
@media (max-width: 991px) {
    .col-lg-3.mb-4.mb-lg-0 {
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 20px;
        margin-bottom: 30px !important;
    }
}

/* Footer Adjustments */
@media (max-width: 767px) {
    .site-footer { padding: 40px 0 20px; text-align: center; }
    .site-footer .f-logo { font-size: 28px; }
    .site-footer .row.g-5 { gap: 30px; }
    .site-footer .col-6 { text-align: left; }
    .site-footer .f-socials { justify-content: center; }
    .site-footer .f-subscribe { margin: 0 auto; }
}
@media (max-width: 575px) {
    .f-logo { font-size: 24px; }
    .site-footer { padding: 30px 0 15px; }
}

/* Product Info Adjustments (Details Page) */
@media (max-width: 767px) {
    .font-bebas { font-size: 20px !important; }
    .section-padding .border.rounded.p-3 { padding: 15px !important; }
}

/* Hero Slider Adjustments */
@media (max-width: 767px) {
    .home-slider .swiper-slide img { max-height: 350px; }
}
@media (max-width: 575px) {
    .home-slider .swiper-slide img { max-height: 250px; }
}