/* Adaptive Grid */
.bswp-grid{display:grid;gap:16px;margin:10px 0;grid-template-columns:repeat(4,minmax(0,1fr))}
.bswp-grid.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.bswp-grid.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.bswp-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bswp-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bswp-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bswp-grid.cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}

/* Breakpoints */
@media (max-width: 1200px){ .bswp-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width: 992px) { .bswp-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width: 768px) { .bswp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Carousel mobile */
@media (max-width: 640px){
  .bswp-grid.bswp-mobile{
    display:grid;
    gap:12px;
    overscroll-behavior:contain;
    
    padding:2px 4px 8px 4px;
  }
  .bswp-grid.bswp-mobile .bswp-card{scroll-snap-align:start}
}

/* Cards */
.bswp-card{display:block;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;height:100%}
.bswp-thumb{position:relative;aspect-ratio:3/4;background:#f3f4f6;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bswp-thumb img{width:100%;height:100%;object-fit:cover}
.bswp-noimg{width:100%;height:100%;background:linear-gradient(135deg,#f3f4f6,#e5e7eb)}
.bswp-card-body{padding:10px;display:flex;flex-direction:column}
.bswp-title{font-size:clamp(13px,1.6vw,16px);line-height:1.25;margin:0 0 6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.bswp-meta{font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Filters */
/* Filters - Original block for reference */
/* .bswp-filters{display:flex;gap:8px;margin:8px 0 12px} */
/* .bswp-filters input[type="search"], .bswp-filters input[type="text"], .bswp-filters select{flex:1;padding:8px 10px;border:1px solid #e5e7eb;border-radius:10px} */
/* .bswp-filters button{padding:8px 12px;border-radius:10px;border:1px solid #111827;background:#111827;color:#fff} */

/* --- REVISED FILTER STYLES START HERE --- */

/* Parent container for all filter elements */
.bswp-filters {
    display: flex;
    flex-direction: column; /* Stack search and filter-row vertically */
    gap: 12px;
    margin: 8px 0 12px;
    width: 100%;
    box-sizing: border-box;
}

/* Container for Genre, Condition, and Filter Button */
.bswp-filter-controls {
    display: flex;
    flex-wrap: wrap; /* Allows controls to wrap if too narrow */
    gap: 12px;
    align-items: center; /* Vertically align controls and button */
    width: 100%;
}

/* Individual filter wrappers (Genre, Condition) */
.bswp-filter {
    flex: 1 1 180px; /* Grow, shrink, and have a base width for wrapping */
    min-width: 140px;
}

/* Common styles for form elements */
.bswp-filters input[type="search"],
.bswp-filters select,
.bswp-filters button {
    width: 100%; /* Default to full width of their container */
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 10px; /* Adopted from original styles */
    border: 1px solid #e5e7eb; /* Adopted from original styles */
    background: #fff;
    font-size: 14px; /* Ensure readability */
}

/* Style for the full-width search bar */
.bswp-filters input[type="search"] {
    /* Takes up the full width of the main .bswp-filters container */
    margin-bottom: 0; /* No extra margin needed as 'gap' handles spacing */
}

/* Style for the Filter Button - FIX: Ensured color is visible */
.bswp-filters button {
    flex: 0 0 auto; /* Do not grow or shrink; width based on padding */
    padding: 8px 16px; /* Slightly more padding for the button */
    border: 1px solid #111827;
    background: #111827;
    color: #fff !important; /* IMPORTANT: Use !important to override the conflicting style from the second CSS block if necessary, or just ensure the second block is removed/corrected. Assuming the conflicting block is removed/corrected in practice. */
    min-width: 100px; /* Give the button a reasonable minimum size */
}

/* --- Mobile Breakpoint for Stacking --- */
@media (max-width: 768px) {
    .bswp-filters {
        padding: 8px; /* Adds space around the filter block */
    }

    /* Stack the Genre/Condition/Button on mobile */
    .bswp-filter-controls {
        flex-direction: column;
        align-items: stretch;
    }

    /* Ensure filter fields and button take full width on mobile */
    .bswp-filters .bswp-filter {
        flex: 1 1 100%;
        min-width: 0;
    }

    .bswp-filters button {
        flex: 1 1 100%; /* Button also takes full width */
    }
}

/* --- REVISED FILTER STYLES END HERE --- */

/* Single layout */
.bswp-single{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;margin:20px 0}
.bswp-gallery-main{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff}
.bswp-gallery-main img{width:100%;height:auto;display:block}
.bswp-gallery-thumbs{display:flex;gap:8px;margin-top:8px;overflow:auto;padding-bottom:6px}
.bswp-thumb-mini img{width:96px;height:96px;object-fit:cover;border-radius:8px;border:1px solid #e5e7eb}
.bswp-single-title{margin:0 0 6px 0;font-size:26px}
.bswp-attrs{list-style:none;margin:6px 0 14px 0;padding:0}
.bswp-attrs li{margin:4px 0}
.bswp-swap-btn{display:inline-block;background:#10b981;color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;border:1px solid #059669}
.bswp-excerpt{margin-top:12px;font-style:italic;color:#4b5563}

@media (max-width: 768px){
  .bswp-single{grid-template-columns:1fr}
}






/* Author box styles — placed at end of listing */
.bswp-author-box{display:flex;gap:12px;align-items:center;padding:16px;border-top:1px solid #eee;margin-top:18px;background:#fafafa;border-radius:8px;}
.bswp-author-avatar img{border-radius:50%;width:72px;height:72px;object-fit:cover;}
.bswp-author-meta{flex:1;}
.bswp-author-name{display:block;font-weight:600;font-size:1.05rem;color:#0a0a0a;text-decoration:none;margin-bottom:4px;}
.bswp-author-reviews{display:inline-block;color:#0073aa;text-decoration:underline;font-size:0.95rem;margin-right:8px;cursor:pointer;}
.bswp-author-location{color:#666;font-size:0.9rem;margin-top:6px;}
/* Modal for reviews */
.bswp-modal{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);align-items:center;justify-content:center;z-index:9999;}
.bswp-modal[aria-hidden="false"]{display:flex;}
.bswp-modal-inner{background:#fff;padding:18px;border-radius:8px;max-width:720px;width:95%;max-height:85vh;overflow:auto;}
.bswp-modal-close{display:inline-block;margin-top:12px;padding:8px 12px;border-radius:6px;border:0;background:#eee;cursor:pointer;}


/* --- Default Mobile Styles (Vertical Stacking) --- */

/* No special CSS needed here. The default block-level
   behavior of divs will stack them vertically. */

.bswp-single {
    display: block; /* Ensure no flex/grid layout is inherited */
    width: 100%;
    margin-bottom: 20px; /* Space between the main content and the author box */
}

.bswp-single-gallery,
.bswp-single-info {
    width: 100%; /* Each takes up full width on mobile */
}

/* Ensure the author box also behaves as a simple block */
.bswp-author-box {
    display: block;
    width: 100%;
    margin-top: 20px; /* Add some space above the box */
}


/* --- Desktop Styles (Side-by-side layout) --- */

@media (min-width: 768px) {
    /* Apply a flexible layout to the main product section */
    .bswp-single {
        display: flex;
        justify-content: space-between; /* Pushes the gallery and info to the sides */
        align-items: flex-start; /* Aligns them to the top */
    }

    /* Set the widths for the gallery and the info section */
    .bswp-single-gallery {
        flex-basis: 45%; /* Gallery takes up 45% of the space */
        max-width: 500px; /* Optional: Sets a max width for the gallery image */
    }

    .bswp-single-info {
        flex-basis: 70%; /* Info section takes up 50% of the space */
    }

    /* Important: The author box is not inside the .bswp-single flex container.
       It will naturally flow below the main content block. */
}

.bswp-main-wrapper {
    max-width: 1200px; /* Or any width that fits your design, e.g., 960px, 1400px */
    margin: 0 auto;  /* This is the key to centering the block horizontally */
    padding: 0 15px; /* Optional: Adds a little padding on the sides for smaller screens */
}