/* Phase 7 - Category Load More + Product Pagination */
.af-load-more{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 24px;
    border:1px solid var(--af-line);
    background:#fff;
    color:var(--af-ink);
    font-weight:900;
    border-radius:999px;
    box-shadow:0 10px 22px rgba(15,23,42,.05);
}
.af-load-more:hover{
    background:var(--af-yellow);
    color:#111827;
}
.af-load-more:disabled{
    opacity:.65;
    cursor:not-allowed;
}
.af-pagination-wrap{
    margin-top:34px;
    display:flex;
    justify-content:center;
}
.af-pagination{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    list-style:none;
    padding:0;
    margin:0;
}
.af-pagination a,
.af-pagination span{
    min-width:38px;
    height:38px;
    padding:0 12px;
    border:1px solid var(--af-line);
    background:#fff;
    color:var(--af-ink);
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:13px;
}
.af-pagination a:hover,
.af-pagination a.active{
    background:var(--af-yellow);
    border-color:var(--af-yellow);
    color:#111827;
}
.af-pagination a.disabled{
    opacity:.45;
    pointer-events:none;
}

/* Phase 9.3 - Image Only Banner Ads */
.af-image-ads-section{
    padding-top:10px;
    padding-bottom:10px;
}
.af-image-ads-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}
.af-image-only-ad{
    display:block;
    overflow:hidden;
    border-radius:6px;
    background:#f8fafc;
    border:1px solid var(--af-line);
    box-shadow:0 14px 34px rgba(15,23,42,.06);
    transition:.18s ease;
}
.af-image-only-ad:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(15,23,42,.10);
}
.af-image-only-ad img{
    display:block;
    width:100%;
    height:260px;
    object-fit:cover;
}
@media(max-width:767px){
    .af-image-ads-grid{grid-template-columns:1fr;gap:14px}
    .af-image-only-ad img{height:auto;max-height:320px}
}

/* Phase 9.4 - Display Mode Image Only for Hero/Side/Wide */
.af-banner-image-only{
    padding:0!important;
    overflow:hidden;
    text-decoration:none;
}
.af-banner-image-only img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.af-hero-main.af-banner-image-only{
    min-height:330px;
    background:#f8fafc;
}
.af-side-card.af-banner-image-only{
    min-height:155px;
    background:#f8fafc;
}
.af-wide-image-only{
    display:block;
    border-radius:6px;
    overflow:hidden;
    border:1px solid var(--af-line);
    box-shadow:0 14px 34px rgba(15,23,42,.06);
}
.af-wide-image-only img{
    width:100%;
    height:260px;
    object-fit:cover;
}
@media(max-width:767px){
    .af-hero-main.af-banner-image-only{min-height:260px}
    .af-side-card.af-banner-image-only{min-height:170px}
    .af-wide-image-only img{height:auto;max-height:320px}
}

/* Phase 9.6 - Image Only banners should show the full uploaded artwork */
.af-hero-main.af-banner-image-only,
.af-side-card.af-banner-image-only,
.af-wide-image-only,
.af-image-only-ad{
    background:#fff!important;
    border:1px solid var(--af-line)!important;
    border-radius:8px!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
    padding:0!important;
}

.af-hero-main.af-banner-image-only img,
.af-side-card.af-banner-image-only img,
.af-wide-image-only img,
.af-image-only-ad img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#fff!important;
    padding:0!important;
}

/* Big left banner: full artwork, no crop */
.af-hero-main.af-banner-image-only{
    min-height:330px!important;
}

/* Right half banners: keep them as clean cards */
.af-side-card.af-banner-image-only{
    min-height:155px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

/* Wider ads if used later */
.af-wide-image-only{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:260px!important;
}

@media(max-width:991px){
    .af-hero-main.af-banner-image-only{min-height:280px!important}
    .af-side-card.af-banner-image-only{min-height:190px!important}
}

@media(max-width:767px){
    .af-hero-main.af-banner-image-only,
    .af-side-card.af-banner-image-only{
        min-height:auto!important;
        aspect-ratio:16/9;
    }
}

/* Phase 9.7 - Text banner image usage modes */
.af-banner-content-mode{
    position:relative;
}
.af-banner-content-mode.af-image-usage-hidden{
    background:linear-gradient(135deg,#eef8ff,#ffffff)!important;
}
.af-side-card.af-image-usage-hidden:nth-child(2),
.af-side-card.af-image-usage-hidden{
    background:linear-gradient(135deg,#fff7ef,#ffffff)!important;
}
.af-banner-content-mode.af-image-usage-hidden .af-hero-content,
.af-banner-content-mode.af-image-usage-hidden .af-banner-text-card{
    background:#fff;
    border:1px solid var(--af-line);
    border-radius:14px;
    padding:24px;
    box-shadow:0 14px 34px rgba(15,23,42,.08);
}
.af-hero-main.af-image-usage-hidden .af-hero-content{
    max-width:500px;
}
.af-side-card.af-image-usage-hidden{
    display:flex;
    align-items:center;
}
.af-side-card.af-image-usage-hidden .af-banner-text-card{
    width:100%;
    padding:20px;
}
.af-banner-content-mode.af-image-usage-card{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:center;
    background:#fff!important;
}
.af-side-card.af-image-usage-card{
    grid-template-columns:120px 1fr;
    gap:18px;
    padding:18px!important;
}
.af-register-band.af-image-usage-card{
    grid-template-columns:220px 1fr auto;
}
.af-banner-card-image{
    width:100%;
    overflow:hidden;
    border-radius:14px;
    background:#f8fafc;
    border:1px solid var(--af-line);
}
.af-hero-main .af-banner-card-image{
    height:230px;
}
.af-side-card .af-banner-card-image{
    height:110px;
}
.af-register-band .af-banner-card-image{
    height:160px;
}
.af-banner-card-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
.af-image-usage-card .af-banner-text-card{
    position:relative;
    z-index:2;
}
@media(max-width:991px){
    .af-banner-content-mode.af-image-usage-card,
    .af-register-band.af-image-usage-card{
        grid-template-columns:1fr!important;
    }
    .af-side-card.af-image-usage-card{
        grid-template-columns:110px 1fr!important;
    }
}
@media(max-width:575px){
    .af-side-card.af-image-usage-card{
        grid-template-columns:1fr!important;
    }
}

/* Phase 9.8 - Banner modes are independent per banner */
.af-hero-main.af-image-usage-background .af-hero-content,
.af-side-card.af-image-usage-background .af-banner-text-card,
.af-register-band.af-image-usage-background .af-banner-text-card{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
}

.af-side-card.af-image-usage-background{
    display:block!important;
}

.af-hero-main.af-image-usage-hidden{
    display:flex!important;
    align-items:center!important;
}
.af-hero-main.af-image-usage-hidden .af-hero-content{
    background:#fff!important;
    border:1px solid var(--af-line)!important;
    border-radius:14px!important;
    padding:24px!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
}

.af-side-card.af-image-usage-hidden .af-banner-text-card{
    background:#fff!important;
    border:1px solid var(--af-line)!important;
    border-radius:14px!important;
    padding:20px!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
}

.af-register-band.af-image-usage-hidden .af-banner-text-card{
    background:#fff!important;
    border:1px solid var(--af-line)!important;
    border-radius:14px!important;
    padding:24px!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
}

/* Card mode only affects the banner that has af-image-usage-card */
.af-hero-main.af-image-usage-card,
.af-side-card.af-image-usage-card,
.af-register-band.af-image-usage-card{
    background:#fff!important;
}

.af-hero-main.af-image-usage-card{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:center;
}

.af-side-card.af-image-usage-card{
    display:grid!important;
    grid-template-columns:120px 1fr;
    gap:18px;
    align-items:center;
    padding:18px!important;
}

.af-register-band.af-image-usage-card{
    display:grid!important;
    grid-template-columns:220px 1fr auto;
    gap:24px;
    align-items:center;
}

.af-image-usage-card .af-banner-text-card{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
}

@media(max-width:991px){
    .af-hero-main.af-image-usage-card,
    .af-register-band.af-image-usage-card{
        grid-template-columns:1fr!important;
    }
}
@media(max-width:575px){
    .af-side-card.af-image-usage-card{
        grid-template-columns:1fr!important;
    }
}

/* Phase 10 - Price visibility */
.af-price-hidden{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:7px 12px;
    border-radius:999px;
    background:var(--af-blue-soft);
    color:var(--af-blue-dark);
    font-weight:900;
    font-size:13px;
    margin:6px 0;
}
.af-login-price-link{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 12px;
    border-radius:999px;
    background:var(--af-orange-soft);
    color:var(--af-orange);
    font-weight:900;
    font-size:12px;
    text-decoration:none;
}
.af-login-price-link:hover{
    background:var(--af-orange);
    color:#fff;
}

/* Phase 11 - Customer approval messages */
.af-approval-notice{
    border-radius:16px;
    border:1px solid rgba(245,158,11,.35);
    background:#fff8e8;
    color:#7a4b00;
    padding:16px;
    font-weight:700;
}

/* Phase 13 - Product quantity rules */
.af-qty-rule-note{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin:6px 0;
    padding:5px 9px;
    border-radius:999px;
    background:#fff7ed;
    color:#c2410c;
    font-size:11px;
    font-weight:900;
}

/* Phase 14 - Offers & Discounts */
.af-offer-note{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin:6px 0;
    padding:6px 10px;
    border-radius:999px;
    background:#ecfdf5;
    color:#047857;
    font-size:11px;
    font-weight:900;
}

/* Phase 17 - Customer Account Dashboard */
.account-nav{display:flex;flex-direction:column;gap:8px}
.account-nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;text-decoration:none;color:var(--af-ink);font-weight:900;background:#fff;border:1px solid var(--af-line)}
.account-nav a:hover,.account-nav a.active{background:var(--af-blue);color:#fff;border-color:var(--af-blue)}
.account-nav a.logout{color:#b91c1c}
.account-nav a.logout:hover{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.account-stat span{display:block;color:var(--af-muted);font-size:13px;font-weight:800}
.account-stat strong{display:block;font-size:24px;font-weight:900;margin-top:4px}
.account-hero{background:linear-gradient(135deg,rgba(103,183,228,.12),rgba(242,92,46,.08))}

/* Phase 18 - Wishlist & Quick Order */
.af-wishlist.active{background:#dc2626;color:#fff;border-color:#dc2626}
.quick-order-img{width:52px;height:52px;object-fit:contain;border:1px solid var(--af-line);border-radius:12px;background:#fff}
.quick-order-table th{white-space:nowrap}
.sticky-quick-order-bar{
    position:sticky;
    bottom:0;
    z-index:20;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:14px;
    margin-top:16px;
    background:rgba(255,255,255,.94);
    border:1px solid var(--af-line);
    border-radius:16px;
    box-shadow:0 -12px 35px rgba(15,23,42,.10);
    backdrop-filter:blur(10px);
}
@media (max-width:768px){
    .sticky-quick-order-bar{display:grid;grid-template-columns:1fr}
    .quick-order-table{min-width:820px}
}

/* Phase 18.1 - Category image size + show all categories */
.af-category-grid{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:18px;
}
.af-category-card{
    min-height:150px;
    padding:24px 16px;
}
.af-category-icon{
    width:82px;
    height:82px;
    object-fit:contain;
    display:block;
}
.af-category-card span{
    font-size:15px;
    line-height:1.25;
}
@media(min-width:1200px){
    .af-category-grid{
        grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    }
    .af-category-card{
        min-height:160px;
    }
    .af-category-icon{
        width:92px;
        height:92px;
    }
}
@media(max-width:767px){
    .af-category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:14px !important;
    }
    .af-category-card{
        min-height:150px;
        padding:20px 12px;
    }
    .af-category-icon{
        width:78px;
        height:78px;
    }
    .af-category-card span{
        font-size:14px;
    }
}

/* Phase 18.2 - Fixed responsive top banner layout
   Best image ratio for all three top banners: 16:9, e.g. 1600x900 or 1200x675.
   This keeps desktop and mobile stable without cutting important text when artwork follows safe margins.
*/
.af-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,2fr) minmax(300px,1fr) !important;
    gap:22px !important;
    align-items:stretch !important;
}

/* Desktop: one big left banner + two right banners stacked */
.af-hero-main.af-banner-image-only,
.af-side-card.af-banner-image-only{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:8px !important;
    background:#fff !important;
    border:1px solid var(--af-line) !important;
}

.af-side-offers{
    display:grid !important;
    grid-template-rows:1fr 1fr !important;
    gap:22px !important;
    height:100% !important;
}

.af-side-offers .af-side-card.af-banner-image-only{
    height:100% !important;
}

/* Fill the banner area cleanly. Use 16:9 artwork to avoid cropping. */
.af-hero-main.af-banner-image-only img,
.af-side-card.af-banner-image-only img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    background:#fff !important;
}

/* Content-mode banners should also keep a reliable height */
.af-hero-main:not(.af-banner-image-only){
    min-height:360px !important;
}
.af-side-card:not(.af-banner-image-only){
    min-height:calc((360px - 22px) / 2) !important;
}

/* Tablet: stack left + right section */
@media(max-width:991px){
    .af-hero-grid{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }
    .af-side-offers{
        grid-template-columns:1fr 1fr !important;
        grid-template-rows:auto !important;
        gap:18px !important;
    }
    .af-hero-main.af-banner-image-only,
    .af-side-card.af-banner-image-only{
        aspect-ratio:16 / 9 !important;
    }
}

/* Mobile: all banners stacked, same width, clean image size */
@media(max-width:767px){
    .af-section:first-of-type{
        padding-top:16px !important;
    }
    .af-hero-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
    }
    .af-side-offers{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
    }
    .af-hero-main.af-banner-image-only,
    .af-side-card.af-banner-image-only{
        width:100% !important;
        aspect-ratio:16 / 9 !important;
        min-height:0 !important;
        border-radius:8px !important;
    }
    .af-hero-main.af-banner-image-only img,
    .af-side-card.af-banner-image-only img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
    }
}

/* Very small screens: reduce page side gaps */
@media(max-width:420px){
    .af-section .container{
        padding-left:12px !important;
        padding-right:12px !important;
    }
    .af-hero-grid,
    .af-side-offers{
        gap:14px !important;
    }
}

/* Phase 19 - Smart related products on product page */
.af-related-products-section{
    padding-top:10px;
}
.af-related-scroller{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
}
.af-related-item{
    min-width:0;
}
@media(max-width:1199px){
    .af-related-scroller{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}
@media(max-width:991px){
    .af-related-scroller{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}
@media(max-width:767px){
    .af-related-scroller{
        display:flex;
        gap:14px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        padding-bottom:10px;
        -webkit-overflow-scrolling:touch;
    }
    .af-related-item{
        flex:0 0 72%;
        scroll-snap-align:start;
    }
}
@media(max-width:420px){
    .af-related-item{
        flex-basis:82%;
    }
}

/* Phase 19.3 - Product page related products: 12 items / 4 per row */
.af-related-products-section{
    padding-top:16px;
    padding-bottom:42px;
}
.af-related-products-section .af-section-head{
    margin-bottom:20px;
}
.af-related-scroller{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:22px !important;
    overflow:visible !important;
    padding-bottom:0 !important;
    scroll-snap-type:none !important;
}
.af-related-item{
    min-width:0 !important;
    flex:auto !important;
}
.af-related-item .af-product-card{
    border-radius:18px;
    box-shadow:0 10px 26px rgba(15,23,42,.06);
}
.af-related-item .af-product-image{
    height:210px;
}
.af-related-item .af-product-image img{
    object-fit:contain;
}
@media(max-width:1199px){
    .af-related-scroller{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:18px !important;
    }
}
@media(max-width:767px){
    .af-related-scroller{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:14px !important;
        overflow:visible !important;
    }
    .af-related-item{
        flex:auto !important;
        scroll-snap-align:unset !important;
    }
    .af-related-item .af-product-card{
        border-radius:14px;
    }
    .af-related-item .af-product-image{
        height:150px;
    }
    .af-related-item .af-product-body{
        padding:12px;
    }
}
@media(max-width:380px){
    .af-related-scroller{
        gap:10px !important;
    }
    .af-related-item .af-product-image{
        height:135px;
    }
}