@charset "utf-8";

/* ==========================================================================
   1. GLOBAL RESET & BASE STYLES
   ========================================================================== */
html,
body {
    margin: 0;
    padding: 0;
    background-color: #ffffff !important;
    color: #333333;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

/* Force White Backgrounds on Layout Containers */
#hd,
#ft,
#wrapper,
#pixelbay_wrapper,
.gnb_bg {
    background: #ffffff !important;
    border: none !important;
}

/* Clean up links */
a {
    text-decoration: none;
    color: #333;
}

a:hover {
    color: #4a90e2;
}

/* Hide Default GnuBoard Elements */
.hd_sch_wr,
.hd_login,
.sound_only {
    display: none !important;
}


/* ==========================================================================
   2. HEADER & LOGO (Perfect Center)
   ========================================================================== */
/* ==========================================================================
   2. HEADER & LOGO (Global & Safe Centering)
   ========================================================================== */
#hd {
    width: 100%;
    border-bottom: 1px solid #f0f0f0 !important;
    background: #ffffff;
}

/* [FIX] Block + Text-Align Strategy (Works on All Subpages) */
#hd_wrapper {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    /* Center content naturally */
    display: block !important;
    /* Restore block behavior */
    position: relative;
    height: 180px !important;
    /* Generous height */
}

#logo {
    display: inline-block !important;
    /* Sit inside the center-aligned parent */
    float: none !important;
    margin: 0 auto !important;
    padding: 20px 0;
    position: static !important;
}

#logo img {
    /* Logic: Show original size logic but constrain to header height */
    max-height: 140px !important;
    width: auto !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   2.1 TOP BAR STYLES
   ========================================================================== */
#top_bar {
    width: 100%;
    height: 36px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e1e4e8;
    font-family: 'Pretendard', sans-serif;
    z-index: 2000;
    position: relative;
}

.top_bar_wrap {
    max-width: 1600px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 10px;
}

.top_bar_links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.top_bar_links li a {
    text-decoration: none;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
}

.top_bar_links li a:hover {
    color: #000;
    text-decoration: underline;
}


/* ==========================================================================
   3. MAIN LAYOUT (3-Column Grid/Flex)
   ========================================================================== */
#pixelbay_wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* Ensure top alignment */

    width: 100%;
    max-width: 1600px;
    /* Wide Layout */
    margin: 0 auto;
    /* Center the layout */
    box-sizing: border-box;
    min-height: 100vh;
}

/* Common Padding for ALL Columns (Vertical Synchronization) */
#aside_icons,
#aside_cate,
#container {
    padding-top: 50px !important;
    /* Unified Starting Line */
    padding-bottom: 50px;
    box-sizing: border-box;
}


/* --- COLUMN 1: ARTIST ICONS --- */
#aside_icons {
    width: 120px !important;
    min-width: 120px !important;
    border-right: 1px solid #f5f5f5;

    /* Sticky Navigation */
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#aside_icons ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

#aside_icons li {
    margin-bottom: 25px;
    text-align: center;
    width: 100%;
}

#aside_icons img,
.placeholder-circle {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#aside_icons span {
    font-size: 11px;
    color: #666;
    font-weight: 600;
    display: block;
}


/* --- COLUMN 2: CATEGORIES --- */
#aside_cate {
    width: 240px !important;
    min-width: 240px !important;
    border-right: 1px solid #f5f5f5;
    padding-left: 30px !important;
    padding-right: 20px !important;
}

.cate-tit {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    display: block;
    margin-top: 35px;
    /* Spacing between groups */
}

/* Reset margin for the FIRST title to align with other columns */
#aside_cate .cate-tit:first-child {
    margin-top: 0 !important;
}

.cate-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.cate-list li {
    margin-bottom: 10px;
}

.cate-list a {
    font-size: 15px;
    color: #666;
    transition: 0.2s;
}

.cate-list a:hover {
    color: #4a90e2;
    font-weight: 700;
    padding-left: 5px;
}

/* --- Level 3 Subcategories (3뎁스 카테고리) --- */
.cate-list li.has-children>a {
    font-weight: 600;
    color: #444;
}

.cate-sublist {
    list-style: none;
    padding: 0;
    margin: 6px 0 8px 0;
    padding-left: 14px;
    border-left: 2px solid #e8e8e8;
}

.cate-sublist li {
    margin-bottom: 6px;
}

.cate-sublist li:last-child {
    margin-bottom: 0;
}

.cate-sublist a {
    font-size: 13px;
    color: #888;
    transition: all 0.2s ease;
    display: inline-block;
}

.cate-sublist a:hover {
    color: #4a90e2;
    font-weight: 600;
    padding-left: 4px;
}

/* Active state for Level 3 when viewing that category */
.cate-sublist a.active {
    color: #4a90e2;
    font-weight: 700;
}


/* --- COLUMN 3: MAIN CONTENT --- */
#container {
    flex: 1;
    /* Take remaining space */
    min-width: 0;
    /* Prevent flex overflow */
    padding-left: 50px !important;
    padding-right: 20px !important;
}

/* Main Banner Styles */
.main-promo-banner,
.main-banner {
    width: 100%;
    height: 320px;
    background: linear-gradient(135deg, #ffcc00 0%, #ffe066 100%);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 50px;

    /* CRITICAL: Remove top margin to match sidebars */
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 80px;
    box-sizing: border-box;
}

.main-promo-banner h2 {
    font-size: 40px;
    font-weight: 800;
    color: #212529;
    margin: 0 0 16px;
}

.btn-banner {
    display: inline-block;
    padding: 12px 30px;
    background: #212529;
    color: #fff;
    border-radius: 50px;
    margin-top: 30px !important;
}

/* Reset any hidden G5 wrappers affecting the banner */
#container>div:first-child {
    margin-top: 0 !important;
}


/* ==========================================================================
   4. CONTENT GRIDS (Artists & Products)
   ========================================================================== */
.h2_tit,
.section-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #222;
    margin-top: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
}

.section-more {
    font-size: 14px;
    color: #888;
}

/* Artist Grid (Circles) */
.product-grid.grid-5,
.artist-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 60px;
    width: 100%;
}

.artist-item,
.circle-grid-item {
    text-align: center;
}

.artist-item img,
.circle-img-wrapper,
.circle-img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s;
    background: #f4f4f4;
}

.artist-item img:hover,
.circle-img-wrapper:hover {
    transform: scale(1.05);
}

/* Product Grid (Cards) */
.product-grid.grid-4,
.pbay-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 Columns Fixed */
    gap: 25px;
    width: 100%;
}

.pbay-item,
.product-card {
    width: 100%;
}

.pbay-item img,
.product-img {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 15px;
    background: #f4f4f4;
}

.pbay-item-title,
.product-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    display: block;
    color: #222;
}

.pbay-item-price,
.product-price {
    font-size: 14px;
    color: #555;
}

/* ==========================================================================
   5. FOOTER
   ========================================================================== */

/* ==========================================================================
   5. FOOTER (Refactored from shop.tail.php)
   ========================================================================== */
#ft {
    width: 100%;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    padding: 60px 0;
    margin-top: 100px;
    font-family: 'Pretendard', sans-serif;
    color: #555;
    font-size: 13px;
    line-height: 1.6;
}

.ft_wrap {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Footer Top: Links */
.ft_links {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    gap: 30px;
}

.ft_links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 14px;
}

.ft_links a:hover {
    text-decoration: underline;
}

.ft_links a.privacy {
    font-weight: 800;
    color: #222;
}

/* Footer Middle: Info Grid */
.ft_info_box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}

.ft_logo_area h3 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 15px 0;
    color: #3498db;
    /* PixelBay Blue */
    letter-spacing: -1px;
}

.ft_logo_area p {
    margin: 0;
    color: #888;
    font-size: 14px;
}

.ft_data_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    max-width: 800px;
}

.ft_data_item {
    display: flex;
    align-items: center;
    color: #666;
}

.ft_data_item span.tit {
    font-weight: 700;
    margin-right: 8px;
    color: #333;
}

/* Footer Bottom: Copyright */
.ft_copy {
    margin-top: 40px;
    font-size: 12px;
    color: #999;
    font-family: sans-serif;
}

/* ==========================================================================
   6. SEARCH BAR (Refactored from shop.head.php)
   ========================================================================== */
#hd_search {
    width: 100%;
    text-align: center;
    margin: 20px 0 10px 0;
    /* Space between Logo and Menu */
}

.search_wrap {
    display: inline-block;
    width: 100%;
    max-width: 500px;
    /* Max width of search bar */
    position: relative;
}

.search_input {
    width: 100%;
    height: 46px;
    border: 2px solid #ddd;
    border-radius: 23px;
    /* Pill shape */
    padding: 0 50px 0 20px;
    font-size: 15px;
    color: #333;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    background: #fff;
}

.search_input:focus {
    border-color: #333;
    /* Darker border on focus */
}

.search_btn {
    position: absolute;
    top: 0;
    right: 5px;
    width: 46px;
    height: 46px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}

.search_btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Responsive */
@media (max-width: 768px) {
    .ft_info_box {
        flex-direction: column;
        gap: 30px;
    }

    .ft_links {
        flex-wrap: wrap;
        gap: 15px;
    }
}

/* =================================================================
   FINAL ADJUSTMENTS (Logo Size & Vertical Alignment Fix)
   ================================================================= */

/* [FIX 1] Enlarge Logo Significantly */
#hd_wrapper {
    height: 220px !important;
    /* Increase header height to accommodate bigger logo */
}

#logo img {
    max-height: 180px !important;
    /* Force logo to be much larger */
    width: auto !important;
    transform: scale(1.1);
    /* Slight zoom for impact */
}

/* ==========================================================================
   8. PREMIUM PRODUCT CARD DESIGN (Benchmark: HatchPlanet + V-Craft)
   ========================================================================== */

/* 1. Grid Layout Adjustments */
.pb-product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 20px;
    /* Vertical gap 30px, Horizontal gap 20px */
    margin: 0 -10px;
    /* Offset side gap */
    padding: 0;
    list-style: none;
}

.pb-product-list .sct_li {
    margin: 0 !important;
    /* Reset default YoungCart margin */
    padding: 0 10px;
    /* Space inside col */
    box-sizing: border-box;
}

/* 2. Card Container */
.pb-product-card {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    /* Clean look, no border initially */
}

.pb-product-card:hover {
    transform: translateY(-5px);
}

/* 3. Thumbnail Area (VIsual Focus) */
.pb-thumb-wrap {
    position: relative;
    width: 100%;
    border-radius: 16px;
    /* Rounded corners like HatchPlanet */
    overflow: hidden;
    background: #f4f6f8;
    /* Placeholder bg */
    aspect-ratio: 1/1;
    /* Square ratio standard */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
}

.pb-thumb-link {
    display: block;
    width: 100%;
    height: 100%;
}

.pb-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pb-product-card:hover .pb-thumb-wrap img {
    transform: scale(1.05);
    /* Zoom effect */
}

/* 4. Author Badge (V-Craft Style) - Overlaid on Image */
.pb-author-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 10px 4px 4px;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
    backdrop-filter: blur(4px);
}

.pb-author-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ccc;
    /* Placeholder color */
    background-image: url('../img/no_user.png');
    /* Add a default user icon asset later */
    background-size: cover;
    margin-right: 6px;
}

.pb-author-name {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    max-width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 5. Sold Out Overlay */
.pb-soldout-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.pb-soldout-overlay span {
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 1px;
    border: 1px solid #fff;
    padding: 5px 12px;
}

/* 6. Info Area */
.pb-info-wrap {
    padding: 12px 4px 0;
}

.pb-product-title {
    margin-bottom: 6px;
}

.pb-product-title a {
    font-size: 15px;
    /* Readable size */
    font-weight: 600;
    /* Semi-bold */
    color: #222;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

.pb-product-card:hover .pb-product-title a {
    color: #2563eb;
    /* Active Brand Color Blue */
}

/* 7. Meta Row (Price & Rating) */
.pb-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pb-price {
    font-size: 16px;
    font-weight: 800;
    /* Strong price */
    color: #111;
}

.pb-rating {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 3px;
}

.pb-rating i {
    color: #ffcc00;
    /* Star Color */
}


/* Force Main Banner to hit the top ceiling */
.main-banner,
.main-promo-banner {
    margin-top: -10px !important;
    /* Visual correction to align with Sidebar Text Cap-height */
    padding-top: 0 !important;
}

/* Ensure Container padding matches sidebars exactly */
#container {
    padding-top: 50px !important;
    /* Same as #aside_icons & #aside_cate */
    vertical-align: top !important;
}


/* =========================================
   NEW GNB MENU BAR STYLES (Inline-Block Fix)
   ========================================= */
/* =========================================
   NEW GNB MENU BAR STYLES (Inline-Block Fix)
   ========================================= */
#gnb {
    width: 100%;
    min-width: 1200px;
    /* Ensure it doesn't collapse excessively */
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5;
    text-align: center !important;
    display: block !important;
    position: relative;
    /* Ensure Z-index works */
    z-index: 99999;
    /* Max Z-index */
    height: 55px;
    /* Fixed Height */
    line-height: 55px;
    /* Vertical Center */
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.gnb_wrap {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    height: 100%;
    display: block !important;
    text-align: center !important;
}

#gnb_1dul {
    display: inline-block !important;
    font-size: 0;
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    vertical-align: top;
}

.gnb_1dli {
    display: inline-block !important;
    vertical-align: middle;
    height: 100%;
    margin: 0 40px !important;
    /* Spacing */
    position: relative;
}

/* Ensure link covers the height for easier clicking */
.gnb_1da {
    display: inline-block;
    height: 100%;
    line-height: 55px;
    /* Match container height */
    font-size: 17px;
    font-weight: 700;
    color: #111 !important;
    /* Force Black */
    text-decoration: none;
    padding: 0 5px;
    letter-spacing: -0.5px;
    position: relative;
}

/* GNB Reset: Force transparent background on all list items and interactions */
#gnb .gnb_1dli,
#gnb .gnb_1dli:hover,
#gnb .gnb_1dli.on,
#gnb_1dul>li,
#gnb_1dul>li:hover {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Link Text Hover Effect: Only Color Change */
#gnb .gnb_1da:hover,
#gnb .gnb_1dli:hover .gnb_1da,
#gnb .gnb_1dli:hover>a {
    color: #4a90e2 !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    transition: none !important;
}

/* Reset ::before just in case */
#gnb .gnb_1dli::before,
#gnb .gnb_1da::before {
    display: none !important;
    content: none !important;
}

/* Active State Underline (Optional) */
.gnb_1da:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px !important;
    /* Force Height */
    background: #4a90e2 !important;
    transition: width 0.3s;
    z-index: 10;
    top: auto !important;
    /* Prevent it from stretching to top */
}

.gnb_1da:hover:after {
    width: 100%;
}

/* Prevent Active Class from adding background */
.gnb_1dli_on .gnb_1da,
.gnb_1dli.gnb_1dli_on>a,
li.gnb_1dli_on,
li.gnb_1dli_on>a {
    background: none !important;
    background-color: transparent !important;
}

/* =========================================
   INDEX SPECIFIC STYLES
   ========================================= */
.main-banner-wrap {
    background: linear-gradient(90deg, #ffcc00, #ffdb4d);
    border-radius: 20px;
    padding: 60px 50px;
    position: relative;
    overflow: hidden;
    margin-bottom: 50px;
    margin-top: 0 !important;
    box-sizing: border-box;
}

.btn-start-custom {
    display: inline-block;
    padding: 12px 30px;
    background: #222;
    color: #fff !important;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    margin-top: 30px;
}

.h2_tit {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #222;
    font-family: 'Pretendard', sans-serif;
}

.artist-grid-custom {
    display: flex;
    gap: 20px;
    margin-bottom: 60px;
    flex-wrap: wrap;
    width: 100%;
}

.artist-item-custom {
    flex: 1;
    min-width: 120px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.artist-circle {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.artist-circle:hover {
    transform: scale(1.05);
}

.artist-name {
    font-size: 15px;
    color: #333;
    font-weight: bold;
}

.pbay-grid-custom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    width: 100%;
}

.pbay-item-custom {
    width: 100%;
}

.pbay-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    background: #e0e4e8;
    border-radius: 12px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    font-size: 20px;
    font-weight: bold;
}

.pbay-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    display: block;
    color: #222;
}

.pbay-price {
    font-size: 14px;
    color: #555;
}

@media (max-width: 1200px) {
    .pbay-grid-custom {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================
   RIGHT QUICK MENU (Basic & Clean)
   ========================================= */
#q_menu {
    position: fixed;
    top: 50%;
    /* Vertically Center */
    right: 0;
    transform: translateY(-50%);
    /* Adjust for height from center */
    z-index: 99999999;
    width: 60px;
    /* Reduced width */
    background: #fff;
    /* Solid Background */
    border: 1px solid #e5e5e5;
    border-right: 0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.03);
    /* Soft shadow */
    border-radius: 4px 0 0 4px;
    /* Rounded corners on left */
    overflow: hidden;
}

.q_menu_btn {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.q_icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    /* Square proportions */
    border-bottom: 1px solid #f0f0f0;
    color: #888;
    text-decoration: none;
    transition: all 0.2s;
    background: #fff;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
}

.q_icon:last-child {
    border-bottom: none;
}

.q_icon:hover {
    background: #f8f9fa;
    color: #333;
}

.q_icon i {
    font-size: 18px;
    margin-bottom: 4px;
    color: inherit;
}

.q_icon .place {
    font-size: 10px;
    letter-spacing: -0.5px;
    color: inherit;
    font-weight: normal;
}

.q_icon .count {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 6px;
    height: 6px;
    background: #ff5050;
    border-radius: 50%;
    text-indent: -9999px;
    /* Dot style badge for cleaner look */
    overflow: hidden;
}

/* TOP Button Style */
#q_top_btn {
    background: #333;
    color: #fff;
    height: 50px;
    border: none;
}

#q_top_btn:hover {
    background: #222;
}

#q_top_btn i {
    color: #fff;
    font-size: 14px;
    margin: 0;
}

#q_top_btn .place {
    color: #fff;
    font-weight: 600;
}

/* ==========================================================================
   9. PREMIUM PRODUCT DETAIL PAGE (2-Column Sticky)
   ========================================================================== */

/* Layout Wrapper */
#sit_ov_from {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 100px;
}

/* Left Column: Visuals & Content (60%) */
.pb-detail-left {
    flex: 1;
    min-width: 0;
    /* Prevent flex overflow */
}

/* Right Column: Sticky Buy Box (35%) */
.pb-detail-right {
    width: 420px;
    flex-shrink: 0;
}

.pb-sticky-box {
    position: sticky;
    top: 80px;
    /* Adjust based on header height */
    background: #fff;
    padding: 30px;
    border: 1px solid #eee;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* 1. Gallery Grid (HatchPlanet Style) */
#sit_pvi_big {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

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

#sit_pvi_thumb {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
}

#sit_pvi_thumb li {
    width: 80px;
    flex-shrink: 0;
}

#sit_pvi_thumb img {
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
}

#sit_pvi_thumb li:hover img,
#sit_pvi_thumb li.active img {
    border-color: #333;
}

/* 2. Detail Content (Below Images) */
.pb-detail-content {
    margin-top: 60px;
    border-top: 1px solid #eee;
    padding-top: 40px;
}

.pb-expand-btn {
    display: block;
    width: 100%;
    padding: 15px;
    text-align: center;
    background: #f9f9f9;
    border: 1px solid #eee;
    margin-top: 20px;
    cursor: pointer;
    border-radius: 8px;
    font-weight: bold;
}

/* 3. Right Sidebar Elements */
.pb-brand-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.pb-brand-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f0f0;
    margin-right: 12px;
    background-size: cover;
    background-position: center;
}

.pb-brand-name {
    font-weight: 700;
    font-size: 15px;
    color: #333;
}

.pb-item-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #111;
}

.pb-price-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 25px;
}

.pb-price-final {
    font-size: 28px;
    font-weight: 900;
    color: #111;
}

.pb-price-original {
    font-size: 16px;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 5px;
}

.pb-discount-badge {
    background: #fff0f0;
    color: #e74c3c;
    font-weight: 800;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 5px;
}

/* Tag Cloud */
.pb-tags {
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pb-tag {
    font-size: 13px;
    color: #555;
    background: #f5f5f5;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: 0.2s;
}

.pb-tag:hover {
    background: #e0e0e0;
    color: #333;
}

/* Options & Buttons */
.sit_option {
    margin-bottom: 20px;
}

.sit_option h3 {
    font-size: 14px;
    margin-bottom: 8px;
    color: #666;
}

.sit_btn_buy {
    width: 100%;
    padding: 18px;
    background: #111;
    color: #fff;
    border: none;
    font-size: 18px;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: 0.2s;
}

.sit_btn_buy:hover {
    background: #333;
}

.sit_btn_cart {
    width: 100%;
    padding: 15px;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
}

/* 4. Related Products (Author's Other Works) */
.pb-related-section {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid #eee;
}

.pb-related-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 30px;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    #sit_ov_from {
        flex-direction: column;
    }

    .pb-detail-right {
        width: 100%;
    }

    .pb-sticky-box {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
    }

    /* ==========================================================================
   10. ARTIST PROFILE PAGE
   ========================================================================== */

    .pb-artist-banner {
        position: relative;
        width: 100%;
        background: #f8f9fa;
        border-bottom: 1px solid #eee;
        margin-bottom: 40px;
    }

    .pb-artist-banner-bg {
        height: 180px;
        background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
        width: 100%;
    }

    .pb-artist-profile-wrap {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 40px;
        position: relative;
        display: flex;
        align-items: flex-end;
        margin-top: -60px;
        /* Overlap banner */
        padding-bottom: 30px;
        gap: 30px;
    }

    .pb-artist-avatar {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background-color: #fff;
        border: 5px solid #fff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        background-size: cover;
        background-position: center;
        flex-shrink: 0;
    }

    .pb-artist-info {
        flex: 1;
        padding-bottom: 5px;
        /* Alignment */
    }

    .pb-artist-name {
        font-size: 28px;
        font-weight: 800;
        color: #222;
        margin: 0 0 8px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .pb-artist-bio {
        font-size: 15px;
        color: #666;
        margin: 0 0 15px 0;
        max-width: 700px;
        line-height: 1.5;
    }

    .pb-artist-stats {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #888;
        margin-bottom: 20px;
    }

    .pb-artist-stats .divider {
        margin: 0 10px;
        color: #ddd;
        font-size: 10px;
    }

    .pb-artist-actions {
        display: flex;
        gap: 10px;
    }

    .pb-artist-actions button {
        padding: 8px 18px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.2s;
    }

    .btn-artist-follow {
        background: #222;
        color: #fff;
        border: 1px solid #222;
    }

    .btn-artist-follow:hover {
        background: #444;
    }

    .btn-artist-contact {
        background: #fff;
        color: #222;
        border: 1px solid #ddd;
    }

    .btn-artist-contact:hover {
        background: #f9f9f9;
        border-color: #bbb;
    }

    /* ==========================================================================
   11. MAIN PAGE NEW SECTIONS (Tags & Featured Artists)
   ========================================================================== */

    /* Popular Tags (Horizontal Scroll) */
    .pb-tag-cloud-wrapper {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .pb-tag-scroll {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 5px;
        /* Scrollbar space */
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        flex: 1;
    }

    .pb-tag-scroll::-webkit-scrollbar {
        display: none;
    }

    .pb-tag-chip {
        display: inline-block;
        padding: 8px 16px;
        background: #f1f3f5;
        color: #333;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: 0.2s;
        border: 1px solid transparent;
    }

    .pb-tag-chip:hover {
        background: #fff;
        border-color: #333;
        color: #111;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        transform: translateY(-1px);
    }

    /* Featured Artist Grid */
    .pb-artist-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }

    .pb-artist-card {
        display: block;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        text-align: center;
        position: relative;
        text-decoration: none;
        transition: 0.3s;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .pb-artist-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }

    .pb-artist-card-bg {
        height: 80px;
        background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    }

    /* Different gradients for variety if using nth-child */
    .pb-artist-card:nth-child(2) .pb-artist-card-bg {
        background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    }

    .pb-artist-card:nth-child(3) .pb-artist-card-bg {
        background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
    }

    .pb-artist-card:nth-child(4) .pb-artist-card-bg {
        background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%);
    }

    .pb-artist-card-avatar {
        width: 80px;
        height: 80px;
        background-color: #eee;
        background-size: cover;
        background-position: center;
        border-radius: 50%;
        margin: -40px auto 15px;
        /* Overlap BG */
        border: 4px solid #fff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .pb-artist-card-info {
        padding: 0 20px 20px;
    }

    .pb-artist-card-info .name {
        font-size: 18px;
        font-weight: 800;
        color: #111;
        margin-bottom: 5px;
    }

    .pb-artist-card-info .desc {
        font-size: 13px;
        color: #777;
        margin-bottom: 20px;
        height: 38px;
        /* 2 lines max */
        overflow: hidden;
    }

    .btn-follow-sm {
        display: inline-block;
        padding: 6px 15px;
        border: 1px solid #ddd;
        border-radius: 20px;
        font-size: 12px;
        color: #555;
        font-weight: 600;
        margin-bottom: 20px;
        transition: 0.2s;
    }

    .pb-artist-card:hover .btn-follow-sm {
        background: #111;
        color: #fff;
        border-color: #111;
    }


    /* Responsive */
    @media (max-width: 900px) {
        .pb-artist-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 600px) {
        .pb-artist-grid {
            grid-template-columns: 1fr;
            /* 1 column on mobile */
        }

        /* =========================================
   PARTNER ARTIST SIDEBAR - MINIMAL STYLE
   ========================================= */
        .partner-artist-sidebar {
            padding: 0;
            background: transparent;
        }

        .partner-artist-sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .partner-artist-sidebar li {
            width: 100%;
        }

        .partner-artist-sidebar li a {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            padding: 8px 4px;
            border-radius: 12px;
            transition: all 0.2s ease;
        }

        .partner-artist-sidebar li a:hover {
            background: rgba(255, 193, 7, 0.1);
            transform: scale(1.05);
        }

        .partner-artist-sidebar .partner-avatar {
            position: relative;
            width: 52px;
            height: 52px;
        }

        .partner-artist-sidebar .partner-avatar img {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
            transition: all 0.2s ease;
        }

        .partner-artist-sidebar li a:hover .partner-avatar img {
            border-color: #ffc107;
            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
        }

        .partner-artist-sidebar .partner-star {
            position: absolute;
            bottom: -2px;
            right: -2px;
            font-size: 14px;
            background: #fff;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
        }

        .partner-artist-sidebar .partner-name {
            margin-top: 6px;
            font-size: 11px;
            font-weight: 600;
            color: #555;
            text-align: center;
            max-width: 60px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .partner-artist-sidebar li a:hover .partner-name {
            color: #222;
        }
    }