/* Carousel Styles */

/* Highlight text styling (replaces inline color:#008080;font-weight:700;) */
.highlight-text {
    color: #008080;
    font-weight: 500;
    font-size: 1.8rem !important;
}

/* Carousel header styling (replaces inline display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;) */
.carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2em;
}

/* Carousel title styling (replaces inline margin:0;) */
.carousel-title {
    margin: 0;
}

/* Carousel container */
.carousel-container-posts {
    position: relative;
    width: 100%;
    background-color: #ffffff; 
    padding: 20px;
    overflow: hidden;
    max-width: 100%;
    margin: 20px auto;
    font-family: 'Arial', sans-serif;
}

.carousel-wrapper {
    position: relative;
    overflow: hidden;
}

/* Carousel inner wrapper */
.carousel-inner {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.5s ease;
    gap: 25px; /* Exact spacing from image */
    width: 100%;
}



/* Individual card styling */
.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    padding: 15px;
    width: calc(25% - 20px); /* For 4 cards per row */
    min-width: 220px;
    text-align: start;
    text-decoration: none !important;
    color: inherit;
    flex: 0 0 auto;
    transition: border 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e8e8e8; /* Light grey border as in image */
    display: flex;
    flex-direction: column;
/*    justify-content: flex-start;*/
}

/* Hover effect for cards - adding border as requested */
.card:hover {
    border: 1px solid #7B5FB4; /* Slightly darker border on hover */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Image styling - with border exactly as in image */
.card .carousel-card-image {
    background-color: #ffffff;
    border: 1px solid #f0f0f0; /* Very light grey border around image area */
    border-radius: 8px;
    height: 220px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 15px;
    padding: 5px;
}

.card .carousel-card-image img {
    max-width: 100%;
   height: 200px;
/*    max-height: 180px;*/
    object-fit: contain;
}


/* Title styling */
.card h2 {
    font-size: 1.2rem;
    margin:0 0 0 5px;
    flex-grow: 1;
    max-height: 50px;
    overflow: hidden;
    color: #000000;
    font-weight: 500; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Price styling exactly as in image */
.card .price {
    color: #000000;
    font-size: 1.8rem;
    font-weight: 800;
    margin:0 0 0 5px;
}

/* Navigation arrows - exactly matching the image */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 23px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    z-index: 10;
    color: #000000 !important;
}

.carousel-prev {
    left: -15px;
}

.carousel-next {
    right: -15px;
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: #ffffff;
    border-color: #e0e0e0;
    color: black;
}

/* Brand carousel navigation */
.brand-carousel-prev, .brand-carousel-next {
    top: 60%;
    transform: translateY(-50%);
}

/* Purpose heading */
.purpose-heading{
    font-family: "Open Sans", Sans-serif;
    font-weight: 500 !important;
    color: #000000;
    line-height: 1em;
    margin-bottom: 0 !important;
    font-size: 1.8rem !important;
}

/* Specs score button */ 
.score {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.3rem 0.3rem;
    background: lightgoldenrodyellow;
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
    width: fit-content;
    position: absolute;
    border: groove #7B5FB4 5px;
}

.score-text {
    margin: 0 !important;
    font-size: 1.5rem !important;        
    color: #7B5FB4 !important;
    line-height: 1 !important;
}

.score p {
    margin: 0 !important;
    font-size: 0.6rem !important;      /* smaller "BeforeBuy" / "Score" */
    color: #7B5FB4;
    line-height: 1.2;
}

/* View all button */
#view-all-btn {
    --color: #560bad;
    font-family: inherit;
    display: inline-block;
    width: 8em;
    height: 2.6em;
    line-height: 2.5em;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid var(--color);
    transition: color 0.5s;
    z-index: 1;
    font-size: 0.9rem;
    border-radius: 6px;
    font-weight: 500;
    color: var(--color);
    background-color: white !important;
    padding: 0 !important;
}

#view-all-btn:before {
    content: "";
    position: absolute;
    z-index: -1;
    background: var(--color);
    height: 150px;
    width: 200px;
    border-radius: 50%;
}

#view-all-btn:hover {
    color: #fff;
}

#view-all-btn:before {
    top: 100%;
    left: 100%;
    transition: all 0.7s;
}

#view-all-btn:hover:before {
    top: -30px;
    left: -30px;
}

#view-all-btn:active:before {
    background: #3a0ca3;
    transition: background 0s;
}

/* ========================================
   RESPONSIVE DESIGN - TABLET (768px - 1024px)
   ======================================== */
@media (max-width: 1024px) {
    /* Carousel container adjustments */
    .carousel-container-posts {
        padding: 15px;
        margin: 15px auto;
    }
    
    /* Carousel header responsive */
    .carousel-header {
        flex-direction: row;
        align-items: flex-start;
        gap: 15px;
    }
    
    /* Purpose heading responsive */
    .purpose-heading {
        font-size: 1.5rem !important;
        line-height: 1.2em;
    }
    
    /* Highlight text responsive */
    .highlight-text {
        font-size: 1.5rem !important; 
        font-weight: 600;
    }
    
    /* View all button responsive */
    #view-all-btn {
        width: 7em;
        height: 2.4em;
        line-height: 2.3em;
        font-size: 0.9rem;
        align-self: flex-end;
    }
    
    /* Card responsive - 3 per row */
    .card {
        width: calc(33.33% - 17px);
        min-width: 200px;
        padding: 12px;
    }
    
    /* Card image responsive */
    .card .carousel-card-image {
        height: 180px;
        margin-bottom: 12px;
    }
    
    .card .carousel-card-image img {
        height: 160px;
    }
    
    /* Card title responsive */
    .card h2 {
        font-size: 1.1rem;
        max-height: 45px;
    }
    
    /* Card price responsive */
    .card .price {
        font-size: 1.6rem;
    }
    
    /* Score responsive */
    .score {
        padding: 0.25rem 0.25rem;
        border: groove #7B5FB4 4px;
    }
    
    .score-text {
        font-size: 1.3rem !important;
    }
    
    .score p {
        font-size: 0.55rem !important;
    }
    
    /* Navigation arrows responsive */
    .carousel-prev,
    .carousel-next {
        width: 32px;
        height: 32px;
        padding: 20px;
        font-size: 1.1rem;
    }
    
    .carousel-prev {
        left: 5px;
    }
    
    .carousel-next {
        right: 5px;
    }
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE (480px - 768px)
   ======================================== */
@media (max-width: 768px) {
    /* Carousel container mobile adjustments */
    .carousel-container-posts {
        padding: 12px;
        margin: 12px auto;
    }
    
    /* Carousel header mobile */
    .carousel-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }
    
    /* Purpose heading mobile */
    .purpose-heading {
        font-size: 1.3rem !important;
        line-height: 1.3em;
    }
    
    /* Highlight text mobile */
    .highlight-text {
        font-size: 1.3rem !important;
        font-weight: 500;
    }
    
    /* View all button mobile */
    #view-all-btn {
        width: 6.5em;
        height: 2.2em;
        line-height: 2.1em;
        font-size: 0.9rem;
        align-self: center;
    }
    
    /* Card mobile - 2 per row */
    .card {
        width: calc((100% / 3) - 12px);
        min-width: 160px;
        padding: 10px;
        margin-right: 12px;
    }
    
    /* Card image mobile */
    .card .carousel-card-image {
        height: 150px;
        margin-bottom: 10px;
    }
    
    .card .carousel-card-image img {
        height: 130px;
    }
    
    /* Card title mobile */
    .card h2 {
        font-size: 1rem;
        max-height: 40px;
        margin: 0 0 0 3px;
    }
    
    /* Card price mobile */
    .card .price {
        font-size: 1.4rem;
        margin: 0 0 0 3px;
    }
    
    /* Score mobile */
    .score {
        padding: 0.2rem 0.2rem;
        border: groove #7B5FB4 3px;
    }
    
    .score-text {
        font-size: 1.1rem !important;
    }
    
    .score p {
        font-size: 0.5rem !important;
    }
    
    /* Navigation arrows mobile */
    .carousel-prev,
    .carousel-next {
        width: 28px;
        height: 28px;
        padding: 18px;
        font-size: 1rem;
    }
    
    .carousel-prev {
        left: -10px;
    }
    
    .carousel-next {
        right: -10px;
    }

    
    /* Carousel inner mobile */
    .carousel-inner {
        gap: 12px;
    }
}

/* ========================================
   RESPONSIVE DESIGN - SMALL MOBILE (320px - 480px)
   ======================================== */
@media (max-width: 480px) {
    /* Carousel container small mobile */
    .carousel-container-posts {
        padding: 10px;
        margin: 10px auto;
    }
    
    /* Carousel header small mobile */
    .carousel-header {
        align-items: flex-start;
        gap: 50px;
    }
    
    /* Purpose heading small mobile */
    .purpose-heading {
        font-size: 1.3rem !important;
        line-height: 1.4em;
    }
    
    /* Highlight text small mobile */
    .highlight-text {
        font-size: 1.3rem !important;
        font-weight: 500;
    }
    
    /* View all button small mobile */
    #view-all-btn {
        width: 6em;
        height: 2em;
        line-height: 1.9em;
        font-size: 0.9rem;
    }
    
    /* Card small mobile - 1 per row */
    .card {
        width: calc(100%/2 - 8px);
        min-width: auto;
        padding: 8px;
        margin-right: 8px;
    }
    
    /* Card image small mobile */
    .card .carousel-card-image {
        height: 140px;
        margin-bottom: 8px;
    }
    
    .card .carousel-card-image img {
        height: 120px;
    }
    
    /* Card title small mobile */
    .card h2 {
        font-size: 1rem;
        max-height: 35px;
        margin: 0 0 0 2px;
    }
    
    /* Card price small mobile */
    .card .price {
        font-size: 1.2rem;
        margin: 0 0 0 2px;
    }
    
    /* Score small mobile */
    .score {
        padding: 0.15rem 0.15rem;
        border: groove #7B5FB4 2px;
    }
    
    .score-text {
        font-size: 1rem !important;
    }
    
    .score p {
        font-size: 0.45rem !important;
    }
    
    /* Navigation arrows small mobile */
    .carousel-prev,
    .carousel-next {
        width: 24px;
        height: 24px;
        padding: 15px;
        font-size: 0.9rem;
    }
    
    .carousel-prev {
        left: -10px;
    }
    
    .carousel-next {
        right: -10px;
    }
    
    /* Carousel inner small mobile */
    .carousel-inner {
        gap: 8px;
    }
}

/* ========================================
   RESPONSIVE DESIGN - EXTRA SMALL MOBILE (below 320px)
   ======================================== */
@media (max-width: 320px) {
    /* Carousel container extra small mobile */
    .carousel-container-posts {
        padding: 8px;
        margin: 8px auto;
    }
    
    /* Carousel header extra small mobile */
    .carousel-header {
        gap: 8px;
    }
    
    /* Purpose heading extra small mobile */
    .purpose-heading {
        font-size: 1rem !important;
        line-height: 1.5em;
    }
    
    /* Highlight text extra small mobile */
    .highlight-text {
        font-size: 1rem !important;
        font-weight: 500;
    }
    
    /* View all button extra small mobile */
    #view-all-btn {
        width: 5.5em;
        height: 1.8em;
        line-height: 1.7em;
        font-size: 0.9rem;
    }
    
    /* Card extra small mobile */
    .card {
        padding: 6px;
        margin-right: 6px;
    }
    
    /* Card image extra small mobile */
    .card .carousel-card-image {
        height: 100px;
        margin-bottom: 6px;
    }
    
    .card .carousel-card-image img {
        height: 80px;
    }
    
    /* Card title extra small mobile */
    .card h2 {
        font-size: 0.8rem;
        max-height: 30px;
        margin: 0 0 0 1px;
    }
    
    /* Card price extra small mobile */
    .card .price {
        font-size: 1rem;
        margin: 0 0 0 1px;
    }
    
    /* Score extra small mobile */
    .score {
        padding: 0.1rem 0.1rem;
        border: groove #7B5FB4 1px;
    }
    
    .score-text {
        font-size: 0.9rem !important;
    }
    
    .score p {
        font-size: 0.4rem !important;
    }
    
    /* Navigation arrows extra small mobile */
    .carousel-prev,
    .carousel-next {
        width: 20px;
        height: 20px;
        padding: 12px;
        font-size: 0.8rem;
    }
    
    .carousel-prev {
        left: -12px;
    }
    
    .carousel-next {
        right: -12px;
    }
    
    /* Carousel inner extra small mobile */
    .carousel-inner {
        gap: 6px;
    }
}