/* ==========================================================================
   FANOMART - MASTER HOME STYLE CSS (100% Complete & Updated)
   ========================================================================== */

/* 🟢 1. ANIMATIONS & SKELETON LOADING */
.anim-slide-left { animation: slideLeftAnim 0.8s ease-out forwards; }
@keyframes slideLeftAnim { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.anim-slide-up { animation: slideUpAnim 0.8s ease-out forwards; }
@keyframes slideUpAnim { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.anim-fade { animation: fadeAnim 1s ease-in-out forwards; }

/* Hero slider. js/slider.js used to build this markup with a long inline
   style string on every slide, including display and visibility set to
   !important, which fought this stylesheet. It now only adds classes. */
.slider-wrapper {
    position: relative; width: 100%;
    aspect-ratio: 21 / 9; min-height: 160px; max-height: 450px;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px; background-color: #f8f9fa;
}
.fano-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; z-index: 0; transition: opacity 0.6s ease;
}
.fano-slide.is-active { opacity: 1; z-index: 1; }
.fano-slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

.slider-indicators {
    position: absolute; bottom: 15px; width: 100%;
    text-align: center; z-index: 10;
}
.slider-indicators .indicator {
    width: 10px; height: 10px; border-radius: 50%;
    background: #dcdde1; border: none; padding: 0;
    margin: 0 5px; display: inline-block; cursor: pointer;
    transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.slider-indicators .indicator.is-active { background: var(--primary-color, #ff9800); }
@keyframes fadeAnim { from { opacity: 0; } to { opacity: 1; } }

/* Skeleton Shimmer Effect */
.skeleton { background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%); background-size: 200% 100%; animation: 1.5s shimmer linear infinite; border-radius: 5px; }
@keyframes shimmer { to { background-position-x: -200%; } }

.skel-card { height: 260px; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid #e1e8ed; background: #fff; border-radius: 8px; }
.skel-img { aspect-ratio: 1/1; width: 100%; border-radius: 6px; }
.skel-text { height: 12px; border-radius: 4px; }
.skel-btn { height: 35px; width: 100%; margin-top: auto; border-radius: 5px; }

/* 🟢 PREMIUM FLY-TO-CART ICON ANIMATION */
.flying-item { 
    position: fixed; 
    z-index: 999999; 
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    object-fit: cover; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
    pointer-events: none; 
}

/* 🟢 2. DESKTOP HEADER & GENERAL SETTINGS */
html, body { overflow-x: clip !important; margin: 0; padding: 0; width: 100%; }

.master-header {
    position: -webkit-sticky; 
    position: sticky; 
    top: 0; 
    z-index: 999999; 
    width: 100%;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.header-top-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; background: inherit; border-bottom: 1px solid #f1f2f6; }

/* Logo Area */
.brand-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; gap: 8px; min-width: 220px; }
.brand-logo img { height: 40px; width: auto; object-fit: contain; } 
.brand-logo span { font-size: 22px; color: var(--primary-color, #ff6600); font-weight: 900; letter-spacing: 0.5px; white-space: nowrap; }

/* Search Bar */
.header-search { flex: 1; max-width: 600px; position: relative; margin: 0 auto; }
.header-search input { width: 100%; padding: 10px 45px 10px 20px; border-radius: 25px; border: 1.5px solid var(--primary-color, #ff6600); outline: none; font-size: 13px; background: #f8f9fa; box-sizing: border-box; transition: border-color 0.3s; }
.header-search input:focus { background: #ffffff; border-color: var(--primary-color, #ff6600); }
.header-search button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: var(--primary-color, #ff6600); border: none; color: white; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; }

/* Desktop Navigation Strip */
.header-icons { display: flex; gap: 20px; align-items: center; justify-content: flex-end; color: #2c3e50; min-width: 280px; }
.nav-bottom-row { background: #111418; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.nav-bottom-row ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 10px 15px; overflow-x: auto; white-space: nowrap; align-items: center; -webkit-overflow-scrolling: touch; }
.nav-bottom-row ul::-webkit-scrollbar { height: 0px; }

/* 🟢 3. HERO LAYOUT & CATEGORIES (Desktop) */
.hero-layout { display: flex; gap: 20px; margin: 15px 0 20px 0; }
.side-categories-box { width: 30%; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; display: flex; flex-direction: column; z-index: 50; }
.cat-header { background: var(--primary-color, #ff6600); color: white; padding: 15px; font-weight: bold; font-size: 16px; }
.right-hero-box { width: 70%; display: flex; flex-direction: column; gap: 15px; }
.hero-slider-box { position: relative; text-align: center; color: #7f8fa6; font-weight: bold; background: #fff; flex: 1; border-radius: 12px; display:flex; align-items:center; justify-content:center; min-height: 250px; overflow: hidden; }

/* Category Menu Styles */
.cat-menu::-webkit-scrollbar, .sub-menu::-webkit-scrollbar { width: 4px; }
.cat-menu::-webkit-scrollbar-thumb, .sub-menu::-webkit-scrollbar-thumb { background: #bdc3c7; border-radius: 10px; }
.cat-item { position: relative; border-bottom: 1px solid #f1f2f6; background: white; }
.cat-item:last-child { border-bottom: none; }
.cat-item > a { display: flex; align-items: center; padding: 12px 15px; color: #2c3e50; text-decoration: none; font-size: 13px; font-weight: 500; transition: 0.3s; }
.cat-item > a i:first-child { width: 25px; color: #7f8fa6; text-align: center; margin-right: 10px; font-size: 14px; }
.cat-item > a .arrow { margin-left: auto; font-size: 10px; color: #bdc3c7; transition: 0.3s; }
.cat-item:hover > a { background: #f8f9fa; color: var(--primary-color, #ff6600); padding-left: 20px; }
.cat-item:hover > a i { color: var(--primary-color, #ff6600); }

.sub-menu { position: absolute; left: 100%; top: 0; width: 220px; max-height: 340px; overflow-y: auto; background: white; box-shadow: 5px 5px 15px rgba(0,0,0,0.1); border-radius: 0 8px 8px 0; border-left: 3px solid var(--primary-color, #ff6600); opacity: 0; visibility: hidden; transition: 0.3s; z-index: 100; display: flex; flex-direction: column; padding: 10px 0; }
.cat-item:hover .sub-menu { opacity: 1; visibility: visible; }
.sub-menu a { padding: 10px 20px; color: #555; text-decoration: none; font-size: 12px; transition: 0.2s; border-bottom: 1px solid #f9f9f9; }
.sub-menu a:hover { color: var(--primary-color, #ff6600); background: #f8f9fa; padding-left: 25px; font-weight: bold; }

/* Announcement Bar */
.announcement-bar-wrapper { display: none; overflow: hidden; border-radius: 8px; padding: 10px 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); position: relative; align-items: center; cursor: pointer; }
.scrolling-text { display: inline-block; animation: scroll-left 25s linear infinite; white-space: nowrap; font-size: 14px; font-weight: bold; }
.announcement-bar-wrapper:hover .scrolling-text { animation-play-state: paused; }
@keyframes scroll-left { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }

/* Trust Badges */
.trust-badges-wrapper { display: flex; justify-content: space-between; align-items: center; background: white; padding: 20px 15px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 30px; flex-wrap: nowrap; overflow-x: auto; gap: 15px; scrollbar-width: none; }
.trust-badges-wrapper::-webkit-scrollbar { display: none; }
.trust-badge { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 140px; }
.trust-badge h4 { margin: 0; font-size: 12px; color: #2c3e50; font-weight: bold; white-space: nowrap; }
.trust-badge p { margin: 0; font-size: 10px; color: #7f8fa6; }
/* Badge icon colours. They used to be inline styles on each badge in
   index.html, which stopped working the moment the badges were built from
   the admin panel. nth-child keeps the same sequence whatever the admin
   names them, and repeats after five so an extra badge is never colourless. */
.trust-badge i { font-size: 24px; }
.trust-badge:nth-child(5n + 1) i { color: #2ecc71; }
.trust-badge:nth-child(5n + 2) i { color: #3498db; }
.trust-badge:nth-child(5n + 3) i { color: #f39c12; }
.trust-badge:nth-child(5n + 4) i { color: #9b59b6; }
.trust-badge:nth-child(5n + 5) i { color: #1abc9c; }

/* 🟢 4. DESKTOP PRODUCT GRID */
.section-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; border-bottom: 2px solid #f1f2f6; padding-bottom: 10px; margin-bottom: 20px; margin-top: 30px; gap: 15px; }
.section-header h2 { margin: 0; font-size: 22px; color: #2c3e50; font-weight: bold; border-left: 4px solid var(--primary-color, #ff6600); padding-left: 10px; white-space: nowrap; }
.view-all-link { background: #f8f9fa; color: var(--primary-color, #ff6600); text-decoration: none; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 5px; transition: 0.3s; white-space: nowrap; border: 1px solid #eee; }
.view-all-link:hover { background: var(--primary-color, #ff6600); color: white; }

.products-grid { display: flex; overflow-x: auto; gap: 15px; padding-bottom: 15px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; align-items: stretch; }
.products-grid::-webkit-scrollbar { height: 6px; }
.products-grid::-webkit-scrollbar-track { background: #f1f2f6; border-radius: 10px; }
.products-grid::-webkit-scrollbar-thumb { background: #bdc3c7; border-radius: 10px; }
@media (min-width: 1024px) { .products-grid.grid-layout { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 15px; overflow-x: hidden; } }

/* Product Card Design */
.product-card { position: relative; background: white; border: 1px solid #e1e8ed; border-radius: 8px; padding: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); transition: 0.3s; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.08); }

.products-grid:not(.grid-layout) .product-card { flex: 0 0 calc(33.33% - 10px); width: calc(33.33% - 10px); }

.prod-img-box { width: 100%; aspect-ratio: 1 / 1; background-color: #f8f9fa; border-radius: 6px; overflow: hidden; display: flex; justify-content: center; align-items: center; border: 1px solid #f1f2f6; }
.product-img-src { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.product-card:hover .product-img-src { transform: scale(1.05); }

/* Card Content */
.product-card h3 { margin-top: 12px; font-size: 14px; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.product-card p { color: #7f8fa6; font-size: 12px; text-transform: capitalize; margin-top: 4px; margin-bottom: 0; }
.price-row { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; }
.sale-price { color: var(--primary-color, #ff6600); font-weight: bold; font-size: 16px; }
.old-price { text-decoration: line-through; color: #bdc3c7; font-size: 12px; }
.add-to-cart-dynamic { width: 100%; margin-top: 12px; padding: 8px; border: none; border-radius: 5px; font-size: 13px; font-weight: bold; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; color: white; background: var(--btn-gradient, #ff6600); }

/* 🟢 5. PARTNER STRIP & NEWSLETTER */
/* Promo banner colours are chosen in admin/promo-banner-settings.html.
   They are declared here as tokens with the current values as defaults, so
   the banner looks exactly the same before any setting is applied. The
   admin values arrive as custom properties on this element - no inline
   styles and no !important anywhere in the path. */
.partner-strip {
    --promo-bg-outer: #f1f2f6;
    --promo-bg-left: #ffffff;
    --promo-bg-right: #f8fbfb;
    background-color: var(--promo-bg-outer);
    padding: 30px 0; margin-top: 30px; margin-bottom: 0px !important; border-radius: 12px;
}
.partner-container-inner { background: var(--promo-bg-left, #ffffff); border-radius: 12px; display: flex; flex-direction: row; align-items: stretch; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; }
.partner-left { flex: 2.5; padding: 30px; border-right: 1px solid #eee; min-width: 60%; }
.partner-right { flex: 1; padding: 30px; background-color: var(--promo-bg-right, #f8fbfb); display: flex; flex-direction: column; justify-content: center; min-width: 35%; }
.partner-header h2 { font-size: 20px; color: #2c3e50; font-weight: 800; margin-bottom: 5px; }
.partner-header p { font-size: 13px; color: #7f8fa6; margin-bottom: 20px; }
.partner-steps-wrapper { display: flex; flex-direction: row; justify-content: space-between; gap: 10px; text-align: center; }
.step-item { flex: 1; }
.step-icon-circle { width: 45px; height: 45px; background: #f8f9fa; color: var(--primary-color, #ff6600); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto 10px auto; border: 2px dashed #bdc3c7; transition: 0.3s; }
.step-item:hover .step-icon-circle { background: var(--primary-color, #ff6600); color: white; border-color: var(--primary-color, #ff6600); }
.step-item h4 { font-size: 12px; color: #2c3e50; margin-bottom: 5px; font-weight: bold; }
.step-item p { font-size: 10px; color: #7f8fa6; line-height: 1.3; }
.partner-right h3 { font-size: 16px; margin-bottom: 15px; color: #2c3e50; font-weight: 800; }
.partner-right h3 span { color: var(--primary-color, #ff6600); }
.partner-features-list { list-style: none; padding: 0; margin: 0; flex: 1; }
.partner-features-list li { font-size: 12px; color: #555; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; font-weight: 500; }
.partner-features-list li i { color: #2ecc71; font-size: 14px; }
.partner-benefits-row { display: flex; gap: 15px; margin-bottom: 15px; }

/* Button colours stay with admin/theme-settings.html, which owns every
   button on the site. The promo panel deliberately has no say here, so
   this rule keeps reading the theme's own gradient token.
   The !important on the colour was unnecessary: a class beats the plain
   `a` rule in global.css on specificity alone. */
.start-earning-btn { background: var(--btn-gradient, #ff6600); color: #ffffff; padding: 12px 20px; border-radius: 25px; font-weight: bold; text-decoration: none; display: block; font-size: 13px; text-align: center; transition: 0.3s; border: none; width: 100%; box-sizing: border-box; }
.start-earning-btn:hover { transform: translateY(-2px); opacity: 0.9; }
.ad-box { background: #fff3e0; border: 1px dashed var(--primary-color, #ff9800); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; flex: 1; }
.ad-box h4 { font-size: 11px; color: #d35400; margin-bottom: 2px; font-weight: bold; }
.ad-box p { font-size: 9px; color: #7f8fa6; margin: 0; line-height: 1.2; }
.ad-box i { font-size: 20px; color: var(--primary-color, #ff9800); margin-bottom: 5px; }

/* Image mode: admin/promo-banner-settings.html can replace the text box with
   an uploaded banner. The box keeps exactly the same footprint; only our own
   frame is removed so the designer's artwork is not boxed inside it.
   object-fit: cover crops to fill, so any aspect ratio still looks right. */
.ad-box.is-image { padding: 0; border: none; background: none; overflow: hidden; }
.ad-box.is-image .ad-box-media { display: block; width: 100%; height: 100%; min-height: 90px; border-radius: 8px; overflow: hidden; }
.ad-box.is-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.newsletter-section-home { margin-top: 15px; margin-bottom: 40px !important; position: relative; z-index: 10; }
.newsletter-container-home { background: #ffffff; border-radius: 12px; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.nl-left { display: flex; align-items: center; gap: 10px; flex: 1; }
.nl-left i { font-size: 24px; color: var(--primary-color, #ff6600); }
.nl-left h4 { margin: 0; font-size: 13px; color: #2c3e50; font-weight: 800; }
.nl-left p { margin: 2px 0 0 0; font-size: 11px; color: #7f8fa6; }
.nl-center { flex: 1; display: flex; background: #f8f9fa; border-radius: 30px; padding: 4px; border: 1px solid #eee; }
.nl-center input { flex: 1; border: none; background: transparent; padding: 8px 15px; font-size: 12px; outline: none; }
.nl-center button { background: var(--btn-gradient, #ff6600); border: none; color: white; padding: 8px 20px; border-radius: 25px; font-weight: bold; cursor: pointer; transition: 0.3s; white-space: nowrap; }

/* 🟢 6. FOOTER DESKTOP STYLES */
.footer-dark { background-color: var(--footer-bg, #111418) !important; color: #a0aab2; padding: 25px 0 15px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border-top: 4px solid var(--primary-color, #ff6600); margin-top: 0px !important; }
.footer-grid { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between; gap: 15px; padding: 0 15px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.footer-grid::-webkit-scrollbar { height: 3px; }
.footer-grid::-webkit-scrollbar-thumb { background: var(--primary-color, #ff6600); border-radius: 10px; }
.footer-col { flex: 1; min-width: 130px; }
.footer-col h3 { color: var(--primary-color, #ff6600); font-size: 13px; margin-bottom: 12px; font-weight: 700; white-space: nowrap; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { color: #94a3b8; text-decoration: none; font-size: 11px; transition: 0.3s; white-space: nowrap; }
.footer-col ul li a:hover { color: #ffffff; padding-left: 4px; }
.social-circles { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.social-circles a { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; font-size: 12px; transition: 0.3s; flex-shrink: 0; background: #1e242b; }
.social-circles a:hover { transform: scale(1.1); background: var(--primary-color, #ff6600); }
.app-buttons-wrapper { display: flex; flex-direction: column; gap: 8px; }
.app-btn { display: inline-flex; align-items: center; gap: 8px; background: #1e242b; color: white; text-decoration: none; padding: 6px 12px; border-radius: 6px; border: 1px solid #2d3748; transition: 0.3s; width: max-content; }
.app-btn:hover { background: #2d3748; border-color: var(--primary-color, #ff6600); }
.app-btn i { font-size: 18px; }
.app-btn .txt { display: flex; flex-direction: column; }
.app-btn .txt small { font-size: 8px; color: #a0aab2; line-height: 1; margin-bottom: 2px; }
.app-btn .txt strong { font-size: 11px; line-height: 1; }
.footer-bottom { display: flex; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between; align-items: center; border-top: 1px solid #1e242b; margin-top: 20px; padding: 15px 15px 0 15px; gap: 15px; font-size: 11px; color: #64748b; overflow-x: auto; }
.footer-bottom::-webkit-scrollbar { height: 0px; }
.payment-methods { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.payment-methods span { background: #1e242b; color: white; padding: 3px 6px; border-radius: 3px; font-weight: bold; font-size: 9px; border: 1px solid #2d3748; white-space: nowrap; }

/* TABLET VIEW */
@media (max-width: 992px) {
    .partner-container-inner { flex-direction: column !important; }
    .partner-left, .partner-right { border-right: none; padding: 20px; }
    .partner-steps-wrapper { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 15px; justify-content: flex-start; }
    .step-item { flex: 0 0 auto; width: 110px; }
    .products-grid.grid-layout { grid-template-columns: repeat(3, 1fr) !important; }
}


/* ========================================= */
/* 🟢 6.5. DYNAMIC SLIDERS (TYPE A & B)      */
/* ========================================= */

/* ------ TYPE A: Center-Focused Continuous Stack ------ */
.dynamic-slider-wrapper { width: 100%; margin: 35px 0; overflow: hidden; }
.fano-slider-type-a { width: 100%; overflow: hidden; padding: 20px 0; position: relative; background: transparent; }
/* The image box follows the ratio the admin chose for this slider. */
.dynamic-slider-wrapper .fano-card-a img { aspect-ratio: var(--item-ratio, 1); object-fit: cover; width: 100%; }
.dynamic-slider-wrapper .fano-pill-b img { aspect-ratio: var(--item-ratio, 1); object-fit: cover; }
.fano-card-a .info .desc { display: block; font-size: 11px; color: #7f8fa6; margin-top: 2px; }
.fano-track-a { display: flex; align-items: center; gap: 15px; width: max-content; animation: typeA_scroll var(--track-duration, 20s) linear infinite; }
.fano-slider-type-a:hover .fano-track-a { animation-play-state: paused; }
.fano-card-a { width: 260px; flex-shrink: 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.06); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; border: 1px solid #eee; transition: transform 0.4s ease, box-shadow 0.4s ease; transform: scale(0.9); opacity: 0.7; }
@media (min-width: 768px) { .fano-card-a { width: 320px; } }
.fano-card-a:hover, .fano-card-a.active-center { transform: scale(1.05); opacity: 1; box-shadow: 0 10px 25px rgba(255,102,0,0.15); border-color: #ff6600; z-index: 2; }
.fano-card-a img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #f8f9fa; border-bottom: 1px solid #f1f2f6;}
.fano-card-a .info { padding: 15px; text-align: center; }
.fano-card-a .info h4 { margin: 0 0 5px; font-size: 15px; color: #2c3e50; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fano-card-a .info p { margin: 0 0 10px; font-size: 14px; color: #ff6600; font-weight: 900; }
.fano-card-a .info .btn { display: inline-block; padding: 8px 20px; background: #2c3e50; color: white; border-radius: 6px; font-size: 12px; font-weight: bold; width: 100%; box-sizing: border-box; }
@keyframes typeA_scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ------ TYPE B: Continuous Marquee Pills ------ */
.fano-slider-type-b { width: 100%; overflow: hidden; padding: 12px 0; background: #f8f9fa; border-top: 1px solid #eee; border-bottom: 1px solid #eee; display: flex; white-space: nowrap; position: relative; }
.fano-track-b { display: flex; gap: 15px; align-items: center; padding-left: 15px; width: max-content; animation: typeB_scroll var(--track-duration, 15s) linear infinite; }
.fano-slider-type-b:hover .fano-track-b { animation-play-state: paused; }
.fano-pill-b { display: inline-flex; align-items: center; gap: 10px; background: #fff; padding: 6px 16px 6px 6px; border-radius: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid #eee; text-decoration: none; color: #2c3e50; font-weight: 700; font-size: 13px; transition: 0.3s; }
.fano-pill-b:hover { border-color: #ff6600; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255,102,0,0.1); }
.fano-pill-b img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #f1f2f6; }
.fano-pill-b span.price { color: #ff6600; font-weight: 900; margin-left: 4px; }
@keyframes typeB_scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }


/* ========================================================================================= */
/* 🔴 7. MOBILE SUPER SLIM RESPONSIVE (FACEBOOK STYLE 2-ROW HEADER & SIDEBAR)                */
/* ========================================================================================= */
@media (max-width: 768px) {
    
    .master-header { position: sticky; top: 0; z-index: 999999; background: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
    
    /* 🌟 قدرتی 2 لائنوں والا ہیڈر 🌟 */
    .header-top-row { display: flex !important; flex-wrap: wrap !important; padding: 10px 15px !important; gap: 12px 0 !important; align-items: center; justify-content: space-between; border-bottom: 1px solid #f1f2f6; }
    
    /* 🟢 لائن 1 کی سیٹنگ: ہیمبرگر، لوگو، اور آئیکنز */
    .mobile-hamburger-btn { display: block; background: transparent; border: none; font-size: 22px; color: #333; padding: 0; cursor: pointer; order: 1; width: 35px; text-align: left; }
    
    .brand-logo { order: 2; flex: 1; justify-content: center !important; margin: 0 !important; min-width: auto !important; }
    .brand-logo img { max-height: 3px !important; } 
    .brand-logo span { font-size: 20px !important; }
    
    .header-icons { display: flex !important; order: 3; width: auto !important; min-width: auto !important; gap: 15px !important; }
    .header-icons .desktop-text { display: none !important; }
    
    /* 🟢 لائن 2 کی سیٹنگ: سرچ بار پوری چوڑائی (100%) */
    .header-search { order: 4; flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; }
    .mobile-search-avatar { display: block; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 1px solid #eee; flex-shrink: 0; background: #f8f9fa; }
    .mobile-search-avatar img { width: 100%; height: 100%; object-fit: cover; }
    
    .header-search input { flex: 1; padding: 10px 40px 10px 15px !important; font-size: 13px !important; border-radius: 25px !important; margin: 0 !important; border: 1px solid var(--primary-color, #ff6600) !important; background: #f0f2f5 !important; }
    .header-search button { width: 32px !important; height: 32px !important; right: 4px !important; font-size: 13px !important; background: var(--primary-color, #ff6600) !important; border: none !important; }
    
    .nav-bottom-row { display: none !important; }
    
    /* 🌟 موبائل سائیڈ مینیو (Sidebar) 🌟 */
    .mobile-sidebar-panel { position: fixed; top: 0; left: -280px; width: 260px; height: 100%; background: #fff; z-index: 1000000; box-shadow: 5px 0 15px rgba(0,0,0,0.1); transition: 0.3s ease-in-out; overflow-y: auto; display: flex; flex-direction: column; }
    .mobile-sidebar-panel.active { left: 0; }
    .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #eee; background: #f8f9fa; }
    .sidebar-header button { background: none; border: none; font-size: 20px; color: #555; cursor: pointer; }
    .sidebar-links-list { list-style: none; padding: 0; margin: 0; }
    .sidebar-links-list li a { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid #f9f9f9; text-decoration: none; font-weight: 600; color: #333; font-size: 14px; }
    .sidebar-links-list li.highlight a { color: var(--primary-color, #ff6600); background: #fff3e0; }
    .mobile-sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999999; opacity: 0; visibility: hidden; transition: 0.3s; }
    .mobile-sidebar-overlay.active { opacity: 1; visibility: visible; }
    
    main.container { padding: 0 !important; margin: 0 auto !important; max-width: 100vw !important; width: 100% !important; overflow-x: hidden !important; }
    .hero-layout { flex-direction: column; margin: 0 !important; padding: 0 !important; gap: 0px !important; }
    
    .side-categories-box { width: 100% !important; z-index: 1; display: block !important; margin-top: 0px !important; margin-bottom: 5px !important; border-radius: 0 !important; box-shadow: none !important; background: #ffffff !important; border-bottom: 1px solid #eee !important; }
    .cat-header { display: none !important; } 
    .cat-menu { display: flex !important; flex-direction: row !important; overflow-x: auto !important; max-height: auto !important; padding: 8px 10px !important; gap: 15px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .cat-menu::-webkit-scrollbar { display: none; }
    .cat-item { border: none !important; border-radius: 0 !important; flex-shrink: 0; background: transparent !important; padding: 0 !important; margin: 0 !important; }
    
    /* 🌟 اصلاح شدہ: موبائل پر زبردستی فکسڈ سائز ہٹا دیا گیا ہے تاکہ ایڈمن کا کلر اور قدرتی سائز برقرار رہے 🌟 */
    .cat-item > a { padding: 0px !important; font-weight: bold !important; display: flex; align-items: center; gap: 4px; }
    .cat-item > a i:first-child { display: inline-block; margin-right: 0px; color: inherit !important; font-size: 14px !important; }
    .cat-item > a .arrow { display: none !important; }
    .sub-menu { display: none !important; }

    .right-hero-box { width: 100% !important; padding: 0 !important; gap: 0 !important; }
    .hero-slider-box { min-height: 140px !important; border-radius: 8px !important; margin-bottom: 5px !important; margin: 0 10px; width: calc(100% - 20px); }
    .announcement-bar-wrapper { padding: 5px 10px !important; border-radius: 6px !important; margin: 5px 10px !important; width: calc(100% - 20px); }
    .scrolling-text { font-size: 12px !important; }
    
    .trust-badges-wrapper { justify-content: flex-start !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding: 8px 8px 15px 8px !important; margin: 0 10px 10px 10px !important; border-radius: 8px !important; gap: 12px !important; scrollbar-width: none; }
    .trust-badges-wrapper::-webkit-scrollbar { display: none; }
    .trust-badge { flex: 0 0 auto !important; min-width: 140px !important; gap: 8px !important; white-space: nowrap !important; }
    /* This rule also forced every icon to the site's primary colour, so the
       five colours above showed on desktop and one colour on mobile. Only
       the size belongs in a breakpoint. */
    .trust-badge i { font-size: 16px; }
    .trust-badge h4 { font-size: 10px !important; }
    .trust-badge p { display: none; } 
    
    .products-section { margin-bottom: 10px !important; padding: 0 10px !important; }
    .section-header { margin: 15px 0 10px 0 !important; padding-bottom: 0 !important; border-bottom: none !important; }
    .section-header h2 { font-size: 16px !important; border-left-width: 3px !important; border-color: var(--primary-color, #ff6600) !important; padding-left: 6px !important; }
    .view-all-link { padding: 4px 10px !important; font-size: 11px !important; border-radius: 12px !important; background: #fff3e0 !important; color: var(--primary-color, #ff6600) !important; border: none !important; }
    
    .products-grid:not(.grid-layout) { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; padding-bottom: 10px !important; }
    .products-grid:not(.grid-layout) .product-card { flex: 0 0 calc(50% - 5px) !important; width: calc(50% - 5px) !important; min-width: 0 !important; }

    .products-grid.grid-layout { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 0 !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }
    
    .product-card { padding: 8px !important; border-radius: 8px !important; border: 1px solid #eaeaea !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }
    .prod-img-box { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; border-radius: 6px !important; border: none !important; }
    .skel-card { height: 220px !important; padding: 8px !important; }
    .skel-img { aspect-ratio: 1/1 !important; height: auto !important; border-radius: 6px !important; }
    
    .product-card h3 { font-size: 12px !important; margin: 8px 0 2px 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .product-card p { font-size: 10px !important; margin: 0 0 4px 0 !important; }
    .price-row { padding-top: 5px !important; }
    .sale-price { font-size: 14px !important; color: var(--primary-color, #ff6600) !important; }
    .old-price { font-size: 10px !important; }
    
    .product-card .add-to-cart-dynamic { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; height: 34px !important; padding: 0 !important; font-size: 11px !important; font-weight: bold !important; margin-top: 8px !important; border-radius: 6px !important; width: 100% !important; text-align: center !important; background: var(--btn-gradient, #ff6600) !important; }
    .product-card .add-to-cart-dynamic i { margin: 0 !important; font-size: 13px !important; }
    
    /* 🟢 DYNAMIC SLIDERS MOBILE ADJUSTMENTS */
    .dynamic-slider-wrapper { margin: 15px 0 !important; }
    .fano-slider-type-a { padding: 10px 0 !important; }
    .fano-card-a { width: 220px !important; } /* A bit smaller for mobile to fit nicely */
    
    .partner-strip { padding: 15px 10px !important; margin: 15px 10px !important; border-radius: 8px !important;}
    .partner-left, .partner-right { padding: 15px !important; } 
    .newsletter-section-home { margin: 10px 0 !important; padding-bottom: 5px !important; }
    .newsletter-container-home { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 20px 15px !important; margin: 0 10px !important; border-radius: 8px !important; text-align: center !important; box-sizing: border-box !important; } 
    .nl-left { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; margin-bottom: 15px !important; width: 100% !important; }
    .nl-left i { margin-bottom: 5px !important; font-size: 28px !important; color: var(--primary-color, #ff6600) !important; }
    .nl-left h4 { font-size: 15px !important; }
    
    .nl-center { width: 100% !important; display: flex !important; flex-direction: row !important; box-sizing: border-box !important; padding: 4px !important; border-radius: 25px !important; background: #f8f9fa !important; border: none !important;}
    .nl-center input { width: 100% !important; min-width: 0 !important; border: none !important; background: transparent !important; padding-left: 15px !important; font-size: 12px !important;} 
    .nl-center button { flex-shrink: 0 !important; border-radius: 25px !important; padding: 8px 15px !important; font-size: 12px !important; background: var(--btn-gradient, #ff6600) !important;}
    
    .footer-dark { padding: 25px 15px 15px 15px !important; margin-top: 15px !important; }
    .footer-grid { display: flex !important; flex-direction: column !important; gap: 25px !important; padding: 0 !important; }
    .footer-col { width: 100% !important; min-width: 0 !important; text-align: left !important; } 
    .footer-col ul li { margin-bottom: 12px !important; }
    
    .social-circles { flex-wrap: wrap !important; }
    .footer-bottom { flex-direction: column !important; text-align: center; gap: 15px; margin-top: 25px !important; border-top: 1px solid rgba(255,255,255,0.05) !important; padding-top: 15px !important;}
    .payment-methods { justify-content: center; width: 100%; flex-wrap: wrap; }
}