/* ==========================================================================
   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. GENERAL SETTINGS */
html, body { overflow-x: clip !important; margin: 0; padding: 0; width: 100%; }

/* The .master-header / .header-top-row / .brand-logo / .header-search /
   .header-icons / .nav-bottom-row block that used to sit here was a full
   duplicate header, from before components/header.html existed as the
   shared component. Its class names collided with the real header's -
   .header-icons is also the id="dynamic-header-icons" box in the live
   header - and it had no display:none or scoping to stop it, so its
   min-width and justify-content landed on the real icon box with nothing
   in the real header's own CSS contesting those two properties. That
   opened a gap between the search bar and the account/wishlist/cart icons
   on every page loading this stylesheet (the homepage only). Removed
   rather than fixed in place, since the real header already owns this. */

/* 🟢 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 */
/* components.css sets .products-section to margin: 50px 0, which is what
   was stacking up between "Trending Products", "Flash Deals" and the rest
   on desktop - the mobile media query already had its own much smaller
   override, but nothing reduced it for desktop. */
.products-section { margin: 10px 0 !important; }
.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: 10px; 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); }

/* S-01: carousel cards keep a product-card size on wide screens instead of
   stretching to a third of the row. (Mobile keeps 2 per view, below.) */
.products-grid:not(.grid-layout) .product-card { flex: 0 0 clamp(180px, 22%, 240px); width: clamp(180px, 22%, 240px); }

.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.
   No card look on any screen size now (S-19) - background, radius and
   shadow removed below. The colour tokens stay declared here since
   admin/promo-banner-settings.html still writes to them, but with no
   background left to paint them onto, an admin-set banner colour no
   longer shows anywhere. */
.partner-strip {
    --promo-bg-outer: #f1f2f6;
    --promo-bg-left: #ffffff;
    --promo-bg-right: #f8fbfb;
    padding: 30px 0; margin-top: 30px; margin-bottom: 0px !important;
}
.partner-container-inner { display: flex; flex-direction: row; align-items: stretch; 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 { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 0; }
.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 HOMEPAGE CONTENT (header & sidebar now owned by components/header.html)      */
/* ========================================================================================= */
@media (max-width: 768px) {

    /* The .master-header / .header-top-row / .mobile-hamburger-btn /
       .brand-logo / .header-icons / .header-search / .nav-bottom-row /
       .mobile-sidebar-panel / .sidebar-header / .sidebar-links-list /
       .mobile-sidebar-overlay rules that used to sit here duplicated the
       real header's mobile layout and sidebar under the same class names -
       see the matching note in section 2 above. Removed for the same
       reason; everything below this point is genuine homepage content. */

    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-top: 4px !important; margin-bottom: 4px !important; padding: 0 10px !important; }
    .section-header { margin: 6px 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: 6px !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; }
    /* Was 220px, wide enough that only about one card fit in view at a
       time (a sliver of the one before it and the one after). Narrower
       cards mean two now sit fully in view together, with the next and
       previous still peeking in at each edge - same continuous scroll,
       same center-card zoom (highlightCenterCard() in js/slider.js),
       just more of the row visible at once. The card's own contents
       (image, heading, price, button) are scaled down to match. */
    .fano-track-a { gap: 8px !important; }
    .fano-card-a { width: 150px !important; }
    .fano-card-a .info { padding: 8px !important; }
    .fano-card-a .info h4 { font-size: 12px !important; margin: 0 0 3px !important; }
    .fano-card-a .info p { font-size: 11px !important; margin: 0 0 6px !important; }
    .fano-card-a .info .desc { font-size: 9px !important; }
    .fano-card-a .info .btn { font-size: 10px !important; padding: 5px 8px !important; }

    /* Same card-removal as the product page: no background, shadow or
       radius on mobile. This also means an admin-set banner background
       colour (--promo-bg-outer/--promo-bg-left) won't show on mobile -
       worth knowing if that colour is actually in use. */
    .partner-strip { padding: 10px 10px 0 !important; margin: 8px 0 0 !important; }
    .partner-left, .partner-right { padding: 10px !important; }
    .partner-header h2 { font-size: 17px !important; }
    .partner-header p { font-size: 12px !important; margin-bottom: 12px !important; }
    /* Steps: was a fixed 110px (set in the tablet breakpoint above), wide
       enough that only 3 fit in view and a 4th needed a scroll. Narrower
       icons and text mean 4 fit together, with a 5th still peeking in to
       show more is there. */
    .step-item { width: 80px !important; }
    .step-icon-circle { width: 34px !important; height: 34px !important; font-size: 14px !important; margin-bottom: 6px !important; }
    .step-item h4 { font-size: 10.5px !important; margin-bottom: 3px !important; }
    .step-item p { font-size: 9px !important; }
    .partner-right h3 { font-size: 14px !important; margin-bottom: 10px !important; }
    .partner-features-list li { font-size: 11px !important; margin-bottom: 6px !important; }
    .partner-benefits-row { gap: 10px !important; margin-bottom: 10px !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: 15px !important; margin: 0 10px !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; }
}