/* ============================================
   QckCart Product Page Templates Styles
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.qckcart-tpl { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; }
.qckcart-tpl *, .qckcart-tpl *::before, .qckcart-tpl *::after { box-sizing: border-box; }
.qckcart-tpl img { max-width: 100%; height: auto; }
.qckcart-tpl a { color: inherit; text-decoration: none; }
.qckcart-error { text-align: center; padding: 20px; color: #888; font-style: italic; }

/* Template Badge */
.qckcart-tpl-badge {
    position: absolute; top: 12px; left: 12px; padding: 4px 12px;
    color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; z-index: 2;
}

/* Template Title */
.qckcart-tpl-title { font-size: 24px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }

/* Rating */
.qckcart-tpl-rating { color: #f59e0b; font-size: 14px; margin-bottom: 8px; }
.qckcart-tpl-rating span { color: #888; font-size: 13px; margin-left: 4px; }
.qckcart-tpl-rating-small { color: #f59e0b; font-size: 12px; }

/* Price */
.qckcart-tpl-price { font-size: 22px; font-weight: 700; margin: 8px 0; }
.qckcart-tpl-price del { color: #999; font-size: 16px; font-weight: 400; }
.qckcart-tpl-price ins { text-decoration: none; }

/* Description */
.qckcart-tpl-desc { font-size: 14px; line-height: 1.6; color: #666; margin: 8px 0 16px; }

/* Stock */
.qckcart-tpl-instock { color: #22c55e; font-size: 13px; font-weight: 600; }
.qckcart-tpl-outstock { color: #ef4444; font-size: 13px; font-weight: 600; }

/* Actions Row */
.qckcart-tpl-actions { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.qckcart-tpl-buynow { font-size: 15px !important; padding: 14px 28px !important; }
.qckcart-tpl-addcart {
    padding: 14px 28px; border: 2px solid #ddd; border-radius: 10px;
    font-size: 15px; font-weight: 700; color: #333; transition: 0.3s;
}
.qckcart-tpl-addcart:hover { border-color: #333; background: #f5f5f5; }
.qckcart-tpl-category { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #888; }

/* ═══════ Single Product Layouts ═══════ */

/* Hero-1 */
.qckcart-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px; align-items: start; }
.qckcart-hero-main-img { position: relative; border-radius: 16px; overflow: hidden; }
.qckcart-hero-main-img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.qckcart-hero-thumbs { display: flex; gap: 8px; margin-top: 12px; }
.qckcart-thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: 0.2s; }
.qckcart-thumb.active, .qckcart-thumb:hover { border-color: #6C5CE7; }
.qckcart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qckcart-hero-info { padding-top: 20px; }

/* Minimal-1 */
.qckcart-minimal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px; align-items: center; }
.qckcart-minimal-img img { width: 100%; border-radius: 16px; }

/* Bold-1 */
.qckcart-bold-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px; align-items: center; }
.qckcart-bold-img img { width: 100%; border-radius: 16px; }

/* Luxury-1 */
.qckcart-luxury-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 60px; align-items: center; }
.qckcart-luxury-img img { width: 100%; border-radius: 4px; }
.qckcart-luxury-label { font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: #999; }
.qckcart-luxury-divider { width: 60px; height: 2px; background: #d4a574; margin: 16px 0; }

/* Fashion-1 */
.qckcart-fashion-hero { position: relative; }
.qckcart-fashion-bg { width: 100%; height: 500px; object-fit: cover; }
.qckcart-fashion-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 60px 40px 40px; color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}
.qckcart-fashion-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; opacity: 0.8; }
.qckcart-fashion-title { font-size: 36px; font-weight: 800; margin: 8px 0; }
.qckcart-fashion-price { font-size: 22px; font-weight: 700; margin-bottom: 16px; }

/* ═══════ Slider Layouts ═══════ */

/* Carousel-1 */
.qckcart-slider-scroll {
    display: flex; gap: 16px; overflow-x: auto; padding: 20px 0;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.qckcart-slider-scroll::-webkit-scrollbar { height: 4px; }
.qckcart-slider-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.qckcart-slider-card {
    flex: 0 0 240px; background: #fff; border: 1px solid #eee; border-radius: 14px;
    overflow: hidden; scroll-snap-align: start; transition: 0.3s;
}
.qckcart-slider-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-4px); }
.qckcart-slider-card-img { position: relative; }
.qckcart-slider-card-img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.qckcart-slider-card-info { padding: 14px; }
.qckcart-slider-card-info h4 { font-size: 14px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.qckcart-slider-card-info h4 a { color: #333; }
.qckcart-slider-pricing { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.qckcart-slider-price { font-size: 16px; font-weight: 700; color: #1e1e2f; }
.qckcart-slider-original { font-size: 13px; color: #999; text-decoration: line-through; }
.qckcart-slider-buynow { width: 100%; padding: 10px !important; font-size: 13px !important; border-radius: 8px !important; }

/* Grid-1 */
.qckcart-grid-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 20px 0; }
.qckcart-grid-card { background: #fff; border: 1px solid #eee; border-radius: 14px; overflow: hidden; transition: 0.3s; }
.qckcart-grid-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-3px); }
.qckcart-grid-card-img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.qckcart-grid-card-info { padding: 14px; }
.qckcart-grid-card-info h4 { font-size: 14px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; }
.qckcart-grid-card-info h4 a { color: #333; }

/* Masonry-1 */
.qckcart-masonry-wrap { columns: 3; column-gap: 16px; padding: 20px 0; }
.qckcart-masonry-card {
    display: inline-block; width: 100%; margin-bottom: 16px; border-radius: 14px;
    overflow: hidden; position: relative; break-inside: avoid;
}
.qckcart-masonry-card img { width: 100%; display: block; }
.qckcart-masonry-tall img { min-height: 300px; object-fit: cover; }
.qckcart-masonry-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px 14px 14px; color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    opacity: 0; transition: 0.3s;
}
.qckcart-masonry-card:hover .qckcart-masonry-overlay { opacity: 1; }
.qckcart-masonry-overlay h4 { font-size: 14px; margin: 0 0 4px; }
.qckcart-masonry-btn { width: 36px !important; height: 36px; padding: 0 !important; border-radius: 50% !important; font-size: 14px !important; position: absolute; top: 10px; right: 10px; display: flex !important; align-items: center; justify-content: center; }

/* ═══════ Category Layouts ═══════ */

/* Card-1 */
.qckcart-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; padding: 20px 0; }
.qckcart-cat-card {
    display: block; background: #fff; border: 1px solid #eee; border-radius: 14px;
    overflow: hidden; transition: 0.3s; text-align: center;
}
.qckcart-cat-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-3px); }
.qckcart-cat-card-img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.qckcart-cat-card-info { padding: 14px; }
.qckcart-cat-card-info h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.qckcart-cat-card-info span { font-size: 12px; color: #888; }

/* Pill-1 */
.qckcart-pill-wrap { display: flex; gap: 12px; overflow-x: auto; padding: 20px 0; -webkit-overflow-scrolling: touch; }
.qckcart-cat-pill {
    display: flex; align-items: center; gap: 10px; padding: 8px 20px 8px 8px;
    background: #f5f5f5; border-radius: 50px; white-space: nowrap;
    transition: 0.3s; font-weight: 600; font-size: 14px; color: #333;
}
.qckcart-cat-pill:hover { background: #e8e8e8; transform: scale(1.03); }
.qckcart-pill-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* Image Overlay-1 */
.qckcart-overlay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 20px 0; }
.qckcart-overlay-card {
    position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3;
}
.qckcart-overlay-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.qckcart-overlay-card:hover img { transform: scale(1.05); }
.qckcart-overlay-text {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px; color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
}
.qckcart-overlay-text h4 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.qckcart-overlay-text span { font-size: 13px; opacity: 0.85; }

/* ═══════ Responsive ═══════ */
@media (max-width: 768px) {
    .qckcart-hero-grid, .qckcart-minimal-grid, .qckcart-bold-grid, .qckcart-luxury-grid {
        grid-template-columns: 1fr; gap: 20px; padding: 20px;
    }
    .qckcart-fashion-bg { height: 350px; }
    .qckcart-fashion-title { font-size: 24px; }
    .qckcart-masonry-wrap { columns: 2; }
    .qckcart-luxury-grid { padding: 30px; gap: 30px; }
}
@media (max-width: 480px) {
    .qckcart-masonry-wrap { columns: 1; }
    .qckcart-grid-wrap { grid-template-columns: repeat(2, 1fr); }
}