/* ======================================================================
   page-section.bigcartel-products

   Structure:
   section.page-section.bigcartel-products
       .pad
           .container
               .section-intro                          (optional)
               .items-container.cards[.n*]
                   a.item|div.item [.is-active|.is-sold-out] [.is-course|.is-physical] [.has-image .has-link]
                       .image-wrap [.empty]
                           img
                       .content-wrap
                           .heading > h3
                           p.price
                           .content
                           p.sold-out-badge            (sold-out items)
                           span.item-cta               (active items, from shared)
               .section-outro                          (optional)

   Grid columns come from shared-items-grid.css (.items-container.cards).
   ====================================================================== */


/* --- Image: use a taller aspect ratio — product/course images
       are often portrait or square rather than landscape 16:9       --- */

.bigcartel-products .image-wrap {
    aspect-ratio: 3 / 2;
}


/* --- Description — trimmed to N words in PHP (section field "Beskrivning");
       the line clamp is only a safety net for very long words / narrow cards.
       Clamp sits on the <p> so the ellipsis renders and nothing is cut mid-line. --- */

.bigcartel-products .content {
	margin-bottom: 16px;
}

.bigcartel-products .content p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* --- Price --- */

.bigcartel-products .price {
    margin: 0 0 0.75em;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ctx-fg);
}


/* --- Sold-out items — visually muted --- */

.bigcartel-products .item.is-sold-out {
    /*opacity: 0.65;*/
}

.bigcartel-products .item.is-sold-out .image-wrap img {
    filter: grayscale(35%);
    transition: filter 0.2s;
}


/* --- Sold-out badge --- */

/* Buy button + sold-out label share size and spot: bottom right of the card */
.bigcartel-products .item .content-wrap .item-cta,
.bigcartel-products .item .content-wrap .sold-out-badge {
	align-self: flex-end;
	margin: auto 0 0;
	padding: 12px 20px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	border: solid 2px var(--ctx-btn-primary-border);
	border-radius: var(--border-radius);
}

/* Buy button — the black primary button (same look as a.btn.btn-primary),
   lightened when the whole card is hovered or focused */
.bigcartel-products .item .content-wrap .item-cta {
	background: var(--ctx-btn-primary-bg);
	color: var(--ctx-btn-primary-text);
	transition: background .15s, border-color .15s;
}

/* Sold-out label — transparent, black border and text. The selector is as
   specific as the shared card rule that colours every <p> with --item-text. */
.bigcartel-products .item .content-wrap .sold-out-badge {
	display: inline-block;
	background: transparent;
	color: var(--ctx-btn-primary-border);
}

.bigcartel-products a.item:hover .item-cta,
.bigcartel-products a.item:focus-visible .item-cta {
	background: color-mix(in srgb, var(--ctx-btn-primary-bg) 85%, white);
	border-color: color-mix(in srgb, var(--ctx-btn-primary-border) 85%, white);
}