/* ============================================ PRODUCT CARD — Krem.no Styles for woocommerce/content-product.php. All values use CSS variables from theme.json. ============================================ */ /* --- Product grid (WooCommerce default

) --- */ ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--custom--spacing--lg); list-style: none; margin: 0; padding: 0; } /* * Reset WC defaults. WC prefixes with .woocommerce (class on ), * so we use body.woocommerce to beat its specificity. */ body.woocommerce ul.products::before, body.woocommerce ul.products::after { display: none; content: none; } body.woocommerce ul.products li.product { float: none; width: auto; margin: 0; padding: 0; } body.woocommerce ul.products li.product a img { margin: 0; } /* --- Product card --- */ .product-card { background: var(--wp--preset--color--white); border-radius: var(--wp--custom--border-radius--lg); overflow: hidden; box-shadow: var(--wp--custom--shadow--card); transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition); display: flex; flex-direction: column; } .product-card:hover { transform: translateY(-4px); box-shadow: var(--wp--custom--shadow--lg); } /* --- Clickable card link --- */ .product-card__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: var(--wp--preset--color--text); } /* --- Product image --- */ .product-card__image { position: relative; overflow: hidden; } .product-card__image .img-product { aspect-ratio: 1 / 1; overflow: hidden; } .product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--wp--custom--transition); } .product-card:hover .product-card__image img { transform: scale(1.05); } .product-card__image--placeholder { aspect-ratio: 1 / 1; background: var(--wp--preset--color--background-alt); } /* --- Badge --- */ .product-card__badge { position: absolute; top: var(--wp--custom--spacing--md); left: var(--wp--custom--spacing--md); z-index: 2; } /* .badge, .badge--bestseller, .badge--new, .badge--utsolgt → moved to base.css */ /* --- Card body --- */ .product-card__body { padding: var(--wp--custom--spacing--md) var(--wp--custom--spacing--lg) var(--wp--custom--spacing--lg); flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--wp--custom--spacing--xs); } /* --- Product name (clamped to 2 lines for consistent card heights) --- */ .product-card__name { font-family: var(--wp--preset--font-family--heading); font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.05rem * 1.3 * 2); } /* --- Product price --- */ .product-card__price { font-size: 1.1rem; color: var(--wp--preset--color--primary); font-weight: 700; margin: 0; } .product-card__price del { color: var(--wp--preset--color--text-muted); font-weight: 400; font-size: 0.9rem; } .product-card__price ins { text-decoration: none; } /* --- "Se produkt" CTA (visual button — entire card is the actual link) --- */ /* margin-top: auto pushes the button to the bottom so all CTAs align across cards */ .product-card__cta { margin-top: auto; /* Don't let the pill text wrap when the card is narrow (mobile carousel). The button is inline-flex but is also a flex item of .product-card__body, so it can shrink below its content width — nowrap keeps "Se produkt" on one line even if it slightly overflows the body's inner padding. */ white-space: nowrap; } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { .product-card, .product-card__image img { transition-duration: 0s; } .product-card:hover { transform: none; } .product-card:hover .product-card__image img { transform: none; } } /* --- Responsive --- */ @media (max-width: 1100px) { ul.products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { ul.products { grid-template-columns: repeat(2, 1fr); } .product-card__body { padding-left: var(--wp--custom--spacing--md); padding-right: var(--wp--custom--spacing--md); } } @media (max-width: 480px) { ul.products { grid-template-columns: 1fr; } }