.produkt-feed-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;
padding: 15px;
} .produkt-card {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
transition: transform 0.25s ease, box-shadow 0.25s ease;
position: relative; } .produkt-image-container {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: #fff;
height: 200px; border-bottom: 1px solid #f2f2f2;
}
.produkt-image-container img.produkt-billede {
display: block;
margin: 0 auto;
width: auto;
height: auto;
max-width: 70%;
max-height: 70%;
object-fit: contain;
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 0;
}
.produkt-image-container img.produkt-billede[data-loaded="true"] {
opacity: 1;
}  .produkt-info {
padding: 12px 14px 14px;
text-align: center;
}
.produkt-navn {
font-size: 15px;
font-weight: 600;
color: #222;
line-height: 1.3;
margin-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6em;
}
.produkt-glpris {
font-size: 13px;
color: #666;
text-decoration: line-through;
margin-bottom: 4px;
min-height: 1.4em;
}
.produkt-glpris:empty,
.produkt-glpris:blank,
.produkt-glpris:has( ) {
display: none !important;
}
.produkt-nypris {
font-size: 16px;
color: #0073aa;
font-weight: 700;
margin-bottom: 8px;
}
.produkt-fragtomk {
font-size: 13px;
color: #666;
margin-bottom: 10px;
}
.produkt-forhandler {
font-size: 13px;
color: #666;
margin-bottom: 10px;
} .produkt-knap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 52px;
padding: 0 10px; background: #0073aa;	
color: #fff;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
line-height: 1.3;
box-sizing: border-box;
overflow: hidden;
text-wrap: normal;
white-space: normal;
word-break: break-word;
transition: none !important;
cursor: pointer;
} .produkt-knap:hover,
.produkt-knap:focus,
.produkt-knap:active {
color: #fff !important; background: #0073aa !important;
text-decoration: none !important;
transform: none !important;
}   .produkt-badge {
position: absolute;
top: 8px;
left: 8px;
background: #ffcc00;
color: #000;
font-size: 0.75em;
font-weight: 700;
padding: 3px 7px;
border-radius: 4px;
z-index: 10;
opacity: 1 !important;
transition: none !important;
pointer-events: none;
} .produkt-filter-sortering {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center; gap: 12px;
padding: 8px 12px;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
margin: 0 auto 20px auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
max-width: 900px; overflow-x: auto; } .produkt-filter-sortering label {
display: none; }
.produkt-filter-sortering select {
flex: 0 0 auto;
min-width: 130px;
max-width: 160px;
height: 34px;
padding: 4px 8px;
font-size: 13px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fafafa;
cursor: pointer;
transition: border 0.2s ease;
}
.produkt-filter-sortering select:hover {
border-color: #0073aa;
} .filter-tilbud {
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
font-size: 13px;
color: #333;
}
.filter-tilbud input[type="checkbox"] {
transform: scale(1.1);
cursor: pointer;
} @media (max-width: 768px) {
.produkt-filter-sortering {
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.produkt-filter-sortering select {
min-width: 45%;
} .filter-tilbud {
width: 100%;
justify-content: center;
margin-top: 5px;
}
}
}
@media (max-width: 480px) {
.produkt-feed-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.produkt-image-container {
height: 140px;
}
}