/* 1. Font-face for local Cairo font */
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 2. Custom Plugin Styles */
.shps-container {
    font-family: 'Cairo', sans-serif;
}

.shps-title {
    color: #FFFFFF; /* White color */
}

/* Use this in your theme's dark mode CSS if needed */
.dark .shps-title {
    color: #f9fafb;
}

/* Main Product Card */
.product-card {
    display: block;
    background-color: #000;
    border: 1px solid #374151;
    border-radius: 1rem; /* rounded-2xl */
    overflow: hidden;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.view-more-btn {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}




.product-card:hover,
.product-card:focus {
    transform: translateY(-0.5rem); /* hover:-translate-y-2 */
}

.product-card:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* Custom focus ring */
}

.card-content {
    display: flex;
    align-items: center;
    padding: 1.25rem; /* p-5 */
    gap: 1rem; /* space-x-4 */
}

.card-image {
    width: 5rem; /* w-20 */
    height: 5rem; /* h-20 */
    border-radius: 0.5rem; /* rounded-lg */
    object-fit: cover;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); /* shadow-lg */
    flex-shrink: 0;
}

.card-text {
    color: #fff;
    min-width: 0; /* Important for flex child text overflow */
}

.card-title, .card-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #FFFFFF; /* WHITE color */
}
.card-subtitle {
    color: #FFFFF; /* text-white-300 */
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
    margin-top: 0.25rem; /* mt-1 */
}

.card-accent-bar {
    height: 0.25rem; /* h-1 */
    width: 0;
    transition: width 0.3s ease-in-out;
}

.product-card:hover .card-accent-bar,
.product-card:focus .card-accent-bar {
    width: 100%;
}

/* Responsive Card Sizing */
.swiper-slide {
    width: 277px;
}

@media (min-width: 640px) {
    .swiper-slide {
        width: 280px;
    }
}

@media (min-width: 1024px) {
    .swiper-slide {
        width: 290px;
    }
}

/* 3. Static Tailwind CSS Utilities (for container layout) */
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.font-bold { font-weight: 700; }
.mb-8 { margin-bottom: 2rem; }
.text-center { text-align: center; }
.tracking-wider { letter-spacing: 0.05em; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-0 { padding-left: 0; padding-right: 0; }
.max-w-\[300px\] { max-width: 300px; }

@media (min-width: 640px) {
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:max-w-\[90\%\] { max-width: 90%; }
}
@media (min-width: 768px) {
    .md\:max-w-3xl { max-width: 48rem; }
}
@media (min-width: 1024px) {
    .lg\:max-w-7xl { max-width: 80rem; }
}