/* ─── Equipment Grid Block ─── */
.crs-equipment-grid {
    display: grid;
    grid-template-columns: repeat(var(--crs-cols, 3), 1fr);
    gap: 24px;
    margin: 30px 0;
}

.crs-equipment-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.crs-equipment-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.crs-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.crs-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.crs-card-placeholder .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #ccc;
}

.crs-card-body {
    padding: 16px;
}
.crs-kit-card .crs-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.crs-kit-card .crs-add-kit-btn {
    margin-top: auto;
}

.crs-card-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.crs-card-price {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}
.crs-card-price small {
    font-size: 13px;
    font-weight: 400;
    color: #666;
}

/* ─── Kits Grid Block ─── */
.crs-kits-grid {
    display: grid;
    grid-template-columns: repeat(var(--crs-cols, 2), 1fr);
    gap: 24px;
    margin: 30px 0;
}

.crs-kit-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.2s ease;
    /* Grid items stretch to the tallest row-mate by default - make the card
       actually fill that height and push its button to a shared bottom edge
       regardless of how many kit-items each card lists. */
    height: 100%;
    display: flex;
    flex-direction: column;
}
.crs-kit-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.crs-kit-savings-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #22c55e;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    z-index: 1;
}

.crs-kit-title {
    color: #1a1a1a; /* same near-black as the price; was inheriting the theme's #3a3a3a grey */
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

/* Name + subheading block; frontend.js equalises its height per row so prices line up.
   flow-root keeps the children's margins inside it, so heights compare exactly. */
.crs-kit-head,
.crs-card-head {
    display: flow-root;
}
.crs-card-subheading {
    margin: -4px 0 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #666;
}
.crs-kit-subheading {
    margin: -4px 0 10px;
    font-size: 15px;
    line-height: 1.4;
    color: #666;
}
.crs-detail-subtitle {
    font-size: 17px;
    margin: 0 0 12px;
}

.crs-kit-price {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 12px;
}
.crs-kit-price small {
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

.crs-kit-items {
    margin: 0 0 12px;
    padding: 0 0 0 20px;
    font-size: 14px;
    color: #444;
}
.crs-kit-items li {
    margin-bottom: 4px;
}
/* Kit contents grouped by item category (Filters, Support...) */
.crs-kit-groups {
    margin: 12px 0 20px;
}
.crs-kit-groups .crs-kit-items:last-child {
    margin-bottom: 0;
}
.crs-kit-group-title {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1a1a1a;
}
.crs-detail-subheading {
    margin: 16px 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ─── Empty State ─── */
.crs-block-empty {
    text-align: center;
    color: #999;
    padding: 40px 20px;
    font-style: italic;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .crs-equipment-grid,
    .crs-kits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}
@media (max-width: 480px) {
    .crs-equipment-grid,
    .crs-kits-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Card links (photo + title open the item page) ─── */
a.crs-card-image { text-decoration: none; }
.crs-card-image img { transition: transform 0.3s ease; }
a.crs-card-image:hover img { transform: scale(1.03); }
.crs-card-title a,
.crs-kit-title a { color: inherit; text-decoration: none; }
/* The theme colours visited links blue; keep package names near-black either way. */
.crs-kit-card .crs-kit-title a,
.crs-kit-card .crs-kit-title a:visited { color: #1a1a1a; }
.crs-card-title a:hover,
.crs-kit-title a:hover { text-decoration: underline; }

/* ─── Item / kit detail page ─── */
.crs-detail-page .entry-header,
.crs-detail-page .page-header-image-single { display: none; }
.crs-detail { max-width: 1200px; margin: 0 auto 40px; }
.crs-detail-back {
    display: inline-block;
    margin-bottom: 24px;
    font-size: 14px;
    color: #666;
    text-decoration: none;
}
.crs-detail-back:hover { color: #1a1a1a; }
.crs-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.crs-detail-image {
    aspect-ratio: 4 / 3;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}
.crs-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.crs-detail-title {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}
.crs-detail-price {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
}
.crs-detail-price small { font-size: 15px; font-weight: 400; color: #666; }
.crs-detail-meta { margin: 0 0 8px; font-size: 14px; color: #555; }
.crs-detail-description { margin: 16px 0 20px; color: #333; }
.crs-detail-info .crs-add-btn { width: 100%; margin: 8px 0 24px; }
.crs-detail-heading {
    margin: 24px 0 10px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.crs-detail-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.crs-detail-specs th,
.crs-detail-specs td { padding: 8px 0; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
.crs-detail-specs th { width: 40%; font-weight: 600; color: #444; }
.crs-detail-list { margin: 0; padding-left: 20px; font-size: 14px; color: #333; }
.crs-detail-list li { margin-bottom: 4px; }
.crs-detail-booking { margin-top: 40px; }

@media (max-width: 768px) {
    .crs-detail-grid { grid-template-columns: 1fr; gap: 24px; }
    .crs-detail-title { font-size: 24px; }
}
.crs-detail-list ul { margin: 4px 0 6px; padding-left: 18px; list-style: circle; }
.crs-detail-list ul li { margin-bottom: 2px; color: #555; }

/* ─── Category banners (Camera page section headings) ─── */
h2.crs-category-banner {
    background: #111;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    padding: 20px 24px;
    margin: 0 0 24px;
    border-radius: 8px;
    line-height: 1.2;
}
h2.crs-category-banner strong { font-weight: inherit; }
/* Banner that links out (Lighting & Grip -> Piccolo GLX): whole bar is clickable. */
h2.crs-category-banner--link { padding: 0; transition: background 0.2s ease; }
h2.crs-category-banner--link:hover { background: #333; }
h2.crs-category-banner--link a,
h2.crs-category-banner--link a:visited {
    display: block;
    padding: 20px 24px;
    color: #fff;
    text-decoration: none;
}
.crs-banner-arrow { font-size: 0.8em; margin-left: 4px; }
@media (max-width: 768px) {
    h2.crs-category-banner--link a { padding: 16px; }
}
h2.crs-category-banner + .crs-equipment-grid,
h2.crs-category-banner + .crs-kits-grid { margin-top: 0; }
@media (max-width: 768px) {
    h2.crs-category-banner { font-size: 22px; padding: 16px; }
}

/* Returning from an item/kit page via "All equipment" lands on this
   section's own grid (see CRS_Blocks::render_detail's catalog_url anchor),
   not the very top of the page. The offset clears the fixed Piccolo master
   nav (48px) plus the category banner sitting just above the grid. */
.crs-equipment-grid[id^="crs-cat-"],
#crs-kits {
    scroll-margin-top: 170px;
}
@media (max-width: 768px) {
    .crs-equipment-grid[id^="crs-cat-"],
    #crs-kits {
        scroll-margin-top: 130px;
    }
}