/* CodeSeven Catalog Pro - Public CSS */

:root {
    --cscp-primary: #9333ea;
    --cscp-primary-dark: #7e22ce;
    --cscp-primary-light: #c026d3;
    --cscp-bg: #ffffff;
    --cscp-bg-soft: #f9fafb;
    --cscp-text: #111827;
    --cscp-text-muted: #6b7280;
    --cscp-border: #e5e7eb;
    --cscp-success: #10b981;
    --cscp-warning: #f59e0b;
    --cscp-error: #ef4444;
    --cscp-radius: 12px;
    --cscp-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
    --cscp-shadow-hover: 0 8px 24px rgba(147,51,234,.12);
}

.cscp-container { max-width: 1280px; margin: 0 auto; padding: 40px 20px; box-sizing: border-box; }
.cscp-container *, .cscp-container *::before, .cscp-container *::after { box-sizing: border-box; }

/* Header */
.cscp-archive-header { margin-bottom: 40px; }
.cscp-archive-header h1 { font-size: 2.5rem; margin: 0 0 12px; color: var(--cscp-text); }
.cscp-archive-desc { color: var(--cscp-text-muted); font-size: 1.1rem; margin: 0; }

/* Breadcrumbs */
.cscp-breadcrumbs { font-size: .9rem; color: var(--cscp-text-muted); margin-bottom: 16px; }
.cscp-breadcrumbs a { color: var(--cscp-primary); text-decoration: none; }
.cscp-breadcrumbs a:hover { text-decoration: underline; }
.cscp-breadcrumbs span { margin: 0 8px; }

/* Layout */
.cscp-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; }
@media (max-width: 768px) { .cscp-layout { grid-template-columns: 1fr; } }

/* Sidebar */
.cscp-sidebar > * { margin-bottom: 24px; }
.cscp-search { display: flex; gap: 0; margin-bottom: 24px; }
.cscp-search input { flex: 1; padding: 10px 14px; border: 2px solid var(--cscp-border); border-right: none; border-radius: var(--cscp-radius) 0 0 var(--cscp-radius); font-size: .95rem; outline: none; }
.cscp-search input:focus { border-color: var(--cscp-primary); }
.cscp-search button { padding: 10px 18px; background: var(--cscp-primary); color: #fff; border: 2px solid var(--cscp-primary); border-radius: 0 var(--cscp-radius) var(--cscp-radius) 0; cursor: pointer; font-size: 1.1rem; }

.cscp-widget h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cscp-text-muted); margin: 0 0 12px; }
.cscp-cat-list { list-style: none; padding: 0; margin: 0; }
.cscp-cat-list li { margin-bottom: 4px; }
.cscp-cat-list a { display: block; padding: 8px 12px; color: var(--cscp-text); text-decoration: none; border-radius: 8px; transition: all .15s; }
.cscp-cat-list a:hover { background: var(--cscp-bg-soft); color: var(--cscp-primary); }
.cscp-cat-list a.active { background: var(--cscp-primary); color: #fff; }
.cscp-count { color: var(--cscp-text-muted); font-size: .85rem; margin-left: 4px; }
.cscp-cat-list a.active .cscp-count { color: rgba(255,255,255,.7); }

/* Product Grid */
.cscp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }

.cscp-card-product { background: var(--cscp-bg); border: 1px solid var(--cscp-border); border-radius: var(--cscp-radius); overflow: hidden; transition: all .25s ease; position: relative; }
.cscp-card-product:hover { transform: translateY(-4px); box-shadow: var(--cscp-shadow-hover); border-color: var(--cscp-primary-light); }
.cscp-card-link { display: block; text-decoration: none; color: inherit; }
.cscp-card-image { position: relative; aspect-ratio: 1/1; background: var(--cscp-bg-soft); overflow: hidden; }
.cscp-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cscp-card-product:hover .cscp-card-image img { transform: scale(1.05); }
.cscp-card-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 64px; opacity: .3; }
.cscp-card-body { padding: 16px; }
.cscp-card-body h3 { font-size: 1rem; margin: 0 0 6px; color: var(--cscp-text); line-height: 1.4; }
.cscp-card-sku { font-size: .8rem; color: var(--cscp-text-muted); margin: 0 0 8px; font-family: monospace; }
.cscp-card-desc { font-size: .9rem; color: var(--cscp-text-muted); margin: 0 0 12px; line-height: 1.5; }
.cscp-card-price { font-size: 1.25rem; font-weight: 700; color: var(--cscp-primary); }

/* Badges */
.cscp-badge { position: absolute; top: 12px; padding: 4px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.cscp-badge-featured { left: 12px; background: linear-gradient(135deg, var(--cscp-primary), var(--cscp-primary-light)); color: #fff; }
.cscp-badge-out { right: 12px; background: var(--cscp-error); color: #fff; }

/* Single product */
.cscp-single { padding-top: 24px; }
.cscp-product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
@media (max-width: 768px) { .cscp-product-layout { grid-template-columns: 1fr; } }

.cscp-product-gallery { position: sticky; top: 20px; align-self: start; }
.cscp-gallery-main { border-radius: var(--cscp-radius); overflow: hidden; background: var(--cscp-bg-soft); aspect-ratio: 1/1; }
.cscp-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.cscp-gallery-placeholder { aspect-ratio: 1/1; background: var(--cscp-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 120px; opacity: .3; border-radius: var(--cscp-radius); }
.cscp-gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.cscp-thumb { padding: 0; border: 2px solid var(--cscp-border); border-radius: 8px; overflow: hidden; cursor: pointer; background: none; aspect-ratio: 1/1; }
.cscp-thumb:hover, .cscp-thumb.active { border-color: var(--cscp-primary); }
.cscp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cscp-product-info h1 { font-size: 2rem; margin: 0 0 12px; color: var(--cscp-text); }
.cscp-sku { color: var(--cscp-text-muted); margin: 0 0 12px; font-size: .9rem; }
.cscp-short-desc { color: var(--cscp-text-muted); font-size: 1.05rem; line-height: 1.6; margin: 0 0 20px; }
.cscp-price-big { font-size: 2.5rem; font-weight: 700; color: var(--cscp-primary); margin: 20px 0; }
.cscp-stock { font-size: .95rem; margin: 0 0 24px; padding: 8px 12px; border-radius: 8px; display: inline-block; }
.cscp-stock.in { background: rgba(16,185,129,.1); color: var(--cscp-success); }
.cscp-stock.out { background: rgba(239,68,68,.1); color: var(--cscp-error); }

/* Attrs table */
.cscp-attrs { width: 100%; border-collapse: collapse; margin: 24px 0; }
.cscp-attrs th, .cscp-attrs td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--cscp-border); }
.cscp-attrs th { color: var(--cscp-text-muted); font-weight: 600; width: 40%; font-size: .9rem; }
.cscp-attrs td { color: var(--cscp-text); }
.cscp-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; margin-right: 6px; vertical-align: middle; border: 1px solid var(--cscp-border); }

/* CTA */
.cscp-cta { display: flex; gap: 12px; margin-top: 24px; }
.cscp-btn { padding: 14px 28px; border-radius: var(--cscp-radius); border: none; cursor: pointer; font-weight: 600; font-size: 1rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all .2s; }
.cscp-btn-primary { background: linear-gradient(135deg, var(--cscp-primary), var(--cscp-primary-light)); color: #fff; }
.cscp-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--cscp-shadow-hover); }
.cscp-btn-secondary { background: var(--cscp-bg-soft); color: var(--cscp-text); border: 2px solid var(--cscp-border); }
.cscp-btn-secondary:hover { border-color: var(--cscp-primary); color: var(--cscp-primary); }

/* Description / Specs sections */
.cscp-description, .cscp-specs { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--cscp-border); }
.cscp-description h2, .cscp-specs h2 { font-size: 1.5rem; margin: 0 0 16px; color: var(--cscp-text); }
.cscp-content { font-size: 1.05rem; line-height: 1.7; color: var(--cscp-text); }
.cscp-content p { margin: 0 0 16px; }

/* Empty state */
.cscp-empty { text-align: center; padding: 80px 20px; color: var(--cscp-text-muted); }
.cscp-empty h3 { font-size: 1.5rem; margin: 16px 0 8px; color: var(--cscp-text); }