/* ------------------------------------------------------------------ Dalafisk – product card ------------------------------------------------------------------ Ported from HTMLdesigns/ (.kort). Two deliberate changes from the design: 1. .kort__lank has no CSS in the design, so the card's overlay link is inert there. Here it is a real stretched link, which is clearly the intent and makes the whole card clickable. 2. The design ships two add-to-cart labels (.lang-text / .kort-text) but only ever shows the long one, so the card renders a single label. ------------------------------------------------------------------ */ .dalafisk-product-card { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; } /* Stretched overlay link: covers the card, but sits under the badge and the add-to-cart button so those stay clickable. */ .dalafisk-product-card__link { position: absolute; inset: 0; z-index: 1; } .dalafisk-product-card__media { flex: none; height: 317px; border-radius: 15px; overflow: hidden; background: var(--dalafisk-card-bg); } .dalafisk-product-card__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22, .61, .36, 1); } .dalafisk-product-card:hover .dalafisk-product-card__image { transform: scale(1.045); } /* The brand fish icons are drawn in a 48x32 viewBox but dalafisk-icons.liquid emits width AND height from `size`, so in a square box the glyph letterboxes to size x size/1.5 and loses a third of its height. The design's runtime sizes by HEIGHT and lets the width follow the viewBox — `ik(ikon, 19)` renders 28.5x19 — which is why every other place that draws one (the category tiles, the drawer rows, the mega menu) hand-writes a width/height pair. `width: auto` alone is not enough — with both width and height attributes on the the intrinsic ratio comes from THOSE (19/19), not the viewBox, so the box stayed square. `aspect-ratio` restates the viewBox's own 48:32 and the width falls out of it: 28.5x19, the design's numbers exactly. */ .dalafisk-product-card__badge .dalafisk-icon[class*="brand-fish-"] { height: 19px; width: auto; aspect-ratio: 48 / 32; } .dalafisk-product-card__badge { position: absolute; top: 16px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 12px; color: var(--dalafisk-ink); background: var(--dalafisk-card-bg); } .dalafisk-product-card__body { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; background: var(--dalafisk-white); border-radius: 15px; } /* The title uses the body face, not the heading face, and is capped to one line so the cards keep a common height in the carousel. */ /* Scoped to two classes so it outranks the base heading tracking: the card title is an

but the design gives it no heading tracking (.kort h3 { letter-spacing: 0 }) — it reads as body text, not a heading. */ .dalafisk-product-card .dalafisk-product-card__title { letter-spacing: normal; } .dalafisk-product-card__title { font-family: inherit; font-weight: 500; font-size: 16px; letter-spacing: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0; color: var(--dalafisk-ink); } .dalafisk-product-card__tagline { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--dalafisk-text-4); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dalafisk-product-card .dalafisk-rating { margin: 8px 0 12px; font-size: 13px; color: var(--dalafisk-text-3); } /* Wraps rather than squeezes. A long Swedish button label ("Lägg i kundvagn") next to a four-digit price does not fit a 250px card, and the price must never be the thing that breaks — so the button drops to its own line. */ .dalafisk-product-card__footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid #ececec; } .dalafisk-product-card__price { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 0 0 auto; } .dalafisk-product-card__price-label { font-size: 12.5px; color: var(--dalafisk-text-5); margin: 0; } .dalafisk-product-card__price-label s { color: var(--dalafisk-text-5); text-decoration-thickness: 1px; } .dalafisk-product-card__price-value { font-weight: 700; font-size: 17px; white-space: nowrap; } /* Scoped with the card class so these win over product-grid.css regardless of which section loads first. That file sets .product-card--add-to-cart-button { width: 100% } at the same specificity, which would otherwise crush the price to zero width. The Pinnacle class has to stay on the element because app.js uses it as the quick-add hook. */ .dalafisk-product-card .dalafisk-product-card__add { width: auto; max-width: 100%; flex: 0 1 auto; position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; border: 1.5px solid var(--dalafisk-ink); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 500; /* A