.product-card .showcase-box {
  position: relative;
  box-shadow: 42px 42px 24px rgba(0, 0, 0, 0.01), 24px 24px 20px rgba(0, 0, 0, 0.03), 11px 11px 15px rgba(0, 0, 0, 0.04), 3px 3px 8px rgba(0, 0, 0, 0.05), 0px 0px 0px rgba(0, 0, 0, 0.05);
  border-top: 3px solid #DEB380;
  border-radius: 0px 0px 25px 25px;
  margin-bottom: 16px;
  overflow: hidden;
  height: 350px;
    background-color: #ffecd4;

  flex-grow: 1;
}
.product-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.product-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card .showcase-box .price {
  position: absolute;
  right: 0;
  bottom: 0;
  font-weight: 700;
  font-size: 23px;
  line-height: 130%;
  letter-spacing: -0.02em;
  padding: 8px;
  color: #FAFAFA;
  background-color: #1B1C1E;
  border-radius: 0px 0px 25px 0px;
}
.product-card .showcase-box .overlay {
  position: absolute;
  top: -500px;
  left: 0;
  background: rgba(44, 45, 47, 0.6);
  border-radius: 0px 0px 25px 25px;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  -webkit-transition: all 0.6s linear 0s;
  transition: all 0.6s linear 0s;
}
@media (max-width: 575px) {
  .product-card .showcase-box .overlay {
    top: -750px;
  }
}
.product-card .showcase-box .overlay a {
  margin-right: 16px;
  background: #FAFAFA;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 5px;
  padding: 8px 8px;
}
.product-card .showcase-box .overlay a:last-child {
  margin-right: 0;
}
.product-card .showcase-box .overlay a:hover i {
  color: #DEB380;
}
.product-card .showcase-box .overlay a i {
  color: #2C2D2F;
  font-size: 24px;
}
.product-card .title {
  width: 100%;
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 130%;
  letter-spacing: -0.02em;
  color: #2C2D2F;
  margin-bottom: 16px;
  text-transform: capitalize;
}

.product-card .title:hover {
  color: #deb380;

}

.product-card:hover .showcase-box .overlay {
  top: 0px;
  -webkit-transition: all 0.6s linear 0s;
  transition: all 0.6s linear 0s;
}
            

    /* Skeleton Loading */
    .skeleton-container {
        --skeleton-color: #f0f2f5;
        --shimmer-color: rgba(255,255,255,0.8);
        --animation-duration: 1.5s;
    }
    
    .skeleton-card {
        position: relative;
        overflow: hidden;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        height: 100%;
        border: 1px solid rgba(0,0,0,0.05);
    }
    
    .skeleton-img {
        height: 200px;
        background-color: var(--skeleton-color);
        position: relative;
        overflow: hidden;
    }
    
    .skeleton-content {
        padding: 20px;
    }
    
    .skeleton-title {
        height: 22px;
        width: 70%;
        background-color: var(--skeleton-color);
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        margin-bottom: 15px;
    }
    
    .skeleton-text {
        height: 14px;
        width: 100%;
        background-color: var(--skeleton-color);
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        margin-bottom: 10px;
    }
    
    .skeleton-text.short {
        width: 80%;
    }
    
    .skeleton-meta {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }
    
    .skeleton-meta-item {
        height: 12px;
        width: 40px;
        background-color: var(--skeleton-color);
        border-radius: 4px;
        position: relative;
        overflow: hidden;
    }
    
    .skeleton-img::after,
    .skeleton-title::after,
    .skeleton-text::after,
    .skeleton-meta-item::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, 
            rgba(255,255,255,0) 0%, 
            var(--shimmer-color) 50%, 
            rgba(255,255,255,0) 100%);
        animation: shimmer var(--animation-duration) infinite;
    }
    
    @keyframes shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }

        
    /* Action Buttons */
    .action-buttons {
        display: flex;
        gap: 8px;
    }

    .action-buttons .btn-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        background-color: rgba(255,255,255,0.8);
        color: #333;
    }

    .action-buttons .btn-icon:hover {
        background-color: rgba(255,255,255,0.95) !important;
        transform: translateY(-3px);
        color: #deb380;
    }

    .favorite-btn.active,
    .favorite-btn.active:hover {
        background-color: #deb380 !important;
        color: white !important;
    }

    .cart-btn.active,
    .cart-btn.active:hover {
        background-color: #198754 !important;
        color: white !important;
    }

    .quick-view-btn.active,
    .quick-view-btn.active:hover {
        background-color: #0d6efd !important;
        color: white !important;
    }

    .product-badge-wrapper {
        position: absolute;
        top: 12px;
        left: 12px;
        display: flex;
        flex-direction: row-reverse;
        gap: 6px;
        z-index: 5;
    }

    /* Shared badge styles */
    .product-badge-wrapper .badge {
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.35rem 0.6rem;
        border-radius: 20px;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        backdrop-filter: blur(4px);
    }

    /* Specific colors */
    .product-badge-wrapper .badge.bg-danger {
        background: linear-gradient(135deg, #ff4b5c, #ff6b81);
        color: #fff;
    }

    .product-badge-wrapper .badge.bg-warning {
        background: linear-gradient(135deg, #ffc107, #ffcd39);
        color: #212529;
    }

    .product-badge-wrapper .badge.new-badge {
        background: linear-gradient(135deg, #6f42c1, #9b59b6);
        color: #fff;
        text-transform: uppercase;
    }



    /* Responsive adjustments */
    @media (max-width: 1199px) {
        .showcase-box {
            height: 240px;
        }
    }

    @media (max-width: 991px) {
        .showcase-box {
            height: 220px;
        }
    }

    /*
     * 576-767px is two-up as well -- every grid uses col-sm-6 -- so this band
     * needs the same treatment, at a card roughly twice as wide. Prefixed with
     * .product-card for the specificity reason spelled out below. The 280px
     * here is the original author's number for this block, which never applied.
     *
     * No .arrivals-slider exception in this band: slick is still on its
     * breakpoint 768 rule here, which shows two cards, so the carousel card is
     * half width too and wants the smaller box like the grid.
     */
    @media (max-width: 767px) {
        .product-card .showcase-box {
            height: 280px;
        }

        .product-card .product-image-container {
            padding: 12px;
        }
    }

    /*
     * Phone sizing for the two-up grid.
     *
     * Every rule here is prefixed with .product-card on purpose. The base rule
     * is .product-card .showcase-box (0,2,0) and a media query adds no
     * specificity of its own, so a bare .showcase-box (0,1,0) inside a query
     * never wins — it was silently doing nothing. The three blocks above
     * (1199/991/767) still have that bug and are dead as written; they are left
     * alone rather than repaired blind, since fixing them changes tablet and
     * laptop cards nobody has asked about.
     *
     * Two separate levers, both wanted: the box height comes down so the card
     * stops being a tall empty rectangle, and the image container's padding
     * comes down so the picture itself gets bigger inside what is left. The
     * image is max-width/max-height 100% with no fixed size, so it is limited
     * by the container's content box — 20px of padding on a ~180px card was
     * eating a fifth of the width. object-fit stays as it is; filling the
     * shorter box with cover would crop the shoe.
     */
    @media (max-width: 575px) {
        .product-card .showcase-box {
            height: 190px;
        }

        .product-card .product-image-container {
            padding: 8px;
        }

        .product-card .showcase-box .price {
            font-size: 1rem;
            padding: 6px 10px;
        }

        .product-card .showcase-box .price > span:first-child {
            font-size: 1rem !important;
        }

        .product-card .title {
            font-size: 0.9rem;
            line-height: 1.3;
            margin-bottom: 8px;
        }

        .product-badge-wrapper {
            top: 8px;
            left: 8px;
        }

        .product-badge-wrapper .badge {
            font-size: 0.65rem;
            padding: 0.25rem 0.45rem;
        }

        /*
         * Both overlay actions, one size. The eye is an <a> styled by
         * .product-card .showcase-box .overlay a (40px box, 24px icon) at
         * (0,3,1), which outranks the plain .action-buttons .btn-icon rule
         * the heart <button> obeys — so the pair rendered mismatched, and
         * both too big for a half-width phone card. These selectors match
         * that specificity and sit later in the file, so they win.
         */
        .product-card .showcase-box .overlay a,
        .product-card .showcase-box .overlay .btn-icon {
            width: 34px;
            height: 34px;
            padding: 6px;
        }

        .product-card .showcase-box .overlay a i,
        .product-card .showcase-box .overlay .btn-icon i {
            font-size: 16px;
        }

        /*
         * New Arrivals is back to one card per view, so its card is roughly
         * the full screen and keeps the full-size box. (0,3,0) outranks the
         * grid rule above, and outranks the 380px block below too, which is
         * why that block does not repeat these.
         */
        .arrivals-slider .product-card .showcase-box {
            height: 350px;
        }

        .arrivals-slider .product-card .product-image-container {
            padding: 20px;
        }
    }

    /* Very narrow phones: the same grid card, one step further down. */
    @media (max-width: 380px) {
        .product-card .showcase-box {
            height: 165px;
        }

        .product-card .product-image-container {
            padding: 6px;
        }

        .product-card .showcase-box .price {
            padding: 5px 8px;
        }

        .product-card .showcase-box .price > span:first-child {
            font-size: 0.9rem !important;
        }

        .product-card .title {
            font-size: 0.82rem;
        }
    }