/* =====================================================
   NamoLock — Product Catalog (Phase 1)
   Additive stylesheet, loaded after styles.css on every
   /products/... page. Reuses the existing design tokens
   defined in styles.css :root — no new palette introduced.
   ===================================================== */

/* --- Breadcrumb --- */
.breadcrumb {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-xs);
    padding: var(--s-2) 0;
}
.breadcrumb .container { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.breadcrumb a { color: var(--text-soft); font-weight: 500; transition: color var(--dur) var(--ease); }
.breadcrumb a:hover { color: var(--accent-dark); }
.breadcrumb span[aria-current="page"] { color: var(--text); font-weight: 600; }
.breadcrumb-sep { color: var(--text-faint); }

/* --- Category hub cards (Home / Products) --- */
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.category-grid-wide { grid-template-columns: repeat(3, 1fr); }
.category-card {
    display: block;
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    transition: all var(--dur) var(--ease);
}
.category-card:hover { border-color: var(--accent-strong); box-shadow: var(--sh-md); transform: translateY(-2px); }
.category-card h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.category-card p { font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.category-card-count { font-size: var(--fs-xs); color: var(--accent-dark); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* --- Product Category sub-nav pills --- */
.product-category-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.product-category-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: var(--fs-sm); font-weight: 600; color: var(--text);
    transition: all var(--dur) var(--ease);
}
.product-category-pill:hover { border-color: var(--accent-strong); background: var(--accent-soft); color: var(--accent-dark); }
.product-category-pill span { color: var(--text-dim); font-weight: 500; }

/* --- Product card (used in category grids + similar products) --- */
.product-card {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: all var(--dur) var(--ease);
}
.product-card:hover { border-color: var(--accent-strong); box-shadow: var(--sh-md); transform: translateY(-2px); }
.product-card-visual {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-4);
}
.product-card-visual svg { width: 45%; height: auto; color: var(--accent-dark); }
.product-card-visual .badge {
    position: absolute; top: var(--s-2); left: var(--s-2);
    padding: 4px var(--s-2); background: var(--accent); color: #fff;
    border-radius: var(--r-pill); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.product-card-body { padding: var(--s-4); flex: 1; display: flex; flex-direction: column; }
.product-card-body h3 { font-size: var(--fs-md); margin-bottom: var(--s-1); }
.product-card-model { font-size: var(--fs-xs); color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; margin-bottom: var(--s-2); display: block; }
.product-card-body p { font-size: var(--fs-sm); color: var(--text-soft); }

/* --- Product Detail Page (PDP) --- */
.pdp { padding: var(--s-6) 0 var(--s-8); }
.pdp-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: start; margin-bottom: var(--s-6); }

.pdp-gallery { position: sticky; top: calc(80px + var(--s-4)); }
.pdp-gallery-main {
    position: relative;
    aspect-ratio: 1;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.pdp-gallery-main svg { width: 50%; height: auto; color: var(--accent-dark); filter: drop-shadow(0 8px 24px rgba(197, 146, 125, 0.3)); }
.pdp-gallery-main .badge {
    position: absolute; top: var(--s-3); left: var(--s-3);
    padding: var(--s-1) var(--s-3); background: var(--accent); color: #fff;
    border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.pdp-gallery-thumbs { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.pdp-gallery-thumb {
    width: 64px; height: 64px; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); display: flex; align-items: center; justify-content: center;
    padding: var(--s-1);
}
.pdp-gallery-thumb svg { width: 70%; height: auto; color: var(--accent-dark); opacity: 0.6; }
.pdp-gallery-note { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-dim); font-style: italic; }

.pdp-info h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: var(--s-2); }
.pdp-model-no { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--s-3); }
.pdp-model-no strong { color: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.02em; }
.pdp-info .product-intro { margin-bottom: var(--s-4); }

.variant-swatches { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.variant-swatch {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong);
    display: inline-block;
}
.variant-swatch.is-selected { box-shadow: 0 0 0 2px var(--accent); }
.variant-swatch-label { font-size: var(--fs-xs); color: var(--text-dim); margin-left: var(--s-1); }

/* --- Collapsible info accordion (Features / Specs / Best For) --- */
.pdp-accordion { max-width: 900px; margin: 0 auto var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.accordion-item {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    overflow: hidden;
}
.accordion-item[open] { border-color: var(--accent-strong); }
.accordion-item summary {
    cursor: pointer;
    padding: var(--s-3) var(--s-4);
    font-weight: 600; font-size: var(--fs-base);
    color: var(--text);
    display: flex; align-items: center; justify-content: space-between;
    list-style: none;
    transition: background var(--dur) var(--ease);
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary:hover { background: var(--surface-2); }
.accordion-item summary::after {
    content: ''; width: 8px; height: 8px;
    border-right: 2px solid var(--accent-dark); border-bottom: 2px solid var(--accent-dark);
    transform: rotate(45deg); transition: transform var(--dur) var(--ease); flex-shrink: 0;
}
.accordion-item[open] summary::after { transform: rotate(-135deg); }
.accordion-body { padding: 0 var(--s-4) var(--s-4); }

.feature-list { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.feature-list li strong { display: block; font-size: var(--fs-sm); color: var(--text); margin-bottom: 2px; }
.feature-list li p { font-size: var(--fs-sm); }

.best-for-badges { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.best-for-badge {
    flex: 1 1 200px;
    padding: var(--s-3);
    background: var(--accent-soft);
    border-radius: var(--r-sm);
    border: 1px solid var(--accent-strong);
}
.best-for-tag { display: block; font-weight: 700; color: var(--accent-dark); font-size: var(--fs-sm); margin-bottom: 2px; }
.best-for-note { font-size: var(--fs-xs); color: var(--text-soft); }

/* --- Similar products --- */
.similar-products { margin-top: var(--s-6); }

/* --- Responsive --- */
@media (max-width: 900px) {
    .pdp-wrap { grid-template-columns: 1fr; gap: var(--s-5); }
    .pdp-gallery { position: static; }
    .category-grid, .category-grid-wide { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .category-grid, .category-grid-wide { grid-template-columns: 1fr; }
    .best-for-badge { flex: 1 1 100%; }
}