/*
 * Produktkort och brödsmulor – delas av CST Produktrad, Produktinfo och Produktlista.
 * Laddas globalt eftersom korten finns i flera moduler.
 */


.cst-prod { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--cst-linje); border-left: 1px solid var(--cst-linje); }
.cst-prod__kort { position: relative; display: flex; flex-direction: column; border-right: 1px solid var(--cst-linje); border-bottom: 1px solid var(--cst-linje); background: #fff; color: var(--cst-ink); text-decoration: none; }
/* Fokusramen på kortets kant och kortet överst – annars döljs ramen av kortet bredvid (utanför) eller av bilden (innanför).
   BB:s layout-CSS ger alla länkar ram vid :focus (även musklick); på korten bara vid tangentbordsfokus. */
.cst-prod .cst-prod__kort:focus { z-index: 1; outline-offset: 0; }
.cst-prod .cst-prod__kort:focus:not(:focus-visible) { outline: none; }
.cst-prod .cst-prod__kort:focus-visible { z-index: 1; outline: 2px solid var(--cst-deep); outline-offset: 0; }
.cst-prod__etiketter { position: absolute; top: 0; left: 0; z-index: 1; display: flex; flex-wrap: wrap; }
.cst-prod__etikett { padding: 6px 10px; background: var(--cst-deep); color: var(--cst-lime); font-family: var(--cst-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
/* Proffsmaskin i privat-läget: omvända färgerna, så att den skiljer sig från Rea och Nyhet. */
.cst-prod__etikett--proffs { background: var(--cst-lime); color: var(--cst-deep); }
.cst-prod__bild { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--cst-bakgrund); }
.cst-prod__bild img { position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); object-fit: contain; mix-blend-mode: multiply; transition: transform .4s ease; }
.cst-prod__kort:hover .cst-prod__bild img { transform: scale(1.04); }
.cst-prod__text { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.cst-prod__marke { color: var(--cst-dampad); font-family: var(--cst-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.cst-prod__namn { font-weight: 600; font-size: 15px; line-height: 1.3; text-wrap: pretty; overflow-wrap: break-word; } /* Långa artikelnamn (MHBC1204E …) bryts i stället för att göra kortet bredare. */
/* Beloppet bryts aldrig ("95 / 920 kr"). Får det inte plats bredvid knappen hamnar knappen på egen rad i full bredd
   (knappen växer bara när den står ensam – priset tar nästan allt fritt utrymme på en delad rad). */
.cst-prod__rad { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; }
.cst-prod__pris { flex: 999 0 auto; font-family: var(--cotheme-font-heading); font-size: 32px; line-height: 1; color: var(--cst-ink); font-variant-numeric: tabular-nums; }
.cst-prod__pris .woocommerce-Price-amount { white-space: nowrap; }
.cst-prod__pris small, .cst-prod__pris .woocommerce-price-suffix { display: block; margin-top: 5px; font-family: var(--cst-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cst-dampad); }
.cst-prod__pris del { font-size: .6em; opacity: .6; }
.cst-prod__pris ins { text-decoration: none; }
.cst-prod__knapp { flex: 1 0 auto; text-align: center; padding: 10px 16px; border-radius: 999px; background: var(--cst-deep); color: #fff; font-weight: 600; font-size: 13px; transition: background-color .2s; }
.cst-prod__kort:hover .cst-prod__knapp { background: var(--cst-deep2); }
.cst-prod__tom { padding: 20px; border: 1px dashed var(--cst-linje); color: var(--cst-dampad); }

@media (max-width: 1100px) {
	.cst-prod { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cst-prod__pris { font-size: 26px; }
}

@media (max-width: 560px) {
	.cst-prod__bild img { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
	.cst-prod__text { padding: 12px 12px 14px; }
	.cst-prod__namn { font-size: 13.5px; }
	.cst-prod__marke, .cst-prod__etikett { font-size: 10px; }
	.cst-prod__rad { flex-wrap: wrap; }
	.cst-prod__pris { flex: 1 0 100%; font-size: 24px; }
	.cst-prod__knapp { width: 100%; text-align: center; padding: 9px 12px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.cst-prod__bild img { transition: none; }
}

/* Teknikord på kortet (kategorilistan). */
.cst-prod__teknik { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cst-prod__teknik span { padding: 3px 7px; white-space: nowrap; border: 1px solid var(--cst-linje); color: var(--cst-deep); font-family: var(--cst-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* Tre kolumner (kategorilistan). */
.cst-prod--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cst-prod--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Brödsmulor ---------------------------------------------------------------- */
.cst-smulor { display: flex; flex-wrap: wrap; gap: 10px; padding-block: 14px 0; color: var(--cst-dampad); font-family: var(--cst-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.cst-smulor a { color: inherit; text-decoration: none; }
.cst-smulor a:hover, .cst-smulor a:focus-visible { color: var(--cst-deep); text-decoration: underline; }
.cst-smulor__nu { color: var(--cst-ink); }
.cst-smulor--mork { color: #a9c2b6; }
.cst-smulor--mork a:hover, .cst-smulor--mork a:focus-visible { color: #fff; }
.cst-smulor--mork .cst-smulor__nu { color: #fff; }

/* "Från" före lägsta pris (produkter med utförande). */
.cst-prod__pris .cst-fran { font-size: .5em; letter-spacing: .02em; }