/** Shopify CDN: Minification failed Line 5220:24 Expected identifier but found whitespace Line 5221:2 Unexpected "has(" Line 5235:24 Expected identifier but found whitespace Line 5236:2 Unexpected "has(" Line 5267:24 Expected identifier but found whitespace Line 5268:2 Unexpected "has(" Line 5304:24 Expected identifier but found whitespace Line 5305:2 Unexpected "has(" Line 5324:24 Expected identifier but found whitespace Line 5325:2 Unexpected "has(" ... and 6 more hidden warnings **/ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ========================================================== NATURADIET TYPOGRAFI Kun fontfamilie - layout og funktionalitet er urørt ========================================================== */ .fodermatch, .fodermatch button, .fodermatch input, .fodermatch select, .fodermatch textarea { font-family: "Inter", Arial, Helvetica, sans-serif !important; } /* ========================================================== NATURA DIET – FODERMATCH Visuelt design ========================================================== */ .fodermatch { --fm-bg: #f5f7f3; --fm-surface: #ffffff; --fm-surface-soft: #f1f5f1; --fm-text: #1e2822; --fm-muted: #68736c; --fm-accent: #315f47; --fm-accent-dark: #244936; --fm-accent-soft: #e9f1ec; --fm-border: #d8e0da; --fm-border-strong: #b7c6bb; --fm-success: #2f6b48; --fm-radius: 18px; --fm-radius-small: 12px; --fm-shadow: 0 18px 50px rgba(22, 41, 30, 0.08); width: 100%; margin: 0; padding: 0; background: radial-gradient( circle at top left, rgba(49, 95, 71, 0.08), transparent 38% ), var(--fm-bg); color: var(--fm-text); /* Holder efterfølgende sektioner under skærmfolden på korte FoderMatch-trin */ min-height: calc(100vh - 74px); min-height: calc(100svh - 74px); } /* ========================================================== VIGTIGT – skjulte trin og produktkort ========================================================== */ .fodermatch [hidden] { display: none !important; } /* ========================================================== HOVEDCONTAINER ========================================================== */ .fodermatch__inner { width: min(100% - 32px, 1080px); margin: 0 auto; padding: 56px 0 72px; } /* ========================================================== STARTSKÆRM ========================================================== */ .fodermatch [data-fodermatch-start] { max-width: 850px; margin: 0 auto; padding: 58px 54px; text-align: center; background: var(--fm-surface); border: 1px solid var(--fm-border); border-radius: 24px; box-shadow: var(--fm-shadow); } .fodermatch__dev-label { display: inline-flex; align-items: center; justify-content: center; margin: 0 0 20px; padding: 7px 14px; border-radius: 999px; background: var(--fm-accent-soft); color: var(--fm-accent); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; } .fodermatch__title { max-width: 760px; margin: 0 auto 22px; color: var(--fm-text); font-size: clamp(32px, 5vw, 52px); line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; } .fodermatch__intro { max-width: 720px; margin: 0 auto 34px; color: var(--fm-muted); font-size: 18px; line-height: 1.65; } /* ========================================================== PRIMÆRE KNAPPER ========================================================== */ .fodermatch__start-button, .fodermatch__continue-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 26px; border: 1px solid var(--fm-accent); border-radius: 999px; background: var(--fm-accent); color: #ffffff; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .fodermatch__start-button:hover, .fodermatch__continue-button:hover { background: var(--fm-accent-dark); border-color: var(--fm-accent-dark); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(49, 95, 71, 0.18); } .fodermatch__start-button:active, .fodermatch__continue-button:active { transform: translateY(0); } .fodermatch__start-button:disabled, .fodermatch__continue-button:disabled { opacity: 0.38; cursor: not-allowed; transform: none; box-shadow: none; } /* ========================================================== SEKUNDÆRE KNAPPER ========================================================== */ .fodermatch [data-fodermatch-birthdate-unknown], .fodermatch [data-fodermatch-approx-age-back], .fodermatch [data-fodermatch-current-weight-unknown], .fodermatch [data-fodermatch-weight-range-back], .fodermatch [data-fodermatch-result-new-match] { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin-left: 8px; padding: 12px 20px; border: 1px solid var(--fm-border-strong); border-radius: 999px; background: #ffffff; color: var(--fm-text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease; } .fodermatch [data-fodermatch-birthdate-unknown]:hover, .fodermatch [data-fodermatch-approx-age-back]:hover, .fodermatch [data-fodermatch-current-weight-unknown]:hover, .fodermatch [data-fodermatch-weight-range-back]:hover, .fodermatch [data-fodermatch-result-new-match]:hover { background: var(--fm-accent-soft); border-color: var(--fm-accent); } /* ========================================================== SPØRGSMÅLSKORT ========================================================== */ .fodermatch__step { width: min(100%, 780px); margin: 0 auto; padding: 38px 42px 42px; background: var(--fm-surface); border: 1px solid var(--fm-border); border-radius: var(--fm-radius); box-shadow: var(--fm-shadow); } /* ========================================================== SPØRGSMÅLSNUMMER + PROGRESSBAR ========================================================== */ .fodermatch__step-number { margin: 0 0 30px; padding: 0 0 17px; color: var(--fm-accent); font-size: 13px; line-height: 1.2; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 5px solid var(--fm-border); background-image: linear-gradient( var(--fm-accent), var(--fm-accent) ); background-repeat: no-repeat; background-position: left bottom -5px; background-size: 9% 5px; } /* 1 af 11 */ .fodermatch [data-fodermatch-step="name"] .fodermatch__step-number { background-size: 9% 5px; } /* 2 af 11 */ .fodermatch [data-fodermatch-step="birthdate"] .fodermatch__step-number, .fodermatch [data-fodermatch-step="approx-age"] .fodermatch__step-number { background-size: 18% 5px; } /* 3 af 11 */ .fodermatch [data-fodermatch-step="adult-weight"] .fodermatch__step-number, .fodermatch [data-fodermatch-step="ideal-weight"] .fodermatch__step-number { background-size: 27% 5px; } /* 4 af 11 */ .fodermatch [data-fodermatch-step="current-weight"] .fodermatch__step-number, .fodermatch [data-fodermatch-step="weight-range"] .fodermatch__step-number { background-size: 36% 5px; } /* 5 af 11 */ .fodermatch [data-fodermatch-step="body-condition"] .fodermatch__step-number { background-size: 45% 5px; } /* 6 af 11 */ .fodermatch [data-fodermatch-step="weight-loss"] .fodermatch__step-number { background-size: 55% 5px; } /* 7 af 11 */ .fodermatch [data-fodermatch-step="neutered"] .fodermatch__step-number { background-size: 64% 5px; } /* 8 af 11 */ .fodermatch [data-fodermatch-step="activity"] .fodermatch__step-number { background-size: 73% 5px; } /* 9 af 11 */ .fodermatch [data-fodermatch-step="special-needs"] .fodermatch__step-number { background-size: 82% 5px; } /* 10 af 11 */ .fodermatch [data-fodermatch-step="intolerances"] .fodermatch__step-number { background-size: 91% 5px; } /* 11 af 11 */ .fodermatch [data-fodermatch-step="preference"] .fodermatch__step-number { background-size: 100% 5px; } /* RESULTAT */ .fodermatch [data-fodermatch-step="result"] .fodermatch__step-number { background-size: 100% 5px; } /* ========================================================== OVERSKRIFTER / TEKST ========================================================== */ .fodermatch__question { margin: 0 0 14px; color: var(--fm-text); font-size: clamp(27px, 4vw, 38px); line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; } .fodermatch__step > p:not( .fodermatch__step-number ):not( .fodermatch__status ):not( .fodermatch__product-price ):not( .fodermatch__product-stock ):not( .fodermatch__product-label ) { margin-top: 0; margin-bottom: 26px; color: var(--fm-muted); font-size: 16px; line-height: 1.65; } /* ========================================================== LABELS ========================================================== */ .fodermatch__label { display: block; margin: 0 0 8px; color: var(--fm-text); font-size: 14px; font-weight: 700; } /* ========================================================== INPUTFELTER ========================================================== */ .fodermatch .fodermatch__input { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: 520px !important; min-height: 54px !important; height: 54px !important; margin: 0 0 22px !important; padding: 12px 15px !important; border: 2px solid var(--fm-border-strong) !important; border-radius: var(--fm-radius-small) !important; background: #ffffff !important; color: var(--fm-text) !important; font: inherit !important; font-size: 16px !important; box-sizing: border-box !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02) !important; transition: border-color 0.18s ease, box-shadow 0.18s ease !important; } .fodermatch .fodermatch__input:hover { border-color: var(--fm-accent) !important; } .fodermatch .fodermatch__input:focus { outline: none !important; border-color: var(--fm-accent) !important; box-shadow: 0 0 0 4px rgba(49, 95, 71, 0.13) !important; } .fodermatch .fodermatch__input::placeholder { color: #8a938d !important; opacity: 1 !important; } @media (max-width: 700px) { .fodermatch .fodermatch__input { max-width: 100% !important; } } /* ========================================================== VALGMULIGHEDER ========================================================== */ .fodermatch [data-fodermatch-weight-range-options], .fodermatch [data-fodermatch-body-condition-options], .fodermatch [data-fodermatch-weight-loss-options], .fodermatch [data-fodermatch-neutered-options], .fodermatch [data-fodermatch-activity-options], .fodermatch [data-fodermatch-special-needs-options], .fodermatch [data-fodermatch-intolerances-options], .fodermatch [data-fodermatch-preference-options] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 26px 0 30px; } /* ========================================================== STORE KLIKBARE SVARKORT ========================================================== */ .fodermatch [data-fodermatch-weight-range-options] label, .fodermatch [data-fodermatch-body-condition-options] label, .fodermatch [data-fodermatch-weight-loss-options] label, .fodermatch [data-fodermatch-neutered-options] label, .fodermatch [data-fodermatch-activity-options] label, .fodermatch [data-fodermatch-special-needs-options] label, .fodermatch [data-fodermatch-intolerances-options] label, .fodermatch [data-fodermatch-preference-options] label { position: relative; display: block; min-height: 64px; margin: 0; padding: 18px 18px 18px 54px; border: 2px solid var(--fm-border); border-radius: var(--fm-radius-small); background: #ffffff; color: var(--fm-text); font-size: 15px; line-height: 1.45; cursor: pointer; box-sizing: border-box; transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } .fodermatch [data-fodermatch-weight-range-options] label:hover, .fodermatch [data-fodermatch-body-condition-options] label:hover, .fodermatch [data-fodermatch-weight-loss-options] label:hover, .fodermatch [data-fodermatch-neutered-options] label:hover, .fodermatch [data-fodermatch-activity-options] label:hover, .fodermatch [data-fodermatch-special-needs-options] label:hover, .fodermatch [data-fodermatch-intolerances-options] label:hover, .fodermatch [data-fodermatch-preference-options] label:hover { border-color: var(--fm-border-strong); background: var(--fm-surface-soft); transform: translateY(-1px); } /* Valgt svar */ .fodermatch [data-fodermatch-weight-range-options] label:has(input:checked), .fodermatch [data-fodermatch-body-condition-options] label:has(input:checked), .fodermatch [data-fodermatch-weight-loss-options] label:has(input:checked), .fodermatch [data-fodermatch-neutered-options] label:has(input:checked), .fodermatch [data-fodermatch-activity-options] label:has(input:checked), .fodermatch [data-fodermatch-special-needs-options] label:has(input:checked), .fodermatch [data-fodermatch-intolerances-options] label:has(input:checked), .fodermatch [data-fodermatch-preference-options] label:has(input:checked) { border-color: var(--fm-accent); background: var(--fm-accent-soft); box-shadow: 0 0 0 1px var(--fm-accent); } /* ========================================================== RADIO / CHECKBOX ========================================================== */ .fodermatch [data-fodermatch-weight-range-options] input, .fodermatch [data-fodermatch-body-condition-options] input, .fodermatch [data-fodermatch-weight-loss-options] input, .fodermatch [data-fodermatch-neutered-options] input, .fodermatch [data-fodermatch-activity-options] input, .fodermatch [data-fodermatch-special-needs-options] input, .fodermatch [data-fodermatch-intolerances-options] input, .fodermatch [data-fodermatch-preference-options] input { position: absolute; top: 20px; left: 18px; width: 20px; height: 20px; margin: 0; accent-color: var(--fm-accent); cursor: pointer; } /* ========================================================== AKTIVITET – lidt større kort ========================================================== */ .fodermatch [data-fodermatch-activity-options] label { min-height: 125px; padding-top: 20px; } .fodermatch [data-fodermatch-activity-options] strong { display: inline-block; margin-bottom: 6px; font-size: 16px; } /* ========================================================== ANDEN INGREDIENS ========================================================== */ .fodermatch [data-fodermatch-intolerance-other-field] { margin: -8px 0 28px; padding: 22px; background: var(--fm-surface-soft); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-small); } /* ========================================================== RESULTATSIDE ========================================================== */ .fodermatch__result { width: min(100%, 980px); } .fodermatch [data-fodermatch-result-reason] { max-width: 760px; margin-bottom: 34px !important; font-size: 17px !important; } /* ========================================================== PRODUKTGRID ========================================================== */ .fodermatch__products { display: grid; grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); gap: 22px; margin: 30px 0 38px; } /* ========================================================== PRODUKTKORT ========================================================== */ .fodermatch__product-card { overflow: hidden; display: flex; flex-direction: column; min-width: 0; background: #ffffff; border: 1px solid var(--fm-border); border-radius: 18px; box-shadow: 0 10px 30px rgba(20, 38, 27, 0.08); } .fodermatch__product-card[hidden] { display: none !important; } /* ========================================================== PRODUKTBILLEDE ========================================================== */ .fodermatch__product-image-link { display: block; padding: 22px; background: #fafbf9; text-decoration: none; } .fodermatch__product-image { display: block; width: 100%; height: 280px; object-fit: contain; margin: 0 auto; transition: transform 0.2s ease; } .fodermatch__product-image-link:hover .fodermatch__product-image { transform: scale(1.025); } /* ========================================================== PRODUKTINDHOLD ========================================================== */ .fodermatch__product-content { display: flex; flex-direction: column; flex: 1; padding: 24px; } .fodermatch__product-label { display: inline-flex; align-self: flex-start; margin: 0 0 12px; padding: 6px 10px; border-radius: 999px; background: var(--fm-accent-soft); color: var(--fm-accent); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } .fodermatch__product-title { margin: 0 0 12px; font-size: 21px; line-height: 1.28; } .fodermatch__product-title a { color: var(--fm-text); text-decoration: none; } .fodermatch__product-title a:hover { color: var(--fm-accent); } .fodermatch__product-price { margin: 0 0 8px; color: var(--fm-text); font-size: 22px; font-weight: 800; } .fodermatch__product-stock { margin: 0 0 20px; color: var(--fm-success); font-size: 14px; font-weight: 700; } /* ========================================================== PRODUKTVARIANT ========================================================== */ .fodermatch__product-form { margin-top: auto; } .fodermatch__product-variant { display: block; width: 100%; min-height: 50px; margin: 0 0 16px; padding: 11px 42px 11px 13px; border: 1px solid var(--fm-border-strong); border-radius: 10px; background: #ffffff; color: var(--fm-text); font: inherit; font-size: 15px; cursor: pointer; } .fodermatch__product-variant:focus { outline: none; border-color: var(--fm-accent); box-shadow: 0 0 0 3px rgba(49, 95, 71, 0.12); } .fodermatch__product-form .fodermatch__continue-button { width: 100%; } /* ========================================================== SE PRODUKT ========================================================== */ .fodermatch__product-content > p:last-child { margin: 14px 0 0; text-align: center; } .fodermatch__product-content > p:last-child a { color: var(--fm-accent); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ========================================================== FODERMÆNGDE ========================================================== */ .fodermatch [data-fodermatch-result-feeding] { margin: 32px 0; padding: 28px; background: var(--fm-surface-soft); border: 1px solid var(--fm-border); border-radius: var(--fm-radius); } /* ========================================================== RESULTATKNAPPER ========================================================== */ .fodermatch [data-fodermatch-result-actions] { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .fodermatch [data-fodermatch-result-actions] button { margin-left: 0; } /* ========================================================== STATUS / UDVIKLING ========================================================== */ .fodermatch__status { width: min(100%, 780px); margin: 22px auto 0; padding: 10px 14px; border: 1px dashed var(--fm-border-strong); border-radius: 8px; background: rgba(255, 255, 255, 0.6); color: var(--fm-muted); font-size: 12px; line-height: 1.4; } /* ========================================================== MOBIL ========================================================== */ @media ( max-width: 700px ) { .fodermatch__inner { width: min(100% - 20px, 1080px); padding: 24px 0 44px; } .fodermatch [data-fodermatch-start] { padding: 36px 22px; border-radius: 18px; } .fodermatch__title { font-size: 34px; } .fodermatch__intro { font-size: 16px; } .fodermatch__start-button { width: 100%; } .fodermatch__step { padding: 26px 20px 30px; border-radius: 16px; } .fodermatch__question { font-size: 28px; } .fodermatch [data-fodermatch-weight-range-options], .fodermatch [data-fodermatch-body-condition-options], .fodermatch [data-fodermatch-weight-loss-options], .fodermatch [data-fodermatch-neutered-options], .fodermatch [data-fodermatch-activity-options], .fodermatch [data-fodermatch-special-needs-options], .fodermatch [data-fodermatch-intolerances-options], .fodermatch [data-fodermatch-preference-options] { grid-template-columns: 1fr; gap: 10px; } .fodermatch [data-fodermatch-activity-options] label { min-height: auto; } .fodermatch__continue-button, .fodermatch [data-fodermatch-birthdate-unknown], .fodermatch [data-fodermatch-approx-age-back], .fodermatch [data-fodermatch-current-weight-unknown], .fodermatch [data-fodermatch-weight-range-back], .fodermatch [data-fodermatch-result-new-match] { width: 100%; margin: 8px 0 0; } .fodermatch__products { grid-template-columns: 1fr; } .fodermatch__product-image { height: 240px; } .fodermatch [data-fodermatch-result-actions] { flex-direction: column; } } /* ========================================================== MEGET SMÅ SKÆRME ========================================================== */ @media ( max-width: 420px ) { .fodermatch__inner { width: min(100% - 14px, 1080px); } .fodermatch__step { padding: 22px 16px 26px; } .fodermatch__question { font-size: 25px; } .fodermatch [data-fodermatch-weight-range-options] label, .fodermatch [data-fodermatch-body-condition-options] label, .fodermatch [data-fodermatch-weight-loss-options] label, .fodermatch [data-fodermatch-neutered-options] label, .fodermatch [data-fodermatch-activity-options] label, .fodermatch [data-fodermatch-special-needs-options] label, .fodermatch [data-fodermatch-intolerances-options] label, .fodermatch [data-fodermatch-preference-options] label { padding: 16px 14px 16px 48px; } .fodermatch [data-fodermatch-weight-range-options] input, .fodermatch [data-fodermatch-body-condition-options] input, .fodermatch [data-fodermatch-weight-loss-options] input, .fodermatch [data-fodermatch-neutered-options] input, .fodermatch [data-fodermatch-activity-options] input, .fodermatch [data-fodermatch-special-needs-options] input, .fodermatch [data-fodermatch-intolerances-options] input, .fodermatch [data-fodermatch-preference-options] input { left: 15px; } } /* ========================================================== TILBAGE-KNAPPER ========================================================== */ .fodermatch__back-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin-left: 10px; padding: 12px 18px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--fm-muted); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease; } .fodermatch__back-button:hover { color: var(--fm-accent-dark); background: var(--fm-accent-soft); border-color: var(--fm-border); } .fodermatch__back-button:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(49, 95, 71, 0.13); } /* Special-knapper der også fungerer som tilbage-navigation */ .fodermatch [data-fodermatch-approx-age-back], .fodermatch [data-fodermatch-weight-range-back] { color: var(--fm-muted); } /* ========================================================== MOBIL – TILBAGE UNDER FORTSÆT ========================================================== */ @media (max-width: 700px) { .fodermatch__back-button { width: 100%; margin: 8px 0 0; min-height: 46px; } } /* ========================================================== TYDELIG VALGT-MARKERING PÅ SVARKORT ========================================================== */ .fodermatch [data-fodermatch-weight-range-options] label, .fodermatch [data-fodermatch-body-condition-options] label, .fodermatch [data-fodermatch-weight-loss-options] label, .fodermatch [data-fodermatch-neutered-options] label, .fodermatch [data-fodermatch-activity-options] label, .fodermatch [data-fodermatch-special-needs-options] label, .fodermatch [data-fodermatch-intolerances-options] label, .fodermatch [data-fodermatch-preference-options] label { padding-right: 54px; } /* Flueben */ .fodermatch [data-fodermatch-weight-range-options] label::after, .fodermatch [data-fodermatch-body-condition-options] label::after, .fodermatch [data-fodermatch-weight-loss-options] label::after, .fodermatch [data-fodermatch-neutered-options] label::after, .fodermatch [data-fodermatch-activity-options] label::after, .fodermatch [data-fodermatch-special-needs-options] label::after, .fodermatch [data-fodermatch-intolerances-options] label::after, .fodermatch [data-fodermatch-preference-options] label::after { content: "✓"; position: absolute; top: 50%; right: 18px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fm-accent); color: #ffffff; font-size: 16px; font-weight: 800; line-height: 1; opacity: 0; transform: translateY(-50%) scale(0.7); transition: opacity 0.16s ease, transform 0.16s ease; } /* Vis flueben på valgt svar */ .fodermatch [data-fodermatch-weight-range-options] label:has(input:checked)::after, .fodermatch [data-fodermatch-body-condition-options] label:has(input:checked)::after, .fodermatch [data-fodermatch-weight-loss-options] label:has(input:checked)::after, .fodermatch [data-fodermatch-neutered-options] label:has(input:checked)::after, .fodermatch [data-fodermatch-activity-options] label:has(input:checked)::after, .fodermatch [data-fodermatch-special-needs-options] label:has(input:checked)::after, .fodermatch [data-fodermatch-intolerances-options] label:has(input:checked)::after, .fodermatch [data-fodermatch-preference-options] label:has(input:checked)::after { opacity: 1; transform: translateY(-50%) scale(1); } /* Ekstra tydelig valgt tilstand */ .fodermatch [data-fodermatch-weight-range-options] label:has(input:checked), .fodermatch [data-fodermatch-body-condition-options] label:has(input:checked), .fodermatch [data-fodermatch-weight-loss-options] label:has(input:checked), .fodermatch [data-fodermatch-neutered-options] label:has(input:checked), .fodermatch [data-fodermatch-activity-options] label:has(input:checked), .fodermatch [data-fodermatch-special-needs-options] label:has(input:checked), .fodermatch [data-fodermatch-intolerances-options] label:has(input:checked), .fodermatch [data-fodermatch-preference-options] label:has(input:checked) { border-color: var(--fm-accent); background: var(--fm-accent-soft); box-shadow: 0 0 0 1px var(--fm-accent), 0 7px 18px rgba(49, 95, 71, 0.09); } /* ========================================================== SKJUL STANDARD RADIO / CHECKBOX VISUELT Hele kortet fungerer som valg. ========================================================== */ .fodermatch [data-fodermatch-weight-range-options] input, .fodermatch [data-fodermatch-body-condition-options] input, .fodermatch [data-fodermatch-weight-loss-options] input, .fodermatch [data-fodermatch-neutered-options] input, .fodermatch [data-fodermatch-activity-options] input, .fodermatch [data-fodermatch-special-needs-options] input, .fodermatch [data-fodermatch-intolerances-options] input, .fodermatch [data-fodermatch-preference-options] input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Teksten kan nu bruge hele venstre side */ .fodermatch [data-fodermatch-weight-range-options] label, .fodermatch [data-fodermatch-body-condition-options] label, .fodermatch [data-fodermatch-weight-loss-options] label, .fodermatch [data-fodermatch-neutered-options] label, .fodermatch [data-fodermatch-activity-options] label, .fodermatch [data-fodermatch-special-needs-options] label, .fodermatch [data-fodermatch-intolerances-options] label, .fodermatch [data-fodermatch-preference-options] label { padding-left: 20px; } /* Tastaturfokus */ .fodermatch [data-fodermatch-weight-range-options] label:has(input:focus-visible), .fodermatch [data-fodermatch-body-condition-options] label:has(input:focus-visible), .fodermatch [data-fodermatch-weight-loss-options] label:has(input:focus-visible), .fodermatch [data-fodermatch-neutered-options] label:has(input:focus-visible), .fodermatch [data-fodermatch-activity-options] label:has(input:focus-visible), .fodermatch [data-fodermatch-special-needs-options] label:has(input:focus-visible), .fodermatch [data-fodermatch-intolerances-options] label:has(input:focus-visible), .fodermatch [data-fodermatch-preference-options] label:has(input:focus-visible) { outline: 3px solid rgba(49, 95, 71, 0.2); outline-offset: 2px; } /* ========================================================== PROGRESSBAR – FÆRDIG VERSION ========================================================== */ .fodermatch__step-number { position: relative; display: block; margin: 0 0 34px; padding: 0 0 22px; border-bottom: 6px solid #e4e9e5; background-repeat: no-repeat; background-position: left bottom -6px; border-radius: 0; } /* Tilføj "af 11" uden at ændre Liquid */ .fodermatch__step:not( [data-fodermatch-step="result"] ) .fodermatch__step-number::after { content: " af 11"; color: var(--fm-muted); font-weight: 600; letter-spacing: 0; text-transform: none; } /* Afrund selve den grønne progress */ .fodermatch__step-number { background-image: linear-gradient( 90deg, var(--fm-accent), var(--fm-accent) ); background-height: 6px; } /* Spørgsmål 1 */ .fodermatch [data-fodermatch-step="name"] .fodermatch__step-number { background-size: 9.1% 6px; } /* Spørgsmål 2 */ .fodermatch [data-fodermatch-step="birthdate"] .fodermatch__step-number, .fodermatch [data-fodermatch-step="approx-age"] .fodermatch__step-number { background-size: 18.2% 6px; } /* Spørgsmål 3 */ .fodermatch [data-fodermatch-step="adult-weight"] .fodermatch__step-number, .fodermatch [data-fodermatch-step="ideal-weight"] .fodermatch__step-number { background-size: 27.3% 6px; } /* Spørgsmål 4 */ .fodermatch [data-fodermatch-step="current-weight"] .fodermatch__step-number, .fodermatch [data-fodermatch-step="weight-range"] .fodermatch__step-number { background-size: 36.4% 6px; } /* Spørgsmål 5 */ .fodermatch [data-fodermatch-step="body-condition"] .fodermatch__step-number { background-size: 45.5% 6px; } /* Spørgsmål 6 */ .fodermatch [data-fodermatch-step="weight-loss"] .fodermatch__step-number { background-size: 54.5% 6px; } /* Spørgsmål 7 */ .fodermatch [data-fodermatch-step="neutered"] .fodermatch__step-number { background-size: 63.6% 6px; } /* Spørgsmål 8 */ .fodermatch [data-fodermatch-step="activity"] .fodermatch__step-number { background-size: 72.7% 6px; } /* Spørgsmål 9 */ .fodermatch [data-fodermatch-step="special-needs"] .fodermatch__step-number { background-size: 81.8% 6px; } /* Spørgsmål 10 */ .fodermatch [data-fodermatch-step="intolerances"] .fodermatch__step-number { background-size: 90.9% 6px; } /* Spørgsmål 11 */ .fodermatch [data-fodermatch-step="preference"] .fodermatch__step-number { background-size: 100% 6px; } /* Resultatet */ .fodermatch [data-fodermatch-step="result"] .fodermatch__step-number { color: var(--fm-success); background-size: 100% 6px; } /* Mobil */ @media (max-width: 700px) { .fodermatch__step-number { margin-bottom: 26px; font-size: 12px; } } /* ========================================================== PROGRESSBAR – KORREKT VERSION ========================================================== */ .fodermatch__step-number { --fm-progress: 0%; position: relative; margin: 0 0 34px; padding: 0 0 24px; border-bottom: 0 !important; background: linear-gradient( #e4e9e5, #e4e9e5 ) left bottom / 100% 6px no-repeat !important; } /* Grøn fremdrift */ .fodermatch__step-number::before { content: ""; position: absolute; left: 0; bottom: 0; width: var(--fm-progress); height: 6px; border-radius: 999px; background: var(--fm-accent); transition: width 0.3s ease; } /* "af 11" */ .fodermatch__step:not( [data-fodermatch-step="result"] ) .fodermatch__step-number::after { content: " af 11"; color: var(--fm-muted); font-weight: 600; letter-spacing: 0; text-transform: none; } /* Spørgsmål 1 */ .fodermatch [data-fodermatch-step="name"] .fodermatch__step-number { --fm-progress: 9.1%; } /* Spørgsmål 2 */ .fodermatch [data-fodermatch-step="birthdate"] .fodermatch__step-number, .fodermatch [data-fodermatch-step="approx-age"] .fodermatch__step-number { --fm-progress: 18.2%; } /* Spørgsmål 3 */ .fodermatch [data-fodermatch-step="adult-weight"] .fodermatch__step-number, .fodermatch [data-fodermatch-step="ideal-weight"] .fodermatch__step-number { --fm-progress: 27.3%; } /* Spørgsmål 4 */ .fodermatch [data-fodermatch-step="current-weight"] .fodermatch__step-number, .fodermatch [data-fodermatch-step="weight-range"] .fodermatch__step-number { --fm-progress: 36.4%; } /* Spørgsmål 5 */ .fodermatch [data-fodermatch-step="body-condition"] .fodermatch__step-number { --fm-progress: 45.5%; } /* Spørgsmål 6 */ .fodermatch [data-fodermatch-step="weight-loss"] .fodermatch__step-number { --fm-progress: 54.5%; } /* Spørgsmål 7 */ .fodermatch [data-fodermatch-step="neutered"] .fodermatch__step-number { --fm-progress: 63.6%; } /* Spørgsmål 8 */ .fodermatch [data-fodermatch-step="activity"] .fodermatch__step-number { --fm-progress: 72.7%; } /* Spørgsmål 9 */ .fodermatch [data-fodermatch-step="special-needs"] .fodermatch__step-number { --fm-progress: 81.8%; } /* Spørgsmål 10 */ .fodermatch [data-fodermatch-step="intolerances"] .fodermatch__step-number { --fm-progress: 90.9%; } /* Spørgsmål 11 */ .fodermatch [data-fodermatch-step="preference"] .fodermatch__step-number { --fm-progress: 100%; } /* Resultat */ .fodermatch [data-fodermatch-step="result"] .fodermatch__step-number { --fm-progress: 100%; color: var(--fm-success); } @media (max-width: 700px) { .fodermatch__step-number { margin-bottom: 26px; font-size: 12px; } } /* ========================================================== STARTSIDE – FÆRDIGT DESIGN ========================================================== */ /* Skjul udviklingsmærket */ .fodermatch__dev-label { display: none !important; } /* Startkort */ .fodermatch [data-fodermatch-start] { position: relative; max-width: 840px; margin: 30px auto; padding: 58px 56px; text-align: center; background: #ffffff; border: 1px solid var(--fm-border); border-radius: 28px; box-shadow: 0 20px 55px rgba(30, 40, 34, 0.08); } /* Lille dekorativ markering */ .fodermatch [data-fodermatch-start]::before { content: "NATURA DIET · FODERMATCH"; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 22px; padding: 8px 14px; border-radius: 999px; background: var(--fm-accent-soft); color: var(--fm-accent-dark); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; } /* Hovedoverskrift */ .fodermatch [data-fodermatch-start] .fodermatch__title { max-width: 700px; margin: 0 auto 20px; color: var(--fm-text); font-size: clamp(32px, 5vw, 52px); line-height: 1.08; letter-spacing: -0.035em; } /* Intro */ .fodermatch [data-fodermatch-start] .fodermatch__intro { max-width: 650px; margin: 0 auto 32px; color: var(--fm-muted); font-size: 18px; line-height: 1.65; } /* Startknap */ .fodermatch [data-fodermatch-start] .fodermatch__start-button { min-height: 58px; padding: 15px 28px; border: 0; border-radius: 999px; background: var(--fm-accent); color: #ffffff; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgba(49, 95, 71, 0.22); transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } .fodermatch [data-fodermatch-start] .fodermatch__start-button:hover { background: var(--fm-accent-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(49, 95, 71, 0.27); } .fodermatch [data-fodermatch-start] .fodermatch__start-button:active { transform: translateY(0); } .fodermatch [data-fodermatch-start] .fodermatch__start-button:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(49, 95, 71, 0.16), 0 10px 24px rgba(49, 95, 71, 0.22); } /* ========================================================== STARTSIDE – MOBIL ========================================================== */ @media (max-width: 700px) { .fodermatch [data-fodermatch-start] { margin: 15px auto; padding: 38px 22px; border-radius: 22px; } .fodermatch [data-fodermatch-start]::before { margin-bottom: 18px; font-size: 11px; } .fodermatch [data-fodermatch-start] .fodermatch__title { margin-bottom: 18px; font-size: 34px; } .fodermatch [data-fodermatch-start] .fodermatch__intro { margin-bottom: 26px; font-size: 16px; } .fodermatch [data-fodermatch-start] .fodermatch__start-button { width: 100%; min-height: 56px; padding: 14px 20px; } } /* ========================================================== RESULTATSIDE – FÆRDIGT DESIGN ========================================================== */ .fodermatch [data-fodermatch-step="result"] { max-width: 1100px; } /* Overskrift og forklaring */ .fodermatch [data-fodermatch-step="result"] .fodermatch__question { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; } .fodermatch [data-fodermatch-step="result"] [data-fodermatch-result-reason] { max-width: 720px; margin: 0 auto 34px; color: var(--fm-muted); font-size: 17px; line-height: 1.65; text-align: center; } /* "Dit FoderMatch" */ .fodermatch [data-fodermatch-step="result"] .fodermatch__step-number { text-align: center; font-weight: 800; } /* ========================================================== PRODUKTGRID ========================================================== */ .fodermatch__products { display: grid; grid-template-columns: repeat( auto-fit, minmax(270px, 1fr) ); gap: 24px; margin-top: 30px; } /* Vigtigt: skjulte produkter må ikke vises */ .fodermatch__product-card[hidden] { display: none !important; } /* ========================================================== PRODUKTKORT ========================================================== */ .fodermatch__product-card { position: relative; display: flex; flex-direction: column; overflow: hidden; min-width: 0; border: 1px solid var(--fm-border); border-radius: 22px; background: #ffffff; box-shadow: 0 12px 34px rgba(30, 40, 34, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .fodermatch__product-card:hover { transform: translateY(-3px); border-color: rgba(49, 95, 71, 0.35); box-shadow: 0 18px 42px rgba(30, 40, 34, 0.12); } /* ========================================================== PRODUKTBILLEDE ========================================================== */ .fodermatch__product-image-link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 290px; padding: 24px; background: linear-gradient( 180deg, #fafbfa 0%, #ffffff 100% ); text-decoration: none; } .fodermatch__product-image { display: block; width: 100%; max-width: 270px; height: 250px; object-fit: contain; transition: transform 0.25s ease; } .fodermatch__product-card:hover .fodermatch__product-image { transform: scale(1.025); } /* ========================================================== PRODUKTINDHOLD ========================================================== */ .fodermatch__product-content { display: flex; flex: 1; flex-direction: column; padding: 24px; } /* Lille anbefalet badge */ .fodermatch__product-label { align-self: flex-start; margin: 0 0 12px; padding: 7px 11px; border-radius: 999px; background: var(--fm-accent-soft); color: var(--fm-accent-dark); font-size: 11px; font-weight: 800; letter-spacing: 0.045em; text-transform: uppercase; } /* Produkttitel */ .fodermatch__product-title { margin: 0 0 12px; color: var(--fm-text); font-size: 21px; line-height: 1.25; } .fodermatch__product-title a { color: inherit; text-decoration: none; } .fodermatch__product-title a:hover { color: var(--fm-accent); } /* Pris */ .fodermatch__product-price { margin: 4px 0 8px; color: var(--fm-text); font-size: 24px; font-weight: 800; } /* Lager */ .fodermatch__product-stock { display: flex; align-items: center; gap: 7px; margin: 0 0 20px; color: var(--fm-accent); font-size: 14px; font-weight: 700; } .fodermatch__product-stock::before { content: ""; display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: currentColor; } /* ========================================================== VARIANTVALG ========================================================== */ .fodermatch__product-form { margin-top: auto; } .fodermatch__product-form .fodermatch__label { display: block; margin-bottom: 7px; color: var(--fm-muted); font-size: 13px; font-weight: 700; } .fodermatch__product-variant { display: block; width: 100%; min-height: 50px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--fm-border-strong); border-radius: 12px; background: #ffffff; color: var(--fm-text); font: inherit; font-size: 15px; cursor: pointer; box-sizing: border-box; } .fodermatch__product-variant:focus { outline: none; border-color: var(--fm-accent); box-shadow: 0 0 0 4px rgba(49, 95, 71, 0.12); } /* ========================================================== LÆG I KURV ========================================================== */ .fodermatch__product-form .fodermatch__continue-button { width: 100%; min-height: 52px; margin: 0; border-radius: 999px; font-size: 15px; font-weight: 800; } .fodermatch__product-form .fodermatch__continue-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* "Se produkt" */ .fodermatch__product-content > p:last-child { margin: 14px 0 0; text-align: center; } .fodermatch__product-content > p:last-child a { color: var(--fm-accent-dark); font-size: 14px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } /* ========================================================== FODERMÆNGDE – KLAR TIL SENERE ========================================================== */ .fodermatch [data-fodermatch-result-feeding] { margin-top: 30px; padding: 26px; border: 1px solid var(--fm-border); border-radius: 18px; background: var(--fm-accent-soft); } .fodermatch [data-fodermatch-result-feeding] h3 { margin: 0 0 14px; color: var(--fm-text); font-size: 21px; } .fodermatch [data-fodermatch-result-grams-day] { color: var(--fm-accent-dark); font-size: 28px; } /* ========================================================== KNAPPER UNDER RESULTATET ========================================================== */ .fodermatch [data-fodermatch-result-actions] { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--fm-border); } .fodermatch [data-fodermatch-result-edit] { min-height: 50px; margin: 0; padding: 12px 22px; } .fodermatch [data-fodermatch-result-new-match] { appearance: none; min-height: 50px; padding: 12px 22px; border: 1px solid var(--fm-border-strong); border-radius: 999px; background: #ffffff; color: var(--fm-accent-dark); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease; } .fodermatch [data-fodermatch-result-new-match]:hover { background: var(--fm-accent-soft); border-color: var(--fm-accent); } /* ========================================================== RESULTAT – MOBIL ========================================================== */ @media (max-width: 700px) { .fodermatch__products { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; } .fodermatch__product-image-link { min-height: 245px; padding: 18px; } .fodermatch__product-image { max-width: 230px; height: 215px; } .fodermatch__product-content { padding: 20px; } .fodermatch__product-title { font-size: 19px; } .fodermatch__product-price { font-size: 22px; } .fodermatch [data-fodermatch-result-actions] { flex-direction: column; } .fodermatch [data-fodermatch-result-edit], .fodermatch [data-fodermatch-result-new-match] { width: 100%; } } /* ========================================================== FODERMATCH RESULTAT – DAILY / DAILY MINI Personlig foderplan ========================================================== */ .fodermatch__plan-info { margin: 34px -24px -24px; padding: 34px 24px 28px; border-top: 1px solid var(--fm-border); background: linear-gradient( 180deg, #fbfcfa 0%, #ffffff 100% ); } /* ========================================================== FÆLLES SEKTIONER I FODERPLANEN ========================================================== */ .fodermatch__plan-section { margin: 0 0 42px; } .fodermatch__plan-section:last-child { margin-bottom: 0; } .fodermatch__plan-heading { margin: 0 0 10px; color: var(--fm-text); font-size: clamp(22px, 3vw, 28px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; } .fodermatch__plan-intro { max-width: 760px; margin: 0 0 24px; color: var(--fm-muted); font-size: 15px; line-height: 1.65; } /* ========================================================== BENEFITS ========================================================== */ .fodermatch__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .fodermatch__benefit { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 190px; padding: 20px; border: 1px solid var(--fm-border); border-radius: 16px; background: #ffffff; box-shadow: 0 7px 20px rgba(30, 40, 34, 0.045); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .fodermatch__benefit:hover { transform: translateY(-2px); border-color: var(--fm-border-strong); box-shadow: 0 10px 24px rgba(30, 40, 34, 0.07); } .fodermatch__benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; flex: 0 0 68px; margin: 0 0 15px; border-radius: 50%; background: var(--fm-accent-soft); color: var(--fm-accent-dark); } .fodermatch__benefit-icon svg { display: block; width: 38px; height: 38px; } .fodermatch__benefit-title { display: block; margin: 0 0 7px; color: var(--fm-text); font-size: 15px; line-height: 1.3; font-weight: 800; } .fodermatch__benefit-text { display: block; color: var(--fm-muted); font-size: 13px; line-height: 1.55; } /* ========================================================== HOVEDINGREDIENSER ========================================================== */ .fodermatch__ingredients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .fodermatch__ingredient { position: relative; min-width: 0; padding: 20px 20px 20px 22px; border: 1px solid var(--fm-border); border-radius: 15px; background: var(--fm-surface-soft); } .fodermatch__ingredient::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 0; width: 4px; border-radius: 0 999px 999px 0; background: var(--fm-accent); } .fodermatch__ingredient strong { display: block; margin: 0 0 7px; color: var(--fm-text); font-size: 16px; line-height: 1.3; font-weight: 800; } .fodermatch__ingredient p { margin: 0; color: var(--fm-muted); font-size: 14px; line-height: 1.55; } /* ========================================================== PILLEINFO ========================================================== */ .fodermatch__kibble-info { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr); gap: 24px; align-items: center; padding: 22px; border: 1px solid var(--fm-border); border-radius: 18px; background: #ffffff; } .fodermatch__kibble-image { display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 18px; border: 1px dashed var(--fm-border-strong); border-radius: 14px; background: var(--fm-surface-soft); color: var(--fm-muted); text-align: center; font-size: 13px; line-height: 1.5; } .fodermatch__kibble-content strong { display: block; margin: 0 0 10px; color: var(--fm-text); font-size: 20px; line-height: 1.25; font-weight: 800; } .fodermatch__kibble-content p { margin: 0 0 8px; color: var(--fm-muted); font-size: 15px; line-height: 1.55; } .fodermatch__kibble-content p:first-of-type { color: var(--fm-accent-dark); font-size: 18px; font-weight: 800; } /* ========================================================== FOLD-UD FELTER ========================================================== */ .fodermatch__details { display: grid; gap: 10px; } .fodermatch__details-item { overflow: hidden; border: 1px solid var(--fm-border); border-radius: 14px; background: #ffffff; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .fodermatch__details-item[open] { border-color: var(--fm-border-strong); box-shadow: 0 8px 22px rgba(30, 40, 34, 0.055); } .fodermatch__details-item summary { position: relative; display: flex; align-items: center; min-height: 58px; padding: 15px 54px 15px 18px; color: var(--fm-text); font-size: 15px; line-height: 1.3; font-weight: 800; cursor: pointer; list-style: none; user-select: none; } .fodermatch__details-item summary::-webkit-details-marker { display: none; } .fodermatch__details-item summary::after { content: "+"; position: absolute; top: 50%; right: 18px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fm-accent-soft); color: var(--fm-accent-dark); font-size: 21px; font-weight: 500; line-height: 1; transform: translateY(-50%); transition: transform 0.18s ease, background 0.18s ease; } .fodermatch__details-item[open] summary::after { content: "−"; background: var(--fm-accent); color: #ffffff; } .fodermatch__details-item summary:hover { background: #fafcf9; } .fodermatch__details-item summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(49, 95, 71, 0.14); } .fodermatch__details-content { padding: 0 18px 20px; border-top: 1px solid var(--fm-border); color: var(--fm-muted); } .fodermatch__details-content > p { margin: 16px 0 0; font-size: 14px; line-height: 1.65; } /* ========================================================== ANALYSELISTE ========================================================== */ .fodermatch__analysis-list { margin: 14px 0 0; padding: 0; } .fodermatch__analysis-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--fm-border); } .fodermatch__analysis-list > div:last-child { border-bottom: 0; } .fodermatch__analysis-list dt, .fodermatch__analysis-list dd { margin: 0; } .fodermatch__analysis-list dt { color: var(--fm-muted); font-size: 14px; } .fodermatch__analysis-list dd { color: var(--fm-text); font-size: 14px; font-weight: 800; text-align: right; } /* ========================================================== ARTIKELLINKS ========================================================== */ .fodermatch__article-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } .fodermatch__article-links a { position: relative; display: flex; align-items: center; min-height: 58px; padding: 13px 42px 13px 15px; border: 1px solid var(--fm-border); border-radius: 12px; background: var(--fm-surface-soft); color: var(--fm-accent-dark); font-size: 13px; line-height: 1.35; font-weight: 700; text-decoration: none; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .fodermatch__article-links a::after { content: "↗"; position: absolute; right: 15px; color: var(--fm-accent); font-size: 17px; line-height: 1; } .fodermatch__article-links a:hover { transform: translateY(-1px); background: #ffffff; border-color: var(--fm-accent); } /* ========================================================== DAILY RESULTAT – DESKTOP Giv ét anbefalet produkt mere plads ========================================================== */ .fodermatch__products:has( > .fodermatch__product-card:not([hidden]):only-child ) { grid-template-columns: minmax(0, 1fr); } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]):only-child ) .fodermatch__product-card { width: 100%; max-width: none; } /* ========================================================== DAILY RESULTAT – TABLET ========================================================== */ @media (max-width: 900px) { .fodermatch__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fodermatch__kibble-info { grid-template-columns: 1fr; } .fodermatch__kibble-image { min-height: 150px; } } /* ========================================================== DAILY RESULTAT – MOBIL ========================================================== */ @media (max-width: 700px) { .fodermatch__plan-info { margin: 28px -20px -20px; padding: 28px 20px 22px; } .fodermatch__plan-section { margin-bottom: 34px; } .fodermatch__plan-heading { font-size: 22px; } .fodermatch__benefits { grid-template-columns: 1fr; gap: 10px; } .fodermatch__benefit { display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-areas: "icon title" "icon text"; column-gap: 14px; min-height: 0; padding: 16px; } .fodermatch__benefit-icon { grid-area: icon; width: 58px; height: 58px; flex-basis: 58px; margin: 0; } .fodermatch__benefit-icon svg { width: 32px; height: 32px; } .fodermatch__benefit-title { grid-area: title; align-self: end; margin-bottom: 3px; } .fodermatch__benefit-text { grid-area: text; align-self: start; } .fodermatch__ingredients { grid-template-columns: 1fr; } .fodermatch__kibble-info { gap: 18px; padding: 18px; } .fodermatch__article-links { grid-template-columns: 1fr; } } /* ========================================================== DAILY RESULTAT – MEGET SMÅ SKÆRME ========================================================== */ @media (max-width: 420px) { .fodermatch__plan-info { margin: 26px -16px -16px; padding: 26px 16px 20px; } .fodermatch__benefit { grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; padding: 14px; } .fodermatch__benefit-icon { width: 52px; height: 52px; flex-basis: 52px; } .fodermatch__benefit-icon svg { width: 29px; height: 29px; } .fodermatch__details-item summary { min-height: 54px; padding: 13px 48px 13px 15px; } .fodermatch__details-content { padding: 0 15px 17px; } } /* ========================================================== BENEFIT-IKONER – VERSION 3 Tydeligere og mere detaljerede ========================================================== */ .fodermatch__benefit-icon { width: 78px !important; height: 78px !important; flex: 0 0 78px !important; background: radial-gradient( circle at 35% 30%, #f8fbf8 0%, var(--fm-accent-soft) 72% ) !important; border: 1px solid rgba(49, 95, 71, 0.10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 5px 14px rgba(49, 95, 71, 0.07); } .fodermatch__benefit-icon svg { width: 48px !important; height: 48px !important; } @media (max-width: 700px) { .fodermatch__benefit { grid-template-columns: 64px minmax(0, 1fr) !important; } .fodermatch__benefit-icon { width: 64px !important; height: 64px !important; flex-basis: 64px !important; } .fodermatch__benefit-icon svg { width: 39px !important; height: 39px !important; } } @media (max-width: 420px) { .fodermatch__benefit { grid-template-columns: 58px minmax(0, 1fr) !important; } .fodermatch__benefit-icon { width: 58px !important; height: 58px !important; flex-basis: 58px !important; } .fodermatch__benefit-icon svg { width: 35px !important; height: 35px !important; } } /* ========================================================== BENEFIT-IKONER – PNG-BILLEDER Bruger de godkendte separate ikonfiler fra Shopify Assets ========================================================== */ .fodermatch__benefit-icon { overflow: hidden; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .fodermatch__benefit-icon img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } /* Tidligere SVG-regler er uskadelige, men gælder ikke længere, fordi benefit-ikonerne nu bruger . */ /* ========================================================== PILLEINFO – RIGTIGE PRODUKTBILLEDER ========================================================== */ .fodermatch__kibble-image:has(img) { overflow: hidden; min-height: 0; padding: 0; border-style: solid; background: #ffffff; } .fodermatch__kibble-image img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; border-radius: 13px; } @media (max-width: 700px) { .fodermatch__kibble-image img { max-height: 280px; } } /* ========================================================== DAILY PILLEINFO – TO RIGTIGE BILLEDER ========================================================== */ .fodermatch__kibble-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; } .fodermatch__kibble-photo { overflow: hidden; margin: 0; border: 1px solid var(--fm-border); border-radius: 14px; background: #ffffff; } .fodermatch__kibble-photo img { display: block; width: 100%; height: 190px; object-fit: contain; background: #ffffff; } .fodermatch__kibble-photo figcaption { padding: 10px 12px 12px; border-top: 1px solid var(--fm-border); color: var(--fm-muted); font-size: 12px; line-height: 1.35; text-align: center; } @media (max-width: 700px) { .fodermatch__kibble-gallery { grid-template-columns: 1fr 1fr; } .fodermatch__kibble-photo img { height: 160px; } } @media (max-width: 420px) { .fodermatch__kibble-gallery { grid-template-columns: 1fr; } .fodermatch__kibble-photo img { height: auto; max-height: 280px; } } /* ========================================================== PILLEINFO – STØRRE BILLEDER To billeder side om side på desktop, fuld bredde i sektionen ========================================================== */ .fodermatch__kibble-info { display: block !important; } .fodermatch__kibble-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: 100%; margin: 0 0 24px; } .fodermatch__kibble-photo { overflow: hidden; width: 100%; margin: 0; border: 1px solid var(--fm-border); border-radius: 16px; background: #ffffff; } .fodermatch__kibble-photo img { display: block; width: 100%; height: 320px; object-fit: contain; background: #ffffff; } .fodermatch__kibble-content { max-width: 760px; } @media (max-width: 700px) { .fodermatch__kibble-gallery { gap: 12px; } .fodermatch__kibble-photo img { height: 240px; } } @media (max-width: 520px) { .fodermatch__kibble-gallery { grid-template-columns: 1fr; } .fodermatch__kibble-photo img { height: auto; max-height: 360px; } } /* ========================================================== HOVEDINGREDIENSER – BILLEDER ========================================================== */ .fodermatch__ingredient { overflow: hidden; padding: 0 !important; } .fodermatch__ingredient::before { display: none !important; } .fodermatch__ingredient-image { overflow: hidden; aspect-ratio: 4 / 3; background: #ffffff; border-bottom: 1px solid var(--fm-border); } .fodermatch__ingredient-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .fodermatch__ingredient-content { padding: 18px 20px 20px; } .fodermatch__ingredient-content strong { margin-bottom: 7px; } .fodermatch__ingredient-content p { margin: 0; } @media (max-width: 700px) { .fodermatch__ingredient-image { aspect-ratio: 16 / 10; } } /* ========================================================== RESULTATTOP – PRODUKTBILLEDE + PERSONLIG FODERPLAN Ingen ændring af match- eller fodermængdelogik. Ved ét anbefalet produkt bruges den nye 2-kolonnevisning. Ved flere anbefalinger bevares det almindelige produktgrid. ========================================================== */ .fodermatch__result { width: min(100%, 1120px); } /* Resultatet må gerne være en grid-container. Normalt spænder de eksisterende hovedblokke over begge kolonner. */ .fodermatch__result { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); column-gap: 42px; align-items: start; } .fodermatch__result > .fodermatch__step-number, .fodermatch__result > .fodermatch__question, .fodermatch__result > [data-fodermatch-result-reason], .fodermatch__result > .fodermatch__products, .fodermatch__result > [data-fodermatch-result-feeding], .fodermatch__result > [data-fodermatch-result-actions] { grid-column: 1 / -1; } /* ========================================================== REGISTRER ÉT SYNLIGT PRODUKT :has()-reglen sikrer, at layoutet kun aktiveres, når der ikke ligger to synlige produktkort i containeren. ========================================================== */ .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) { display: contents; } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) > .fodermatch__product-card:not([hidden]) { display: contents; } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) > .fodermatch__product-card:not([hidden]) > .fodermatch__product-content { display: contents; } /* ========================================================== VENSTRE SIDE – STORT PRODUKTBILLEDE ========================================================== */ .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) > .fodermatch__product-card:not([hidden]) > .fodermatch__product-image-link { grid-column: 1; grid-row: 4 / 12; align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 590px; padding: 34px; border: 1px solid var(--fm-border); border-radius: 22px; background: #fafbf9; box-shadow: 0 12px 34px rgba(30, 40, 34, 0.07); } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) > .fodermatch__product-card:not([hidden]) > .fodermatch__product-image-link .fodermatch__product-image { width: 100%; height: 510px; object-fit: contain; } /* ========================================================== HØJRE SIDE – PRODUKT + PLAN ========================================================== */ .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-label { grid-column: 2; grid-row: 4; align-self: end; margin: 4px 0 10px; } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-title { grid-column: 2; grid-row: 5; margin: 0 0 12px; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-price { grid-column: 2; grid-row: 6; margin: 0 0 3px; font-size: 24px; } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-stock { grid-column: 2; grid-row: 7; margin: 0 0 18px; } /* ========================================================== PERSONLIG FODERPLAN – SAMME HØJRE KOLONNE ========================================================== */ .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) ~ [data-fodermatch-result-feeding] { grid-column: 2; grid-row: 8; margin: 0 0 20px !important; padding: 22px 24px !important; border: 1px solid #cfddd3 !important; border-radius: 18px !important; background: linear-gradient( 135deg, #edf4ef 0%, #f7faf7 100% ) !important; box-shadow: 0 10px 26px rgba(49, 95, 71, 0.07); } .fodermatch [data-fodermatch-result-feeding] h3 { margin: 0 0 14px; color: var(--fm-accent-dark); font-size: 17px; line-height: 1.25; font-weight: 800; } .fodermatch [data-fodermatch-result-feeding] p { margin: 0; } .fodermatch [data-fodermatch-result-feeding] p:first-of-type { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: 0 0 10px; color: var(--fm-text); font-size: 17px; line-height: 1.25; } .fodermatch [data-fodermatch-result-grams-day] { color: var(--fm-accent-dark); font-size: clamp(38px, 5vw, 52px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; } .fodermatch [data-fodermatch-result-grams-meal] { margin: 0 0 16px !important; color: var(--fm-muted); font-size: 13px; line-height: 1.5; } .fodermatch [data-fodermatch-result-bag-days], .fodermatch [data-fodermatch-result-delivery-interval] { margin: 8px 0 0 !important; padding: 11px 13px; border: 1px solid rgba(49, 95, 71, 0.11); border-radius: 11px; background: rgba(255, 255, 255, 0.76); color: var(--fm-text); font-size: 13px; line-height: 1.45; } .fodermatch [data-fodermatch-result-bag-days]:empty, .fodermatch [data-fodermatch-result-delivery-interval]:empty { display: none; } /* ========================================================== VARIANT, ANTAL OG KØB DIREKTE UNDER FODERPLANEN ========================================================== */ .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-form { grid-column: 2; grid-row: 9; width: 100%; margin: 0; } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-form:has( .fodermatch__product-variant ) { display: grid; grid-template-columns: minmax(0, 1fr) 140px; column-gap: 14px; align-items: end; } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-form:has( .fodermatch__product-variant ) > .fodermatch__label { grid-column: 1; margin-bottom: 8px; } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-form:has( .fodermatch__product-variant ) > .fodermatch__product-variant { grid-column: 1; margin: 0; } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-form:has( .fodermatch__product-variant ) > .fodermatch__quantity-field { grid-column: 2; grid-row: 1 / 3; margin: 0; } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__quantity-field .fodermatch__quantity-input { width: 100% !important; max-width: none !important; margin: 0 !important; } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-form > .fodermatch__continue-button { grid-column: 1 / -1; margin-top: 14px; } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-content > p:not([class]) { grid-column: 2; grid-row: 10; margin: 14px 0 0; text-align: center; } .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-content > p:not([class]) a { color: var(--fm-accent); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ========================================================== FORDELE / INGREDIENSER / PILLEINFO UNDER TOPPEN ========================================================== */ .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__plan-info { grid-column: 1 / -1; grid-row: 12; width: 100%; margin: 48px 0 0 !important; padding: 42px 0 0 !important; border-top: 1px solid var(--fm-border); background: transparent !important; } /* Resultatknapper under hele foderplanen */ .fodermatch__result > [data-fodermatch-result-actions] { margin-top: 42px; } /* ========================================================== MOBIL / TABLET – PRODUKTBILLEDE FØRST, PLAN DEREFTER ========================================================== */ @media (max-width: 820px) { .fodermatch__result { display: block; } .fodermatch__products: has( > .fodermatch__product-card:not([hidden]) ): not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) { display: block; } .fodermatch__products: has( > .fodermatch__product-card:not([hidden]) ): not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) > .fodermatch__product-card:not([hidden]) { display: block; overflow: hidden; border: 1px solid var(--fm-border); border-radius: 18px; background: #ffffff; box-shadow: 0 10px 30px rgba(20, 38, 27, 0.08); } .fodermatch__products: has( > .fodermatch__product-card:not([hidden]) ): not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) > .fodermatch__product-card:not([hidden]) > .fodermatch__product-image-link { display: flex; min-height: 0; margin: 0; padding: 24px; border: 0; border-radius: 0; box-shadow: none; } .fodermatch__products: has( > .fodermatch__product-card:not([hidden]) ): not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) > .fodermatch__product-card:not([hidden]) > .fodermatch__product-image-link .fodermatch__product-image { height: 330px; } .fodermatch__products: has( > .fodermatch__product-card:not([hidden]) ): not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) > .fodermatch__product-card:not([hidden]) > .fodermatch__product-content { display: flex; padding: 24px; } .fodermatch__products: has( > .fodermatch__product-card:not([hidden]) ): not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__plan-info { margin: 34px -24px -24px !important; padding: 32px 24px 24px !important; } .fodermatch__products ~ [data-fodermatch-result-feeding] { margin: 22px 0 !important; } } @media (max-width: 520px) { .fodermatch__products: has( > .fodermatch__product-card:not([hidden]) ): not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-form: has( .fodermatch__product-variant ) { grid-template-columns: 1fr; } .fodermatch__products: has( > .fodermatch__product-card:not([hidden]) ): not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-form: has( .fodermatch__product-variant ) > .fodermatch__quantity-field { grid-column: 1; grid-row: auto; margin-top: 14px; } .fodermatch [data-fodermatch-result-grams-day] { font-size: 42px; } } /* ========================================================== TYDELIGERE VALG AF POSESTØRRELSE OG ANTAL Kun visuel/tekstlig ændring – ingen ændring af funktionalitet. ========================================================== */ .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-form { padding: 18px; border: 1px solid #cfddd3; border-radius: 18px; background: #ffffff; box-shadow: 0 8px 24px rgba(30, 40, 34, 0.06); } .fodermatch__product-form .fodermatch__label { margin-bottom: 9px; color: var(--fm-text); } .fodermatch__label-main { display: block; color: var(--fm-text); font-size: 15px; line-height: 1.25; font-weight: 800; } .fodermatch__label-help { display: block; margin-top: 4px; color: var(--fm-muted); font-size: 12px; line-height: 1.35; font-weight: 500; } .fodermatch__product-variant { min-height: 58px !important; padding: 12px 42px 12px 15px !important; border: 2px solid var(--fm-accent) !important; border-radius: 13px !important; background-color: #f7faf8 !important; color: var(--fm-text) !important; font-size: 16px !important; font-weight: 700 !important; box-shadow: 0 0 0 3px rgba(49, 95, 71, 0.06); cursor: pointer; } .fodermatch__product-variant:hover { background-color: #f0f6f2 !important; box-shadow: 0 0 0 4px rgba(49, 95, 71, 0.09); } .fodermatch__product-variant:focus { border-color: var(--fm-accent-dark) !important; box-shadow: 0 0 0 4px rgba(49, 95, 71, 0.15) !important; } .fodermatch__quantity-field { display: flex; flex-direction: column; justify-content: flex-end; } .fodermatch__quantity-field .fodermatch__quantity-input { min-height: 58px !important; padding: 10px 12px !important; border: 2px solid var(--fm-border-strong) !important; border-radius: 13px !important; background: #ffffff !important; color: var(--fm-text) !important; font-size: 17px !important; font-weight: 800 !important; text-align: center; } .fodermatch__quantity-field .fodermatch__quantity-input:focus { outline: none; border-color: var(--fm-accent) !important; box-shadow: 0 0 0 4px rgba(49, 95, 71, 0.12); } .fodermatch__product-form > .fodermatch__continue-button { min-height: 56px; margin-top: 17px; font-size: 16px; box-shadow: 0 8px 20px rgba(49, 95, 71, 0.14); } @media (max-width: 520px) { .fodermatch__products:has( > .fodermatch__product-card:not([hidden]) ):not( :has( > .fodermatch__product-card:not([hidden]) ~ .fodermatch__product-card:not([hidden]) ) ) .fodermatch__product-form { padding: 16px; } .fodermatch__label-help { font-size: 12px; } .fodermatch__product-variant, .fodermatch__quantity-field .fodermatch__quantity-input { min-height: 56px !important; } } /* ========================================================== TYDELIG DROPDOWN-PIL I VÆLG POSESTØRRELSE Kun visuel ændring – ingen funktionel ændring ========================================================== */ .fodermatch__product-variant { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke='%23315F47' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 18px 18px !important; padding-right: 46px !important; } /* ========================================================== PILLEINFO – PRODUKTER MED ÉT OFFICIELT PILLEBILLEDE ========================================================== */ .fodermatch__kibble-gallery--single { grid-template-columns: minmax(0, 1fr); max-width: 620px; } .fodermatch__kibble-gallery--single .fodermatch__kibble-photo img { height: 360px; } @media (max-width: 700px) { .fodermatch__kibble-gallery--single { max-width: none; } .fodermatch__kibble-gallery--single .fodermatch__kibble-photo img { height: auto; max-height: 360px; } }