/* P527: hjertet (huskeliste) og /huskeliste/. Designmanualen (P406): ikon 24 px med 1,5 px streg, klikflade 44 px,
   hjørner 0/8/8/8 på små kontroller og 0/16/16/16 på kort og billeder; handlingsgrøn #4d7159 (rød er kun til fejl). */

/* Hjertet på varekortet: øverst til højre på billedet (mærkerne sidder til venstre). */
ul.products li.product:has(> .fliser-hjerte) { position: relative; }
ul.products li.product > .fliser-hjerte { position: absolute; top: 8px; right: 8px; z-index: 3; }
/* Martin 3-11: hjertet fyldte meget på billedet, så det er 5 px mindre (39 px, ikon 20 px). Trykfladen er stadig 44 px
   (manualen): ::before rækker 2,5 px ud til alle sider. */
.fliser-hjerte {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 39px; height: 39px; padding: 0; margin: 0;
	border: 0; border-radius: 0 8px 8px 8px; background: rgba(255, 255, 255, .92); color: #1d2320; cursor: pointer;
	box-shadow: 0 1px 3px rgba(29, 35, 32, .18); font: inherit; line-height: 1;
}
/* Temaets button:hover/:focus giver knapper en farvet bund; hjertet beholder sin egen (ellers en grøn firkant). */
.fliser-hjerte:hover, .fliser-hjerte:focus, .fliser-hjerte:active { background: rgba(255, 255, 255, .92); color: #4d7159; border-color: #e2e6e3; }
.fliser-hjerte::before { content: ""; position: absolute; inset: -2.5px; }
.fliser-hjerte:focus-visible { outline: 2px solid #4d7159; outline-offset: 2px; }
.fliser-hjerte-ikon { width: 20px; height: 20px; flex: none; }
.fliser-hjerte[aria-pressed="true"] { color: #4d7159; }
.fliser-hjerte[aria-pressed="true"] .fliser-hjerte-ikon path { fill: currentColor; }
.fliser-hjerte[aria-busy="true"] { opacity: .7; }

/* Varesiden (Martin 3-11): som på varekortet, på billedet øverst til højre, kun ikonet. Galleriet er klæbende på pc
   (position: sticky) og static på telefonen (style.css), så det får position: relative dér. */
.fliser-ps-galleri > .fliser-hjerte-billede { position: absolute; top: 12px; right: 12px; z-index: 3; }
@media (max-width: 900px) { .fliser-ps-v2 .fliser-ps-galleri:has(> .fliser-hjerte-billede) { position: relative; } }
/* Hjælpeteksten ved hover og tastaturfokus. Skærmlæsere får den som knappens navn (aria-label); spanen er aria-hidden. */
.fliser-hjerte-tip {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 4; padding: 6px 10px; border-radius: 0 8px 8px 8px;
	background: #1d2320; color: #fff; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap;
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, visibility 0s linear .15s;
}
.fliser-hjerte-billede:hover .fliser-hjerte-tip, .fliser-hjerte-billede:focus-visible .fliser-hjerte-tip { opacity: 1; visibility: visible; transition: opacity .15s; }
@media (hover: none) { .fliser-hjerte-billede:hover:not(:focus-visible) .fliser-hjerte-tip { opacity: 0; visibility: hidden; } }

/* Beskeden efter et tryk. */
.fliser-huske-boble {
	position: fixed; left: 50%; bottom: 16px; z-index: 9999; transform: translate(-50%, 24px); max-width: calc(100% - 32px);
	padding: 12px 16px; border-radius: 0 8px 8px 8px; background: #1d2320; color: #fff; font-size: 16px; line-height: 1.4;
	opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}
.fliser-huske-boble.er-synlig { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .2s; }
.fliser-huske-boble a { color: #fff; text-decoration: underline; font-weight: 700; margin-left: 8px; }

/* /huskeliste/ */
.fliser-huske-side { max-width: 1180px; margin: 0 auto; padding: 48px 32px 64px; font-family: "Red Hat Display", sans-serif; color: #1d2320; }
.fliser-huske-side h1 { font-size: 44px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; margin: 0 0 16px; }
.fliser-huske-side h2 { font-size: 24px; line-height: 1.25; font-weight: 500; margin: 0 0 16px; }
.fliser-huske-ind { font-size: 18px; max-width: 860px; margin: 0 0 32px; }
.fliser-huske-besked-top { padding: 12px 16px; background: #eef3ef; border-radius: 0 8px 8px 8px; margin: 0 0 24px; }
.fliser-huske-besked-top.er-fejl { background: #fff; border: 1px solid #e6223d; }
.fliser-huske-tom { font-size: 16px; }
.fliser-huske-tom a, .fliser-huske-side .fliser-huske-navn { color: #4d7159; }
.fliser-huske-liste { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 32px 24px; }
.fliser-huske-vare { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fliser-huske-billede img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0 16px 16px 16px; }
.fliser-huske-tekst { display: flex; flex-direction: column; gap: 4px; }
.fliser-huske-navn { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.fliser-huske-pris { font-size: 16px; }
.fliser-huske-besked { font-size: 14px; font-weight: 700; color: #e6223d; }
.fliser-huske-vare.er-udsolgt .fliser-huske-billede img { opacity: .6; }
.fliser-huske-fjern { margin: 0; }
.fliser-huske-fjern-knap {
	min-height: 44px; padding: 8px 16px; background: #fff; color: #373f16; border: 1px solid #c5ccc5; border-radius: 0 8px 8px 8px;
	font: inherit; font-weight: 500; cursor: pointer;
}
.fliser-huske-del { border-top: 1px solid #e2e6e3; padding-top: 32px; }
.fliser-huske-del-raekke { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.fliser-huske-qr { width: 200px; height: 200px; background: #fff; }
.fliser-huske-qr svg { display: block; width: 100%; height: 100%; }
.fliser-huske-qr-boks p { font-size: 14px; color: #373f16; margin: 8px 0 0; }
.fliser-huske-del-tekst label { display: block; font-weight: 700; margin: 0 0 8px; }
.fliser-huske-link, .fliser-huske-mail input[type="email"] {
	width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #8b9a8d; border-radius: 0; font-size: 16px; background: #fff; box-sizing: border-box;
}
.fliser-huske-kopier, .fliser-huske-mail button {
	min-height: 48px; padding: 8px 24px; margin: 12px 0 0; border: 2px solid #4d7159; border-radius: 0 8px 8px 8px; background: #4d7159; color: #fff;
	font: inherit; font-weight: 700; cursor: pointer;
}
.fliser-huske-kopier:hover, .fliser-huske-mail button:hover { background: #373f16; border-color: #373f16; }
.fliser-huske-mail { margin-top: 32px; }
.fliser-huske-mail-raekke { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.fliser-huske-mail-raekke input { flex: 1 1 240px; }
.fliser-huske-mail-raekke button { margin-top: 0; }
.fliser-huske-lille { font-size: 14px; color: #373f16; margin: 8px 0 0; }
.fliser-huske-firma { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fliser-huske-side :is(a, button, input):focus-visible { outline: 2px solid #4d7159; outline-offset: 3px; }

@media (max-width: 767px) {
	.fliser-huske-side { padding: 24px 20px 48px; }
	.fliser-huske-side h1 { font-size: 32px; }
	.fliser-huske-ind { font-size: 16px; }
	.fliser-huske-liste { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 24px 16px; }
	.fliser-huske-del-raekke { grid-template-columns: 1fr; gap: 24px; }
	.fliser-huske-mail-raekke button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .fliser-huske-boble, .fliser-huske-boble.er-synlig { transition: none; } }